/* ============================================================
   Shared design system — chalkboard / oscilloscope
   Luminous linework on near-black. Imported by every page.
   ============================================================ */

:root {
  /* ── ground & chalk ── */
  --ink:         #0B0B0C;   /* page ground — near-black */
  --ink-raised:  #121316;   /* panels, viz wells */
  --ink-sunk:    #060607;   /* deepest wells */
  --chalk:       #ECEBE5;   /* primary type — off-white */
  --chalk-dim:   #A7A8A3;   /* secondary type */
  --slate:       #74767C;   /* captions, metadata, inactive */
  --line:        #232529;   /* hairline grid, barely-there */
  --line-strong: #34373D;   /* dividers, section rules */

  /* the section in view drives accentful chrome */
  --active-accent: var(--chalk-dim);

  /* type — Fraunces (display, high-contrast soft serif) · Schibsted Grotesk
     (body, sharp editorial sans) · JetBrains Mono (technical labels) */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --measure: 38rem;
  /* easing — one confident decelerate for entrances/reveals, one symmetric
     in-out for state changes; slow and purposeful, never springy */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* faint chalk-dust grid baked into the body paint (scrolls with content,
     no extra compositing layer — far cheaper than a fixed masked overlay) */
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body > * { position: relative; z-index: 1; }

::selection { background: var(--active-accent); color: var(--ink); }

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: -999px; top: 0;
  background: var(--chalk); color: var(--ink);
  padding: 0.6rem 1rem;
  font: 500 0.85rem/1 var(--font-mono);
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--ink-sunk);
  color: var(--chalk);
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(3rem, 9vh, 7rem);
  pointer-events: none;
}
.hero__inner > * { pointer-events: auto; }

.hero__eyebrow {
  font: 500 0.8rem/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.6rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(2.9rem, 9vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  text-shadow: 0 0 40px rgba(0,0,0,0.6);
}
.hero__lede {
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--chalk-dim);
  margin: 0 0 2.4rem;
}
.hero__figure {
  font-family: var(--font-mono);
  color: var(--chalk);
  white-space: nowrap;
}
.hero__scroll {
  font: 500 0.78rem/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
  animation: floatHint 2.6s var(--ease) infinite;
}
@keyframes floatHint {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* ============================================================
   QUIET BACK-LINK  (content pages → landing)
   ============================================================ */
.backlink {
  position: fixed;
  top: 0.85rem;
  left: max(1rem, 2vw);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.72rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  background: rgba(11, 11, 12, 0.62);
  border: 1px solid var(--line);
  border-radius: 2px;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.backlink:hover { color: var(--chalk); border-color: var(--line-strong); }
.backlink__arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.backlink:hover .backlink__arrow { transform: translateX(-3px); }

/* ============================================================
   WAYFINDING RAIL
   ============================================================ */
.rail {
  position: fixed;
  left: max(1.1rem, 2vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.rail.is-visible { opacity: 1; }
/* soft dark backing so the dots/numbers stay legible over the full-bleed
   animation behind them (which, on text-right sections, glows right here) */
.rail::before {
  content: "";
  position: absolute;
  inset: -0.55rem -0.8rem;
  z-index: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(8, 8, 9, 0.74) 0%, rgba(8, 8, 9, 0.5) 62%, rgba(8, 8, 9, 0) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; position: relative; z-index: 1; }
.rail__list a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--slate);
  padding: 0.2rem 0.3rem;
}
.rail__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--ink-sunk);
  flex: none;
  transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
              transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.rail__num {
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--slate);
  text-shadow: 0 1px 3px var(--ink-sunk);
}
.rail__label {
  font: 500 0.74rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px var(--ink-sunk);
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.4s var(--ease), opacity 0.3s var(--ease);
}
.rail__list a:hover .rail__label,
.rail__list a:focus-visible .rail__label {
  max-width: 9rem; opacity: 1;
}
.rail__list a[aria-current="true"] .rail__dot {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
  /* a soft containment ring, not a bloom */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent),
              0 0 8px -3px var(--accent);
}
.rail__list a[aria-current="true"] .rail__num { color: var(--chalk); }
.rail__list a[aria-current="true"] .rail__label { max-width: 9rem; opacity: 1; color: var(--chalk); }

