/* ─────────────────────────────────────────────────────────────
   AION · every stylesheet landing.html loads, in one request.
   GENERATED by _tools/seo/css-bundle.mjs — do not edit.
   Edit the sheets in this directory and rebuild.

   ONE PER PAGE, not one for the site: base.css sets
   `html,body{overflow:hidden}` for the Gate, and giving that to
   the other pages made them unscrollable — the declaration sat
   below the fold with no way to reach it. A sheet a page did not
   load is not harmless when you hand it over.
   ───────────────────────────────────────────────────────────── */

/* ══ fonts.css ══════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────
   GENERATED by _tools/seo/fonts.mjs — do not edit by hand.

   Self-hosted, for the reason tokens.css already gives about the Old
   Persian face: a project published to outlive every company involved
   should not ask one of them for its letters on every page load.

   Cormorant Garamond and IBM Plex Mono are both SIL Open Font License
   1.1; the licences ship beside the files in site/fonts/.

   font-display: swap is kept from the original request — text paints
   immediately in the fallback stack and reflows once, which is the
   right trade on a gateway that can be cold.
   ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300-italic-latin.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;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-latin.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;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300-latin.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;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-latin.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;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin.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;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-600-latin.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-200-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-200-latin.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-300-latin.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.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;
}

/* ══ tokens.css ══════════════════════════════════════════ */
/* ============================================================
   tokens.css
   Design tokens — every visible value in the system flows
   from this file. Components reference variables; they do
   not hard-code values.
   ============================================================ */

/* ── [hidden] must mean hidden ─────────────────────────────
   The user-agent rule is `[hidden] { display: none }`, and ANY author
   `display` declaration outranks it — author normal beats UA normal
   whatever the specificity. So `.wv3 { display: grid }` beside
   `<section class="wv3" hidden>` left the section on screen.

   base.css has carried this guard for a long time, but base.css is
   loaded by index.html alone. tokens.css is the one stylesheet every
   page loads, so the guard belongs here. wall.css had already patched
   two symptoms of it one selector at a time (`.vt-row[hidden]`,
   `.vt-note[hidden]`) — that is the shape of a rule missing from the
   base layer. */
[hidden] { display: none !important; }

/* ── Old Persian Cuneiform · self-hosted for permanence ────
   The script in which Cyrus and Darius wrote their
   declarations on stone. AION inherits the lineage:
   carved letters meant to outlast empires. */
@font-face {
  font-family: "Noto Sans Old Persian";
  src: url("../fonts/NotoSansOldPersian-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Palette ─────────────────────────────────────────────
     The AION palette is restrained: pure void, warm bone,
     a single sacred gold (representing φ, the architect's
     percentage), one ember for living elements, and crimson
     reserved exclusively for errors. */

  --void:        #000000;
  --abyss:       #02040a;
  --bone:        #ede8d8;
  --bone-dim:    rgba(237, 232, 216, 0.55);
  --bone-faint:  rgba(237, 232, 216, 0.28);
  --bone-ghost:  rgba(237, 232, 216, 0.10);
  --bone-trace:  rgba(237, 232, 216, 0.04);
  --gold:        #d4ad4f;
  --gold-deep:   #a8842f;
  --gold-soft:   rgba(212, 173, 79, 0.55);
  --gold-glow:   rgba(212, 173, 79, 0.18);
  --gold-trace:  rgba(212, 173, 79, 0.04);
  --ember:       #ff7a3d;
  --crimson:     #b53a3a;
  --jade:        #5fb392;

  /* ── Typography ─────────────────────────────────────── */

  /* Both families are self-hosted, like the Old Persian face above and for the
     same reason — see styles/fonts.css and _tools/seo/fonts.mjs. Nothing on
     this site asks a third party for its letters (O9, closed 2026-08-13).
     The fallbacks stay: a face that fails to load must degrade to something
     chosen, not to whatever the browser reaches for. */
  --font-display:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono:      "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-cuneiform: "Noto Sans Old Persian", "Noto Sans", "Times New Roman", serif;

  /* ── Z-index ladder ─────────────────────────────────── */

  --z-atmosphere:  0;
  --z-cosmos:      1;
  --z-instrument:  4;
  --z-chrome:      6;
  --z-grain:      50;
  --z-modal:     100;
  --z-toast:     200;

  /* ── Focus ──────────────────────────────────────────── */

  --focus-ring:    var(--gold);
  --focus-width:   2px;
  --focus-offset:  3px;
}

/* ════ FOCUS · where the keyboard is ══════════════════════
   Measured before this existed: on the Hall, 31 of 32 focusable controls
   showed no ring at all, and on the Gate 6 of 7. Someone navigating by
   keyboard — because they prefer to, or because they must — could tab
   through the whole site without ever seeing where they were.

   Four stylesheets also carried a bare `outline: none` on inputs, removing
   the browser's own ring and putting nothing back. Each of those had a
   border-colour change beside it, which is a hint, not a focus indicator:
   it is invisible to anyone who cannot distinguish those two golds.

   `:focus-visible`, not `:focus` — a mouse click on a button should not
   leave a ring behind it. That is the whole reason the pseudo-class exists.

   This lives in tokens.css because it is the one stylesheet all eight pages
   load. A rule that ships on seven pages out of eight is a rule that is
   wrong on the eighth. ════════════════════════════════════════════════ */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* `:where()` above keeps specificity at zero, so any component can still
   style its own focus without fighting this.

   The eight `outline: none` rules in this project are all written as `:focus`,
   which also fires on a mouse click — that is why they were written, and it is
   also why they take the ring away from the keyboard. This wins them back for
   `:focus-visible` alone, by class rather than by listing every id: a list is
   a thing that goes one short, and it did — `.wv3-input` and one more were
   missing from the first attempt, found by measuring every page rather than
   by reading the CSS. */
[class*="-input"]:focus-visible,
[class*="-secret"]:focus-visible,
[class*="-ref-link"]:focus-visible,
[class*="-text"]:focus-visible,
#cmpText:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring) !important;
  outline-offset: 1px;
}

