/* Halvard Plow & Ice — layout and craft. Every value comes from assets/tokens.css.
 *
 * THEME. The page is a night shift. Two role sets (--hp-*) are picked by class:
 *   .hp (body)            night roles; site.js adds .is-day at the 05:00 station
 *   .hp-scope-night       always night (Arrival, the service-area panel)
 *   .hp-scope-day         always day (the day half: who / contracts / proof / area)
 * The --hp-* names are role ALIASES of --s-* tokens, re-pointed per scope; that is
 * the theme switch itself (a class toggle with a colour transition, never a tween).
 *
 * Sections (no two share a layout):
 *   1 arrival     full-bleed photo + full-height console strip
 *   2 storm       pinned clock rail + depth ruler + blade-wiped stage (desktop);
 *                 stacked station blocks + sticky clock chip (phone/tablet);
 *                 a static night log (reduced motion)
 *   3 who         typographic index + one swapping tall photo / accordion
 *   4 contracts   kicker + H2 + lede (the one), comparison table / swipe cards
 *   5 proof       draggable filmstrip of visit logs
 *   6 area        full-bleed aerial + solid town panel
 *   7 order       stepped dispatch ticket pinned left on the night field + live dispatch readout
 */

/* ---- theme roles ------------------------------------------------------- */
.hp, .hp-scope-night {
    --hp-field: var(--s-night-field);
    --hp-text: var(--s-night-text);
    --hp-muted: var(--s-night-muted);
    --hp-rule: var(--s-night-rule);
    --hp-rule-strong: var(--s-night-rule-strong);
    --hp-focus: var(--s-night-focus);
    --hp-raised: var(--s-blacktop-raised);
    --hp-panel: var(--s-panel-scrim);
    --hp-well: var(--s-photo-well-night);
}
.hp.is-day, .hp-scope-day {
    --hp-field: var(--s-day-field);
    --hp-text: var(--s-day-text);
    --hp-muted: var(--s-day-muted);
    --hp-rule: var(--s-day-rule);
    --hp-rule-strong: var(--s-day-rule-strong);
    --hp-focus: var(--s-day-focus);
    --hp-raised: var(--s-salt-shade);
    --hp-panel: var(--s-day-field);
    --hp-well: var(--s-photo-well-day);
}

/* ---- base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-nav-h); }
body {
    margin: 0;
    background: var(--hp-field);
    color: var(--hp-text);
    font: var(--s-weight-body) var(--s-step-body)/var(--s-leading-body) var(--s-font-body);
    font-feature-settings: var(--s-figures-body);
    transition: background-color var(--s-dur-theme) var(--s-ease), color var(--s-dur-theme) var(--s-ease);
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
p, h1, h2, h3, h4, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: var(--s-focus-w) solid var(--hp-focus); outline-offset: var(--s-focus-offset); }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp-skip {
    position: absolute; left: var(--s-gutter); top: var(--s-space-2); z-index: var(--s-z-sheet);
    padding: var(--s-space-3) var(--s-space-4); background: var(--s-plow); color: var(--s-btn-ink);
    font-weight: var(--s-weight-label); transform: translateY(-200%);
}
.hp-skip:focus { transform: none; outline-color: var(--s-salt); }
.hp-data {
    font-family: var(--s-font-data); font-weight: var(--s-weight-data);
    font-size: var(--s-step-data); line-height: var(--s-leading-data);
    font-feature-settings: var(--s-figures-data);
}
.hp-sep {
    display: inline-block; width: var(--s-mark-dot); height: var(--s-mark-dot);
    margin-inline: var(--s-space-2); background: currentColor; vertical-align: middle;
}

/* ---- the blade parallelogram button (ring on the element, clip on the span) */
.hp-btn {
    display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer;
    text-decoration: none; color: var(--s-btn-ink); min-height: var(--s-btn-h);
}
.hp-btn__blade {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    min-height: var(--s-btn-h); padding: 0 var(--s-btn-pad-x);
    background: var(--s-btn-bg); clip-path: var(--s-btn-clip);
    font: var(--s-weight-label) var(--s-step-body)/var(--s-leading-tight) var(--s-font-body);
    transition: background-color var(--s-dur-ui) var(--s-ease);
}
.hp-btn:hover .hp-btn__blade, .hp-btn:active .hp-btn__blade { background: var(--s-plow-press); }
.hp-textlink {
    display: inline-flex; align-items: center; gap: var(--s-space-2); min-height: var(--s-touch-min);
    font-weight: var(--s-weight-label); text-decoration: none;
}
.hp-textlink span { text-decoration: underline; text-decoration-thickness: var(--s-rule-w); text-underline-offset: var(--s-space-1); }
.hp-arrow { width: var(--s-space-4); height: var(--s-space-4); }

/* ---- nav --------------------------------------------------------------- */
.hp-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; gap: var(--s-space-5);
    height: var(--s-nav-h); padding: 0 var(--s-gutter);
    background: var(--hp-field); color: var(--hp-text);
    border-bottom: var(--s-rule-w) solid var(--hp-rule);
    transition: background-color var(--s-dur-theme) var(--s-ease), color var(--s-dur-theme) var(--s-ease), border-color var(--s-dur-theme) var(--s-ease);
}
.hp-mark {
    display: inline-flex; align-items: center; min-height: var(--s-touch-min); white-space: nowrap;
    font: var(--s-weight-display-2) var(--s-step-logo)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-logo); text-transform: uppercase; text-decoration: none;
}
.hp-nav__links { display: none; margin-left: auto; }
.hp-nav__links ul { display: flex; gap: var(--s-space-5); }
.hp-nav__links a {
    display: inline-flex; align-items: center; min-height: var(--s-touch-min);
    font-size: var(--s-step-label); font-weight: var(--s-weight-label); text-decoration: none; color: var(--hp-muted);
    transition: color var(--s-dur-ui) var(--s-ease);
}
.hp-nav__links a:hover { color: var(--hp-text); }
.hp-storm-line {
    display: inline-flex; align-items: center; white-space: nowrap; gap: var(--s-space-2); margin-left: auto;
    min-height: var(--s-touch-min); min-width: var(--s-touch-min); text-decoration: none;
    font-size: var(--s-step-label); font-weight: var(--s-weight-label);
}
.hp-storm-line__dot { width: var(--s-mark-dot); height: var(--s-mark-dot); background: var(--s-plow); }
.hp-storm-line__num { font-family: var(--s-font-data); font-weight: var(--s-weight-data); font-feature-settings: var(--s-figures-data); display: none; }
.hp-nav__menu {
    min-height: var(--s-touch-min); min-width: var(--s-touch-min); padding: 0 var(--s-space-4);
    background: none; border: var(--s-rule-w) solid var(--hp-rule-strong); cursor: pointer;
    font-size: var(--s-step-label); font-weight: var(--s-weight-label);
}
@media (min-width: 560px) { .hp-storm-line__num { display: inline; } }
@media (min-width: 1280px) {
    .hp-nav__links { display: block; }
    .hp-storm-line { margin-left: var(--s-space-5); }
    .hp-nav__menu { display: none; }
}

