/* ─────────────────────────────────────────────────────────────
   AION · every stylesheet witness.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; }
}

/* ══ witness.css ══════════════════════════════════════════ */
/* ============================================================
   witness.css
   The personal astrolabe page. Long-form display of one
   moment's four-layer witness.
   ============================================================ */

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

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--bone); }

/* Cosmos backdrop */
#cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  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>");
}

/* ── Header ──────────────────────────────────────────── */

.witness-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px 32px 14px;
  gap: 16px;
}

.witness-back, .witness-codex {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--bone-dim);
  text-shadow: 0 0 6px rgba(237, 232, 216, 0.18);
  transition: color 0.4s ease, letter-spacing 0.4s ease, text-shadow 0.4s ease;
  white-space: nowrap;
}
.witness-back:hover  { color: var(--gold); letter-spacing: 0.40em; text-shadow: 0 0 10px rgba(212,173,79,0.7); }
.witness-codex { justify-self: end; color: #ff6b5b; text-shadow: 0 0 7px rgba(255,107,91,0.4); }
.witness-codex:hover { color: #ff8d80; letter-spacing: 0.40em; text-shadow: 0 0 12px rgba(255,107,91,0.85); }

.witness-brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 1.2em;
  padding-left: 1.2em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(212, 173, 79, 0.45), 0 0 28px rgba(212, 173, 79, 0.20);
  text-align: center;
}

/* ── Status line (loading / error) ───────────────────── */

.witness-status {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--bone-faint);
}
.witness-status.error {
  color: var(--crimson);
}

/* ── Main content ────────────────────────────────────── */

.witness-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 22px 80px;
}

.witness-svg-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 32px;
  display: grid;
  place-items: center;
}
.witness-svg {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
  /* Float in the cosmos: fade the square's edges into a circle and
     lit it from within — no hard frame. */
  -webkit-mask: radial-gradient(circle, #000 80%, transparent 95%);
          mask: radial-gradient(circle, #000 80%, transparent 95%);
  filter: drop-shadow(0 0 30px rgba(212, 173, 79, 0.14));
}
.witness-svg svg {
  width: 100%;
  height: 100%;
}

/* ── Layer switcher ──────────────────────────────────── */

.layer-switcher {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 18px 0 36px;
  border: 1px solid var(--bone-ghost);
}
.layer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 8px;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--bone-faint);
  border-right: 1px solid var(--bone-ghost);
  transition: color 0.3s ease, background 0.3s ease;
  cursor: pointer;
  text-align: center;
}
.layer-link:last-child { border-right: none; }
.layer-link .layer-glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-soft);
  letter-spacing: 0;
}
.layer-link:hover {
  color: var(--bone);
  background: var(--gold-trace);
}
.layer-link.active {
  color: var(--gold);
  background: var(--gold-glow);
}
.layer-link.active .layer-glyph { color: var(--gold); }

/* ── Metadata table ──────────────────────────────────── */

.witness-meta {
  border-top: 1px solid var(--bone-ghost);
  padding-top: 24px;
}
.meta-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  border-bottom: 1px solid var(--bone-trace);
}
.meta-key { color: var(--bone-faint); }
.meta-val { color: var(--bone); word-break: break-all; }
.meta-val.mono { font-size: 10px; letter-spacing: 0.10em; }
.meta-val.link { color: var(--gold); transition: color 0.3s; }
.meta-val.link:hover { color: var(--ember); }

.witness-supernova {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ember);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid var(--ember);
  background: rgba(255, 122, 61, 0.06);
}

.witness-explainer {
  margin-top: 32px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
}

/* ── Header navigation ────────────────────────────────── */

.witness-nav {
  justify-self: end;
  display: flex;
  align-items: center;   /* the wallet pill is seated here too */
  gap: 18px;
}
.witness-nav a {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--bone-faint);
  transition: color 0.4s ease, letter-spacing 0.4s ease;
  white-space: nowrap;
}
.witness-nav a:hover { color: var(--bone); letter-spacing: 0.40em; }

/* ── Top action bar (sound toggle) ────────────────────── */

.witness-actions-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--bone-ghost);
  background: none;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--bone-faint);
  cursor: pointer;
  transition: all 0.4s ease;
}
.sound-toggle:hover { border-color: var(--gold-soft); color: var(--gold); }
.sound-toggle .sound-icon { font-size: 14px; line-height: 1; }
.sound-toggle .sound-label-on  { display: none; }
.sound-toggle .sound-label-off { display: inline; }
.sound-toggle[data-state="on"] {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-trace);
}
.sound-toggle[data-state="on"] .sound-label-on  { display: inline; }
.sound-toggle[data-state="on"] .sound-label-off { display: none; }
.sound-toggle[data-state="on"] .sound-icon { animation: heart 1.6s ease-in-out infinite; }

