/* Maison Kaithi — design tokens
   One typeface, two tones. Hierarchy comes from size, weight and grey value — never from
   colour — so the only colour on the page is the watch itself. The type is Apple's SF Pro
   where the platform provides it (macOS / iOS), and Inter, its closest open equivalent,
   everywhere else. */
/* Inter, self-hosted (vendor/inter, SIL Open Font License): the Latin subset, variable 400–700
   with optical sizes. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/inter/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #000;
  --surface: #0b0b0c;
  --surface-2: #161617;
  --surface-3: #1d1d1f;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #86868b;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.24);
  --field: #1d1d1f;
  --field-line: #424245;
  --focus: #2997ff;
  --error: #ff6961;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* clears the notch on phones held sideways; on ultra-wide screens it holds the content to a
     centred 112rem measure */
  --gutter: max(clamp(1.25rem, 4vw, 3.5rem), env(safe-area-inset-left), env(safe-area-inset-right), calc((100vw - 112rem) / 2));
  --nav-h: 3.25rem;

  /* Motion system — one vocabulary for the whole site. Three behaviours:
       precise  (--ease)        navigation, colour, focus: starts and stops cleanly
       reveal   (--ease-out)    content arriving: fast in, long editorial settle
       physical (--ease-weight) things with mass — chips, pills, buttons: firm start, soft stop
     and six durations, from acknowledging a press to moving the stage itself. The 3D scene
     follows the same rules (scene.js): eased camera moves of ~1.15 s, light passes of 1.4 s. */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-weight: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 120ms;   /* a press acknowledged */
  --dur-hover: 200ms;   /* hover, focus, colour */
  --dur-state: 350ms;   /* a control changes state */
  --dur-fade: 550ms;    /* overlays and captions come and go */
  --dur-reveal: 1000ms; /* editorial content arrives */
  --dur-scene: 1500ms;  /* the stage: canvas, light, large surfaces */
  --stagger: 80ms;      /* between items of one reveal */

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.qa *, .qa *::before, .qa *::after { transition: none !important; animation: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Large displays: everything is set in rem, so the whole interface scales with the screen
   above 1920 px — by width and by height, whichever is smaller, up to 1.5× — instead of
   staying laptop-sized beside a watch that fills a 27-inch screen. */
@media (min-width: 1921px) {
  html { font-size: clamp(16px, min(100vw / 112.5, 100vh / 62.5), 24px); }
}
body {
  margin: 0;
  background: radial-gradient(110vmax 80vmax at 68% 32%, #131313 0%, var(--bg) 58%) fixed, var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.47 var(--sans);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; }
a { color: inherit; }
h1, h2, p, dl, dd, ol, ul, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--text); color: var(--bg); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: 980px; background: var(--text); color: var(--bg);
  transform: translateY(-200%); transition: transform var(--dur-hover);
}
.skip:focus { transform: none; }
/* Long jumps (ui.js initJumps): the page dips to black for a moment instead of flying past. */
.veil {
  position: fixed; inset: 0; z-index: 40; background: var(--bg); pointer-events: none;
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
.veil.is-on { opacity: 1; transition-duration: 190ms; transition-timing-function: var(--ease); }
/* sections focused after a jump carry focus for keyboard users; no ring around a whole section */
section[tabindex="-1"]:focus { outline: none; }

/* ---------- type ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font: 600 0.75rem/1.2 var(--sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.25rem;
}
.num { color: var(--text-2); font-variant-numeric: tabular-nums; }
.display, .h2 {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
  color: var(--text);
}
.display { font-size: clamp(3rem, 6.2vw, 5.75rem); line-height: 1.04; letter-spacing: -0.032em; }
.h2 { font-size: clamp(2.25rem, 3.9vw, 3.5rem); line-height: 1.07; letter-spacing: -0.026em; margin-bottom: 1.25rem; }
/* The second phrase drops back in grey: emphasis by value, not by colour. */
.display em, .h2 em { font-style: normal; color: var(--text-3); }
.lede { max-width: 34ch; color: var(--text-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.42; letter-spacing: -0.012em; }
.mono { font-variant-numeric: tabular-nums; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; }
.muted { color: var(--text-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.375rem;
  border: 1px solid transparent; border-radius: 980px;
  font: 500 0.9375rem/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; background: none;
  transition: background-color var(--dur-state) var(--ease-weight), color var(--dur-state) var(--ease-weight), border-color var(--dur-state) var(--ease-weight), transform var(--dur-state) var(--ease-weight);
}
.btn:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.btn--solid { background: var(--text); color: var(--bg); }
.btn--solid:hover { background: #fff; }
.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

.icon-btn {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 0; background: none; cursor: pointer; color: var(--text-2);
  transition: color var(--dur-hover), background-color var(--dur-hover);
}
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.icon-btn[aria-pressed="true"] { color: var(--text); background: rgba(255, 255, 255, 0.12); }
/* One-time cue on the sound button (ui.js initSound): a soft ping and two words. */
#sound { position: relative; }
#sound::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
}
#sound.is-hinting::after { animation: sound-ping 1.5s var(--ease-out) 3; }
@keyframes sound-ping {
  0% { opacity: 0.8; box-shadow: 0 0 0 0 rgba(245, 245, 247, 0.5); }
  100% { opacity: 0; box-shadow: 0 0 0 0.75rem rgba(245, 245, 247, 0); }
}
.sound__hint {
  position: absolute; right: calc(100% + 0.4rem); top: 50%; translate: 0.35rem -50%;
  white-space: nowrap; font: 500 0.75rem/1 var(--sans); letter-spacing: -0.005em; color: var(--text);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fade) var(--ease-out), translate var(--dur-fade) var(--ease-out);
}
#sound.is-hinting .sound__hint { opacity: 1; translate: 0 -50%; }
.icon-btn .wave { display: none; }
.icon-btn[aria-pressed="true"] .wave { display: block; }
.icon-btn[aria-pressed="true"] .mute { display: none; }

/* ---------- canvas + labels ---------- */
/* Pinned through the theatre (hero + chapters) and released with it, so the stage scrolls
   away with the last chapter. Sized to the large viewport, so a phone's address bar sliding
   away never resizes it; the negative margin keeps it out of the layout. */
#scene {
  position: sticky; top: 0; width: 100%; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-scene) var(--ease-out);
}
.is-ready #scene { opacity: 1; }
/* Optical vignette over the 3D layer — done in CSS so it costs nothing on the GPU. */
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 85% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.36) 100%);
  opacity: 0; transition: opacity var(--dur-scene) var(--ease-out);
}
.is-ready .vignette { opacity: 1; }
.no-webgl .vignette { display: none; }
.no-webgl #scene { display: none; }

.labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
/* Technical reveal, driven by the disassembly (scene.js sets --p, 0 → 1, per label): the dot
   appears, the leader line draws, then the name follows — crystal first, case back last —
   and it all runs backwards as the watch closes. */
