/* conceit  the windsock at the top of the parking lot, then the meter under it: the sock is the first thing a pilot reads on arriving, so it is the first screen, drawn at the live wind's angle and blown out to its speed; the meter is the rose below, carrying the site's arc and the eight launches as rings, with the hours of the next two days as the readings it will show
   shape    dashboard, because a pilot comes for three numbers and a verdict, reads them in ten seconds, and only then reads why; the proof is the readings and the jobs are the panels
   type     Big Shoulders Display for the readings and the headings, a tall condensed signage face whose figures read like a gauge from a metre away; Atkinson Hyperlegible for the body, drawn by the Braille Institute to stay legible on a phone in the sun on the cliff
   colour   ground #EEF2F4, the marine layer; ink #0B1F2A, the sea at the foot of the cliff, inverted on the first screen so the sock reads at night; one accent #F26B1D, the windsock; verdicts are fill density, fly solid, maybe hatched, no a ghost outline, never a colour alone
   grid     12 columns, 24px gutter, 1440 max; the rose in a sticky rail of 5 columns, the hours in the other 7, the hour strip breaking out full-bleed; one column under 880px
   texture  none: the ink ground of the first screen with the sock's two rings, the photograph of the cliff at the launches, and the tick ring of the rose are the only marks; no grain, no gradient
   motion   everything is a needle that settles: one curve cubic-bezier(.2,.8,.2,1) with a hint of overshoot on the needle, 160/300/700/600 ms for pointer, state, arrival, reveal; the rose turning is the cause and every other movement is a smaller needle
   move     the rose follows the hour: the pointer or a finger on the hour strip turns the needle to that hour's wind, prints its speed in the dial and lights the launches whose arc holds it; leaving the strip sets it back to the meter's reading now; rebuilt from codepen.io/dudleystorey/full/yOyzpy, no library
   details  arrive-order; arrive-clip; hover-arrow; hover-fill; hover-lift; hover-underline-draw; hover-press; state-plus-cross; state-accordion-height; state-nav-scrolled; scroll-reveal-io; scroll-sticky; reveal-path-draw; reveal-image-settle; stagger-index; live-ping; live-count-up; type-balance; type-tabular; type-underline; surface-selection; surface-focus-ring; surface-reduced-motion; easing-scale  */

@font-face { font-family: "Big Shoulders Display"; src: url("fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #EEF2F4;
  --panel: #F8FAFB;
  --ink: #0B1F2A;
  --ink-60: rgba(11, 31, 42, .68);
  --ink-30: rgba(11, 31, 42, .3);
  --line: rgba(11, 31, 42, .16);
  --accent: #F26B1D;
  --accent-text: #B04607; /* the same orange, dark enough to read as text on the ground: 5.0:1 */
  --accent-soft: rgba(242, 107, 29, .16);
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif-condensed, sans-serif;
  --body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-needle: cubic-bezier(.3, 1.3, .4, 1); /* impeccable-disable bounce-easing: a meter needle overshoots and settles, which is the one motion system of the page */
  --t-pointer: 160ms;
  --t-state: 300ms;
  --t-arrive: 700ms;
  --t-reveal: 600ms;
  --gutter: 24px;
  --max: 1440px;
  --nav-h: 56px;
  --hatch: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 7px);
  interpolate-size: allow-keywords;
  color-scheme: light;
  accent-color: var(--accent);
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: .95; letter-spacing: -.005em; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }
.num, td, .reading, .hour, .day { font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.label { font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60); }

