@layer reset, base, theme, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    font-style: normal;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  img,
  svg,
  canvas {
    display: block;
    max-inline-size: 100%;
  }

  button,
  input {
    font: inherit;
    color: inherit;
    font-style: normal;
  }
}

@layer theme {
  :root {
    color-scheme: light;

    /* Pure Gallery White Sanctuary & Deep Nocturnal Midnight Navy Palette */
    --bg-white: #ffffff;
    --bg-ivory: #fcfcfb;
    --bg-cream: #f6f3ec;
    --bg-parchment: #ede7da;
    --bg-midnight-zenith: #070c18;
    --bg-midnight-mid: #0d1628;
    --bg-midnight-horizon: #142038;
    --surface-sheet: rgba(255, 255, 255, 0.97);
    --surface-pill: rgba(255, 255, 255, 0.92);
    --surface-card: #ffffff;

    /* High-Contrast Accessible Ink & Quattrocento Bronze Accents */
    --ink-primary: #14161b;
    --ink-secondary: #343741;
    --ink-muted: #555966;
    --accent-bronze: #7f5d2b;
    --accent-gold-soft: rgba(164, 126, 66, 0.26);
    --accent-terracotta: #9e4329;
    --accent-ultramarine: #224472;

    /* Hairlines & Elevation */
    --border-hairline: rgba(20, 22, 27, 0.12);
    --border-strong: rgba(20, 22, 27, 0.24);
    --shadow-soft: 0 10px 30px rgba(16, 18, 24, 0.07);
    --shadow-sheet: -18px 0 56px rgba(10, 14, 24, 0.16);

    /* Authentic Quattrocento Plate Aspect Ratio (848 × 1264 — zero side clipping!) */
    --card-aspect: 848 / 1264;

    /* Unified Architectural Drafting Frame Tokens (100% identical size across Hero, Story & Footer!) */
    --frame-inline-inset: clamp(1.6rem, 2.8vw, 2.65rem);
    --frame-top-inset: 4.35rem;
    --frame-bottom-inset: 3.65rem;
    --frame-star-size: 0.68rem;

    /* Strictly Faculty Glyphic (Titles & UI) + Gilda Display (Body & Prose) — Zero Sans, Zero Italics */
    --font-glyphic: "Faculty Glyphic", Georgia, "Times New Roman", serif;
    --font-display: "Gilda Display", Georgia, "Times New Roman", serif;

    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  }
}