/* ---- menu sheet -------------------------------------------------------- */
.hp-sheet {
    width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--s-gutter);
    border: 0; background: var(--s-blacktop); color: var(--s-salt);
}
.hp-sheet::backdrop { background: var(--s-panel-scrim); }
.hp-sheet__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-space-4); }
.hp-sheet__close {
    min-height: var(--s-touch-min); padding: 0 var(--s-space-4); cursor: pointer;
    background: none; border: var(--s-rule-w) solid var(--s-night-rule-strong); font-weight: var(--s-weight-label);
}
.hp-sheet__list { margin-block: var(--s-space-7); border-top: var(--s-rule-w) solid var(--s-night-rule); }
.hp-sheet__list a {
    display: flex; align-items: center; min-height: var(--s-touch-index-m); text-decoration: none;
    border-bottom: var(--s-rule-w) solid var(--s-night-rule);
    font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display); text-transform: uppercase;
}
.hp-sheet__foot { display: grid; gap: var(--s-space-4); justify-items: start; }
.hp-sheet__tel { display: inline-flex; align-items: center; gap: var(--s-space-2); min-height: var(--s-touch-min); font-weight: var(--s-weight-label); text-decoration: none; }

/* ---- 1 · arrival --------------------------------------------------------- */
.hp-arrival {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h));
    background: var(--hp-well); color: var(--hp-text);
}
.hp-arrival__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hp-arrival__photo picture, .hp-arrival__photo img { width: 100%; height: 100%; }
.hp-arrival__photo img {
    object-fit: cover; object-position: var(--s-hero-focus-m);
    animation: hp-drift var(--s-dur-hero-scale) var(--s-ease-out) both;
}
.hp-arrival__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--s-hero-scrim-m), var(--s-hero-sky-veil-m); }
.hp-arrival__copy {
    display: flex; flex-direction: column;
    min-height: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h));
    padding: var(--s-space-6) var(--s-gutter) var(--s-hero-pad-b);
}
.hp-arrival__title {
    font: var(--s-weight-display) var(--s-hero-title-m)/var(--s-leading-hero) var(--s-font-display);
    letter-spacing: var(--s-track-hero); text-transform: uppercase;
}
.hp-arrival__title span { display: block; }
.hp-arrival__lede { margin-top: var(--s-space-4); max-width: var(--s-measure-lede); font-size: var(--s-step-lede); line-height: var(--s-leading-tight); }
.hp-arrival__dock {
    margin: auto calc(-1 * var(--s-gutter)) calc(-1 * var(--s-hero-pad-b));
    padding: var(--s-space-4) var(--s-gutter) var(--s-hero-pad-b);
    display: grid; gap: var(--s-space-4);
    background: var(--s-night-console); border-top: var(--s-rule-w) solid var(--hp-rule-strong);
}
.hp-ticker {
    display: flex; flex-wrap: wrap; gap: var(--s-space-1) var(--s-space-4);
    font-family: var(--s-font-data); font-size: var(--s-step-ticker); font-feature-settings: var(--s-figures-data); line-height: var(--s-leading-data);
}
.hp-ticker__label { color: var(--s-sodium); flex-basis: 100%; }
.hp-ticker__item { white-space: nowrap; }
.hp-ticker__item + .hp-ticker__item::before {
    content: none; display: inline-block; width: var(--s-mark-dot); height: var(--s-mark-dot);
    margin-inline: var(--s-space-2); background: var(--s-plow); vertical-align: middle;
}
.hp-arrival__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-space-1); }
.hp-arrival__actions .hp-btn { width: 100%; }
.hp-arrival__actions .hp-textlink { justify-content: center; }
.hp-console { display: none; }

@media (max-width: 767px) and (max-height: 700px) {
    /* Safari with toolbars on a 6.3in iPhone leaves ~677px: smaller headline + a tighter dock so the plow shows */
    .hp-arrival__title { font-size: var(--s-hero-title-m-short); }
    .hp-arrival__copy { padding-top: var(--s-space-5); }
    .hp-arrival__dock { padding-top: var(--s-space-3); gap: var(--s-space-3); }
}
@media (min-width: 768px) {
    .hp-arrival__photo::after { background: var(--s-hero-scrim); }
    .hp-arrival__photo img { object-position: var(--s-hero-focus-tab); }
    .hp-arrival__copy { justify-content: flex-end; }
    .hp-arrival__dock { margin: 0; padding: 0; background: none; border: 0; display: block; }
    .hp-ticker__label { flex-basis: auto; margin-right: var(--s-space-3); }
    .hp-ticker { justify-content: flex-start; align-items: center; gap: var(--s-space-1) 0; padding-block: var(--s-space-3); border-top: var(--s-rule-w) solid var(--hp-rule-strong); }
    .hp-ticker__item + .hp-ticker__item::before { content: ""; }
    .hp-arrival__title { font-size: var(--s-step-hero); }
    .hp-ticker { margin: var(--s-space-5) 0 var(--s-space-4); max-width: var(--s-measure-body); }
    .hp-arrival__actions { flex-direction: row; align-items: center; gap: var(--s-space-6); }
    .hp-arrival__actions .hp-btn { width: auto; }
}
@media (min-width: 1280px) {
    .hp-arrival__photo img { object-position: var(--s-hero-focus); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .hp-arrival__photo img { object-position: var(--s-hero-focus-mid); }
}
@media (min-width: 1024px) {
    .hp-arrival { display: grid; grid-template-columns: minmax(0, 1fr) var(--s-console-w); }
    .hp-ticker { display: none; }
    .hp-arrival__lede { margin-block: var(--s-space-5) var(--s-space-6); }
    .hp-console {
        display: flex; flex-direction: column; gap: var(--s-space-5);
        padding: var(--s-space-6) var(--s-space-6) var(--s-hero-pad-b);
        background: var(--s-night-console); border-left: var(--s-rule-w) solid var(--hp-rule-strong);
    }
    .hp-console__head {
        display: flex; justify-content: space-between; align-items: center;
        font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-tight) var(--s-font-body);
        letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--hp-muted);
    }
    .hp-console__live { width: var(--s-mark-dot); height: var(--s-mark-dot); background: var(--s-plow); box-shadow: var(--s-blade-glow); }
    .hp-console__rows { flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); border-top: var(--s-rule-w) solid var(--hp-rule); }
    .hp-console__row {
        display: grid; align-content: end; gap: var(--s-space-1); padding-block: var(--s-space-4);
        border-bottom: var(--s-rule-w) solid var(--hp-rule);
        font-family: var(--s-font-data); font-weight: var(--s-weight-data); font-feature-settings: var(--s-figures-data);
        animation: hp-row-in var(--s-dur-console-step) steps(1, end) backwards;
        animation-delay: calc(var(--s-delay-console) + var(--i) * var(--s-dur-console-step));
    }
    .hp-console__row dt { font-size: var(--s-step-data); color: var(--hp-muted); }
    .hp-console__row dd { font-size: var(--s-step-data-lg); line-height: var(--s-leading-tight); }
    .hp-console__note { font-size: var(--s-step-small); color: var(--hp-muted); }
}
@keyframes hp-drift { from { transform: scale(1); } to { transform: scale(var(--s-scale-hero)); } }
@keyframes hp-row-in { from { opacity: 0; } }