/* ---------- verdict fills: density, never a colour alone ---------- */
.v { display: inline-flex; align-items: center; gap: .45em; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.v::before { content: ""; width: .9em; height: .9em; border: 1.5px solid var(--ink); flex: none; }
.v-fly::before { background: var(--ink); }
.v-marginal::before { background: var(--hatch); }
.v-no::before { background: transparent; }
.v-dark::before, .v-unknown::before { border-style: dotted; opacity: .5; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--ground) 88%, white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-state) var(--ease), background-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.top.scrolled { box-shadow: 0 1px 0 var(--ink-30); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 100%; }
.mark { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: .01em; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.mark svg { width: 22px; height: 22px; }
.mark svg .sock { transform-origin: 3px 11px; transition: rotate var(--t-state) var(--ease-needle); }
.mark:hover svg .sock { rotate: -14deg; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { position: relative; text-decoration: none; font-size: 15px; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-pointer) var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-60); white-space: nowrap; }
.live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.live i::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- hero: the windsock at the top of the parking lot ---------- */
.hero { position: relative; background: var(--ink); color: var(--ground); border-bottom: 1px solid var(--line); --paper-70: rgba(238, 242, 244, .72); --paper-20: rgba(238, 242, 244, .2); }
.hero .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); padding-block: 48px 24px; align-items: center; }
.hero .wrap > *, .hero .hero-copy > * { animation: land var(--t-arrive) var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
/* the words are readable from the first frame; the sock, the readings and the buttons settle after them */
.hero h1, .hero .sub { animation-name: settle-text; }
@keyframes land { from { opacity: 0; transform: translateY(14px); } }
@keyframes settle-text { from { transform: translateY(8px); } }
.sock-wrap { margin: 0; position: relative; }
.sock { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; margin-inline: auto; }
.sock-rose circle { fill: none; stroke: var(--paper-20); stroke-width: 1; }
.sock-rose text { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .06em; fill: var(--paper-70); paint-order: stroke; stroke: var(--ink); stroke-width: 10px; stroke-linejoin: round; }
.sock .post { stroke: var(--ground); stroke-width: 6; stroke-linecap: round; }
.sock .cone { transform-origin: 260px 200px; transition: transform var(--t-arrive) var(--ease-needle); }
.sock .cone .cloth { transform-origin: 260px 200px; animation: flutter 2.6s ease-in-out infinite alternate; }
@keyframes flutter { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.sock .cone.off .cloth { animation: none; }
.sock .cone path { fill: var(--accent); }
.sock .cone .band { fill: var(--ground); }
.sock .cone.off path { fill: var(--paper-20); }
.sock-wrap figcaption { font-size: 14px; color: var(--paper-70); text-align: center; margin-top: 10px; }
.hero h1 { font-size: clamp(88px, 15vw, 224px); font-weight: 900; line-height: .86; letter-spacing: -.02em; text-transform: uppercase; }
.hero h1 small { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .12em; line-height: 1.4; color: var(--paper-70); text-transform: uppercase; margin-bottom: .5em; animation: unmask .8s var(--ease) both; }
.hero h1 .verdict-word { display: inline-flex; align-items: center; gap: .12em; animation: unmask .8s var(--ease) both; animation-delay: 90ms; }
@keyframes unmask { from { clip-path: inset(0 0 100% 0); transform: translateY(.3em); } to { clip-path: inset(0); transform: none; } }
.verdict-word::before { content: ""; width: .32em; height: .32em; border: 3px solid var(--ground); flex: none; margin-right: .06em; }
.verdict-word.v-fly { color: var(--accent); }
.verdict-word.v-fly::before { background: var(--accent); border-color: var(--accent); }
.verdict-word.v-marginal::before { background: repeating-linear-gradient(45deg, var(--ground) 0 3px, transparent 3px 8px); }
.verdict-word.v-no::before { border-color: var(--paper-70); }
.verdict-word.v-dark::before, .verdict-word.v-unknown::before { border-style: dotted; border-color: var(--paper-70); }
.readings { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 26px; font-family: var(--display); }
.readings b { display: block; font-size: clamp(44px, 4vw, 60px); font-weight: 700; line-height: 1; }
.readings b.next { color: var(--accent); }
.readings small { display: block; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-70); margin-top: 8px; }
.hero .sub { font-size: 18px; max-width: 34em; margin-top: 24px; color: rgba(238, 242, 244, .9); text-wrap: pretty; }
/* ---------- buttons: the arrow grows, the fill turns, the press sinks ---------- */
.btn, .btn-ghost { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding: 14px 20px 13px; border: 1.5px solid var(--ink); transition: background-color var(--t-pointer) var(--ease), color var(--t-pointer) var(--ease), border-color var(--t-pointer) var(--ease), translate var(--t-pointer) var(--ease), transform var(--t-pointer) var(--ease); }
.btn { background: var(--ink); color: var(--ground); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ground); }
.btn:active, .btn-ghost:active { translate: 0 1px; transform: scale(.985); transition-duration: 80ms; }
.btn svg { width: 22px; height: 14px; overflow: visible; transition: transform var(--t-pointer) var(--ease); }
.btn svg .shaft { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset var(--t-pointer) var(--ease); }
.btn:hover svg .shaft { stroke-dashoffset: 0; }
.btn:hover svg { transform: translateX(3px); }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; margin-bottom: 14px; }
.hero .btn { background: var(--ground); border-color: var(--ground); color: var(--ink); }
.hero .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.hero .btn-ghost { border-color: var(--ground); color: var(--ground); }
.hero .btn-ghost:hover { background: var(--ground); color: var(--ink); }
.friction { font-size: 15px; color: var(--paper-70); }
.hero .hero-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 14px 22px; border-top: 1px solid var(--paper-20); font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-70); }
.hero-launches b { font-weight: 500; transition: color var(--t-state) var(--ease); }
.hero-launches b.lit { color: var(--accent); font-weight: 700; }
.top.over-hero { background: var(--ink); color: var(--ground); border-bottom-color: rgba(238, 242, 244, .18); }
.top.over-hero .live { color: rgba(238, 242, 244, .72); }
.top.over-hero .mark svg { fill: var(--ground); }