/* ============================================================
   LEVEL DIAL  (signature control)
   ============================================================ */
.dial-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0.95rem 1rem 1rem;
  background: linear-gradient(rgba(9, 9, 10, 0.97), rgba(9, 9, 10, 0.9));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 10px 24px -22px rgba(0, 0, 0, 0.9);
}
.dial {
  width: 100%;
  max-width: 30rem;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}
.dial__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--ink-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  isolation: isolate;
}
.dial__thumb {
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  /* neutral chalk chip — accent colour is reserved for "this problem" (rail dot +
     section figure), so the dial never competes with per-problem wayfinding.
     A crisp drop shadow gives it a physical, premium presence (no bloom). */
  background: linear-gradient(var(--chalk), #dcdbd4);
  border-radius: 5px;
  transition: transform 0.5s var(--ease-out);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
}
:root[data-level="1"] .dial__thumb { transform: translateX(0); }
:root[data-level="2"] .dial__thumb { transform: translateX(100%); }
:root[data-level="3"] .dial__thumb { transform: translateX(200%); }

.dial__opt {
  position: relative;
  z-index: 1;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.62rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  color: var(--slate);
  font-family: var(--font-mono);
  transition: color 0.4s var(--ease-out);
}
.dial__opt:hover { color: var(--chalk-dim); }
.dial__opt:focus-visible { outline-offset: -2px; }
.dial__num { font-size: 0.62rem; letter-spacing: 0.18em; opacity: 0.7; }
.dial__name { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; }
.dial__opt[aria-checked="true"] { color: var(--ink); }
.dial__opt[aria-checked="true"]:hover { color: var(--ink); }
.dial__opt[aria-checked="true"] .dial__num { opacity: 0.8; }

.dial__caption {
  margin: 0;
  min-height: 1.1em;
  font: 400 0.78rem/1.3 var(--font-mono);
  color: var(--slate);
  text-align: center;
}
.dial__caption span { display: none; }
:root[data-level="1"] .dial__caption [data-cap="1"],
:root[data-level="2"] .dial__caption [data-cap="2"],
:root[data-level="3"] .dial__caption [data-cap="3"] { display: inline; }

/* ============================================================
   PROBLEM / TOPIC SECTIONS
   ============================================================ */
.problem {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(4.5rem, 12vh, 9rem) clamp(1.5rem, 5vw, 5rem);
  border-top: 1px solid var(--line-strong);
  scroll-margin-top: 5rem;   /* clear the sticky dial on anchor jumps */
}
.problem:first-of-type { border-top: 0; }

.problem__head { margin-bottom: 2.6rem; }
.problem__index {
  font: 500 0.76rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1rem;
}
.problem__status { color: var(--slate); }
.problem__status--solved {
  color: var(--accent);
  font-weight: 500;
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.problem__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0 0 0.7rem;
  color: var(--chalk);
}
.problem__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--chalk-dim);
  margin: 0 0 1.4rem;
}
.problem__rule {
  display: block;
  width: 64px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.problem__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.problem__text { max-width: var(--measure); color: var(--chalk); line-height: 1.62; }
.problem__text p { margin: 0 0 1.1rem; }
.problem__text p:last-child { margin-bottom: 0; }
.problem__text strong { font-weight: 600; color: #fff; }
.problem__text em { font-style: italic; color: var(--chalk-dim); }

.status {
  margin-top: 1.4rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
  font-size: 0.95rem;
  color: var(--chalk-dim);
}

/* level visibility + entrance — applies to all sections at once */
.level { display: none; }
:root[data-level="1"] .level[data-level="1"],
:root[data-level="2"] .level[data-level="2"],
:root[data-level="3"] .level[data-level="3"] {
  display: block;
  animation: levelIn 0.5s var(--ease-out) both;
}
@keyframes levelIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* viz */
.problem__viz { margin: 0; position: sticky; top: 6.5rem; }
.viz {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 7%, var(--ink-sunk)), var(--ink-sunk));
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: crosshair;
  touch-action: none;
}
.problem__viz figcaption {
  margin-top: 0.7rem;
  font: 400 0.78rem/1.4 var(--font-mono);
  color: var(--slate);
}
.problem__viz figcaption .viz-hint { color: var(--accent); }

