/* =====================================================================
   SUNGLINT STUDIO — stylesheet (One Orbit, Phase 5)
   The page is one orbit (brief §3): a photoreal scene fixed behind a native scroll, the text laid out in the scene's
   text zones (PLAN.md §3, D-036) so it reads over sky and night ground without a scrim (brief §8.5).
   The brand system carries over (brief §1.3, D3): warm near-black ground, bone type, one warm accent,
   hairline grid, zero radius, two families with variable width axes.
   ===================================================================== */

/* ---------- Fonts: self-hosted (brief §9.5), variable, with metric-matched fallbacks ---------- */
/* fonts.mjs: begin (written by tools/fonts.mjs; do not edit by hand) */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: block;
}
@font-face {
  font-family: "Archivo fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 98.33%;
  ascent-override: 89.29%;
  descent-override: 21.36%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Archivo Display";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: block;
}
@font-face {
  font-family: "Archivo Display fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 400 800;
  size-adjust: 122.73%;
  ascent-override: 71.54%;
  descent-override: 17.11%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-display: block;
}
@font-face {
  font-family: "Martian Mono fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 108.32%;
  ascent-override: 92.32%;
  descent-override: 18.46%;
  line-gap-override: 0.00%;
}
/* fonts.mjs: end */

/* ---------- Tokens ---------- */
:root {
  /* Ground: warm near-black. Never blue-shifted. */
  --void:     #0A0908;
  --deep:     #100E0C;
  --deeper:   #060505;

  /* Type: two fixed opaque greys + one metadata grey. No alpha ramp. */
  --bone:     #E8E4DA;   /* 15.7:1 on the void */
  --ash:      #B0A99F;   /*  8.3:1 — body, secondary */
  --dim:      #8A847A;   /*  5.4:1 — metadata, passes AA at 11px */

  /* The single accent: ice cyan, the colour of sunlight glinting off water, which is what "sunglint" means
     (D-051; chosen from five candidates shown on the page). 13.3:1 on the void. The craft's handrails are
     not this colour: they stay gold. */
  --signal:   #88E0F6;
  --signal:   oklch(0.86 0.09 215);
  --signal-s: #88E0F6;                         /* sRGB, for JS and fills */
  --alarm:    #E0664A;                         /* the form's failure message only */

  /* Hairlines. Tinted to the bone, never pure white. */
  --rule:     rgba(232, 228, 218, 0.10);
  --rule-2:   rgba(232, 228, 218, 0.22);

  --grid: 1px;
  --rail: 0px;                                 /* 62px on wide landscape screens, below */
  --col-x: 20px;                               /* the text column's left edge */
  --col-w: 100%;                               /* and its width */
  /* The instruments frame the scene (D-043): the navigation bar above it, the telemetry strip below it (two rows: of
     the four plain fields on a phone (D-092), of all seven from 720 px; one row from 1100 px), the rail beside it on
     wide screens. */
  --top: 48px;
  --bot: 50px;
  --win: calc(100vh - var(--top) - var(--bot));   /* the window's height */

  /* Instrument motion: fast out, snap to rest. Never floaty. */
  --out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --fast: 140ms var(--out);
  --med: 220ms var(--out);

  --sans: "Archivo", "Archivo fallback", sans-serif;
  --display: "Archivo Display", "Archivo Display fallback", sans-serif;   /* .d only: its fallback is matched to it (fonts.mjs) */
  --mono: "Martian Mono", "Martian Mono fallback", ui-monospace, monospace;

  color-scheme: dark;
}
/* Landscape: one text column on the left, from the gutter to under half the width; the craft and the lit Earth keep
   the right half (the text zones, PLAN.md §3). */