/* ---------- the instrument: rose + hours ---------- */
.instrument { padding-block: 56px 48px; border-bottom: 1px solid var(--line); }
.instrument .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
.rail { position: sticky; top: calc(var(--nav-h) + 20px); }
.rose-wrap { position: relative; aspect-ratio: 1; max-width: 520px; }
.rose { width: 100%; height: auto; }
.rose text { font-family: var(--display); font-weight: 700; fill: var(--ink); }
.rose .tick { stroke: var(--ink-30); stroke-width: 1; }
.rose .tick.major { stroke: var(--ink); stroke-width: 1.5; }
.rose .arc-site { fill: none; stroke: var(--accent-soft); stroke-width: 26; }
.rose .ring { fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: butt; transition: stroke var(--t-state) var(--ease), stroke-width var(--t-state) var(--ease); }
.rose .ring.on { stroke: var(--ink); }
.rose .ring.lit { stroke: var(--accent); stroke-width: 8; }
.rose .needle { transform-origin: 260px 260px; transition: transform var(--t-arrive) var(--ease-needle); }
.rose .needle path { fill: var(--ink); }
.rose .needle line { stroke: var(--ink); stroke-width: 2; }
.rose .needle.off path { fill: var(--ink-30); }
.rose .needle.off line { stroke: var(--ink-30); }
.dial { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.dial .speed { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 7vw, 84px); line-height: 1; letter-spacing: -.01em; }
.dial .speed small { font-size: clamp(18px, 2.2vw, 27px); font-weight: 500; letter-spacing: .06em; margin-left: 4px; }
.dial .from { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .04em; margin-top: 2px; }
.dial .when { font-size: 14px; color: var(--ink-60); margin-top: 6px; max-width: 12em; }
.dial .verdict { margin-top: 10px; font-size: 18px; }
.legend { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 15px; }
.legend li { display: flex; align-items: center; gap: 10px; padding: 3px 0; transition: color var(--t-pointer) var(--ease); }
.legend li i { width: 14px; height: 4px; background: var(--line); flex: none; transition: background-color var(--t-state) var(--ease); }
.legend li.lit i { background: var(--accent); }
.legend li.lit { font-weight: 700; }
.legend li:hover { color: var(--accent-text); }
.hint { font-size: 14px; color: var(--ink-60); margin-top: 14px; }

