/* ==========================================================================
   Celestial Rings - main stylesheet
   --------------------------------------------------------------------------
   The site is an astronomer's folio: a running head, an engraved orrery for
   a frontispiece, then sections set asymmetrically, words on one side and a
   star chart in the margin, between ruled lines. Motion is clockwork: dials
   turn and click, constellations draw themselves, stars twinkle. Only
   transform and opacity ever animate, and nothing moves for visitors who
   prefer reduced motion.

   1. Base   2. Sky   3. Shared parts (folio, head, chart, stores)
   4. Masthead   5. Frontispiece and dial   6. Steps   7. Reel   8. Notes
   9. Sweep   10. Questions   11. Syzygy   12. Folio pages   13. Not found
   14. Colophon   15. Motion   16. Page turns   17. Reduced motion
   ========================================================================== */

/* 1. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-ink); scroll-padding-top: 1.5rem; }
body { margin: 0; min-height: 100vh; background: transparent; color: var(--color-parchment); font: 500 var(--text-base) / 1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-teal-hi); text-decoration-color: rgb(98 205 185 / 0.6); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, summary { text-wrap: balance; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.1; color: var(--color-gold-hi); }
p, li { text-wrap: pretty; }
p { margin: 0 0 var(--space-4); }
:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 3px; }
.container { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -10rem; z-index: 20; padding: var(--space-2) var(--space-4); background: var(--color-gold-hi); color: var(--color-on-gold); font-weight: 700; }
.skip-link:focus { top: var(--space-4); }
.kicker, .label { font: 600 1.0625rem / 1.3 var(--font-display); letter-spacing: 0.08em; color: var(--color-gold); }
@media (min-width: 48rem) { :root { --gutter: 2rem; } }

/* 2. Sky: the violet night, and three layers of scattered stars that twinkle in turn. */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--night); }
.sky__stars { position: absolute; inset: 0; background-size: 900px 900px; opacity: 0.8; }
.sky__stars--1 { background-image: url("../img/sky-1.svg"); }
.sky__stars--2 { background-image: url("../img/sky-2.svg"); }
.sky__stars--3 { background-image: url("../img/sky-3.svg"); }

/* 3. Shared parts ----------------------------------------------------------- */
/* The folio: a margin with a star chart beside the words, divided by a ruled line. */
.folio { display: grid; gap: var(--space-6); }
.folio__margin { min-width: 0; }
.folio__text { min-width: 0; }
@media (min-width: 56rem) {
  .folio { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 0 clamp(2.5rem, 1rem + 3vw, 4.5rem); }
  .folio__margin { padding-right: clamp(2rem, 0.5rem + 2.5vw, 3.5rem); border-right: var(--rule); }
  .folio--flip { grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem); }
  .folio--flip .folio__margin { order: 2; padding: 0 0 0 clamp(2rem, 0.5rem + 2.5vw, 3.5rem); border: 0; border-left: var(--rule); }
  .folio__margin .chart { position: sticky; top: 2rem; }
}

/* A section's head: a double rule, a plain label by a small engraved dial, and the title. */
.head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); padding-top: var(--space-4); border-top: 3px double rgb(233 198 120 / 0.6); }
.head__label { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--space-3); white-space: nowrap; font: 600 1.0625rem / 1 var(--font-display); letter-spacing: 0.12em; color: var(--color-gold); }
.head__dial, .b-faq__mark { position: relative; flex: none; width: 1.15rem; height: 1.15rem; border: 1px solid var(--color-gold); border-radius: 50%; }
.head__dial::before, .b-faq__mark::before { content: ""; position: absolute; left: calc(50% - 0.5px); top: 15%; width: 1px; height: 35%; background: var(--color-gold-hi); transform-origin: 50% 100%; }
.head__title { max-width: 18em; font-size: var(--text-2xl); }