@media (min-aspect-ratio: 1/1) {
  :root { --col-x: clamp(18px, 6vw, 112px); --col-w: 46vw; }
}
/* The rail takes the left 62 px on landscape screens over 1024 px wide; the column clears it. */
@media (min-aspect-ratio: 1/1) and (min-width: 1025px) {
  :root { --rail: 62px; --col-x: clamp(78px, 6vw, 112px); }
}
@media (min-width: 1100px) { :root { --bot: 36px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
/* An in-page link lands its block on the upper third, where its anchor's frame was composed (scene/timeline.js
   REF_LINE); and whatever takes the focus is scrolled clear of the instruments (WCAG 2.4.11). */
html { -webkit-text-size-adjust: 100%; background: var(--void); scroll-padding: 33.333vh 0 calc(var(--bot) + 16px); }
body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16.5px;
  font-variation-settings: "wdth" 100;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--signal-s); color: #0A0908; }
:focus-visible { outline: 2px solid var(--signal-s); outline-offset: 3px; }

/* ---------- Type roles ---------- */
/* Metadata: the mono layer. Real facts only, never decoration. */
.m {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.m-lit { color: var(--signal); }
.m-bone { color: var(--ash); }

/* Display: the violent jump. Expanded width axis instead of a third family. */
.d {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.035em;
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bone);
}
h1.d { font-size: 12.7vw; }
/* The hero heading breaks its own lines (<br>) and never wraps, so it has the same lines, and the same box, in any face:
   in its own, in the fallback that holds its place while the font loads, and in a phone's unmatched system face
   (Android has no Arial). Nothing under it moves when the font arrives (REMAKE_PLAN.md fix 2). */
.blk-hero h1.d { white-space: nowrap; }
h2.d { font-size: clamp(2.1rem, 4.6vw, 5.2rem); }
@media (min-aspect-ratio: 1/1) { h1.d { font-size: 7vw; } }
/* The Slovenian heading's longest line, PRITEGNEJO, is ten letters to GRAVITY's seven: two lines ("STRANI, KI" over
   it), sized so that line fills the text column (measured 2026-10-22: 10.8 vw in portrait at 320 px with a scrollbar,
   5.22 vw in landscape). Its echo in the phone's footer takes the same size. */
.blk-hero h1.d:lang(sl), .foot-d:lang(sl) { font-size: 10.7vw; }
/* At 0.86 the comma of "STRANI, KI" hung into the N under it and read as Ń (critic R3, D-091). */
.blk-hero h1.d:lang(sl) { line-height: 0.96; }
@media (min-aspect-ratio: 1/1) { .blk-hero h1.d:lang(sl) { font-size: 5.15vw; } }
/* A Slovenian section heading has twelve-letter words that cannot wrap (PRESENEČENJ., POTREBUJETE.: 9.2 em): in
   landscape it is sized to the column, so the longest stands inside it (critic R2, 2026-10-23: they ran 26-31 px past
   it at 1024-1440 px). The method heading is a stack of four lines and the contact heading keeps "mi, kaj" together, so
   no short word stands alone between two long lines (KAJ, BREZ) at any width. */
@media (min-aspect-ratio: 1/1) { h2.d:lang(sl) { font-size: clamp(1.5rem, calc((var(--col-w) - var(--col-x)) / 9.6), 5.2rem); } }
#contact-h:lang(sl) { max-width: 12em; }   /* two lines where they fit: POVEJTE MI, KAJ / POTREBUJETE. */
/* The comma of "MI, KAJ" over the O of POTREBUJETE read as Ó (critic R3), as the hero's did: the same line height. */
#contact-h:lang(sl) { line-height: 0.96; }
.d em { font-style: normal; color: var(--signal); }
/* The hero's offer in plain words, right under the headline: the second thing read (Pino's line, D-062). */
.offer { font-size: clamp(1.3rem, 2.2vw, 2.1rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
  font-variation-settings: "wdth" 104; color: var(--bone); max-width: 24ch; text-wrap: balance; }

.body-lg { font-size: clamp(1.02rem, 1.25vw, 1.22rem); line-height: 1.5; color: var(--ash); max-width: 46ch; }
.body-lg strong, .body-lg b { color: var(--bone); font-weight: 600; }

/* ---------- The scene and the page over it ---------- */
/* The canvas is the window between the instruments: nothing of the scene is drawn under them (its height in vh, so a
   phone's collapsing toolbar never resizes it). */
#c, .poster { position: fixed; left: var(--rail); top: var(--top); display: block; z-index: 0;
  width: calc(100vw - var(--rail)); height: calc(100vh - var(--top) - var(--bot)); }
/* The stills (brief §7.8, §7.9; ui/stills.js): one picture per section, the engine's own frame at its anchor, in the
   same window under the canvas. Only the section's picture is displayed (the others are not even fetched); a change
   of section is a crossfade. Without script the hero's picture stays. */
.poster { overflow: hidden; }
.poster picture { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 260ms var(--out); }
.poster picture.show, .poster picture.on { display: block; }
.poster picture.on { opacity: 1; }
/* A window of another shape than the picture's crops it from the side the text is on: the subject sits right of the
   text column in landscape and above it in portrait (the text zones, PLAN.md §3). */
.poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
@media (orientation: portrait) { .poster img { object-position: center top; } }
/* The reel (ui/reel.js, fix 7): the frames between two sections' pictures, over them, cross-faded by the scroll. It
   fades in once its first frame is decoded; its frames fade only as it settles at rest (FADE_MS there). */
.poster .reel { position: absolute; inset: 0; z-index: 1000000; opacity: 0; transition: opacity 260ms var(--out); }
.poster .reel.on { opacity: 1; }
.poster .reel img { position: absolute; inset: 0; opacity: 0; }
.poster .reel.ease img { transition: opacity 140ms linear; }
/* The canvas shows once its first frame is drawn (boot.js: <html class="live">): it fades in over the poster, which
   holds the same frame, and the poster leaves when it is covered. */
#c { opacity: 0; }
.live #c { opacity: 1; transition: opacity 260ms var(--out); }
.live .poster { visibility: hidden; transition: visibility 0s linear 260ms; }
/* No live scene (boot.js: tier T0, or the scene failed): the canvas leaves the window to the stills (brief §7.9),
   and HOLD goes with it: nothing moves. */
.stills #c, .stills #hold { display: none; }
main, .footer { position: relative; z-index: 1; }
body { padding-bottom: var(--bot); }          /* the page's end clears the telemetry strip */
/* ?ui=0: the scene alone (the harness's frames; hero = contact: the scrollbar's thumb moves). The page stays laid
   out, hidden, so the legibility gate can show and measure it. */
.noui { scrollbar-width: none; }
.noui main, .noui .footer, .noui .nav, .noui .readout, .noui .rail, .noui .skip { visibility: hidden; }

.skip {
  position: fixed; z-index: 10; left: 12px; top: 12px; padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--bone); color: var(--void);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- Anchored blocks (PLAN.md §2) ----------
   ui/layout.js gives each its height so the anchor meets the upper third at its p. These min-heights are the page
   without script (and before the solve): the flight page's layout, a page of 12 viewports. */
[data-anchor] { position: relative; }
.blk-hero       { min-height: 165.333vh; }
.blk-work       { min-height: 198vh; }
.blk-capability { min-height: 165vh; }
.blk-eclipse    { min-height: 55vh; }
.blk-moment     { min-height: 55vh; }
.blk-sunrise    { min-height: 110vh; }
.blk-method     { min-height: 165vh; }
.blk-colophon   { min-height: 131.667vh; }
.blk-contact    { min-height: 100vh; }

/* The text column. Each block's text starts a little below its anchor; the hero's and contact's in the hero's zone
   (contact shows the hero's frame, S8 = S1); the periapsis moment shows one line per screen, each low enough that the
   next is below the fold at its anchor. */
.blk { margin-left: var(--col-x); width: calc(var(--col-w) - var(--col-x)); padding: clamp(64px, 9vw, 132px) 0 0; }
@media not all and (min-aspect-ratio: 1/1) { .blk { width: calc(100% - 2 * var(--col-x)); } }
.blk > * + * { margin-top: 20px; }
/* Portrait: the craft's band is the window's top third; the text starts below it. The hero's starts right under the
   craft (S1's portrait key: its centre 18 % down the window, 18 vw either way) and ends above the rising Earth. */
.blk-hero .blk { padding-top: calc(var(--top) + 0.18 * var(--win) + 22vw + 24px); }   /* 24 px clear of the Earth (D-062) */
.blk-contact .blk { padding-top: calc(max(64px, 11vh) - var(--fit, 0px)); }   /* --fit: ui/layout.js fitLift (D-098) */
.blk-moment .blk { padding-top: 7vh; }   /* low enough to be alone on its screen, high enough to be gone by the next anchor */
@media not all and (min-aspect-ratio: 1/1) {
  .blk { padding-top: max(64px, 11vh); }
  .blk-capability .blk { padding-top: max(80px, 14vh); }   /* S3a's dish fills the top of the frame */
  .blk-hero .blk > * + * { margin-top: 16px; }   /* the actions 16 px or more above the strip on a phone's whole screen (D-064) */
}
@media (min-aspect-ratio: 1/1) {
  .blk-hero .blk { padding-top: max(20vh, 140px); }   /* the hero's text centred in the window's height */
  /* Higher than the other blocks' (D-064): into the sky above the heading; less --fit where the channel list would
     meet the strip at the anchor (D-098). */
  .blk-contact .blk { padding-top: calc(clamp(48px, 6.5vw, 96px) - var(--fit, 0px)); }
}

.sec-label { display: flex; align-items: baseline; gap: 12px; text-wrap: balance; }   /* never one word alone on a line */
.sec-label::before { content: ""; width: 26px; height: 1px; background: var(--signal-s); flex: none; }
@media (max-width: 480px) { .sec-label .sep { display: none; } .sec-label .tail { display: block; } }   /* no dot left hanging */

/* The hero's kicker: the headword in the text's own colour, not the accent (the hero already has two: the headline's A
   and the primary action). The definition starts with its dash and wraps into lines of even length (D-064: "FROM
   ABOVE." stood alone under a full line). */
.defn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 74ch; }
.defn b { color: var(--bone); font-weight: 400; text-wrap: balance; }
.defn .m-lit { color: var(--bone); }
/* The periapsis moment's one label sits on the starfield: a step lighter than the other section labels. */
.blk-moment .sec-label { color: var(--ash); font-size: 12px; }
/* The hero's terms (REMAKE_PLAN.md step 1): the price and the time, in the instruments' voice and the text's own colour;
   on a phone they wrap at the dot, never inside a half. */