/* ── Moment river navigation ───────────────────────────
   Links to the preceded / succeeded moments. Lets the visitor
   walk the river of all witnesses, one at a time. */

.moment-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 26px 0 32px;
}
.moment-nav-prev,
.moment-nav-next {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--bone-ghost);
  font-family: var(--font-mono);
  color: var(--bone-faint);
  transition: all 0.4s ease;
  text-decoration: none;
}
.moment-nav-next { justify-content: flex-end; text-align: right; }
.moment-nav-prev:hover,
.moment-nav-next:hover {
  border-color: var(--gold-soft);
  color: var(--bone);
  background: var(--gold-trace);
}
.moment-nav-prev[hidden],
.moment-nav-next[hidden] { display: none; }
.nav-arrow {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-soft);
  transition: transform 0.4s ease;
}
.moment-nav-prev:hover .nav-arrow { transform: translateX(-3px); }
.moment-nav-next:hover .nav-arrow { transform: translateX(3px); }
.nav-label {
  font-size: 8px;
  letter-spacing: 0.36em;
  color: var(--bone-faint);
  margin-bottom: 4px;
}
.nav-id {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.nav-time {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--bone-dim);
}

/* ── Witness link details ─────────────────────────────── */

.meta-sep { color: var(--bone-faint); }
.link-mute {
  color: var(--bone-faint);
  font-size: 0.86em;
  transition: color 0.3s;
}
.link-mute:hover { color: var(--gold); }

.witness-explainer-tone {
  margin-top: 18px;
  font-style: italic;
  color: var(--bone-faint);
  font-size: 13px;
}

/* ── Address-lookup mode ──────────────────────────────── */

.address-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 22px 80px;
}
.addr-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0.06em;
  color: var(--bone);
  text-align: center;
  margin-bottom: 8px;
}
.addr-title span { color: var(--gold); }
.addr-full {
  display: block;
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--bone-faint);
  text-align: center;
  word-break: break-all;
  margin-bottom: 32px;
}
.addr-count {
  text-align: center;
  margin-bottom: 36px;
}
.addr-count #addrCount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px var(--gold-soft);
}
.addr-count-suffix {
  display: block;
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--bone-faint);
  margin-top: 8px;
}
.addr-list {
  display: grid;
  gap: 10px;
}
.addr-moment {
  display: block;
  padding: 18px 22px;
  border: 1px solid var(--bone-ghost);
  text-decoration: none;
  transition: all 0.4s ease;
}
.addr-moment:hover {
  border-color: var(--gold-soft);
  background: var(--gold-trace);
}
.addr-moment-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.addr-moment-meta {
  display: flex;
  gap: 22px;
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--bone-faint);
}
.addr-moment-flag {
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--ember);
  letter-spacing: 0.06em;
}

@media (max-width: 720px) {
  .moment-nav { grid-template-columns: 1fr; }
  .addr-count #addrCount { font-size: 42px; }
}

/* ── Footer ──────────────────────────────────────────── */

.witness-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 32px 24px 60px;
  border-top: 1px solid var(--bone-trace);
}
.footer-tomb {
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  width: 56px;
  height: 56px;
  opacity: 0.6;
}
.footer-tomb .tomb-mark { width: 100%; height: 100%; }

.footer-text {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 720px) {
  .witness-header { grid-template-columns: auto 1fr; padding: 20px 18px 10px; }
  .witness-codex { display: none; }
  .witness-brand { font-size: 18px; letter-spacing: 0.8em; padding-left: 0.8em; text-align: right; }
  .witness-content { padding: 20px 16px 60px; }
  .meta-row { grid-template-columns: 1fr; gap: 4px; }
  .meta-key { font-size: 9px; }
  .layer-link { font-size: 9px; padding: 12px 4px; }
}

/* ══ witness-v3.css ══════════════════════════════════════════ */
/* ============================================================
   witness-v3.css — the V3 additions to the single-inscription
   page: the declaration (words or sealed capsule) and the
   tribute (the Pilgrimage). Additive; hidden until activated.
   ============================================================ */