/* A star chart: a graticule, the figure's lines and its stars, then its name. */
.chart { margin: 0; }
.chart__sky { display: block; width: 100%; max-width: 15rem; overflow: visible; }
.chart__grid { fill: none; stroke: rgb(233 198 120 / 0.3); stroke-width: 0.35; }
.chart__line { stroke: var(--color-gold-hi); stroke-width: 0.75; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%; }
.chart__star { fill: var(--color-gold-hi); transform-box: fill-box; transform-origin: center; }
.chart__caption { margin-top: var(--space-3); color: var(--color-mute); font-size: var(--text-sm); line-height: 1.45; }
.chart__name { font: 600 1.15rem var(--font-display); color: var(--color-gold-hi); }
@media (max-width: 55.99rem) {
  .chart { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
  .chart__caption { margin: 0; }
}

/* Store badges: double-ruled and square-cornered, both exactly the same size. A quiet "coming soon" until the game is out. */
.stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store { position: relative; display: inline-flex; flex: 0 0 12.5rem; width: 12.5rem; flex-direction: column; justify-content: center; min-height: 4.75rem; padding: var(--space-3) var(--space-5); border: var(--rule-strong); outline: 1px solid rgb(233 198 120 / 0.35); outline-offset: -5px; background: rgb(11 7 36 / 0.6); color: var(--color-gold-hi); text-decoration: none; overflow: hidden; transition: border-color 0.3s; }
a.store:hover { border-color: var(--color-gold-hi); }
.store__sub { color: var(--color-mute); font: 600 0.9375rem var(--font-display); letter-spacing: 0.06em; }
.store__name { font: 600 1.5rem / 1.15 var(--font-display); white-space: nowrap; }

/* 4. Masthead: a running head, ruled off from the page. Not sticky: a folio's head stays at the top. */
.b-mast { border-bottom: 3px double rgb(233 198 120 / 0.55); }
.b-mast__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-block: var(--space-3); }
.b-mast__home { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; color: var(--color-gold-hi); font: 600 1.5rem var(--font-display); letter-spacing: 0.03em; text-decoration: none; }
.b-mast__dial { width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--color-gold); stroke-width: 1.2; }
.b-mast__dial .is-sun, .b-mast__hand circle { fill: var(--color-gold-hi); stroke: none; }
.b-mast__hand { stroke: var(--color-gold-hi); transform-box: view-box; transform-origin: 50% 50%; }
[data-folio="support"] .b-mast__hand { transform: rotate(90deg); }
[data-folio="privacy"] .b-mast__hand { transform: rotate(180deg); }
[data-folio="terms"] .b-mast__hand { transform: rotate(270deg); }
[data-folio="lost"] .b-mast__hand { transform: rotate(135deg); }
.b-mast__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.b-mast__link { display: inline-block; min-height: 2.75rem; padding-top: 0.55rem; color: var(--color-parchment); font: 600 1.1875rem var(--font-display); letter-spacing: 0.06em; text-decoration: none; }
.b-mast__link:hover, .b-mast__link:focus-visible, .b-mast__link[aria-current="page"] { color: var(--color-gold-hi); text-decoration: underline; text-decoration-color: var(--color-gold); text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
@media (max-width: 30rem) { .b-mast__inner { justify-content: center; } .b-mast__links { gap: 0 var(--space-4); } }

/* 5. Frontispiece: the words, and the orrery. ----------------------------- */
.b-frontis { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.b-frontis__inner { display: grid; gap: var(--space-7); align-items: center; }
.b-frontis__words { max-width: 34rem; }
.b-dial { order: -1; }
.b-frontis .kicker { margin-bottom: var(--space-4); font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); letter-spacing: 0.06em; white-space: nowrap; }
.b-frontis__title { font-size: clamp(3rem, 1.9rem + 4.6vw, 5.5rem); line-height: 0.95; letter-spacing: 0.01em; }
.b-frontis__tagline > span { display: inline-block; }
.b-frontis__tagline { display: block; margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--rule); color: var(--color-gold); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; }
.b-frontis__lede { margin: var(--space-5) 0 var(--space-6); font-size: var(--text-lg); }
.b-frontis__note { margin: var(--space-4) 0 0; color: var(--color-mute); font-size: var(--text-sm); }
@media (min-width: 60rem) {
  .b-frontis__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2.5rem, 4vw, 5rem); }
  .b-dial { grid-row: 1; grid-column: 1; }
  .b-frontis__words { grid-row: 1; grid-column: 2; padding-left: clamp(2rem, 3vw, 3.5rem); border-left: var(--rule); }
}

