/* conceit  the day at the takeoff as the sun's arc, the thing a pilot reads on the slope: sunrise on the left horizon, sunset on the right, the sun where it is now with the wind it reads on it, the model's hours as beads along the arc filled by the verdict, the club's station writing its readings under the horizon a quarter hour at a time, and the trace of the day drawn from sunrise to now; under it the same day laid flat on one axis, what the station read, what blows now, what the model says until sunset, then the six days as six shorter lines
   shape    timeline, because a pilot's question is when: the readings since sunrise are the before, the station's reading is the now, the model's hours to sunset and the six days are the after, and every job of the page is a station on that axis
   type     Anybody for the verdict, the readings and the headings, a variable face whose width axis the wind sets, 70 in the calm and 150 in 30 km/h; Public Sans for the body, an open face built for public services that reads on a phone at the takeoff
   colour   ground #F3F5F2, the pale sky over the Moselle at seven in the morning; ink #14211B, the beech wood on the back of the hill; one accent #1F8A47, the green the club painted on its own station for the optimal sector, and #166B37 where it has to read as text; verdicts are fill density in that green, fly solid, maybe half, no a ring, night dotted
   grid     12 columns, 20px gutter, 1360 max; the copy in 5 and the day's arc in 7 on the first screen, the day axis full width with one column per quarter hour, the seven days as rows of 17 hour cells; one column under 800px
   texture  none: the arc, the beads and the arrows are the only thing on the ground besides type and lines, and the dotted sky ahead of the sun is the one pattern
   motion   everything drifts the way the wind does: one curve cubic-bezier(.16,1,.3,1), 140/280/560/640 ms for pointer, state, reveal, arrival; the arrivals slide in from the side the wind comes from, the verdict word widens with the speed, the beads swell under the pointer, the sun moves along the arc as the day goes
   move     the trace draws itself and keeps extending: the solid arc from sunrise to the sun draws itself when the page opens, then grows at every refresh as the sun moves and a new reading of the station is written under the horizon, so a page left open on a phone at the takeoff keeps writing the day
   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; scroll-progress-line; reveal-line-mask; reveal-path-draw; stagger-index; live-count-up; live-cycle; live-ping; type-balance; type-tabular; type-underline; type-opsz; surface-selection; surface-focus-ring; surface-scroll-margin; surface-scheme; surface-tap; surface-reduced-motion; surface-scrollbar; easing-one-curve; easing-scale  */