/* Anything that scrolls should be reachable by keyboard, and a scrollable
   region only receives focus if it can hold it. */
@media (prefers-reduced-motion: no-preference) {
  :where(html) { scroll-behavior: smooth; }
}

/* ════ TOUCH · the target, not the letters ════════════════
   Measured at 390px, the width of a phone: the back link on every page is
   13px tall, `.soul` is 11px, `.rail-room` is 23px. WCAG 2.2 asks for 24×24
   (SC 2.5.8) and a finger asks for more.

   The letters are not the problem and must not change. Fine monospace at wide
   tracking IS this project's face — an instrument's engraving, not a web UI —
   and setting a 16px minimum on it would be vandalism dressed as compliance.

   So the *target* grows and the *type* does not: a pseudo-element centred on
   the link, stretched to 24px tall, outside the flow so no layout moves. The
   link looks identical and is twice as easy to hit. ═══════════════════════ */

.wall-back, .wall-codex, .witness-back, .codex-back, .mc-back, .mc-codex,
.wall-archive a, .rail-room, .bezel-nav a, .ld-nav a, .codex-lang a,
.witness-nav a, .ld-bar-nav a, .ld-footer-nav a,
.soul, .link, .link-mute {
  position: relative;
}
.wall-back::after, .wall-codex::after, .witness-back::after, .codex-back::after,
.mc-back::after, .mc-codex::after, .wall-archive a::after, .rail-room::after,
.codex-lang a::after, .witness-nav a::after, .ld-bar-nav a::after,
.ld-footer-nav a::after, .soul::after, .link::after, .link-mute::after {
  content: "";
  position: absolute;
  /* Both axes. The first version stretched height only, and `.soul` — an
     11×11 dot on the Gate — stayed 11px wide and therefore still unhittable.
     A target is the smaller of its two sides. */
  left: 50%; top: 50%;
  translate: -50% -50%;
  min-width: 24px;  width: 100%;
  min-height: 24px; height: 100%;
  /* Behind the text, and it must never eat a click meant for something else. */
  z-index: -1;
}

/* `.bezel-nav a` already draws its own underline in ::after — give that one
   the room instead of a second pseudo-element it does not have. */
.bezel-nav a::after, .ld-nav a::after { content: none; }
.bezel-nav a, .ld-nav a { padding-block: 6px; }