/* ── The V3 seal art (in #witnessSVG) ──────────────────── */
#witnessSVG .wv3-seal {
  width: min(74vmin, 420px);
  height: min(74vmin, 420px);
  display: block;
  margin: 0 auto;
  filter:
    drop-shadow(0 0 22px color-mix(in srgb, var(--wv3-glow, #d4ad4f) 50%, transparent))
    drop-shadow(0 0 60px color-mix(in srgb, var(--wv3-glow, #d4ad4f) 24%, transparent));
  animation: wv3-seal-breathe 7s ease-in-out infinite;
}
@keyframes wv3-seal-breathe { 0%,100% { opacity: .92; } 50% { opacity: 1; } }

/* ── When what hangs here is the real plate ──────────────
   `.witness-svg` feathers its edges into a circle and lights it from
   within — cut for the V1 astrolabe, which IS a round medallion floating
   in the void. A plate is not that: it is a square composition with a rim
   and a legend along its foot, and the mask fades exactly those away.
   A plate is framed, not feathered — the same treatment the vitrine gives
   it in the Hall.

   Both rules below outrank `#witnessSVG .wv3-seal` (1,1,0) at (1,2,0), so
   the medallion keeps its 420px circle and the plate fills the frame. */
#witnessSVG.wv3-plate-host {
  -webkit-mask: none;
          mask: none;
  filter: drop-shadow(0 0 44px color-mix(in srgb, var(--wv3-glow, #d4ad4f) 26%, transparent));
}
#witnessSVG.wv3-plate-host .wv3-seal {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  filter: none;                /* the host carries the glow now */
  animation: none;             /* the plate has its own life; a 7s opacity
                                  breathe on top of ~28 SMIL animations is
                                  not a second idea, it is noise */
}

.wv3 {
  max-width: 640px;
  margin: 28px auto 0;
  display: grid;
  gap: 22px;
}
.wv3-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold-soft);
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* ── Declaration ───────────────────────────────────────── */
.wv3-declaration {
  padding: 22px 24px;
  border: 1px solid var(--bone-trace);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}
.wv3-words {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.7;
  color: var(--bone);
  white-space: pre-wrap;
  font-style: italic;
}
.wv3-words { position: relative; overflow: hidden; }
.wv3-words.revealed { animation: wv3-reveal 1.1s cubic-bezier(.2,.8,.2,1); }
@keyframes wv3-reveal { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
/* a sweep of light passes as the declaration emerges */
.wv3-words.revealed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, color-mix(in srgb, var(--wv3-glow, #d4ad4f) 32%, transparent) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: wv3-shimmer 1.2s ease-out 0.15s;
}
@keyframes wv3-shimmer { to { transform: translateX(130%); } }

/* the seal art flares as it breaks */
#witnessSVG.unsealing .wv3-seal { animation: wv3-seal-flare 1s ease; }
@keyframes wv3-seal-flare {
  0%   { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--wv3-glow) 50%, transparent)); }
  40%  { filter: drop-shadow(0 0 60px var(--wv3-glow)) brightness(1.6); transform: scale(1.05); }
  100% { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--wv3-glow) 50%, transparent)); transform: none; }
}

.wv3-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: #6fb4ff; padding: 8px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #6fb4ff 35%, transparent);
  margin-bottom: 14px;
}
.wv3-badge.ready { color: #5fb392; border-color: color-mix(in srgb, #5fb392 40%, transparent); }
.wv3-open-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wv3-secret {
  flex: 1 1 160px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--bone-trace); border-radius: 6px;
  color: var(--bone); font-family: var(--font-mono); font-size: 12px; padding: 9px 12px;
}
.wv3-secret:focus { outline: none; border-color: rgba(212,173,79,0.5); }
.wv3-open-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #ffe9b8; padding: 10px 20px; border: 1px solid rgba(212,173,79,0.5);
  border-radius: 7px; background: var(--gold-trace); cursor: pointer; transition: box-shadow .3s, transform .3s;
}
.wv3-open-btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(212,173,79,0.22); }
.wv3-open-btn[disabled] { opacity: 0.5; cursor: default; }
.wv3-err { color: var(--ember, #ff6b5b); font-family: var(--font-mono); font-size: 10px; margin-top: 8px; }

.wv3-share-btn {
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--wv3-glow, #d4ad4f) 85%, var(--bone));
  padding: 9px 18px; border-radius: 7px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--wv3-glow, #d4ad4f) 45%, var(--bone-trace));
  background: color-mix(in srgb, var(--wv3-glow, #d4ad4f) 8%, transparent);
  transition: box-shadow .3s, transform .3s;
}
.wv3-share-btn:hover { transform: translateY(-1px); box-shadow: 0 0 20px color-mix(in srgb, var(--wv3-glow, #d4ad4f) 28%, transparent); }

/* ── Tribute ───────────────────────────────────────────── */
.wv3-tribute {
  padding: 22px 24px;
  border: 1px solid var(--bone-trace);
  border-radius: 10px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(212,173,79,0.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0));
}
.wv3-tribute-note {
  font-family: var(--font-display); font-weight: 300; font-size: 14px;
  line-height: 1.7; color: var(--bone-dim); margin-bottom: 16px;
}
.wv3-tribute-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wv3-input {
  background: rgba(0,0,0,0.35); border: 1px solid var(--bone-trace); border-radius: 6px;
  color: var(--bone); font-family: var(--font-mono); font-size: 13px; padding: 10px 12px;
}
.wv3-input:focus { outline: none; border-color: rgba(212,173,79,0.5); }
#wv3Amount { width: 96px; }
.wv3-input-note { flex: 1 1 140px; min-width: 120px; }
.wv3-eth { color: var(--gold); font-family: var(--font-mono); font-size: 14px; margin-left: -4px; }
.wv3-btn-light {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff6dd; padding: 11px 22px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(212,173,79,0.6);
  background: radial-gradient(130% 200% at 50% -10%, rgba(212,173,79,0.28), rgba(212,173,79,0.06) 60%, transparent);
  box-shadow: 0 0 24px rgba(212,173,79,0.16), inset 0 0 16px rgba(212,173,79,0.08);
  transition: transform .3s, box-shadow .3s;
}
.wv3-btn-light:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(212,173,79,0.32); }
.wv3-split {
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--bone-faint);
}
/* The invitation to connect, offered before it is needed rather than at the
   instant the visitor presses Light. (O1.) Quiet on purpose: it is an offer,
   not a demand, on a page somebody came to in order to read something. */
.wv3-invite {
  margin: 10px 0 0;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.8;
  color: var(--bone-dim);
}
.wv3-invite b { color: var(--gold, #d4ad4f); font-weight: 400; }
.wv3-invite-link {
  position: relative;
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--gold, #d4ad4f);
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
/* The target grows and the type does not — styles/tokens.css, same rule. */
.wv3-invite-link::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  min-width: 24px; width: 100%;
  min-height: 24px; height: 100%;
  z-index: -1;
}

.wv3-tribute-status { margin-top: 12px; font-family: var(--font-mono); font-size: 10px; line-height: 1.7; color: var(--bone-dim); word-break: break-all; }
.wv3-tribute-status.ok  { color: var(--jade, #5fb392); }
.wv3-tribute-status.err { color: var(--ember, #ff6b5b); }
.wv3-prepared { display: block; margin-top: 8px; padding: 11px 13px; border: 1px dashed var(--bone-trace); border-radius: 7px; color: var(--bone-faint); }
.wv3-prepared b { color: var(--gold-soft); }

/* ══ chrome.css ══════════════════════════════════════════ */
/* ============================================================
   chrome.css
   Top bezel, bottom footer, the four-phase indicator,
   action buttons, and the wallet status pill.
   ============================================================ */

/* ════ BEZEL · top status bar ═══════════════════════════ */

.bezel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-chrome);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  padding:
    max(14px, env(safe-area-inset-top))
    24px
    16px;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--bone-dim);
  pointer-events: none;
}

.bezel > * { pointer-events: auto; }

.bezel-left {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  padding-top: 3px;   /* optical align with the wordmark's cap height */
}
.bezel-nav {
  display: inline-flex;
  gap: 16px;
}
.bezel-nav a {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--bone-dim);
  text-decoration: none;
  text-shadow: 0 0 6px rgba(237, 232, 216, 0.18);
  transition: color 0.4s ease, letter-spacing 0.4s ease, text-shadow 0.4s ease;
}
.bezel-nav a:hover { letter-spacing: 0.40em; }

/* An understated underline draws in from the centre on hover, in
   the link's own colour. Restraint at rest; intent on intent. */
.bezel-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.bezel-nav a:hover::after { transform: scaleX(1); }

/* Each header item carries its own jewel tone — gold, violet,
   crimson — so the chrome reads as a small constellation rather
   than a grey row. Glow intensifies on hover. */
.bezel-nav a[href*="wall"]  { color: #a98bff; text-shadow: 0 0 7px rgba(169, 139, 255, 0.40); }
.bezel-nav a[href*="codex"] { color: #ff6b5b; text-shadow: 0 0 7px rgba(255, 107,  91, 0.40); }
.bezel-nav a[href*="wall"]:hover  { color: #c4b2ff; text-shadow: 0 0 13px rgba(169, 139, 255, 0.85); }
.bezel-nav a[href*="codex"]:hover { color: #ff8d80; text-shadow: 0 0 13px rgba(255, 107,  91, 0.85); }

/* On phones the three-up header has no room for the nav inline, so
   WALL · CODEX drop to a centred line just beneath it — still one
   tap away, never hidden. */
@media (max-width: 720px) {
  .bezel-nav {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    justify-content: center;
    gap: 30px;
  }
}

.chain-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: rgba(212, 173, 79, 0.82);             /* gold — the chain's own tone */
  text-shadow: 0 0 7px rgba(212, 173, 79, 0.32);
}
.chain-status .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold-soft);
  animation: blink 2.4s ease-in-out infinite;
}

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}

.brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.9vw, 30px);
  letter-spacing: 1.2em;
  padding-left: 1.2em; /* compensate for trailing letter-spacing visual centering */
  text-align: center;
  white-space: nowrap;
  position: relative;
  /* A star forged of gold — a moving glint sweeps the letters
     while a soft corona glows around them. */
  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 10px rgba(212, 173, 79, 0.45))
    drop-shadow(0 0 26px rgba(212, 173, 79, 0.22));
  animation: brand-shimmer 7.5s ease-in-out infinite;
}
/* The breathing corona behind the wordmark. */
.brand-block::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 240%;
  height: 220%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(212, 173, 79, 0.16) 0%,
    rgba(212, 173, 79, 0.05) 38%,
    transparent 64%);
  animation: brand-halo 6s ease-in-out infinite;
}

/* A barely-perceptible halo behind the brand. Breathes in
   sympathy with the central seed. */
.brand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 173, 79, 0.10) 0%,
    transparent 50%
  );
  animation: brand-halo 6s ease-in-out infinite;
}