@layer base {
  html,
  body {
    min-block-size: 100%;
    background-color: var(--bg-white);
    color: var(--ink-primary);
    font-family: var(--font-display);
    font-style: normal;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  em,
  i,
  cite,
  blockquote {
    font-style: normal;
  }

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

@layer layout {
  /* Pure Crisp Gallery White Backdrop (elevated cleanly behind Top-Layer Reading Sheet when a card is focused!) */
  .webgl-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #ffffff;
    pointer-events: none;
  }

  body:has(#reading-dialog[open]) .webgl-backdrop {
    z-index: 30;
  }

  #tarot-canvas {
    inline-size: 100%;
    block-size: 100%;
    touch-action: pan-y;
    pointer-events: auto;
  }

  .page-flow {
    position: relative;
    z-index: 2;
    pointer-events: none;
  }

  .hero-stage-section {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    place-items: center;
    pointer-events: none;
  }

  /* Precision 1px Architectural Drafting Frame — Unified Width & Corner Star Size */
  .architectural-grid-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .arch-rule {
    position: absolute;
    background: rgba(139, 104, 52, 0.16);
  }

  .arch-rule--top {
    inset-block-start: var(--frame-top-inset);
    inset-inline: 0;
    block-size: 1px;
  }

  .arch-rule--bottom {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline: 0;
    block-size: 1px;
  }

  .arch-rule--left {
    inset-inline-start: var(--frame-inline-inset);
    inset-block: 0;
    inline-size: 1px;
  }

  .arch-rule--right {
    inset-inline-end: var(--frame-inline-inset);
    inset-block: 0;
    inline-size: 1px;
  }

  .arch-star {
    position: absolute;
    font-family: var(--font-glyphic);
    font-size: var(--frame-star-size);
    line-height: 1;
    color: rgba(139, 104, 52, 0.56);
  }

  .arch-star--tl {
    inset-block-start: var(--frame-top-inset);
    inset-inline-start: var(--frame-inline-inset);
    transform: translate(-50%, -50%);
  }

  .arch-star--tr {
    inset-block-start: var(--frame-top-inset);
    inset-inline-end: var(--frame-inline-inset);
    transform: translate(50%, -50%);
  }

  .arch-star--bl {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline-start: var(--frame-inline-inset);
    transform: translate(-50%, 50%);
  }

  .arch-star--br {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline-end: var(--frame-inline-inset);
    transform: translate(50%, 50%);
  }

  .hero-center-crest {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding-inline: 1.5rem;
  }

  .hero-center-subline {
    margin-block-start: clamp(4.6rem, 6.4vw, 5.4rem);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(0.82rem, 0.94vw, 0.92rem);
    line-height: 1.58;
    letter-spacing: 0.012em;
    color: #7c818d;
    text-align: center;
    max-inline-size: 62ch;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .hero-center-subline[data-hidden="true"] {
    opacity: 0;
    transform: translateY(-6px);
  }

  /* ==========================================================================
     SECTION 2: FULL-BLEED 3D DIORAMA CHRONICLE (UNCLIPPED HALO & WCAG AAA)
     ========================================================================== */
  .story-diorama-track {
    position: relative;
    block-size: 820svh;
    pointer-events: none;
    z-index: 2;
  }

  .story-sticky-viewport {
    --chronicle-ink: #111318;
    --chronicle-sub: #252830;
    --chronicle-muted: #454a56;
    --chronicle-hairline: rgba(20, 22, 27, 0.12);
    --chronicle-star: #14161b;
    --chronicle-pill-bg: rgba(20, 22, 27, 0.08);
    --chronicle-pill-fg: #111318;
    --chronicle-chip-bg: rgba(255, 255, 255, 0.94);
    --chronicle-chip-border: rgba(20, 22, 27, 0.18);
    --chronicle-chip-active-bg: #14161b;
    --chronicle-chip-active-fg: #ffffff;

    /* Zero white wash over WebGL on light chapters so 3D illustrations & cards stay 100% crisp and vibrant! */
    --chronicle-halo-left: none;
    --chronicle-halo-right: none;
    --chronicle-bottom-scrim: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0) 100%
    );

    position: sticky;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100svh;
    overflow: clip;
    z-index: 3;
    pointer-events: none;
    color: var(--chronicle-ink);
    transition: color 0.36s ease, opacity 0.32s ease;
  }

  /* Deep Nocturnal Midnight Navy Adaptive Ink (WCAG AAA > 10:1 Contrast) */
  .story-sticky-viewport[data-sky-tone="dark"] {
    --chronicle-ink: #fbfaf6;
    --chronicle-sub: #eeeae0;
    --chronicle-muted: #dbd3c2;
    --chronicle-hairline: rgba(246, 242, 232, 0.18);
    --chronicle-star: #ebd8ae;
    --chronicle-pill-bg: rgba(251, 250, 246, 0.16);
    --chronicle-pill-fg: #fbfaf6;
    --chronicle-chip-bg: rgba(8, 14, 28, 0.84);
    --chronicle-chip-border: rgba(246, 242, 232, 0.3);
    --chronicle-chip-active-bg: #fbfaf6;
    --chronicle-chip-active-fg: #0a1222;
    --chronicle-halo-left: radial-gradient(
      ellipse 44% 36% at 22% 84%,
      rgba(7, 12, 24, 0.46) 0%,
      rgba(8, 14, 28, 0.24) 48%,
      rgba(13, 22, 40, 0) 100%
    );
    --chronicle-halo-right: radial-gradient(
      ellipse 44% 36% at 78% 84%,
      rgba(7, 12, 24, 0.46) 0%,
      rgba(8, 14, 28, 0.24) 48%,
      rgba(13, 22, 40, 0) 100%
    );
    --chronicle-bottom-scrim: linear-gradient(
      0deg,
      rgba(7, 12, 24, 0.62) 0%,
      rgba(9, 15, 30, 0) 100%
    );
  }

  .story-sticky-viewport[data-hud-hidden="true"] {
    opacity: 0;
  }

  .story-sticky-viewport[data-hud-hidden="true"] .chronicle-tick-list,
  .story-sticky-viewport[data-hud-hidden="true"] .chronicle-motif-chips {
    pointer-events: none;
  }

  /* Full-bleed 100% × 100% container synced with --prose-alpha so it NEVER shows a sharp ring! */
  .chronicle-legibility-halo {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    background: var(--chronicle-halo-left);
    opacity: var(--prose-alpha, 1);
    pointer-events: none;
    z-index: 0;
    will-change: opacity;
  }

  .chronicle-legibility-halo[data-align="right"] {
    background: var(--chronicle-halo-right);
  }

  .chronicle-bottom-scrim {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 4.2rem;
    background: var(--chronicle-bottom-scrim);
    opacity: var(--prose-alpha, 1);
    pointer-events: none;
    z-index: 0;
  }

  .chronicle-grid-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .c-rule {
    position: absolute;
    background: var(--chronicle-hairline);
    transition: background-color 0.36s ease;
  }

  .c-rule--top {
    inset-block-start: var(--frame-top-inset);
    inset-inline: 0;
    block-size: 1px;
  }

  .c-rule--bottom {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline: 0;
    block-size: 1px;
  }

  .c-rule--left {
    inset-inline-start: var(--frame-inline-inset);
    inset-block: 0;
    inline-size: 1px;
  }

  .c-rule--right {
    inset-inline-end: var(--frame-inline-inset);
    inset-block: 0;
    inline-size: 1px;
  }

  .c-star {
    position: absolute;
    font-family: var(--font-glyphic);
    font-size: var(--frame-star-size);
    line-height: 1;
    color: var(--chronicle-star);
    transition: color 0.36s ease;
  }

  .c-star--tl {
    inset-block-start: var(--frame-top-inset);
    inset-inline-start: var(--frame-inline-inset);
    transform: translate(-50%, -50%);
  }

  .c-star--tr {
    inset-block-start: var(--frame-top-inset);
    inset-inline-end: var(--frame-inline-inset);
    transform: translate(50%, -50%);
  }

  .c-star--bl {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline-start: var(--frame-inline-inset);
    transform: translate(-50%, 50%);
  }

  .c-star--br {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline-end: var(--frame-inline-inset);
    transform: translate(50%, 50%);
  }

  /* Left-Margin Architectural Tick-Mark Index */
  .chronicle-margin-index {
    position: absolute;
    inset-inline-start: calc(var(--frame-inline-inset) + 0.85rem);
    inset-block-start: 5.5rem;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    pointer-events: auto;
  }

  .margin-index-header {
    font-family: var(--font-glyphic);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--chronicle-muted);
    padding-inline-start: 1.35rem;
  }

  .chronicle-tick-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
  }

  .tick-item {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-block-size: 1.55rem;
    padding: 0.12rem 0.45rem 0.12rem 0;
    border: 0;
    background: transparent;
    color: var(--chronicle-muted);
    font-family: var(--font-glyphic);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .tick-line {
    display: inline-block;
    inline-size: 0.7rem;
    block-size: 1px;
    background: currentColor;
    opacity: 0.65;
    transition: inline-size 0.26s var(--ease-out-expo), opacity 0.24s ease;
  }

  .tick-label {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
  }

  .tick-item:hover,
  .tick-item:focus-visible,
  .tick-item[aria-current="step"] {
    color: var(--chronicle-ink);
  }

  .tick-item[aria-current="step"] .tick-line {
    inline-size: 1.3rem;
    opacity: 1;
  }

  .tick-item:hover .tick-label,
  .tick-item:focus-visible .tick-label,
  .tick-item[aria-current="step"] .tick-label {
    opacity: 0.96;
    transform: translateX(0);
  }

  /* GPU WebGL Dense Wind-Particle Text Disintegration Canvas */
  .sparkle-text-canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 4;
    pointer-events: none;
  }

  /* Lower-Lane Editorial Stage: strictly on the SAME side below the 3 Featured Tarot Cards! */
  .chronicle-editorial-stage {
    position: absolute;
    inset-inline-start: clamp(3.6rem, 6.2vw, 6.4rem);
    inset-block-end: clamp(4.7rem, 8vh, 6.5rem);
    z-index: 3;
    inline-size: min(44rem, 46%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 0.68rem;
    pointer-events: none;
  }

  .chronicle-editorial-stage[data-align="right"] {
    inset-inline-start: auto;
    inset-inline-end: clamp(3.2rem, 5.8vw, 6rem);
    align-items: flex-start;
    text-align: start;
  }

  .chronicle-eyebrow {
    font-family: var(--font-glyphic);
    font-size: 0.7rem;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--chronicle-muted);
    opacity: var(--prose-alpha, 1);
    transform: translate3d(0, var(--prose-y, 0px), 0);
    will-change: transform, opacity;
  }

  .chronicle-headline {
    font-family: var(--font-glyphic);
    font-weight: 400;
    font-size: clamp(1.82rem, 2.55vw, 2.58rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--chronicle-ink);
    max-inline-size: none;
    inline-size: fit-content;
    padding-inline-end: 0.35em;
    padding-block: 0.06em;
    will-change: mask-image, opacity;
  }

  .chronicle-line {
    display: block;
  }

  .chronicle-prose {
    font-family: var(--font-display);
    font-size: clamp(1.04rem, 1.2vw, 1.18rem);
    line-height: 1.58;
    color: var(--chronicle-sub);
    max-inline-size: 44ch;
    opacity: var(--prose-alpha, 1);
    transform: translate3d(0, var(--prose-y, 0px), 0);
    will-change: transform, opacity;
  }

  /* Bottom Architectural Strip */
  .chronicle-bottom-bar {
    position: absolute;
    inset-inline: calc(var(--frame-inline-inset) + 0.65rem);
    inset-block-end: 0.68rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 2.45rem;
    pointer-events: none;
  }

  .chronicle-bottom-meta {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.72rem;
    opacity: var(--prose-alpha, 1);
    transform: translate3d(0, calc(var(--prose-y, 0px) * 0.45), 0);
    will-change: transform, opacity;
  }

  .chronicle-pill-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.66rem;
    border-radius: 0.24rem;
    background: var(--chronicle-pill-bg);
    color: var(--chronicle-pill-fg);
    font-family: var(--font-glyphic);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .chronicle-bottom-note {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 0.9vw, 0.88rem);
    color: var(--chronicle-sub);
    white-space: nowrap;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: none;
  }

  .chronicle-motif-chips {
    pointer-events: auto;
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.36rem;
  }

  .motif-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-block-size: 1.88rem;
    padding: 0.24rem 0.72rem;
    border-radius: 999px;
    border: 1px solid var(--chronicle-chip-border);
    background: var(--chronicle-chip-bg);
    backdrop-filter: blur(10px);
    color: var(--chronicle-ink);
    font-family: var(--font-glyphic);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .motif-chip-btn:hover,
  .motif-chip-btn:focus-visible,
  .motif-chip-btn[data-active="true"] {
    background: var(--chronicle-chip-active-bg);
    border-color: var(--chronicle-chip-active-bg);
    color: var(--chronicle-chip-active-fg);
    transform: translateY(-1px);
  }

  /* ==========================================================================
     SECTION 3: PICK THREE CARDS ORACLE (EMERGING SEAMLESSLY FROM PURE WHITE)
     ========================================================================== */
  .three-card-section {
    pointer-events: auto;
    position: relative;
    z-index: 3;
    margin-block-start: -30svh;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      #ffffff 3.2rem,
      #ffffff 72%,
      #f8f6f0 100%
    );
    padding-block: clamp(4rem, 5.4vw, 4.9rem) clamp(3.6rem, 5vw, 4.5rem);
  }

  /* Upper Architectural Drafting Rectangle — Left & Right Bars Connect Continuously to Footer */
  .oracle-grid-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .o-rule {
    position: absolute;
    background: rgba(139, 104, 52, 0.18);
  }

  .o-rule--top {
    inset-block-start: 2.4rem;
    inset-inline: 0;
    block-size: 1px;
  }

  .o-rule--bottom {
    inset-block-end: 1.5rem;
    inset-inline: 0;
    block-size: 1px;
  }

  .o-rule--left {
    inset-inline-start: var(--frame-inline-inset);
    inset-block: 0;
    inline-size: 1px;
  }

  .o-rule--right {
    inset-inline-end: var(--frame-inline-inset);
    inset-block: 0;
    inline-size: 1px;
  }

  .o-star {
    position: absolute;
    font-family: var(--font-glyphic);
    font-size: var(--frame-star-size);
    line-height: 1;
    color: rgba(139, 104, 52, 0.58);
  }

  .o-star--tl {
    inset-block-start: 2.4rem;
    inset-inline-start: var(--frame-inline-inset);
    transform: translate(-50%, -50%);
  }

  .o-star--tr {
    inset-block-start: 2.4rem;
    inset-inline-end: var(--frame-inline-inset);
    transform: translate(50%, -50%);
  }

  .o-star--bl {
    inset-block-end: 1.5rem;
    inset-inline-start: var(--frame-inline-inset);
    transform: translate(-50%, 50%);
  }

  .o-star--br {
    inset-block-end: 1.5rem;
    inset-inline-end: var(--frame-inline-inset);
    transform: translate(50%, 50%);
  }

  .section-shell {
    position: relative;
    z-index: 2;
    max-inline-size: min(88rem, calc(100% - (var(--frame-inline-inset) * 2) - 2.5rem));
    margin-inline: auto;
    padding-inline: clamp(0.75rem, 1.6vw, 1.5rem);
  }

  .section-eyebrow {
    display: inline-block;
    font-family: var(--font-glyphic);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-bronze);
    margin-block-end: 0.75rem;
  }

  .section-heading {
    font-family: var(--font-glyphic);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.2vw, 3.35rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--ink-primary);
    text-wrap: balance;
  }

  .section-lead {
    margin-block-start: 1rem;
    max-inline-size: 60ch;
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.4vw, 1.24rem);
    line-height: 1.62;
    color: var(--ink-secondary);
  }

  /* ==========================================================================
     VELVETY CELESTIAL TWILIGHT SEGUE INTO MIDNIGHT NAVY SANCTUARY FOOTER
     (Tall 58vh multi-stop sapphire-indigo easing — ZERO sharp band, ZERO grey!)
     ========================================================================== */
  .particle-glitter-threshold {
    position: relative;
    inline-size: 100%;
    block-size: clamp(9rem, 18vh, 12.5rem);
    pointer-events: none;
    overflow: clip;
    z-index: 3;
  }

  .particle-glitter-threshold--to-dark {
    background: linear-gradient(
      180deg,
      #f8f6f0 0%,
      #f2efe8 8%,
      #e2e0e2 18%,
      #c6ccdc 30%,
      #96a5c4 44%,
      #5f739f 58%,
      #344976 71%,
      #1b2c51 83%,
      #0e1930 93%,
      #0a1120 100%
    );
    background: linear-gradient(
      in oklab 180deg,
      #f8f6f0 0%,
      #f2efe8 8%,
      #e2e0e3 18%,
      #c6ccdd 30%,
      #95a5c6 44%,
      #5e73a0 58%,
      #334875 71%,
      #1a2b50 83%,
      #0e182f 93%,
      #0a1120 100%
    );
  }

  .threshold-glitter-canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    z-index: 1;
  }

  /* Continuous Left & Right Architectural Frame Rails Bridging Upper Rectangle -> Midnight Footer */
  .threshold-grid-rails {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }

  .t-rule {
    position: absolute;
    inset-block: 0;
    inline-size: 1px;
    background: linear-gradient(
      180deg,
      rgba(139, 104, 52, 0.18) 0%,
      rgba(182, 148, 92, 0.19) 52%,
      rgba(212, 182, 126, 0.2) 100%
    );
  }

  .t-rule--left {
    inset-inline-start: var(--frame-inline-inset);
  }

  .t-rule--right {
    inset-inline-end: var(--frame-inline-inset);
  }
}