.terms { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; color: var(--bone); }
.terms .sep { color: var(--dim); }
@media (max-width: 480px) { .terms .sep { display: none; } }   /* a phone: always two lines, so no dot left hanging */
.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: baseline; }   /* the two labels on one baseline */
/* A phone: the two actions on one row down to 360 px, so the hero's text ends above the rising Earth. */
@media (max-width: 480px) { .actions { column-gap: 12px; } .actions .lnk { font-size: 11px; letter-spacing: 0.06em; } .actions .lnk-fill { padding: 13px 14px; } }

.line { font-size: clamp(1.4rem, 2.4vw, 2.4rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
  font-variation-settings: "wdth" 104; color: var(--bone); max-width: 26ch; text-wrap: pretty; }

/* ---------- Links ---------- */
.lnk {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone);
  padding-bottom: 5px;
  border-bottom: var(--grid) solid var(--rule-2);
  transition: color var(--fast);
}
.lnk::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--signal-s); transition: width var(--med);
}
.lnk:hover::after { width: 100%; }
.lnk-fill { background: var(--signal-s); color: #0A0908; border: none; padding: 13px 22px; font-weight: 600; }
.lnk-fill::after { display: none; }
.lnk-fill:hover { background: var(--bone); }

/* ---------- The instruments (D-043) ----------
   They frame the scene instead of lying on it: each is on the page's own ground with a hairline toward the window,
   the canvas is inset to match (above), and the page's text scrolls under them. So they read the same at every
   scroll position and viewport, and nothing of theirs is ever measured against the scene (brief §8.5: no scrim). */

/* The navigation bar: the wordmark, the numbered sections, and on a phone HOLD beside the menu. */
.nav {
  position: fixed; z-index: 4; top: 0; left: 0; right: 0; height: var(--top);
  display: flex; align-items: center; gap: 28px; padding: 0 min(var(--col-x), 28px) 0 var(--col-x);
  background: var(--void); border-bottom: var(--grid) solid var(--rule);
}
.brand { font-weight: 800; font-size: 0.98rem; letter-spacing: 0.02em; font-variation-settings: "wdth" 112; text-transform: uppercase; }
.nav nav { margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash);
  transition: color var(--fast);
}
.nav-links a i { font-style: normal; color: var(--dim); font-size: 9px; transition: color var(--fast); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--bone); }
.nav-links a:hover i, .nav-links a[aria-current] i { color: var(--signal); }
/* The language switch (REMAKE_PLAN.md step 1): the page's twin in the other language, the bar's last item, set off from
   the sections by a hairline; on a phone, the open menu's last row. */
