/* ═══ Eras · base.css ═══════════════════════════════════════════════
   Shared by index.html and privacy.html: tokens, fallback faces, base
   type, grain, focus, and the small components both pages use.
   Palette is lifted from the app (src/theme/eraThemes.ts), so the site
   and the product read as the same object. Page layout lives in site.css. */

/* ─── Metric fallbacks ─────────────────────────────────────────────
   While Google Fonts loads (display=swap), text is set in a local face
   scaled to the web font, so the swap moves nothing. Tuned in Chromium
   against the Google Fonts builds, on the site’s own copy:
     Cormorant Garamond: ascent .924, descent .287, no line gap.
     Karla: ascent .917, descent .252, no line gap.
   Capitals get a face of their own (unicode-range A–Z; the later rule is
   tried first) because Cormorant sets capitals wider, and Karla narrower,
   than their fallbacks do relative to lowercase. The Cormorant capitals
   are matched to the wordmark ("ERAS"), the Karla ones to the tracked
   labels; lowercase is matched to the running copy, punctuation included.
   Karla 500 has its own pair, as it is noticeably wider than 400.
   Ascent and descent are divided by size-adjust, which Chromium applies
   to the overrides as well. Android has neither Georgia nor Arial, so
   those faces fail there and the stacks go on to the Android pair below. */
@font-face { font-family: "Cormorant Fallback"; font-style: normal; font-weight: 300 500;
  src: local("Georgia");
  size-adjust: 87.3%; ascent-override: 105.8%; descent-override: 32.9%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; font-style: normal; font-weight: 300 500;
  src: local("Georgia"); unicode-range: U+0041-005A;
  size-adjust: 92.1%; ascent-override: 100.3%; descent-override: 31.2%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; font-style: italic; font-weight: 300 500;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 78.8%; ascent-override: 117.3%; descent-override: 36.4%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; font-style: italic; font-weight: 300 500;
  src: local("Georgia Italic"), local("Georgia-Italic"); unicode-range: U+0041-005A;
  size-adjust: 83.6%; ascent-override: 110.5%; descent-override: 34.3%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback"; font-style: normal; font-weight: 300 449;
  src: local("Arial"), local("ArialMT");
  size-adjust: 101.8%; ascent-override: 90.1%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback"; font-style: normal; font-weight: 300 449;
  src: local("Arial"), local("ArialMT"); unicode-range: U+0041-005A;
  size-adjust: 85.7%; ascent-override: 107%; descent-override: 29.4%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback"; font-style: normal; font-weight: 450 599;
  src: local("Arial"), local("ArialMT");
  size-adjust: 104.1%; ascent-override: 88.1%; descent-override: 24.2%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback"; font-style: normal; font-weight: 450 599;
  src: local("Arial"), local("ArialMT"); unicode-range: U+0041-005A;
  size-adjust: 87.8%; ascent-override: 104.4%; descent-override: 28.7%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback"; font-style: normal; font-weight: 600 800;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.2%; ascent-override: 92.5%; descent-override: 25.4%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback"; font-style: normal; font-weight: 600 800;
  src: local("Arial Bold"), local("Arial-BoldMT"); unicode-range: U+0041-005A;
  size-adjust: 91.1%; ascent-override: 100.7%; descent-override: 27.7%; line-gap-override: 0%; }

/* Android's own pair: Noto Serif and Roboto, the system serif and sans.
   Most visitors arrive from the Play listing on a phone, and without these
   the swap reflows the hero (the tagline loses a line and the case jumps).
   Same method as above, widths measured against Google Fonts' Noto Serif
   and Roboto (Android's builds): Cormorant capitals matched to the
   wordmark and 300 split from 400 (their capitals differ by 3%), the
   italic matched to the tagline, the Karla 500 capitals to the store
   buttons. Roboto 500 and 700 are only ~0.5% and ~0.9% wider than 400, so
   each Karla face takes the midpoint and still fits phones whose Roboto is
   one variable file (no "Roboto Medium" to find). swap: if Chrome's name
   lookup is not ready yet, text is never held back waiting for it. */