@layer components {
  .skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: var(--ink-primary);
    color: var(--bg-white);
    font-family: var(--font-glyphic);
    text-decoration: none;
    font-size: 0.8rem;
    transform: translateY(-200%);
    transition: transform 0.2s ease;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  /* Pure White Loading Veil */
  .loading-veil {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    background: #ffffff;
    transition: opacity 0.6s var(--ease-out-expo), visibility 0.6s;
  }

  .loading-veil[data-loaded="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .loading-inner {
    text-align: center;
    padding: 2rem;
    max-inline-size: 24rem;
  }

  .loading-title {
    font-family: var(--font-glyphic);
    font-size: clamp(1.85rem, 3.6vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--ink-primary);
  }

  .loading-bar-track {
    margin-block: 1.25rem 0.75rem;
    inline-size: 14rem;
    block-size: 2px;
    margin-inline: auto;
    background: rgba(20, 22, 27, 0.1);
    border-radius: 999px;
    overflow: hidden;
  }

  .loading-bar-fill {
    inline-size: 12%;
    block-size: 100%;
    background: var(--accent-bronze);
    transition: inline-size 0.22s ease;
  }

  /* Top Floating Exhibition Bar */
  .top-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem clamp(1rem, 2.6vw, 2rem);
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  body:has(#reading-dialog[open]) .top-bar {
    opacity: 0;
    pointer-events: none;
  }

  body:has(#reading-dialog[open]) .top-bar .bar-cluster {
    pointer-events: none;
  }

  .bar-cluster {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
  }

  .bar-cluster--start {
    justify-self: start;
  }

  .bar-cluster--center {
    justify-self: center;
  }

  .bar-cluster--end {
    justify-self: end;
  }

  .pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-block-size: 2.32rem;
    padding: 0.4rem 0.96rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: var(--surface-pill);
    backdrop-filter: blur(14px);
    color: var(--ink-primary);
    font-family: var(--font-glyphic);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
  }

  .pill-btn:hover {
    border-color: var(--border-strong);
    background: #ffffff;
  }

  .pill-btn:active {
    transform: scale(0.98);
  }

  .pill-btn--primary {
    background: var(--ink-primary);
    border-color: var(--ink-primary);
    color: #ffffff;
  }

  .pill-btn--primary:hover {
    background: #252833;
    border-color: #252833;
    color: #ffffff;
  }

  .back-diamond-icon {
    inline-size: 0.68rem;
    block-size: 1.01rem;
    border-radius: 2px;
    border: 1px solid rgba(139, 104, 52, 0.55);
    background:
      linear-gradient(135deg, #b84b31 25%, transparent 25%) -3px 0 / 6px 6px,
      linear-gradient(225deg, #b84b31 25%, transparent 25%) -3px 0 / 6px 6px,
      linear-gradient(315deg, #b84b31 25%, transparent 25%) 0 0 / 6px 6px,
      linear-gradient(45deg, #b84b31 25%, #2f6690 25%) 0 0 / 6px 6px;
  }

  .sound-dot {
    font-size: 0.72rem;
    color: var(--ink-muted);
    transition: color 0.2s ease, transform 0.3s ease;
  }

  #btn-sound[aria-pressed="true"] .sound-dot {
    color: var(--accent-terracotta);
    transform: rotate(45deg) scale(1.18);
  }

  .music-glyph {
    font-size: 0.84rem;
    color: var(--ink-muted);
    transition: color 0.2s ease, transform 0.3s ease;
  }

  #btn-music[aria-pressed="true"] {
    border-color: rgba(127, 93, 43, 0.45);
    background: #ffffff;
  }

  #btn-music[aria-pressed="true"] .music-glyph {
    color: var(--accent-bronze);
    transform: scale(1.12);
  }

  .mode-pills {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: var(--surface-pill);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
  }

  .mode-pill {
    min-block-size: 1.92rem;
    padding: 0.28rem 0.9rem;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--ink-secondary);
    font-family: var(--font-glyphic);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.22s ease, color 0.22s ease;
  }

  .mode-pill[aria-current="true"] {
    background: var(--ink-primary);
    color: #ffffff;
  }

  /* ==========================================================================
     HERO SANCTUARY 3-COLUMN BOTTOM DOCK (SECOND-VERSION SPATIAL & SUIT CONTROLS)
     ========================================================================== */
  .hero-spread-banner {
    position: absolute;
    inset-block-start: 4.8rem;
    inset-inline: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
    pointer-events: none;
  }

  .hero-spread-eyebrow {
    font-family: var(--font-glyphic);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-bronze);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
  }

  .hero-spread-slots-row {
    display: flex;
    gap: clamp(3rem, 11vw, 9.5rem);
    font-family: var(--font-glyphic);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-secondary);
  }

  .stage-hud {
    position: absolute;
    inset-block-end: 1.05rem;
    inset-inline: clamp(1.25rem, 2.8vw, 2.4rem);
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 0.85rem;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .stage-hud[data-hidden="true"] {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }

  .hero-bottom-left {
    justify-self: start;
    pointer-events: auto;
  }

  .hero-center-dock {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
  }

  .hero-bottom-right {
    justify-self: end;
    pointer-events: auto;
  }

  .stage-hud[data-hidden="true"] .hero-bottom-left,
  .stage-hud[data-hidden="true"] .hero-center-dock,
  .stage-hud[data-hidden="true"] .hero-bottom-right {
    pointer-events: none;
  }

  .spatial-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
  }

  .control-cluster {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
  }

  .spatial-pill,
  .suit-pill {
    min-block-size: 1.82rem;
    padding: 0.24rem 0.72rem;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--ink-secondary);
    font-family: var(--font-glyphic);
    font-size: 0.71rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .spatial-pill:hover,
  .suit-pill:hover {
    color: var(--ink-primary);
  }

  .spatial-pill[aria-pressed="true"],
  .suit-pill[aria-pressed="true"] {
    background: var(--ink-primary);
    color: #ffffff;
  }

  .scroll-cue-link {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.22rem 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    font-family: var(--font-glyphic);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .scroll-cue-link:hover {
    color: var(--accent-bronze);
    transform: translateY(1px);
  }

  .carousel-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.24rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft);
  }

  .carousel-step-btn {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 999px;
    border: 0;
    background: var(--bg-cream);
    color: var(--ink-primary);
    font-family: var(--font-glyphic);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }

  .carousel-status-label {
    font-family: var(--font-glyphic);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    padding-inline: 0.3rem;
  }

  .oracle-stack-card {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: start;
  }

  .oracle-stack-layer {
    position: absolute;
    inset: 3px -3px -3px 3px;
    border-radius: 0.75rem;
    border: 1px solid rgba(127, 93, 43, 0.22);
    background: rgba(246, 243, 236, 0.9);
    pointer-events: none;
  }

  .oracle-stack-body {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.38rem 0.85rem 0.38rem 0.42rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-hairline);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft);
    transition: transform 0.22s var(--ease-out-expo), border-color 0.2s ease;
  }

  .oracle-stack-card:hover .oracle-stack-body {
    transform: translateY(-2px);
    border-color: rgba(127, 93, 43, 0.45);
  }

  .oracle-mini-thumb {
    inline-size: 2.35rem;
    aspect-ratio: var(--card-aspect);
    height: auto;
    border-radius: 0.26rem;
    object-fit: cover;
    border: 1px solid rgba(127, 93, 43, 0.32);
  }

  .oracle-stack-copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
  }

  .oracle-eyebrow {
    font-family: var(--font-glyphic);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-bronze);
  }

  .oracle-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--ink-primary);
  }

  /* Hover Floating Card Name Pill */
  .hover-label {
    position: fixed;
    z-index: 35;
    pointer-events: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.36rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
    transform: translate(-50%, calc(-100% - 14px));
    white-space: nowrap;
  }

  .hover-numeral {
    font-family: var(--font-glyphic);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-bronze);
  }

  .hover-name {
    font-family: var(--font-display);
    font-size: 0.98rem;
    color: var(--ink-primary);
  }

  /* ==========================================================================
     ZERO-GLITCH THREE-CARD ORACLE FAN RIBBON (EXACT 848:1264 CARD ASPECT)
     ========================================================================== */
  .spread-header {
    text-align: center;
    margin-block-end: 2.2rem;
  }

  .spread-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-inline-size: 56rem;
    margin-inline: auto;
    margin-block-end: 1.5rem;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-soft);
  }

  .spread-progress {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--ink-secondary);
    padding-inline-start: 0.35rem;
  }

  .spread-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .fan-deck-stage {
    margin-block: 1.2rem 2.9rem;
    padding-block: 2.3rem 1.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .fan-deck-ribbon {
    list-style: none;
    padding: 0.9rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: max-content;
    margin-inline: auto;
  }

  /* CRITICAL ANTI-GLITCH RULE:
     Keep <li> 100% untransformed so layout centers never oscillate under pointermove! */
  .fan-card-item {
    position: relative;
    inline-size: 5.15rem;
    margin-inline: -1.42rem;
    transform: none;
    z-index: calc(10 + var(--wave-z, 0));
    transition:
      inline-size 0.42s var(--ease-out-expo),
      margin-inline 0.42s var(--ease-out-expo),
      opacity 0.32s ease;
  }

  .fan-card-item.is-drawn {
    inline-size: 0;
    margin-inline: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* All fan curve + smooth 60fps wave lift transforms live strictly on the inner button */
  .fan-card-btn {
    position: relative;
    display: block;
    inline-size: 5.15rem;
    aspect-ratio: var(--card-aspect);
    padding: 0;
    border-radius: 0.42rem;
    border: 1px solid rgba(139, 104, 52, 0.34);
    background: #dfd5c2;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(18, 15, 11, 0.14);
    transform-origin: 50% 92%;
    transform:
      translate3d(var(--wave-spread, 0px), calc(var(--fan-y, 0px) - var(--wave-lift, 0px)), 0)
      rotate(calc(var(--fan-rot, 0deg) + var(--wave-tilt, 0deg)))
      scale(var(--wave-scale, 1));
    transition:
      box-shadow 0.22s ease,
      border-color 0.22s ease;
    will-change: transform;
  }

  .fan-card-btn:focus-visible {
    border-color: var(--accent-bronze);
    box-shadow: 0 18px 34px rgba(139, 104, 52, 0.28);
  }

  .fan-card-btn img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  #btn-reset-spread.is-shuffling {
    border-color: var(--accent-bronze);
    background: var(--bg-cream);
    color: var(--accent-bronze);
    transform: scale(0.97);
  }

  .fan-deck-ribbon.is-shuffling {
    pointer-events: none;
  }

  .fan-deck-ribbon.is-shuffling .fan-card-btn {
    animation: fanDeckShuffleChoreography 0.78s var(--ease-out-expo) both;
    animation-delay: var(--riffle-delay, 0ms);
  }

  @keyframes fanDeckShuffleChoreography {
    0% {
      transform:
        translate3d(0, var(--fan-y, 0px), 0)
        rotate(var(--fan-rot, 0deg))
        scale(1);
    }
    24% {
      transform:
        translate3d(calc(var(--to-center-x, 0px) + var(--shuffle-side, 1) * 3.8rem), -10px, 0)
        rotate(calc(var(--shuffle-side, 1) * 11deg))
        scale(0.95);
    }
    50% {
      transform:
        translate3d(calc(var(--to-center-x, 0px) + var(--shuffle-side, 1) * -0.65rem), -26px, 0)
        rotate(var(--shuffle-jitter, 0deg))
        scale(1.04);
      box-shadow: 0 18px 34px rgba(18, 15, 11, 0.22);
    }
    74% {
      transform:
        translate3d(calc(var(--to-center-x, 0px) * 0.16), -8px, 0)
        rotate(calc(var(--fan-rot, 0deg) * 0.22))
        scale(1.01);
    }
    100% {
      transform:
        translate3d(0, var(--fan-y, 0px), 0)
        rotate(var(--fan-rot, 0deg))
        scale(1);
    }
  }

  .spread-triptych {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 1.85rem);
    align-items: stretch;
  }

  .spread-slot {
    block-size: 100%;
    min-block-size: 32.5rem;
    padding: clamp(1.5rem, 2.2vw, 1.9rem);
    border-radius: 1.15rem;
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .spread-slot[data-filled="true"] {
    border-color: rgba(127, 93, 43, 0.34);
  }

  .slot-header {
    text-align: center;
    flex-shrink: 0;
  }

  .slot-roman {
    display: block;
    font-family: var(--font-glyphic);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-bronze);
  }

  .slot-role {
    font-family: var(--font-glyphic);
    font-size: 1.24rem;
    font-weight: 400;
    color: var(--ink-primary);
    margin-block-start: 0.2rem;
  }

  .slot-card-well {
    position: relative;
    flex-shrink: 0;
    inline-size: min(14.8rem, 100%);
    aspect-ratio: var(--card-aspect);
    margin-inline: auto;
  }

  .slot-placeholder {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 0.72rem;
    border: 1.5px dashed rgba(127, 93, 43, 0.32);
    background: radial-gradient(circle at 50% 50%, #ffffff, #f5f2ea);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.25rem;
    text-align: center;
  }

  .placeholder-numeral {
    font-family: var(--font-glyphic);
    font-size: 1.85rem;
    color: rgba(127, 93, 43, 0.5);
  }

  .placeholder-text {
    font-family: var(--font-display);
    font-size: 0.86rem;
    color: var(--ink-muted);
    line-height: 1.48;
  }

  .slot-flip-scene {
    inline-size: 100%;
    block-size: 100%;
    perspective: 1100px;
  }

  .slot-flip-card {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    transform-style: preserve-3d;
    transition: transform 0.85s var(--ease-out-expo);
  }

  .slot-flip-card[data-flipped="true"] {
    transform: rotateY(180deg);
  }

  .slot-flip-card[data-reversed="true"][data-flipped="true"] .slot-front-img {
    transform: rotate(180deg);
  }

  .slot-face {
    position: absolute;
    inset: 0;
    border-radius: 0.72rem;
    overflow: hidden;
    backface-visibility: hidden;
    border: 1px solid rgba(127, 93, 43, 0.32);
    box-shadow: 0 14px 32px rgba(20, 17, 12, 0.13);
  }

  .slot-face--front {
    transform: rotateY(180deg);
  }

  .slot-face img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .slot-reading {
    flex: 1;
    border-block-start: 1px solid var(--border-hairline);
    padding-block-start: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .slot-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .slot-card-name {
    font-family: var(--font-glyphic);
    font-size: 1.22rem;
    font-weight: 400;
    color: var(--ink-primary);
  }

  .slot-orientation-badge {
    font-family: var(--font-glyphic);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.18rem 0.54rem;
    border-radius: 999px;
    background: var(--bg-cream);
    color: var(--accent-bronze);
    border: 1px solid var(--accent-gold-soft);
  }

  .slot-archetype {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 0.95rem;
    color: var(--accent-bronze);
  }

  .slot-interpretation {
    font-family: var(--font-display);
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--ink-secondary);
  }

  .slot-inspect-btn {
    align-self: flex-start;
    margin-block-start: auto;
    padding-block-start: 0.75rem;
    padding-block-end: 0.25rem;
    padding-inline: 0;
    border: 0;
    background: none;
    font-family: var(--font-glyphic);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ultramarine);
    cursor: pointer;
  }

  .slot-inspect-btn:hover {
    color: var(--accent-terracotta);
  }

  .spread-synthesis {
    position: relative;
    margin-block-start: 2.2rem;
    padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.6rem, 3vw, 2.4rem);
    border-radius: 0;
    background: linear-gradient(
      90deg,
      rgba(246, 243, 236, 0.24),
      rgba(246, 243, 236, 0.78),
      rgba(246, 243, 236, 0.24)
    );
    border: 0;
    border-block-start: 1px solid rgba(139, 104, 52, 0.52);
    border-block-end: 1px solid rgba(139, 104, 52, 0.52);
    box-shadow: none;
    text-align: center;
    max-inline-size: 60rem;
    margin-inline: auto;
  }

  .corner-diamond {
    position: absolute;
    inline-size: 0.38rem;
    block-size: 0.38rem;
    background: #8b6834;
    pointer-events: none;
  }

  .corner-diamond--tl {
    inset-block-start: -0.5px;
    inset-inline-start: 0;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .corner-diamond--tr {
    inset-block-start: -0.5px;
    inset-inline-end: 0;
    transform: translate(50%, -50%) rotate(45deg);
  }

  .corner-diamond--bl {
    inset-block-end: -0.5px;
    inset-inline-start: 0;
    transform: translate(-50%, 50%) rotate(45deg);
  }

  .corner-diamond--br {
    inset-block-end: -0.5px;
    inset-inline-end: 0;
    transform: translate(50%, 50%) rotate(45deg);
  }

  .synthesis-eyebrow {
    display: block;
    font-family: var(--font-glyphic);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-bronze);
    margin-block-end: 0.65rem;
  }

  .synthesis-copy {
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.42vw, 1.24rem);
    line-height: 1.66;
    color: var(--ink-primary);
  }

  /* ==========================================================================
     SECTION 4: AUTHENTIC DEEP MIDNIGHT NAVY CLOSING SANCTUARY FOOTER
     ========================================================================== */
  .midnight-sanctuary-footer {
    pointer-events: auto;
    position: relative;
    z-index: 3;
    min-block-size: clamp(35rem, 75svh, 44rem);
    background: linear-gradient(
      180deg,
      #0a1120 0%,
      #080f1d 52%,
      #060b16 100%
    );
    color: #f6f2e8;
    overflow: clip;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block-start: clamp(5.4rem, 8.6vh, 6.6rem);
  }

  /* Subtle Starlight Astrolabe Canvas strictly BEHIND figures & cards (z-index: 1) */
  .footer-constellation-canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 1;
    pointer-events: none;
  }

  /* Architectural Drafting Hairlines & Corner Stars (z-index: 2 — Connected Continuously to Upper Rectangle) */
  .footer-grid-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }

  .f-rule {
    position: absolute;
    background: rgba(212, 182, 126, 0.2);
  }

  .f-rule--top {
    inset-block-start: 2.6rem;
    inset-inline: 0;
    block-size: 1px;
  }

  .f-rule--bottom {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline: 0;
    block-size: 1px;
  }

  .f-rule--left {
    inset-inline-start: var(--frame-inline-inset);
    inset-block: 0;
    inline-size: 1px;
  }

  .f-rule--right {
    inset-inline-end: var(--frame-inline-inset);
    inset-block: 0;
    inline-size: 1px;
  }

  .f-star {
    position: absolute;
    font-family: var(--font-glyphic);
    font-size: var(--frame-star-size);
    line-height: 1;
    color: rgba(218, 188, 132, 0.72);
  }

  .f-star--tl {
    inset-block-start: 2.6rem;
    inset-inline-start: var(--frame-inline-inset);
    transform: translate(-50%, -50%);
  }

  .f-star--tr {
    inset-block-start: 2.6rem;
    inset-inline-end: var(--frame-inline-inset);
    transform: translate(50%, -50%);
  }

  .f-star--bl {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline-start: var(--frame-inline-inset);
    transform: translate(-50%, 50%);
  }

  .f-star--br {
    inset-block-end: var(--frame-bottom-inset);
    inset-inline-end: var(--frame-inline-inset);
    transform: translate(50%, 50%);
  }

  /* Centerpiece Wordmark, Upright Gilda Display Epigraph & Closing Action (z-index: 5) */
  .footer-center-column {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    padding-inline: 1.5rem;
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  .footer-eyebrow {
    font-family: var(--font-glyphic);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(228, 200, 148, 0.88);
  }

  .footer-wordmark {
    font-family: var(--font-glyphic);
    font-weight: 400;
    font-size: clamp(2.35rem, 4.5vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: 0.14em;
    color: #faf7ef;
  }

  .footer-epigraph {
    font-family: var(--font-display);
    font-style: normal;
    font-size: clamp(1.06rem, 1.38vw, 1.24rem);
    line-height: 1.58;
    color: rgba(246, 242, 232, 0.9);
    max-inline-size: 42ch;
  }

  /* Quattrocento Tarot Guardians & Unclipped Fanned Major Arcana Triptych (z-index: 3) */
  .footer-renaissance-stage {
    position: relative;
    z-index: 3;
    inline-size: min(84rem, 100%);
    margin-inline: auto;
    margin-block-start: auto;
    padding-inline: clamp(1.5rem, 4vw, 3.5rem);
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
    align-items: end;
    gap: clamp(1rem, 2.6vw, 2.4rem);
  }

  .footer-figure {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
  }

  .footer-figure img {
    max-block-size: clamp(15rem, 34vh, 22rem);
    inline-size: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 34px rgba(3, 6, 14, 0.55));
  }

  .footer-triptych-cards {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-block-end: 1.45rem;
  }

  /* Exact 848:1264 Plate Aspect Ratio — Zero Side Clipping! */
  .footer-plate-btn {
    position: relative;
    inline-size: clamp(7.2rem, 11.4vw, 9.6rem);
    aspect-ratio: var(--card-aspect);
    padding: 0;
    border-radius: 0.52rem;
    border: 1px solid rgba(224, 194, 138, 0.42);
    background: #10192d;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 20px 42px rgba(2, 5, 12, 0.62);
    transition: transform 0.34s var(--ease-out-expo), border-color 0.25s ease;
  }

  .footer-plate-btn img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .footer-plate-btn--left {
    transform: translateX(0.65rem) translateY(0.5rem) rotate(-8deg);
    z-index: 1;
  }

  .footer-plate-btn--center {
    transform: translateY(-0.45rem) scale(1.05);
    z-index: 3;
  }

  .footer-plate-btn--right {
    transform: translateX(-0.65rem) translateY(0.5rem) rotate(8deg);
    z-index: 2;
  }

  .footer-plate-btn--left:hover,
  .footer-plate-btn--left:focus-visible {
    transform: translateX(0.45rem) translateY(-0.35rem) rotate(-5deg) scale(1.04);
    border-color: rgba(242, 214, 160, 0.88);
    z-index: 6;
  }

  .footer-plate-btn--center:hover,
  .footer-plate-btn--center:focus-visible {
    transform: translateY(-1.1rem) scale(1.09);
    border-color: rgba(242, 214, 160, 0.88);
    z-index: 6;
  }

  .footer-plate-btn--right:hover,
  .footer-plate-btn--right:focus-visible {
    transform: translateX(-0.45rem) translateY(-0.35rem) rotate(5deg) scale(1.04);
    border-color: rgba(242, 214, 160, 0.88);
    z-index: 6;
  }

  .footer-bottom-rail {
    position: relative;
    z-index: 5;
    min-block-size: var(--frame-bottom-inset);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem calc(var(--frame-inline-inset) + 1.15rem);
    border-block-start: 0;
    background: rgba(6, 10, 20, 0.56);
  }

  .footer-credit-line {
    font-family: var(--font-display);
    font-size: 0.82rem;
    color: rgba(238, 233, 222, 0.8);
    letter-spacing: 0.01em;
  }

  .footer-rail-links {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .footer-rail-link {
    font-family: var(--font-glyphic);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(246, 242, 232, 0.88);
    text-decoration: none;
    transition: color 0.18s ease;
  }

  .footer-rail-link:hover {
    color: #e6c68a;
  }

  .footer-rail-sep {
    color: rgba(212, 182, 126, 0.42);
  }

  /* ==========================================================================
     READING DIALOG (MODAL RIGHT SHEET — UPRIGHT GILDA DISPLAY & FACULTY GLYPHIC)
     ========================================================================== */
  .reading-dialog {
    position: fixed;
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    margin: 0;
    padding: 0;
    border: 0;
    inline-size: min(35rem, 100dvw);
    block-size: 100dvh;
    max-block-size: 100dvh;
    background: transparent;
    color: var(--ink-primary);
  }

  .reading-dialog::backdrop {
    background: transparent;
  }

  .reading-sheet {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface-sheet);
    backdrop-filter: blur(22px);
    border-inline-start: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-sheet);
    overflow-y: auto;
  }

  .reading-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.6rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--border-hairline);
  }

  .reading-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-family: var(--font-glyphic);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-bronze);
  }

  .reading-astrology {
    font-family: var(--font-display);
    color: var(--ink-muted);
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.84rem;
  }

  .close-pill {
    min-block-size: 2.1rem;
    padding: 0.3rem 0.88rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: #ffffff;
    font-family: var(--font-glyphic);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .close-pill:hover {
    border-color: var(--border-strong);
    background: var(--bg-cream);
  }

  .reading-hero-band {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.35rem;
    align-items: center;
    padding: 1.5rem 1.6rem 1.25rem;
    border-block-end: 1px solid var(--border-hairline);
  }

  .talisman-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    inline-size: 9.2rem;
  }

  .talisman-card {
    padding: 0;
    border-radius: 0.42rem;
    border: 1.5px solid var(--border-hairline);
    background: var(--bg-cream);
    overflow: hidden;
    aspect-ratio: var(--card-aspect);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(20, 18, 14, 0.09);
    transition: transform 0.22s ease, border-color 0.22s ease;
  }

  .talisman-card:hover {
    transform: translateY(-2px);
  }

  .talisman-card.is-active {
    border-color: var(--accent-bronze);
    box-shadow: 0 8px 20px rgba(127, 93, 43, 0.22);
  }

  .talisman-card img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .talisman-caption {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--font-glyphic);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .reading-title {
    font-family: var(--font-glyphic);
    font-size: clamp(1.8rem, 3vw, 2.25rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--ink-primary);
  }

  .reading-archetype {
    margin-block-start: 0.28rem;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.06rem;
    color: var(--accent-bronze);
  }

  .keyword-list {
    margin-block-start: 0.7rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .keyword-list li {
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    background: var(--bg-cream);
    border: 1px solid rgba(127, 93, 43, 0.2);
    font-family: var(--font-glyphic);
    font-size: 0.67rem;
    letter-spacing: 0.03em;
    color: var(--ink-secondary);
  }

  .reading-body {
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    flex: 1;
  }

  .section-rubric {
    font-family: var(--font-glyphic);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-bronze);
    margin-block-end: 0.55rem;
  }

  .reading-prose {
    font-family: var(--font-display);
    font-size: 0.98rem;
    line-height: 1.72;
    color: var(--ink-secondary);
    max-inline-size: 62ch;
  }

  .meaning-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.65rem;
  }

  .meaning-tabs-header .section-rubric {
    margin-block-end: 0;
  }

  .orientation-switch {
    display: inline-flex;
    padding: 0.18rem;
    border-radius: 999px;
    background: var(--bg-cream);
    border: 1px solid var(--border-hairline);
  }

  .orient-tab {
    padding: 0.26rem 0.74rem;
    border-radius: 999px;
    border: 0;
    background: transparent;
    font-family: var(--font-glyphic);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .orient-tab[aria-selected="true"] {
    background: #ffffff;
    color: var(--ink-primary);
    box-shadow: 0 2px 6px rgba(20, 18, 14, 0.08);
  }

  .reflection-box {
    position: relative;
    padding: 1.2rem 1.35rem;
    border-radius: 0;
    background: linear-gradient(
      90deg,
      rgba(246, 243, 236, 0.28),
      rgba(246, 243, 236, 0.78),
      rgba(246, 243, 236, 0.28)
    );
    border: 0;
    border-block-start: 1px solid rgba(139, 104, 52, 0.52);
    border-block-end: 1px solid rgba(139, 104, 52, 0.52);
  }

  .reflection-question {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1.56;
    color: var(--ink-primary);
  }

  .reading-footer {
    position: sticky;
    inset-block-end: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--border-hairline);
  }

  .nav-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: #ffffff;
    font-family: var(--font-glyphic);
    font-size: 0.72rem;
    color: var(--ink-secondary);
    cursor: pointer;
    max-inline-size: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-card-btn:hover {
    border-color: var(--border-strong);
    color: var(--ink-primary);
  }

  .reading-counter {
    font-family: var(--font-glyphic);
    font-size: 0.72rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ==========================================================================
     78-CARD CATALOGUE INDEX MODAL (EXACT 848:1264 THUMBNAILS)
     ========================================================================== */
  .index-dialog {
    margin: auto;
    padding: 0;
    border: 1px solid var(--border-hairline);
    border-radius: 1.25rem;
    inline-size: min(74rem, calc(100vw - 2rem));
    block-size: min(88dvh, 56rem);
    background: #ffffff;
    color: var(--ink-primary);
    box-shadow: 0 28px 80px rgba(14, 16, 22, 0.24);
  }

  .index-dialog::backdrop {
    background: rgba(12, 14, 22, 0.42);
    backdrop-filter: blur(6px);
  }

  .index-sheet {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .index-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.75rem 1rem;
    border-block-end: 1px solid var(--border-hairline);
  }

  .index-eyebrow {
    display: block;
    font-family: var(--font-glyphic);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-bronze);
  }

  .index-title {
    font-family: var(--font-glyphic);
    font-size: clamp(1.5rem, 2.3vw, 1.95rem);
    font-weight: 400;
  }

  .index-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem 1.75rem;
    background: var(--bg-cream);
    border-block-end: 1px solid var(--border-hairline);
  }

  .suit-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .filter-chip {
    min-block-size: 2rem;
    padding: 0.28rem 0.78rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: #ffffff;
    font-family: var(--font-glyphic);
    font-size: 0.72rem;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .filter-chip[aria-pressed="true"] {
    background: var(--ink-primary);
    border-color: var(--ink-primary);
    color: #ffffff;
  }

  .search-field {
    flex: 1 1 15rem;
    max-inline-size: 20rem;
  }

  .search-field input {
    inline-size: 100%;
    min-block-size: 2.15rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: #ffffff;
    font-family: var(--font-display);
    font-size: 0.88rem;
  }

  .index-grid {
    flex: 1;
    overflow-y: auto;
    padding: 1.35rem 1.75rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr));
    gap: 1.1rem;
    align-content: start;
  }

  .index-card-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.5rem;
    border-radius: 0.72rem;
    border: 1px solid var(--border-hairline);
    background: #ffffff;
    text-align: start;
    cursor: pointer;
    transition: transform 0.22s var(--ease-out-expo), box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .index-card-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(127, 93, 43, 0.45);
    box-shadow: var(--shadow-soft);
  }

  .index-thumb-wrap {
    aspect-ratio: var(--card-aspect);
    border-radius: 0.45rem;
    overflow: hidden;
    background: var(--bg-cream);
  }

  .index-thumb-wrap img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .index-card-num {
    font-family: var(--font-glyphic);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-bronze);
  }

  .index-card-name {
    font-family: var(--font-display);
    font-size: 0.96rem;
    line-height: 1.2;
    color: var(--ink-primary);
  }

  /* Responsive Refinements */
  @media (max-width: 1080px) {
    .stage-hud {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .hero-bottom-left,
    .hero-bottom-right {
      justify-self: center;
    }

    .hero-bottom-right {
      display: none;
    }
  }

  @media (max-width: 960px) {
    .spread-triptych {
      grid-template-columns: 1fr;
      max-inline-size: 28rem;
      margin-inline: auto;
    }

    .chronicle-margin-index {
      display: none;
    }

    .chronicle-editorial-stage,
    .chronicle-editorial-stage[data-align="right"] {
      inset-inline-start: 1.75rem;
      inset-inline-end: 1.75rem;
      inline-size: auto;
      inset-block-end: 5.5rem;
    }

    .footer-renaissance-stage {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .footer-figure {
      display: none;
    }
  }

  @media (max-width: 760px) {
    .top-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0.65rem;
    }

    .suit-cluster {
      display: none;
    }

    .chronicle-bottom-meta {
      display: none;
    }

    .chronicle-bottom-bar {
      justify-content: center;
    }

    .reading-dialog {
      inset-block-start: auto;
      inline-size: 100%;
      block-size: 82dvh;
    }

    .reading-sheet {
      border-inline-start: 0;
      border-block-start: 1px solid var(--border-hairline);
      border-start-start-radius: 1.2rem;
      border-start-end-radius: 1.2rem;
    }
  }
}

@layer utilities {
  [hidden] {
    display: none !important;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}