.label { opacity: min(1, calc(var(--p, 0) * 3)); }
.label {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center;
  will-change: transform;
}
.label__dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--text); flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
.label__line {
  width: clamp(1.5rem, 4vw, 3.5rem); height: 1px; background: var(--line-strong); margin: 0 0.65rem; flex: none;
  transform: scaleX(clamp(0, calc(var(--p, 0) * 2 - 0.25), 1)); transform-origin: left;
}
.label__text {
  display: grid; gap: 0.2rem; white-space: nowrap; transform: translateY(-1px);
  opacity: clamp(0, calc(var(--p, 0) * 2.5 - 1.5), 1); translate: calc((1 - var(--p, 0)) * -0.5rem) 0;
}
.label b { font: 600 0.8125rem/1 var(--sans); letter-spacing: -0.01em; }
.label small { font: 400 0.75rem/1.2 var(--sans); color: var(--text-3); }
.label small:empty { display: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0 var(--gutter);
  transition: background-color var(--dur-state) var(--ease), border-color var(--dur-state), opacity var(--dur-reveal) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-color: var(--line);
}
/* Wordmark: widely spaced capitals, the way watch houses set their names. */
.nav__brand {
  font: 600 0.75rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.nav__brand em { font-style: normal; }
.nav__links { display: flex; gap: clamp(1.25rem, 2.6vw, 2.5rem); list-style: none; }
.nav__links a {
  display: inline-flex; align-items: baseline; padding: 0.5rem 0;
  font: 400 0.8125rem/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; color: var(--text-2);
  position: relative; transition: color var(--dur-hover);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-state) var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--text); }
.nav__links a[aria-current]::after { transform: scaleX(var(--p, 1)); transition: none; }
.nav__actions { display: flex; align-items: center; gap: 0.75rem; }
.nav__cta { min-height: 1.875rem; padding: 0 0.875rem; font-size: 0.75rem; }
.nav__menu {
  display: none; min-height: 2.25rem; padding: 0 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 980px; background: none; cursor: pointer;
  font: 500 0.8125rem/1 var(--sans);
}

/* ---------- hero ---------- */
/* The stage is lit before the watch arrives: a soft pool where it will stand, so the
   first second reads as intentional rather than empty. It hands over to the 3D light. */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 70%; top: 50%; width: min(64vw, 56rem); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025) 55%, transparent);
  transition: opacity var(--dur-scene) var(--ease-out);
}
.is-ready .hero::before, .no-webgl .hero::before { opacity: 0; }
/* Title card: only if the watch takes a moment to arrive (slow network), the maison's name
   holds the black screen, and gives way as the studio lights come up. */
body::before {
  content: "Maison Kaithi"; position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none;
  padding-left: 0.32em; font: 600 0.8125rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-2);
  opacity: 0; transition: opacity var(--dur-fade) var(--ease-out);
}
.is-waiting:not(.is-ready):not(.no-webgl) body::before { opacity: 1; transition-duration: var(--dur-reveal); }
.hero {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
}
.hero__copy { align-self: center; max-width: 38rem; }
/* The headline is two deliberate lines; the second never breaks on wide screens. */
@media (min-width: 760px) { .hero__copy { max-width: 46rem; } .display em { white-space: nowrap; } }
.hero__copy .lede { margin-top: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.text-link {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem;
  font: 400 1.0625rem/1 var(--sans); letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
}
.text-link::after {
  content: ""; width: 0.45rem; height: 0.45rem; margin-left: 0.1rem;
  border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
  transition: transform var(--dur-state) var(--ease-out);
}
.text-link:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.text-link:hover::after { transform: translateX(3px) rotate(45deg); }

/* Specification sheet: quiet sentence-case labels, set values, hairline rules */
.spec-sheet {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.spec-sheet div { padding: 1.25rem 1.5rem 0 0; display: grid; gap: 0.35rem; }
.spec-sheet div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.spec-sheet dt, .readout dt { font: 400 0.8125rem/1.2 var(--sans); color: var(--text-3); letter-spacing: -0.005em; }
.spec-sheet dd { font: 600 1.0625rem/1.25 var(--sans); color: var(--text); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }

/* The hero's copy and the navigation arrive with the 3D opening (ui.js sets --open-delay
   from the moment the watch's first frame is drawn; without WebGL they arrive at once). */
/* If a script fails, nothing stays hidden: the copy and navigation appear on their own after 6 s. */
.js .intro { opacity: 0; transform: translateY(1rem); animation: shown 1ms 6s forwards; }
.has-opened .intro, .no-webgl .intro {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--open-delay, 0ms) + var(--i) * var(--stagger) * 1.5);
}
.js .nav { opacity: 0; animation: shown 1ms 6s forwards; }
@keyframes shown { to { opacity: 1; transform: none; } }
.has-opened .nav, .no-webgl .nav { opacity: 1; transition-delay: 0s, 0s, calc(var(--open-delay, 0ms) + var(--stagger) * 7); }

/* ---------- chapters (sticky stages over the 3D canvas) ---------- */
.chapter { position: relative; z-index: 2; }
.chapter--calibre { height: 320vh; }
.chapter--movement { height: 300vh; }
.chapter--materials { height: 230vh; }
.chapter--time { height: 190vh; }
/* The interlude's words stay clear of the fade that leads into the specification sheet
   (that fade is for the 3D stage, not the text over it). */
.chapter--time { z-index: 4; }

.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 1rem) var(--gutter) 2rem;
}
.stage--end { justify-content: flex-end; }
.stage--bottom { align-items: flex-end; justify-content: center; }
.panel { width: min(100%, 27rem); }
.panel > p:not(.eyebrow) { color: var(--text-2); max-width: 38ch; }
.panel--center { text-align: center; width: min(100%, 40rem); }
.panel--center .eyebrow { justify-content: center; }
.panel--center > p:not(.eyebrow) { margin-inline: auto; }

/* Editorial reveal (ui.js): the block fades in; headline lines rise from behind a mask. */
.js [data-reveal] { opacity: 0; transition: opacity var(--dur-fade) var(--ease-out); }
.js [data-reveal].is-in, .js [data-reveal]:focus-within { opacity: 1; }
/* scroll-driven captions (ui.js) step aside for keyboard focus: what has focus is visible */
[data-scrub]:focus-within > *, [data-scrub]:focus-within .ln__i { opacity: 1 !important; transform: none !important; }
.ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ln__i { display: block; }