/* ════ TYPE · a floor, on small screens only ══════════════
   Nine classes render below 9px on a phone, three at 8px. That is legible on
   a 27-inch display at arm's length and not on a phone in daylight. The floor
   is raised only where the screen is small, so the desktop composition —
   which was designed at these sizes and looked at — is untouched.

   The `html` prefix is load-bearing, not decoration. tokens.css is the FIRST
   stylesheet every page loads, so on equal specificity it loses every tie to
   the page's own sheet — the first version of this block set nothing at all,
   and measured as having changed nothing. ════════════════════════════════ */

@media (max-width: 560px) {
  html .stat-key, html .rail-count, html .room-count,
  html .placard-by, html .placard-when, html .placard-sealed,
  html .manifesto-source, html .codex-mute, html .wv3-split,
  html .meta-key, html .ld-eyebrow, html .ld-footer-fine,
  html .key, html .sep,
  /* The chain badge's label is a bare <span> with no class of its own, so it
     has to be reached through its parent. Found by measuring, not by reading
     the markup — a class list will always miss the elements that have none. */
  html .chain-status, html .chain-status span,
  /* The Hall's pulse (P2) and the sealed room's countdown (P3) arrived after
     this list was written and inherited the same 9px the rest of the hall's
     metadata had before the floor existed. A rule that covers nine classes
     out of eleven is wrong on the two. */
  html .pulse-title, html .pulse-amt, html .pulse-when {
    font-size: 10px;
  }
  html .placard-id, html .coll, html .rail-when { font-size: 10.5px; }

  /* The composer is where a person writes the thing they came here to write,
     on the device most of them will use. Its labels — "For whom", "A Wallet",
     "A future date" — were rendering at 9px, which is the smallest type on
     the site being asked to carry the most important decision on it. */
  html .cmp-choice-label,
  html .cmp-premium,
  html .cmp-meta, html .cmp-meta span { font-size: 10.5px; }
  html .cmp-seg button, html .cmp-seg .on { font-size: 11px; }
  html .wallet-pill, html .wallet-pill span { font-size: 10px; }
}

/* ══ atmosphere.css ══════════════════════════════════════════ */
/* ============================================================
   atmosphere.css
   The shared cosmic backdrop — loaded by every page so the
   homepage, the wall, and the witness viewer all breathe the
   same void: a drifting coloured nebula, a depth vignette, and
   a film of grain over it all. The star field (canvas #cosmos)
   is painted on top by ui/starfield.js.
   ============================================================ */

/* ── Drifting nebula + vignette ───────────────────────────── */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: var(--z-atmosphere, 0);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(40, 24, 80, 0.16) 0%,
      rgba(8, 4, 20, 0.06) 34%,
      transparent 64%),
    radial-gradient(ellipse at 50% 56%,
      rgba(150, 110, 50, 0.06) 0%,
      transparent 50%);
}

.atmosphere::before {
  content: "";
  position: absolute;
  inset: -16%;
  pointer-events: none;
  background:
    radial-gradient(34% 30% at 27% 29%, rgba(64, 42, 128, 0.13), transparent 70%),
    radial-gradient(30% 27% at 75% 35%, rgba(22, 84, 96, 0.10), transparent 70%),
    radial-gradient(33% 30% at 62% 75%, rgba(156, 104, 42, 0.09), transparent 70%),
    radial-gradient(26% 24% at 31% 73%, rgba(96, 40, 96, 0.09), transparent 70%);
  filter: blur(30px);
  animation: nebula-drift 52s ease-in-out infinite,
             nebula-hue   60s ease-in-out infinite;
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 38%,
    rgba(0, 0, 0, 0.42) 76%,
    rgba(0, 0, 0, 0.80) 100%);
}

/* ── Film grain · analogue warmth atop digital perfection ─── */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain, 50);
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Keyframes (nebula-drift / nebula-hue) live in motion.css, which
   the homepage already loads. The wall and witness pages inline a
   copy below so they animate without pulling the whole motion set. */
@keyframes nebula-drift {
  0%   { transform: translate(-2%, -1%) scale(1.06); }
  50%  { transform: translate(2%,  2%)  scale(1.14); }
  100% { transform: translate(-2%, -1%) scale(1.06); }
}
@keyframes nebula-hue {
  0%, 100% { filter: blur(30px) hue-rotate(-18deg) saturate(1); }
  50%      { filter: blur(30px) hue-rotate( 22deg) saturate(1.2); }
}