.nav-links .lang { margin-left: 8px; padding-left: 8px; border-left: var(--grid) solid var(--rule); }
.nav-toggle {
  display: none; margin-left: auto; height: 30px; padding: 0 12px; border: var(--grid) solid var(--rule-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.nav-toggle[aria-expanded="true"] { color: var(--void); background: var(--bone); border-color: var(--bone); }
@media (max-width: 900px) {
  .nav { gap: 0; }
  .nav nav { margin-left: 0; }
  .nav-toggle { display: block; }
  .nav-links { display: none; }
  /* The open menu: a panel under the bar, on the page's ground. */
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--void); border-top: var(--grid) solid var(--rule); border-bottom: var(--grid) solid var(--rule); padding: 6px 0;
  }
  .nav-links.open a { padding: 14px var(--col-x); gap: 12px; }
  .nav-links .lang { margin: 0; padding: 0; border-left: 0; border-top: var(--grid) solid var(--rule); }
}

/* The telemetry strip (brief §8.3): Martian Mono at 11 px, tabular figures, every value in a box as wide as its
   longest reading (--ch: one character with its letter-spacing), so nothing moves as the values change. */
.readout {
  --ch: calc(1ch + 0.04em);
  position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; height: var(--bot);
  display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: auto;
  align-content: center; justify-content: space-between; gap: 0 12px;
  padding: 0 var(--col-x);
  background: var(--void); border-top: var(--grid) solid var(--rule);
  font-family: var(--mono); font-size: 11px; line-height: 17px; letter-spacing: 0.04em; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.readout p { white-space: nowrap; }
.readout .l { display: inline-block; width: calc(6 * var(--ch)); color: var(--dim); }
/* STANJE is six letters: one more, so it never runs into its value (one row, from 1100 px, sizes the labels to their words).
   From 720 px only its own column; on a phone ČAS shares that column. */
@media (max-width: 1099px) { .readout:lang(sl) .l { width: calc(7 * var(--ch)); } }
@media (min-width: 720px) and (max-width: 1099px) {
  .readout:lang(sl) p:not(:has([data-f="STATE"], [data-f="SUB"])) .l { width: calc(6 * var(--ch)); }
  #hold:lang(sl) { padding: 0 8px; }
}
.readout .v { display: inline-block; }
.readout [data-f="ALT"] { width: calc(9 * var(--ch)); }   .readout [data-f="VEL"] { width: calc(11 * var(--ch)); }
.readout [data-f="NU"] { width: calc(6 * var(--ch)); }    .readout [data-f="TPE"] { width: calc(8 * var(--ch)); }
.readout [data-f="STATE"] { width: calc(8 * var(--ch)); } .readout [data-f="SUB"] { width: calc(16 * var(--ch)); }
.readout [data-f="LOCAL"] { width: calc(10 * var(--ch)); }
/* ν, drawn: neither font has the letter. It sits on the baseline at the x-height, in the text's own colour. */
.nu { display: inline-block; width: 0.62em; height: 0.56em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 88; }
/* Among the readout's capital labels (ALT, VEL, T−PE) it stands at their height, with the same weight of stroke. */
.readout .nu { width: 0.75em; height: 0.7em; stroke-width: 70; }
/* HOLD (WCAG 2.2.2): pauses the wall-clock motion. At the strip's end; on a phone, where the strip's rows are too
   low to tap, in the navigation bar beside the menu. Its sign says what it does without a word more (D-092, critic
   R3: "an unexplained command"): two bars while the scene moves, a triangle while it is held (press to go on). */
#hold { height: 24px; padding: 0 10px; font: inherit; letter-spacing: 0.1em; color: var(--bone); border: var(--grid) solid var(--dim); }
#hold::before { content: ""; display: inline-block; width: 6px; height: 8px; margin-right: 7px; vertical-align: -0.5px;
  border: solid currentColor; border-width: 0 2px; }