/* The dial is laid out in the game's flight-screen units on a 400-wide face, so every ring shares the sun's centre:
   outer ring 312 wide (its line at 148), inner ring 196 (at 90), rays 140, sun 52, craft 46. Each layer is centred on the
   face with inset: 0 and margin: auto, so it can only ever be concentric, at any size. */
.b-dial { justify-self: center; width: min(100%, max(20rem, calc(100svh - 11rem)), 46rem); margin: 0; }
.b-dial__face { position: relative; aspect-ratio: 1; container-type: inline-size; overflow: clip; }
.b-dial__face > *, .b-dial__turn > * { position: absolute; inset: 0; margin: auto; }
.b-dial__layer, .b-dial__turn, .b-dial__bezel, .b-dial__index, .b-dial__orbit { width: 100%; height: 100%; }
.b-dial__bezel { overflow: visible; fill: none; stroke: var(--color-gold); }
.b-dial__bezel circle { stroke-width: 1.2; }
.b-dial__bezel .is-fine { stroke-width: 0.6; opacity: 0.6; }
.b-dial__ticks { stroke-width: 0.8; opacity: 0.7; }
.b-dial__ticks .is-long { stroke-width: 1.6; opacity: 1; }
.b-dial__numerals { fill: var(--color-gold); stroke: none; font: 600 13px var(--font-display); text-anchor: middle; dominant-baseline: central; }
.b-dial__index { fill: var(--color-gold-hi); }
.b-dial__ring--outer { width: 78%; }
.b-dial__ring--inner { width: 49%; }
.b-dial__rays { width: 35%; }
.b-dial__sun { width: 13%; filter: drop-shadow(0 0 1.2cqw rgb(255 240 196 / 0.5)); }
.b-dial__orbit > * { position: absolute; inset: 0; margin: auto; }
.b-dial__thread { inset: 50% 0 auto; width: 2px; height: 59.5cqw; margin: 0 auto; background: linear-gradient(180deg, var(--color-gold-hi), var(--color-teal)); box-shadow: 0 0 6px rgb(233 198 120 / 0.6); transform: translateY(-22.5cqw); }
.b-dial__craft { width: 11.5%; height: 11.5%; }
.b-dial__craft img { width: 100%; }
.b-dial__craft--sol { transform: translateY(-22.5cqw); }
.b-dial__craft--sol img { rotate: 90deg; }
.b-dial__craft--luna { transform: translateY(37cqw); }