@font-face { font-family: "Anybody"; src: url("fonts/anybody-normal-100-900.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/publicsans-normal-100-900.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/publicsans-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ground: #F3F5F2;
  --panel: #FFFFFF;
  --ink: #14211B;
  --ink-60: rgba(20, 33, 27, .66);
  --ink-30: rgba(20, 33, 27, .3);
  --line: rgba(20, 33, 27, .18);
  --hair: 1.5px;
  --accent: #1F8A47;
  --accent-text: #166B37; /* the same green, dark enough to read as text on the ground: 5.4:1 */
  --accent-soft: rgba(31, 138, 71, .16);
  --half: linear-gradient(90deg, var(--accent) 0 50%, transparent 50%);
  --display: "Anybody", "Arial Narrow", Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-pointer: 140ms;
  --t-state: 280ms;
  --t-reveal: 560ms;
  --t-arrive: 640ms;
  --gutter: 20px;
  --max: 1360px;
  --nav-h: 54px;
  --from: -1; /* the side the wind comes from, set by app.js: -1 east (the right), 1 west (the left) */
  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(--accent); color: var(--panel); }
: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: 1; letter-spacing: -.01em; text-wrap: balance; margin: 0; font-variation-settings: "wdth" 100, "wght" 700; }
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, b { font-weight: 700; }
.num, .reading, .readout, .c, .m, .dayrow { font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- verdict marks: density in the green, never a colour alone ---------- */
.v { display: inline-flex; align-items: center; gap: .4em; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.v::before { content: ""; width: .8em; height: .8em; border-radius: 50%; border: 2px solid var(--accent); flex: none; }
.v-fly::before { background: var(--accent); }
.v-marginal::before { background: var(--half); }
.v-no::before { border-color: var(--ink-30); }
.v-dark::before, .v-unknown::before { border-style: dotted; border-color: var(--ink-30); }
i.v::before { width: 12px; height: 12px; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; height: var(--nav-h); background: color-mix(in srgb, var(--ground) 92%, white); border-bottom: var(--hair) solid transparent; transition: border-color var(--t-state) var(--ease), background-color var(--t-state) var(--ease); }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 100%; }
.mark { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: .01em; text-decoration: none; display: flex; align-items: center; gap: 9px; font-variation-settings: "wdth" 110, "wght" 800; }
.mark svg { width: 24px; height: 24px; }
.mark svg .face { fill: var(--ink); }
.mark svg .gust { fill: var(--accent); transform-origin: 22px 7.5px; transition: transform var(--t-state) var(--ease); }
.mark:hover svg .gust { transform: translateX(-4px) scaleX(1.3); }
.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: 2px; 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: ring 2.4s var(--ease) infinite; }
@keyframes ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- hero: the day as the sun's arc ---------- */
.hero { position: relative; border-bottom: var(--hair) solid var(--line); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--gutter) * 2); padding-block: 44px 20px; align-items: center; }
.hero .hero-copy > *, .hero .day { animation: drift var(--t-arrive) var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.hero h1, .hero .day { animation-name: slide; }  /* the verdict and the day are there at the first paint */
/* the arrivals slide in from the side the wind comes from */
@keyframes drift { from { opacity: 0; transform: translateX(calc(var(--from) * 18px)); } }
@keyframes slide { from { transform: translateX(calc(var(--from) * 18px)); } }
.hero h1 small { display: block; font-family: var(--body); font-weight: 400; font-size: 15px; letter-spacing: 0; line-height: 1.4; color: var(--ink-60); margin-bottom: 10px; animation: unmask .7s var(--ease) both; }
.hero h1 .verdict-word { display: block; font-size: clamp(84px, 12.5vw, 196px); font-weight: 800; line-height: .9; letter-spacing: -.025em; text-transform: uppercase; font-variation-settings: "wdth" var(--wdth, 100), "wght" 800; transition: font-variation-settings var(--t-arrive) var(--ease), color var(--t-state) var(--ease); animation: unmask .8s var(--ease) both; animation-delay: 80ms; }
.hero h1 .verdict-word:hover { font-variation-settings: "wdth" calc(var(--wdth, 100) + 10), "wght" 800; }
@keyframes unmask { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.verdict-word.v-fly { color: var(--accent-text); }
.verdict-word.v-marginal { color: var(--ink); }
.verdict-word.v-no { color: var(--ink); }
.verdict-word.v-dark, .verdict-word.v-unknown { color: var(--ink-60); }
.figures { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; font-family: var(--display); }
.figures > div { min-width: 0; }
.figures b { display: block; font-size: clamp(36px, 3.1vw, 52px); font-weight: 700; line-height: 1; font-variation-settings: "wdth" 100, "wght" 700; }
.figures b.next { color: var(--accent-text); }
.figures b.next.none { color: var(--ink-60); }
.figures small { display: block; font-family: var(--body); font-size: 13px; color: var(--ink-60); margin-top: 8px; max-width: 16em; line-height: 1.35; }
.hero .sub { font-size: 17px; max-width: 36em; margin-top: 22px; color: var(--ink); }
/* ---------- 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: 18px; letter-spacing: .02em; text-decoration: none; padding: 13px 20px 12px; border: 2px solid var(--ink); font-variation-settings: "wdth" 105, "wght" 700; 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(--panel); }
.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: 12px; align-items: center; margin-top: 24px; margin-bottom: 12px; }
.friction { font-size: 14px; color: var(--ink-60); }

/* the day: the sun's arc, the trace drawn from sunrise to now (the move, extended by app.js at every refresh) */
.day { margin: 0; position: relative; min-width: 0; }
.arc { display: block; width: 100%; height: auto; overflow: visible; }
.arc .sky { fill: none; stroke: var(--ink-30); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.arc .trace { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw var(--t-reveal) var(--ease) both; transition: stroke-dashoffset var(--t-arrive) var(--ease); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.arc .horizon { stroke: var(--ink); stroke-width: 2; }
.arc .bead { cursor: crosshair; outline: none; }
.arc .bead circle { r: 16px; fill: var(--ground); stroke: var(--ink-30); stroke-width: 3; transition: r var(--t-pointer) var(--ease), stroke var(--t-pointer) var(--ease), fill var(--t-pointer) var(--ease); }
.arc .bead.v-fly circle { fill: var(--accent); stroke: var(--accent); }
.arc .bead.v-marginal circle { fill: var(--accent-soft); stroke: var(--accent); }
.arc .bead.v-dark circle { stroke-dasharray: 3 4; }
.arc .bead.past circle { stroke: var(--line); }
.arc .bead.past.v-fly circle { fill: var(--accent-soft); stroke: var(--accent-soft); }
.arc .bead:hover circle, .arc .bead.hot circle, .arc .bead:focus-visible circle { r: 20px; stroke: var(--ink); }
.arc .bead text { font-family: var(--display); font-weight: 700; font-size: 17px; fill: var(--ink-60); text-anchor: middle; }
.arc .bead text.h { transform: translate(calc(var(--nx) * 36px), calc(var(--ny) * 32px)); }  /* outward from the arc, so a label never sits on the trace */
.arc .bead text.s { fill: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.arc .bead.v-fly text.s { fill: var(--panel); }
.arc .bead.past text.s { fill: var(--ink-60); }
.arc .bead.under { visibility: hidden; }
.arc .rd path { fill: var(--ink-60); }
.arc .rd.v-fly path { fill: var(--accent); }
.arc .rd.v-marginal path { fill: var(--ink); }
.arc .rd.v-dark path { fill: var(--ink-30); }
.arc .rd .ping { fill: none; stroke: var(--ink); stroke-width: 2.5; transform-origin: 0 0; animation: ring 2s var(--ease) infinite; }  /* the newest reading, the pen of the station */
@keyframes ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.arc .sun { transition: transform var(--t-arrive) var(--ease); }
.arc .sun circle { fill: var(--panel); stroke: var(--ink); stroke-width: 3.5; }
.arc .sun.v-fly circle { fill: var(--accent); stroke: var(--accent); }
.arc .sun.down circle { fill: var(--ground); stroke: var(--ink-30); }
.arc .sun .needle { transition: transform var(--t-arrive) var(--ease); }
.arc .sun text { font-family: var(--display); font-weight: 700; font-size: 22px; fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums; }
.arc .sun.v-fly text { fill: var(--panel); }
.arc .sun.down text { fill: var(--ink-60); }
.arc .sun .needle path { fill: var(--ink); }
.arc .sun.v-fly .needle path { fill: var(--accent-text); }
.arc .sun .needle.off path { fill: var(--ink-30); }
.arc .lbl { font-family: var(--body); font-size: 15px; fill: var(--ink-60); }
.arc .lbl.end { text-anchor: end; }
.arc .lbl.mid { text-anchor: middle; }
.day figcaption { font-size: 14px; color: var(--ink-60); margin-top: 6px; }
.hero .hero-foot { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 12px 18px; border-top: var(--hair) solid var(--line); font-size: 14px; color: var(--ink-60); }

/* ---------- today, on one axis ---------- */
.today { padding-block: 48px 40px; border-bottom: var(--hair) solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: end; margin-bottom: 22px; }
.section-head h2 { font-size: clamp(30px, 3.2vw, 46px); font-variation-settings: "wdth" 110, "wght" 700; }
.section-head p { font-size: 15px; color: var(--ink-60); }
.readout { position: sticky; top: var(--nav-h); z-index: 5; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 10px 0; background: var(--ground); border-top: var(--hair) solid var(--ink); font-family: var(--display); }
.readout .ro-when { font-size: 22px; font-weight: 700; }
.readout .ro-kind { font-family: var(--body); font-size: 14px; color: var(--ink-60); }
.readout .ro-speed { font-size: 40px; font-weight: 800; line-height: 1; font-variation-settings: "wdth" 100, "wght" 800; margin-left: 8px; }
.readout .ro-speed + small { font-size: 15px; color: var(--ink-60); margin-left: -10px; }
.readout .ro-dir, .readout .ro-gust { font-size: 18px; font-weight: 600; }
.readout .ro-verdict { font-size: 18px; }
.readout .ro-why { font-family: var(--body); font-size: 14px; color: var(--ink-60); }
.axis-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--ink-30) transparent; padding-bottom: 6px; }
.axis-scroll::-webkit-scrollbar { height: 6px; }
.axis-scroll::-webkit-scrollbar-thumb { background: var(--ink-30); }
.axis-wrap { position: relative; min-width: 1080px; padding-top: 12px; }
.lane-label { font-size: 13px; color: var(--ink-60); padding: 8px 0 4px; }
.lane { display: grid; grid-template-columns: repeat(var(--slots), minmax(0, 1fr)); }
.lane.readings { height: 58px; align-items: end; border-bottom: var(--hair) solid var(--ink); margin-top: 0; }
.lane.readings .r { display: flex; justify-content: center; align-items: flex-end; height: 100%; cursor: crosshair; border-radius: 2px; 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) * 12ms), calc(var(--i) * 12ms); }
.lane.readings .r svg { width: 100%; max-width: 18px; height: auto; transform-origin: 50% 50%; }
.lane.readings .r svg path { fill: var(--ink-60); }
.lane.readings .r.v-fly svg path { fill: var(--accent); }
.lane.readings .r.v-marginal svg path { fill: var(--ink); }
.lane.readings .r.v-dark svg path { fill: var(--ink-30); opacity: .5; }
.lane.readings .r:hover, .lane.readings .r.hot, .lane.model .m:hover, .lane.model .m.hot { background: var(--accent-soft); }
.js .lane.readings:not(.in) .r { opacity: 0; translate: 0 8px; }
.lane.model .m { position: relative; display: grid; grid-template-rows: auto auto auto 8px; gap: 3px; justify-items: center; padding: 8px 2px 6px; border-left: var(--hair) solid var(--line); cursor: crosshair; transition: background-color var(--t-pointer) var(--ease), opacity var(--t-reveal) var(--ease); transition-delay: 0s, calc(var(--i) * 30ms); }
.js .lane.model:not(.in) .m { opacity: 0; }
.lane.model .m .h { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink-60); }
.lane.model .m.is-now .h { color: var(--accent-text); font-weight: 800; }
.lane.model .m svg { width: 20px; height: 20px; }
.lane.model .m svg path { fill: var(--ink); }
.lane.model .m.v-no svg path, .lane.model .m.v-dark svg path, .lane.model .m.v-unknown svg path { fill: var(--ink-30); }
.lane.model .m .s { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; }
.lane.model .m .fill { width: 70%; height: 8px; border-radius: 4px; border: 2px solid var(--accent); }
.lane.model .m.v-fly .fill { background: var(--accent); }
.lane.model .m.v-marginal .fill { background: var(--half); }
.lane.model .m.v-no .fill { border-color: var(--ink-30); }
.lane.model .m.v-dark .fill, .lane.model .m.v-unknown .fill { border-style: dotted; border-color: var(--ink-30); }
.hours-axis { position: relative; display: grid; grid-template-columns: repeat(var(--slots), minmax(0, 1fr)); border-top: var(--hair) solid var(--ink); margin-top: 6px; padding-top: 6px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink-60); }
.hours-axis span { border-left: var(--hair) solid var(--line); padding-left: 4px; }
.hours-axis .sun { position: absolute; top: -7px; left: calc((var(--col) - .5) / var(--slots) * 100%); width: 13px; height: 13px; border-radius: 50%; translate: -50% 0; background: var(--ground); border: 2px solid var(--accent); }
.hours-axis .sun.sunset { background: var(--accent); }
.now-line { position: absolute; top: 34px; bottom: 30px; left: calc((var(--now) - .5) / var(--slots) * 100%); width: 2px; background: var(--accent); pointer-events: none; }
.now-line b { position: absolute; top: -18px; left: 6px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; font-style: normal; }
.proof { margin-top: 22px; display: flex; gap: 12px 32px; flex-wrap: wrap; font-size: 15px; color: var(--ink-60); }
.proof b { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--ink); margin-right: 6px; line-height: 1; font-variation-settings: "wdth" 100, "wght" 800; }
.legend { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--gutter); font-size: 15px; }
.legend li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: var(--hair) solid var(--line); color: var(--ink-60); transition: color var(--t-pointer) var(--ease); }
.legend li:hover { color: var(--ink); }
.legend li b { color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 16px; white-space: nowrap; }
.legend li i { translate: 0 1px; }