/* ── Wallet pill (right) ─────────────────────────────── */

.wallet-pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 6px;
  border: 1px solid rgba(212, 173, 79, 0.28);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(212, 173, 79, 0.88);             /* gold — the action's tone */
  text-shadow: 0 0 6px rgba(212, 173, 79, 0.30);
  cursor: pointer;
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
  white-space: nowrap;
}
.wallet-pill:hover {
  border-color: var(--bone-faint);
  color: var(--bone);
}
.wallet-pill.connected {
  border-color: var(--gold-soft);
  color: var(--gold);
  background: var(--gold-trace);
}
.wallet-pill.wrong-chain {
  border-color: var(--crimson);
  color: var(--crimson);
}
.wallet-pill .glyph {
  font-size: 11px;
  letter-spacing: 0;
  color: inherit;
}

/* The pill wallet-gate.js brings with it, on pages that have no bezel to
   seat one in. The Gate's own pill is laid out by its grid and never gets
   this class. */
.wg-pill {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 60;
  background: rgba(4, 3, 10, 0.72);
  backdrop-filter: blur(8px);
}
@media (max-width: 720px) {
  .wg-pill { top: 12px; right: 12px; font-size: 9px; padding: 6px 11px 5px; }
}

/* Seated in a page's own header rather than floating over it. */
.wg-pill-inline { justify-self: auto; }
@media (max-width: 720px) {
  .wg-pill-inline { font-size: 9px; padding: 6px 10px 5px; letter-spacing: 0.14em; }
}