/* ============================================================
   AMBIENT COMPOSITION
   Each problem reads as ONE composition of two paired halves:
   a luminous figure (full-bleed canvas) and a text column,
   vertically centred and joined by a feathered scrim so there
   is no hard seam or empty quadrant. The figure's draw fn keeps
   its labelled subject in the half opposite the text.
   ============================================================ */
.problem--ambient {
  position: relative;
  overflow: hidden;
  max-width: none;
  width: 100%;
  margin: 0;
  /* each section owns roughly a screen, so two adjacent problems'
     accents/figures don't share the viewport mid-scroll */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vh, 8rem);
  isolation: isolate;
}
/* the canvas fills the whole section — the figure, not a backdrop */
.problem--ambient .viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: var(--viz-op, 0.6);
  z-index: 0;
  cursor: default;
  touch-action: pan-y;        /* drag can interact; vertical scroll is never trapped */
}
/* the WebGL flagship's 2D label layer — tracks the .viz box on every breakpoint,
   sits just above the (slightly recessed) 3D canvas, and never eats pointer events */
.problem--ambient .fold-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}
/* scrim direction flips for the text-right variant. It darkens the text half
   and FEATHERS to transparent across the middle — connecting the two halves
   rather than walling them off, while holding AAA contrast under the text. */
.problem--ambient { --scrim-angle: 90deg; }
.problem--ambient.problem--text-right { --scrim-angle: 270deg; }

.problem__scrim {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1180px;          /* matches the content box; section margins stay bright */
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--scrim-angle),
      rgba(7, 7, 8, 0.88) 0%,
      rgba(7, 7, 8, 0.84) 34%,
      rgba(7, 7, 8, 0.56) 52%,
      rgba(7, 7, 8, 0) 70%);
}
/* the text column — one half of the composition, vertically centred by the
   section flex; the figure claims the other half */
.problem--ambient .problem__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  pointer-events: none;
}
.problem--ambient .problem__head,
.problem--ambient .problem__text,
.problem--ambient .problem__viznote,
.problem--ambient .problem__controls { pointer-events: auto; max-width: 33rem; }
/* text-right variant: push the column to the right; scrim + figure follow */
.problem--ambient.problem--text-right .problem__head,
.problem--ambient.problem--text-right .problem__text,
.problem--ambient.problem--text-right .problem__viznote,
.problem--ambient.problem--text-right .problem__controls { margin-left: auto; }

.problem__viznote {
  margin: 1.7rem 0 0;
  max-width: 33rem;
  font: 400 0.78rem/1.4 var(--font-mono);
  color: var(--slate);
}
.problem__viznote .viz-hint { color: var(--accent); }
/* level-specific caption: the diagram's label tracks the dial, like the text */
.problem__viznote [data-vn] { display: none; }
:root[data-level="1"] .problem__viznote [data-vn="1"],
:root[data-level="2"] .problem__viznote [data-vn="2"],
:root[data-level="3"] .problem__viznote [data-vn="3"] { display: inline; }

/* ── interactive control (chrome stays monochrome — no accent) ── */
.problem__controls { margin-top: 1.5rem; max-width: 33rem; pointer-events: auto; }
.ctrl { display: grid; gap: 0.6rem; cursor: pointer; }
.ctrl__name { font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--chalk-dim); }
.ctrl__name [data-cn] { display: none; }
:root[data-level="1"] .ctrl__name [data-cn="1"],
:root[data-level="2"] .ctrl__name [data-cn="2"],
:root[data-level="3"] .ctrl__name [data-cn="3"] { display: inline; }
.ctrl__row { display: flex; align-items: center; gap: 1rem; }
.ctrl__val { font: 500 0.82rem/1 var(--font-mono); color: var(--chalk); white-space: nowrap; min-width: 9.5rem; }