/* ---- 2 · storm night ----------------------------------------------------- */
.hp-storm {
    background: var(--hp-field); color: var(--hp-text);
    transition: background-color var(--s-dur-theme) var(--s-ease), color var(--s-dur-theme) var(--s-ease);
}
.hp-storm__rail { padding: var(--s-section) var(--s-gutter) var(--s-space-7); }
.hp-storm__concept { display: block; margin-bottom: var(--s-space-1); color: var(--s-sodium); }
.hp.is-day .hp-storm__concept { color: var(--hp-muted); }
/* concept + intro are a footnote: under the rail (pinned), on the 18:00 card (stacked) */
.hp-storm__foot, .hp-station__note {
    max-width: var(--s-measure-log); padding-top: var(--s-space-3); border-top: var(--s-rule-w) solid var(--hp-rule);
    font-size: var(--s-step-small); line-height: var(--s-leading-tight); color: var(--hp-muted);
}
.hp-storm__foot { display: none; }
.hp-station__note { margin-top: var(--s-space-3); }
.hp-storm.is-pinned .hp-storm__foot { display: block; }
.hp-storm.is-pinned .hp-station__note { display: none; }
.hp-storm__title {
    font: var(--s-weight-display-2) var(--s-step-h2)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display); text-transform: uppercase;
}
.hp-instruments, .hp-blade, .hp-storm__chip { display: none; }

/* stacked station blocks (phone, tablet, desktop without the pin) */
.hp-storm__frames { display: grid; gap: var(--s-space-7); padding: 0 var(--s-gutter) var(--s-section-foot); }
.hp-station { display: grid; max-width: var(--s-max); margin-inline: auto; width: 100%; scroll-margin-top: calc(var(--s-nav-h) + var(--s-chip-sticky-h)); }
.hp-station__photo { aspect-ratio: 4 / 5; background: var(--hp-well); overflow: hidden; }
.hp-station__photo picture, .hp-station__photo img { width: 100%; height: 100%; object-fit: cover; }
.hp-station__type {
    display: flex; align-items: flex-start; height: var(--s-brine-band); padding: var(--s-space-4);
    background: var(--s-brine-band-stripes), var(--s-blacktop); color: var(--s-salt);
}
.hp-station__type p {
    padding: var(--s-space-1) var(--s-space-2); background: var(--s-blacktop);
    font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-display);
}
.hp-station--type .hp-station__log {
    position: relative; margin: calc(-1 * var(--s-brine-overlap)) var(--s-space-4) 0;
    box-shadow: 0 0 0 var(--s-rule-w) var(--hp-rule-strong);
}
.hp-station__log {
    display: grid; align-content: start; gap: var(--s-space-2); padding: var(--s-space-5);
    background: var(--hp-raised); color: var(--hp-text);
    transition: background-color var(--s-dur-theme) var(--s-ease), color var(--s-dur-theme) var(--s-ease);
}
.hp-station__count { color: var(--hp-muted); }
.hp-station__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-space-3); }
.hp-station__time { font-family: var(--s-font-data); font-weight: var(--s-weight-data-strong); font-size: var(--s-step-data-lg); font-feature-settings: var(--s-figures-data); }
.hp-station__label {
    font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-display);
}
.hp-station__read { color: var(--hp-muted); }
.hp-station__action { max-width: var(--s-measure-log); }
.hp-station__reason { max-width: var(--s-measure-log); color: var(--hp-muted); font-size: var(--s-step-label); }

/* JS stacked mode: the sticky mini clock + depth chip, under the sticky nav */
.hp-storm.is-stacked .hp-storm__chip {
    position: sticky; top: var(--s-nav-h); z-index: var(--s-z-sticky);
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: var(--s-space-4);
    height: var(--s-chip-sticky-h); overflow: hidden; white-space: nowrap;
    margin-bottom: var(--s-space-5); padding: 0 var(--s-gutter);
    background: var(--hp-field); border-block: var(--s-rule-w) solid var(--hp-rule);
    font-family: var(--s-font-data); font-size: var(--s-step-data); font-feature-settings: var(--s-figures-data);
    transition: background-color var(--s-dur-theme) var(--s-ease), color var(--s-dur-theme) var(--s-ease);
}
.hp-storm__chip-time { font-weight: var(--s-weight-data-strong); font-size: var(--s-step-data-lg); }
.hp-storm__chip-time::before {
    content: ""; display: inline-block; width: var(--s-mark-dot); height: var(--s-mark-dot);
    margin-right: var(--s-space-2); background: var(--s-plow); vertical-align: middle;
}

@media (min-width: 768px) {
    .hp-station { grid-template-columns: minmax(0, 1fr) var(--s-measure-log); }
    .hp-station--type { grid-template-columns: minmax(0, 1fr); }
    .hp-station--type .hp-station__log { width: min(var(--s-log-w), calc(100% - 2 * var(--s-space-4))); }
    .hp-station__photo { aspect-ratio: 16 / 10; }
}

/* ---- the pinned stage (desktop + motion: site.js adds .is-pinned) -------- */
.hp-storm.is-pinned .hp-storm__stage {
    position: relative; height: calc(100vh - var(--s-nav-h)); overflow: hidden;
    display: grid; grid-template-columns: var(--s-rail-w) minmax(0, 1fr);
}
.hp-storm.is-pinned .hp-storm__rail {
    display: flex; flex-direction: column; gap: var(--s-space-5); min-height: 0;
    padding: var(--s-space-6) var(--s-space-6) var(--s-space-5);
    border-right: var(--s-rule-w) solid var(--hp-rule);
}
.hp-storm.is-pinned .hp-storm__title { font-size: var(--s-step-h3); }
.hp-storm.is-pinned .hp-instruments {
    flex: 1; min-height: 0; display: grid; gap: var(--s-space-5);
    grid-template-columns: minmax(0, 1fr) var(--s-ruler-w);
}
.hp-inst__label { color: var(--hp-muted); margin-bottom: var(--s-space-3); }

.hp-clock { display: flex; flex-direction: column; min-height: 0; }
.hp-clock__rail {
    position: relative; flex: 1; margin: var(--s-space-2) 0 var(--s-space-7) var(--s-space-1);
    border-left: var(--s-index-rule) solid var(--hp-rule-strong);
}
.hp-clock__tick { position: absolute; left: 0; top: calc(var(--at) * 100%); width: var(--s-space-2); border-top: var(--s-rule-w) solid var(--hp-rule-strong); }
.hp-clock__now {
    position: absolute; left: calc(-1 * var(--s-index-rule)); top: 0; width: var(--s-index-rule);
    height: calc(var(--now) * 100%); background: var(--s-plow);
    transition: height var(--s-dur-ruler-step) var(--s-ease);
}
.hp-clock__stop {
    position: absolute; left: var(--s-space-4); right: 0; top: calc(var(--at) * 100%);
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-space-2);
    transform: translateY(-50%); color: var(--hp-muted);
    transition: color var(--s-dur-ui) var(--s-ease);
}
.hp-clock__stop::before {
    content: ""; position: absolute; top: 50%;
    left: calc(-1 * var(--s-space-4) - var(--s-rail-dot) / 2 - var(--s-index-rule) / 2);
    width: var(--s-rail-dot); height: var(--s-rail-dot); transform: translateY(-50%);
    background: var(--hp-field); border: var(--s-index-rule) solid var(--hp-rule-strong);
}
.hp-clock__stop--pre { transform: none; top: 0; flex-direction: column; align-items: flex-start; }
.hp-clock__stop--pre::before { top: var(--s-space-3); }
.hp-clock__time { font-family: var(--s-font-data); font-size: var(--s-step-data); font-feature-settings: var(--s-figures-data); }
.hp-clock__name { font-size: var(--s-step-small); font-weight: var(--s-weight-label); line-height: var(--s-leading-tight); }
.hp-clock__pre { flex-basis: 100%; margin-top: var(--s-space-1); font-size: var(--s-step-small); line-height: var(--s-leading-tight); }
.hp-clock__stop.is-done, .hp-clock__stop.is-current { color: var(--hp-text); }
.hp-clock__stop.is-done .hp-clock__pre { display: none; }  /* past stations collapse to time + label */
.hp-clock__stop.is-done::before { background: var(--hp-text); border-color: var(--hp-text); }
.hp-clock__stop.is-current .hp-clock__time { font-size: var(--s-step-data-lg); font-weight: var(--s-weight-data-strong); }
.hp-clock__stop.is-current::before { background: var(--s-plow); border-color: var(--s-plow); box-shadow: var(--s-blade-glow); }