/* ── Page-enter · emerge from the dark ─────────────────────
   A black veil that fades out on load, so arriving from the Hall's
   zoom transition feels continuous — you emerge from the glow. */
.page-enter {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background: #000;
  animation: page-enter-fade 1s ease-out forwards;
}
@keyframes page-enter-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere::before { animation: none !important; }
  .page-enter { animation: none !important; opacity: 0 !important; }
}

/* ══ landing.css ══════════════════════════════════════════ */
/* ============================================================
   landing.css
   The narrative landing — a scrolling, cinematic pitch for the
   AION concept. Shares the void (atmosphere.css) and the design
   tokens; everything here is the story laid over them.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
#cosmos { position: fixed; inset: 0; z-index: var(--z-cosmos); pointer-events: none; }
a { color: inherit; text-decoration: none; }

/* ── Scroll-reveal ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.22, 1, .36, 1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Top bar ───────────────────────────────────────────── */
.ld-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 56px);
  backdrop-filter: blur(2px);
}
.ld-bar-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: var(--gold);
  text-shadow: 0 0 14px var(--gold-glow);
}
.ld-bar-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
}
.ld-bar-nav a { color: var(--bone-dim); transition: color .35s ease; }
.ld-bar-nav a:hover { color: var(--bone); }
.ld-bar-cta {
  color: var(--gold) !important;
  border: 1px solid rgba(212,173,79,0.4);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.ld-bar-cta:hover {
  background: var(--gold-trace);
  border-color: var(--gold-soft);
  box-shadow: 0 0 22px rgba(212,173,79,0.18);
}

/* ── Section scaffolding ───────────────────────────────── */
section { position: relative; z-index: 2; }
.ld-section-head { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.ld-kicker {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold-soft);
  margin-bottom: 16px;
}
.ld-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.18;
  color: var(--bone);
  letter-spacing: 0.01em;
}

/* ── Hero ──────────────────────────────────────────────── */
.ld-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}
.ld-hero-instrument {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.ld-astro {
  width: min(120vmin, 920px);
  height: min(120vmin, 920px);
  opacity: 0.6;
  animation: ld-spin 240s linear infinite;
}
@keyframes ld-spin { to { transform: rotate(360deg); } }
.ld-ring { fill: none; stroke: var(--bone-ghost); stroke-width: 0.6; }
.ld-ring.r1 { stroke: rgba(212,173,79,0.16); }
.ld-ticks line { stroke: rgba(212,173,79,0.22); stroke-width: 0.5; }
.ld-core-halo { fill: var(--gold); opacity: 0.06; filter: blur(8px); }
.ld-core { fill: #fff6dd; filter: drop-shadow(0 0 10px var(--gold)); animation: ld-breathe 5s ease-in-out infinite; transform-origin: 200px 200px; }
@keyframes ld-breathe { 0%,100% { opacity: .8; } 50% { opacity: 1; } }

.ld-hero-body { position: relative; max-width: 760px; }
.ld-eyebrow {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(9px, 1.4vw, 12px);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: var(--gold-soft);
  margin-bottom: 26px;
}
.ld-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 13vw, 150px);
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  line-height: 1;
  background: linear-gradient(110deg, #d4ad4f 28%, #fff4d6 47%, #ffe9b8 53%, #d4ad4f 72%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(212,173,79,0.4)) drop-shadow(0 0 50px rgba(212,173,79,0.18));
  animation: ld-shimmer 8s ease-in-out infinite;
}
@keyframes ld-shimmer { 0%,100% { background-position: 125% 0; } 50% { background-position: -25% 0; } }
.ld-lead {
  margin-top: 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.35;
  color: var(--bone);
}
.ld-lead-gold { color: var(--gold); text-shadow: 0 0 18px var(--gold-glow); font-style: italic; }
.ld-sub {
  margin: 22px auto 0;
  max-width: 560px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(14px, 1.8vw, 17px);
  line-height: 1.8;
  color: var(--bone-dim);
}

.ld-cta-row { margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ld-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, background-position .9s ease, color .4s ease, border-color .4s ease;
  white-space: nowrap;
}
.ld-cta.primary {
  color: #ffe9b8;
  border-color: rgba(212,173,79,0.55);
  background:
    linear-gradient(120deg, transparent 32%, rgba(255,240,205,0.18) 48%, transparent 64%) no-repeat,
    radial-gradient(130% 200% at 50% -10%, rgba(212,173,79,0.26) 0%, rgba(212,173,79,0.07) 55%, transparent 75%);
  background-size: 260% 100%, 100% 100%;
  background-position: 175% 0, center;
  box-shadow: 0 0 28px rgba(212,173,79,0.16), inset 0 0 18px rgba(212,173,79,0.08);
}
.ld-cta.primary:hover {
  transform: translateY(-2px);
  color: #fff6dd;
  border-color: rgba(255,230,160,0.9);
  background-position: -60% 0, center;
  box-shadow: 0 0 46px rgba(212,173,79,0.36), inset 0 0 22px rgba(212,173,79,0.14);
}
.ld-cta.primary span { display: inline-block; transition: transform .4s ease; }
.ld-cta.primary:hover span { transform: translateX(4px); }
.ld-cta.primary.big { font-size: 13px; padding: 18px 40px; letter-spacing: 0.28em; }
.ld-cta.ghost {
  color: var(--bone-dim);
  border-color: var(--bone-ghost);
}
.ld-cta.ghost:hover { color: var(--gold); border-color: var(--gold-soft); }

.ld-scroll-hint {
  margin-top: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-cuneiform);
  font-size: 16px;
  color: var(--gold-soft);
}
.ld-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(var(--gold-soft), transparent);
  animation: ld-drip 2.4s ease-in-out infinite;
}
@keyframes ld-drip { 0% { opacity: .2; transform: scaleY(.4); transform-origin: top; } 50% { opacity: 1; } 100% { opacity: .2; transform: scaleY(1); transform-origin: top; } }

