/* TRUE NOON — the style contract is design/DESIGN.md; this file implements it.
   Two families, one light. Nothing here is decorative: every rule either sets the
   instrument's voice or gets out of the way of a number. */

@font-face{
  font-family:'Bodoni Moda';
  src:url('../fonts/BodoniModa.woff2') format('woff2');
  font-display:swap;font-weight:400 900;font-style:normal;
}
@font-face{
  font-family:'Martian Mono';
  src:url('../fonts/MartianMono.woff2') format('woff2');
  font-display:swap;font-weight:100 800;font-style:normal;
}

:root{
  /* the field */
  --ground:oklch(0.145 0.014 196);
  --ground-lift:oklch(0.245 0.020 194);
  --rule:oklch(0.30 0.020 190);
  /* the light — used ONLY where the sun is */
  --amber:oklch(0.80 0.155 72);
  /* the engraving */
  --verdigris:oklch(0.62 0.055 176);
  /* type */
  --ink:oklch(0.92 0.008 85);
  --ink-quiet:oklch(0.745 0.010 85);

  --measure:68rem;
  --bar:2.75rem;
  --gut:clamp(1rem,3vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variation-settings:'wght' 350,'wdth' 100;
  font-size:0.9375rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

::selection{background:var(--amber);color:oklch(0.15 0.02 72)}

a{color:var(--ink);text-decoration-color:var(--amber);text-underline-offset:0.25em}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;
}

.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── type ─────────────────────────────────────────────────────────────────────
   Bodoni is forbidden below 28px: on this ground its hairlines fall under the
   contrast floor. Everything at reading size is Martian Mono. */
.display{
  font-family:'Bodoni Moda',Georgia,'Times New Roman',serif;
  font-variation-settings:'wght' 500,'opsz' 96;
  line-height:0.94;letter-spacing:-0.032em;
  text-wrap:balance;
  margin:0;
}
h1.display{font-size:clamp(3.25rem,11vw,8.75rem)}
h2.display{font-size:clamp(2.25rem,5.4vw,4.25rem);letter-spacing:-0.028em;margin-bottom:1.35rem}
p{margin:0 0 1.1rem;max-width:62ch}
.lede{font-size:1.0625rem;line-height:1.65;max-width:52ch}
.num{font-variation-settings:'wght' 600,'wdth' 112.5;letter-spacing:0.01em;
  color:var(--amber);font-variant-numeric:tabular-nums}
.quiet{color:var(--ink-quiet)}

/* auteur-allow: EYEBROW_EVERYWHERE -- one instrument-label voice (uppercase, tracked, small mono)
   applied to READOUTS: the chrome bar, three readout panels, spec-table row headers, the place
   toggles, the latitude label, the colophon. Ban #6 targets eyebrow kickers standing above section
   headings; none of this page's six section openings uses one — they are a full-bleed field with a
   bottom-left headline, a hairline rule + heading, a section with no heading at all, the pinned
   field itself, a spec table, and a closing plate. This is the label voice of an instrument, which
   is the brand. */
/* ── the chrome: the page's thesis, permanently on screen ──────────────────── */
.chrome{
  position:fixed;left:0;right:0;height:var(--bar);z-index:40;
  display:flex;align-items:center;gap:1.25rem;
  padding-inline:var(--gut);
  background:var(--ground);
  font-size:0.6875rem;letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:'wght' 500,'wdth' 87.5;
  color:var(--ink-quiet);
}
.chrome--top{top:0;border-bottom:1px solid var(--rule)}
.chrome--bottom{bottom:0;border-top:1px solid var(--rule);justify-content:space-between}
.mark{color:var(--ink);font-variation-settings:'wght' 700,'wdth' 100;letter-spacing:0.14em}
.readouts{margin-left:auto;display:flex;gap:1.15rem;align-items:baseline}
.readout{display:flex;gap:0.5rem;align-items:baseline;white-space:nowrap}
.readout b{
  font-variation-settings:'wght' 600,'wdth' 112.5;font-size:0.8125rem;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:0.02em;
}
.readout--sun b{color:var(--amber)}
@media (max-width:640px){
  .chrome{font-size:0.625rem;gap:0.7rem}
  .readouts{gap:0.7rem}
  .chrome--bottom .long{display:none}
}

/* ── scene 1 ──────────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;
  padding-block:calc(var(--bar) + 2rem) calc(var(--bar) + 2.5rem);
  isolation:isolate;
}
/* GRID BREAK: the instrument field bleeds past both edges; copy stays in the measure */
.hero__field{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__field canvas{display:block;width:100%;height:100%}
.hero__h1{position:relative;display:block;margin-bottom:1.6rem}
.hero__h1 .lit{color:var(--ink)}
.hero__h1 .cast{
  position:absolute;inset:0;color:oklch(0.30 0.012 194);
  clip-path:polygon(38% 0,53% 0,53% 100%,38% 100%);
  pointer-events:none;
}
.hero__rule{height:1px;background:var(--amber);opacity:0.5;margin-top:2rem}
.instrument{
  position:absolute;right:var(--gut);bottom:calc(var(--bar) + 2.5rem);z-index:2;
  display:grid;gap:0.5rem;text-align:right;font-size:0.6875rem;
  font-variation-settings:'wght' 400,'wdth' 75;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--ink-quiet);
}
.instrument div{border-top:1px solid var(--rule);padding-top:0.4rem;display:grid;gap:0.1rem}
.instrument span{
  color:var(--ink);font-variation-settings:'wght' 600,'wdth' 100;font-size:0.8125rem;
  letter-spacing:0.01em;text-transform:none;font-variant-numeric:tabular-nums;
}
@media (max-width:900px){.instrument{display:none}}

/* ── scene 2: opens on a hairline rule, not a kicker ───────────────────────── */
.curves{padding-block:clamp(5rem,12vh,9rem)}
.curves__head{border-top:1px solid var(--rule);padding-top:1.75rem;margin-bottom:3.5rem}
.curve-row{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem);align-items:center;
  padding-block:clamp(1.75rem,4vh,3rem);
}
.curve-row + .curve-row{border-top:1px solid var(--rule)}
.curve-row__note p{margin:0;font-size:0.875rem;color:var(--ink-quiet);max-width:34ch}
.curve-row__note strong{
  display:block;color:var(--ink);font-variation-settings:'wght' 600,'wdth' 100;
  margin-bottom:0.35rem;font-size:0.9375rem;
}
/* the curves escape their column into the margin — the secondary grid break */
.curve-row__plot{position:relative;height:clamp(96px,13vw,168px);margin-inline-end:calc(var(--gut) * -1)}
.curve-row__plot canvas,.curve-row__plot svg{display:block;width:100%;height:100%}
.curve-row--sum .curve-row__plot{height:clamp(120px,16vw,200px)}
.curve-row--sum .curve-row__note strong{color:var(--amber)}
@media (max-width:760px){
  .curve-row{grid-template-columns:1fr;gap:1rem}
  .curve-row__plot{margin-inline-end:0}
}