/* ---------- the week, seven rows ---------- */
.week { padding-block: 48px; border-bottom: var(--hair) solid var(--line); }
.week-head, .dayrow { display: grid; grid-template-columns: 150px 120px 170px minmax(0, 1fr) 110px; gap: 14px; align-items: center; }
.week-head { padding-bottom: 6px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink-60); }
.week-head .cells li { text-align: left; padding-left: 3px; }
.cells { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 3px; }
.dayrow { border-top: var(--hair) solid var(--line); padding: 10px 0; transition: background-color var(--t-pointer) var(--ease), translate var(--t-pointer) var(--ease); }
.dayrow:last-child { border-bottom: var(--hair) solid var(--line); }
.dayrow:hover { background: var(--panel); translate: 0 -1px; }
.dayrow .dh b { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; }
.dayrow .dh small { display: block; font-size: 13px; color: var(--ink-60); margin-top: 4px; }
.dayrow .dv { font-size: 16px; }
.dayrow .dw .num { display: block; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1; white-space: nowrap; }
.dayrow .dw small { display: block; font-size: 13px; color: var(--ink-60); margin-top: 3px; }
.dayrow .da { font-size: 13px; color: var(--ink-60); text-align: right; }
.dayrow .da b { color: var(--ink); font-family: var(--display); font-size: 20px; }
.c { position: relative; aspect-ratio: 1; min-height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: var(--hair) solid var(--line); border-radius: 3px; cursor: crosshair; font-family: var(--display); font-weight: 700; font-size: 13px; line-height: 1; transition: background-color var(--t-pointer) var(--ease), border-color var(--t-pointer) var(--ease), scale var(--t-pointer) var(--ease); }
.c svg { width: 14px; height: 14px; }
.c svg path { fill: var(--ink); }
.c.v-fly { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.c.v-fly svg path { fill: var(--panel); }
.c.v-marginal { background: var(--accent-soft); border-color: var(--accent); }
.c.v-no { color: var(--ink-60); }
.c.v-no svg path { fill: var(--ink-30); }
.c.v-dark, .c.v-none { border-style: dotted; opacity: .45; cursor: default; }
.c.v-unknown { border-style: dotted; }
.c:hover, .c.hot { scale: 1.08; border-color: var(--ink); z-index: 1; }
.c.v-dark:hover { scale: 1; border-color: var(--line); }

/* ---------- the stations ---------- */
.stations { padding-block: 48px; border-bottom: var(--hair) solid var(--line); }
.station-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.station { border: var(--hair) solid var(--line); border-radius: 4px; padding: 16px 18px 14px; background: var(--panel); position: relative; transition: border-color var(--t-pointer) var(--ease), translate var(--t-pointer) var(--ease); }
.station:hover { border-color: var(--ink); translate: 0 -2px; }
.station h3 { font-size: 21px; display: flex; align-items: center; gap: 10px; }
.station .role { font-size: 13px; color: var(--ink-60); margin-top: 2px; display: block; }
.station .reading { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; margin-top: 12px; font-variation-settings: "wdth" 100, "wght" 800; }
.station .reading small { font-size: 15px; font-weight: 500; letter-spacing: .02em; margin-left: 4px; }
.station .reading .dir { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 21px; font-weight: 600; }
.station .reading .dir svg { width: 16px; height: 16px; }
.station .reading .dir svg path { fill: var(--accent); }
.station p { font-size: 14px; color: var(--ink-60); margin-top: 8px; }
.station.dead .reading { color: var(--ink-60); }

/* ---------- the rule ---------- */
.how { padding-block: 48px; border-bottom: var(--hair) solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 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: 24px; }
.steps h3::before { content: counter(step); display: block; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--accent-text); margin-bottom: 8px; }
.steps p { font-size: 15px; margin-top: 8px; color: var(--ink-60); }
.steps p b { color: var(--ink); font-weight: 700; }