@font-face { font-family: "Cormorant Fallback Noto"; font-style: normal; font-weight: 300; font-display: swap;
  src: local("Noto Serif"), local("NotoSerif-Regular"), local("Noto Serif Regular");
  size-adjust: 81%; ascent-override: 114.1%; descent-override: 35.4%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback Noto"; font-style: normal; font-weight: 300; font-display: swap;
  src: local("Noto Serif"), local("NotoSerif-Regular"), local("Noto Serif Regular"); unicode-range: U+0041-005A;
  size-adjust: 94.3%; ascent-override: 98%; descent-override: 30.4%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback Noto"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: local("Noto Serif"), local("NotoSerif-Regular"), local("Noto Serif Regular");
  size-adjust: 80.4%; ascent-override: 114.9%; descent-override: 35.7%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback Noto"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: local("Noto Serif"), local("NotoSerif-Regular"), local("Noto Serif Regular"); unicode-range: U+0041-005A;
  size-adjust: 96.3%; ascent-override: 95.9%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback Noto"; font-style: italic; font-weight: 300 500; font-display: swap;
  src: local("Noto Serif Italic"), local("NotoSerif-Italic");
  size-adjust: 75.45%; ascent-override: 122.5%; descent-override: 38%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback Noto"; font-style: italic; font-weight: 300 500; font-display: swap;
  src: local("Noto Serif Italic"), local("NotoSerif-Italic"); unicode-range: U+0041-005A;
  size-adjust: 83%; ascent-override: 111.3%; descent-override: 34.6%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback Roboto"; font-style: normal; font-weight: 300 449; font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular");
  size-adjust: 102.7%; ascent-override: 89.3%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback Roboto"; font-style: normal; font-weight: 300 449; font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular"); unicode-range: U+0041-005A;
  size-adjust: 94.3%; ascent-override: 97.2%; descent-override: 26.7%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback Roboto"; font-style: normal; font-weight: 450 599; font-display: swap;
  src: local("Roboto Medium"), local("Roboto-Medium"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 96.5%; ascent-override: 95%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback Roboto"; font-style: normal; font-weight: 450 599; font-display: swap;
  src: local("Roboto Medium"), local("Roboto-Medium"), local("Roboto"), local("Roboto-Regular"); unicode-range: U+0041-005A;
  size-adjust: 94%; ascent-override: 97.6%; descent-override: 26.8%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback Roboto"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 103.5%; ascent-override: 88.6%; descent-override: 24.3%; line-gap-override: 0%; }
@font-face { font-family: "Karla Fallback Roboto"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"), local("Roboto-Regular"); unicode-range: U+0041-005A;
  size-adjust: 98.1%; ascent-override: 93.5%; descent-override: 25.7%; line-gap-override: 0%; }

/* ─── Tokens ───────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --bg:        #121013;
  --bg-deep:   #0A080C;
  --surface:   #1C1920;
  --card:      #16131A;
  --text:      #F1EBDD;
  --muted:     #9b9088;   /* 6.07:1 on --bg */
  --faint:     #948a83;   /* 5.61:1 on --bg (was #6b635d, 3.22) */
  --gold:      #C9A24B;   /* 7.89:1 */
  --gold-lit:  #E0BE5C;
  --hairline:  rgba(241, 235, 221, 0.10);

  --display: "Cormorant Garamond", "Cormorant Fallback", "Cormorant Fallback Noto", Georgia, serif;
  --body: "Karla", "Karla Fallback", "Karla Fallback Roboto", -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1180px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Era tokens. Without JS there is no html[data-era], so the page
     wears the Stone Age (the no-JS sample life is Tala Firekeeper). */
  --era:        #C57A3C;   /* site: graphics, pools, thread */
  --era-ink:    #C57A3C;   /* era text; filled buttons carry #121013 on it */
  --era-accent: #C9603A;
  --era-metal:  #C9883E;
  --atmo0:      #2A1A10;
  --atmo1:      #17120E;   /* theme-color */
  --atmo2:      #0D0A07;
}