/* ════ FOOTER · phases + data + actions ═════════════════ */

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-chrome);
  padding:
    14px
    24px
    max(18px, env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
  text-align: center;
  pointer-events: none;
}
.footer > * { pointer-events: auto; }

/* ── Universal phase indicator
   Four icons, no language. The user's progress through the
   ritual is legible to anyone, regardless of literacy. */
.phases {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  justify-self: center;
}

/* Each phase carries its own colour and breathes on a staggered
   cadence — the four steps of the rite glow in sequence so they
   announce themselves rather than hiding in the dark. */
.phase {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.5;
  animation: phase-breath 5.5s ease-in-out infinite;
  transition: opacity 0.6s ease;
}
.phase[data-phase="wallet"]  { --c: #d4ad4f; animation-delay: 0s;    }  /* gold  */
.phase[data-phase="network"] { --c: #6fb4ff; animation-delay: 0.7s;  }  /* azure */
.phase[data-phase="witness"] { --c: #ff7a3d; animation-delay: 1.4s;  }  /* ember */
.phase[data-phase="eternal"] { --c: #5fb392; animation-delay: 2.1s;  }  /* jade  */

.phase svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--c, var(--bone));
  stroke-width: 1.3;
  filter: drop-shadow(0 0 4px var(--c));
  transition: filter 0.4s ease, transform 0.4s ease;
}

/* The current step burns bright and steady in its own colour. */
.phase.active {
  opacity: 1 !important;
  animation: none;
}
.phase.active svg {
  filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 18px var(--c));
  transform: scale(1.14);
}
.phase.done { opacity: 0.8; animation: none; }

.phase .connector {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bone-faint), transparent);
}