/* 6. Steps: a ruled list, numbered in Roman like the dial. ------------------ */
.b-steps__list { margin: 0; padding: 0; list-style: none; }
.b-steps__item { display: grid; grid-template-columns: 2.25rem 3.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block: var(--space-5); border-bottom: var(--rule); }
.b-steps__item:first-child { padding-top: 0; }
.b-steps__num { color: var(--color-gold); font: 600 2.25rem / 1 var(--font-display); }
.b-steps__icon { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.b-steps__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.b-steps__text { margin: 0; }
@media (min-width: 40rem) {
  .b-steps__item { grid-template-columns: 3.5rem 4.5rem minmax(0, 1fr); gap: var(--space-5); }
  .b-steps__num { font-size: 3rem; }
  .b-steps__icon { width: 4.5rem; height: 4.5rem; }
}

/* Film: its own centred band between the hero and the zig-zag. The film in a ruled frame like the screenshots, with
   its own play and sound buttons, and on wide screens its captions engraved either side: the one on screen lights up. */
.head--centre { text-align: center; }
.head--centre .head__label { justify-content: center; }
.head--centre .head__title { margin-inline: auto; }
.b-film__text { max-width: 36rem; margin: calc(-1 * var(--space-3)) auto var(--space-6); color: var(--color-mute); text-align: center; }
.b-film__stage { display: grid; justify-items: center; }
.b-film__beats { display: none; }
@media (min-width: 64rem) {
  .b-film__stage { grid-template-columns: minmax(0, 1fr) clamp(17rem, 9rem + 11vw, 21rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  .b-film__beats { display: grid; gap: var(--space-6); width: 100%; margin: 0; padding: 0; list-style: none; }
  .b-film__beats--before { text-align: right; }
  .b-film__beat { position: relative; color: var(--color-gold-dim); font: 600 var(--text-lg) / 1.25 var(--font-display); letter-spacing: 0.06em; transition: color 0.6s var(--ease), text-shadow 0.6s var(--ease); }
  /* A short ruled line from each caption towards the film, brightening with it. */
  .b-film__beat::after { content: ""; display: block; width: 3.5rem; height: 1px; margin-top: var(--space-2); background: currentColor; opacity: 0.6; }
  .b-film__beats--before .b-film__beat::after { margin-left: auto; }
  .b-film__beat.is-now { color: var(--color-gold-hi); text-shadow: var(--glow); }
}
.b-film__frame { justify-self: center; width: min(100%, clamp(15rem, 10rem + 12vw, 20rem)); margin: 0; padding: 0.6rem; border: var(--rule); outline: 1px solid rgb(233 198 120 / 0.22); outline-offset: 4px; background: rgb(11 7 36 / 0.5); box-shadow: var(--glow); }
.b-film__video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1280; background: var(--color-ink); cursor: pointer; }
.b-film__controls { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.b-film__controls[hidden] { display: none; }
.b-film__btn { min-width: 6.5rem; min-height: 2.75rem; padding: 0 var(--space-4); border: 1px solid var(--color-gold); border-radius: 999px; background: transparent; color: var(--color-gold-hi); font: 700 0.875rem var(--font-body); letter-spacing: 0.04em; cursor: pointer; }
.b-film__btn:hover { background: rgb(233 198 120 / 0.12); }

/* 7. Reel: the game's screens, framed like engravings, in an endless strip. -- */
.b-reel__intro { max-width: 36rem; color: var(--color-mute); }
.b-reel__box { margin-top: var(--space-6); }
.b-reel__list { display: flex; gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); margin: 0; padding: var(--space-3) 0 var(--space-4); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.b-reel__list::-webkit-scrollbar { display: none; }
.b-reel__list.is-draggable { cursor: grab; }
.b-reel__list.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.b-reel__slide { flex: 0 0 clamp(12.5rem, 9rem + 9vw, 16.5rem); scroll-snap-align: center; }
.b-reel__slide figure { margin: 0; padding: 0.6rem; border: var(--rule); outline: 1px solid rgb(233 198 120 / 0.22); outline-offset: 4px; background: rgb(11 7 36 / 0.5); }
.b-reel__slide img { width: 100%; aspect-ratio: 540 / 960; object-fit: cover; user-select: none; }
.b-reel__caption { margin-top: var(--space-3); color: var(--color-mute); font-size: var(--text-sm); line-height: 1.4; }
.b-reel__list.is-enhanced .b-reel__slide { opacity: 0.45; transition: opacity 0.6s var(--ease); }
.b-reel__list.is-enhanced .b-reel__slide.is-current { opacity: 1; }
.b-reel__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.b-reel__nav[hidden] { display: none; }
.b-reel__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--color-gold); border-radius: 50%; background: transparent; color: var(--color-gold-hi); font: 600 1.5rem / 1 var(--font-display); cursor: pointer; }
.b-reel__btn:hover { background: rgb(233 198 120 / 0.12); }
.b-reel__btn--pause { font: 700 0.75rem var(--font-body); }
.b-reel__dots { display: flex; }
/* Ticks on a dial rather than dots: each one a 1.75rem-wide target. */
.b-reel__dot { position: relative; width: 1.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.b-reel__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 0.9rem; margin: -0.45rem 0 0 -1px; background: var(--color-gold); opacity: 0.55; transition: transform 0.4s var(--ease), opacity 0.4s; }
.b-reel__dot[aria-current="true"]::before { opacity: 1; transform: scaleY(1.9); background: var(--color-gold-hi); }

/* 8. Notes: what the game holds, as a two-column folio index. --------------- */
.b-notes__list { display: grid; gap: 0 var(--space-6); margin: 0; padding: 0; list-style: none; }
.b-notes__item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-2) var(--space-4); padding-block: var(--space-5); border-top: var(--rule); }
.b-notes__icon { grid-row: span 2; width: 4rem; height: 4rem; object-fit: contain; }
/* The planets carry a wide glow, so they sit larger to match the engraved medallions. */
.b-notes__icon--planet { scale: 1.45; }
.b-notes__title { align-self: end; font-size: 1.45rem; }
.b-notes__text { margin: 0; }
@media (min-width: 40rem) { .b-notes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 9. Sweep: the thread crosses a ruled line and sweeps five specks of stardust off it. */
.b-sweep__track { position: relative; height: 3rem; container-type: inline-size; overflow: clip; }
.b-sweep__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold) 12%, var(--color-gold) 88%, transparent); opacity: 0.6; }
.b-sweep__speck { position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--color-gold-hi); box-shadow: 0 0 6px var(--color-gold); }
.b-sweep__speck:nth-child(1) { left: 10%; }
.b-sweep__speck:nth-child(2) { left: 30%; }
.b-sweep__speck:nth-child(3) { left: 50%; }
.b-sweep__speck:nth-child(4) { left: 70%; }
.b-sweep__speck:nth-child(5) { left: 90%; }
.b-sweep__thread { position: absolute; left: 0; top: 50%; width: 18cqw; height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--color-gold-hi), var(--color-teal)); box-shadow: 0 0 6px rgb(233 198 120 / 0.6); transform: translateX(-24cqw); }
.b-sweep__thread::before, .b-sweep__thread::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; }
.b-sweep__thread::before { left: -4px; background: var(--color-gold-hi); }
.b-sweep__thread::after { right: -4px; background: var(--color-teal); }