.hp-ruler { display: flex; flex-direction: column; min-height: 0; }
.hp-ruler__read { display: grid; gap: var(--s-space-3); }
.hp-ruler__k { display: block; font-size: var(--s-step-small); font-weight: var(--s-weight-label); color: var(--hp-muted); }
.hp-ruler__k::before {
    content: ""; display: inline-block; width: var(--s-ruler-mark); height: var(--s-ruler-needle-h);
    margin-right: var(--s-space-2); background: var(--s-plow); vertical-align: middle;
}
.hp-ruler__read p + p .hp-ruler__k::before { background: var(--hp-text); }
.hp-ruler__v {
    display: block; font: var(--s-weight-data) var(--s-step-ruler)/var(--s-leading-display) var(--s-font-data);
    font-feature-settings: var(--s-figures-data);
}
.hp-ruler__scale { position: relative; flex: 1; margin: var(--s-space-6) 0 var(--s-space-7); border-left: var(--s-index-rule) solid var(--hp-rule-strong); }
.hp-ruler__tick {
    position: absolute; left: 0; bottom: calc(var(--at) * 100%); width: var(--s-space-2); height: 0;
    display: flex; align-items: center; border-top: var(--s-rule-w) solid var(--hp-rule-strong);
    font-family: var(--s-font-data); font-size: var(--s-step-small); color: var(--hp-muted);
    text-indent: calc(var(--s-space-4) + var(--s-space-2)); white-space: nowrap;
}
.hp-ruler__tick--in { width: var(--s-space-4); }
.hp-ruler__needle, .hp-ruler__pave {
    position: absolute; left: calc(-1 * var(--s-space-2)); bottom: calc(var(--snow) / var(--max) * 100%);
    width: calc(100% + var(--s-space-2)); height: var(--s-ruler-needle-h); background: var(--s-plow);
    transform: translateY(50%); box-shadow: var(--s-blade-glow);
    transition: bottom var(--s-dur-ruler-step) var(--s-ease);
}
.hp-ruler__pave {
    left: auto; right: 0; width: var(--s-ruler-mark); height: var(--s-ruler-mark); bottom: calc(var(--pave) / var(--max) * 100%);
    background: var(--hp-text); box-shadow: none; clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.hp-storm.is-pinned .hp-storm__frames { position: relative; display: block; padding: 0; height: 100%; }
.hp-storm.is-pinned .hp-station { position: absolute; inset: 0; display: block; max-width: none; }
.hp-storm.is-pinned .hp-station__photo { position: absolute; inset: 0; z-index: 1; aspect-ratio: auto; }
.hp-storm.is-pinned .hp-station__photo img { transform-origin: 30% 50%; object-position: var(--s-focus-stage); }
.hp-storm.is-pinned #s-2100 .hp-station__photo img { object-position: var(--s-focus-stage-flakes); }
.hp-storm.is-pinned .hp-station--type { inset: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hp-storm.is-pinned .hp-station__log {
    position: absolute; left: var(--s-space-6); bottom: var(--s-space-6); z-index: 3;
    width: min(var(--s-log-w), calc(100% - 2 * var(--s-space-6)));
    background: var(--hp-panel); visibility: hidden;
}
.hp-storm.is-pinned .hp-station.is-current .hp-station__log { visibility: visible; }
.hp-storm.is-pinned .hp-station__read { display: none; }
.hp-storm.is-pinned .hp-blade {
    display: block; position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
    width: var(--s-blade-w); background: var(--s-plow); box-shadow: var(--s-blade-glow);
    visibility: hidden; pointer-events: none;
}

/* reduced motion: the static night log replaces the frames */
.hp-nightlog { display: none; }
.hp-nightlog__table { width: 100%; border-collapse: collapse; }
.hp-nightlog__table caption { text-align: left; color: var(--s-sodium); padding-bottom: var(--s-space-4); }
.hp-nightlog__table th, .hp-nightlog__table td { padding: var(--s-space-4) var(--s-space-4) var(--s-space-4) 0; border-bottom: var(--s-rule-w) solid var(--hp-rule); text-align: left; vertical-align: top; }
.hp-nightlog__table thead th { font-size: var(--s-step-small); font-weight: var(--s-weight-label); color: var(--hp-muted); }
.hp-nightlog__what { display: flex; gap: var(--s-space-4); }
.hp-nightlog__what > span { color: var(--hp-muted); max-width: var(--s-measure-body); }
.hp-nightlog__what strong { color: var(--hp-text); font-weight: var(--s-weight-label); display: block; }
.hp-nightlog__thumb { flex: none; width: var(--s-thumb-w); aspect-ratio: 4 / 5; overflow: hidden; background: var(--hp-well); }
.hp-nightlog__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-nightlog__thumb--brine { background: var(--s-brine-band-stripes), var(--s-blacktop-raised); }

/* ---- 3 · who we clear ---------------------------------------------------- */
.hp-who { background: var(--hp-field); color: var(--hp-text); padding: var(--s-section) var(--s-gutter) var(--s-section-foot); }
.hp-who__bar, .hp-who__grid { max-width: var(--s-max); margin-inline: auto; }
.hp-who__bar {
    display: grid; gap: var(--s-space-2); padding-bottom: var(--s-space-4);
    border-bottom: var(--s-index-rule) solid var(--hp-text);
}
.hp-who__title {
    font: var(--s-weight-data) var(--s-step-data)/var(--s-leading-data) var(--s-font-data);
    font-feature-settings: var(--s-figures-data);
}
.hp-who__hint { color: var(--hp-muted); font-size: var(--s-step-label); }
.hp-index__item { border-bottom: var(--s-rule-w) solid var(--hp-rule); }
.hp-index__word {
    display: flex; align-items: baseline; gap: var(--s-space-4); width: 100%;
    min-height: var(--s-touch-index-m); padding: var(--s-space-3) 0; cursor: pointer;
    background: none; border: 0; text-align: left; color: var(--hp-muted);
    transition: color var(--s-dur-ui) var(--s-ease);
}
.hp-index__n { min-width: var(--s-space-6); }
.hp-index__name {
    font: var(--s-weight-display-2) var(--s-step-index)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-hero);
}
.hp-index__word:hover, .hp-index__item.is-open .hp-index__word { color: var(--hp-text); }
.hp-index__item.is-open .hp-index__n::before {
    content: ""; display: inline-block; width: var(--s-mark-dot); height: var(--s-mark-dot);
    margin-right: var(--s-space-2); background: var(--s-plow); vertical-align: middle;
}
.hp-index__panel { display: grid; gap: var(--s-space-4); padding-bottom: var(--s-space-5); }
.hp-index__item:not(.is-open) .hp-index__panel { display: none; }
.hp-index__inline { aspect-ratio: 4 / 5; max-width: var(--s-index-photo-w); overflow: hidden; background: var(--hp-well); }
.hp-index__inline img { width: 100%; height: 100%; object-fit: cover; }
.hp-index__line { max-width: var(--s-measure-body); font-size: var(--s-step-lede); line-height: var(--s-leading-tight); }
.hp-index__spec { display: grid; gap: var(--s-space-2); }
.hp-index__spec div { display: grid; grid-template-columns: var(--s-space-9) minmax(0, 1fr); gap: var(--s-space-4); padding-top: var(--s-space-2); border-top: var(--s-rule-w) solid var(--hp-rule); }
.hp-index__spec dt { font-size: var(--s-step-small); font-weight: var(--s-weight-label); color: var(--hp-muted); text-transform: uppercase; letter-spacing: var(--s-track-label); }
.hp-who__photo { display: none; }

@media (min-width: 1024px) {
    .hp-who__bar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .hp-who__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--s-index-photo-w); gap: var(--s-space-8); align-items: stretch; }
    .hp-index__inline { display: none; }
    .hp-index__panel { padding-left: calc(var(--s-space-6) + var(--s-space-4)); }
    .hp-index__spec { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-space-5); }
    .hp-index__spec div { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-1); }
    .hp-who__photo {
        display: block; position: sticky; top: calc(var(--s-nav-h) + var(--s-space-6));
        margin-top: var(--s-space-6); overflow: hidden; background: var(--hp-well);
    }
    .hp-who__frame { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
    .hp-who__frame picture, .hp-who__frame img { width: 100%; height: 100%; object-fit: cover; }
    .hp-who__frame.is-active { clip-path: inset(0); z-index: 2; transition: clip-path var(--s-dur-wipe) var(--s-ease); }
    .hp-who__frame.is-prev { clip-path: inset(0); z-index: 1; }
    .hp-who__frame.is-entering { transition: none; clip-path: inset(100% 0 0 0); z-index: 2; }
}