@keyframes phase-breath {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}

/* ── Data strip ──────────────────────────────────────── */

.data-strip {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bone-dim);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  justify-self: center;
}
.data-strip b   { color: var(--bone); font-weight: 400; }
.data-strip .sep { color: var(--bone-ghost); }
.data-strip .key { color: var(--bone-faint); }

/* ════ ACTION BUTTONS ═══════════════════════════════════ */

.action-rail {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--bone-ghost);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--bone);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
}
.action:hover {
  border-color: var(--gold-soft);
  color: var(--gold);
  background: var(--gold-trace);
}

/* The primary action — BEAR WITNESS — is rendered with a
   subtle halo and a column of light descending onto it from
   above on first appearance. The user should feel the action
   has arrived from somewhere higher than the page. */
.action.primary {
  padding: 14px 30px;
  border-color: rgba(212, 173, 79, 0.55);
  color: #ffe9b8;
  text-shadow: 0 0 10px rgba(212, 173, 79, 0.40);
  /* Warm gold fill + a sheen band that sweeps across on hover. */
  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);
  transition:
    background-position 0.9s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease;
}
.action.primary:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 230, 160, 0.92);
  color: #fff6dd;
  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);
}
.action.primary:active { transform: translateY(0) scale(0.99); }
.action.primary::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -180px;
  width: 1px;
  height: 180px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(212, 173, 79, 0.45) 60%,
    rgba(212, 173, 79, 0.95) 100%
  );
  transform-origin: 50% 100%;
  pointer-events: none;
  animation: descend-light 2.2s ease-out 5.0s 1 forwards;
  opacity: 0;
}
.action.primary::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(212, 173, 79, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  animation: ambient-breath 6s ease-in-out infinite;
}
.action.primary:hover {
  border-color: var(--gold);
  background: rgba(212, 173, 79, 0.16);
  letter-spacing: 0.32em;
  box-shadow:
    0 0 32px rgba(212, 173, 79, 0.20),
    inset 0 0 24px rgba(212, 173, 79, 0.08);
}
.action.ghost {
  border-color: var(--bone-trace);
  color: var(--bone-faint);
}
.action[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── Responsive chrome ──────────────────────────────── */

@media (max-width: 720px) {
  .brand       { letter-spacing: 1em; padding-left: 1em; font-size: 17px; }
  .data-strip  { font-size: 9px; letter-spacing: 0.18em; gap: 10px; }
  .phases      { gap: 18px; }
  .phase .connector { width: 14px; }
  .phase svg   { width: 18px; height: 18px; }
  .footer      { padding: 10px 16px max(14px, env(safe-area-inset-bottom)); }
  .bezel       { padding-left: 14px; padding-right: 14px; font-size: 9px; letter-spacing: 0.18em; }
  .wallet-pill { padding: 6px 10px 5px; font-size: 9px; }
  .action      { padding: 11px 18px; font-size: 10px; letter-spacing: 0.22em; }
}
@media (max-width: 380px) {
  .brand       { letter-spacing: 0.7em; padding-left: 0.7em; }
  .phases      { gap: 12px; }
  .data-strip  { gap: 8px; }
}

/* ══ modals.css ══════════════════════════════════════════ */
/* ============================================================
   modals.css
   Modal system. Backdrop blur, rising entrance, scrollable
   bodies, accessible close. Used for: wallet picker, mobile
   prompt, ceremony confirm, witnessing spinner, eternal seal.
   ============================================================ */

.modal-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: veil-in 0.4s ease forwards;
}
.modal-veil.show { display: flex; }

.modal {
  position: relative;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--bone-ghost);
  background: linear-gradient(180deg, rgba(15, 12, 8, 0.96), rgba(0, 0, 0, 0.96));
  padding: 32px 28px;
  text-align: center;
  animation: modal-rise 0.5s cubic-bezier(.2, .8, .2, 1) forwards;
}