#hold:lang(sl)::before { margin-right: 5px; }
#hold[aria-pressed="true"] { color: var(--void); background: var(--bone); border-color: var(--bone); }
#hold[aria-pressed="true"]::before { width: 0; border-width: 4px 0 4px 6px; border-color: transparent currentColor; }
@media (max-width: 719px) {
  .nav-toggle, #hold { width: 54px; height: 30px; padding: 0; }
  .readout .hold { position: fixed; top: 9px; right: calc(var(--col-x) + 54px + 6px); }
  /* Less weight than the menu beside it (critic R3): no box until it is pressed. */
  #hold { border-color: transparent; color: var(--ash); }
  #hold:lang(sl) { width: 66px; letter-spacing: 0.08em; }   /* USTAVI and its sign, clear of the wordmark beside a desktop's scrollbar */
  /* Two rows, the four fields in plain words (D-092, critic R3: four rows took 14 % of the phone's height from the
     scene); ν, the time to periapsis and the sub-point are shown from 720 px. */
  .readout p:has([data-f="NU"]), .readout p:has([data-f="TPE"]), .readout p:has([data-f="SUB"]) { display: none; }
}
/* Down to 320 px (WCAG 1.4.10): a smaller wordmark, the strip's labels run into their values, and the section headings a
   step smaller, so a long Slovenian word (PRESENEČENJ, POTREBUJETE) keeps inside the column. */
@media (max-width: 359px) {
  .brand { font-size: 0.8rem; }
  h2.d { font-size: 1.8rem; }
  #hold:lang(sl) { width: 58px; letter-spacing: 0.04em; }   /* clear of the smaller wordmark beside a desktop's scrollbar */
  .readout { --ch: calc(1ch + 0.02em); letter-spacing: 0.02em; column-gap: 6px; padding: 0 16px; }
  .readout .l { width: auto; margin-right: var(--ch); }
}
@media (min-width: 720px) {
  .readout { padding-right: min(var(--col-x), 28px); }
  .readout .hold { grid-row: 1 / span 2; align-self: center; }
}
/* One row: the seven fields start on a regular step (equal columns where the strip is wide enough), HOLD at its end,
   the fields' text centred on HOLD's (the row is HOLD's height: at its top they stood 3.5 px high, critic R4). */
@media (min-width: 1100px) {
  .readout { grid-template-rows: auto; grid-template-columns: repeat(7, minmax(max-content, 1fr)) auto; justify-content: stretch;
    align-items: center; }
  .readout .l { width: auto; margin-right: var(--ch); }
  .readout .hold { grid-row: auto; }
}