/* One rule per age. They match <html> (the rolled life) and any element
   that carries its own data-era (cabinet drawers, the log card). */
[data-era="stone_age"]   { --era: #C57A3C; --era-ink: #C57A3C; --era-accent: #C9603A; --era-metal: #C9883E; --atmo0: #2A1A10; --atmo1: #17120E; --atmo2: #0D0A07; }
[data-era="bronze_age"]  { --era: #C9A227; --era-ink: #C9A227; --era-accent: #2E78AC; --era-metal: #D4AF37; --atmo0: #10283F; --atmo1: #101A26; --atmo2: #080F16; }
[data-era="rome"]        { --era: #9C5C99; --era-ink: #B07AAE; --era-accent: #C9A24B; --era-metal: #E0BE5C; --atmo0: #27152E; --atmo1: #160F18; --atmo2: #0C080C; }
[data-era="medieval"]    { --era: #7C97AE; --era-ink: #7C97AE; --era-accent: #C8923C; --era-metal: #BBC2CB; --atmo0: #151E28; --atmo1: #10151A; --atmo2: #080B0E; }
[data-era="renaissance"] { --era: #2C8073; --era-ink: #3E9A8B; --era-accent: #B0492E; --era-metal: #C9A24B; --atmo0: #24190F; --atmo1: #16110C; --atmo2: #0C0807; }
[data-era="industrial"]  { --era: #B5894B; --era-ink: #B5894B; --era-accent: #7E6552; --era-metal: #B5894B; --atmo0: #1D1813; --atmo1: #14120F; --atmo2: #0A0907; }
[data-era="atomic"]      { --era: #2EA0A0; --era-ink: #2EA0A0; --era-accent: #E0673E; --era-metal: #C8CDD2; --atmo0: #0F2622; --atmo1: #0E1517; --atmo2: #070D0E; }
[data-era="modern"]      { --era: #C07A33; --era-ink: #C07A33; --era-accent: #4E7CA6; --era-metal: #C9A24B; --atmo0: #181A20; --atmo1: #111216; --atmo2: #090A0D; }
[data-era="far_future"]  { --era: #34C3D6; --era-ink: #34C3D6; --era-accent: #7A6CF0; --era-metal: #9FE7F0; --atmo0: #0C1A2E; --atmo1: #0A0F1A; --atmo2: #04060B; }

/* ─── Reset and base type ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Anything carrying the hidden attribute stays hidden, whatever display a
   component rule gives it (Roll, Live on, rail nav, storebar, toggles). */
[hidden]:not([hidden="until-found"]) { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Tap feedback stays on, in the brand's gold rather than system blue. */
  -webkit-tap-highlight-color: rgba(201, 162, 75, 0.22);
  accent-color: var(--gold);
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* fallback */
  overflow-x: clip;     /* clips without making a scroll container, so sticky still works */
}

:where(h1, h2, h3) { font-family: var(--display); font-weight: 300; line-height: 1.12; text-wrap: balance; }
:where(h2) { font-size: clamp(32px, 6.2vw, 60px); }
:where(h2) em { font-style: italic; color: var(--gold-lit); }
:where(h3) { font-weight: 400; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.25; }
:where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
:where(a) {
  color: var(--gold-lit);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(224, 190, 92, 0.45);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .3s ease, color .3s ease;
}
:where(a):hover { text-decoration-color: currentColor; }
:where(button) { font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
:where(button:disabled, [aria-disabled="true"]) { cursor: default; }
:where(img) { max-width: 100%; height: auto; }

::selection { background: var(--gold); color: #12100F; }

:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; }
/* Headings that receive focus from script (tabindex=-1) only ring for keyboards. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ─── Film grain ─────────────────────────────────────────────────────
   One tiled SVG turbulence, fixed so it never scrolls. It sits *under*
   the content now: main and footer are lifted above it, so the grain
   never dims text, focus rings or the canvas. Decorative only. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100lvh;   /* covers the area under collapsing mobile toolbars */
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
main, footer, body > header { position: relative; z-index: 1; }

/* ─── Utilities ──────────────────────────────────────────────────── */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link: the first stop for keyboards, out of sight until focused. */
.skip {
  position: absolute;
  z-index: 1000;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(201, 162, 75, 0.55);
  border-radius: 2px;
  background: var(--surface);
  color: var(--gold-lit);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.9);
  transform: translateY(calc(-100% - 24px));
  transition: transform .25s var(--ease-out);
}
.skip:focus, .skip:focus-visible { transform: none; }

/* ─── Section furniture ──────────────────────────────────────────── */
.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: clamp(22px, 4vw, 34px);
}

.sec-label {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;          /* 4.91:1 on --bg */
  margin-bottom: 20px;
}

/* The gold hairline under the wordmark and above the closing stores. */
.rule {
  width: clamp(90px, 18vw, 168px);
  height: 1px;
  margin: clamp(22px, 4vw, 34px) auto 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ─── Store buttons ──────────────────────────────────────────────────
   Every row is .cta-row; each link is .cta plus .cta--ios or .cta--play.
   Both buttons share one minimum width (sized for "Google Play"), so a
   row reads as a pair side by side from 360px up and stacks at equal
   widths in anything narrower. The visitor's own store comes first. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(34px, 5vw, 46px);
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 11.75em;
  max-width: 100%;
  min-height: 48px;
  padding: 0 1em;
  border: 1px solid rgba(201, 162, 75, 0.34);
  border-radius: 2px;
  background: rgba(201, 162, 75, 0.07);
  color: var(--gold-lit);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .45s ease, border-color .45s ease, transform .45s var(--ease-out);
}
.cta svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
@media (min-width: 600px) {
  .cta { min-width: 13.5em; padding: 0 1.6em; }
}
@media (hover: hover) {
  .cta:hover { background: rgba(201, 162, 75, 0.15); border-color: rgba(201, 162, 75, 0.7); transform: translateY(-2px); }
}
.cta:focus-visible { background: rgba(201, 162, 75, 0.15); border-color: rgba(201, 162, 75, 0.7); transform: translateY(-2px); }
.cta:active { background: rgba(201, 162, 75, 0.22); border-color: rgba(201, 162, 75, 0.8); transform: none; transition-duration: .08s; }

/* Platform order, and a slightly firmer frame on the visitor's own store
   (kept at class weight so hover, focus and active still read over it). */
html.ios .cta--ios, html.android .cta--play { order: -1; }
:where(html.ios) .cta--ios, :where(html.android) .cta--play { border-color: rgba(201, 162, 75, 0.55); background: rgba(201, 162, 75, 0.11); }

/* Compact row: the sticky store bar. Never wraps; 44px targets. */
.cta-row--compact { flex-wrap: nowrap; gap: 8px; margin: 0; }
.cta-row--compact .cta {
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.cta-row--compact .cta svg { width: 13px; height: 13px; }

/* ─── Footer ─────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--hairline);
  padding: 46px var(--gutter) calc(54px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 2;
}
.fmark {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.3em;
  padding-left: 0.3em;    /* balances the trailing tracking so it centres */
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.foot a, .foot .motion-toggle { color: var(--muted); }
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: color .35s ease, text-decoration-color .35s ease;
}
@media (hover: hover) {
  .foot a:hover { color: var(--gold); text-decoration-color: rgba(201, 162, 75, 0.5); }
}
.foot a:focus-visible { color: var(--gold); }
.foot .sep { opacity: 0.4; margin: 0 6px; }
/* A separator in front of a hidden control (the motion toggle without JS) goes too. */
.foot .sep:has(+ [hidden]) { display: none; }

/* ─── Motion toggle ──────────────────────────────────────────────────
   Constant text "Pause motion"; aria-pressed="true" means paused. A tiny
   switch drawn after the text shows the state without changing the name. */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: color .35s ease, text-decoration-color .35s ease;
}
.motion-toggle::after {
  content: "";
  flex: none;
  width: 22px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: 0.75;
  background: radial-gradient(circle at 5px 50%, currentColor 0 2.5px, transparent 3px) 0 0 / 100% 100% no-repeat;
  transition: background-position .3s var(--ease-out), background-color .3s ease;
}
.motion-toggle[aria-pressed="true"] { color: var(--gold); }
.motion-toggle[aria-pressed="true"]::after {
  opacity: 1;
  background-position: 10px 0;
  background-color: rgba(201, 162, 75, 0.16);
}
@media (hover: hover) {
  .motion-toggle:hover { color: var(--gold); text-decoration-color: rgba(201, 162, 75, 0.5); }
}

/* ─── Scroll reveals ─────────────────────────────────────────────────
   Content is visible unless site.js has put html.reveal on (it does so
   only with motion on, after marking what is already on screen as .seen).
   If site.js never runs, nothing is ever hidden. The transition sits on
   .seen only, so hiding is instant and only the entrance animates. Uses
   the individual translate property so it composes with any transform a
   section sets. Stagger with an inline transition-delay if wanted. */
html.reveal .rise:not(.seen) { opacity: 0; translate: 0 20px; }
html.reveal .rise.seen { transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); }

/* ─── Motion off ─────────────────────────────────────────────────────
   html[data-motion] is the effective state (the head script and roll.js
   set it: a stored "Pause motion" choice beats the OS setting). Without
   JS there is no attribute, so the OS setting rules alone. Transitions
   collapse to 0.01ms rather than none so transitionend still fires. */
/* Smooth only once the page has loaded (site.js adds .loaded): a smooth
   load-time #fragment scroll overshoots while the log and reveals settle. */
html.loaded[data-motion="on"] { scroll-behavior: smooth; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion]) { scroll-behavior: smooth; }
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] .rise { opacity: 1 !important; translate: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) *,
  html:not([data-motion="on"]) *::before,
  html:not([data-motion="on"]) *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html:not([data-motion="on"]) .rise { opacity: 1 !important; translate: none !important; }
}

/* ::details-content is kept in its own rules: an unknown pseudo-element
   would void a whole selector list in browsers that lack it. */
@supports selector(::details-content) {
  html[data-motion="off"] ::details-content { transition: none !important; }
  @media (prefers-reduced-motion: reduce) {
    html:not([data-motion="on"]) ::details-content { transition: none !important; }
  }
}

/* ─── Forced colours and print ──────────────────────────────────────── */
@media (forced-colors: active) {
  body::before { display: none; }
  .cta, .skip { border-color: ButtonText; }
  .rule { background: CanvasText; }
  /* The motion switch keeps its knob in system colours: an empty track with
     the knob at the left while motion runs, a filled track with the knob at
     the right when paused. */
  .motion-toggle::after {
    forced-color-adjust: none;
    opacity: 1;
    border-color: ButtonText;
    background: radial-gradient(circle at 5px 50%, ButtonText 0 2.5px, transparent 3px) 0 0 / 100% 100% no-repeat;
  }
  .motion-toggle[aria-pressed="true"]::after {
    border-color: Highlight;
    background: radial-gradient(circle at 5px 50%, HighlightText 0 2.5px, transparent 3px) 10px 0 / 100% 100% no-repeat, Highlight;
  }
}

@media print {
  :root {
    --bg: #fff; --bg-deep: #fff; --surface: #fff; --card: #fff;
    --text: #111; --muted: #444; --faint: #555;
    --gold: #6d5214; --gold-lit: #6d5214; --hairline: #ccc;
  }
  body::before { display: none; }
  .skip, .motion-toggle { display: none; }
}

/* At the narrowest widths the motion toggle takes its own footer line,
   rather than wrapping with its separator leading the line. */
@media (max-width: 359px) {
  .foot-toggle { display: block; }
  .foot-toggle .sep { display: none; }
}