.ctrl input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 22px; background: transparent; cursor: pointer; margin: 0;
}
.ctrl input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--chalk-dim), var(--line-strong));
}
.ctrl input[type="range"]::-moz-range-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--chalk-dim), var(--line-strong));
}
.ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -6px; border-radius: 50%;
  background: var(--chalk); border: 0;
  box-shadow: 0 0 0 4px rgba(236, 235, 229, 0.12);
  transition: box-shadow 0.2s var(--ease);
}
.ctrl input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--chalk); border: 0;
  box-shadow: 0 0 0 4px rgba(236, 235, 229, 0.12);
}
.ctrl input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(236, 235, 229, 0.18); }
.ctrl input[type="range"]:focus-visible { outline: none; }
.ctrl input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--chalk); }
.ctrl input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--chalk); }

/* busy motifs (turbulence, the graph explosion): slightly lower opacity + a
   darker scrim half. The calmer-motion-under-text rule (JS) does the rest. */
.problem--busy .viz { opacity: var(--viz-op, 0.42); }
.problem--busy .problem__scrim {
  background:
    linear-gradient(var(--scrim-angle),
      rgba(7, 7, 8, 0.93) 0%,
      rgba(7, 7, 8, 0.9) 38%,
      rgba(7, 7, 8, 0.62) 56%,
      rgba(7, 7, 8, 0) 74%);
}

/* notation */
.katex { font-size: 1.02em; }
.problem__text .katex-display { margin: 1.2rem 0; overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 5vw, 5rem) 5rem;
  border-top: 1px solid var(--line-strong);
}
.site-foot__line {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 400;
  margin: 0 0 1rem;
  color: var(--chalk);
}
.site-foot__note {
  font: 400 0.82rem/1.6 var(--font-mono);
  color: var(--slate);
  max-width: 42rem;
  margin: 0;
}
.site-foot__note a { text-decoration: underline; text-underline-offset: 3px; color: var(--chalk-dim); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Below this width the two-half composition gets cramped (the fixed text column
   would overlap the figure), so we collapse to the stacked model and hide the
   rail. The figure's draw fn switches to its full-width branch at the same width. */
@media (max-width: 1079px) {
  .rail { display: none; }
  .problem__body { grid-template-columns: 1fr; gap: 2.2rem; }
  .problem__viz { position: static; order: -1; }

  /* the two halves stack: the figure becomes a band at the top (mask-faded into
     the page), text flows below on the dark ground — fully legible, no scrim.
     The figure's draw fn uses its mobile branch (full-width, centred in the band)
     so its labels stay attached to features. */
  .problem--ambient {
    display: block;
    min-height: auto;
    padding: 0 0 clamp(3rem, 9vh, 5rem);
  }
  .problem--ambient .viz {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 48vh;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  }
  .problem--ambient .fold-overlay {
    inset: auto;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 48vh;
  }
  .problem--ambient .problem__content {
    padding-top: 50vh;
    max-width: none;
  }
  .problem--ambient .problem__head,
  .problem--ambient .problem__text,
  .problem--ambient .problem__viznote,
  .problem--ambient .problem__controls { max-width: none; margin-left: 0; }
  .problem__scrim { display: none; }
}
/* Below this width the centred dial fills the bar, so the fixed back-link pill
   would collide with it — hide it and fall back to the footer back-link. */
@media (max-width: 767px) {
  .backlink { display: none; }
}
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .dial__name { font-size: 0.76rem; }
  .dial__caption { font-size: 0.72rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__scroll { animation: none; }
  .dial__thumb { transition: transform 0.001ms, background 0.001ms; }
}