/* 10. Questions: ruled entries, each with a small dial that clicks a quarter turn as it opens. */
.b-faq__list { border-bottom: var(--rule); }
.b-faq__item { border-top: var(--rule); }
.b-faq__question { display: flex; align-items: center; gap: var(--space-4); min-height: 3.5rem; padding-block: var(--space-3); color: var(--color-gold-hi); font: 600 1.4rem / 1.25 var(--font-display); list-style: none; cursor: pointer; }
.b-faq__question::-webkit-details-marker { display: none; }
.b-faq__question:hover { color: var(--color-parchment); }
.b-faq__mark::before { transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1); }
.b-faq__item[open] .b-faq__mark::before { transform: rotate(90deg); }
.b-faq__answer { margin: 0; padding: 0 0 var(--space-5) calc(1.15rem + var(--space-4)); max-width: 42rem; }

/* 11. Syzygy: the call to action. Sol, the sun and Luna drift into line, and the line flashes. */
.b-syzygy__inner { display: grid; gap: var(--space-6); align-items: center; padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); border-block: 3px double rgb(233 198 120 / 0.6); }
.b-syzygy__chart { position: relative; justify-self: center; width: min(100%, 22rem); aspect-ratio: 1; container-type: inline-size; }
.b-syzygy__chart > * { position: absolute; inset: 0; margin: auto; }
.b-syzygy__orbit { border: 1px solid rgb(233 198 120 / 0.45); border-radius: 50%; }
.b-syzygy__orbit--outer { width: 84%; height: 84%; }
.b-syzygy__orbit--inner { width: 54%; height: 54%; }
.b-syzygy__sun { width: 17%; filter: drop-shadow(0 0 2cqw rgb(255 240 196 / 0.45)); }
.b-syzygy__arm { width: 0; height: 0; }
.b-syzygy__arm img { position: absolute; top: -7cqw; left: -7cqw; width: 14cqw; max-width: none; }
.b-syzygy__arm--sol img { transform: translateX(-27cqw) rotate(-90deg); }
.b-syzygy__arm--luna img { transform: translateX(42cqw); }
.b-syzygy__flash { width: 96%; height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold-hi) 20%, #fff 50%, var(--color-gold-hi) 80%, transparent); box-shadow: 0 0 12px var(--color-gold); opacity: 0; }
.b-syzygy__line { font-size: var(--text-lg); }
.b-syzygy .head { padding-top: 0; border-top: 0; }
.b-syzygy .store::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgb(255 240 196 / 0.28) 50%, transparent 65%); transform: translateX(-100%); opacity: 0; }
@media (min-width: 56rem) {
  .b-syzygy__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .b-syzygy__chart { order: 2; }
}