/* ── scene 3: the peak. No heading on entry — the field IS the opening. ────── */
.peak{position:relative}
.peak__track{height:380vh}
.peak__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:stretch;
}
.peak__stage canvas,.peak__stage .static-fig{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.peak__hud{
  position:absolute;left:var(--gut);top:calc(var(--bar) + 1.5rem);z-index:3;
  display:grid;gap:0.55rem;font-size:0.6875rem;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--ink-quiet);
  font-variation-settings:'wght' 400,'wdth' 75;
}
.peak__hud div{border-left:1px solid var(--rule);padding-left:0.7rem;display:grid;gap:0.1rem}
.peak__hud span{
  color:var(--ink);font-size:0.9375rem;text-transform:none;letter-spacing:0.01em;
  font-variation-settings:'wght' 600,'wdth' 100;font-variant-numeric:tabular-nums;
}
.peak__land{
  position:absolute;right:var(--gut);bottom:calc(var(--bar) + 2rem);z-index:3;
  max-width:34rem;text-align:right;
}
.js .peak__land{
  opacity:0;transform:translateY(14px);
  transition:opacity 420ms ease-out,transform 420ms ease-out;
}
.js .peak__land.is-in{opacity:1;transform:none}
.peak__land h2{margin-bottom:0.9rem}
.peak__land p{margin:0;max-width:38ch;margin-left:auto;text-align:left;
  color:var(--ink-quiet);font-size:0.875rem}