.modal h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--bone);
  margin-bottom: 6px;
}
.modal .subtitle {
  font-family: var(--font-cuneiform);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--bone-faint);
  margin-bottom: 24px;
}
.modal .subtitle::before,
.modal .subtitle::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--bone-ghost);
  vertical-align: middle;
  margin: 0 12px;
}
.modal .body {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
  line-height: 1.9;
  margin-bottom: 20px;
}
.modal .body b { color: var(--bone); }
.modal .body a { color: var(--gold); text-decoration: none; }
.modal .body a:hover { text-decoration: underline; }

.modal .actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.modal .close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--bone-faint);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 8px;
  transition: color 0.3s ease;
}
.modal .close:hover { color: var(--bone); }

/* ── Wallet list ─────────────────────────────────────── */

.wallet-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.wallet-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--bone-ghost);
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
  width: 100%;
}
.wallet-option:hover {
  border-color: var(--gold-soft);
  background: var(--gold-trace);
}
.wallet-option img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.wallet-option .wn {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--bone);
  flex: 1;
}
.wallet-option .wm {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--bone-faint);
}
.wallet-option .icon-fallback {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--gold-glow);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ── Ceremony details ────────────────────────────────── */

.ceremony-details {
  display: grid;
  gap: 12px;
  margin: 18px 0 24px;
  padding: 18px;
  border: 1px solid var(--bone-ghost);
  background: var(--gold-trace);
}
.ceremony-details .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.ceremony-details .row .k { color: var(--bone-faint); }
.ceremony-details .row .v { color: var(--bone); font-weight: 400; }
.ceremony-details .row .v.gold {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.14em;
}

/* ── Witnessing spinner — three nested spinning rings ── */

.spinner-block {
  display: grid;
  place-items: center;
  padding: 28px 0;
}
.spinner-rings {
  width: 90px;
  height: 90px;
  position: relative;
}
.spinner-rings svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.spinner-rings .sr-circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-dasharray: 4 8;
  animation: spin 6s linear infinite;
  transform-origin: 50% 50%;
}
.spinner-rings .sr-circle.sr-2 {
  animation-duration: 4s;
  animation-direction: reverse;
  stroke: var(--bone);
  opacity: 0.5;
}
.spinner-rings .sr-circle.sr-3 {
  animation-duration: 3s;
  stroke: var(--ember);
  opacity: 0.6;
}

/* ── Eternal seal ────────────────────────────────────── */

.eternal-seal {
  width: 180px;
  height: 180px;
  margin: 14px auto 36px;
  position: relative;
}
.eternal-seal svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.eternal-seal .moment-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  color: var(--gold);
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px var(--gold-soft);
}
.eternal-seal .moment-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--bone-faint);
  white-space: nowrap;
}

/* ── Mobile prompt — open in MetaMask ────────────────── */

.mm-mobile-block {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--gold-soft);
  background: var(--gold-trace);
  margin: 14px 0 18px;
  text-align: left;
}
.mm-mobile-block .mm-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mm-mobile-block .mm-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.mm-mobile-block .mm-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
  line-height: 1.7;
}
.mm-mobile-block .mm-text b {
  color: var(--bone);
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* ── Toast ──────────────────────────────────────────── */

.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: 12px 20px;
  border: 1px solid var(--crimson);
  background: rgba(60, 10, 10, 0.92);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone);
  max-width: 92vw;
  text-align: center;
  display: none;
  animation: toast-in 0.4s ease forwards;
}
.toast.show { display: block; }
.toast.info {
  border-color: var(--gold-soft);
  background: rgba(40, 30, 10, 0.92);
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 720px) {
  .modal { padding: 26px 22px; }
  .modal h2 { font-size: 19px; }
}

/* ══ tomb.css ══════════════════════════════════════════ */
/* ============================================================
   tomb.css
   The Pasargadae mark. Renders the Tomb of Cyrus silhouette
   as a watermark and as a feature element. The mark itself
   is built by `src/ui/tomb.js` — these rules govern placement.
   ============================================================ */

/* ── Corner watermark ──────────────────────────────────
   Appears bottom-left of the viewport. Minimal, just a
   trace of where AION inherits its lineage from. */

.tomb-watermark {
  position: fixed;
  left: 24px;
  bottom: 18px;
  z-index: var(--z-chrome);
  width: 36px;
  height: 36px;
  opacity: 0;
  pointer-events: none;
  animation: fade 2s ease-out 5.0s forwards;
}
.tomb-watermark .tomb-mark {
  width: 100%;
  height: 100%;
}

/* Subtle inscription beneath the watermark — only on hover
   of a parent or first reveal. Tells the user what they see. */