/* The rail (brief §8.2): the orbit to scale, beside the window on wide screens; decorative. */
.rail { display: none; position: fixed; z-index: 3; left: 0; top: var(--top); bottom: var(--bot); width: var(--rail);
  padding: 22px 0; background: var(--void); border-right: var(--grid) solid var(--rule); flex-direction: column;
  align-items: center; justify-content: space-between; pointer-events: none;
  font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--dim); }
.rail-v { writing-mode: vertical-rl; letter-spacing: 0.3em; }
.rail .orbit { width: 50px; overflow: visible; }
.rail .orbit * { vector-effect: non-scaling-stroke; }
.rail .orbit .orbit { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.rail .orbit .earth { fill: var(--deep); stroke: var(--dim); stroke-width: 1; }
.rail .orbit .tick { stroke: var(--dim); stroke-width: 1; }
.rail .orbit text { fill: var(--dim); letter-spacing: 0.05em; }
.rail .orbit .craft { fill: var(--signal-s); }
@media (min-aspect-ratio: 1/1) and (min-width: 1025px) { .rail { display: flex; } }

/* ---------- Work index ----------
   One link per demo in the page's list (index.html); ui/work.js draws each as a row. Without script the list is the
   demos' names, as links. */
.idx { border-top: var(--grid) solid var(--rule); }
.idx a { position: relative; display: block; padding-block: 18px; border-bottom: var(--grid) solid var(--rule); }
.idx a.idx-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; }
.idx a::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--signal-s); transition: width 260ms var(--out);
}
.idx a:hover::before, .idx a:focus-visible::before { width: 100%; }
.idx-n { font-family: var(--mono); font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.idx-row:hover .idx-n, .idx-row:focus-visible .idx-n { color: var(--signal); }
.idx-name, .idx a:not(.idx-row) {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 700; font-variation-settings: "wdth" 112;
  letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; color: var(--bone);
}
.idx-name { display: flex; align-items: baseline; gap: 12px; }
.idx-swatch { width: 9px; height: 9px; flex: none; }   /* the demo's own colour (data-accent) */
.idx-meta { grid-column: 2; display: flex; flex-direction: column; gap: 4px; }
.idx-live { grid-column: 3; grid-row: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--dim);
  transition: color var(--fast); }
.idx-row:hover .idx-live, .idx-row:focus-visible .idx-live { color: var(--signal); }
/* ↗, drawn (neither font has it): on the mono's cap height, in the text's colour. */
.ne { display: inline-block; width: 0.8em; height: 0.8em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.25; }
/* The live preview: the demo itself, running, in one stage in the window beside the text column, mounted while a row
   is hovered or focused (ui/work.js; the page's loop is paused meanwhile). Only for fine pointers on wide windows:
   the same query as work.js's PREVIEW_QUERY. It is a panel on its own ground, like a form field, not text over the
   scene. */
.idx-stage { display: none; }
@media (min-width: 1241px) and (pointer: fine) {
  .idx-stage {
    display: block; position: fixed; z-index: 3; margin: 0;
    right: 40px; top: calc(var(--top) + var(--win) / 2); transform: translateY(-50%);
    width: clamp(420px, calc(100vw - var(--col-w) - 120px), 900px);
    aspect-ratio: 16 / 10; max-height: calc(var(--win) - 48px);
    border: var(--grid) solid var(--rule-2); background: var(--deeper); overflow: hidden;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--fast), visibility 0s linear 140ms;
  }
  .idx-stage[data-on] { opacity: 1; visibility: visible; transition: opacity var(--fast); }
}
.idx-stage iframe {
  width: 1400px; height: 875px; border: 0;   /* work.js sets the demo's own window and its scale */
  max-width: none;              /* the global img, iframe rule would clamp this to the stage's width: never remove */
  transform: scale(0.3); transform-origin: 0 0; pointer-events: none;
}
.idx-stage .stage-tag { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--void); color: var(--ash); padding: 6px 10px; }

/* ---------- Capability ---------- */
.tbl { border-top: var(--grid) solid var(--rule); }
.tbl-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 6px 16px; align-items: baseline;
  padding-block: 16px; border-bottom: var(--grid) solid var(--rule); }
.tbl-row h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; font-variation-settings: "wdth" 106;
  letter-spacing: -0.015em; color: var(--bone); }
.tbl-row p { grid-column: 2; color: var(--ash); font-size: 0.96rem; max-width: 60ch; }

/* ---------- Method ---------- */
.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: var(--grid) solid var(--rule); }
.method li { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px 0; border-bottom: var(--grid) solid var(--rule); }
.method h3 { font-size: 1.12rem; font-weight: 700; font-variation-settings: "wdth" 108; text-transform: uppercase; letter-spacing: -0.01em; }
.method p { color: var(--ash); font-size: 0.93rem; }