/* 12. Folio pages: support, privacy and terms. The margin keeps a chart and the page's contents. */
.b-doc { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.b-doc__body { max-width: 46rem; }
.b-doc__body .head__title { font-size: var(--text-3xl); }
.b-doc__body h2 { margin: var(--space-7) 0 var(--space-4); padding-top: var(--space-4); border-top: var(--rule); font-size: 1.85rem; scroll-margin-top: 1.5rem; }
.b-doc__body h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.35rem; }
.b-doc__body ul { padding-left: 1.25rem; }
.b-doc__body li { margin-bottom: var(--space-2); }
.b-doc__body li::marker { color: var(--color-gold); }
.b-doc__table { margin-block: var(--space-4) var(--space-5); overflow-x: auto; }
.b-doc__table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.b-doc__table th, .b-doc__table td { padding: var(--space-2) var(--space-3); border: var(--rule); text-align: left; vertical-align: top; }
.b-doc__table th { color: var(--color-gold-hi); font: 600 1.05rem var(--font-display); }
.b-doc__contents { display: none; }
@media (min-width: 56rem) {
  .b-doc__margin .chart__sky { max-width: 11rem; }
  .b-doc__contents { display: block; margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--rule); }
  .b-doc__label { margin-bottom: var(--space-2); color: var(--color-gold); font: 600 1.05rem var(--font-display); letter-spacing: 0.08em; }
  .b-doc__contents ol { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
  .b-doc__contents li { margin-bottom: var(--space-1); }
  .b-doc__contents a { color: var(--color-parchment); text-decoration: none; }
  .b-doc__contents a:hover { color: var(--color-gold-hi); text-decoration: underline; }
}
@media (min-width: 56rem) and (min-height: 52rem) { .b-doc__margin { position: sticky; top: 1.5rem; align-self: start; } }

/* 13. Not found ------------------------------------------------------------- */
.b-lost__inner { display: grid; gap: var(--space-5); justify-items: start; max-width: 46rem; }
.b-lost__rock { width: 7rem; }
.b-lost h1 { font-size: var(--text-3xl); }
.b-lost .label { margin: 0; }
.b-lost__back { display: inline-block; padding: var(--space-3) var(--space-5); border: var(--rule-strong); outline: 1px solid rgb(233 198 120 / 0.35); outline-offset: -5px; color: var(--color-gold-hi); font: 600 1.35rem var(--font-display); text-decoration: none; }
.b-lost__back:hover { background: rgb(233 198 120 / 0.1); }

/* 14. Colophon: the folio's last word, centred and ruled. ------------------- */
.b-colophon { margin-top: var(--space-6); border-top: 3px double rgb(233 198 120 / 0.55); background: rgb(11 7 36 / 0.55); }
.b-colophon__inner { display: grid; justify-items: center; gap: var(--space-4); padding-block: var(--space-7) var(--space-6); text-align: center; }
.b-colophon p { margin: 0; }
.b-colophon__name { color: var(--color-gold-hi); font: 600 2rem / 1 var(--font-display); letter-spacing: 0.03em; }
.b-colophon__line { max-width: 34rem; color: var(--color-mute); }
.b-colophon__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.b-colophon__nav a { display: inline-block; padding-block: 0.6rem; color: var(--color-parchment); font: 600 1.15rem var(--font-display); letter-spacing: 0.05em; }
.b-colophon__mail { max-width: 36rem; }
.b-colophon__small { display: grid; gap: var(--space-2); max-width: 46rem; margin-top: var(--space-3); padding-top: var(--space-4); border-top: var(--rule); color: var(--color-mute); font-size: var(--text-sm); }
.b-colophon__small a { color: var(--color-mute); }
.b-colophon__credit a { display: inline-flex; align-items: center; gap: 0.4rem; vertical-align: middle; }
.b-colophon__credit img { width: 1.375rem; height: 1.375rem; }