/* ── The Vow ───────────────────────────────────────────── */
.ld-vow {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(80px, 14vh, 160px) 24px;
  text-align: center;
}
.ld-vow-cu { font-family: var(--font-cuneiform); font-size: 20px; letter-spacing: 0.3em; color: var(--gold-soft); margin-bottom: 30px; }
.ld-vow-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.25;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,173,79,0.18);
}
.ld-vow-body {
  margin: 34px auto 0;
  max-width: 600px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.9;
  color: var(--bone-dim);
}
.ld-vow-body em { color: var(--bone); font-style: italic; }

/* ── Pillars ───────────────────────────────────────────── */
.ld-pillars { max-width: 1080px; margin: 0 auto; padding: clamp(60px, 9vh, 110px) 24px; }
.ld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.ld-card {
  position: relative;
  padding: 34px 30px 32px;
  border: 1px solid var(--bone-trace);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
  transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .5s ease, box-shadow .5s ease;
  overflow: hidden;
}
.ld-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, #d4ad4f) 9%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .5s ease;
}
.ld-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c, #d4ad4f) 40%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 30px color-mix(in srgb, var(--c, #d4ad4f) 14%, transparent);
}
.ld-card:hover::before { opacity: 1; }
.ld-glyph {
  position: relative;
  font-size: 26px;
  color: var(--c, var(--gold));
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c, #d4ad4f) 60%, transparent));
  margin-bottom: 18px;
}
.ld-card h3 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--bone);
  margin-bottom: 12px;
}
.ld-card p {
  position: relative;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: var(--bone-dim);
}

/* ── The Hall (live preview) ───────────────────────────── */
.ld-hall { max-width: 1080px; margin: 0 auto; padding: clamp(70px, 11vh, 130px) 24px; text-align: center; }
.ld-hall-intro {
  max-width: 600px;
  margin: 18px auto 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.85;
  color: var(--bone-dim);
}
.ld-hall-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 3.2vw, 40px);
  min-height: 150px;
}
.ld-hall-loading {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--bone-dim);
  align-self: center;
}
.ld-hall-loading a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }

.ld-seal {
  --glow: #d4ad4f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Bigger than it was (96–124), because what hangs here is now the real
     plate and a plate needs about 112px before its figure resolves at all.
     Six of these at 140 plus the gap still stand in one row inside the
     1080px hall. */
  width: clamp(112px, 14vw, 140px);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.ld-seal-art {
  width: 100%;
  aspect-ratio: 1;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 55%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--glow) 22%, transparent));
  transition: filter .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