/* ---- 4 · contracts ------------------------------------------------------- */
.hp-contracts { background: var(--hp-field); color: var(--hp-text); padding: var(--s-section) var(--s-gutter) var(--s-section-foot); border-top: var(--s-rule-w) solid var(--hp-rule); }
.hp-wrap { max-width: var(--s-max); margin-inline: auto; }
.hp-kicker { font-size: var(--s-step-label); font-weight: var(--s-weight-label); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--hp-muted); }
.hp-h2 {
    margin-top: var(--s-space-3);
    font: var(--s-weight-display-2) var(--s-step-h2)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display); text-transform: uppercase;
}
.hp-lede { margin-top: var(--s-space-4); max-width: var(--s-measure-lede); font-size: var(--s-step-lede); line-height: var(--s-leading-tight); color: var(--hp-muted); }
.hp-spec { display: none; }
.hp-spec__tag {
    display: inline-block; margin-top: var(--s-space-1); padding: var(--s-space-1) var(--s-space-2);
    border: var(--s-rule-w) solid currentColor;
    font: var(--s-weight-label) var(--s-step-small)/var(--s-leading-tight) var(--s-font-body); letter-spacing: var(--s-track-label); text-transform: uppercase;
}
.hp-plans { margin-top: var(--s-space-7); }
.hp-plans__switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--s-rule-w) solid var(--hp-text); }
.hp-plans__seg {
    min-height: var(--s-touch-min); background: none; border: 0; cursor: pointer;
    font-size: var(--s-step-label); font-weight: var(--s-weight-label);
}
.hp-plans__seg + .hp-plans__seg { border-left: var(--s-rule-w) solid var(--hp-text); }
.hp-plans__seg[aria-pressed="true"] { background: var(--hp-text); color: var(--hp-field); }
.hp-plans__row {
    display: flex; gap: var(--s-space-4); margin: var(--s-space-4) calc(-1 * var(--s-gutter)) 0;
    padding: 0 var(--s-gutter) var(--s-space-3); overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-gutter); scrollbar-width: none;
}
.hp-plans__row::-webkit-scrollbar { display: none; }
.hp-plan {
    flex: none; width: var(--s-card-w-m); scroll-snap-align: start; padding: var(--s-space-5);
    background: var(--s-ticket); border: var(--s-rule-w) solid var(--hp-rule);
}
.hp-plan.is-rec { border-top: calc(var(--s-band-w) * 2) solid var(--s-plow); }
.hp-plan__name {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-3);
    font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display); text-transform: uppercase;
}
.hp-plan__name .hp-spec__tag { margin-top: 0; }
.hp-plan dl { margin-top: var(--s-space-4); display: grid; }
.hp-plan dl div { padding-block: var(--s-space-3); border-top: var(--s-rule-w) solid var(--hp-rule); }
.hp-plan dt { font-size: var(--s-step-small); font-weight: var(--s-weight-label); color: var(--hp-muted); }
.hp-process { margin-top: var(--s-space-8); }
.hp-process__title { font: var(--s-weight-label) var(--s-step-h3)/var(--s-leading-tight) var(--s-font-body); padding-bottom: var(--s-space-3); border-bottom: var(--s-index-rule) solid var(--hp-text); }
.hp-process__steps { display: grid; gap: var(--s-space-5); margin-top: var(--s-space-5); }
.hp-process__steps li { display: grid; gap: var(--s-space-2); }
.hp-process__n { font-size: var(--s-step-data-lg); }
.hp-process__steps h4 { font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display); text-transform: uppercase; }
.hp-process__steps p { color: var(--hp-muted); max-width: var(--s-measure-log); }