.readout { margin: 1.75rem 0; border-top: 1px solid var(--line); }
.readout div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
}
.readout dd { font: 500 0.9375rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.readout output { color: var(--text); }

/* Segmented control: a single pill track with a filled selection */
.segmented { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.segmented legend { float: left; font: 400 0.8125rem/2.25rem var(--sans); color: var(--text-3); }
.segmented .track { display: inline-flex; padding: 3px; border-radius: 980px; background: var(--surface-3); }
.segmented label { position: relative; }
.segmented input, .swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0 1rem; border-radius: 980px;
  font: 500 0.8125rem/1 var(--sans); color: var(--text-2);
  transition: color var(--dur-hover), background-color var(--dur-hover) var(--ease);
}
.segmented input:checked + span { background: var(--text); color: var(--bg); }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* scroll-driven progress (tells the reader the scroll is doing the work) */
.scrub { display: flex; align-items: center; gap: 0.9rem; margin: -0.25rem 0 1.5rem; }
.scrub__label, .scrub__value { font: 400 0.8125rem/1 var(--sans); color: var(--text-3); }
.scrub__value { min-width: 3ch; text-align: right; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.scrub__bar { flex: 1; max-width: 9rem; height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.scrub__bar i { position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* The view control belongs to the configurator's settled stage: it fades in once the stage is
   docked (ui.js initDock) and out as the chapter leaves, so it never slides across the watch.
   Keyboard focus anywhere in the chapter always shows it. */
.turn { transition: opacity var(--dur-fade) var(--ease-out); }
.chapter--materials:not(.is-docked):not(:focus-within) .turn { opacity: 0; }
.chapter--materials:not(.is-docked):not(:focus-within) .turn__pill { pointer-events: none; }

/* drag-to-turn surface over the watch in the configurator */
.inspect {
  position: absolute; top: var(--nav-h); bottom: 0; left: 0; right: min(32rem, 46%);
  cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.inspect.is-dragging { cursor: grabbing; }
/* The viewing instrument under the watch: ‹ turn · Full Dial Profile Back · turn ›.
   The arrows are the non-drag way to turn it; the views are close studies (scene.js). */
.turn {
  position: absolute; left: 0; right: min(32rem, 46%); bottom: 2.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; pointer-events: none;
}
.turn__hint {
  margin: 0; font: 500 0.75rem/1 var(--sans); color: var(--text-3); letter-spacing: 0.01em;
  transition: opacity var(--dur-fade) var(--ease-out);
}
.inspect.was-used + .turn .turn__hint, .turn:has(.view[aria-pressed="true"]:not([data-view=""])) .turn__hint { opacity: 0; }
.views { position: relative; display: flex; align-items: center; }
/* the selection is a single pill that slides between options, like a physical slider */
.views__thumb {
  position: absolute; left: 0; top: 50%; height: 2.125rem; width: var(--w, 0);
  border-radius: 980px; background: var(--text);
  transform: translate(var(--x, 0), -50%);
  transition: transform var(--dur-state) var(--ease-weight), width var(--dur-state) var(--ease-weight);
}
.view {
  position: relative; height: 2.75rem; padding: 0 0.8rem; border: 0; background: none; cursor: pointer;
  font: 500 0.8125rem/1 var(--sans); color: var(--text-2); border-radius: 980px;
  transition: color var(--dur-state) var(--ease-weight);
}
.view:hover { color: var(--text); }
.view[aria-pressed="true"] { color: var(--bg); }
.view:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.turn__pill {
  display: inline-flex; align-items: center; padding: 0 0.15rem; pointer-events: auto;
  border-radius: 980px; background: rgba(29, 29, 31, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: opacity var(--dur-fade) var(--ease-out), box-shadow var(--dur-hover) var(--ease);
}
.turn__btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer;
  transition: color var(--dur-hover), background-color var(--dur-hover), transform var(--dur-state) var(--ease-weight);
}
.turn__btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.turn__btn:active { transform: scale(0.92); transition-duration: var(--dur-press); }
.turn__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }


/* wind dock: a glass pill under the movement — power-reserve ring, readout, crown thumbwheel */
.wind {
  position: fixed; z-index: 4;
  left: calc((100vw - min(32rem, 46vw)) / 2); bottom: calc(1.75rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.3rem 0.3rem 0.3rem 0.5rem;
  border-radius: 980px; background: rgba(29, 29, 31, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translate(-50%, 0.75rem);
  transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out), visibility 0s linear var(--dur-fade);
}
.wind.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.no-webgl .wind { display: none; }
.wind__ring { display: block; flex: none; }
.wind__ring svg { transform: rotate(-90deg); }
.wind__track, .wind__arc { fill: none; stroke-width: 3; }
.wind__track { stroke: rgba(255, 255, 255, 0.14); }
.wind__arc {
  stroke: var(--text); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 28.6;
  transition: stroke-dashoffset var(--dur-state) var(--ease-out);
}
.wind__read { display: grid; gap: 0.15rem; min-width: 6.5rem; font: 400 0.8125rem/1.1 var(--sans); color: var(--text-3); }
.wind__read small { font-size: 0.6875rem; letter-spacing: 0.02em; }
.wind__read b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* The thumbwheel reads as a fluted crown seen from above: rounded shading, ridges that roll with the hand. */
.wind__wheel {
  position: relative; flex: none; width: 5rem; height: 2.75rem; padding: 0; overflow: hidden;
  border: 0; border-radius: 980px; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  background: linear-gradient(90deg, #0d0d0e 0%, #3a3a3c 50%, #0d0d0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform var(--dur-state) var(--ease-weight);
}
.wind__wheel:active, .wind.is-dragging .wind__wheel { transform: scale(0.97); transition-duration: var(--dur-press); }
.wind__ridges {
  position: absolute; inset: 0.45rem 0;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0 1.5px, rgba(255, 255, 255, 0.28) 1.5px 2.5px, transparent 2.5px 6px);
  background-position: calc(var(--turn, 0) * 60px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.wind__wheel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wind__hint, .wind__note {
  position: absolute; left: 50%; bottom: calc(100% + 0.6rem); transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 2.5rem); margin: 0; text-align: center;
  font: 500 0.8125rem/1.3 var(--sans); color: var(--text-2);
  pointer-events: none; transition: opacity var(--dur-fade) var(--ease-out);
}
.wind.was-used .wind__hint, .wind.has-note .wind__hint { opacity: 0; }
.wind__note { opacity: 0; color: var(--text); }
.wind.has-note .wind__note { opacity: 1; }
.wind.is-full .wind__arc { stroke: #fff; }

/* configurator: editions first (a story, not a part number), then one row per option */
.editions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.edition {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem;
  border: 0; border-radius: 980px; background: rgba(255, 255, 255, 0.06); color: var(--text-2); cursor: pointer;
  font: 500 0.875rem/1 var(--sans); letter-spacing: -0.005em;
  transition: background-color var(--dur-state) var(--ease-weight), color var(--dur-state) var(--ease-weight), box-shadow var(--dur-state) var(--ease-weight), transform var(--dur-state) var(--ease-weight);
}
.edition:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.edition:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.edition[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.edition--own { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); cursor: default; }
.edition--own:hover { background: transparent; color: var(--text-3); }
.edition--own.is-active { box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); }
.config__note {
  min-height: 2.7em; margin: 0.9rem 0 1.1rem;
  font-size: 0.9375rem; line-height: 1.35; color: var(--text-2);
  transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.config__note.is-changing { opacity: 0; transform: translateY(3px); }
.config { display: grid; gap: 0.55rem; margin-bottom: 1.25rem; }
.config fieldset, .engrave { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; }
.config legend, .engrave label { float: left; font: 400 0.8125rem/1.2 var(--sans); color: var(--text-3); }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.swatch {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 4rem; padding: 0.55rem 0.3rem;
  border-radius: 14px; background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.8125rem; line-height: 1.15; text-align: center; color: var(--text-2);
  transition: box-shadow var(--dur-state) var(--ease-weight), background-color var(--dur-state) var(--ease-weight), color var(--dur-state) var(--ease-weight);
  cursor: pointer;
}
.swatch:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.swatch__chip {
  width: 1.375rem; height: 1.375rem; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5), transparent 55%), var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.6);
  transition: transform var(--dur-state) var(--ease-weight);
}
.swatch:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); background: rgba(255, 255, 255, 0.06); }
.swatch:has(input:checked) .swatch__chip { transform: scale(1.08); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.engrave { margin-top: 0.15rem; }
.engrave input {
  width: 100%; height: 2.75rem; padding: 0 0.95rem;
  background: var(--field); border: 1px solid var(--field-line); border-radius: 12px;
  font: 500 0.9375rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.engrave input::placeholder { letter-spacing: 0; text-transform: none; color: var(--text-3); }
.engrave input:focus { outline: none; border-color: var(--text-2); }
.engrave input:focus-visible { box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.45); }
.config__summary { padding: 1.25rem 0; border-top: 1px solid var(--line); margin-bottom: 1.25rem; display: grid; gap: 0.25rem; }
.config__summary .mono { color: var(--text); font-weight: 600; }
.config__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; font-size: 0.875rem; }
.share {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2rem; padding: 0 0.75rem; border: 0; border-radius: 980px;
  background: rgba(255, 255, 255, 0.06); color: var(--text-2); cursor: pointer;
  font: 500 0.8125rem/1 var(--sans); transition: background-color var(--dur-state) var(--ease-weight), color var(--dur-state) var(--ease-weight);
}
.share:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.share.is-done { color: var(--text); }
.inspect:focus-visible { outline: none; }
.inspect:focus-visible + .turn .turn__pill { opacity: 1; box-shadow: 0 0 0 2px var(--focus); }

/* ---------- without WebGL (or JavaScript): stills from the same scene ----------
   The scroll-driven chapters become ordinary sections, each with its photograph. The
   images are lazy, so visitors who get the live watch never download them. */
.still { display: none; }
:is(.no-webgl, html:not(.js)) .still {
  display: block; flex: none; width: min(100%, 34rem); height: auto; aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
}
:is(.no-webgl, html:not(.js)) .hero .still--hero {
  position: absolute; z-index: -1; right: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(44vw, 40rem);
}
:is(.no-webgl, html:not(.js)) .chapter { height: auto; }
:is(.no-webgl, html:not(.js)) .stage {
  position: relative; height: auto; min-height: 0;
  padding-block: clamp(4rem, 9vw, 7rem); justify-content: space-between; gap: clamp(2rem, 5vw, 4rem);
}
:is(.no-webgl, html:not(.js)) .stage--bottom { flex-direction: column; align-items: center; justify-content: center; }
/* No still for the configurator: a photograph couldn't follow the visitor's choices. */
:is(.no-webgl, html:not(.js)) .chapter--materials .stage { justify-content: center; }
:is(.no-webgl, html:not(.js)) :is(.inspect, .turn, .chapcap) { display: none; }
:is(.no-webgl, html:not(.js)) .hero::before { display: none; }
/* Scroll- and 3D-driven controls have nothing to drive; the copy says what the still shows. */
:is(.no-webgl, html:not(.js)) :is(.scrub, #movement .segmented, #movement .readout) { display: none; }

/* Chapter captions and option tabs: stacked layout only (see its block below) */
.chapcap, .config__tabs { display: none; }

/* ---------- specifications (opaque: the 3D stops rendering here) ---------- */
.techspecs {
  position: relative; z-index: 3;
  background: var(--bg);
  padding: clamp(5rem, 11vw, 8rem) var(--gutter);
}
/* The 3D stage fades to black above the specification sheet, rather than ending on a hard edge. */
.techspecs::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: min(36vh, 22rem); pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.techspecs__inner { max-width: 72rem; margin: 0 auto; }
/* Specifications as a presentation, not a form: the visitor's own watch, large, under a
   single light; six figures; the full sheet one tap away. */
.techspecs__head { text-align: center; }
.techspecs__head .eyebrow { justify-content: center; }
.techspecs__head .h2 { margin-bottom: 0; }
.techspecs__figure {
  position: relative; margin: clamp(1.5rem, 4vw, 3rem) auto 0; width: min(100%, 40rem);
  display: grid; gap: 0.5rem; justify-items: center;
}
/* a soft floor of light under the watch */
.techspecs__figure::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 2.5rem; width: 70%; height: 3.5rem; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent); pointer-events: none;
}
.techspecs__figure img {
  width: 100%; height: auto; aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent);
  mask-image: radial-gradient(closest-side, #000 74%, transparent);
  opacity: 0; transform: scale(0.96); transition: opacity var(--dur-scene) var(--ease-out), transform var(--dur-scene) var(--ease-weight);
}
.techspecs__figure.is-ready img { opacity: 1; transform: none; }
.techspecs__figure figcaption {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; margin-top: -1.5rem;
  font-size: 0.8125rem; color: var(--text-3); text-align: center; min-height: 1.2em;
}
.techspecs__ref { font-variant-numeric: tabular-nums; }
.techspecs__ref span { color: var(--text-2); }
.no-webgl .techspecs__figure { display: none; }

/* Six figures, set large: the numbers are the design. */
.figures {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; border-block: 1px solid var(--line);
}
.figures div { display: flex; flex-direction: column-reverse; align-items: center; gap: 0.55rem; padding: clamp(1.5rem, 3vw, 2.25rem) 0.75rem; text-align: center; }
.figures div + div { border-left: 1px solid var(--line); }
.figures dd { font: 600 clamp(2rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: -0.035em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.figures dd small { margin-left: 0.12em; font-size: 0.42em; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.figures dt { font-size: 0.8125rem; color: var(--text-3); }

/* The full sheet, folded away until asked for */
.sheet { margin-top: clamp(2rem, 4vw, 3rem); }
.sheet summary {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: max-content; margin: 0 auto;
  min-height: 2.75rem; padding: 0 1.25rem; border-radius: 980px; box-shadow: inset 0 0 0 1px var(--line-strong);
  list-style: none; cursor: pointer; font: 500 0.875rem/1 var(--sans); color: var(--text);
  transition: background-color var(--dur-hover) var(--ease);
}
.sheet summary::-webkit-details-marker { display: none; }
.sheet summary:hover { background: rgba(255, 255, 255, 0.06); }
.sheet summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sheet summary i { position: relative; width: 0.7rem; height: 0.7rem; }
.sheet summary i::before, .sheet summary i::after {
  content: ""; position: absolute; inset: calc(50% - 0.75px) 0 auto; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform var(--dur-state) var(--ease-weight);
}
.sheet summary i::after { transform: rotate(90deg); }
.sheet[open] summary i::after { transform: rotate(0deg); }
.techspecs__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.sheet[open] .techspecs__grid { animation: pane-in var(--dur-reveal) var(--ease-out) both; }
.techspecs h3 { margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.techspecs dl:not(.figures) { display: grid; gap: 1.1rem; }
.techspecs dl:not(.figures) div { display: grid; gap: 0.25rem; }
.techspecs dl:not(.figures) dt { font-size: 0.8125rem; color: var(--text-3); }
.techspecs dl:not(.figures) dd { font-size: 0.9375rem; line-height: 1.35; color: var(--text); font-weight: 500; letter-spacing: -0.01em; }
.techspecs__note { margin-top: clamp(3rem, 6vw, 4.5rem); font-size: 0.8125rem; color: var(--text-3); text-align: center; }

/* ---------- atelier: one quiet column — the title, then hairline fields ---------- */
.atelier {
  position: relative; z-index: 3;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 11vw, 8.5rem) var(--gutter);
}
.atelier__grid { max-width: 34rem; margin: 0 auto; display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.atelier__intro { text-align: center; }
.atelier__intro .eyebrow { justify-content: center; }
.atelier__intro .h2 { margin-bottom: 0; }
.form { display: grid; gap: 1.9rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem 2rem; }
.field { display: grid; gap: 0.35rem; align-content: start; } /* side-by-side fields keep their lines level when one shows an error */
.field label { font: 400 0.75rem/1.2 var(--sans); color: var(--text-3); }
.field label .muted { color: var(--text-3); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.75rem; padding: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  font-size: 1rem; color: var(--text);
  transition: border-color var(--dur-hover) var(--ease);
}
.field textarea { padding: 0.7rem 0; resize: none; field-sizing: content; max-height: 10rem; }
.field select {
  appearance: none; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2386868b' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 0.1rem center;
}
.field select option { background: var(--surface-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--focus); box-shadow: 0 1px 0 var(--focus); }
.field [aria-invalid] { border-color: var(--error); }
.field__error { font-size: 0.75rem; color: var(--error); }
.field__error:empty { display: none; }
.field__static {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 2.75rem; border-bottom: 1px solid var(--line);
}
.field__static output { font-size: 0.9375rem; font-weight: 500; }
.field__static a { flex: none; font-size: 0.8125rem; color: var(--text-2); text-underline-offset: 0.2em; }
.field__static a:hover { color: var(--text); }
.form .btn { justify-self: center; min-width: 14rem; margin-top: 0.75rem; }
.form__note { font-size: 0.75rem; color: var(--text-3); text-align: center; }
.success { display: grid; gap: 1rem; align-content: start; justify-items: center; text-align: center; }
.success .eyebrow { justify-content: center; }
.success .keepsake { width: 100%; text-align: left; }
.success:focus { outline: none; }
.success__title { font: 600 2rem/1.1 var(--display); letter-spacing: -0.025em; }
.success .btn { justify-self: start; }
.success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }

/* The keepsake: the ending is the part visitors remember, so it is designed as an object. */
.keepsake {
  margin: 0.5rem 0 0; border-radius: 22px; overflow: hidden;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  animation: keepsake-in var(--dur-scene) var(--ease-weight) both;
}
.keepsake__views { display: grid; grid-template-columns: 1fr 1fr; background: #000; }
.keepsake__views img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; animation: keepsake-view var(--dur-scene) var(--ease-weight) both calc(var(--stagger) * 2); }
.keepsake__views img + img { animation-delay: var(--dur-state); }
.keepsake__body { padding: 1.25rem 1.25rem 1rem; }
.keepsake__name { font: 600 1.375rem/1.2 var(--display); letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.keepsake__list div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line); font-size: 0.875rem; }
.keepsake__list dt { color: var(--text-3); }
.keepsake__list dd { color: var(--text); font-weight: 500; }
@keyframes keepsake-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes keepsake-view { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }

/* ---------- footer: a closing line, the way out, and the maison's name under a last light ---------- */
.footer {
  position: relative; z-index: 3;
  background: radial-gradient(56rem 26rem at 50% 0%, rgba(255, 255, 255, 0.045), transparent 70%), var(--bg);
  padding: clamp(5rem, 12vw, 8.5rem) var(--gutter) 2.5rem;
  border-top: 1px solid var(--line);
}
.footer__close { max-width: 46rem; margin: 0 auto clamp(4rem, 10vw, 7rem); text-align: center; }
.footer__close .h2 { margin-bottom: 2rem; }
.footer__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; }
/* The wordmark, spaced like the one in the navigation, lit from above and fading into the page. */
.footer__wordmark {
  margin: 0 0 clamp(2rem, 5vw, 3.5rem); padding-left: 0.2em; /* balances the trailing letter-space */
  text-align: center; white-space: nowrap;
  font: 600 clamp(1.5rem, 6.4vw, 8.25rem)/1.05 var(--display); letter-spacing: 0.2em; text-transform: uppercase;
  background: linear-gradient(to bottom, #f5f5f7 10%, rgba(245, 245, 247, 0.08) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__row {
  display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--text-3);
}
.footer__row p:first-child { max-width: 52ch; }

.noscript { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; z-index: 50; padding: 1rem; border-radius: 12px; background: var(--surface-3); }

/* ---------- responsive ---------- */
/* Shorter desktop screens: the configurator compacts so the whole panel stays in view */
@media (min-width: 760px) and (max-height: 900px) {
  /* The editions say what the heading said; on short screens it steps aside for the watch. */
  .chapter--materials .h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chapter--materials .eyebrow { margin-bottom: 0.9rem; }
  .chapter--materials .swatch { min-height: 3.5rem; gap: 0.3rem; font-size: 0.75rem; }
  .config__note { margin: 0.75rem 0 0.9rem; }
  .config { gap: 0.45rem; margin-bottom: 1rem; }
  .config__summary { padding: 0.8rem 0; margin-bottom: 1rem; }
}

@media (max-width: 1080px) {
  .nav__cta { display: none; }
}

/* ---------- stacked layout: phones, and tablets held upright ----------
   The watch takes the top of the screen; titles pin under the navigation while it moves,
   and the controls sit beneath it as a short sheet. The same query lives in js/layout.js. */
@media (max-width: 759px), (max-width: 1199px) and (max-aspect-ratio: 4/5) {
  .hero::before { left: 50%; top: 30svh; width: 92vw; }
  /* Less dead scroll: the animations play over a shorter distance. */
  .chapter--calibre { height: 250vh; }
  .chapter--movement { height: 235vh; }
  .chapter--time { height: 160vh; }

  /* Hero: the watch in the upper half, the headline and actions beneath it. */
  .hero { grid-template-rows: 1fr auto; padding-top: calc(var(--nav-h) + 1rem); padding-bottom: 1.5rem; min-height: auto; }
  .hero__copy { align-self: end; padding-top: 52svh; }
  .hero__copy .lede { margin-top: 1rem; }
  .hero__actions { margin-top: 1.75rem; gap: 0.25rem 1.5rem; }

  /* The watch gets the screen to itself while it animates. The pinned caption is the
     chapter's title, so the panel's own heading steps aside (assistive tech still reads it);
     what is left of the panel — the movement's instruments — scrolls up at the end. */
  .chapter:not(.chapter--materials) { display: flex; flex-direction: column; justify-content: flex-end; }
  .chapter:not(.chapter--materials) .stage { position: relative; height: auto; padding-top: 6rem; }
  .stage, .stage--end { align-items: flex-end; justify-content: stretch; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  .panel { width: 100%; position: relative; }
  .panel::before {
    content: ""; position: absolute; z-index: -1;
    inset: -4rem calc(var(--gutter) * -1) calc(-1.25rem - env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.88) 4rem, var(--bg));
  }
  :is(.chapter--calibre, .chapter--movement) .panel > :is(.eyebrow, .h2) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .chapter--calibre .stage { padding: 0; }
  .chapter--calibre .panel::before { display: none; }
  .chapter--movement .readout { margin-top: 0; }
  .h2 { margin-bottom: 1rem; }
  .eyebrow { margin-bottom: 0.9rem; }
  .scrub { display: none; }
  .readout { margin: 1rem 0; }
  .readout div { padding: 0.7rem 0; }

  .chapcap {
    display: grid; gap: 0.45rem; position: fixed; z-index: 4;
    top: calc(var(--nav-h) + 1.1rem); left: var(--gutter); right: var(--gutter);
    pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-0.5rem);
    transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out), visibility 0s linear var(--dur-fade);
  }
  .chapcap.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .chapcap__eyebrow { display: flex; gap: 0.6rem; margin: 0; font: 600 0.6875rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
  .chapcap__title { margin: 0; font: 600 1.5rem/1.15 var(--display); letter-spacing: -0.022em; color: var(--text); text-wrap: balance; }
  .chapcap__title em { font-style: normal; color: var(--text-3); }
  .chapcap .scrub { display: flex; margin: 0.35rem 0 0; }
  .chapcap .scrub__bar { max-width: 7rem; }

  /* Configurator: a short sheet under the watch — editions, one line of craft, then one
     option row at a time behind tabs, the reference and the request. */
  .chapter--materials .h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chapter--materials .panel::before { inset-block-start: -2.5rem; }
  .chapter--materials .config__note {
    min-height: 2.7em; margin: 0.6rem 0 0.85rem; font-size: 0.8125rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .chapter--materials .edition { min-height: 2.125rem; padding: 0 0.95rem; font-size: 0.8125rem; }
  .config__tabs {
    position: relative; display: flex; padding: 3px; margin-bottom: 0.7rem;
    border-radius: 980px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line);
  }
  .config__tabs button {
    position: relative; flex: 1; height: 2.125rem; padding: 0; border: 0; border-radius: 980px; background: none; cursor: pointer;
    font: 500 0.8125rem/1 var(--sans); letter-spacing: -0.005em; color: var(--text-2);
    transition: color var(--dur-state) var(--ease-weight);
  }
  .config__tabs button[aria-pressed="true"] { color: var(--bg); }
  .config__tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .config__thumb {
    position: absolute; left: 0; top: 3px; bottom: 3px; width: var(--w, 0);
    border-radius: 980px; background: var(--text); transform: translateX(var(--x, 0));
    transition: transform var(--dur-state) var(--ease-weight), width var(--dur-state) var(--ease-weight);
  }
  .chapter--materials .config { display: grid; align-content: center; min-height: 4.5rem; margin-bottom: 0.4rem; }
  .config > [data-for] { display: none; }
  .config:is([data-pane="case"]) > [data-for="case"],
  .config:is([data-pane="dial"]) > [data-for="dial"],
  .config:is([data-pane="strap"]) > [data-for="strap"],
  .config:is([data-pane="engrave"]) > [data-for="engrave"] { display: block; animation: pane-in var(--dur-state) var(--ease-out) both; }
  .config legend, .engrave label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chapter--materials .swatch { min-height: 4.5rem; padding: 0.55rem 0.3rem; gap: 0.4rem; font-size: 0.75rem; border-radius: 14px; }
  .chapter--materials .swatch__chip { width: 1.5rem; height: 1.5rem; }
  .chapter--materials .engrave { margin: 0; }
  .chapter--materials .engrave input { height: 3.25rem; border-radius: 14px; font-size: 0.9375rem; }
  .chapter--materials .config__summary { padding: 0.55rem 0; margin-bottom: 0.65rem; gap: 0.3rem; }
  .chapter--materials .config__summary .mono { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chapter--materials .config__meta { font-size: 0.75rem; }
  .chapter--materials .btn { width: 100%; min-height: 3rem; }
  .wind { left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .inspect { right: 0; bottom: auto; height: 46svh; }
  .turn { right: 0; bottom: auto; top: calc(var(--nav-h) + 0.5rem); }
  .turn__hint { order: 1; }

  :is(.no-webgl, html:not(.js)) .hero .still--hero { top: calc(var(--nav-h) + 0.5rem); right: 50%; transform: translateX(50%); width: min(84vw, 30rem); }
  :is(.no-webgl, html:not(.js)) .stage { flex-direction: column; align-items: stretch; padding-block: 3rem; gap: 1.5rem; }
  :is(.no-webgl, html:not(.js)) .still { order: -1; align-self: center; width: min(88vw, 30rem); }
  :is(.no-webgl, html:not(.js)) :is(.chapter--calibre, .chapter--movement) .panel > :is(.eyebrow, .h2) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  :is(.no-webgl, html:not(.js)) .chapter--calibre .stage { padding: 3rem var(--gutter); }
  :is(.no-webgl, html:not(.js)) .panel::before { display: none; }

  .atelier__grid { grid-template-columns: 1fr; }
}
@keyframes pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- phones ---------- */
@media (max-width: 759px) {
  :root { --nav-h: 3rem; }
  /* Glass blur over a live 3D canvas is re-computed every frame — costly on phones. The
     same look, as plain translucent fills. */
  .nav.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.86); }
  .turn__pill, .wind { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(29, 29, 31, 0.92); }

  /* Menu: two hairlines that become a cross; the sections arrive one after another. */
  .nav__menu {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; min-height: 0; margin-right: -0.7rem; padding: 0;
    border: 0; border-radius: 50%; color: var(--text);
  }
  .nav__menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav__burger { position: relative; width: 1.125rem; height: 0.5rem; }
  .nav__burger::before, .nav__burger::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
    transition: transform var(--dur-state) var(--ease-weight), top var(--dur-state) var(--ease-weight);
  }
  .nav__burger::before { top: 0; }
  .nav__burger::after { top: calc(100% - 1.5px); }
  .nav.is-open .nav__burger::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
  .nav.is-open .nav__burger::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }
  .nav__nav {
    position: fixed; inset: 0; z-index: -1;
    background: var(--bg);
    display: grid; align-content: start; padding: calc(var(--nav-h) + 2.5rem) var(--gutter) var(--gutter);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-state) var(--ease-out), visibility var(--dur-state);
  }
  .nav__nav::after {
    content: "Calibre K-01 · Self-winding"; position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
    font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  }
  .nav.is-open .nav__nav { opacity: 1; visibility: visible; }
  .nav__links li { opacity: 0; translate: 0 0.75rem; transition: opacity var(--dur-hover) var(--ease), translate var(--dur-hover) var(--ease); }
  .nav.is-open .nav__links li { opacity: 1; translate: 0 0; transition: opacity var(--dur-fade) var(--ease-out), translate var(--dur-reveal) var(--ease-out); }
  .nav.is-open .nav__links li:nth-child(2) { transition-delay: var(--stagger); }
  .nav.is-open .nav__links li:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
  .nav.is-open .nav__links li:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
  .nav.is-open .nav__links li:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
  .nav.is-open { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__links { flex-direction: column; gap: 0; counter-reset: menu; }
  .nav__links li { counter-increment: menu; border-bottom: 1px solid var(--line); }
  .nav__links a { display: flex; align-items: baseline; gap: 1rem; font: 600 1.875rem/1.1 var(--display); letter-spacing: -0.025em; color: var(--text); padding: 1rem 0; }
  .nav__links a::before { content: counter(menu, decimal-leading-zero); min-width: 1.5rem; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.04em; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .nav__links a::after { display: none; }
  body.menu-open { overflow: hidden; }

  .display { font-size: clamp(2.6rem, 11vw, 3.25rem); }
  /* The watch says what the paragraph said; on a phone the headline stands alone. */
  .hero__copy .lede { display: none; }
  .hero__actions .btn { flex: 1 1 100%; min-height: 3rem; }
  .hero__actions .text-link { margin-inline: auto; }
  .spec-sheet { grid-template-columns: 1fr 1fr; margin-top: 2rem; }
  .spec-sheet div, .spec-sheet div + div { padding: 0.9rem 0; border-left: 0; }
  .spec-sheet div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
  .spec-sheet div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .spec-sheet dd { font-size: 0.9375rem; }

  .chapter--materials .eyebrow { display: none; }
  .chapter--materials .config__meta > .muted:nth-child(2) { display: none; } /* price line; repeated in specs */
  .label--minor { display: none; }
  .label__line { width: 0.75rem; margin: 0 0.4rem; }
  .label small { display: none; }
  .label b { font-size: 0.75rem; }
  .keepsake__list div { grid-template-columns: 7rem 1fr; }

  .footer__actions .btn { width: 100%; min-height: 3rem; }
  .footer__row { flex-direction: column; }
  .techspecs__figure { width: min(100%, 26rem); }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figures div:nth-child(4) { border-left: 0; }
  .figures div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .figures dd { font-size: 1.75rem; }
  .techspecs__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .form .btn { width: 100%; min-height: 3rem; }
  .form__row { grid-template-columns: 1fr; }
}

/* Short phones: the configurator sheet tightens so the watch keeps its share. */
@media (max-width: 759px) and (max-height: 760px) {
  .chapter--materials .config__note { min-height: 0; margin: 0.45rem 0 0.6rem; -webkit-line-clamp: 1; }
  .chapter--materials .swatch { flex-direction: row; min-height: 3rem; gap: 0.35rem; padding: 0.3rem 0.4rem; }
  .chapter--materials .swatch__chip { width: 1.1rem; height: 1.1rem; }
  .chapter--materials .config { min-height: 3rem; }
  .chapter--materials .engrave input { height: 3rem; }
  .chapter--materials .config__summary { padding: 0.4rem 0; margin-bottom: 0.5rem; }
  .chapter--materials .btn { min-height: 2.75rem; }
}
@media (max-width: 759px) and (max-height: 700px) {
  .chapter--materials .config__note { display: none; }
}

/* ---------- upright tablets: the stacked layout at a larger scale ---------- */
@media (min-width: 760px) and (max-width: 1199px) and (max-aspect-ratio: 4/5) {
  .display { font-size: clamp(4rem, 9vw, 5.5rem); }
  .hero__copy { max-width: 40rem; padding-top: 54svh; }
  .hero__copy .lede { max-width: 38ch; font-size: 1.25rem; }
  .spec-sheet { margin-top: 3rem; }

  .chapcap { top: calc(var(--nav-h) + 2rem); }
  .chapcap__eyebrow { font-size: 0.75rem; }
  .chapcap__title { font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.07; letter-spacing: -0.026em; }
  .chapcap .scrub { margin-top: 0.6rem; }
  .chapcap .scrub__bar { max-width: 10rem; }

  .stage, .stage--end { justify-content: center; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  .panel { width: min(100%, 36rem); }
  .panel--center { width: min(100%, 40rem); }
  .chapter--materials .panel { width: min(100%, 38rem); }
  .chapter--materials .panel::before { inset-inline: calc((100vw - 100%) / -2); }
  .panel::before { inset-inline: calc((100vw - 100%) / -2); }
  .chapter--materials .config__note { font-size: 0.9375rem; -webkit-line-clamp: 2; }
  .chapter--materials .edition { min-height: 2.375rem; padding: 0 1.1rem; font-size: 0.875rem; }
  .config__tabs button { height: 2.5rem; font-size: 0.875rem; }
  .chapter--materials .swatch { min-height: 5rem; font-size: 0.8125rem; }
  .chapter--materials .swatch__chip { width: 1.75rem; height: 1.75rem; }
  .chapter--materials .config { min-height: 5rem; }
  .chapter--materials .config__summary .mono { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: 0.9375rem; }
  .chapter--materials .btn { min-height: 3.25rem; font-size: 1rem; }
  .inspect { height: 52svh; }
  .turn { top: calc(var(--nav-h) + 1rem); }

  .atelier__grid { gap: 3rem; }
  .techspecs__figure { width: min(80vw, 34rem); }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figures div:nth-child(4) { border-left: 0; }
  .figures div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .techspecs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- desktop (everything that isn't the stacked layout) ----------
   Anatomy and Movement: the text is a caption in a corner, not a column — the watch and its
   animation have the stage. Anatomy sits top left; Movement, smaller still, top right. */
@media (min-width: 1200px), (min-width: 760px) and (min-aspect-ratio: 801/1000) {
  :is(.chapter--calibre, .chapter--movement) .stage { align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 3.75rem)); }
  :is(.chapter--calibre, .chapter--movement) .panel { width: auto; max-width: 24rem; }
  :is(.chapter--calibre, .chapter--movement) .eyebrow { margin-bottom: 0.85rem; font-size: 0.6875rem; }
  .chapter--calibre .h2 { font-size: clamp(1.75rem, 2.2vw, 2.25rem); line-height: 1.1; letter-spacing: -0.024em; margin-bottom: 1rem; }
  .chapter--calibre .scrub { margin: 0; }
  .chapter--calibre .scrub__bar { max-width: 5.5rem; }

  .chapter--movement .panel { position: relative; text-align: right; max-width: 20rem; }
  .chapter--movement .eyebrow { justify-content: flex-end; }
  .chapter--movement .h2 { font-size: clamp(1.5rem, 1.8vw, 1.875rem); line-height: 1.12; letter-spacing: -0.022em; margin-bottom: 0.9rem; }
  .chapter--movement .readout { margin: 0 0 0.75rem; border: 0; }
  .chapter--movement .readout div { justify-content: flex-end; gap: 0.75rem; padding: 0; border: 0; }
  .chapter--movement .segmented { justify-content: flex-end; gap: 0.6rem; }
  .chapter--movement .segmented legend { line-height: 2rem; font-size: 0.75rem; }
  .chapter--movement .segmented span { min-height: 1.75rem; padding: 0 0.8rem; font-size: 0.75rem; }
  /* Configure: a quiet column. Each option is a row that names its choice, with colour dots
     beneath; the engraving is a hairline field; the summary steps back to a reference. */
  .chapter--materials .panel { width: min(100%, 22rem); }
  /* the viewing instrument and drag surface centre on the watch, in the space left of the panel */
  .chapter--materials .inspect, .chapter--materials .turn { right: calc(var(--gutter) + 22rem); }
  .chapter--materials .h2 { font-size: clamp(1.75rem, 2.2vw, 2.25rem); line-height: 1.1; letter-spacing: -0.024em; margin-bottom: 1.25rem; }
  .chapter--materials .eyebrow { font-size: 0.6875rem; margin-bottom: 0.85rem; }
  .chapter--materials .editions { gap: 0.35rem; }
  .chapter--materials .edition { min-height: 1.875rem; padding: 0 0.85rem; font-size: 0.8125rem; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  .chapter--materials .edition:hover { background: rgba(255, 255, 255, 0.06); }
  .chapter--materials .edition[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
  .chapter--materials .edition--own { display: none; }
  .chapter--materials .config__note { min-height: 2.7em; margin: 0.85rem 0 1.5rem; font-size: 0.8125rem; color: var(--text-3); }
  .chapter--materials .config { gap: 1.35rem; margin-bottom: 1.5rem; }
  .chapter--materials .config fieldset, .chapter--materials .engrave { display: block; }
  .chapter--materials .config legend, .chapter--materials .engrave label {
    float: none; display: flex; gap: 0.5rem; padding: 0; margin-bottom: 0.7rem; font-size: 0.75rem; color: var(--text-3);
  }
  .config__value { color: var(--text); transition: color var(--dur-hover) var(--ease); }
  .config__value.is-preview { color: var(--text-2); }
  .chapter--materials .swatches { display: flex; gap: 0.75rem; }
  .chapter--materials .swatch {
    width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border-radius: 50%;
    background: none; box-shadow: none; font-size: 0;
  }
  .chapter--materials .swatch > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chapter--materials .swatch__chip { width: 100%; height: 100%; }
  .chapter--materials .swatch:hover { background: none; }
  .chapter--materials .swatch:hover .swatch__chip { transform: scale(1.08); }
  .chapter--materials .swatch:has(input:checked) { background: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--text); }
  .chapter--materials .swatch:has(input:checked) .swatch__chip { transform: none; }
  .chapter--materials .engrave input {
    height: 2.25rem; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
    font-size: 0.875rem;
  }
  .chapter--materials .engrave input:focus { border-color: var(--text); }
  .chapter--materials .engrave input:focus-visible { box-shadow: none; outline: none; border-color: var(--focus); }
  .chapter--materials .config__summary { padding: 0; border: 0; margin-bottom: 1.25rem; }
  .chapter--materials .config__summary .mono { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chapter--materials .config__meta { font-size: 0.75rem; }
  .chapter--materials .config__meta > .muted:nth-child(2) { display: none; }
  .chapter--materials .share { min-height: 1.75rem; padding: 0 0.65rem; font-size: 0.75rem; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

  /* the close-up is bright polished steel: a soft shade behind the caption keeps it legible */
  .chapter--movement .panel::before {
    content: ""; position: absolute; z-index: -1; inset: -7rem -12rem -7rem -12rem; pointer-events: none;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.45) 55%, transparent);
    opacity: var(--v, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ---------- phones held sideways (short landscape) ----------
   The desktop layout, compacted for ~400 px of height: the five principal labels by name,
   one line per configurator option, and the interlude's words kept clear of the watch. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --nav-h: 2.75rem; }
  .label--minor, .label small { display: none; }
  .label b { font-size: 0.75rem; }
  .label__line { width: 1rem; margin: 0 0.45rem; }
  :is(.chapter--calibre, .chapter--movement) .stage { padding-top: calc(var(--nav-h) + 1rem); }
  :is(.chapter--calibre, .chapter--movement) .eyebrow { margin-bottom: 0.5rem; }
  .chapter--materials .stage { padding-block: calc(var(--nav-h) + 0.5rem) 0.75rem; }
  .chapter--materials :is(.eyebrow, .editions, .config__note) { display: none; }
  .chapter--materials .config { gap: 0.55rem; margin-bottom: 0.7rem; }
  .chapter--materials .config fieldset { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .chapter--materials .config legend { float: left; margin: 0; }
  .chapter--materials .swatches { gap: 0.5rem; }
  .chapter--materials .swatch { width: 1.5rem; height: 1.5rem; }
  .chapter--materials .engrave { display: flex; align-items: center; gap: 1rem; }
  .chapter--materials .engrave label { margin: 0; flex: none; }
  .chapter--materials .engrave input { height: 2rem; }
  .chapter--materials .config__summary { margin-bottom: 0.6rem; }
  .chapter--materials .btn { min-height: 2.25rem; }
  .turn { bottom: 0.75rem; }
  .turn__hint { display: none; }
  .chapter--time .eyebrow { display: none; }
  .chapter--time .h2 { font-size: 1.75rem; margin-bottom: 0.25rem; }
  .chapter--time .stage { padding-bottom: 0.75rem; }
  .wind { bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
}

/* ?perf meter (QA only) */
.perf-hud {
  position: fixed; left: 8px; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 9999;
  padding: 6px 8px; border-radius: 8px; background: rgb(0 0 0 / 0.72); color: #fff;
  font: 500 10.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre;
  pointer-events: none;
}