.tomb-watermark::after {
  content: "PASARGADAE · 540 BCE";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 7px;
  letter-spacing: 0.32em;
  color: var(--bone-ghost);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tomb-watermark:hover::after { opacity: 1; }

@media (max-width: 720px) {
  .tomb-watermark { display: none; }
}

/* ── Tomb in the eternal seal modal ────────────────────
   When a witness is sealed, the tomb appears beside the
   moment number — the user is now in the same lineage. */

.eternal-tomb {
  display: grid;
  place-items: center;
  margin: 18px auto 6px;
  width: 56px;
  height: 56px;
  opacity: 0.7;
}
.eternal-tomb .tomb-mark {
  width: 100%;
  height: 100%;
}
.eternal-tomb-caption {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 8px;
  letter-spacing: 0.36em;
  color: var(--bone-faint);
  text-align: center;
  margin-bottom: 18px;
}

/* ── Reduced motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tomb-watermark { animation: none !important; opacity: 0.5; }
}

/* ══ firstrun.css ══════════════════════════════════════════ */
/* ============================================================
   firstrun.css
   The first-visit guide — three cards that point at what they
   are talking about. Built by src/ui/firstrun.js.

   It has to belong to this site, not to a tour library: gold on
   void, hand-set mono for the labels, Cormorant for the words.
   A generic blue tooltip on this page would read as an advert
   somebody else injected.
   ============================================================ */

.fr-root {
  position: fixed;
  inset: 0;
  z-index: 900;         /* over the instrument, under toast (200 is page-level) */
  pointer-events: none; /* only the card and the veil take clicks */
}

/* A veil, not a blackout. The page is the subject; the card is a note in the
   margin of it, and a visitor should be able to see what is being pointed at. */
.fr-veil {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: radial-gradient(circle at 50% 45%,
    rgba(2, 2, 8, 0.30) 0%, rgba(2, 2, 8, 0.62) 70%);
  backdrop-filter: blur(1.5px);
  animation: fr-fade 0.6s ease both;
}

.fr-card {
  position: absolute;
  pointer-events: auto;
  width: min(340px, calc(100vw - 28px));
  padding: 20px 22px 16px;
  background: linear-gradient(180deg, rgba(10, 8, 18, 0.97), rgba(5, 4, 12, 0.97));
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: 3px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7),
              0 0 40px color-mix(in srgb, var(--gold) 10%, transparent);
  animation: fr-rise 0.5s cubic-bezier(.22, 1, .36, 1) both;
}

.fr-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.fr-dot {
  width: 18px; height: 2px;
  background: var(--bone-ghost);
  transition: background 0.4s ease;
}
.fr-dot.on { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }

.fr-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow: 0 0 14px var(--gold-glow);
}

.fr-body {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--bone-dim);
}

.fr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.fr-skip, .fr-next {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.fr-skip {
  background: none;
  border: 0;
  padding: 8px 2px;
  color: var(--bone-faint);
}
.fr-skip:hover { color: var(--bone-dim); }

.fr-next {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 2px;
  padding: 9px 18px 8px;
  color: var(--gold);
}
.fr-next:hover {
  border-color: var(--gold-soft);
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 20%, transparent);
}

/* What the card is pointing at. A ring, not a spotlight cut out of an overlay:
   the element keeps its own appearance and simply gains a mark. */
.fr-lit {
  position: relative;
  z-index: 901;
  outline: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  outline-offset: 6px;
  border-radius: 3px;
  animation: fr-pulse 2.4s ease-in-out infinite;
}

@keyframes fr-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes fr-rise {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}
@keyframes fr-pulse {
  0%, 100% { outline-color: color-mix(in srgb, var(--gold) 30%, transparent) }
  50%      { outline-color: color-mix(in srgb, var(--gold) 75%, transparent) }
}

/* Stillness when it is asked for: the cards remain, the movement does not. */
.fr-root.fr-still .fr-veil,
.fr-root.fr-still .fr-card { animation: none; }
.fr-root.fr-still .fr-lit  { animation: none; outline-color: var(--gold-soft); }

@media (prefers-reduced-motion: reduce) {
  .fr-veil, .fr-card, .fr-lit { animation: none !important; }
}

/* On a phone the card sits at the bottom, where a thumb is. */
@media (max-width: 700px) {
  .fr-card { width: calc(100vw - 24px); padding: 18px 18px 14px; }
  .fr-title { font-size: 18px; }
  .fr-body { font-size: 14.5px; }
}