@media (max-width:760px){
  .peak__track{height:240vh}
  /* On a phone the copy and the HUD sit ON the field, so both get the ground under them —
     a title card over a film, not a decorative panel. Without this the line runs through
     the words and neither is readable. */
  .peak__land{
    left:0;right:0;bottom:var(--bar);max-width:none;text-align:left;
    background:var(--ground);border-top:1px solid var(--rule);
    padding:1rem var(--gut) 1.15rem;
  }
  .peak__land p{max-width:none;margin-left:0}
  .peak__land h2{margin-bottom:0.6rem}
  .peak__hud{
    left:0;right:0;top:var(--bar);grid-template-columns:1fr 1fr;
    gap:0.4rem 1rem;font-size:0.625rem;
    background:var(--ground);border-bottom:1px solid var(--rule);
    padding:0.7rem var(--gut);
  }
  .peak__hud div{border-left:none;padding-left:0}
  .peak__hud span{font-size:0.8125rem}
}

/* ── scene 4: opens as a full-bleed band ───────────────────────────────────── */
.sweep{position:relative;padding-block:clamp(3rem,8vh,6rem)}
.sweep__field{position:relative;height:min(78svh,720px)}
.sweep__field canvas,.sweep__field .static-dial{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.sweep__hud{
  position:absolute;right:var(--gut);top:1rem;z-index:2;display:flex;gap:1.5rem;
  font-size:0.6875rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-quiet);
  font-variation-settings:'wght' 400,'wdth' 75;
}
.sweep__hud div{display:grid;gap:0.1rem;text-align:right}
.sweep__hud span{
  color:var(--ink);font-size:0.875rem;text-transform:none;letter-spacing:0.01em;
  font-variation-settings:'wght' 600,'wdth' 100;font-variant-numeric:tabular-nums;
}
.sweep__copy{margin-top:clamp(1.5rem,4vh,3rem)}
.sweep{padding-bottom:clamp(1rem,2vh,2rem)}

/* ── scene 5: split 5/7, opens with the heading in the narrow column ───────── */
.plate{padding-block:clamp(3.5rem,8vh,6rem)}
.plate__grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.plate__art{position:relative;height:clamp(260px,30vw,420px)}
.plate__art canvas{display:block;width:100%;height:100%}
.plate__spec{width:100%;border-collapse:collapse;margin-top:1.75rem;font-size:0.8125rem}
.plate__spec th,.plate__spec td{
  text-align:left;padding:0.6rem 0;border-top:1px solid var(--rule);vertical-align:top;
}
.plate__spec th{
  font-variation-settings:'wght' 500,'wdth' 75;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--ink-quiet);font-size:0.6875rem;width:12rem;padding-right:1.5rem;
}
.plate__spec{grid-column:1 / -1;margin-top:2.5rem}
.plate__spec td{color:var(--ink)}
@media (max-width:760px){
  .plate__grid{grid-template-columns:1fr}
  .plate__art{order:-1;height:clamp(220px,58vw,340px)}
  .plate__spec th{width:auto;display:block;padding-bottom:0.1rem;border-top:none}
  .plate__spec td{display:block;padding-top:0;padding-bottom:0.9rem}
  .plate__spec tr{display:block;border-top:1px solid var(--rule);padding-top:0.6rem}
}