@media (min-width: 768px) {
    .hp-plans { display: none; }
    .hp-spec { display: table; width: 100%; margin-top: var(--s-space-8); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
    .hp-spec th, .hp-spec td { padding: var(--s-space-4) var(--s-space-5); text-align: left; vertical-align: top; border-bottom: var(--s-rule-w) solid var(--hp-rule); }
    /* One focal column (round 5): the recommended plan is wider, raised on the ticket white, set larger and
       full-strength; the other two read as quieter reference columns; the row labels are body size. */
    .hp-spec tbody th { width: var(--s-spec-label-w); padding-left: 0; font-weight: var(--s-weight-label); font-size: var(--s-step-body); line-height: var(--s-leading-tight); }
    .hp-spec thead th.is-rec, .hp-spec tbody td.is-rec { width: var(--s-spec-rec-w); }
    .hp-spec tbody td:not(.is-rec) { color: var(--hp-muted); font-size: var(--s-step-body); line-height: var(--s-leading-tight); }
    .hp-spec tbody td, .hp-spec tbody th { padding-block: var(--s-space-5); }
    .hp-spec tbody td.is-rec { background: var(--s-ticket); font-size: var(--s-step-lede); line-height: var(--s-leading-tight); font-weight: var(--s-weight-label); }
    .hp-spec thead th.is-rec { padding-top: var(--s-space-6); }
    .hp-spec thead th.is-rec .hp-spec__name { font-size: var(--s-step-h2-sm); }
    .hp-spec thead th:not(.is-rec) .hp-spec__name { color: var(--hp-muted); }
    .hp-spec tbody tr:hover td:not(.is-rec), .hp-spec tbody tr:hover th { color: var(--hp-text); }
    .hp-spec thead th { vertical-align: bottom; border-bottom: var(--s-index-rule) solid var(--hp-text); }
    .hp-spec__name { display: block; font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display); text-transform: uppercase; }
    .hp-spec__corner { border-bottom: var(--s-index-rule) solid var(--hp-text); }
    .hp-spec thead .is-rec { background: var(--s-plow); color: var(--s-btn-ink); border-bottom-color: var(--s-plow); }
    .hp-spec tbody .is-rec { box-shadow: inset var(--s-band-w) 0 0 var(--s-plow), inset calc(-1 * var(--s-band-w)) 0 0 var(--s-plow); }
    .hp-spec tbody tr:last-child .is-rec { box-shadow: inset var(--s-band-w) 0 0 var(--s-plow), inset calc(-1 * var(--s-band-w)) 0 0 var(--s-plow), inset 0 calc(-1 * var(--s-band-w)) 0 var(--s-plow); }
    .hp-process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-space-7); }
}

/* ---- 5 · proof of service ------------------------------------------------ */
.hp-proof { background: var(--hp-raised); color: var(--hp-text); padding-block: var(--s-proof-pad-top) var(--s-section-foot); }
.hp-proof__bar {
    max-width: var(--s-max); margin: 0 auto var(--s-space-4); padding: 0 var(--s-gutter);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-space-3) var(--s-space-5);
}
.hp-proof__strip-label { color: var(--hp-muted); }
/* The lead card reads top-down: docket line, title, lede, then the card legend pinned to the foot,
   so no band of empty blacktop sits between the kicker and the title (r5 review). */
.hp-visit.hp-visit--lead {
    container-type: inline-size;
    display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s-space-4);
    padding: var(--s-space-6) var(--s-space-5); background: var(--s-blacktop); color: var(--s-salt); border-color: var(--s-blacktop);
}
.hp-visit__lead-k { color: var(--s-sodium); }
.hp-visit--lead .hp-proof__lede { color: var(--s-brine); }
.hp-proof__title { font: var(--s-weight-display-2) var(--s-proof-title)/var(--s-leading-display) var(--s-font-display); letter-spacing: var(--s-track-display); text-transform: uppercase; }
.hp-visit__legend { margin-top: auto; padding-top: var(--s-space-5); }
@media (max-width: 767px) { .hp-visit.hp-visit--lead { align-self: start; } }  /* phone: the legend sits under the lede, not at the foot of a stretched card */
.hp-visit__legend-k { color: var(--s-sodium); padding-bottom: var(--s-space-2); border-bottom: var(--s-rule-w) solid var(--s-night-rule-strong); }
.hp-visit__legend ul { list-style: none; margin: 0; padding: 0; }
.hp-visit__legend li {
    padding-block: var(--s-space-2); border-bottom: var(--s-rule-w) solid var(--s-night-rule);
    font-family: var(--s-font-data); font-size: var(--s-step-data); line-height: var(--s-leading-data); color: var(--s-brine);
}
.hp-proof__ctl { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-space-2); }
.hp-proof__count { margin-right: var(--s-space-3); color: var(--hp-muted); white-space: nowrap; }
.hp-proof__btn {
    display: grid; place-items: center; width: var(--s-chip-h); height: var(--s-chip-h); cursor: pointer;
    background: var(--hp-field); border: var(--s-rule-w) solid var(--hp-text);
    transition: background-color var(--s-dur-ui) var(--s-ease), color var(--s-dur-ui) var(--s-ease);
}
.hp-proof__btn:hover:not(:disabled) { background: var(--hp-text); color: var(--hp-field); }
.hp-proof__btn:disabled { cursor: default; color: var(--hp-muted); border-color: var(--hp-rule-strong); }
.hp-proof__btn svg { width: var(--s-space-4); height: var(--s-space-4); }
.hp-strip {
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
    scroll-padding-inline: var(--s-gutter); outline-offset: calc(-1 * var(--s-focus-w));
}
.hp-strip::-webkit-scrollbar { display: none; }
.hp-strip.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.hp-strip__list { display: flex; gap: var(--s-space-4); padding-inline: var(--s-gutter); width: max-content; }
.hp-visit {
    width: var(--s-card-w-m); scroll-snap-align: start; display: grid; align-content: start;
    background: var(--s-ticket); border: var(--s-rule-w) solid var(--hp-rule);
}
.hp-visit__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hp-well); }
.hp-visit__photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.hp-visit__stamp {
    position: absolute; left: var(--s-space-3); bottom: var(--s-space-3); display: flex; align-items: center;
    padding: var(--s-space-1) var(--s-space-2); background: var(--s-panel-scrim); color: var(--s-salt);
}
.hp-visit__stamp .hp-sep { background: var(--s-plow); }
.hp-visit__log { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-space-4); padding: var(--s-space-4) var(--s-space-4) 0; }
.hp-visit__log div { padding-block: var(--s-space-2); border-bottom: var(--s-rule-w) solid var(--hp-rule); }
.hp-visit__log dt { font-size: var(--s-step-small); color: var(--hp-muted); }
.hp-visit__log dd { font-family: var(--s-font-data); font-size: var(--s-step-data); font-feature-settings: var(--s-figures-data); }
.hp-visit__note { padding: var(--s-space-3) var(--s-space-4) var(--s-space-4); font-size: var(--s-step-label); }
@media (min-width: 768px) {
    .hp-visit { width: var(--s-card-w); }
    .hp-strip__list { padding-inline: max(var(--s-gutter), calc((100vw - var(--s-max)) / 2 + var(--s-gutter))); }
    .hp-strip { scroll-padding-inline: max(var(--s-gutter), calc((100vw - var(--s-max)) / 2 + var(--s-gutter))); }
}