.hours-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hours-head h2 { font-size: clamp(32px, 3.4vw, 48px); }
.hours-head p { font-size: 15px; color: var(--ink-60); }
.gram { position: relative; width: max-content; border: 1px solid var(--line); background: var(--panel); margin-bottom: 8px; }
.gram svg { display: block; }
.gram .axis { position: sticky; left: 0; width: 0; height: 0; z-index: 2; }
.gram .axis span { position: absolute; left: 6px; font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: .04em; color: var(--ink-60); background: var(--panel); padding: 0 3px; line-height: 1.1; }
.gram .band { fill: var(--accent-soft); }
.gram .grid-line { stroke: var(--line); stroke-width: 1; }
.gram .lbl { font-family: var(--display); font-weight: 500; font-size: 14px; fill: var(--ink-60); letter-spacing: .04em; }
.gram .speed-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.4s var(--ease); }
.gram .gust-line { fill: none; stroke: var(--ink-30); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity var(--t-reveal) var(--ease) .9s; }
.gram.in .speed-line { stroke-dashoffset: 0; }
.gram.in .gust-line { opacity: 1; }
.gram .corr { fill: var(--accent); stroke: var(--panel); stroke-width: 2; opacity: 0; transition: opacity var(--t-state) var(--ease); transition-delay: calc(1s + var(--i) * 60ms); }
.gram.in .corr { opacity: 1; }
.gram .cursor { stroke: var(--accent); stroke-width: 1.5; opacity: 0; transition: opacity var(--t-pointer) var(--ease); }
.gram.hot .cursor { opacity: 1; }
.strip { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--ink-30) transparent; padding-bottom: 6px; }
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--ink-30); }
.hours { display: grid; grid-auto-flow: column; grid-auto-columns: 58px; gap: 0; border: 1px solid var(--line); border-right: 0; width: max-content; }
.hour { position: relative; border-right: 1px solid var(--line); padding: 10px 0 8px; text-align: center; background: var(--panel); cursor: crosshair; transition: background-color var(--t-pointer) var(--ease), opacity var(--t-reveal) var(--ease), translate var(--t-reveal) var(--ease); transition-delay: 0s, calc(var(--i) * 25ms), calc(var(--i) * 25ms); }
.js .hours:not(.in) .hour { opacity: 0; translate: 0 10px; }
.hour:hover, .hour.hot { background: var(--accent-soft); }
.hour.is-day { border-top: 3px solid var(--ink); }
.hour.is-day.v-dark, .hour.v-dark { border-top: 3px dotted var(--ink-30); }
.hour .h { font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: .04em; color: var(--ink-60); }
.hour .h b { color: var(--ink); font-weight: 700; }
.hour .arrow { width: 22px; height: 22px; margin: 6px auto 4px; transition: transform var(--t-state) var(--ease-needle); }
.hour .arrow path { fill: var(--ink); }
.hour.v-no .arrow path, .hour.v-dark .arrow path, .hour.v-unknown .arrow path { fill: var(--ink-30); }
.hour .s { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; }
.hour .g { font-size: 12px; color: var(--ink-60); }
.hour .fill { height: 10px; margin: 8px 8px 0; border: 1px solid var(--ink); }
.hour.v-fly .fill { background: var(--ink); }
.hour.v-marginal .fill { background: var(--hatch); }
.hour.v-no .fill { border-color: var(--ink-30); }
.hour.v-dark .fill, .hour.v-unknown .fill { border-style: dotted; border-color: var(--ink-30); }
.hour .l { font-size: 11px; color: var(--ink-60); margin-top: 6px; min-height: 1.2em; letter-spacing: .02em; }
.hour.v-fly .l, .hour.v-marginal .l { color: var(--ink); }
.hour .why { position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 4px; background: var(--ink); color: var(--ground); font-size: 13px; padding: 5px 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-pointer) var(--ease), translate var(--t-pointer) var(--ease); z-index: 3; }
.hour:hover .why, .hour.hot .why { opacity: 1; translate: -50% 0; }
.day-marks { display: flex; width: max-content; margin-top: 8px; }
.day-marks span { width: calc(58px * var(--n)); font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; padding-left: 6px; border-left: 1px solid var(--ink); }
.corr-note { font-size: 14px; color: var(--ink-60); margin-top: 14px; max-width: 48em; }
.corr-note b { color: var(--accent-text); }

/* ---------- meters ---------- */
.meters { padding-block: 48px; border-bottom: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head h2 { font-size: clamp(32px, 3.4vw, 48px); }
.section-head p { font-size: 15px; color: var(--ink-60); max-width: 44em; }
.meter-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.meter { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 18px 14px; background: var(--panel); position: relative; transition: background-color var(--t-pointer) var(--ease); }
.meter:hover { background: white; }
.meter h3 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.meter .label { font-family: var(--body); font-size: 13px; letter-spacing: 0; text-transform: none; margin-top: 2px; display: block; }
.meter .reading { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; margin-top: 12px; }
.meter .reading small { font-size: 16px; font-weight: 500; letter-spacing: .04em; margin-left: 2px; }
.meter .reading .dir { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 22px; }
.meter .reading .dir svg { width: 16px; height: 16px; }
.meter .reading .dir svg path { fill: var(--ink); }
.meter p { font-size: 14px; color: var(--ink-60); margin-top: 8px; }
.meter.dead .reading { color: var(--ink-60); }
.skill { margin-top: 18px; display: flex; gap: 32px; flex-wrap: wrap; font-size: 15px; color: var(--ink-60); }
.skill b { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--ink); margin-right: 6px; line-height: 1; }