/* `svg`, not `.seal-svg` — the medallion carries that class, the plate
   carries none, and an unsized 1000×1000 plate would burst the strip. */
.ld-seal-art svg { width: 100%; height: 100%; display: block; border-radius: 3px; }
.ld-seal:hover { transform: translateY(-6px); }
.ld-seal:hover .ld-seal-art {
  transform: scale(1.06);
  filter:
    drop-shadow(0 0 16px color-mix(in srgb, var(--glow) 80%, transparent))
    drop-shadow(0 0 44px color-mix(in srgb, var(--glow) 38%, transparent));
}
.ld-seal-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--bone);
}
.ld-seal-by {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--bone-dim);
}
.ld-hall-cta { margin-top: clamp(40px, 6vw, 64px); }

/* ── Lineage ───────────────────────────────────────────── */
.ld-lineage {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(70px, 11vh, 130px) 24px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(30px, 6vw, 70px);
  align-items: center;
}
.ld-tomb-mark { width: 200px; height: 200px; justify-self: center; opacity: 0.85; }
.ld-tomb-mark .tomb-mark { width: 100%; height: 100%; }
.ld-lineage-body p {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.9;
  color: var(--bone-dim);
  max-width: 560px;
}
.ld-lineage-cu { font-family: var(--font-cuneiform); font-size: 20px; letter-spacing: 0.24em; color: var(--gold-soft); margin-top: 26px !important; }

/* ── How ───────────────────────────────────────────────── */
.ld-how { max-width: 1000px; margin: 0 auto; padding: clamp(60px, 9vh, 110px) 24px; }
.ld-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  counter-reset: step;
}
.ld-step { text-align: center; padding: 20px; }
.ld-step-n {
  display: inline-grid;
  place-items: center;
  width: 58px; height: 58px;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 18px;
  box-shadow: inset 0 0 18px rgba(212,173,79,0.08), 0 0 18px rgba(212,173,79,0.08);
}
.ld-step h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--bone); margin-bottom: 10px; }
.ld-step p { font-family: var(--font-display); font-weight: 300; font-size: 14.5px; line-height: 1.7; color: var(--bone-dim); max-width: 260px; margin: 0 auto; }

/* ── Enter ─────────────────────────────────────────────── */
.ld-enter {
  position: relative;
  text-align: center;
  padding: clamp(90px, 16vh, 180px) 24px;
  overflow: hidden;
}
.ld-enter-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 700px; height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212,173,79,0.10) 0%, transparent 60%);
  pointer-events: none;
  animation: ld-breathe 7s ease-in-out infinite;
}
.ld-enter-line {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 5.4vw, 60px);
  color: var(--bone);
}
.ld-enter-sub {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--gold);
  text-shadow: 0 0 22px var(--gold-glow);
  margin: 10px 0 38px;
}
.ld-stats {
  position: relative;
  margin-top: 38px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
}
.ld-stats b { color: var(--gold); font-weight: 400; }
.ld-stats-sep { color: var(--bone-ghost); }

/* ── Footer ────────────────────────────────────────────── */
.ld-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 70px 24px 90px;
  border-top: 1px solid var(--bone-trace);
}
.ld-footer-tomb { width: 52px; height: 52px; margin: 0 auto 14px; opacity: 0.6; }
.ld-footer-tomb .tomb-mark { width: 100%; height: 100%; }
.ld-footer-text { font-family: var(--font-cuneiform); font-size: 14px; letter-spacing: 0.22em; color: var(--gold-soft); margin-bottom: 22px; }
.ld-footer-nav { display: flex; justify-content: center; gap: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; margin-bottom: 22px; }
.ld-footer-nav a { color: var(--bone-dim); transition: color .35s ease; }
.ld-footer-nav a:hover { color: var(--gold); }
.ld-footer-fine { font-family: var(--font-mono); font-weight: 200; font-size: 9px; letter-spacing: 0.28em; color: var(--bone-faint); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 720px) {
  .ld-bar-nav a:not(.ld-bar-cta) { display: none; }
  .ld-lineage { grid-template-columns: 1fr; text-align: center; }
  .ld-tomb-mark { width: 140px; height: 140px; }
  .ld-lineage-body p { margin-left: auto; margin-right: auto; }
}