/* ---------- questions ---------- */
.faq { padding-block: 48px; border-bottom: var(--hair) solid var(--line); }
.faq .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
.faq h2 { font-size: clamp(30px, 3.2vw, 46px); font-variation-settings: "wdth" 110, "wght" 700; }
.faq .price { margin-top: 18px; font-size: 15px; color: var(--ink-60); max-width: 30em; }
.faq .price b { font-family: var(--display); font-weight: 800; font-size: 32px; color: var(--accent-text); display: block; line-height: 1; margin-bottom: 6px; }
.qs details { border-top: var(--hair) solid var(--line); }
.qs details:last-child { border-bottom: var(--hair) solid var(--line); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; font-family: var(--display); font-weight: 700; font-size: 22px; 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: 400; font-size: 28px; line-height: 1; flex: none; color: var(--accent-text); 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: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; }
.close h2 { font-size: clamp(38px, 4.8vw, 68px); font-weight: 800; line-height: .95; margin-bottom: 22px; font-variation-settings: "wdth" 110, "wght" 800; }
.close .ctas { margin-bottom: 0; }
.sources { font-size: 14px; color: var(--ink-60); }
.sources li { padding: 6px 0; border-top: var(--hair) solid var(--line); }
.sources li:last-child { border-bottom: var(--hair) 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: sections drift in from the wind's side ---------- */
.js [data-reveal] > * { opacity: 0; translate: calc(var(--from) * 14px) 0; 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) {
  .station-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .week-head, .dayrow { grid-template-columns: 120px 120px 120px minmax(0, 1fr) 90px; }
}
@media (max-width: 800px) {
  .hero .wrap, .section-head, .faq .wrap, .close .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero .wrap { padding-block: 18px 16px; gap: 14px; }
  /* on a phone the buttons come before the paragraph, so the first screen ends on the click */
  .hero .wrap { display: flex; flex-direction: column; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; } .hero .day { order: 2; margin-top: 6px; } .figures { order: 3; } .hero .ctas { order: 4; margin-top: 16px; margin-bottom: 0; } .hero .sub { order: 5; margin-top: 16px; } .friction { order: 6; margin-top: 10px; }
  .hero h1 .verdict-word { font-size: clamp(72px, 24vw, 120px); }
  /* the drawing is 1200 units wide on a 350px screen, so everything on it is drawn at three times the size */
  .arc .bead circle { r: 34px; stroke-width: 5; }
  .arc .bead:hover circle, .arc .bead.hot circle { r: 38px; }
  .arc .bead text { font-size: 44px; }
  .arc .bead text.s { font-size: 38px; }
  .arc .bead text.h { transform: translate(calc(var(--nx) * 82px), calc(var(--ny) * 62px)); }
  .arc .sun circle { r: 52px; stroke-width: 6; }
  .arc .sun text { font-size: 46px; }
  .arc .sun .needle path { transform: scale(1.8); }
  .arc .lbl { font-size: 36px; }
  .arc .lbl.mid { display: none; }
  .arc .trace { stroke-width: 7; }
  .arc .sky { stroke-width: 4; stroke-dasharray: 3 14; }
  .arc .horizon { stroke-width: 3; }
  .arc .rd path { transform: scale(2.2); }
  .arc .rd.q { display: none; }
  .figures { gap: 12px; margin-top: 14px; }
  .figures > div { flex: 1 1 0; }
  .figures b { font-size: 32px; }
  .nav { display: none; }
  .week-head { display: none; }
  .dayrow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "dh dv da" "dw dw dw" "cells cells cells"; gap: 8px 14px; }
  .dayrow .dh { grid-area: dh; } .dayrow .dv { grid-area: dv; } .dayrow .da { grid-area: da; } .dayrow .dw { grid-area: dw; display: flex; gap: 10px; align-items: baseline; } .dayrow .cells { grid-area: cells; }
  .c { min-height: 0; font-size: 13px; }
  .c svg { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .readout .ro-speed { font-size: 32px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .station-grid { grid-template-columns: minmax(0, 1fr); }
  .btn, .btn-ghost { font-size: 17px; padding: 12px 16px 11px; }
  .cells { gap: 2px; }
}
@media (min-width: 2200px) {
  body { font-size: 19px; }
  :root { --max: 1680px; }
}
@media print {
  .js [data-reveal] > *, .js .lane.readings:not(.in) .r, .js .lane.model:not(.in) .m { opacity: 1; translate: none; }
}
@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 .lane.readings:not(.in) .r, .js .lane.model:not(.in) .m { opacity: 1; translate: none; }
  .arc .trace { stroke-dashoffset: 0; }
  .arc .rd .ping { animation: none; opacity: 0; }
}