/* ── scene 6: centred type, deliberately still ─────────────────────────────── */
.door{
  padding-block:clamp(6rem,16vh,12rem) calc(var(--bar) + 4rem);
  text-align:center;border-top:1px solid var(--rule);
}
.door h2{margin-bottom:1.25rem}
.door .lede{margin-inline:auto}
.control{
  margin-top:3rem;display:grid;gap:1.25rem;justify-items:center;
}
.picks{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center}
.pick{
  font:inherit;font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:'wght' 500,'wdth' 87.5;
  background:transparent;color:var(--ink-quiet);
  border:1px solid var(--rule);border-radius:0;
  padding:0.5rem 0.85rem;cursor:pointer;
  transition:color 140ms ease-out,border-color 140ms ease-out;
}
.pick:hover{color:var(--ink);border-color:var(--verdigris)}
.pick[aria-pressed=true]{color:var(--amber);border-color:var(--amber)}
.latfield{display:flex;gap:0.6rem;align-items:baseline;flex-wrap:wrap;justify-content:center}
.latfield label{font-size:0.6875rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-quiet);font-variation-settings:'wght' 500,'wdth' 87.5}
.latfield input{
  font:inherit;font-size:1rem;font-variation-settings:'wght' 600,'wdth' 112.5;
  font-variant-numeric:tabular-nums;
  background:transparent;color:var(--amber);
  border:none;border-bottom:1px solid var(--amber);border-radius:0;
  width:7rem;padding:0.3rem 0;text-align:center;
}
.cta{
  display:inline-block;margin-top:1rem;
  font-size:0.8125rem;letter-spacing:0.08em;text-transform:uppercase;
  font-variation-settings:'wght' 600,'wdth' 100;
  color:oklch(0.15 0.02 72);background:var(--amber);
  border:1px solid var(--amber);padding:0.8rem 1.6rem;
  text-decoration:none;cursor:pointer;
  transition:background-color 140ms ease-out,color 140ms ease-out;
}
.cta:hover{background:transparent;color:var(--amber)}
.ack{
  margin:0;min-height:1.5rem;font-size:0.8125rem;color:var(--ink-quiet);
  max-width:46ch;text-align:center;
}
.ack--error{color:var(--amber)}
.colophon{
  margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:0.6875rem;color:var(--ink-quiet);line-height:1.8;
}
.colophon p{max-width:none;margin:0 auto 0.4rem;}

/* Without JS there is nothing to scrub, so the peak's tall track would be three screens of
   empty space under a static figure. Collapse it — the same cut reduced-motion gets. */
html:not(.js) .peak__track{height:auto}
/* the fallback figure sets its own height, so there is never a band of empty stage under it */
html:not(.js) .peak__stage{position:static;height:auto;padding-block:1.5rem}
html:not(.js) .peak__stage .static-fig{position:static;width:100%;height:auto;max-height:78svh}
html:not(.js) .peak__land{position:static;text-align:left;max-width:var(--measure);
  margin:1.5rem auto 0;padding-inline:var(--gut)}
html:not(.js) .peak__land p{margin-left:0;max-width:62ch}
html:not(.js) .peak__hud{position:absolute}

/* ── the no-JS / no-canvas layer ───────────────────────────────────────────
   These SVGs are in the markup and visible by default. JS hides them only once a
   canvas is actually there to replace them, so a JS failure leaves a real page. */
.static-fig,.static-curve,.static-dial{width:100%;height:100%;display:block}
.static-fig .grat line,.static-dial .arcs circle,.static-dial .hours line,.static-curve .axis{
  stroke:var(--verdigris);fill:none;
}
.static-fig .grat line{stroke-opacity:0.11}
.static-fig .grat text,.static-fig .ticks text{
  fill:var(--ink-quiet);font-family:'Martian Mono',monospace;font-size:11px;opacity:0.55;
}
.static-fig .ticks line{stroke:var(--amber);stroke-width:1}
.static-fig .fig{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round}
.static-curve{height:100%}
.static-curve .axis{stroke-opacity:0.3}
.static-curve .curve{fill:none;stroke:var(--amber);stroke-width:1.8;vector-effect:non-scaling-stroke}
.static-dial .arcs circle{stroke-opacity:0.16}
.static-dial .hours line{stroke-opacity:0.3}
.static-dial .shadow{stroke:oklch(0.08 0.008 196);stroke-width:9;stroke-linecap:round}
.static-dial .root{fill:var(--amber)}

.js .fallback{display:none}
.js .live{display:block}
.live{display:none}

/* ── reduced motion: the same film, cut differently ────────────────────────
   Not "no animation" — the pin, the scrub and the zoom are removed, and the peak
   is handed over as a finished instrument instead of a performance. */
@media (prefers-reduced-motion:reduce){
  .peak__track{height:auto}
  .peak__stage{position:static;height:min(88svh,780px)}
  .peak__land{opacity:1;transform:none;transition:none;position:static;
    text-align:left;max-width:none;margin:2rem auto 0;padding-inline:var(--gut);
    max-width:var(--measure);}
  .peak__stage .peak__hud{position:absolute}
  .sweep__field{height:min(64svh,560px)}
  .pick,.cta{transition:none}
}