/* 15. Motion ------------------------------------------------------------------
   Clockwork, never bouncy. Everything here is transform or opacity. */
@keyframes cr-turn { to { transform: rotate(360deg); } }
@keyframes cr-turn-back { to { transform: rotate(-360deg); } }
@keyframes cr-twinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.3; } }
@keyframes cr-sol-swap {
  0%, 42% { transform: translateY(-22.5cqw); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  50%, 92% { transform: translateY(-37cqw); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  100% { transform: translateY(-22.5cqw); }
}
@keyframes cr-luna-swap {
  0%, 42% { transform: translateY(37cqw); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  50%, 92% { transform: translateY(22.5cqw); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  100% { transform: translateY(37cqw); }
}
@keyframes cr-thread-swap {
  0%, 42% { transform: translateY(-22.5cqw); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  50%, 92% { transform: translateY(-37cqw); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  100% { transform: translateY(-22.5cqw); }
}
/* A section's dial winds round in three notches, a beat apart, like clockwork catching. */
@keyframes cr-click {
  0% { transform: rotate(-90deg); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  20%, 34% { transform: rotate(-60deg); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  54%, 68% { transform: rotate(-30deg); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  88%, 100% { transform: rotate(0deg); }
}
/* Arriving on an orbit: a slight swing about a point far below, as a dial's hand sweeps in. */
@keyframes cr-arrive { from { opacity: 0; transform: rotate(-1.4deg); } to { opacity: 1; transform: none; } }
@keyframes cr-fade { from { opacity: 0; } }
@keyframes cr-draw { from { transform: scaleX(0); } }
@keyframes cr-star { from { opacity: 0; transform: scale(0.2); } 60% { opacity: 1; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
@keyframes cr-speck { 0% { opacity: 1; transform: none; } 4% { opacity: 0; transform: scale(0.3); } 76% { opacity: 0; transform: scale(0.3); } 92%, 100% { opacity: 1; transform: none; } }
@keyframes cr-sweep { 0% { transform: translateX(-24cqw); } 40%, 100% { transform: translateX(104cqw); } }
@keyframes cr-syz-sol { 0%, 100% { transform: rotate(-52deg); } 26%, 70% { transform: rotate(0deg); } }
@keyframes cr-syz-luna { 0%, 100% { transform: rotate(38deg); } 26%, 70% { transform: rotate(0deg); } }
@keyframes cr-syz-flash { 0%, 25% { opacity: 0; transform: scaleX(0.1); } 29% { opacity: 1; transform: scaleX(1); } 40%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cr-syz-sheen { 0%, 28% { opacity: 1; transform: translateX(-100%); } 40% { opacity: 1; transform: translateX(100%); } 41%, 100% { opacity: 0; transform: translateX(100%); } }

@media (prefers-reduced-motion: no-preference) {
  .sky__stars--1 { animation: cr-twinkle 7s ease-in-out infinite; }
  .sky__stars--2 { animation: cr-twinkle 9.5s ease-in-out -3s infinite; }
  .sky__stars--3 { animation: cr-twinkle 12s ease-in-out -7s infinite; }

  /* The orrery keeps time: the bezel and the rings turn slowly in opposite directions (and further as the page is
     scrolled, wound by the script), the rays turn, Sol and Luna orbit, and every so often they swap rings. */
  .b-dial__turn--bezel { animation: cr-turn 240s linear infinite; }
  .b-dial__turn--rings { animation: cr-turn-back 320s linear infinite; }
  .b-dial__rays { animation: cr-turn 60s linear infinite; }
  .b-dial__orbit { animation: cr-turn 40s linear infinite; }
  .b-dial__craft--sol { animation: cr-sol-swap 16s 3s infinite both; }
  .b-dial__craft--luna { animation: cr-luna-swap 16s 3s infinite both; }
  .b-dial__thread { animation: cr-thread-swap 16s 3s infinite both; }

  /* Things arrive as they come into view. Without the script, everything simply shows. */
  .reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; }
  .reveal-ready [data-reveal].is-visible { transform-origin: 50% 900%; animation: cr-arrive 1.1s var(--ease) calc(var(--reveal-delay, 0) * 110ms) both; }
  .reveal-ready .chart.is-visible { animation-name: cr-fade; }
  .reveal-ready .b-sweep__track.is-visible, .reveal-ready .b-syzygy__inner.is-visible { animation-name: cr-fade; }
  .head.is-visible .head__dial::before { animation: cr-click 1.4s 0.15s both; }

  /* A constellation draws itself line by line, each star lighting as its line arrives. */
  .reveal-ready .chart:not(.is-visible) .chart__line { transform: scaleX(0); }
  .reveal-ready .chart:not(.is-visible) .chart__star { opacity: 0; }
  .chart.is-visible .chart__line { animation: cr-draw 0.45s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--d, 0) * 1s + 0.35s) both; }
  .chart.is-visible .chart__star { animation: cr-star 0.7s ease-out calc(var(--d, 0) * 1s + 0.35s) both; }

  /* The thread sweeps the specks off the line, and they settle back before it comes round again. */
  .b-sweep__track.is-visible .b-sweep__thread { animation: cr-sweep 9s linear 0.4s infinite both; }
  .b-sweep__track.is-visible .b-sweep__speck { animation: cr-speck 9s linear infinite both; }
  .b-sweep__track.is-visible .b-sweep__speck:nth-child(1) { animation-delay: 0.71s; }
  .b-sweep__track.is-visible .b-sweep__speck:nth-child(2) { animation-delay: 1.31s; }
  .b-sweep__track.is-visible .b-sweep__speck:nth-child(3) { animation-delay: 1.9s; }
  .b-sweep__track.is-visible .b-sweep__speck:nth-child(4) { animation-delay: 2.49s; }
  .b-sweep__track.is-visible .b-sweep__speck:nth-child(5) { animation-delay: 3.08s; }

  /* Syzygy: Sol and Luna drift into line with the sun, the line flashes and light crosses the store plaques. */
  .b-syzygy__inner.is-visible .b-syzygy__arm--sol { animation: cr-syz-sol 12s cubic-bezier(0.45, 0, 0.25, 1) 0.6s infinite both; }
  .b-syzygy__inner.is-visible .b-syzygy__arm--luna { animation: cr-syz-luna 12s cubic-bezier(0.45, 0, 0.25, 1) 0.6s infinite both; }
  .b-syzygy__inner.is-visible .b-syzygy__flash { animation: cr-syz-flash 12s ease-out 0.6s infinite both; }
  .b-syzygy__inner.is-visible .store::after { animation: cr-syz-sheen 12s ease-in-out 0.6s infinite both; }
  .reveal-ready .b-syzygy__inner:not(.is-visible) .b-syzygy__arm--sol { transform: rotate(-52deg); }
  .reveal-ready .b-syzygy__inner:not(.is-visible) .b-syzygy__arm--luna { transform: rotate(38deg); }
}

/* 16. Page turns: going from page to page cross-fades the folio while the masthead's dial clicks round a notch. */
@keyframes cr-notch { from { transform: rotate(-30deg); } }
@keyframes cr-leave { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .b-mast__dial { view-transition-name: mast-dial; }
  ::view-transition-old(root) { animation: cr-leave 0.3s ease-in both; }
  ::view-transition-new(root) { animation: cr-fade 0.5s ease-out 0.1s both; }
  ::view-transition-old(mast-dial) { animation: none; opacity: 0; }
  ::view-transition-new(mast-dial) { animation: cr-notch 0.8s cubic-bezier(0.7, 0, 0.2, 1) both; }
}

/* 17. Reduced motion: nothing moves on its own. Charts show drawn, Syzygy shows aligned. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}