/* ---------- days ---------- */
.days { padding-block: 48px; border-bottom: 1px solid var(--line); }
.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.day { border: 1px solid var(--line); background: var(--panel); padding: 14px 14px 12px; text-decoration: none; transition: translate var(--t-pointer) var(--ease), border-color var(--t-pointer) var(--ease), opacity var(--t-reveal) var(--ease); position: relative; }
.day:hover { translate: 0 -2px; border-color: var(--ink); }
.day .wd { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; }
.day .dt { font-size: 13px; color: var(--ink-60); }
.day .fill { height: 44px; margin: 12px 0 10px; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; }
.day.v-fly .fill { background: var(--ink); color: var(--ground); }
.day.v-marginal .fill { background: var(--hatch); color: var(--ink); }
.day.v-marginal .fill span { background: var(--panel); padding: 0 6px; }
.day.v-no .fill { border-color: var(--ink-30); color: var(--ink-60); }
.day.v-unknown .fill { border-style: dotted; color: var(--ink-60); }
.day .win { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; }
.day .why { font-size: 13px; color: var(--ink-60); margin-top: 4px; }
.day .agree { font-size: 12px; color: var(--ink-60); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.day .agree b { color: var(--ink); }

/* ---------- launches ---------- */
.launches { padding-block: 48px; border-bottom: 1px solid var(--line); }
.photo { margin: 0 0 28px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.photo img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: 50% 45%; filter: saturate(.8); transform: scale(1.04); transition: transform 1.6s var(--ease); }
[data-reveal].in .photo img { transform: none; }
.photo figcaption { font-size: 14px; color: var(--ink-60); padding: 10px 14px; }
.launch-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--gutter); border-top: 1px solid var(--line); }
.launch { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); transition: background-color var(--t-pointer) var(--ease); }
.launch:hover { background: var(--panel); }
.launch .mini { width: 64px; height: 64px; }
.launch .mini circle { fill: none; stroke: var(--line); stroke-width: 1; }
.launch .mini .arc { fill: none; stroke: var(--ink); stroke-width: 8; transition: stroke var(--t-state) var(--ease); }
.launch.lit .mini .arc { stroke: var(--accent); }
.launch .mini .n { stroke: var(--ink); stroke-width: 1.5; transform-origin: 32px 32px; transition: transform var(--t-arrive) var(--ease-needle); }
.launch h3 { font-size: 24px; }
.launch h3 small { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--ink-60); margin-left: 8px; letter-spacing: 0; text-transform: none; }
.launch p { font-size: 15px; color: var(--ink-60); margin-top: 4px; }
.launch .takes { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-60); white-space: nowrap; padding-top: 6px; transition: color var(--t-state) var(--ease); }
.launch.lit .takes { color: var(--accent-text); }

/* ---------- how ---------- */
.how { padding-block: 48px; border-bottom: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); counter-reset: step; }
.steps li { border-top: 2px solid var(--ink); padding-top: 14px; counter-increment: step; transition: border-color var(--t-pointer) var(--ease); }
.steps li:hover { border-top-color: var(--accent); }
.steps h3 { font-size: 26px; }
.steps h3::before { content: counter(step); display: block; font-size: 15px; font-weight: 500; letter-spacing: .06em; color: var(--ink-60); margin-bottom: 8px; }
.steps p { font-size: 15px; margin-top: 8px; color: var(--ink-60); }
.steps p b { color: var(--ink); font-weight: 400; }