/* ---- 6 · service area ---------------------------------------------------- */
.hp-area { display: grid; background: var(--hp-field); color: var(--hp-text); }
.hp-area__photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--hp-well); }
.hp-area__photo picture, .hp-area__photo img { width: 100%; height: 100%; object-fit: cover; }
.hp-area__panel { background: var(--s-blacktop); color: var(--hp-text); padding: var(--s-space-7) var(--s-gutter); display: grid; gap: var(--s-space-4); }
.hp-area__title { font: var(--s-weight-display-2) var(--s-step-h2)/var(--s-leading-display) var(--s-font-display); letter-spacing: var(--s-track-display); text-transform: uppercase; }
.hp-area__lede { color: var(--hp-muted); max-width: var(--s-measure-log); }
.hp-towns { margin-top: var(--s-space-3); border-top: var(--s-rule-w) solid var(--hp-rule-strong); }
.hp-towns div {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-space-1) var(--s-space-4);
    padding-block: var(--s-space-3); border-bottom: var(--s-rule-w) solid var(--hp-rule);
}
.hp-towns__name { font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display); text-transform: uppercase; }
.hp-towns__win { color: var(--hp-muted); }
.hp-area__concept { color: var(--s-sodium); }
@media (min-width: 768px) {
    .hp-area { grid-template-areas: "stack"; min-height: calc(100vh - var(--s-nav-h)); }
    .hp-area__photo { grid-area: stack; aspect-ratio: auto; }
    .hp-area__panel {
        grid-area: stack; align-self: center; justify-self: start; z-index: 1;
        width: min(var(--s-log-w), calc(100% - 2 * var(--s-gutter))); margin: var(--s-space-8) var(--s-gutter);
        padding: var(--s-space-6);
    }
}

/* ---- 7 · work order -------------------------------------------------------- */
.hp-order {
    display: grid; gap: var(--s-space-7);
    background: var(--s-close-field); color: var(--s-close-ink); padding: var(--s-section) var(--s-gutter) var(--s-section-foot);
}
@media (min-width: 1024px) {
    .hp-order {
        grid-template-columns: var(--s-order-split); gap: var(--s-order-gap); align-items: start;
        padding-inline: max(var(--s-gutter), calc((100% - var(--s-max)) / 2));
        padding-top: var(--s-section-foot);
    }
    /* The ticket is already pinned over the foot of the town photo when the map ends: the order
       starts the moment the area does, never after an empty night band. */
    .hp-order .hp-ticket { max-width: none; margin-inline: 0; position: relative; z-index: 1; margin-top: calc(-1 * (var(--s-section-foot) + var(--s-ticket-tuck))); }
    .hp-order .hp-ticket__head { grid-template-columns: minmax(0, 1fr) auto; }
    .hp-order .hp-ticket__label { grid-column: 1 / -1; }
    .hp-order .hp-order__title { font-size: var(--s-order-title); }
    .hp-readout { position: sticky; top: calc(var(--s-nav-h) + var(--s-space-7)); }
    .hp-order .hp-ticket__head .hp-data { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .hp-order { grid-template-columns: var(--s-order-split-mid); }
}
/* below desktop the town panel above is a solid night block: one foot step between it and the ticket, not two */
@media (max-width: 1023px) { .hp-order { padding-top: var(--s-section-foot); } }
.hp-order__title {
    margin-top: var(--s-space-6);
    font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-hero) var(--s-font-display);
    letter-spacing: var(--s-track-hero); text-transform: uppercase; text-wrap: balance;
}
.hp-order__body { max-width: var(--s-measure-lede); margin-top: var(--s-space-4); font-size: var(--s-step-lede); line-height: var(--s-leading-tight); }
.hp-ticket {
    --hp-focus: var(--s-day-focus);
    position: relative; width: 100%; max-width: var(--s-ticket-w); margin-inline: auto; padding: var(--s-ticket-pad);
    padding-top: calc(var(--s-ticket-pad) + var(--s-ticket-strip-h));
    background: var(--s-ticket); color: var(--s-ticket-ink);
}
/* the tear strip: the ticket's one orange band, perforated along its top edge */
.hp-ticket::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--s-ticket-strip-h);
    background: radial-gradient(circle at 50% 0, var(--s-close-field) var(--s-ticket-hole), var(--s-ticket-strip) calc(var(--s-ticket-hole) + var(--s-rule-w))) 0 0 / var(--s-ticket-perf) 100% repeat-x;
    transition: clip-path var(--s-dur-tear) var(--s-ease);
}
.hp-ticket::after {
    content: ""; position: absolute; left: 0; right: 0; top: var(--s-ticket-strip-h);
    border-top: var(--s-index-rule) dashed var(--s-ticket-ink);
    transition: clip-path var(--s-dur-tear) var(--s-ease);
}
.hp-ticket.is-arming::before, .hp-ticket.is-arming::after { clip-path: inset(0 100% 0 0); }
.hp-ticket__head {
    display: grid; gap: var(--s-space-1) var(--s-space-5); padding-bottom: var(--s-space-4);
    border-bottom: var(--s-index-rule) solid var(--s-ticket-ink);
}
.hp-ticket__label { font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display); text-transform: uppercase; }
.hp-ticket__k { color: var(--s-ticket-muted); margin-right: var(--s-space-2); }
.hp-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-space-2); margin-top: var(--s-space-5); font-size: var(--s-step-small); }
.hp-stepper li { padding-top: var(--s-space-2); border-top: var(--s-band-w) solid var(--s-ticket-line); color: var(--s-ticket-muted); line-height: var(--s-leading-tight); }
.hp-stepper li span:last-child { display: none; }
.hp-stepper li.is-done { border-top-color: var(--s-ticket-ink); color: var(--s-ticket-ink); }
.hp-stepper li.is-current { border-top-color: var(--s-ticket-ink); color: var(--s-ticket-ink); font-weight: var(--s-weight-label); }
.hp-ticket__progress { margin-top: var(--s-space-3); color: var(--s-ticket-muted); }
.hp-ticket__progress:empty { display: none; }
.hp-step { margin: var(--s-space-6) 0 0; padding: 0; border: 0; min-width: 0; }
.hp-step legend { padding: 0; margin-bottom: var(--s-space-4); }
.hp-step__title { display: block; font: var(--s-weight-display-2) var(--s-step-h3)/var(--s-leading-display) var(--s-font-display); text-transform: uppercase; }
.hp-step__hint { color: var(--s-ticket-muted); font-size: var(--s-step-label); }
.hp-ticket.is-stepped .hp-step:not(.is-current) { display: none; }
.hp-chips { display: flex; flex-wrap: wrap; gap: var(--s-space-2); }
.hp-chip, .hp-trigger { position: relative; cursor: pointer; }
.hp-chip input, .hp-trigger input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hp-chip span {
    display: inline-flex; align-items: center; min-height: var(--s-chip-h); padding: 0 var(--s-space-4);
    border: var(--s-rule-w) solid var(--s-ticket-line); font-weight: var(--s-weight-label); font-size: var(--s-step-label);
    transition: background-color var(--s-dur-ui) var(--s-ease), color var(--s-dur-ui) var(--s-ease);
}
.hp-chip input:checked + span { background: var(--s-chip-on-bg); color: var(--s-chip-on-ink); border-color: var(--s-chip-on-bg); }
.hp-chip input:focus-visible + span, .hp-trigger:has(input:focus-visible) { outline: var(--s-focus-w) solid var(--s-day-focus); outline-offset: var(--s-focus-offset); }
.hp-triggers { display: grid; gap: var(--s-space-2); }
.hp-trigger { display: grid; grid-template-columns: var(--s-space-9) minmax(0, 1fr); align-items: center; gap: var(--s-space-4); min-height: var(--s-chip-h); padding: var(--s-space-3) var(--s-space-4); border: var(--s-rule-w) solid var(--s-ticket-line); }
.hp-trigger__in { font-size: var(--s-step-data-lg); font-weight: var(--s-weight-data-strong); }
.hp-trigger__text { font-size: var(--s-step-label); line-height: var(--s-leading-tight); }
.hp-trigger:has(input:checked) { background: var(--s-chip-on-bg); color: var(--s-chip-on-ink); border-color: var(--s-chip-on-bg); }
.hp-fields { display: grid; gap: var(--s-space-5); }
.hp-field { display: grid; gap: var(--s-space-1); }
.hp-field label { font-family: var(--s-font-data); font-size: var(--s-step-data); color: var(--s-ticket-muted); text-transform: uppercase; }
.hp-field input, .hp-field select {
    width: 100%; min-height: var(--s-touch-min); padding: var(--s-space-2) 0; border: 0; border-radius: 0;
    border-bottom: var(--s-index-rule) solid var(--s-ticket-line); background: transparent; font-size: var(--s-step-body);
}
.hp-field input:focus-visible, .hp-field select:focus-visible { outline: var(--s-focus-w) solid var(--s-day-focus); outline-offset: var(--s-focus-offset); border-bottom-color: var(--s-ticket-line-focus); }
.hp-field input[aria-invalid="true"], .hp-field select[aria-invalid="true"] { border-bottom-color: var(--s-error-day); }
.hp-field__hint { font-size: var(--s-step-small); color: var(--s-ticket-muted); }
.hp-err { color: var(--s-error-day); font-size: var(--s-step-label); font-weight: var(--s-weight-label); }
.hp-err:empty { display: none; }
.hp-step .hp-err { margin-top: var(--s-space-3); }
.hp-ticket__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-space-4); margin-top: var(--s-space-7); }
.hp-ticket__back { margin-right: auto; min-height: var(--s-touch-min); padding: 0 var(--s-space-2); background: none; border: 0; cursor: pointer; font-weight: var(--s-weight-label); text-decoration: underline; text-underline-offset: var(--s-space-1); }
.hp-ticket__sent { margin-top: var(--s-space-4); font-weight: var(--s-weight-label); }
.hp-ticket__sent:empty { display: none; }
.hp-ticket__sent:not(:empty) { padding: var(--s-space-4); background: var(--s-chip-on-bg); color: var(--s-chip-on-ink); }
/* Next is ink, so the orange blade is the submit alone */
.hp-btn--ink .hp-btn__blade, .hp-btn--ink:hover .hp-btn__blade, .hp-btn--ink:active .hp-btn__blade { background: var(--s-chip-on-bg); color: var(--s-chip-on-ink); }

