/* Tokens follow dozza/docs/design-system.md: color is state. In the race that
   means rust = blocked, mint = back in service, violet = Dash. The two teams
   are violet (with Dozza) and its complement, marigold (without). */
:root {
  --paper: #F6F6F9;
  --sheet: #FFFFFF;
  --rule: #DCDEE3;
  --faint: #E9EAEF;
  --ash: #8A8D99;
  --graphite: #5F6272;
  --ink: #151724;
  --ink-2: #1C1F31;   /* raised surface on ink */
  --ink-rule: #34384F; /* hairline on ink */
  --night: #07080E;    /* the story's ground at night */
  --mist: #B4B8C8;     /* secondary text on ink */
  --haze: #CBCFDB;     /* body text on ink */

  --violet: #6F70FB;
  --violet-deep: #4947C5;
  --mint: #23CF8D;
  --mint-deep: #00774B;
  --amber: #F7BE2B;
  --rust: #D65A1F;
  --rust-deep: #9A3A0C;
  --rust-bright: #E0662A; /* rust as text on ink, where the deep twin can't be read */
  --marigold: #F7BE2B;      /* the app's amber */
  --marigold-mid: #E29A00;  /* marks on paper and on the marigold face */
  --marigold-dark: #A86E00; /* marigold for large type and marks on the marigold face */
  --marigold-deep: #845400; /* marigold as small text on paper */

  --ink-blue: #0078BF; --ink-violet: #6F70FB; --ink-marigold: #FFB511; --ink-orange: #FF6C2F; --ink-yellow: #FFE800; --ink-pink: #FF48B0; --paper-c: #F7EEDF; /* riso inks */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", "SF Mono", Menlo, monospace;
  --wrap: 1280px;
  --pad: 32px;
  --nav: 56px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Every beat is a stop: a scroll comes to rest on the next beat and can't fly past it. */
html.has-stops { scroll-snap-type: y mandatory; } /* only once the beat stops exist */
.beat-stop { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
.cta { scroll-snap-align: end; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--violet); color: var(--sheet); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- type ---------- */
.label, .num { font-family: var(--mono); font-stretch: 87%; font-weight: 400; font-variant-numeric: tabular-nums; }
.label { font-size: 11px; color: var(--graphite); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; font: 600 14px var(--sans);
  text-decoration: none; border: 1px solid var(--ink); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: transparent; color: var(--paper); }
.tri { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--rust); flex: none; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; height: var(--nav); background: #E4DBD9; color: var(--ink); border-bottom: 1px solid var(--ink); transition: background .5s, color .5s, border-color .5s; }
html:is(.is-night, .is-end) .nav { background: #121833; color: var(--paper); border-bottom-color: var(--ink-rule); }
.nav__in { display: flex; align-items: center; gap: 32px; height: 100%; }
.wordmark { font-weight: 800; font-stretch: 68%; font-size: 30px; letter-spacing: -.01em; text-decoration: none; line-height: 1; }
.nav__cta { margin-left: auto; }
.nav .btn--violet { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--violet { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn--violet:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- the opening frame: the headline, beside the race at 06:15 ---------- */
.hero__title { font-size: clamp(52px, 5.8vw, 84px); line-height: .95; font-weight: 800; font-stretch: 62%; letter-spacing: -.004em; word-spacing: .08em; }
.hero__lede { margin-top: 12px; font-size: 19px; line-height: 1.45; color: var(--haze); max-width: 44ch; }

/* ---------- the story: a daylight scene across the stage, one panel per beat on the right ---------- */
.story {
  --stage: #E4DBD9; /* the paper the scene is printed on, the same as its sky */
  --pin-top: var(--nav);
  background: var(--stage); color: var(--ink);
}
.story .hero__lede { color: rgba(21, 23, 36, .82); }
.story__grid { position: relative; --out: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; min-height: calc(var(--beats, 10) * 64vh + 100vh - var(--nav)); }
.story__pin, .panels { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav)); grid-row: 1; }
/* The scene fills the whole stage, edge to edge; the story floats over its right side. */
.story__pin { grid-column: 1 / -1; margin: 0 calc(var(--out) * -1); padding: 0; z-index: 0; }
.panels { grid-column: 8 / -1; z-index: 2; }

.race { position: relative; height: 100%; margin: 0; display: flex; flex-direction: column; }
.race__top { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 36px; margin: 24px 0 0 var(--out); }
.race__issue { display: none; }
.race__issue .num { font-size: 12px; color: var(--graphite); }
.race__fault { display: flex; align-items: center; gap: 10px; }

/* The scene: a daylight screen print in flat layers. Depth is the order of the
   layers, each a step nearer and stronger in color. */
.mtn { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #E4DBD9; }
.mtn svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The camera: each beat moves in on the face it's about. Phones keep the wide shot. */
@media (min-width: 761px) {
  .mtn svg { transform-origin: 0 0; transform: var(--cam, none); transition: transform 1.2s cubic-bezier(.65, 0, .25, 1); }
}

/* Riso inks. Every printed shape multiplies onto the paper below it. */
/* (the riso inks live on :root so the sections after the story can use them too) */
.ink { mix-blend-mode: multiply; }
.ink--blue { fill: var(--ink-blue); }
.ink--violet { fill: var(--ink-violet); }
.ink--orange { fill: var(--ink-orange); }
.ink--marigold { fill: var(--ink-marigold); }
.ink--dots-marigold { fill: url(#dots-marigold); }
.ink--yellow { fill: var(--ink-yellow); }
.ink--pink { fill: var(--ink-pink); }
.ink--dots-blue { fill: url(#dots-blue); }
.ink--dots-orange { fill: url(#dots-orange); }
.ink--dots-yellow { fill: url(#dots-yellow); }
.ink--dots-violet { fill: url(#dots-violet); }
.ink-fill--violet-deep { fill: var(--violet-deep); }
.ink-fill--blue { fill: var(--ink-blue); }
.ink-fill--orange { fill: var(--ink-orange); }
.ink-fill--marigold { fill: var(--marigold-mid); }
.ink-fill--yellow { fill: var(--ink-yellow); }
.scene__paper { fill: var(--paper-c); }
.scene__dusk { opacity: calc(var(--dusk, 0) * .42) !important; }
.scene__sun-dusk { opacity: calc(var(--dusk, 0) * .8); }
.scene__night { fill: #121833; transition: opacity .3s; }
.scene__dim { fill: #121833; pointer-events: none; transition: opacity .3s; }
.scene__stars { fill: #FFF8E6; transition: opacity .3s; }
.scene__moon { fill: #FFF3D6; transition: opacity .3s; }
.scene__night, .scene__dim, .scene__stars, .scene__moon { opacity: 0; } /* dark only once the clock says so, never on load */
/* At night the words over the sky turn light (on phones they sit on paper, so they stay dark). */
@media (min-width: 761px) {
  .story :is(.panel__h, .panel__p) { transition: color .3s; }
  .story.is-night .panel__h { color: var(--paper); }
  .story.is-night .panel__p { color: var(--haze); }
}
.scene__grain { mix-blend-mode: multiply; opacity: .1; pointer-events: none; }
.mtn__pole { stroke: var(--ink); stroke-width: 3; }
.mtn__flag { fill: var(--ink); transition: fill .3s; }
.mtn__flag.is-won { fill: var(--violet); }
.mtn__tent { fill: var(--marigold); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; opacity: 0; transition: opacity .4s; } /* hidden until evening, never on load */

.route { transition: opacity .4s; }
/* One route in the spotlight at a time; a finished route never dims. */
.route__stub { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 6; opacity: .7; }
.route__stub, .route__climber { transition: opacity .3s; }
.race:not(.is-running) :is(.route__stub, .route__glow, .route__trail) { opacity: 0; }
.route__glow { display: none; }
.story.is-night .route__trail { stroke: var(--paper); }
.route__trail { fill: none; stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linejoin: round; stroke-linecap: round; stroke: var(--ink); }
.route__mark { display: none; }
.route__mark.is-on { opacity: 0; }
.route__flag { transform: scale(var(--flag-scale, 1)); fill: #FFFFFF; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.route__flagn { font: 700 12px var(--mono); font-stretch: 87%; fill: var(--ink); stroke: none; }
.mtn__glow { fill: url(#phone-glow); opacity: 0; pointer-events: none; }
.route__flag.is-on { opacity: 1; }
/* Names carry a white outline so they read over rock and snow alike. */

.route__climber { fill: var(--violet); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.route--without .route__climber { fill: var(--marigold); }
.route__climber .fig__head { fill: var(--paper-c); }
.route__climber .fig__pack { fill: var(--ink); }
.route__climber .fig--sit, .route__climber .fig--top, .route--without.is-blocked .route__climber .fig--stand, .route.is-done .route__climber .fig--stand { display: none; }
.route--without.is-blocked .route__climber .fig--sit, .route.is-done .route__climber .fig--top { display: inline; }
.route__climber .fig__arms { fill: none; stroke-width: 3; stroke-linecap: round; stroke: var(--ink); }
.race__stat { display: grid; grid-template-columns: auto auto; column-gap: 40px; transition: opacity .3s; }
.race:not(.is-running) .race__stat { opacity: 0; }
/* On desktop the team timers live on the mountain; the clock stands alone. */
.race__stat { display: none; }
.route__tagbox { fill: var(--violet); stroke: var(--ink); stroke-width: 1.2; }
.route--without .route__tagbox { fill: var(--marigold); }
.route__tag { font: 600 15px var(--mono); font-stretch: 87%; font-variant-numeric: tabular-nums; fill: #FFFFFF; }
.route--without .route__tag { fill: var(--ink); }
.route__tag, .route__tagbox { transition: opacity .3s; }
.race:not(.is-started) :is(.route__tag, .route__tagbox) { opacity: 0; }
/* The clock waits off-stage until the story starts. */
.race__top { transition: opacity .3s; }
.race:not(.is-started) .race__top { opacity: 0; }
.lane-stat { display: flex; align-items: baseline; gap: 10px; font: 13px var(--mono); font-variant-numeric: tabular-nums; font-stretch: 87%; color: var(--graphite); white-space: nowrap; }
.lane-stat span { color: var(--graphite); }
.lane-stat span { justify-self: start; align-self: flex-start; padding: 0 .3em; }
.lane-stat--without span { background: var(--marigold); color: var(--ink); font-weight: 600; }
.lane-stat--with span { background: var(--violet); color: #FFFFFF; font-weight: 600; }
.lane-stat b { font-size: 28px; line-height: 1; letter-spacing: -.02em; font-weight: 400; color: var(--ink); }
.lane-stat--without b { display: inline-block; min-width: 8.6em; }

/* the stage: one panel per beat, stacked in place and crossfaded. */
.panel {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; align-content: start; padding: 15vh 0 24px;
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .35s, transform .35s, visibility 0s .35s;
}
.panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s; }
/* The copy sits on a paper plate, so it reads over the scene without fading it. */
.panel__copy { display: flex; flex-direction: column; gap: 14px; max-width: 440px; } /* the screen sits right under the words */
.panel__h { font-size: clamp(30px, 2.9vw, 40px); line-height: .98; font-weight: 800; font-stretch: 68%; letter-spacing: .005em; word-spacing: .06em; text-wrap: balance; }
/* The team a beat is about, in its route's colour. */
.team { white-space: nowrap; }
.team::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .22em; vertical-align: .12em; background: var(--team-ink); border: max(1px, .04em) solid var(--ink); }
.team--yellow { --team-ink: var(--marigold); }
.team--purple { --team-ink: var(--violet); }
.phone--slack { transition: background .4s, color .4s, border-color .4s; }
.story.is-night .phone--slack { background: var(--ink-2); color: var(--paper); border-color: var(--ink-rule); }
.story.is-night .phone--slack .phone__bar { border-bottom-color: var(--ink-rule); }
.story.is-night .phone--slack :is(.chip, .muted) { color: var(--mist); }
.story.is-night .phone--slack .alert { background: transparent; border-color: var(--rust-bright); }
.story.is-night .phone--slack .alert__t { color: var(--rust-bright); }
.story.is-night .phone--slack .tri { border-bottom-color: var(--rust-bright); }
.panel__p { font-size: 19px; line-height: 1.45; color: rgba(21, 23, 36, .78); max-width: 40ch; }

/* The last line: the scene steps back and the line takes the width. */
.panel--result .panel__h { font-size: clamp(44px, 4.2vw, 60px); }
.story__pin { transition: opacity .5s; }
.story.is-final .race__top { visibility: hidden; }

/* the tech's phone: what the operator actually sees */
.phone { width: 100%; max-width: 440px; background: var(--sheet); color: var(--ink); }
.panel { --card-shadow: var(--ink); }
.panel[data-tag="with"] { --card-shadow: var(--violet); }
.panel[data-tag="without"] { --card-shadow: var(--marigold); }
.panel :is(.phone, .alert--solo) { box-shadow: 6px 6px 0 var(--card-shadow); }
.phone.dz, .phone.sk { background: #FBF8F3; }
/* The playbook card that steps through all six steps; the screens share one cell, so
   the card keeps the height of the tallest and only its contents change. */
.dz--cycle { display: grid; }
.dz__screen { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .16s; }
.dz__screen.is-on { opacity: 1; visibility: inherit; transition: opacity .3s .14s; } /* the old step clears before the next one comes in */
.dz__checks { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.dz__checks li { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border: 1px solid var(--rule); font-size: 16px; transition: border-color .2s; }
.dz__checks li.is-ticked { border-color: var(--ink); }
.dz__checks i { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--ink); flex: none; transition: background .12s; }
.dz__checks .is-ticked i { background: var(--ink); }
.dz__checks .is-ticked i::after { content: "✓"; color: var(--sheet); font: 700 13px/1 var(--sans); }
/* What the tech is doing: ticks, typing, a shutter, an upload, a tap on the button. */
.dz__screen .is-pending { visibility: hidden; }
.dz__primary { position: relative; transition: opacity .2s, transform .1s; }
.dz__primary.is-off { opacity: .32; }
.dz__primary.is-pressed { transform: scale(.98); }
.is-pressed::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: var(--violet); opacity: .5; animation: dz-tap .35s ease-out forwards; pointer-events: none; }
.dz__checks li.is-pressed::after { left: 24px; }
@keyframes dz-tap { from { transform: scale(.3); } to { transform: scale(1.1); opacity: 0; } }
.dz__reading b { font-weight: 400; min-width: 1px; }
.dz__caret { align-self: center; width: 3px; height: 46px; margin-left: -8px; background: var(--violet); animation: dz-blink .8s steps(2, jump-none) infinite; }
@keyframes dz-blink { from { opacity: 1; } to { opacity: 0; } }
.dz__needle { transition: left .45s cubic-bezier(.3, 1.3, .6, 1); }
.dz__screen .dz__needle.is-pending { visibility: inherit; left: 0; opacity: 0; }
.dz__shot { position: relative; overflow: hidden; }
.dz__photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.dz__flash { position: absolute; inset: 0; background: #fff; animation: dz-flash .3s ease-out forwards; }
@keyframes dz-flash { from { opacity: 1; } to { opacity: 0; } }
.dz__upload { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 26px; margin-top: 8px; font: 12px var(--mono); font-stretch: 87%; color: var(--graphite); }
.dz__upload > span { position: absolute; left: 0; }
.dz__uploaded { color: var(--violet-deep); font-weight: 600; }
.dz__bar { flex: none; width: 58%; height: 4px; margin-left: auto; background: var(--rule); }
.dz__bar i { display: block; height: 100%; width: 0; background: var(--violet); }
.dz__upload:not(.is-pending) .dz__bar i { width: 100%; transition: width .85s linear; }
.dz__primary.dz__swap { display: grid; place-items: center; }
.dz__swap > span { grid-area: 1 / 1; }
/* The button stays in one place from step to step, at the foot of the card. */
.dz__screen .dz__body { flex: 1; }
.dz__screen .dz__primary { margin-top: auto; }
.dz__screen .dz__body > :nth-last-child(2) { margin-bottom: 20px; }
.dz__screen .dz__spacer { flex: none; height: 56px; } /* the progress bar stays put on the completed screen */
.dz__screen .dz__end { margin-top: auto; }
.dz__screen .dz__end > *, .dz__screen .dz__end .dz__primary { margin-top: 0; }
.dz__verdict.dz__verdict--ok { color: var(--violet-deep); }
.dz__verdict.dz__verdict--ok i { background: var(--violet); }
.phone--slack { border: 1px solid var(--ink); }
.phone--slack .phone__bar { border-bottom-color: var(--rule); }

.phone__bar { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--faint); font-size: 12px; }
.app { font-size: 15px; font-weight: 700; font-stretch: 75%; }
.chip { font: 11px var(--mono); font-stretch: 87%; color: var(--graphite); }
.scr { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
/* Slack, as it looks: Lato, rounded avatars, day dividers, a composer at the foot. */
.sk { --sk-ink: #1D1C1D; --sk-grey: #616061; --sk-line: #DDDDDD; display: flex; flex-direction: column; background: #fff; color: var(--sk-ink); font-family: Lato, "Helvetica Neue", Arial, sans-serif; border: 1px solid var(--ink); overflow: hidden; }
.sk__head { display: flex; align-items: center; justify-content: space-between; height: 49px; padding: 0 16px; border-bottom: 1px solid var(--sk-line); }
.sk__head b { font-size: 18px; font-weight: 900; }
.sk__members { display: flex; align-items: center; gap: 0; height: 28px; padding: 0 8px 0 4px; border: 1px solid var(--sk-line); border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--sk-grey); }
.sk__members i { width: 18px; height: 18px; margin-right: -4px; border: 2px solid #fff; border-radius: 5px; background: #E8912D; }
.sk__members i:nth-child(2) { background: #2BAC76; }
.sk__members i:nth-child(3) { background: #36C5F0; margin-right: 6px; }
.sk__body { display: flex; flex-direction: column; padding: 12px 0 16px; }
.sk__msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 8px 20px; font-size: 15px; line-height: 1.47; }
.sk__av { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: #fff; font-weight: 700; font-size: 16px; }
.sk__av--sam { background: #2BAC76; }
.sk__av--toni { background: #E8912D; }
.sk__h { display: flex; align-items: baseline; gap: 8px; line-height: 1.2; }
.sk__h b { font-weight: 900; }
.sk__h span { font-size: 12px; color: var(--sk-grey); }
.sk__day { position: relative; display: flex; justify-content: center; margin: 8px 0 4px; }
.sk__day::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--sk-line); }
.sk__day span { position: relative; padding: 0 16px; height: 28px; line-height: 26px; border: 1px solid var(--sk-line); border-radius: 24px; background: #fff; font-size: 13px; font-weight: 700; }
.sk__compose { display: flex; align-items: center; justify-content: space-between; height: 44px; margin: 0 16px 16px; padding: 0 12px; border: 1px solid #BBBBBB; border-radius: 8px; font-size: 15px; color: #868686; }
.sk__compose em { font-style: normal; font-size: 14px; color: #BBBBBB; }

.scr .label { color: var(--graphite); }
.muted { color: var(--graphite); }
.small { font-size: 13px; }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 2px solid var(--rust); }
.alert .tri { margin-top: 5px; }
/* The fault on its own: no app chrome around it. */
.alert--solo { width: 100%; max-width: 440px; padding: 20px 22px; background: #FBF8F3; border: 1px solid var(--ink); border-left: 6px solid var(--rust); }
.alert--solo .alert__t { font-size: 26px; }
.alert__t { font-size: 22px; line-height: 1.1; font-weight: 700; font-stretch: 75%; color: var(--rust-deep); }

/* The Dozza operator app, as it ships: white, square, ink type, colour only for state. */
.dz { zoom: .84; max-width: 524px; background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); font-family: var(--sans); }
.dz__head { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 6px; }
.dz__ctl { width: 44px; height: 44px; display: grid; place-items: center; font-size: 28px; line-height: 1; color: var(--ink); flex: none; }
.dz__title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dz__title b { font-size: 14px; font-weight: 600; }
.dz__title span, .dz__count span, .dz__eyebrow, .dz__verdict, .dz__recorded { font: 11px/16px var(--mono); font-stretch: 87%; letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); }
.dz__title span, .dz__unit { text-transform: none; letter-spacing: 0; }
.dz__count { display: flex; flex-direction: column; align-items: flex-end; }
.dz__count b { font: 600 13px var(--mono); font-stretch: 87%; }
.dz__prog { display: flex; gap: 4px; padding: 0 16px; }
.dz__prog i { flex: 1; height: 4px; background: var(--rule); }
.dz__prog i.is-done { background: var(--ink); }
.dz__prog i.is-now { background: var(--violet); }
.dz__prog.is-complete i { background: var(--violet); }
.dz__body { display: flex; flex-direction: column; padding: 24px 16px 20px; }
.dz__eyebrow + .dz__step { margin-top: 6px; }
.dz__step { font-size: 28px; line-height: 1.15; font-weight: 600; font-stretch: 100%; letter-spacing: -.01em; }
.dz__text { margin-top: 8px; font-size: 16px; line-height: 1.4; }
.dz__text + .dz__eyebrow { margin-top: 24px; }
.dz__reading { display: flex; align-items: baseline; gap: 10px; padding-bottom: 4px; border-bottom: 2px solid var(--violet); font: 56px/1 var(--mono); font-stretch: 87%; letter-spacing: -.03em; }
.dz__reading span { font-size: 20px; letter-spacing: 0; color: var(--graphite); }
.dz__verdict { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; color: var(--rust-deep); }
.dz__verdict i, .dz__recorded i { width: 8px; height: 8px; background: var(--rust); }
.dz__range { position: relative; height: 28px; margin-top: 14px; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 2px no-repeat; }
.dz__band { position: absolute; left: 25%; width: 50%; top: 8px; height: 12px; background: var(--faint); border-inline: 1px dashed var(--graphite); }
.dz__needle { position: absolute; left: calc(var(--v) * 100%); top: 0; bottom: 0; width: 3px; background: var(--ink); }
.dz__rangel { position: relative; height: 16px; margin-top: 4px; font: 11px var(--mono); font-stretch: 87%; color: var(--ink); }
.dz__rangel > * { position: absolute; transform: translateX(-50%); }
.dz__rangel b { font-weight: 400; }
.dz__rangel b:first-child { left: 25%; } .dz__rangel span { left: 50%; color: var(--graphite); } .dz__rangel b:last-child { left: 75%; }
.dz__primary { display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 24px; background: var(--ink); color: var(--sheet); font-size: 16px; font-weight: 600; }
.dz__link { margin-top: 12px; text-align: center; font-size: 14px; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.dz__shot { display: grid; place-items: center; height: 96px; margin-top: 20px; border: 1px dashed var(--rule); font-size: 16px; color: var(--graphite); text-align: center; padding: 0 24px; }
.dz__dock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 16px; }
.dz__quiet { display: grid; place-items: center; height: 40px; border: 1px solid var(--rule); font-size: 13px; }
.dz__quiet--rust { border-color: var(--rust); color: var(--rust-deep); }
.dz__chat { gap: 0; }
.dz__me { align-self: flex-end; max-width: 82%; padding: 12px 14px; background: var(--ink); color: var(--sheet); font-size: 16px; line-height: 1.4; }
.dz__who { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--ink); }
.dz__who i { width: 8px; height: 8px; background: var(--violet); }
.dz__who + .dz__text { margin-top: 6px; }
.dz__pb { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 14px 14px 0; border: 1px solid var(--ink); }
.dz__pb b { font-size: 18px; font-weight: 600; }
.dz__pb > span:not(.dz__primary) { font: 12px var(--mono); font-stretch: 87%; color: var(--graphite); }
.dz__pb .dz__primary { margin: 14px -14px 0; height: 48px; }
.dz__ask { display: flex; align-items: center; height: 48px; margin: 0 16px 16px; padding: 0 14px; border: 1px solid var(--rule); font-size: 15px; color: var(--graphite); }
.dz__spacer { height: 32px; }
.dz__outcome { display: flex; align-items: center; gap: 14px; }
.dz__mark { width: 40px; height: 40px; display: grid; place-items: center; background: var(--violet); color: #FFFFFF; font-size: 22px; flex: none; }
.dz__recorded { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--violet-deep); }
.dz__recorded i { background: var(--violet); }
.dz__end { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dz__end .dz__primary { margin-top: 12px; }
.dz__option { display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 12px; border: 1px solid var(--ink); font-size: 16px; font-weight: 500; }

.hero__race { display: inline-block; margin-top: 8px; font: 600 16px var(--sans); color: var(--ink); text-underline-offset: 4px; }
/* The arrow keeps nudging downward: scroll this way. */
.hero__arrow { display: inline-block; margin-left: .1em; animation: hero-nudge 1.5s cubic-bezier(.45, 0, .3, 1) infinite; }
/* The same cue between beats, under the words and the card. It fades in once the reader
   has had time with the beat. */
.next { justify-self: start; margin: -8px 0 0 -6px; padding: 6px; background: none; border: 0; color: inherit; font: 600 16px/1 var(--sans); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
.next.is-on { opacity: 1; visibility: inherit; transition: opacity .4s; }
.story.is-night .next { color: var(--paper); }
@keyframes hero-nudge { 0%, 100% { transform: translateY(-1px); } 45% { transform: translateY(7px); } 65% { transform: translateY(1px); } }

/* contact: the address, and nothing else */
.cta { position: relative; background: var(--ink); color: var(--paper); padding: 128px 0 56px; }
/* The page ends on a navy ridge, the ground the story stood on. */
.cta__ridge { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: 64px; fill: var(--ink); }
.cta__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: stretch; }
.cta__head { padding-top: 20px; } /* the headline's cap line meets the first field */
.cta__title { font-size: clamp(48px, 4.6vw, 64px); line-height: .95; font-weight: 800; font-stretch: 62%; letter-spacing: -.004em; word-spacing: .08em; text-wrap: balance; }
.cta__lede { margin-top: 20px; font-size: 18px; line-height: 1.45; color: var(--mist); max-width: 36ch; }
.cta__fine { grid-column: 1 / -1; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ink-rule); font-size: 13px; color: var(--mist); }
.cta__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.cta__form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mist); }
.cta__form :is(input, textarea) { padding: 0 14px; border: 1px solid var(--ink-rule); background: var(--ink-2); color: var(--paper); font: 16px/1.4 var(--sans); }
.cta__form input { height: 48px; }
.cta__form textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.cta__wide { grid-column: 1 / -1; }
.cta__form ::placeholder { color: var(--ash); }
.cta__form :is(input, textarea):focus { outline: 2px solid var(--violet); outline-offset: 0; border-color: var(--violet); }
.cta__captcha { grid-column: 1 / -1; min-height: 78px; }
.cta__honey { position: absolute; left: -9999px; }
.cta__send { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.btn--violet { height: 48px; padding: 0 28px; background: var(--violet); border-color: var(--violet); color: var(--sheet); font-size: 16px; }
.btn--violet:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
.btn--violet:disabled { opacity: .6; cursor: default; }
.cta__status { font-size: 14px; color: var(--mist); }
.cta__status.is-ok { color: var(--mint); }
.cta__status.is-bad { color: var(--rust-bright); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .panel { grid-template-columns: 1fr; gap: 28px; }
  .story__grid { gap: 48px; }
}
@media (max-width: 760px) {
  :root { --pad: 20px; }
  .nav__cta { margin-left: auto; height: 34px; padding: 0 12px; font-size: 13px; }
  /* On a phone the scene fills the screen: the words sit in the sky, the card stands at the
     foot, and the timers ride beside the climbers. */
  .nav { position: relative; }
  .story { --pin-top: 0px; }
  .story__pin, .panels { top: 0; height: 100vh; height: 100svh; }
  .story__grid { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; padding: 0; }
  .story__pin, .panels { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .panels { margin: 0 var(--pad); }
  .race { display: block; }
  .race__top { display: none; }
  .route__tag { font-size: var(--tag-size, 15px); }
  .scene__moon { transform: translate(50px, 150px); } /* clear of the summit's tag */
  .mtn svg { isolation: isolate; background: #E4DBD9; /* the inks print on this paper, not the green behind */ position: absolute; left: 0; top: -40%; height: 140%; transition: transform .6s cubic-bezier(.65, 0, .25, 1); }
  .race:not(.is-started) .mtn svg { transform: translateY(var(--hero-drop, 0)); }
  .story__grid { min-height: calc(var(--beats, 9) * 30vh + 100svh); } /* shorter swipes between beats than on desktop */
  .panel { grid-template-rows: auto 1fr auto auto; gap: 0; padding: 20px 0 10px; align-content: stretch; }
  .panel__copy { min-height: 0; }
  .panel > .phone, .panel > .alert--solo { grid-row: 3; }
  .panel > .next { grid-row: 4; margin: 8px 0 0 -6px; }
  .next { color: var(--paper); } /* it sits on the dark hills */
  /* First page: the words in the sky, the scroll link on the hills below the mountain. The
     page opens with the nav above the stage, so the link stays clear of the fold. */
  .panel--hero { padding-bottom: calc(var(--nav) + 14px); }
  .panel--hero .panel__copy { display: contents; }
  .panel--hero .hero__lede { margin-top: 12px; }
  .panel--hero .hero__race { grid-row: 4; justify-self: start; margin: 0; color: var(--paper); }
  .panel--result { padding-bottom: 76px; } /* above the ridge that rises into the contact section */

  .hero__title { font-size: 44px; }
  .hero__lede { font-size: 16px; }
  .nav .btn { height: 30px; padding: 0 10px; font-size: 12px; }
  /* Cards keep real text sizes on a phone (nothing under 11px); they fit by being tighter. */
  .phone, .phone.dz { min-height: 0; zoom: 1; width: 100%; max-width: none; }
  .phone__bar { height: 40px; padding: 0 14px; }
  .scr { padding: 12px 14px 14px; }
  .alert__t { font-size: 20px; }
  .sk__head { height: 40px; padding: 0 12px; }
  .sk__head b { font-size: 16px; }
  .sk__members { height: 24px; font-size: 12px; }
  .sk__body { padding: 6px 0 8px; }
  .sk__msg { padding: 5px 12px; font-size: 14px; line-height: 1.35; grid-template-columns: 32px minmax(0, 1fr); }
  .sk__av { width: 32px; height: 32px; font-size: 14px; }
  .sk__day { margin: 2px 0 0; }
  .sk__day span { height: 22px; line-height: 20px; padding: 0 12px; font-size: 12px; }
  .sk__compose { height: 34px; margin: 0 12px 10px; font-size: 14px; }
  .dz__head { height: 44px; padding: 0 4px; }
  .dz__ctl { width: 34px; height: 34px; font-size: 24px; }
  .dz__title b { font-size: 14px; }
  .dz__title span, .dz__count span, .dz__eyebrow, .dz__verdict, .dz__recorded { font-size: 11px; line-height: 14px; }
  .dz__prog { padding: 0 12px; }
  .dz__step { font-size: 20px; }
  .dz__text { margin-top: 4px; font-size: 14px; line-height: 1.35; }
  .dz__me { padding: 8px 10px; font-size: 14px; line-height: 1.35; }
  .dz__who { margin-top: 10px; }
  .dz__pb { margin-top: 8px; padding: 8px 10px 0; }
  .dz__pb b { font-size: 15px; }
  .dz__pb .dz__primary { margin: 8px -10px 0; height: 38px; }
  .dz__checks { gap: 6px; margin-top: 10px; }
  .dz__checks li { height: 38px; padding: 0 10px; font-size: 14px; }
  .dz__rangel { font-size: 11px; }
  .dz__upload { font-size: 11px; }
  .dz__shot { height: 72px; margin-top: 8px; font-size: 14px; }
  .dz__mark { width: 30px; height: 30px; font-size: 18px; }
  .dz__option, .dz__primary { height: 40px; font-size: 14px; }
  /* On a phone the app screen keeps its essentials: no step blurb, no flag/escalate dock. */
  .dz__screen .dz__body > :nth-last-child(2) { margin-bottom: 12px; }
  /* Safari tints its toolbars once, on load: the status bar from the root, the bottom bar from a
     fixed strip at the foot, which blends into the lowest hill. The colours below only keep the
     page itself in step; the toolbars keep their daytime colours through the night. */
  html { background: #E4DBD9; }
  html.is-night { background: #121833; }
  html.is-end { background: var(--ink); }
  body { background: transparent; }
  .story { background: #2C7442; transition: background .5s; }
  .story.is-night { background: #204D3B; }
  .cta { z-index: 2; }
  body::after { content: ""; position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; height: 44px; background: #2C7442; pointer-events: none; }
  html.is-night body::after { background: #204D3B; }
  html.is-end body::after { background: var(--ink); }
  /* Words in the night sky turn light. */
  .story.is-night .panel__h { color: var(--paper); }
  .story.is-night .panel__p { color: var(--haze); }
  .dz .dz__text, .dz .dz__dock, .dz .dz__ask { display: none; }
  .dz .dz__outcome + .dz__text, .dz .dz__who + .dz__text { display: block; }
  .dz__body { padding: 10px 12px 12px; }
  .dz__reading { font-size: 34px; }
  .dz__reading span { font-size: 15px; }
  .dz__caret { height: 28px; margin-left: -6px; }
  .dz__verdict { margin-top: 6px; }
  .dz__range { height: 20px; margin-top: 2px; }
  .dz__band { top: 5px; height: 10px; }
  .dz__screen .dz__spacer { height: 12px; }
  .dz__end .dz__primary, .dz__end .dz__option { margin-top: 0; }
  .panel__copy { gap: 10px; }
  .panel__h { font-size: 26px; }
  .panel--result .panel__h { font-size: 40px; }
  .panel__p { font-size: 15px; }
  .scr { padding: 16px; }

  /* The runs table becomes stacked rows: the playbook, then its numbers on one line. */
  .cta { padding: 88px 0 32px; }
  .cta__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cta__head { display: contents; }
  .cta__title { font-size: 48px; }
  .cta__lede { font-size: 16px; }
  .cta__fine { margin-top: 16px; }
  .cta__form { grid-template-columns: 1fr; }
}
/* Short windows: the playbook card scales down so it stays on screen. */
@media (min-width: 761px) and (max-height: 780px) {
  .dz--cycle { zoom: .68; }
}
/* Short phones: the cards drop their secondary lines, not their text size, so the mountain keeps its room. */
@media (max-width: 760px) and (max-height: 760px) {
  .dz__head { height: 36px; }
  .dz__title span, .dz__count span { display: none; }
  .dz__screen .dz__eyebrow, .dz__who, .dz__pb > span:not(.dz__primary) { display: none; }
  .dz__who + .dz__text { margin-top: 8px; }
  .dz__body { padding: 8px 12px 10px; }
  .dz__step { font-size: 18px; }
  .dz__option, .dz__primary, .dz__pb .dz__primary { height: 36px; }
  .dz__checks li { height: 34px; }
  .dz__shot { height: 56px; }
  .phone__bar { height: 34px; }
  .sk .sk__compose { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}