/* ---------- questions ---------- */
.faq { padding-block: 48px; border-bottom: 1px solid var(--line); }
.faq .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; }
.faq h2 { font-size: clamp(32px, 3.4vw, 48px); }
.faq .price { margin-top: 18px; font-size: 15px; color: var(--ink-60); max-width: 30em; }
.faq .price b { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--ink); display: block; line-height: 1; margin-bottom: 6px; }
.qs details { border-top: 1px solid var(--line); }
.qs details:last-child { border-bottom: 1px solid var(--line); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.05; transition: color var(--t-pointer) var(--ease); }
.qs summary::-webkit-details-marker { display: none; }
.qs summary:hover { color: var(--accent-text); }
.qs summary::after { content: "+"; font-weight: 500; font-size: 30px; line-height: 1; flex: none; transition: rotate var(--t-state) var(--ease); }
.qs details[open] summary::after { rotate: 45deg; }
.qs details::details-content { height: 0; overflow: clip; transition: height var(--t-state) var(--ease), content-visibility var(--t-state) allow-discrete; }
.qs details[open]::details-content { height: auto; }
.qs .a { padding: 0 0 18px; font-size: 16px; max-width: 40em; }

/* ---------- close ---------- */
.close { padding-block: 64px 40px; }
.close .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: end; }
.close h2 { font-size: clamp(40px, 5vw, 72px); font-weight: 900; line-height: .9; margin-bottom: 22px; }
.close .ctas { margin-bottom: 0; }
.sources { font-size: 14px; color: var(--ink-60); }
.sources li { padding: 6px 0; border-top: 1px solid var(--line); }
.sources li:last-child { border-bottom: 1px solid var(--line); }
.sources a, .foot a { text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1px, linear-gradient(var(--ink-30), var(--ink-30)) no-repeat 0 100% / 100% 1px; padding-bottom: 1px; transition: background-size var(--t-state) var(--ease), color var(--t-pointer) var(--ease); }
.sources a:hover, .foot a:hover { color: var(--accent-text); background-size: 100% 1px, 100% 1px; }
.foot { padding: 20px 0 32px; font-size: 14px; color: var(--ink-60); display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ---------- reveals ---------- */
.js [data-reveal] > * { opacity: 0; translate: 0 14px; transition: opacity var(--t-reveal) var(--ease), translate var(--t-reveal) var(--ease); transition-delay: min(calc(var(--i, 0) * 60ms), 600ms); }
.js [data-reveal].in > * { opacity: 1; translate: 0 0; }

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .meter-grid { grid-template-columns: repeat(2, 1fr); }
  .day-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .hero .wrap, .instrument .wrap, .faq .wrap, .close .wrap { grid-template-columns: minmax(0, 1fr); }
  .instrument .wrap > div { min-width: 0; }
  .hero .wrap { padding-block: 18px 16px; gap: 12px; }
  .sock { max-width: 168px; }
  .sock-wrap figcaption { margin-top: 2px; font-size: 13px; }
  .sock-rose text { font-size: 34px; }
  /* on a phone the buttons come before the paragraph, so the first screen ends on the click */
  .hero-copy { display: flex; flex-direction: column; }
  .hero h1 { order: 1; } .readings { order: 2; } .hero .ctas { order: 3; margin-top: 18px; margin-bottom: 0; } .hero .sub { order: 4; margin-top: 18px; } .friction { order: 5; margin-top: 12px; }
  .readings { gap: 14px; margin-top: 16px; }
  .readings > div { flex: 1 1 0; min-width: 0; }
  .readings b { font-size: 36px; }
  .readings small { font-size: 11px; letter-spacing: .05em; margin-top: 5px; }
  .hero h1 { font-size: clamp(72px, 22vw, 120px); }
  .rail { position: static; }
  .rose-wrap { margin-inline: auto; }
  .nav { display: none; }
  .launch-list { grid-template-columns: 1fr; }
  .day-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero h1 { font-size: clamp(64px, 20vw, 96px); }
  .meter-grid { grid-template-columns: 1fr; }
  .day-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .legend { grid-template-columns: 1fr; }
  .btn, .btn-ghost { font-size: 18px; padding: 12px 16px 11px; }
}
@media (min-width: 2200px) {
  body { font-size: 19px; }
  :root { --max: 1720px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] > *, .js .hours:not(.in) .hour { opacity: 1; translate: none; }
  .gram .speed-line { stroke-dashoffset: 0; }
  .gram .gust-line, .gram .corr { opacity: 1; }
}