/* ---------- Colophon ---------- */
.colo-facts { border-top: var(--grid) solid var(--rule); }
.colo-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: var(--grid) solid var(--rule); }
.colo-facts dt { color: var(--dim); }
.colo-facts dd { color: var(--bone); text-align: right; }
.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: var(--grid) solid var(--rule); }
.claim { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px 0; border-bottom: var(--grid) solid var(--rule); }
.claim h3 { font-size: 1.06rem; font-weight: 700; font-variation-settings: "wdth" 106; letter-spacing: -0.012em; }
.claim p { color: var(--ash); font-size: 0.93rem; }
.sub { color: var(--ash); }
.note { color: var(--ash); font-size: 0.93rem; max-width: 60ch; }
.note cite { font-style: normal; color: var(--bone); }
/* The site's own measurements (brief §8.6): written into the page by tools/site-telemetry.mjs, measured values only.
   Under each value, what it was measured on and when. */
.measured div { flex-wrap: wrap; row-gap: 3px; }
.measured .how { flex: 0 0 100%; text-align: left; color: var(--dim); }
.sub .tl { color: var(--ash); }
/* A wide window: the facts in two columns, so the colophon asks for less of the scroll. */
@media (min-aspect-ratio: 1/1) and (min-width: 1100px) {
  .colo-facts:not(.measured) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
/* A link inside running text: the text's own weight, a hairline under it. */
.tl { color: var(--bone); border-bottom: var(--grid) solid var(--rule-2); overflow-wrap: anywhere;
  transition: color var(--fast), border-color var(--fast); }
.tl:hover { color: var(--signal); border-color: var(--signal-s); }

/* ---------- Contact ---------- */
.chan { border-top: var(--grid) solid var(--rule); }
.chan a { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: var(--grid) solid var(--rule); transition: color var(--fast); }
.chan a:hover { color: var(--signal); }
.chan b { font-weight: 400; font-size: 12px; letter-spacing: 0.04em; color: var(--bone); text-transform: none; }
.chan a:hover b { color: var(--signal); }
/* The e-mail is the section's one action (D-099): the accent, a step larger. */
.chan li:first-child b { color: var(--signal); font-size: clamp(12px, 3.6vw, 14px); }
.chan li:first-child a:hover b { color: var(--bone); }

.form { display: grid; gap: 16px; }
/* The list ends FIT_CLEAR (24) px over the strip at the anchor; 20 px on, the note's rule showed above it (critic R7). */
.chan + .form { margin-top: 44px; }
.form-note { border-left: var(--grid) solid var(--rule-2); padding: 4px 0 4px 14px; font-size: 0.88rem; color: var(--ash); line-height: 1.5; }
.form-note b { color: var(--bone); font-weight: 600; }
.field { display: grid; gap: 7px; }
.field label { color: var(--dim); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
/* The fields are controls with their own ground, so what is typed in them is legible over any frame. */
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; background: var(--deep); border: var(--grid) solid var(--rule-2);
  color: var(--bone); font-family: var(--sans); font-size: 0.97rem; transition: border-color var(--fast);
}
/* The budget's own arrow, not the browser's: a hairline chevron in the text's colour (D-062). */
.field select { appearance: none; padding-right: 42px; }
.pick { position: relative; }
.pick::after { content: ""; position: absolute; right: 18px; bottom: 23px; width: 7px; height: 7px; pointer-events: none;
  border-right: var(--grid) solid var(--ash); border-bottom: var(--grid) solid var(--ash); transform: rotate(45deg); }
/* The message grows with what is typed (where the browser can), so it needs no resize grip in its corner. */
.field textarea { min-height: 132px; max-height: 60vh; resize: none; field-sizing: content; }
/* A focused field keeps the page's focus ring (brief §8.8), close to its box, and its border turns with it. */
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--signal-s); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.form button { justify-self: start; }
.msg { min-height: 18px; color: var(--ash); }
.msg[data-state="sent"] { color: var(--signal); }
.msg[data-state="failed"] { color: var(--alarm); }
.form-legal { font-size: 0.88rem; color: var(--ash); line-height: 1.5; max-width: 60ch; }

/* ---------- Footer ---------- */
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  margin-left: var(--col-x); width: calc(var(--col-w) - var(--col-x)); padding: 28px 0 24px;
  border-top: var(--grid) solid var(--rule); }
/* The demos again, from the Work list (ui/work.js); nothing without script. Then the site's two other pages. Each
   link is tall enough to tap. */