/* the dispatch readout: the page ends on the console it opened with */
.hp-readout { --hp-focus: var(--s-night-focus); width: 100%; max-width: var(--s-ticket-w); margin-inline: auto; }
.hp-readout__head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-space-2) var(--s-space-4);
    padding-bottom: var(--s-space-3); border-bottom: var(--s-rule-w) solid var(--s-close-rule-strong);
    font-family: var(--s-font-data); font-size: var(--s-step-data); text-transform: uppercase; color: var(--s-sodium);
}
.hp-readout__live { display: inline-flex; align-items: center; gap: var(--s-space-2); color: var(--s-close-muted); text-transform: none; }
.hp-readout .hp-console__live { display: inline-block; width: var(--s-mark-dot); height: var(--s-mark-dot); background: var(--s-plow); box-shadow: var(--s-blade-glow); }
.hp-readout__rows { margin: 0; }
.hp-readout__row {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; gap: var(--s-space-4);
    padding-block: var(--s-space-4); border-bottom: var(--s-rule-w) solid var(--s-close-rule);
}
.hp-readout__row dt { font-size: var(--s-step-small); color: var(--s-close-muted); }
.hp-readout__row dd {
    margin: 0; font-family: var(--s-font-data); font-size: var(--s-step-data-lg); line-height: var(--s-leading-tight);
    font-feature-settings: var(--s-figures-data); color: var(--s-close-muted); overflow-wrap: anywhere;
    transition: color var(--s-dur-ui) var(--s-ease);
}
.hp-readout__row.is-set dd { color: var(--s-close-ink); }
.hp-readout__row--line a { display: inline-flex; align-items: center; min-height: var(--s-touch-min); color: inherit; text-decoration: underline; text-decoration-color: var(--s-close-rule-strong); text-underline-offset: var(--s-space-1); }
.hp-readout__note { margin-top: var(--s-space-5); max-width: var(--s-measure-lede); font-size: var(--s-step-small); line-height: var(--s-leading-tight); color: var(--s-close-muted); }
@media (min-width: 1024px) {
    .hp-readout { max-width: none; margin: 0; padding-top: var(--s-ticket-strip-h); }
    .hp-readout__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-1); padding-block: var(--s-space-4) var(--s-space-5); }
    .hp-readout__row dd { font-size: var(--s-readout-value); }
}
@media (min-width: 768px) {
    .hp-ticket__head { grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; }
    .hp-stepper li span:last-child { display: inline; }
    .hp-triggers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hp-trigger { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; padding: var(--s-space-4); }
    .hp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-field--wide { grid-column: 1 / -1; }
}

/* ---- footer ------------------------------------------------------------- */
.hp-foot { --hp-focus: var(--s-night-focus); background: var(--s-blacktop-deep); color: var(--s-salt); padding: var(--s-space-8) var(--s-gutter) var(--s-space-6); }
.hp-foot__grid { max-width: var(--s-max); margin-inline: auto; display: grid; gap: var(--s-space-6); }
.hp-foot__k { margin: var(--s-space-4) 0 var(--s-space-1); font-size: var(--s-step-small); font-weight: var(--s-weight-label); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-brine); }
.hp-foot__link, .hp-foot__list a { display: inline-flex; align-items: center; min-height: var(--s-touch-min); }
.hp-foot__list--credits span, .hp-foot__small { color: var(--s-brine); font-size: var(--s-step-small); }
.hp-foot__legal { max-width: var(--s-max); margin: var(--s-space-7) auto 0; padding-top: var(--s-space-4); border-top: var(--s-rule-w) solid var(--s-night-rule); color: var(--s-brine); font-size: var(--s-step-small); }
@media (min-width: 1024px) { .hp-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); } }

/* ---- reduced motion: a designed static version ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
    .hp-storm__frames, .hp-storm__chip, .hp-instruments { display: none !important; }
    .hp-nightlog { display: block; padding: 0 var(--s-gutter) var(--s-section-foot); }
    .hp-storm__foot { display: block; margin-top: var(--s-space-4); }
    .hp-nightlog__table { max-width: var(--s-max); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
    .hp-nightlog__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .hp-nightlog__table tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--s-space-1) var(--s-space-4); padding-block: var(--s-space-4); border-bottom: var(--s-rule-w) solid var(--hp-rule); }
    .hp-nightlog__table th, .hp-nightlog__table td { padding: 0; border: 0; }
    .hp-nightlog__what { grid-column: 1 / -1; }
    .hp-nightlog__table td[data-label]::before { content: attr(data-label); display: block; color: var(--hp-muted); font-family: var(--s-font-body); font-size: var(--s-step-small); }
    .hp-nightlog__table tbody th { align-self: end; font-size: var(--s-step-data-lg); }
}