.demo-links, .foot-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; }
.demo-links:empty { display: none; }
.demo-links a, .foot-links a { padding-block: 6px; color: var(--ash); transition: color var(--fast); }
.demo-links a:hover, .foot-links a:hover { color: var(--bone); }
/* The headline's echo and the primary action are the portrait footer's only (below); in landscape the footer is one
   line under the form, whose own button is the action. */
.foot-d, .foot-act .lnk-fill { display: none; }
/* Portrait: the last screen by itself (S8 = S1), laid out as the hero is: its text in the hero's zone, nothing over the
   craft or the Earth, the headline again, and the two actions at the foot of the screen. */
@media not all and (min-aspect-ratio: 1/1) {
  .footer { width: calc(100% - 2 * var(--col-x)); min-height: calc(100vh - var(--bot));
    padding-top: calc(var(--top) + 0.18 * var(--win) + 22vw + 24px); flex-direction: column;
    justify-content: flex-start; border-top: 0; }
  .foot-act { margin-top: auto; padding-top: 14px; }
  .foot-act .lnk-fill { display: inline-flex; }
  .demo-links > span:first-child { flex-basis: 100%; }   /* the label on its own line, the three demos on one */
}
/* The headline's echo where the last screen has the room for it (a phone's browser with its bars showing has not: the
   text would climb into the scene), in place of the copyright line's tagline. */
@media not all and (min-aspect-ratio: 1/1) { @media (min-height: 720px) {
  .foot-d { display: block; margin: 14px 0 10px; font-family: var(--sans); font-size: 12.7vw; }
  .foot-tag { display: none; }
} }

/* ---------- The document pages (/credits/, /privacy/; in Slovenian /viri/, /zasebnost/) ----------
   Plain pages on the page's own ground (<html class="doc">): the navigation bar, one column of text, no scene and no
   script. They read the same with every stylesheet feature a text browser lacks. */
.doc { scroll-padding: calc(var(--top) + 16px) 0 16px; }
.doc body { padding-bottom: 0; }
.doc .nav nav { margin-left: auto; }
.doc-links { display: flex; gap: 2px; white-space: nowrap; }   /* home and the language switch on one line, down to 320 px */
.doc-links a { display: inline-block; padding: 8px 0 8px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ash); transition: color var(--fast); }
.doc-links a:hover { color: var(--bone); }
.doc main { margin-left: var(--col-x); width: min(100% - 2 * var(--col-x), 46rem);
  padding: calc(var(--top) + clamp(40px, 7vw, 96px)) 0 clamp(56px, 8vw, 104px); }
.doc main > * + * { margin-top: 18px; }
.doc h1.d { font-size: clamp(2.1rem, 4.6vw, 5.2rem); }
.doc main > .sec-label + h1 { margin-top: 20px; }
.doc h2 { margin-top: 56px; padding-top: 20px; border-top: var(--grid) solid var(--rule); font-size: 1.12rem; font-weight: 700;
  font-variation-settings: "wdth" 108; text-transform: uppercase; letter-spacing: -0.01em; color: var(--bone); }
.doc h3 { margin-top: 30px; font-size: 1.02rem; font-weight: 600; font-variation-settings: "wdth" 104; color: var(--bone); }
.doc main p, .doc main li { color: var(--ash); max-width: 68ch; }
.doc main strong, .doc main b { color: var(--bone); font-weight: 600; }
.doc main p.m { color: var(--dim); }
/* A list: a short sodium dash before each item. */
.doc .list { display: grid; gap: 9px; }
.doc .list li { position: relative; padding-left: 20px; }
.doc .list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 9px; height: 1px; background: var(--signal-s); }
/* A credit line or a notice, word for word as its owner asks for it. */
.doc blockquote { border-left: 2px solid var(--rule-2); padding: 2px 0 2px 14px; color: var(--bone); max-width: 68ch; }
/* Label and value, a hairline between the rows. */
.kv { border-top: var(--grid) solid var(--rule); }
.kv div { display: grid; grid-template-columns: minmax(104px, 0.32fr) minmax(0, 1fr); gap: 2px 16px; align-items: baseline;
  padding: 11px 0; border-bottom: var(--grid) solid var(--rule); }
.kv dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--dim); }
.kv dd { color: var(--bone); overflow-wrap: anywhere; }
.kv dd span { display: block; color: var(--ash); font-size: 0.93rem; }
.doc-foot { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  margin: 0 var(--col-x); padding: 22px 0 28px; border-top: var(--grid) solid var(--rule); }

/* Reduced motion (brief §7.9; boot.js leaves the page on its stills: no flight, nothing on the wall clock). The
   page's own transitions end at once. The stills' crossfade stays: a change of opacity, nothing travels. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .poster picture { transition-duration: 260ms !important; }
}