/* ============================================================
       ISLAM'S PROBLEMS — EVIDENCE DECK
       One consolidated stylesheet. One definition per component.

       Reading model : one card at a time (← / → / Home / End).
       Theme          : warm dark; serif evidence, sans-serif UI.
       Signal system  : gold = canonical source / authority.
                         red  = the single fatal phrase / verdict.
                         slate = the author's own voice.
       Restraint is the point. Three emphasis voices, no more, so a
       hostile reader's eye lands on the proof in under two seconds.
       ============================================================ */

    :root {
      /* layout/motion tokens — theme-independent.
         Slightly more rounded radii (8/12/16) read as more polished
         and modern at every breakpoint; --max-card-w 1040 + prose 68ch
         give the deck more breath at desktop without sacrificing
         portrait phones; --top-h/--bottom-h calibrated so the
         chrome-bar chips get enough breathing room around the icons. */
      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 16px;
      --r-pill: 999px;
      --top-h: 54px;
      --bottom-h: 64px;
      --max-card-w: 1040px;
      --max-prose: 68ch;

      /* one disciplined spacing scale used through the whole deck —
         eliminates the dozens of ad-hoc .55/.7/.85/.95/1.05rem values
         that drifted the visual rhythm. Every margin and padding pulls
         from these eight steps. */
      --s-1: .25rem;
      --s-2: .5rem;
      --s-3: .75rem;
      --s-4: 1rem;
      --s-5: 1.25rem;
      --s-6: 1.5rem;
      --s-7: 2rem;
      --s-8: 2.75rem;

      /* unified motion language — one expo-out curve, two durations.
         .42s on the card glide is the deck's signature: quick to leave,
         long graceful settle, no bounce. The expo-out's slow tail lets
         each navigation feel intentional rather than abrupt; .15s on
         chip-state ramps keeps hover/press feedback instant. Together
         these are the only two timing values the deck uses, so the
         entire interface speaks one motion vocabulary. */
      --ease-deck: cubic-bezier(.16, 1, .3, 1);
      --dur-deck: .42s;
      --dur-chip: .15s;

      --serif: "Iowan Old Style", "Charter", "Source Serif Pro", "Georgia Pro", Georgia, "Times New Roman", serif;
      --sans: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    }

        :root,
    :root[data-theme="light"] {
      /* Paper — warm vellum, calibrated so the gold reads as foil
         on fine cream stock rather than mustard on office white.
         A whisper of additional warmth (more amber, less green) makes
         every gold token below sing instead of dulling into ochre. */
      --bg: #faf6ea;
      --panel: #fffdf6;
      /* Ink — rich warm sepia-black, never grey. Calibrated against
         the warmer paper so prose reads as ink-on-vellum, not pixels. */
      --ink: #1a1206;
      --ink-soft: #382a1c;
      --ink-strong: #0a0502;
      --muted: #7a6650;
      --faint: #968570;
      --line: #f0dba6;
      --line-strong: #b58116;

      /* Gold — the deck's soul. Bumped saturation + a touch warmer for
         true burnished-leaf presence; gold-2 is the deeper cognac voice
         used where authority outranks luminance. */
      --gold-rgb: 178 126 22;
      --gold-2-rgb: 132 90 10;
      --rust-rgb: 184 61 48;
      --kill-rgb: 201 62 48;
      --slate-rgb: 75 98 125;

      --gold: rgb(var(--gold-rgb));
      --gold-2: rgb(var(--gold-2-rgb));
      --gold-dim: #8a6418;
      --bold-gold: #d4ab48;
      --gold-edge: rgb(var(--gold-rgb) / .42);
      --control-edge: rgb(var(--gold-rgb) / .58);
      --hairline: rgb(var(--gold-rgb) / .28);

      --rust: rgb(var(--rust-rgb));
      --rust-text: #6e1c14;
      --kill: rgb(var(--kill-rgb));

      --slate: rgb(var(--slate-rgb));
      --slate-dim: #647a94;
      --focus: #b58116;

      --chrome-bg: transparent;
      --chrome-deep: transparent;
      --popover-bg: rgba(255, 253, 245, 0.94);
      --popover-bg-deep: rgba(250, 244, 228, 0.96);
      --popover-arrow: rgba(255, 253, 245, 0.94);
      --callout-bg: #fdf8e8;
      --callout-bg-2: #fffdf3;
      --callout-bg-3: #f6ecd2;
      --callout-bg-deep: #ecdfbe;
      --callout-bg-warm: #fdf5e0;
      --rust-callout-bg: #fdf1eb;
      --deck-ref-bg: #fff5dc;
      --kill-text-on-rust-panel: #6e1c14;
      --emphasis-on-callout: #100c08;

      /* Multi-layer shadow stack — the card no longer "rests" on the
         page, it floats. Inner cream highlight on the top edge reads as
         light catching a paper edge; the three outer shadows form the
         ground-shadow / soft-shadow / atmospheric-bloom trinity that
         museum-grade printed exhibits cast on their plinth. */
      --shadow-lift:
        0 1px 0 rgba(255, 255, 252, 1) inset,
        0 1px 1px rgba(74, 52, 22, 0.04),
        0 4px 12px -4px rgba(74, 52, 22, 0.10),
        0 18px 40px -20px rgba(74, 52, 22, 0.22),
        0 36px 72px -36px rgba(74, 52, 22, 0.14);
    }

    /* ---------- DARK — leather-bound book on dark walnut ----------
       Canonical dark palette lives in the consolidated :root[data-theme="dark"]
       block at the bottom of this stylesheet; this block stages the same
       intent so any value not overridden cascades sensibly. */
    :root[data-theme="dark"] {
      --bg: #0d0c0a;
      --panel: #15120f;
      --ink: #f2eadf;
      --ink-soft: #e0d6c5;
      --ink-strong: #fbf6ec;
      --muted: #b9afa0;
      --faint: #817668;
      --line: #3a3228;
      --line-strong: #6a5536;

      --gold-rgb: 214 173 99;
      --gold-2-rgb: 230 199 131;
      --rust-rgb: 196 95 74;
      --kill-rgb: 244 168 144;
      --slate-rgb: 168 179 191;

      --gold: #d6ad63;
      --gold-2: #e6c783;
      --gold-dim: #9c7b42;
      --gold-edge: rgb(var(--gold-rgb) / .24);
      --control-edge: rgb(var(--gold-rgb) / .5);
      --hairline: rgb(var(--gold-rgb) / .14);

      --rust: #c45f4a;
      --rust-text: #f3c9bc;
      --kill: #f4a890;

      --slate: #a8b3bf;
      --slate-dim: #5d6a78;
      --focus: #f0d28d;

      --chrome-bg: #0b0a08;
      --chrome-deep: #0d0c0a;
      --popover-bg: #18140f;
      --popover-bg-deep: #14110e;
      --popover-arrow: #1a1610;
      --callout-bg: #11100d;
      --callout-bg-2: #0a0907;
      --callout-bg-3: #0d0b08;
      --callout-bg-deep: #050402;
      --callout-bg-warm: #100e0b;
      --rust-callout-bg: #140a07;
      --deck-ref-bg: #0b0a08;
      --kill-text-on-rust-panel: #ffe9df;
      --emphasis-on-callout: #fff;

      /* deeper 3-layer stack so cards "float" on the dark walnut. The
         inner highlight is microscopic; the outer shadow reads as the
         page actually casting onto the bg; the close 4px pickup grounds
         the card to its position. */
      --shadow-lift:
        0 1px 0 rgba(255, 248, 232, .03) inset,
        0 18px 44px -22px rgba(0, 0, 0, .92),
        0 4px 12px -6px rgba(0, 0, 0, .5);
    }



    /* ================================================================
       LIGHT-MODE PREMIUM POLISH
       Every surface, chip, callout, pill, and shadow tuned for
       illuminated-manuscript gravity. Scoped strictly to light;
       dark mode remains governed by its own blocks below.
       The intent: when this loads, the page should read as fine
       printed editorial work — vellum paper, true gold-leaf signals,
       atmospheric depth — not a UI.
       ================================================================ */

    /* PAGE CANVAS — warm vellum lit by two soft lamps.
       Overhead amber + ground-level whisper give the page real
       atmosphere without ever competing with the cards. */
    :root[data-theme="light"] body {
      background:
        radial-gradient(ellipse 70rem 42rem at 50% -16rem,
          rgb(var(--gold-rgb) / .18) 0%,
          rgb(var(--gold-rgb) / .06) 38%,
          transparent 72%),
        radial-gradient(ellipse 55rem 28rem at 50% 108%,
          rgb(var(--gold-2-rgb) / .06),
          transparent 65%),
        var(--bg);
    }

    /* CHROME BARS — frosted vellum with a hairline of foil.
       Triple-stop gradient + inner cream highlight + a one-pixel gold
       seam below the bar make the top/bottom rails read as illuminated
       page edges, not flat translucent tints. */
    :root[data-theme="light"] .deck-top {
      background:
        linear-gradient(180deg,
          rgba(255, 252, 244, .95) 0%,
          rgba(252, 247, 234, .90) 65%,
          rgba(250, 243, 222, .82) 100%);
      border-bottom: 1px solid rgb(var(--gold-rgb) / .30);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .9),
        0 1px 0 rgb(var(--gold-rgb) / .10),
        0 8px 16px -10px rgba(74, 52, 22, .12);
      backdrop-filter: blur(16px) saturate(190%);
      -webkit-backdrop-filter: blur(16px) saturate(190%);
    }

    :root[data-theme="light"] .deck-bottom {
      background:
        linear-gradient(0deg,
          rgba(255, 252, 244, .95) 0%,
          rgba(252, 247, 234, .90) 65%,
          rgba(250, 243, 222, .82) 100%);
      border-top: 1px solid rgb(var(--gold-rgb) / .30);
      box-shadow:
        inset 0 -1px 0 rgba(255, 255, 252, .85),
        0 -1px 0 rgb(var(--gold-rgb) / .10),
        0 -8px 16px -10px rgba(74, 52, 22, .12);
      backdrop-filter: blur(16px) saturate(190%);
      -webkit-backdrop-filter: blur(16px) saturate(190%);
    }

    /* POPOVERS — same vellum + gold-seam vocabulary as the chrome */
    :root[data-theme="light"] .deck-hints,
    :root[data-theme="light"] .deck-toast,
    :root[data-theme="light"] .deck-index-panel {
      background:
        radial-gradient(ellipse at 80% 0%, rgb(var(--gold-rgb) / .10), transparent 55%),
        linear-gradient(180deg, var(--popover-bg) 0%, var(--popover-bg-deep) 100%);
      backdrop-filter: blur(18px) saturate(180%);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
    }

    /* CARD — vellum paper floating in soft amber light.
       Subtle top-down warmth gradient on the surface reads as light
       gracing the page; the multi-layer shadow stack (defined in
       --shadow-lift above) does the atmospheric lift. The pure white
       inset hairline along the top edge is what sells the "real paper
       edge" illusion. */
    :root[data-theme="light"] .slide {
      background:
        linear-gradient(180deg,
          rgba(255, 252, 240, .55) 0%,
          rgba(255, 252, 240, .15) 18%,
          transparent 42%),
        var(--panel);
      border: 1px solid rgb(var(--gold-rgb) / .24);
      box-shadow: var(--shadow-lift);
    }

    /* COVER MASTHEAD — letterpress feel on the H1.
       A near-imperceptible warm highlight under the ink mimics the
       way printed ink bites into paper; tiny but transformative. */
    :root[data-theme="light"] header.cover h1 {
      color: #0a0500;
      text-shadow: 0 1px 0 rgba(255, 255, 250, .35);
    }

    /* COVER RULE — a longer, gradiated brass ornament.
       Goes from a soft brass shimmer through gold to a leaf-bright
       highlight and fades. Reads as a hand-applied foil stamp under
       the headline, not a CSS divider. */
    :root[data-theme="light"] .cover-rule,
    :root[data-theme="light"] h2.section::after,
    :root[data-theme="light"] .deck-index-bar::after {
      background: linear-gradient(90deg,
        rgb(var(--gold-rgb) / .45) 0%,
        var(--gold) 26%,
        var(--bold-gold) 52%,
        var(--gold) 72%,
        transparent 100%);
      box-shadow: 0 1px 2px rgb(var(--gold-rgb) / .22);
    }

    :root[data-theme="light"] .cover-rule {
      width: 4.4rem;
      height: 2px;
    }

    /* COVER KICKER — slightly brighter, slightly more letter-spaced
       presence so the deck identity registers as a designed lockup. */
    :root[data-theme="light"] .cover-kicker,
    :root[data-theme="light"] .deck-index-title {
      color: var(--gold);
      text-shadow: 0 1px 0 rgba(255, 252, 240, .5);
    }

    /* TOP-BAR CHIPS — polished brass discs catching directional light.
       Radial highlight on the upper third, gold inset edge, gold-tinted
       drop. Hover deepens the inner glow and casts a warm halo. */
    :root[data-theme="light"] .deck-help,
    :root[data-theme="light"] .deck-share,
    :root[data-theme="light"] .deck-theme {
      background:
        radial-gradient(circle at 50% 24%,
          rgba(255, 252, 240, .95) 0%,
          rgba(252, 245, 222, .78) 48%,
          rgba(246, 234, 200, .58) 100%);
      border-color: rgb(var(--gold-rgb) / .60);
      color: var(--gold-2);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .95),
        inset 0 -1px 0 rgb(var(--gold-rgb) / .14),
        inset 0 0 0 1px rgb(var(--gold-rgb) / .05),
        0 1px 1px rgba(74, 52, 22, .08),
        0 4px 10px -4px rgba(74, 52, 22, .14);
    }

    @media (hover: hover) {
      :root[data-theme="light"] .deck-help:hover,
      :root[data-theme="light"] .deck-share:hover,
      :root[data-theme="light"] .deck-theme:hover {
        background:
          radial-gradient(circle at 50% 24%,
            rgba(255, 253, 244, 1) 0%,
            rgba(254, 246, 218, .92) 48%,
            rgba(248, 232, 188, .72) 100%);
        border-color: var(--gold);
        color: var(--ink-strong);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 252, 1),
          inset 0 -1px 0 rgb(var(--gold-rgb) / .22),
          0 2px 4px rgba(74, 52, 22, .12),
          0 8px 16px -4px rgba(74, 52, 22, .20),
          0 0 0 4px rgb(var(--gold-rgb) / .06);
      }
    }

    :root[data-theme="light"] .deck-help[aria-expanded="true"] {
      background:
        radial-gradient(circle at 50% 24%,
          rgba(255, 252, 240, 1) 0%,
          rgba(252, 240, 200, .9) 48%,
          rgba(244, 224, 174, .72) 100%);
      border-color: var(--gold);
      color: var(--ink-strong);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, 1),
        inset 0 -1px 0 rgb(var(--gold-rgb) / .25),
        inset 0 0 0 1px rgb(var(--gold-rgb) / .08),
        0 2px 4px rgba(74, 52, 22, .14),
        0 0 0 4px rgb(var(--gold-rgb) / .08);
    }

    /* BOTTOM-BAR NAV CHIPS — same brass family as the top chips,
       in a rectilinear silhouette so the bottom rail reads as one
       designed pair. */
    :root[data-theme="light"] .deck-nav {
      background:
        linear-gradient(180deg,
          rgba(255, 252, 240, .88) 0%,
          rgba(252, 245, 222, .70) 60%,
          rgba(246, 234, 200, .55) 100%);
      border-color: rgb(var(--gold-rgb) / .60);
      color: var(--gold-2);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .95),
        inset 0 -1px 0 rgb(var(--gold-rgb) / .15),
        0 1px 1px rgba(74, 52, 22, .08),
        0 4px 10px -4px rgba(74, 52, 22, .14);
    }

    @media (hover: hover) {
      :root[data-theme="light"] .deck-nav:hover {
        background:
          linear-gradient(180deg,
            rgba(255, 253, 244, 1) 0%,
            rgba(254, 246, 218, .92) 60%,
            rgba(248, 232, 188, .72) 100%);
        border-color: var(--gold);
        color: var(--ink-strong);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 252, 1),
          inset 0 -1px 0 rgb(var(--gold-rgb) / .24),
          0 2px 4px rgba(74, 52, 22, .12),
          0 8px 18px -4px rgba(74, 52, 22, .22),
          0 0 0 4px rgb(var(--gold-rgb) / .06);
      }
    }

    /* INDEX (centre) CHIP — quieter than the chevron buttons but with
       the same brass family so the entire bottom rail reads cohesively. */
    :root[data-theme="light"] .deck-here {
      background:
        linear-gradient(180deg,
          rgba(255, 252, 240, .70) 0%,
          rgba(252, 246, 226, .50) 100%);
      border-color: rgb(var(--gold-rgb) / .55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 1px rgba(74, 52, 22, .06);
    }

    @media (hover: hover) {
      :root[data-theme="light"] .deck-here:hover {
        background:
          linear-gradient(180deg,
            rgba(255, 253, 244, .92) 0%,
            rgba(254, 246, 218, .78) 100%);
        border-color: var(--gold);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 252, .95),
          0 2px 6px -2px rgba(74, 52, 22, .14),
          0 0 0 3px rgb(var(--gold-rgb) / .05);
      }
    }

    /* SOURCE-LINK PILLS — foil-stamped tags on premium card stock.
       Inner cream highlight, gold-tinted base, gold edge.  Hover
       brightens the foil + adds a warm halo. */
    :root[data-theme="light"] .source-link {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .08) 0%,
          rgb(var(--gold-rgb) / .03) 100%);
      border-color: rgb(var(--gold-rgb) / .48);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 240, .85),
        inset 0 -1px 0 rgb(var(--gold-rgb) / .08),
        0 1px 1px rgba(74, 52, 22, .05);
    }

    @media (hover: hover) {
      :root[data-theme="light"] .source-link:hover {
        background:
          linear-gradient(180deg,
            rgb(var(--gold-rgb) / .22) 0%,
            rgb(var(--gold-rgb) / .12) 100%);
        border-color: var(--gold);
        box-shadow:
          inset 0 1px 0 rgba(255, 252, 240, .95),
          0 2px 4px -1px rgba(74, 52, 22, .14),
          0 0 0 3px rgb(var(--gold-rgb) / .08);
      }
    }

    :root[data-theme="light"] .source-link:focus-visible {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .22) 0%,
          rgb(var(--gold-rgb) / .12) 100%);
    }

    /* SMALL REFERENCE CHIPS — the appendix/tag pills get the same
       foil treatment at a smaller scale. */
    :root[data-theme="light"] .ref,
    :root[data-theme="light"] .app-label {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .07) 0%,
          rgb(var(--gold-rgb) / .02) 100%);
      border-color: rgb(var(--gold-rgb) / .5);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 240, .75),
        0 1px 1px rgba(74, 52, 22, .04);
    }

    /* KEYCAP — true polished-brass key on cream.
       Triple-stop gradient (cream → wheat → champagne), inner
       cream highlight, soft brass drop. Sits like a designed
       mechanical-keyboard chip on the page. */
    :root[data-theme="light"] .keycap {
      background: linear-gradient(180deg,
        #fffbf0 0%,
        #faf0d4 55%,
        #f0e1b4 100%);
      border-color: rgb(var(--gold-rgb) / .58);
      color: var(--gold-2);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .95),
        inset 0 -1px 0 rgb(var(--gold-rgb) / .18),
        0 1px 0 rgba(74, 52, 22, .14),
        0 2px 3px -1px rgba(74, 52, 22, .10);
    }

    /* DECK-REF inline replica chip */
    :root[data-theme="light"] .deck-ref {
      background:
        linear-gradient(180deg,
          rgba(255, 252, 240, .9) 0%,
          rgba(252, 244, 220, .82) 100%);
      border-color: rgb(var(--gold-rgb) / .55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .9),
        0 1px 1px rgba(74, 52, 22, .06);
    }

    /* PRIMARY SOURCE QUOTE — the canonical exhibit.
       This is the loudest calm thing on the deck and now reads like a
       museum specimen card under glass: gold corner light, layered
       cream gradient body, atmospheric drop, gold authority bar.
       The triple-shadow stack is what gives it real presence on
       the page without raising the volume. */
    :root[data-theme="light"] .primary-source-quote,
    :root[data-theme="light"] blockquote.primary-source-quote {
      background:
        radial-gradient(110% 70% at 0% 0%, rgb(var(--gold-rgb) / .14), transparent 50%),
        linear-gradient(165deg,
          #fffef7 0%,
          #fdf9e8 55%,
          #faf3d8 100%);
      border: 1px solid rgb(var(--gold-rgb) / .32);
      border-left: 5px solid var(--gold);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, 1),
        inset 1px 0 0 rgb(var(--gold-rgb) / .12),
        0 1px 2px rgba(74, 52, 22, .04),
        0 12px 32px -14px rgba(74, 52, 22, .22),
        0 28px 64px -32px rgba(74, 52, 22, .16);
    }

    :root[data-theme="light"] .primary-sources {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .06) 0%, transparent 70%),
        var(--callout-bg-warm);
      border-color: rgb(var(--gold-rgb) / .42);
      border-left: 4px solid var(--gold);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 4px 12px -6px rgba(74, 52, 22, .14);
    }

    /* CALLOUT (the verdict box) — warm rust glow, deeper presence.
       Pairs with the primary-source-quote's atmospheric stack so
       evidence and verdict read as siblings, not siloed components. */
    :root[data-theme="light"] .callout {
      background:
        radial-gradient(90% 100% at 0% 0%, rgb(var(--rust-rgb) / .20), transparent 58%),
        linear-gradient(170deg, #fdf2ec 0%, #fbe9de 100%);
      border-color: rgb(var(--rust-rgb) / .50);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 250, .85),
        0 1px 2px rgba(120, 40, 30, .05),
        0 10px 24px -10px rgba(120, 40, 30, .22),
        0 22px 48px -28px rgba(120, 40, 30, .14);
    }

    /* QUOTE-MINI — pull-quote on cream */
    :root[data-theme="light"] .quote-mini {
      background:
        radial-gradient(75% 100% at 0% 50%, rgb(var(--gold-rgb) / .12), transparent 60%),
        linear-gradient(180deg, #fffdf6, #fdf8e6);
      border-color: rgb(var(--gold-rgb) / .42);
      border-left-color: var(--gold);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .9),
        0 1px 2px rgba(74, 52, 22, .04),
        0 8px 22px -10px rgba(74, 52, 22, .18);
    }

    /* INTRO-BOX — the orientation panel.  Soft gold wash, gold bar. */
    :root[data-theme="light"] .intro-box {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .09) 0%, transparent 55%),
        linear-gradient(180deg, #fffdf3, #fdf6e2);
      border-color: rgb(var(--gold-rgb) / .42);
      border-left: 3px solid var(--gold);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 4px 12px -6px rgba(74, 52, 22, .14);
    }

    /* MATH-CASE / case-button — exhibit-A/exhibit-B boxes.
       Hairline frame; LEFT edge is a confident dark-cognac rule so
       the case boxes read as parallel exhibits with the same
       authority signal as primary-source-quote. */
    :root[data-theme="light"] .math-case,
    :root[data-theme="light"] details.math-case-button:not(.supplement) {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .06) 0%, transparent 50%),
        #fffdf3;
      border: 1px solid rgb(var(--gold-rgb) / .32);
      border-left: 5px solid #5a3d0a;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 4px 12px -6px rgba(74, 52, 22, .12);
    }

    /* CASE 1 / CASE 2 titles share the exact same gold ink so both
       boxes read as one matched set of exhibits. */
    :root[data-theme="light"] .case-tag,
    :root[data-theme="light"] .math-case .case-heading {
      color: var(--gold-2);
    }

    /* STAT GRID + FACT ROW — the evidence-cell family */
    :root[data-theme="light"] .stat-grid .stat,
    :root[data-theme="light"] .fact-row .fact-cell {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .07) 0%, transparent 50%),
        linear-gradient(180deg, #fffdf3, #fdf8e6);
      border-color: rgb(var(--gold-rgb) / .42);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .9),
        0 1px 2px rgba(74, 52, 22, .04),
        0 6px 14px -6px rgba(74, 52, 22, .14);
    }

    :root[data-theme="light"] .fact-row .fact-cell.warn {
      background:
        linear-gradient(180deg, rgb(var(--rust-rgb) / .10) 0%, transparent 70%),
        linear-gradient(180deg, #fdf2ec, #fbe9de);
      border-color: rgb(var(--rust-rgb) / .42);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 250, .85),
        0 1px 2px rgba(120, 40, 30, .05),
        0 6px 14px -6px rgba(120, 40, 30, .18);
    }

    /* NUM-LINE — numbered reasoning chain.
       Cells lift a hair off the page; the counter chip is a small
       brass disc consistent with the keycap/source-link family. */
    :root[data-theme="light"] .num-line > li {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .04) 0%, transparent 70%),
        #fffdf6;
      border-color: rgb(var(--gold-rgb) / .26);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 2px rgba(74, 52, 22, .04);
    }

    :root[data-theme="light"] .num-line > li::before {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .20) 0%,
          rgb(var(--gold-rgb) / .10) 100%);
      border-color: var(--gold);
      color: var(--gold-2);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 240, .85),
        0 1px 2px rgba(74, 52, 22, .08);
    }

    :root[data-theme="light"] .num-line > li.therefore {
      background:
        linear-gradient(180deg, rgb(var(--rust-rgb) / .12) 0%, transparent 60%),
        #fdf2ec;
      border-color: rgb(var(--rust-rgb) / .50);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 250, .82),
        0 1px 2px rgba(120, 40, 30, .05);
    }

    :root[data-theme="light"] .num-line > li.therefore::before {
      background:
        linear-gradient(180deg,
          rgb(var(--rust-rgb) / .20) 0%,
          rgb(var(--rust-rgb) / .10) 100%);
      border-color: rgb(var(--rust-rgb) / .60);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 250, .8),
        0 1px 2px rgba(120, 40, 30, .08);
    }

    /* TOC CARDS — gallery plates */
    :root[data-theme="light"] .toc-card {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .06) 0%, transparent 55%),
        linear-gradient(180deg, #fffdf3, #fdf8e4);
      border-color: rgb(var(--gold-rgb) / .35);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 2px rgba(74, 52, 22, .04),
        0 6px 16px -6px rgba(74, 52, 22, .14),
        0 18px 36px -22px rgba(74, 52, 22, .14);
    }

    @media (hover: hover) {
      :root[data-theme="light"] .toc-card:hover {
        border-color: var(--gold);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 252, .9),
          0 2px 4px rgba(74, 52, 22, .06),
          0 10px 22px -6px rgba(74, 52, 22, .20),
          0 24px 48px -24px rgba(74, 52, 22, .18),
          0 0 0 3px rgb(var(--gold-rgb) / .05);
      }
    }

    /* DETAIL DISCLOSURES — the open state earns a stronger gold edge */
    :root[data-theme="light"] details.figure-supplement,
    :root[data-theme="light"] details.nested-supplement,
    :root[data-theme="light"] details.toc-appendix,
    :root[data-theme="light"] details.math-case-button {
      border-color: rgb(var(--gold-rgb) / .55);
    }

    :root[data-theme="light"] details.figure-supplement[open],
    :root[data-theme="light"] details.toc-appendix[open],
    :root[data-theme="light"] details.nested-supplement[open],
    :root[data-theme="light"] details.math-case-button[open] {
      border-color: var(--gold);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 2px rgba(74, 52, 22, .04),
        0 6px 16px -8px rgba(74, 52, 22, .14);
    }

    /* Case 1 open: keep the dark cognac left edge that Case 1 (closed)
       and Case 2 share so all three states read as one exhibit set. */
    :root[data-theme="light"] details.math-case-button:not(.supplement)[open] {
      border-left-color: #5a3d0a;
    }

    /* ZOOM-HINT BADGE on figures — brighter brass */
    :root[data-theme="light"] .zoom-hint {
      background: rgba(252, 244, 218, .92);
      border-color: rgb(var(--gold-rgb) / .55);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 240, .85),
        0 1px 2px rgba(74, 52, 22, .08),
        0 6px 14px -6px rgba(74, 52, 22, .22);
    }

    /* FIGURE IMAGES — warmer ground + softer atmospheric drop */
    :root[data-theme="light"] figure.fig img {
      background: #fffdf3;
      border-color: rgb(var(--gold-rgb) / .35);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 252, .85),
        0 1px 2px rgba(74, 52, 22, .05),
        0 10px 28px -14px rgba(74, 52, 22, .25),
        0 24px 48px -28px rgba(74, 52, 22, .15);
    }

    @media (hover: hover) {
      :root[data-theme="light"] figure.fig img:hover {
        border-color: var(--gold);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 252, .9),
          0 1px 2px rgba(74, 52, 22, .06),
          0 14px 36px -14px rgba(74, 52, 22, .32),
          0 32px 64px -28px rgba(74, 52, 22, .20);
      }
    }

    /* INK STRENGTHENING — body prose against the warmer paper.
       Bumping ink against vellum lifts readability without crossing
       into the "harsh black" zone that flattens against off-white. */
    :root[data-theme="light"] body { color: var(--ink); }
    :root[data-theme="light"] h2.section,
    :root[data-theme="light"] h3.arg,
    :root[data-theme="light"] .app-entry h3:first-child,
    :root[data-theme="light"] header.cover h1,
    :root[data-theme="light"] nav.toc h2,
    :root[data-theme="light"] .deck-here-title,
    :root[data-theme="light"] .deck-brand-name {
      color: #0a0500;
    }

    /* HL HIGHLIGHTERS — the under-baseline marker stripe stronger
       so it registers as deliberate ink-highlighting on cream, not a
       faint band. */
    :root[data-theme="light"] .hl-num,
    :root[data-theme="light"] .hl {
      background: linear-gradient(180deg,
        transparent 58%,
        rgb(var(--gold-rgb) / .38) 58%);
    }

    :root[data-theme="light"] .hl {
      background: linear-gradient(180deg,
        transparent 58%,
        rgb(var(--gold-rgb) / .42) 58%);
    }

    /* INDEX OVERLAY BACKDROP — warmer wash so the modal sits on a
       darkened-cream stage instead of cold black */
    :root[data-theme="light"] .deck-index {
      background: rgba(54, 38, 14, .55);
    }

    :root[data-theme="light"] .deck-index-panel {
      border-color: rgb(var(--gold-rgb) / .42);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .9),
        0 2px 4px rgba(74, 52, 22, .08),
        0 28px 64px -16px rgba(74, 52, 22, .42),
        0 60px 120px -40px rgba(74, 52, 22, .32);
    }

    /* SANAA / EXHIBIT BOX — premium gold-left-bar card */
    :root[data-theme="light"] .sanaa-variant-box {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .04) 0%, transparent 60%),
        #fffdf6;
      border-color: rgb(var(--gold-rgb) / .42);
      border-left: 5px solid var(--gold);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        inset 0 0 0 1px rgb(var(--gold-rgb) / .06),
        0 4px 14px -6px rgba(74, 52, 22, .14);
    }

    /* CRUCIFIXION CUSTOM BLOCK — the symmetry cards. Lift them. */
    :root[data-theme="light"] #slide-5 .crux-card,
    :root[data-theme="light"] #slide-5 .crux-question {
      background:
        radial-gradient(70% 50% at 0% 0%, rgb(var(--gold-rgb) / .10), transparent 60%),
        linear-gradient(180deg, #fffdf3, #fdf8e6);
      border-color: rgb(var(--gold-rgb) / .42);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 2px rgba(74, 52, 22, .04),
        0 6px 16px -6px rgba(74, 52, 22, .16);
    }

    :root[data-theme="light"] #slide-5 .crux-card-result {
      background:
        radial-gradient(70% 50% at 0% 0%, rgb(var(--kill-rgb) / .14), transparent 60%),
        linear-gradient(180deg, #fdf2ec, #fbe9de);
      border-color: rgb(var(--kill-rgb) / .42);
    }

    :root[data-theme="light"] #slide-5 .crux-question {
      background:
        radial-gradient(75% 60% at 50% 0%, rgb(var(--kill-rgb) / .16), transparent 60%),
        linear-gradient(180deg, #fdf2ec, #fbe9de);
      border-color: rgb(var(--kill-rgb) / .48);
      box-shadow:
        inset 0 0 0 1px rgb(var(--kill-rgb) / .08),
        0 1px 2px rgba(120, 40, 30, .06),
        0 16px 40px -22px rgba(120, 40, 30, .35);
    }

    :root[data-theme="light"] #slide-5 .crux-arrow {
      background:
        linear-gradient(180deg, #fffdf3, #fdf6e2);
      border-color: rgb(var(--gold-rgb) / .55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 4px 12px -4px rgba(74, 52, 22, .18);
    }

    /* PRE-EVIDENCE LABEL — eyebrow with a brass tick */
    :root[data-theme="light"] .pre-evidence-label::after {
      background: linear-gradient(90deg, var(--gold), var(--bold-gold));
      box-shadow: 0 0 4px rgb(var(--gold-rgb) / .35);
    }

    /* CODE INLINE — gold-tinted card chip */
    :root[data-theme="light"] code {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .07) 0%,
          rgb(var(--gold-rgb) / .03) 100%);
      border-color: rgb(var(--gold-rgb) / .30);
      box-shadow: inset 0 1px 0 rgba(255, 252, 240, .65);
    }

    /* IX-ITEM (modal index entries) — current item gets a richer wash */
    :root[data-theme="light"] .ix-item[aria-current="true"] {
      background:
        linear-gradient(90deg,
          rgb(var(--gold-rgb) / .14) 0%,
          rgb(var(--gold-rgb) / .06) 100%);
      box-shadow: inset 3px 0 0 var(--gold);
    }

    /* DECK-TOAST — confirmation pill */
    :root[data-theme="light"] .deck-toast {
      background:
        linear-gradient(180deg, #fffdf6 0%, #fdf6e2 100%);
      border-color: var(--gold);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .95),
        inset 0 -1px 0 rgb(var(--gold-rgb) / .15),
        0 4px 10px -2px rgba(74, 52, 22, .14),
        0 14px 36px -8px rgba(74, 52, 22, .26);
    }

    /* TAG-MINI ROW — subtle pill set */
    :root[data-theme="light"] .tag-row .tag-mini.gold {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .08) 0%,
          rgb(var(--gold-rgb) / .03) 100%);
      border-color: rgb(var(--gold-rgb) / .42);
      box-shadow: inset 0 1px 0 rgba(255, 252, 240, .7);
    }

    /* SUPPLEMENT NESTED — slightly tinted background */
    :root[data-theme="light"] .nested-supplement {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .03) 0%, transparent 70%),
        #fffdf6;
    }

    /* ARGUMENT NOTE BOX — author voice (slate) gets a hair more lift */
    :root[data-theme="light"] .argument-note-box {
      background:
        linear-gradient(180deg, rgb(var(--slate-rgb) / .055), transparent 75%),
        #fffdf6;
      border-color: rgb(var(--gold-rgb) / .28);
      border-left: 3px solid var(--slate);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 4px 10px -5px rgba(74, 52, 22, .12);
    }

    :root[data-theme="light"] .gold-note-box {
      border-left-color: var(--gold);
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .07), transparent 75%),
        #fffdf6;
    }

    /* EVIDENCE GROUP — slightly visible warm panel */
    :root[data-theme="light"] .evidence-group {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .03) 0%, transparent 50%),
        rgba(255, 252, 240, .35);
      border-color: rgb(var(--gold-rgb) / .26);
    }

    /* TABARI VERDICT — warm gold fill */
    :root[data-theme="light"] #app-A6 .primary-source-quote .tabari-verdict {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .10), rgb(var(--gold-rgb) / .04));
      box-shadow: inset 0 1px 0 rgba(255, 252, 240, .8);
    }

    /* CRUX KICKER — slight foil glow */
    :root[data-theme="light"] #slide-5 .crux-kicker {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .10) 0%,
          rgb(var(--gold-rgb) / .04) 100%);
      border-color: rgb(var(--gold-rgb) / .45);
      box-shadow: inset 0 1px 0 rgba(255, 252, 240, .8);
    }

    /* ================================================================
       LIGHT-MODE FINAL REFINEMENT — readability first.
       The polish above added richness, this pass restores quiet so the
       gold reads as accent rather than fill. Premium = restraint:
       chrome bars near-invisible, current-slide chip reads as pure type,
       cards crisp white, brand letterforms unblurred. The foil only
       lives on the parts the user is meant to ACT on.
       ================================================================ */

    /* PAPER — true vellum, but a touch lighter so prose reads crisp.
       The page-light radial on body still supplies the warmth; the
       paper itself stays cream-near-white, like a hardback page. */
    :root,
    :root[data-theme="light"] {
      --bg: #fbf8ee;
      --panel: #ffffff;
      --ink: #15100a;
    }

    /* CARDS — clean white. The page-light radial behind them does the
       warmth work; the panel itself reads as a perfectly printed page.
       One precise hairline; the multi-layer shadow stack carries the
       lift. */
    :root[data-theme="light"] .slide {
      background: #ffffff;
      border: 1px solid rgb(var(--gold-rgb) / .22);
      box-shadow: var(--shadow-lift);
    }

    /* CHROME BARS — a near-invisible vellum wash. The hairline gold
       seam below the top bar (and above the bottom bar) is the only
       overt design signal; everything else is restraint. */
    :root[data-theme="light"] .deck-top {
      background: rgba(252, 249, 241, .80);
      border-bottom: 1px solid rgb(var(--gold-rgb) / .22);
      box-shadow:
        0 1px 0 rgb(var(--gold-rgb) / .06),
        0 4px 12px -10px rgba(74, 52, 22, .08);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
    }

    :root[data-theme="light"] .deck-bottom {
      background: rgba(252, 249, 241, .80);
      border-top: 1px solid rgb(var(--gold-rgb) / .22);
      box-shadow:
        0 -1px 0 rgb(var(--gold-rgb) / .06),
        0 -4px 12px -10px rgba(74, 52, 22, .08);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
    }

    /* DECK-BRAND (top-left wordmark) — pure typographic identity.
       No text-shadow, no fancy treatment; just refined letterforms in
       the deepest ink, with the gold kicker beside as the only accent. */
    :root[data-theme="light"] .deck-brand-name {
      color: #0a0500;
      text-shadow: none;
      letter-spacing: -.022em;
    }

    :root[data-theme="light"] .deck-brand-kind {
      color: var(--gold);
      opacity: .95;
    }

    /* DECK-HERE (bottom-bar current-slide chip) — the "where you are"
       indicator. Pure transparent surface, gold hairline border, the
       title reads as clean printed text with nothing competing behind
       it. This is the chip that needs the most discipline. */
    :root[data-theme="light"] .deck-here {
      background: transparent;
      border-color: rgb(var(--gold-rgb) / .40);
      box-shadow: none;
    }

    @media (hover: hover) {
      :root[data-theme="light"] .deck-here:hover {
        background: rgb(var(--gold-rgb) / .05);
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .05);
      }
    }

    /* The title inside the chip — deep ink, cleanly set */
    :root[data-theme="light"] .deck-here-title {
      color: #0a0500;
      font-weight: 600;
    }

    /* The INDEX tag prefix — confident gold, no opacity drop */
    :root[data-theme="light"] .deck-here-tag {
      color: var(--gold);
      opacity: 1;
    }

    /* Light-mode divider polish — the cream/vellum background swallows a
       flat warm hairline, so the desktop CARDS │ Title divider is
       re-rendered as a diamond-cut gradient: a soft amber wash at the
       edges fading into a concentrated centre gleam, then easing back
       out. The transparent terminators kill any hard ends, so on cream
       it reads as an engraved rule catching the light — not a printed
       line. Calibrated against the chip border (gold @ .40) so the
       divider always sits a beat softer than the chip's own outline. */
    @media (min-width: 901px) {
      :root[data-theme="light"] .deck-here-tag::after {
        background: linear-gradient(
          to bottom,
          transparent 0%,
          rgb(var(--gold-rgb) / .14) 12%,
          rgb(var(--gold-rgb) / .58) 50%,
          rgb(var(--gold-rgb) / .14) 88%,
          transparent 100%
        );
      }
    }

    /* The trailing open-index chevron — gold by default, brightens on hover */
    :root[data-theme="light"] .deck-here-arrow {
      stroke: var(--gold);
    }

    /* TOP-BAR CHIPS — quieter brass discs. Single soft radial, hairline
       gold edge, one inset cream highlight. Hover earns the warm halo;
       at rest they sit quietly. */
    :root[data-theme="light"] .deck-help,
    :root[data-theme="light"] .deck-share,
    :root[data-theme="light"] .deck-theme {
      background:
        radial-gradient(circle at 50% 28%,
          rgba(255, 252, 240, .85) 0%,
          rgba(250, 244, 222, .55) 100%);
      border-color: rgb(var(--gold-rgb) / .48);
      color: var(--gold-2);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .95),
        0 1px 2px rgba(74, 52, 22, .07);
    }

    @media (hover: hover) {
      :root[data-theme="light"] .deck-help:hover,
      :root[data-theme="light"] .deck-share:hover,
      :root[data-theme="light"] .deck-theme:hover {
        background:
          radial-gradient(circle at 50% 28%,
            rgba(255, 253, 244, 1) 0%,
            rgba(252, 244, 218, .8) 100%);
        border-color: var(--gold);
        color: var(--ink-strong);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 252, 1),
          0 2px 4px rgba(74, 52, 22, .10),
          0 0 0 3px rgb(var(--gold-rgb) / .06);
      }
    }

    :root[data-theme="light"] .deck-help[aria-expanded="true"] {
      background:
        radial-gradient(circle at 50% 28%,
          rgba(255, 252, 240, 1) 0%,
          rgba(252, 240, 198, .85) 100%);
      border-color: var(--gold);
      color: var(--ink-strong);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, 1),
        0 2px 4px rgba(74, 52, 22, .12),
        0 0 0 3px rgb(var(--gold-rgb) / .08);
    }

    /* BOTTOM-BAR NAV CHIPS — calmer too */
    :root[data-theme="light"] .deck-nav {
      background: rgba(252, 248, 236, .55);
      border-color: rgb(var(--gold-rgb) / .48);
      color: var(--gold-2);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 2px rgba(74, 52, 22, .06);
    }

    @media (hover: hover) {
      :root[data-theme="light"] .deck-nav:hover {
        background: rgb(var(--gold-rgb) / .08);
        border-color: var(--gold);
        color: var(--ink-strong);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 252, .9),
          0 2px 4px rgba(74, 52, 22, .10),
          0 0 0 3px rgb(var(--gold-rgb) / .06);
      }
    }

    /* HEADLINE H1 — drop the text-shadow. Pure deep ink, clean type. */
    :root[data-theme="light"] header.cover h1 {
      text-shadow: none;
      color: #0a0500;
    }

    /* HL HIGHLIGHTERS — slightly dialed back so they read as marker
       stripes under important words, not solid bands. */
    :root[data-theme="light"] .hl-num,
    :root[data-theme="light"] .hl {
      background: linear-gradient(180deg,
        transparent 60%,
        rgb(var(--gold-rgb) / .32) 60%);
    }

    :root[data-theme="light"] .hl {
      background: linear-gradient(180deg,
        transparent 60%,
        rgb(var(--gold-rgb) / .36) 60%);
    }

    /* SOURCE-LINK PILLS — quieter at rest, brighter on engagement.
       Hover/focus stays the same premium ramp. */
    :root[data-theme="light"] .source-link {
      background: rgb(var(--gold-rgb) / .055);
      border-color: rgb(var(--gold-rgb) / .42);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 240, .75),
        0 1px 1px rgba(74, 52, 22, .04);
    }

    /* INK BUMP — body prose against the slightly lighter paper.
       A whisper darker so every paragraph reads crisp. */
    :root[data-theme="light"] body,
    :root[data-theme="light"] p,
    :root[data-theme="light"] li,
    :root[data-theme="light"] .argument-card p,
    :root[data-theme="light"] .hadith p,
    :root[data-theme="light"] .app-entry p {
      color: #15100a;
    }

    /* CARD INTERIOR — primary-source-quote slightly lighter base so it
       reads as paper-on-paper rather than tinted exhibit. The gold left
       bar + corner glow + atmospheric shadow still carry the authority
       signal; the body just becomes a touch more readable. */
    :root[data-theme="light"] .primary-source-quote,
    :root[data-theme="light"] blockquote.primary-source-quote {
      background:
        radial-gradient(110% 70% at 0% 0%, rgb(var(--gold-rgb) / .11), transparent 55%),
        linear-gradient(170deg, #fffefa 0%, #fffbef 100%);
      border-color: rgb(var(--gold-rgb) / .28);
    }

    /* TOC CARDS — lighter base for legibility */
    :root[data-theme="light"] .toc-card {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .05) 0%, transparent 50%),
        #fffefa;
      border-color: rgb(var(--gold-rgb) / .30);
    }

    /* INTRO BOX — lighter base */
    :root[data-theme="light"] .intro-box {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .07) 0%, transparent 55%),
        #fffefa;
      border-color: rgb(var(--gold-rgb) / .36);
    }

    /* STAT-GRID / FACT-CELL — lighter palette.
       (math-case + details.math-case-button get a stronger dark-gold
       left edge from the rule above; intentionally NOT included here
       so border-color doesn't wipe their left-edge color.) */
    :root[data-theme="light"] .stat-grid .stat,
    :root[data-theme="light"] .fact-row .fact-cell {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .05) 0%, transparent 50%),
        #fffefa;
      border-color: rgb(var(--gold-rgb) / .35);
    }

    /* NUM-LINE — cleanest base */
    :root[data-theme="light"] .num-line > li {
      background: #fffefa;
      border-color: rgb(var(--gold-rgb) / .22);
    }

    /* QUOTE-MINI — lighter */
    :root[data-theme="light"] .quote-mini {
      background:
        radial-gradient(75% 100% at 0% 50%, rgb(var(--gold-rgb) / .10), transparent 60%),
        #fffefa;
      border-color: rgb(var(--gold-rgb) / .36);
    }

    /* INDEX MODAL PANEL — pure white panel, gold-edged */
    :root[data-theme="light"] .deck-index-panel {
      background:
        radial-gradient(ellipse at 80% 0%, rgb(var(--gold-rgb) / .08), transparent 55%),
        #ffffff;
      border-color: rgb(var(--gold-rgb) / .36);
    }

    /* MUTED TEXT BUMP — slate prose secondary lines stay readable */
    :root[data-theme="light"] {
      --muted: #6e5b44;
      --faint: #8c7a62;
    }

    /* ================================================================
       EDITORIAL MASTERPIECE PASS — LIGHT MODE
       Final calibration toward illuminated-manuscript gravity.
       Every rule below is in service of one goal: this should read
       as a sacred printed artifact, not a screen. Restraint over
       decoration; ornament only where it earns its presence.
       ================================================================ */

    /* -- ATMOSPHERE: page-light + warm floor + parchment whisper.
          Two soft lamps overhead, one below, plus an almost-invisible
          warm grain that kills the plastic flat-pixel look. The grain
          sits at 55% opacity, multiply-blended, scoped behind every
          paintable surface. */
    :root[data-theme="light"] body {
      background:
        radial-gradient(ellipse 82rem 48rem at 50% -18rem,
          rgb(var(--gold-rgb) / .16) 0%,
          rgb(var(--gold-rgb) / .04) 38%,
          transparent 72%),
        radial-gradient(ellipse 64rem 32rem at 50% 112%,
          rgb(var(--gold-2-rgb) / .07),
          transparent 65%),
        #fbf7eb;
    }

    :root[data-theme="light"] body::before {
      content: "";
      position: fixed; inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .42;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.36   0 0 0 0 0.24   0 0 0 0 0.10   0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      background-size: 320px 320px;
    }

    /* The .deck-app already has `isolation: isolate` in its base
       style which creates a stacking context — that's sufficient to
       lift it above the body::before grain. No need for any
       position/z-index overrides here; doing so would clobber the
       base z-index values that deck-top, deck-bottom, and modal
       overlays depend on. */

    /* -- CARDS — a fine printed page, not a floating panel.
          No drop shadow. Instead the card defines itself with two
          refined gold hairlines (outer + inset) and an interior
          warm vertical fade — the same vocabulary as a letterpress
          chapter opening on hand-pressed paper. The double-rule
          edge gives presence without lifting the card off the
          page, so the deck reads as a printed artifact, not UI. */
    :root[data-theme="light"] .slide {
      background:
        linear-gradient(180deg,
          #fffdf6 0%,
          #ffffff 18%,
          #ffffff 78%,
          #fffcf2 100%);
      border: 1px solid rgb(var(--gold-rgb) / .34);
      box-shadow:
        0 0 0 1px rgba(255, 255, 252, .95) inset,
        0 0 0 2px rgb(var(--gold-rgb) / .08) inset;
    }

    /* -- TOP BAR: more honest editorial chrome. The cream wash sits
          one shade warmer; the gold seam below pulls in a touch of
          true brass at the centre so it reads as a foil edge, not a
          painted line. */
    :root[data-theme="light"] .deck-top {
      background:
        linear-gradient(180deg,
          rgba(254, 250, 240, .88) 0%,
          rgba(252, 247, 234, .82) 100%);
      border-bottom: 1px solid transparent;
      box-shadow:
        0 1px 0 0 rgb(var(--gold-rgb) / .04),
        0 4px 14px -10px rgba(74, 52, 22, .10);
      backdrop-filter: blur(16px) saturate(170%);
      -webkit-backdrop-filter: blur(16px) saturate(170%);
    }

    /* a true foil seam beneath the top bar (and above the bottom bar) —
       brighter in the middle, fading to the edges, reads as light
       catching a hand-laid gold thread. */
    :root[data-theme="light"] .deck-top::after {
      content: "";
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 1px;
      background: linear-gradient(90deg,
        rgb(var(--gold-rgb) / 0) 0%,
        rgb(var(--gold-rgb) / .14) 8%,
        rgb(var(--gold-rgb) / .42) 50%,
        rgb(var(--gold-rgb) / .14) 92%,
        rgb(var(--gold-rgb) / 0) 100%);
      pointer-events: none;
    }

    :root[data-theme="light"] .deck-bottom {
      background:
        linear-gradient(0deg,
          rgba(254, 250, 240, .88) 0%,
          rgba(252, 247, 234, .82) 100%);
      border-top: 1px solid transparent;
      box-shadow:
        0 -1px 0 0 rgb(var(--gold-rgb) / .04),
        0 -4px 14px -10px rgba(74, 52, 22, .10);
      backdrop-filter: blur(16px) saturate(170%);
      -webkit-backdrop-filter: blur(16px) saturate(170%);
    }

    :root[data-theme="light"] .deck-bottom::before {
      content: "";
      position: absolute; left: 0; right: 0; top: 0;
      height: 1px;
      background: linear-gradient(90deg,
        rgb(var(--gold-rgb) / 0) 0%,
        rgb(var(--gold-rgb) / .14) 8%,
        rgb(var(--gold-rgb) / .42) 50%,
        rgb(var(--gold-rgb) / .14) 92%,
        rgb(var(--gold-rgb) / 0) 100%);
      pointer-events: none;
    }

    /* -- BRAND wordmark: subtler optical baseline + a one-pixel
          warm highlight so the ink reads "bitten into paper". */
    :root[data-theme="light"] .deck-brand-name {
      color: #0a0500;
      text-shadow: 0 1px 0 rgba(255, 255, 252, .45);
      letter-spacing: -.018em;
      font-feature-settings: "kern", "liga", "calt";
    }

    /* -- PROGRESS strip: a true foil needle. Brighter centre, soft
          corona, faint outer bloom — the lit edge of polished brass. */
    :root[data-theme="light"] .deck-progress {
      height: 2px;
      background: linear-gradient(90deg,
        rgb(var(--gold-rgb) / .28) 0%,
        rgb(var(--gold-rgb) / .82) 22%,
        var(--gold) 55%,
        var(--bold-gold) 82%,
        #fff0c8 100%);
      box-shadow:
        0 0 5px rgb(var(--gold-rgb) / .55),
        0 0 12px rgb(var(--gold-rgb) / .28),
        0 0 1px rgba(255, 248, 220, .9);
    }

    /* -- COVER: a true frontispiece composition.
          A small foil pip sits above the kicker as the deck's seal;
          the H1 carries a touch more optical weight; the rule
          stretches into a true ornamental brush-stroke that fades
          right. The hint block sits quietly beneath, framed by a
          tasteful left-rule. */
    :root[data-theme="light"] header.cover {
      padding-top: 3vh;
      gap: 1.35rem;
    }

    :root[data-theme="light"] .cover-kicker {
      font: 800 .78rem/1 var(--sans);
      letter-spacing: .42em;
      color: var(--gold);
      opacity: 1;
    }

    :root[data-theme="light"] header.cover h1 {
      font-weight: 800;
      letter-spacing: -.052em;
      line-height: .94;
      color: #08040c;
      text-shadow: 0 1px 0 rgba(255, 255, 252, .55);
      font-feature-settings: "kern", "liga", "dlig", "swsh";
    }

    :root[data-theme="light"] .cover-rule {
      width: 6.4rem;
      height: 2px;
      background: linear-gradient(90deg,
        var(--gold) 0%,
        var(--bold-gold) 28%,
        var(--gold) 56%,
        rgb(var(--gold-rgb) / .55) 78%,
        transparent 100%);
      box-shadow: 0 1px 2px rgb(var(--gold-rgb) / .28);
      margin: .55rem 0 .25rem;
    }

    :root[data-theme="light"] .cover-hint {
      border-left: 2px solid rgb(var(--gold-rgb) / .42);
      padding-left: 1.1rem;
      color: var(--ink-soft);
      font-weight: 500;
    }

    /* -- PREMISE / ERROR / CASE / SUPPORTING MATERIAL kickers (h4) —
          tighter optical baseline, gold gets a touch more saturation,
          and a quiet foil dot precedes the label as a margin mark. */
    :root[data-theme="light"] h4 {
      position: relative;
      color: var(--gold-2);
      font-weight: 800;
      font-size: .72rem;
      letter-spacing: .24em;
      padding-bottom: .55rem;
      border-bottom-color: rgb(var(--gold-rgb) / .22);
    }

    /* the small left-margin foil dot that signs each kicker */
    :root[data-theme="light"] .evidence-group > h4:first-child,
    :root[data-theme="light"] .primary-sources > h4:first-child {
      color: var(--gold-2);
      letter-spacing: .26em;
    }

    /* the gold-edged container is fine — but pull it slightly warmer
       so it reads as faintly tinted paper, not a flat overlay. */
    :root[data-theme="light"] .evidence-group {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .03) 0%,
          rgb(var(--gold-rgb) / .008) 100%);
      border: 1px solid rgb(var(--gold-rgb) / .18);
      border-radius: var(--r-md);
    }

    /* -- PRIMARY-SOURCES (gold-edged exhibit container) — true folio
          panel. Top-down warm wash, slightly heavier gold rule at
          left, refined inner glow. The kicker inside gets centered
          micro-spacing so it reads as a label on the panel. */
    :root[data-theme="light"] .primary-sources {
      background:
        radial-gradient(85% 60% at 0% 0%, rgb(var(--gold-rgb) / .05), transparent 60%),
        linear-gradient(180deg, #fffdf2 0%, #fffaea 100%);
      border: 1px solid rgb(var(--gold-rgb) / .32);
      border-left: 4px solid var(--gold);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .9),
        0 1px 2px rgba(74, 52, 22, .04),
        0 14px 36px -22px rgba(74, 52, 22, .18);
    }

    /* -- PRIMARY-SOURCE QUOTE — the canonical exhibit. The single
          loudest calm thing on the page. Polished vellum tint, a
          true foil left-rule, a hanging open-quote glyph that sits
          in the gutter like an illuminated initial, and a refined
          citation block separated by a true gold hairline. */
    :root[data-theme="light"] .primary-source-quote,
    :root[data-theme="light"] blockquote.primary-source-quote {
      position: relative;
      padding: 1.35rem 1.5rem 1.25rem 1.65rem;
      background:
        radial-gradient(120% 70% at 0% 0%, rgb(var(--gold-rgb) / .09), transparent 58%),
        linear-gradient(170deg, #fffefa 0%, #fffaec 100%);
      border: 1px solid rgb(var(--gold-rgb) / .32);
      border-left: 4px solid var(--gold);
      border-radius: var(--r-lg);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .92),
        inset 0 0 0 1px rgb(var(--gold-rgb) / .03),
        0 1px 2px rgba(74, 52, 22, .04),
        0 18px 48px -28px rgba(74, 52, 22, .26);
      font-family: var(--serif);
      font-feature-settings: "kern", "liga", "dlig";
      color: #15100a;
    }

    /* the citation block under the quote — a true gold hairline + a
       slightly more refined uppercase ramp. */
    :root[data-theme="light"] .primary-source-quote .cite,
    :root[data-theme="light"] .primary-source-quote cite {
      color: var(--gold-2);
      letter-spacing: .14em;
      font-weight: 800;
    }

    :root[data-theme="light"] .primary-source-quote > .source-citation:last-child {
      border-top: 1px solid rgb(var(--gold-rgb) / .28);
    }

    /* -- SOURCE-LINK pills (Quran 4:11, Sahih Muslim 311, etc.) —
          true brass tag presence. A touch of inner highlight, an
          inset hairline, and a slightly warmer fill. */
    :root[data-theme="light"] .source-link {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .10) 0%,
          rgb(var(--gold-rgb) / .04) 100%);
      border-color: rgb(var(--gold-rgb) / .48);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 1px rgba(74, 52, 22, .05);
    }

    @media (hover: hover) {
      :root[data-theme="light"] .source-link:hover {
        background:
          linear-gradient(180deg,
            rgb(var(--gold-rgb) / .18) 0%,
            rgb(var(--gold-rgb) / .08) 100%);
        border-color: var(--gold);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 252, .95),
          0 1px 2px rgba(74, 52, 22, .08),
          0 0 0 3px rgb(var(--gold-rgb) / .08);
      }
    }

    /* -- VERDICT (rust callout) — the takeaway. Gains a stronger
          label, a brighter rust top-accent line that reads as a
          pull-strip, and tightened type. */
    :root[data-theme="light"] .callout {
      position: relative;
      padding: 1.2rem 1.3rem 1.15rem 1.4rem;
      background:
        radial-gradient(90% 110% at 0% 0%, rgb(var(--rust-rgb) / .14), transparent 60%),
        linear-gradient(180deg, #fff5ef 0%, #fdece4 100%);
      border: 1px solid rgb(var(--rust-rgb) / .42);
      border-left: 5px solid var(--rust);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 2px rgba(110, 28, 20, .05),
        0 16px 42px -24px rgba(110, 28, 20, .26);
    }

    :root[data-theme="light"] .callout[data-label]::before {
      color: var(--rust);
      font-weight: 800;
      letter-spacing: .26em;
      opacity: 1;
    }

    /* -- DISCLOSURE ROWS (collapsibles: Cake Analogy, Case 1, etc.)
          — refined chevron, polished hover, gold edge on open. The
          rows should read as folded sections of the same vellum, not
          as web form fields. */
    :root[data-theme="light"] details.math-case-button:not(.supplement) > summary,
    :root[data-theme="light"] details.figure-supplement > summary {
      transition: background var(--dur-chip) ease,
                  border-color var(--dur-chip) ease,
                  box-shadow var(--dur-chip) ease;
    }

    @media (hover: hover) {
      :root[data-theme="light"] details > summary:hover {
        background:
          linear-gradient(180deg,
            rgb(var(--gold-rgb) / .07) 0%,
            rgb(var(--gold-rgb) / .03) 100%);
        border-color: rgb(var(--gold-rgb) / .55);
      }
    }

    :root[data-theme="light"] details[open] > summary {
      border-color: rgb(var(--gold-rgb) / .50);
      box-shadow: inset 0 -1px 0 rgb(var(--gold-rgb) / .14);
    }

    /* -- QUOTE-MINI — refined inline quote, slightly stronger paper
          and a hint of foil top-light. */
    :root[data-theme="light"] .quote-mini {
      background:
        radial-gradient(80% 110% at 0% 0%, rgb(var(--gold-rgb) / .09), transparent 58%),
        linear-gradient(180deg, #fffefa 0%, #fffaea 100%);
      border-color: rgb(var(--gold-rgb) / .32);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 2px rgba(74, 52, 22, .04);
    }

    /* -- BOTTOM bar INDEX button at rest: gentle warm fill so the
          control reads as a piece of furniture, not a blank chip. */
    :root[data-theme="light"] .deck-here {
      background:
        linear-gradient(180deg,
          rgba(255, 252, 240, .55) 0%,
          rgba(252, 247, 228, .30) 100%);
      border-color: rgb(var(--gold-rgb) / .48);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .9),
        0 1px 2px rgba(74, 52, 22, .04);
    }

    /* the title inside the chip gains a hair more weight */
    :root[data-theme="light"] .deck-here-title {
      letter-spacing: -.005em;
    }

    /* -- TOC-PRIORITY cards — gain a touch more paper presence */
    :root[data-theme="light"] .toc-card.core,
    :root[data-theme="light"] .toc-card {
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .06) 0%, transparent 55%),
        #fffefa;
      border-color: rgb(var(--gold-rgb) / .36);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .9),
        0 1px 2px rgba(74, 52, 22, .04),
        0 10px 28px -18px rgba(74, 52, 22, .14);
    }

    /* -- KEYCAP — slightly more brass-coin presence */
    :root[data-theme="light"] .keycap {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .10) 0%,
          rgb(var(--gold-rgb) / .02) 100%);
      border-color: rgb(var(--gold-rgb) / .55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 0 rgba(74, 52, 22, .06);
    }

    /* -- DECK-REF (inline INDEX replica) — match the bottom-bar
          control's polish so the reference reads as a true echo. */
    :root[data-theme="light"] .deck-ref {
      background:
        linear-gradient(180deg,
          rgb(var(--gold-rgb) / .10) 0%,
          rgb(var(--gold-rgb) / .03) 100%);
      border-color: rgb(var(--gold-rgb) / .55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 252, .85),
        0 1px 0 rgba(74, 52, 22, .06);
    }

    /* ================================================================
       CROSS-PLATFORM POLISH & BUG-HARDENING
       Ensures the deck reads, performs, and behaves identically on
       iOS Safari, Android Chrome, desktop Chrome, Safari, Firefox,
       and Edge. Each rule below addresses a specific real-world
       compatibility, perf, or input-handling difference.
       ================================================================ */

    /* TYPOGRAPHIC RENDERING — Retina/HiDPI text, ligatures, kerning.
       optimizeLegibility kicks in kerning + ligatures at the cost of
       very mild measurement work — fine for body prose. The webkit/
       moz smoothing pair pulls iOS/macOS subpixel renderers off the
       stair-stepped grayscale into clean anti-aliased ink so the
       deck's serif type reads as fine print, not pixels. */
    html {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
      font-variant-ligatures: common-ligatures contextual;
    }

    /* TAP-HIGHLIGHT — kill the default blue/grey iOS Safari + Android
       tap rectangle on every interactive surface. The deck already
       sets this on a handful of buttons; this hoists it to the
       universal selector for total consistency. The focus-visible
       ring still works because it's drawn by outline, not by the
       webkit-tap-highlight system. */
    a, button, summary, label, [role="button"], [tabindex] {
      -webkit-tap-highlight-color: transparent;
    }

    /* TOUCH PRECISION — every chrome / nav control gets manipulation
       so a double-tap never tries to zoom. The card stage stays at
       pan-y so vertical scroll still works inside slides. */
    .deck-top, .deck-bottom, .deck-hints, .deck-toast,
    .deck-brand, .deck-nav, .deck-here, .deck-help,
    .deck-share, .deck-theme, .ix-item, .ix-group {
      touch-action: manipulation;
    }

    /* SCROLLING — modern overscroll containment + smooth momentum on
       iOS without exposing the white safari rubber-band underlay. */
    html, body {
      overscroll-behavior: none;
    }

    /* FOCUSABLE BODY for instant keyboard navigation on Safari.
       The JS init below sets body.tabIndex = -1 and focuses it on
       load so I / ← / → / Home / End work the moment the page
       paints, without the user having to click first. The outline
       reset hides the focus ring that the synthetic focus would
       otherwise paint around the entire viewport. Real focusable
       elements (buttons, links) still show their own focus-visible
       ring. */
    body:focus { outline: none; }
    body:focus-visible { outline: none; }

    /* GPU-LAYER HINTS for the elements that animate (transform on
       the deck track). The chrome bars are already promoted via
       `transform: translateZ(0)` in their own component blocks, which
       is the actual compositor hint that matters; a `will-change:
       backdrop-filter` here did nothing useful (backdrop-filter is not
       a compositor-only property the way transform/opacity are) and
       Chromium reserves additional layer memory whenever will-change
       names a non-trivial property — net loss with no gain. */
    .deck-track { will-change: transform; }

    /* BACKDROP-FILTER FALLBACK — Firefox honours backdrop-filter
       only behind feature flags on older versions, and a handful
       of Android browsers ignore it. The @supports negative ensures
       those clients still see a legible chrome bar (solid wash, no
       transparency) instead of the partially-translucent intent. */
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      :root[data-theme="light"] .deck-top,
      :root[data-theme="light"] .deck-bottom {
        background: #fbf7eb;
      }
      :root[data-theme="dark"] .deck-top,
      :root[data-theme="dark"] .deck-bottom {
        background: #0d0c0a;
      }
    }

    /* BACKDROP-FILTER FALLBACK (popovers + lightbox) — the deck hints,
       toast, index panel/scrim, the fullscreen lightbox overlay, its
       glass control chips and the in-figure zoom-hint pill all lean on
       blur(6px)–blur(18px) for their glassy read. Each already paints a
       (near-)opaque base fill underneath — the --popover-bg gradients,
       the --panel wash, the lightbox's near-solid scrim, the index
       scrim's rgba(6,5,4,.78), the cream chip gradients (.88–.92α) and
       the zoom-hint's rgba(247,238,212,.9) — so on clients that lack
       backdrop-filter (very old iOS Safari <9, blur-flagged Firefox,
       some Android WebViews) we simply drop the filter. That leaves the
       opaque wash intact — overlays/chips stay legible and the content
       beneath does NOT bleed through unblurred. The index scrim, lightbox
       chips and zoom-hint use the same base fill in both themes, so they
       are matched theme-agnostically here. */
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      :root[data-theme="light"] .deck-hints,
      :root[data-theme="light"] .deck-toast,
      :root[data-theme="light"] .deck-index-panel,
      :root[data-theme="light"] .lightbox,
      :root[data-theme="dark"] .deck-hints,
      :root[data-theme="dark"] .deck-toast,
      :root[data-theme="dark"] .deck-index-panel,
      :root[data-theme="dark"] .lightbox,
      .deck-index,
      .zoom-hint,
      .lightbox-btn {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    }

    /* DATA-SAVER — when the user/OS/browser asks to reduce data, drop the
       GPU-heavy live backdrop blur on the always-on chrome bars and the
       popovers. The bars fall back to the SAME opaque fills used when
       backdrop-filter is unsupported (above), and the popovers already
       paint their own opaque base — so the look holds while sparing the
       compositor on low-end mobile. Capable devices on a normal
       connection are untouched. */
    @media (prefers-reduced-data: reduce) {
      .deck-top,
      .deck-bottom,
      .deck-hints,
      .deck-toast,
      .deck-index-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      :root[data-theme="light"] .deck-top,
      :root[data-theme="light"] .deck-bottom {
        background: #fbf7eb;
      }
      :root[data-theme="dark"] .deck-top,
      :root[data-theme="dark"] .deck-bottom {
        background: #0d0c0a;
      }
    }

    /* GRAIN OVERLAY — lighter on small / weak displays to keep
       compositor cheap. Below 700px (phones) we drop the multiply
       layer entirely; phones don't gain visible grain depth from
       the SVG-blit overhead. */
    @media (max-width: 700px) {
      :root[data-theme="light"] body::before,
      :root[data-theme="dark"] body::before {
        display: none;
      }
    }

    /* PREFERS-REDUCED-TRANSPARENCY — users who request opacity off
       (macOS Reduce Transparency, Windows Transparency Effects off)
       get a flat chrome bar and no grain layer. */
    @media (prefers-reduced-transparency: reduce) {
      :root[data-theme="light"] body::before,
      :root[data-theme="dark"] body::before { display: none; }
      :root[data-theme="light"] .deck-top,
      :root[data-theme="light"] .deck-bottom { background: #fbf7eb; backdrop-filter: none; -webkit-backdrop-filter: none; }
      :root[data-theme="dark"] .deck-top,
      :root[data-theme="dark"] .deck-bottom { background: #0d0c0a; backdrop-filter: none; -webkit-backdrop-filter: none; }
    }

    /* PREFERS-REDUCED-MOTION — kill the transitions I added so users
       who request reduced motion don't see the 150ms cross-fade on
       hover ramps. The deck already disables card-glide animation
       in its existing reduce-motion rules; this extends that
       discipline to every polish-pass ramp. */
    @media (prefers-reduced-motion: reduce) {
      :root[data-theme="light"] details > summary,
      :root[data-theme="light"] .source-link,
      :root[data-theme="dark"] details > summary,
      :root[data-theme="dark"] .source-link {
        transition: none !important;
      }
    }

    /* IMAGE RENDERING — sharper figure scaling on browsers that
       support the hint. Helps the manuscript / infographic JPEGs
       stay crisp when scaled down on hi-DPI displays. */
    .fig img, figure.fig img {
      image-rendering: -webkit-optimize-contrast;
    }

    /* PREFERS-CONTRAST: more — High-contrast mode (Windows, macOS,
       iOS, Android accessibility settings) — bump all hairlines to
       full opacity so the borders are unmistakable. */
    @media (prefers-contrast: more) {
      :root[data-theme="light"] .slide,
      :root[data-theme="light"] .primary-source-quote,
      :root[data-theme="light"] .primary-sources,
      :root[data-theme="light"] .evidence-group,
      :root[data-theme="light"] .quote-mini,
      :root[data-theme="light"] .toc-card,
      :root[data-theme="light"] .math-case,
      :root[data-theme="light"] details.math-case-button {
        border-color: var(--gold) !important;
      }
      :root[data-theme="dark"] .slide,
      :root[data-theme="dark"] .primary-source-quote,
      :root[data-theme="dark"] .primary-sources,
      :root[data-theme="dark"] .evidence-group,
      :root[data-theme="dark"] .quote-mini,
      :root[data-theme="dark"] .toc-card {
        border-color: var(--gold) !important;
      }
    }

    /* TEXT SELECTION — let readers select and copy any prose or
       quote (citations matter for this deck). The deck previously
       had no explicit selection style; lock to a gold tint so
       highlighted text stays on-brand instead of falling back to
       the browser's default lurid blue. */
    ::selection {
      background: rgb(var(--gold-rgb) / .28);
      color: var(--ink-strong);
    }
    ::-moz-selection {
      background: rgb(var(--gold-rgb) / .28);
      color: var(--ink-strong);
    }

    /* SCROLL ANCHORING — chrome bars never want to be scroll-
       anchored to (their position is sticky / fixed). Turning this
       off prevents subtle layout shift when DOM mutates near them. */
    .deck-top, .deck-bottom { overflow-anchor: none; }

    /* CURSOR clarity — every clickable surface gets the pointer
       cursor explicitly so desktop users never wonder if something
       is interactive. Hover-only — touch devices ignore cursor. */
    button:not(:disabled), summary, .source-link, [role="button"],
    .ix-item, .ix-group, .deck-nav, .deck-here, .deck-help,
    .deck-share, .deck-theme, .deck-brand {
      cursor: pointer;
    }

    /* PRINT — ensure body::before grain layer doesn't print and
       chrome bars don't print (they have no print value). */
    @media print {
      body::before { display: none !important; }
      .deck-top, .deck-bottom, .deck-index, .deck-hints, .deck-toast { display: none !important; }
    }

    /* PWA / STANDALONE — when the deck is installed as a PWA on
       iOS or Android, force the safe-area inset values to be used
       so the chrome paints correctly under the status bar. */
    @media (display-mode: standalone), (display-mode: fullscreen) {
      .deck-app { height: 100vh; height: 100dvh; }
    }

    /* MOTION COSTS — the deck-track is the only element that
       animates frequently (per-nav transform). Adding a transform:
       translateZ(0) hint preemptively promotes it to its own layer
       BEFORE the first transition, so the first nav is as fast as
       the second. */
    .deck-track {
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* INERT POLYFILL — modern browsers respect [inert] but for
       safety, add visibility: hidden as a fallback when the index
       overlay is open. (The deck-app sibling is non-interactive
       while the modal is up.) */
    body.deck-lock .deck-app {
      pointer-events: none;
    }

    /* ---------- reset + base ---------- */
    /* color-scheme tells the browser engine the page supports both modes
       so native chrome (form controls, focus rings, selection menu, the
       canvas behind scrollbars, the body background before CSS parses)
       renders in the correct theme — paired with the <meta> bootstrap
       this eliminates the white-flash window on first paint completely.
       accent-color tints native controls (checkboxes, radio buttons,
       text-selection highlight on some engines) with the deck's gold,
       so any future <input> stays on-brand without per-control CSS. */
    :root {
      color-scheme: light dark;
      accent-color: var(--gold);
    }

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

    /* normalise the native button surface across engines so the deck's
       chip styling reads pixel-identical on iOS Safari (which otherwise
       paints a faint native chrome over <button>), Android Chrome, and
       legacy Edge. -webkit-appearance covers Safari + older Blink;
       appearance covers modern browsers. font: inherit pulls the deck's
       serif/sans cascade through so buttons never fall back to the UA
       sans-serif at 13px. */
    button {
      -webkit-appearance: none;
      appearance: none;
      font: inherit;
      color: inherit;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      /* hard-stop the iOS document rubber-band. Without this, the FIRST
         vertical drag inside a card briefly translates the whole page
         (and triggers iOS Safari's toolbar fade) before .slide takes
         the gesture — that's the "swipes the entire page up at first"
         feeling. The card itself uses overscroll-behavior:contain
         below, which pairs with this to keep every scroll event inside
         the slide. */
      overscroll-behavior: none;
    }

    html {
      font-size: 17px;
      background: var(--bg);
      font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
      /* lock the base size against iOS Safari's auto-inflation when the
         device rotates to landscape — otherwise a card that fit a single
         viewport in portrait suddenly overflows after a rotation. */
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      color: var(--ink);
      font-family: var(--serif);
      line-height: 1.55;
      font-variant-numeric: oldstyle-nums proportional-nums;
      /* a soft amber light from above (like a desk lamp on the page),
         centered on the optical axis of the deck so the warm glow
         doesn't pull the eye to either side. An earlier rust radial at
         0% 110% (bottom-LEFT corner) was creating a left-biased warm
         pool that read as the cards being shifted left of center —
         removed entirely so the canvas behind the card stays perfectly
         symmetric. Theme-aware via the gold-rgb token: light mode
         reads as cream lit by tungsten; dark mode reads as a leather
         book lit by a single overhead brass lamp. */
      background:
        radial-gradient(circle at 50% -22rem, rgb(var(--gold-rgb) / .08), transparent 36rem),
        var(--bg);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-kerning: normal;
      /* never let the browser fake a missing bold/italic — system fonts
         already ship every weight we use, so synthesis only ever produces
         a fuzzy slanted glyph that hurts readability on small text. */
      font-synthesis: none;
      overflow: hidden;
      /* Pin the body to the viewport. Without this, iOS Safari treats
         the FIRST vertical drag inside a card as a document gesture
         and briefly translates the page / fades its toolbar before the
         .slide takes the scroll. position:fixed + inset:0 makes the
         body undraggable: every vertical pan goes straight to the
         only real scroller (.slide) with no document handoff. */
      position: fixed;
      inset: 0;
    }

    /* numerals that must not jitter / must align in totals */
    .deck-count,
    .math-total,
    .math-case,
    .math-case-button,
    .source-link,
    .ref,
    .tag,
    .app-label,
    code,
    .arabic-term,
    .stat-grid .stat .stat-value,
    .hl-num {
      font-variant-numeric: tabular-nums;
    }

    a {
      color: inherit;
      text-decoration: none;
      text-underline-offset: .18em;
      transition: color var(--dur-chip) ease, text-decoration-color var(--dur-chip) ease;
    }

    @media (hover: hover) {
      a:hover {
        color: var(--gold-2);
        text-decoration: underline;
      }
    }

    @supports selector(:focus-visible) {
      a:focus-visible,
      button:focus-visible,
      select:focus-visible,
      input:focus-visible,
      summary:focus-visible,
      details:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 3px;
        border-radius: 4px;
      }
    }

    @supports not selector(:focus-visible) {
      a:focus,
      button:focus,
      select:focus,
      input:focus,
      summary:focus,
      details:focus {
        outline: 2px solid var(--focus);
        outline-offset: 3px;
        border-radius: 4px;
      }
    }

    img,
    video,
    iframe,
    svg,
    canvas {
      max-width: 100%;
      height: auto;
    }

    pre,
    code {
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }

    /* break unbreakable tokens (long URLs/DOIs/transliterations) at ALL
       widths, not just <=900px: on a narrow desktop window (~900-1024px)
       they could otherwise overflow and be clipped by .slide overflow-x */
    p,
    li,
    blockquote,
    figcaption,
    .body-panel,
    .intro-box,
    .intro-plain,
    .primary-source-quote,
    .argument-note-box,
    .one-liner {
      overflow-wrap: anywhere;
      word-wrap: break-word;
      /* premium prose finish: avoid solo last-line "orphans". Falls back
         silently on engines that don't recognise it (pre-Chrome 117,
         pre-Safari 17.5, pre-Firefox 121). Costs ~one extra wrap pass on
         large paragraphs — invisible on this deck's measure. */
      text-wrap: pretty;
    }

    table {
      max-width: 100%;
    }

    /* ---------- app shell ----------
       One model on every device: a fixed top identity bar, one
       scrolling card, a fixed bottom control cluster. No layout
       mode-switch between desktop and mobile — the deck behaves
       identically, which is the whole point. */
    .deck-app {
      height: 100vh;
      height: -webkit-fill-available;
      height: 100dvh;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: calc(var(--top-h) + env(safe-area-inset-top, 0px)) minmax(0, 1fr) auto;
      /* kill the browser's double-tap-to-zoom: rapid prev/next taps were
         being read as a zoom gesture and this fixed full-screen layout
         gives no way to pinch back out. Card scroll (.slide: pan-y) and
         the lightbox's pinch-zoom set their own touch-action and are
         unaffected; intentional pinch-zoom of the page still works. */
      touch-action: manipulation;
      /* the entire deck is a self-contained scene: top bar, stage, bottom
         bar never need to invalidate anything outside their own boxes,
         and the lightbox modal is appended outside this subtree on demand.
         Adding paint to contain completes the isolation — the body's
         radial-gold glow underneath is never touched by deck-internal
         repaints (URL-bar fade, theme toggle, card swipe). */
      contain: layout style paint;
      isolation: isolate;
    }

    /* ----------------------------------------------------------------
       TOP BAR — restraint as the design.
       A serif wordmark on the left (clickable, returns to the cover),
       two small utility chips on the right (? + share). The buttons
       share the deck's gold-keyed vocabulary with the bottom rail —
       same colour palette, same hover ramp — but the geometry is its
       own: smaller, quieter, framed by inset hairlines so the top
       reads as identity, not primary navigation.
       ---------------------------------------------------------------- */
    .deck-top {
      grid-row: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(.9rem, 2vw, 1.6rem);
      height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
      /* guaranteed-symmetric horizontal padding (same value both sides)
         so the wordmark + chips stay centered against the slide rect
         below them. max() of both insets means landscape-notch on
         either side pads BOTH sides equally — bar stays centered. */
      padding-block: env(safe-area-inset-top, 0px) 0;
      padding-inline: max(
        clamp(1rem, 3vw, 1.8rem),
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
      );
      background:
        linear-gradient(180deg, var(--chrome-bg) 0%, var(--chrome-bg) 70%, var(--chrome-deep) 100%);
      border-bottom: 1px solid var(--hairline);
      position: relative;
      z-index: 50;
      /* compositor-layer hint: the top bar never moves but iOS Safari
         repaints the entire page body during URL-bar fade. Promoting the
         top bar to its own GPU layer means the bar stays cached as a
         texture during that fade — zero repaint cost for the chrome. */
      transform: translateZ(0);
      contain: layout style paint;
    }

    /* brand = the canonical wordmark, set as a calm serif title with
       a quiet small-caps sub-mark beside it. No border, no chip — just
       typography. Baseline-aligned so the two pieces share the same
       optical centre even at different sizes. */
    .deck-brand {
      display: inline-flex;
      align-items: baseline;
      gap: .8rem;
      min-width: 0;
      padding: .35rem 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }

    /* the title echoes the cover h1 — same serif family, heavier
       weight, tight tracking — scaled down to a wordmark size. Reading
       "Islam's Problems" here feels like reading the same letterforms
       you just left on the cover, only smaller. */
    .deck-brand-name {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font: 800 1.08rem/1 var(--serif);
      letter-spacing: -.02em;
      color: var(--ink-strong);
      transition: color .15s ease;
      /* a half-pixel optical lift lines the serif baseline up with the kicker */
      transform: translateY(.5px);
    }

    /* the kicker mirrors .cover-kicker — same weight, same gold, same
       editorial caps tracking — so the top bar and the cover slide
       speak the same typographic language. */
    .deck-brand-kind {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font: 800 .62rem/1 var(--sans);
      letter-spacing: .3em;
      padding-right: .3em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: .9;
      transition: color .15s ease, opacity .15s ease;
    }

    @media (hover: hover) {
      .deck-brand:hover .deck-brand-name { color: var(--gold-2); }
      .deck-brand:hover .deck-brand-kind { opacity: 1; }
    }

    .deck-brand:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
      border-radius: 2px;
    }

    /* paired utility chips, anchored to the right edge */
    .deck-top-actions {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      flex: 0 0 auto;
    }

    /* utility chips — true circles with a polished-brass surface. The
       radial gold-2 highlight at top + inset hairline reads as light
       falling on a hand-finished metal disc, not a flat outline. Same
       geometry across theme / ? / share so all three chips read as one
       designed cluster. The hover ramp brightens the inner highlight and
       deepens the gold edge — chip stays calm, the highlight earns
       attention only when invited. */
    .deck-help,
    .deck-share,
    .deck-theme {
      flex: 0 0 auto;
      width: 2.35rem;
      height: 2.35rem;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 28%,
          rgb(var(--gold-2-rgb) / .055) 0%,
          rgb(var(--gold-rgb) / .015) 55%,
          transparent 100%);
      color: var(--gold-2);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      box-shadow:
        inset 0 1px 0 rgb(var(--gold-2-rgb) / .08),
        inset 0 0 0 1px rgba(0, 0, 0, .15);
      transition: border-color var(--dur-chip) ease, color var(--dur-chip) ease,
                  background-color var(--dur-chip) ease, box-shadow var(--dur-chip) ease,
                  transform .12s ease;
      position: relative;
    }

    /* both buttons carry a custom-drawn SVG icon — same stroke weight,
       same line caps, so the ? and the share arrow read as a designed
       pair rather than "a glyph next to an icon" */
    .deck-help svg,
    .deck-share svg,
    .deck-theme svg {
      width: 1.15rem;
      height: 1.15rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      /* sub-pixel snap: the SVG's strokes land on integer pixels at
         every retina ratio, no fuzzy half-pixel anti-aliasing */
      shape-rendering: geometricPrecision;
    }

    /* the ? icon's dot is filled, not stroked — keeps it crisp at any
       size, where a single round-capped 0-length line would smear */
    .deck-help svg circle {
      fill: currentColor;
      stroke: none;
    }

    @media (hover: hover) {
      .deck-help:hover,
      .deck-share:hover,
      .deck-theme:hover {
        border-color: var(--gold);
        color: var(--ink-strong);
        background:
          radial-gradient(circle at 50% 28%,
            rgb(var(--gold-2-rgb) / .12) 0%,
            rgb(var(--gold-rgb) / .035) 55%,
            transparent 100%);
        box-shadow:
          inset 0 1px 0 rgb(var(--gold-2-rgb) / .16),
          inset 0 0 0 1px rgba(0, 0, 0, .15);
      }
    }

    .deck-help:active,
    .deck-share:active,
    .deck-theme:active {
      transform: translateY(.5px) scale(.97);
    }

    .deck-help:focus-visible,
    .deck-share:focus-visible,
    .deck-theme:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }

    /* sun/moon icon swap: show one based on current data-theme.
       In light mode the button shows a moon (click to go dark);
       in dark mode the button shows a sun (click to go light).
       The pair lives inside the button so the swap is pure CSS. */
    .deck-theme .icon-moon { display: block; }
    .deck-theme .icon-sun { display: none; }
    :root[data-theme="dark"] .deck-theme .icon-moon { display: none; }
    :root[data-theme="dark"] .deck-theme .icon-sun { display: block; }

    /* the ? reads as pressed while its popover is visible — anchors
       the panel to its trigger so the relationship is unmistakable */
    .deck-help[aria-expanded="true"] {
      border-color: var(--gold);
      color: var(--ink-strong);
      background:
        radial-gradient(circle at 50% 28%,
          rgb(var(--gold-2-rgb) / .16) 0%,
          rgb(var(--gold-rgb) / .04) 55%,
          transparent 100%);
      box-shadow:
        inset 0 1px 0 rgb(var(--gold-2-rgb) / .2),
        inset 0 0 0 1px rgba(0, 0, 0, .18);
    }

    /* a single quiet position signal — a hairline, no glow. The bar
       carries a subtle brightness ramp (dim-left, bright-right) so the
       leading edge always reads as a deliberate needle sweep, not a
       static fill. scaleX preserves the gradient mapping because the
       bar's right edge is the leading edge at every scale step.
       Opacity .92 keeps the bar from competing with the gold accents
       inside the deck — still unmistakable as progress, never shouty. */
    .deck-progress {
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      background: linear-gradient(90deg,
        rgb(var(--gold-rgb) / .55) 0%,
        var(--gold) 70%,
        var(--gold-2) 100%);
      opacity: .92;
      /* scaleX (compositor-only) instead of animating `width`: a left-
         anchored scaled bar is pixel-identical to a width bar, but width
         forces layout+paint every frame on EVERY navigation while a
         transform rides the GPU — perfectly smooth, in sync with the
         card glide so the two read as one motion. */
      transition: transform var(--dur-deck) var(--ease-deck);
      will-change: transform;
    }

    /* ----------------------------------------------------------------
       HINTS POPOVER — its own designed component, not a copy of the
       cover slide's hint card. Eyebrow + hairline-divided rows of
       (action · method). The geometry is calmer than the cover hint
       (tighter padding, hairlines instead of dot bullets, dt/dd split)
       so it reads as a reference panel pinned to the trigger.
       ---------------------------------------------------------------- */
    .deck-hints[hidden] { display: none; }

    .deck-hints {
      position: fixed;
      top: calc(var(--top-h) + env(safe-area-inset-top, 0px) + .55rem);
      /* anchor the popover's right edge to exactly the same inset the
         deck-top uses for its chip cluster — so the arrow tile pointing
         back at the ? button is pixel-aligned with the button's centre
         in portrait AND in landscape with a notch on either side. */
      right: max(
        clamp(1rem, 3vw, 1.8rem),
        env(safe-area-inset-right, 0px)
      );
      z-index: 100;
      /* width accounts for matched inset on both sides via the same max,
         so the popover stays comfortably inside both notches when one is
         on the left in landscape. */
      width: min(420px, calc(100vw - 2 * max(
        clamp(1rem, 3vw, 1.8rem),
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
      )));
      background:
        radial-gradient(ellipse at 80% 0%, rgb(var(--gold-rgb) / .06), transparent 60%),
        linear-gradient(180deg, var(--popover-bg) 0%, var(--popover-bg-deep) 100%);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-lg);
      padding: 1.05rem 1.3rem 1.15rem;
      box-shadow:
        inset 0 1px 0 rgba(255, 248, 220, .8),
        inset 0 0 0 1px rgb(var(--gold-rgb) / .08),
        0 18px 42px -16px rgba(60, 40, 20, .32),
        0 6px 16px -6px rgba(60, 40, 20, .18);
      /* anchor the scale-step at the trigger (top-right of the panel,
         right above the ? button) so the popover reads as lifting OUT
         of the chip rather than appearing from its own centre. The
         arrow seam at top-right reinforces this anchor visually. */
      transform-origin: 95% -.55rem;
      animation: deckHintsIn .28s var(--ease-deck);
      /* compositor promotion so the scale/translate runs on its own
         GPU layer — the surrounding gold-radial gradient won't repaint
         every frame of the .28s entry. */
      will-change: transform, opacity;
      contain: layout style paint;
    }

    /* arrow tile pointing back at the ? button. Sits flush with the
       top edge of the popover; the diagonal hairline matches the
       panel's border exactly so the seam is invisible. Background
       matches the popover's TOP-RIGHT colour (where the radial-gold
       glow sits brightest) so the arrow looks like a continuation
       of the panel surface, not a pasted square. */
    .deck-hints::before {
      content: "";
      position: absolute;
      top: -7px;
      /* from popover's right edge: share(2.35) + gap(.4) + half-help(1.175) - half-arrow(6px) */
      right: calc(2.35rem + .4rem + 1.175rem - 6px);
      width: 12px;
      height: 12px;
      background: var(--popover-arrow);
      border-left: 1px solid var(--line-strong);
      border-top: 1px solid var(--line-strong);
      transform: rotate(45deg);
    }

    /* eyebrow header — editorial caps with a short gold accent rule
       beneath, like a chapter eyebrow in a hardback. The full-width
       hairline carries the divider; the gold tick is just the seal. */
    .deck-hints-eyebrow {
      font: 800 .62rem/1 var(--sans);
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 0 0 .3rem;
      padding-bottom: .85rem;
      border-bottom: 1px solid var(--hairline);
      position: relative;
    }

    .deck-hints-eyebrow::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 32px;
      height: 1px;
      background: var(--gold);
    }

    .deck-hints-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* rows: generous breathing, side-by-side action · method, a
       feather-light hairline between rows (no border on the last) */
    .deck-hints-list li {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 1.1rem;
      padding: .72rem 0;
    }

    .deck-hints-list li + li {
      border-top: 1px solid rgb(var(--gold-rgb) / .05);
    }

    .deck-hints-list li:last-child {
      padding-bottom: .15rem;
    }

    .deck-hints-action {
      font: 600 .85rem/1.3 var(--sans);
      color: var(--ink-strong);
      letter-spacing: 0;
    }

    .deck-hints-method {
      display: inline-flex;
      align-items: center;
      gap: .38rem;
      color: var(--muted);
      font: 500 .78rem/1 var(--sans);
      flex-shrink: 0;
    }

    .deck-hints-method .keycap {
      transform: none;
      min-width: 1.55em;
      height: 1.55em;
      font-size: .76rem;
      padding: 0 .42em;
    }

    .deck-hints-method .keycap + .keycap {
      margin-left: -.1em;
    }

    .deck-hints-method .keycap--space {
      min-width: 4em;
    }

    .deck-hints-method .deck-ref {
      transform: none;
      padding: .22em .55em .22em .6em;
    }

    /* Visually hidden, but REAL text for crawlers, AI parsers and screen
       readers: lets the icon-only hints (arrow keys, chevron) carry their
       meaning as text without changing anything on screen. */
    .sr-only {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
      white-space: nowrap; border: 0;
    }

    .deck-hints-method .hint-chevron {
      display: inline-block;
      width: .52em;
      height: .52em;
      margin: 0 .12em;
      border-right: 2px solid var(--gold-2);
      border-bottom: 2px solid var(--gold-2);
      transform: translateY(-.22em) rotate(45deg);
    }

    .deck-hints-method .source-link {
      /* keep the source-token compact in the row */
      padding: .1em .45em;
      font-size: .76rem;
    }

    .deck-hints-or {
      font: 500 .72rem/1 var(--sans);
      color: var(--faint);
      text-transform: lowercase;
      margin: 0 .15rem;
    }

    /* desktop vs touch variants, swapped at the same 900px breakpoint */
    .deck-hints-list--desktop { display: block; }
    .deck-hints-list--mobile  { display: none; }

    /* popover entry: a quick fade with a tiny downward settle and a
       barely-perceptible scale step so the panel feels like it lifts
       OUT from the ? button rather than appearing fully-formed. The
       transform-origin is set to top-right (above the ? button) so
       the scale step originates at the trigger, not the panel centre. */
    @keyframes deckHintsIn {
      from {
        opacity: 0;
        transform: translateY(-.4rem) scale(.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .deck-hints { animation: none; }
    }

    /* transient confirmation for the clipboard path (native share sheets
       are their own feedback). Centred just above the bottom bar.
       Restrained pill — narrow padding, tight type, a quiet gold seal at
       the leading edge so the toast reads as a status confirmation, not
       a banner. Dark mode adds a radial gold glow above (see below). */
    .deck-toast {
      position: fixed;
      left: 50%;
      bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px) + 1rem);
      transform: translate(-50%, .6rem);
      z-index: 80;
      padding: .7rem 1.1rem .7rem 1.05rem;
      font: 600 .82rem/1 var(--sans);
      letter-spacing: .015em;
      color: var(--ink-strong);
      background: var(--panel);
      border: 1px solid var(--gold-dim);
      border-radius: var(--r-pill);
      box-shadow:
        inset 0 1px 0 rgb(var(--gold-2-rgb) / .12),
        0 12px 32px -8px rgba(0, 0, 0, .35),
        0 4px 10px -4px rgba(0, 0, 0, .2);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      /* same expo-out curve the card pager uses, so the toast settle
         feels like part of the deck's motion vocabulary rather than a
         generic CSS fade. Slightly longer than .22s — a settle, not a
         flash — but still under the 250ms threshold for "instant". */
      transition:
        opacity .28s var(--ease-deck),
        transform .28s var(--ease-deck),
        visibility .28s;
      /* pre-promote to a GPU composite layer so the first appearance
         doesn't trigger a layer creation mid-animation (that's the
         classic "first-fire is janky, second is smooth" pattern). */
      will-change: transform, opacity;
    }

    .deck-toast.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }

    @media (prefers-reduced-motion: reduce) {
      .deck-toast {
        transition: opacity .15s ease, visibility .15s;
        transform: translate(-50%, 0);
      }
    }

    /* ---------- card stage: transform pager (ZERO horizontal scrolling) ---
       There is NO scroll container here. The stage is a fixed clipping
       window (overflow:hidden, both axes). Inside it a flex row, .deck-track,
       is moved purely by transform:translateX — driven ONLY by show()/go(),
       the exact path the < > arrows use. Because nothing is ever a
       horizontal scroller, there is no scrollLeft to drift, no momentum,
       no snap, nothing to get "stuck" between cards. A swipe is just a
       gesture that fires go(±1). Each card keeps its OWN vertical scroll
       (it is the only scroller in the whole deck). */
    .deck-stage {
      grid-row: 2;
      min-height: 0;
      position: relative;
      overflow: hidden;
      /* one declaration per axis = GUARANTEED symmetric inline padding.
         The previous 4-value shorthand resolved left and right through
         separate max() calls, which one rare engine config was rounding
         a sub-pixel differently and visibly shifting the card off-centre.
         padding-inline locks both sides to one value; the max() picks
         the larger of (clamp, left-inset, right-inset) so a landscape
         notch on EITHER side still keeps the card centred (instead of
         padding only the notch side and pushing the card off-axis). */
      padding-block: clamp(.7rem, 2vw, 1.4rem);
      padding-inline: max(
        clamp(.7rem, 3vw, 1.6rem),
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
      );
      touch-action: pan-y;
      /* the stage clips its track; adding paint+style+layout containment
         means the deck-track's translateX (which we run every navigation)
         is fully GPU-composited and can never invalidate paints outside
         this rect. Critical: combined with `paint` on .slide above, the
         pager animation is essentially zero-cost on the main thread. */
      contain: layout style paint;
    }

    .deck-track {
      display: flex;
      gap: clamp(.7rem, 3vw, 1.6rem);
      height: 100%;
      position: relative;
      will-change: transform;
      transform: translate3d(0, 0, 0);
      /* the card glide — the deck's signature motion. Expo-out via the
         shared --dur-deck token (.42s): quick to leave, long graceful
         settle, no bounce. The expo curve's slow tail keeps the glide
         dignified rather than abrupt; transform-only means it stays on
         the GPU compositor for the entire glide (the JS anchor-scroll
         buffer at 480ms is calibrated to this same .42s). */
      transition: transform var(--dur-deck) var(--ease-deck);
    }
    @media (prefers-reduced-motion: reduce) {
      .deck-track { transition: none; }
    }

    /* the card: a flat, calm panel, exactly one viewport wide. One
       hairline, one faint lift — nothing decorative competing with the
       evidence inside. This is the deck's only scroll container (y only). */
    .slide {
      flex: 0 0 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      /* contain on both axes: vertical keeps the card's own scroll
         from rubber-banding the document (paired with body's
         overscroll-behavior:none); horizontal stops any rogue native
         h-scroll chain from reaching the deck-track transform. */
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      /* ONLY vertical panning: a vertical drag scrolls the card. A
         horizontal drag is NOT a native pan at all (pan-y forbids it) —
         it never moves anything; the JS swipe detector reads its
         direction and fires go(±1), the exact < > arrow path. */
      touch-action: pan-y;
      scroll-behavior: smooth;
      scroll-padding-top: 1.5rem;
      /* mirror the top padding so a scrollIntoView() to a deep anchor
         near the bottom of the card never lands the target flush against
         the chrome / last citation — keeps the in-card anchor framing
         visually balanced on every device. */
      scroll-padding-bottom: 1.5rem;
      /* Generous lateral padding holds the prose at a comfortable
         measure even on wide monitors; the top is calibrated to give
         the title room to breathe without floating; the bottom keeps a
         confident landing so the last citation doesn't sit on the edge. */
      padding: clamp(1.5rem, 2.8vw, 2.75rem) clamp(1.25rem, 2.8vw, 3rem) clamp(2.4rem, 4.2vw, 3.4rem);
      background: var(--panel);
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg);
      /* THE load-time win, with ZERO visual change. 24 viewport-sized
         cards (dense text, 17 images, dozens of <details>) otherwise all
         get full layout + paint on the first frame though only one shows.
         content-visibility:auto lets the browser skip rendering the cards
         that aren't near the viewport until they are — first paint does
         the work of ~1 card, not 24. Geometry is untouched: width is
         definite (flex:0 0 100%) and height is definite (height:100%),
         so a slide's offsetLeft/offsetWidth — the only thing the pager's
         centring math reads — stays pixel-exact. A rendered (on-screen)
         slide is never clipped: paint containment only applies WHILE a
         card is skipped/off-screen. contain-intrinsic-size reserves the
         box while skipped; the `auto` keyword caches each card's real
         size after its first render so the estimate self-corrects. */
      content-visibility: auto;
      /* progressive enhancement: older Safari (pre-15.4) doesn't know
         dvh and would drop the whole declaration. Setting vh first
         lands a sane estimate everywhere; engines that understand dvh
         overwrite with the dynamic-viewport value so the cached size
         estimate matches the actual viewport after URL-bar fade. */
      contain-intrinsic-size: auto 100vh;
      contain-intrinsic-size: auto 100dvh;
      /* belt-and-braces isolation: a slide can never invalidate layout
         outside its own box (text reflow, image decode, details toggle)
         and its paints stay confined to its rect. paired with
         content-visibility above, the page truly only ever does the
         work of one card at a time. `paint` containment is the missing
         third leg — without it, a shadow or gradient inside the slide
         can still trigger compositor invalidations on neighbours; with
         it, the slide is a true rendering island. */
      contain: layout style paint;
      scrollbar-width: none;
    }

    .slide::-webkit-scrollbar {
      display: none;
    }

    /* Fallback for engines that support neither the standard
       `scrollbar-width: none` (above) nor the WebKit/Blink
       `::-webkit-scrollbar` pseudo-element — chiefly legacy Trident
       (old Edge/IE). `-ms-overflow-style: none` is their only hook to
       hide the scroll rail, so the card stays chrome-free everywhere.
       Feature-gated so modern browsers never see it and nothing in the
       brass-on-ink look changes. */
    @supports not (scrollbar-width: none) {
      .slide {
        -ms-overflow-style: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .deck-stage { scroll-behavior: auto; }
      .deck-progress { transition: none; }
    }

    /* ---------- bottom control bar ----------
       The only place controls live. Identical on every device,
       thumb-reachable on phones, quietly premium on desktop. */
    .deck-bottom {
      grid-row: 3;
      display: flex;
      align-items: stretch;
      gap: .55rem;
      height: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px));
      /* same guaranteed-symmetric pattern as .deck-stage: padding-inline
         locks both sides to one value, so the prev/INDEX/next row stays
         perfectly centered under the slide. max() of both insets means a
         landscape notch on either side pads BOTH sides equally. */
      padding-block: .55rem calc(.55rem + env(safe-area-inset-bottom, 0px));
      padding-inline: max(
        clamp(.7rem, 3vw, 1.6rem),
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
      );
      background: var(--chrome-bg);
      border-top: 1px solid var(--hairline);
      z-index: 50;
      /* compositor-layer hint (see .deck-top): keeps the bar's chrome,
         hairline, and INDEX chip cached as a GPU texture during scroll
         and URL-bar fade, so the bottom rail never repaints with the
         page body. The contain rules below also prevent any descendant
         (active state, focus ring) from invalidating outside the bar. */
      transform: translateZ(0);
      contain: layout style paint;
    }

    .deck-nav {
      flex: 0 0 auto;
      width: 3.1rem;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      /* a barely-there top-edge cream highlight + a soft inner darken
         at the bottom register the chip as polished brass on leather
         rather than flat colour. Both insets ride inside the border so
         the chip's outline stays the canonical hairline width. */
      background:
        linear-gradient(180deg,
          rgb(var(--gold-2-rgb) / .03) 0%,
          transparent 60%);
      color: var(--gold-2);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      box-shadow:
        inset 0 1px 0 rgb(var(--gold-2-rgb) / .08),
        inset 0 -1px 0 rgba(0, 0, 0, .14);
      transition: border-color var(--dur-chip) ease, color var(--dur-chip) ease,
                  background-color var(--dur-chip) ease, transform .12s ease,
                  box-shadow var(--dur-chip) ease;
    }

    /* Chevrons sit slightly tighter than the button width so the icon
       carries visual weight without crowding the border. Stroke is the
       same hairline weight as the chip outline — it reads as one family.
       Stroke-width bumped from 1.9 → 2.0 so the chevron registers
       confidently even at thumb distance on a phone. */
    .deck-nav svg {
      width: 1.3rem;
      height: 1.3rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .2s var(--ease-deck);
    }

    @media (hover: hover) {
      #prevSlide:hover svg { transform: translateX(-2px); }
      #nextSlide:hover svg { transform: translateX(2px); }
    }

    /* motion-reduced: keep the color/border hover tell, drop the chevron
       lateral nudge so the icon never animates for vestibular users. */
    @media (prefers-reduced-motion: reduce) {
      #prevSlide:hover svg,
      #nextSlide:hover svg { transform: none; }
    }

    @media (hover: hover) {
      .deck-nav:hover {
        border-color: var(--gold);
        color: var(--ink-strong);
        background: rgb(var(--gold-rgb) / .06);
      }
    }

    .deck-nav:active {
      background: rgb(var(--gold-rgb) / .12);
      border-color: var(--gold);
      transform: translateY(.5px) scale(.97);
    }

    /* keyboard focus ring matched to the .deck-here chip's offset so
       Tab-walking the bottom bar gives consistent visible focus on every
       control (prev, INDEX, next). 2px offset stays snug against the
       chip rather than bloating into the gap between buttons. */
    .deck-nav:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 2px;
      border-radius: var(--r-md);
    }

    .deck-nav:disabled {
      opacity: .24;
      cursor: default;
      pointer-events: none;
    }

    /* centre chip: where you are + the way in to everywhere else.
       The chip carries dual identity — it's a status label (showing
       the current slide title) AND a destination (opens the full index
       on tap). The faint gold tag prefix + chevron suffix make the
       interactive intent unmistakable. */
    .deck-here {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: 0 .95rem;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
      transition: border-color var(--dur-chip) ease, background-color var(--dur-chip) ease,
                  transform .12s ease;
    }

    @media (hover: hover) {
      .deck-here:hover {
        border-color: var(--gold);
        background: rgb(var(--gold-rgb) / .06);
      }
    }

    .deck-here:active {
      border-color: var(--gold);
      background: rgb(var(--gold-rgb) / .1);
      transform: translateY(.5px);
    }

    /* dedicated focus ring (tighter offset than the global) so keyboard
       navigators get a clear indicator that doesn't collide with the
       hover/active ramps. 2px outline-offset hugs the chip the same way
       the top-bar chips' focus ring does. */
    .deck-here:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 2px;
      border-radius: var(--r-md);
    }

    /* INDEX eyebrow — micro-caps label sitting before the slide title.
       Lighter weight + gold-2 so the eyebrow defers to the serif title;
       wider tracking gives it editorial caps presence at small size. */
    .deck-here-tag {
      flex: none;
      align-self: center;
      font: 700 .58rem/1 var(--sans);
      letter-spacing: .24em;
      color: var(--gold-2);
      text-transform: uppercase;
    }

    /* Desktop-only divider between the CARDS eyebrow and the serif
       slide title — recreates the "CARDS │ Cover" editorial split that
       reads as a refined chapter break inside the chip. Scoped to
       ≥901px so the mobile chip can stay as a clean CARDS + chevron
       control with no cramped divider stub.

       Drawn as a tall pseudo-element with a vertical gradient that fades
       to nothing at top and bottom — not a flat `border-right`. A border
       only ever rises as tall as the .58rem tag content (~9px), which on
       cream vellum reads as a misprinted stub rather than a divider; a
       faded ~1.7rem column reads as a delicate engraved chapter mark in
       both themes. var(--hairline) carries the theme baseline; the
       light-mode block further down adds a centre gleam so the divider
       catches the eye the way an engraved rule catches light on paper. */
    @media (min-width: 901px) {
      .deck-here-tag {
        position: relative;
        padding-right: 1.05rem;
      }

      .deck-here-tag::after {
        content: "";
        position: absolute;
        right: .45rem;
        top: 50%;
        width: 1px;
        height: 1.7rem;
        transform: translateY(-50%);
        background: linear-gradient(
          to bottom,
          transparent 0%,
          var(--hairline) 18%,
          var(--hairline) 82%,
          transparent 100%
        );
        pointer-events: none;
      }
    }

    /* the title is the loudest thing on the bar — serif, full-weight ink.
       Calibrated to read as a quiet support rail rather than competing
       with the slide content above. */
    .deck-here-title {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font: 600 1.02rem/1.2 var(--serif);
      color: var(--ink-strong);
      letter-spacing: .005em;
    }

    /* OPEN-INDEX cue — sits where the position counter used to live.
       A real SVG (not a CSS border) so the chevron is crisp at every
       resolution, bright enough that the chip reads unmistakably as a
       tappable control even at this smaller size. Lifts on hover. */
    .deck-here-arrow {
      flex: none;
      width: 1rem;
      height: 1rem;
      fill: none;
      stroke: var(--gold-2);
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke var(--dur-chip) ease, transform var(--dur-chip) ease;
    }

    @media (hover: hover) {
      .deck-here:hover .deck-here-arrow {
        stroke: var(--gold);
        transform: translateY(-1px);
      }
    }

    /* keyboard cue — desktop only. Tells the user "C opens cards"
       without copy. Sized to the bar's small surface; the .deck-here
       compound selector wins specificity over the base .keycap rule. */
    .deck-here .deck-here-key {
      font-size: .72rem;
      min-width: 1.5em;
      height: 1.5em;
      padding: 0 .4em;
      transform: none;
      opacity: .85;
    }

    @media (max-width: 900px) {
      .deck-here .deck-here-key { display: none; }
    }

    /* ---------- index overlay ----------
       Replaces the cramped native select. One restrained, grouped
       map of the whole deck; the card you are on is marked. */
    .deck-index[hidden] {
      display: none;
    }

    .deck-index {
      position: fixed;
      inset: 0;
      z-index: 150;
      display: flex;
      align-items: stretch;
      justify-content: center;
      background: rgba(6, 5, 4, .78);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      /* same guaranteed-symmetric pattern as the chrome bars: the modal
         panel inside (max-width 640px, margin auto via flex centering)
         stays perfectly centered regardless of which side of a landscape
         iPhone has the Dynamic Island. */
      padding-block: clamp(1rem, 4vw, 3rem);
      padding-inline: max(
        clamp(1rem, 4vw, 3rem),
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
      );
      overscroll-behavior: contain;
      /* the index is a sibling of .deck-app, so it needs its own
         double-tap-zoom guard: rapid taps on index entries were zooming
         the page with no way back out. Cascades to the panel, list,
         group buttons and items; list scrolling is unaffected. */
      touch-action: manipulation;
      /* same compositor-promotion pattern as the lightbox: the modal
         backdrop blur is a full-viewport effect. Pre-promoting it to
         its own GPU layer means the first open is smooth (no first-fire
         jank) and closing returns control to the deck without forcing
         a deck-side repaint. */
      transform: translateZ(0);
      isolation: isolate;
      contain: layout style paint;
    }

    .deck-index-panel {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 720px;
      max-height: 100%;
      background: var(--panel);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow:
        0 1px 0 rgba(255, 250, 230, .04) inset,
        0 28px 64px -18px rgba(0, 0, 0, .6);
      /* opening animation — the same expo-out the card pager uses, so
         the index reads as part of the deck's motion vocabulary. .26s
         settle, subtle scale-up so the panel lifts OUT of the screen
         rather than appearing fully formed. transform-origin centered
         so a tall panel doesn't pop from one corner. */
      animation: deckIndexIn .26s var(--ease-deck);
      transform-origin: center 35%;
      will-change: transform, opacity;
      contain: layout style paint;
    }

    @keyframes deckIndexIn {
      from { opacity: 0; transform: translateY(.5rem) scale(.985); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .deck-index-panel { animation: none; }
    }

    /* the bar carries the deck's signature chapter-break seal: a 1px
       hairline across the full width, plus a short 3.4rem gold-to-
       transparent brass tick on the left — the exact pattern used by
       h2.section::after and .cover-rule. Opening the index now reads
       as crossing a section boundary, in the deck's own language. */
    .deck-index-bar {
      position: relative;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .8rem 1rem .85rem 1.25rem;
      border-bottom: 1px solid var(--hairline);
    }

    .deck-index-bar::after {
      content: "";
      position: absolute;
      left: 1.25rem;
      bottom: -1px;
      width: 3.4rem;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--gold-2) 60%, transparent);
      border-radius: 1px;
    }

    /* the INDEX kicker matches .cover-kicker exactly — same tracking,
       same optical-centre padding-right, so the modal's editorial
       voice is identical to the cover's. */
    .deck-index-title {
      font: 800 .74rem/1 var(--sans);
      letter-spacing: .36em;
      padding-right: .36em;
      text-transform: uppercase;
      color: var(--gold);
    }

    /* the close control is intentionally NOT a keycap — keys are inputs
       the reader presses; this is a dismiss. Borderless, transparent,
       just the cross. Quiet at rest in --muted, warms into a soft gold
       wash on hover with the icon brightening to --ink-strong. No
       rotation — premium close affordances stay still. */
    .deck-index-close {
      width: 2.2rem;
      height: 2.2rem;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      transition: color var(--dur-chip) ease, background-color var(--dur-chip) ease;
    }

    .deck-index-close svg {
      width: .95rem;
      height: .95rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (hover: hover) {
      .deck-index-close:hover {
        color: var(--ink-strong);
        background: rgb(var(--gold-rgb) / .08);
      }
    }

    /* keyboard hint, beside the INDEX title — keycaps echo the close chip,
       a hairline rule ties it to the title without crowding it */
    .deck-index-head {
      display: flex;
      align-items: center;
      gap: .95rem;
      min-width: 0;
    }

    .deck-index-hint {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding-left: .95rem;
      border-left: 1px solid var(--hairline);
      color: var(--muted);
      font: 700 .58rem/1 var(--sans);
      letter-spacing: .22em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* the two up/down keycaps sit shoulder-to-shoulder — a single tight
       flex gap, and the global .keycap+.keycap margin is zeroed so the
       spacing doesn't stack. Reads as one "browse" gesture, not two
       loose chips. */
    .deck-index-hint .keys {
      display: inline-flex;
      gap: .18rem;
    }

    .deck-index-hint .keycap + .keycap {
      margin-left: 0;
    }

    /* the hairline that visually splits the two hint groups
       ([↑↓] browse · ENTER open). Same hairline token as the modal's
       internal dividers, so the whole bar speaks one rule language. */
    .deck-index-hint .hint-sep {
      display: inline-block;
      width: 1px;
      height: .9em;
      background: var(--hairline);
      vertical-align: middle;
    }

    /* a "word" keycap (enter / tap) — inherits the canonical .keycap
       recipe at the same font-size context as the arrow keys, so the
       chip is the EXACT SAME HEIGHT (1.7em of the shared .82rem parent
       context). Horizontal overrides: lowercase legend, just a whisper
       of tracking (.02em) so the letters read as cleanly-set type
       rather than a spread editorial pill, free-floating min-width so
       the chip hugs the label. */
    .deck-index-hint__word-key {
      min-width: 0;
      padding: 0 .5em;
      text-transform: lowercase;
      letter-spacing: .02em;
    }

    /* the touch-only sibling hint — pure typography, two-tone. "TAP"
       carries the action voice in warm gold-2 (rhyming with the INDEX
       kicker beside it); "to open" recedes in muted label color. The
       same kicker/label hierarchy the desktop bar carries via its
       keycap+text combo, just expressed in pure type since there's no
       physical key to chip-render on a touchscreen. */
    .deck-index-hint--touch {
      display: none;
      align-items: baseline;
      gap: .42em;
      padding-left: 1rem;
      border-left: 1px solid var(--hairline);
      font: 700 .58rem/1 var(--sans);
      letter-spacing: .22em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .deck-index-hint__touch-verb {
      color: var(--gold-2);
      font-weight: 800;
      letter-spacing: .24em;
    }

    .deck-index-hint__touch-label {
      color: var(--muted);
    }

    /* the modal kbd chips wear the canonical .keycap class so they ARE
       the same brass-key control used on the cover hints — same gradient,
       same inset highlight, same drop, same SVG sizing. The only override
       is font-size: the hint label is intentionally tiny (.58rem), and
       .keycap is em-based, so resolving its em metrics against a more
       normal font-size gives the chip the same visual size and corner
       radius proportions as the cover keycaps without dragging the
       "browse" / "open" labels up with it. Applied to BOTH the desktop
       keys hint and the touch hint so the chip looks identical on each. */
    .deck-index-hint .keycap,
    .deck-index-hint--touch .keycap {
      font-size: .82rem;
    }

    /* on coarse pointers (no hardware keys) AND on narrow viewports
       (where the longer keys hint would overflow into the close X),
       hide the keys hint and reveal the touch-only sibling. The two
       hints occupy the exact same slot in the bar, so the editorial
       rhythm stays identical across input modes. The width fallback
       guarantees the bar never breaks even when dev-tools simulate a
       phone with a fine pointer, or a desktop window is resized down. */
    @media (pointer: coarse), (max-width: 540px) {
      .deck-index-hint { display: none; }
      .deck-index-hint--touch { display: inline-flex; }
      /* guarantee a >=44px touch target on the two controls whose
         compact variants fall below it (Apple/Material minimum) */
      .deck-index-close { width: 2.75rem; height: 2.75rem; }
      .figure-supplement.no-outline>summary { min-height: 2.75rem; }
      /* same >=44px rule for the top-bar utility chips (help/share/theme),
         plus a roomier vertical tap area on the inline citation pills —
         touch/narrow only, so the desktop composition is unchanged */
      .deck-help,
      .deck-share,
      .deck-theme { width: 2.75rem; height: 2.75rem; }
      .source-link { padding: .34em .75em; }
    }

    .deck-index-list {
      overflow-y: auto;
      padding: .35rem .5rem .65rem;
      /* Firefox owns scrollbar-width/color; WebKit + Blink need the
         pseudo-element rules below. Both engines hit the same brass-on-
         transparent rail so the index scroll feels identical on every
         browser/OS combo (Safari/iOS, Chrome, Edge, Firefox, Android). */
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }

    .deck-index-list::-webkit-scrollbar {
      width: 8px;
    }

    .deck-index-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .deck-index-list::-webkit-scrollbar-thumb {
      background: var(--line-strong);
      border-radius: var(--r-pill);
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    .deck-index-list::-webkit-scrollbar-thumb:hover {
      background: var(--gold-dim);
      background-clip: padding-box;
    }

    /* section eyebrow — identical recipe to the deck's in-card h4 kicker
       (gold all-caps, .2em tracking, --line hairline beneath). Part I /
       Part II in the modal now read as the same kind of editorial label
       used inside the cards themselves, so the modal is wallpaper-
       continuous with the deck. */
    .ix-group {
      display: block;
      width: 100%;
      margin: .75rem 0 .2rem;
      padding: .36rem .95rem .38rem;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: transparent;
      color: var(--gold);
      font: 800 .66rem/1.2 var(--sans);
      letter-spacing: .22em;
      text-transform: uppercase;
      text-align: left;
      cursor: pointer;
      border-radius: 0;
      transition: color var(--dur-chip) ease, border-color var(--dur-chip) ease;
    }

    .ix-group:first-child {
      margin-top: .15rem;
    }

    /* the prefatory "Overview" group has no slide of its own to jump to,
       so it stays a static label — softened to --faint and held to the
       quieter --hairline underline. Reads as a label, not a link. */
    .ix-group-static {
      color: var(--faint);
      cursor: default;
      letter-spacing: .22em;
      border-bottom-color: var(--hairline);
    }

    @media (hover: hover) {
      button.ix-group:hover {
        color: var(--gold-2);
        border-bottom-color: var(--gold);
      }
    }

    /* if the reader is parked on a section divider card (Part I / Part II),
       the corresponding eyebrow in the index gets the same "you are here"
       gold rail and warm fill as a current item — keeps the indicator
       consistent across both row types instead of going silent when the
       reader is on a Part header. */
    .ix-group[aria-current="true"] {
      color: var(--gold-2);
      background: rgb(var(--gold-rgb) / .08);
      box-shadow: inset 2px 0 0 var(--gold);
      border-bottom-color: var(--gold);
    }

    .ix-items {
      list-style: none;
      margin: 0;
      padding: 0;
      /* counter resets per <ul> so Part I and Part II each restart at
         01 — same convention the in-deck Contents slide already uses
         (.toc-card ol counter), so the modal mirrors the printed TOC. */
      counter-reset: ixc;
    }

    .ix-items li {
      margin: 0;
    }

    /* each row is a typographic link, NOT a button-shaped chip. Matches
       the gesture used by .section-link-list and .toc-card ol — the
       deck's two existing editorial TOCs. Title in --ink so the row
       reads confident at rest, -.005em tracking matches .arg-intro's
       editorial set. Hyphenation is OFF: long hadith titles like
       "Muhammad approves Ali having sex with a captive girl…" were
       wrapping mid-word ("de-serves") which read as a typo. Letting
       them wrap on word boundaries is the cleaner break. */
    .ix-item {
      display: grid;
      grid-template-columns: 2.3rem 1fr;
      align-items: baseline;
      column-gap: .25rem;
      width: 100%;
      padding: .38rem 1rem .4rem;
      border: 0;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--ink);
      font: 500 .92rem/1.35 var(--sans);
      letter-spacing: -.005em;
      text-align: left;
      cursor: pointer;
      counter-increment: ixc;
      transition: background-color var(--dur-chip) ease;
    }

    /* leading numeral — sans 800, .06em tracking, gold-dim. Identical
       recipe to .toc-card ol li::before, so the numerals on the
       Contents slide and the modal index are visually the same
       character (the deck-internal section list uses .08em at a larger
       1.18rem font; at this smaller .74rem the tighter .06em hits
       the same optical density). */
    .ix-item::before {
      content: counter(ixc, decimal-leading-zero);
      font: 800 .74rem/1 var(--sans);
      letter-spacing: .06em;
      color: var(--gold-dim);
      font-variant-numeric: tabular-nums;
      align-self: center;
      transition: color var(--dur-chip) ease;
    }

    /* .ix-text is a color target — wraps the title text so hover and
       current states can shift its colour without affecting the numeral.
       No underline: the row's warm hover fill carries the affordance.
       Hyphenation is off so long titles wrap on word boundaries, not
       mid-word — clean breaks beat editorial "de-serves" splits. */
    .ix-text {
      display: inline;
      overflow-wrap: break-word;
      word-break: normal;
      -webkit-hyphens: manual;
      hyphens: manual;
      transition: color var(--dur-chip) ease;
    }

    /* hover — title brightens to gold-2, numeral to full gold, row picks
       up a whisper of warm fill (.05α gold). Wrapped in (hover: hover)
       so the styles never fire on touch devices — without this iOS
       Safari simulates hover on first tap, which sticks the row in a
       half-active state and forces a SECOND tap to actually navigate.
       Matches how every other interactive component in the deck (e.g.
       .deck-here:hover) gates its hover ramps. */
    @media (hover: hover) {
      .ix-item:hover {
        background: rgb(var(--gold-rgb) / .07);
      }

      .ix-item:hover .ix-text {
        color: var(--gold-2);
      }

      .ix-item:hover::before {
        color: var(--gold);
      }
    }

    /* current card — locked on. Warm fill, gold-2 title, full-gold
       800-weight numeral, AND a confident 2px inset gold rail on the
       left edge. The rail is what makes the row read as "you are here"
       at a glance — same treatment that already ships in dark mode,
       now mirrored to light for parity. */
    .ix-item[aria-current="true"] {
      background: rgb(var(--gold-rgb) / .08);
      box-shadow: inset 2px 0 0 var(--gold);
    }

    .ix-item[aria-current="true"] .ix-text {
      color: var(--gold-2);
      font-weight: 600;
    }

    .ix-item[aria-current="true"]::before {
      color: var(--gold);
      font-weight: 800;
    }

    /* Arrow-key selection in the index is driven by a programmatic
       .focus() on these buttons (deck keydown handler). The site-wide
       indicator is button:focus-visible, but WebKit/Safari does NOT
       apply :focus-visible to a script-focused button once a pointer
       interaction (clicking the ‹ › chevrons / title chip) has set the
       focus modality to mouse — so on Safari the selection moved
       invisibly and arrow keys appeared dead after using < >. A plain
       :focus rule, scoped to the index, always matches a focused
       element in every browser regardless of modality; it wins on
       specificity over the global :focus-visible rule, so the moving
       selection is now drawn identically on Safari and Chromium. */
    .ix-item:focus,
    .ix-group:focus {
      outline: 2px solid var(--focus);
      outline-offset: -2px;
      background: rgb(var(--gold-rgb) / .14);
      color: var(--ink-strong);
    }

    .ix-item:focus {
      box-shadow: inset 2px 0 0 var(--gold);
    }

    body.deck-lock {
      overflow: hidden;
    }

    .argument-card,
    .hadith,
    .app-entry,
    .section-slide,
    header.cover,
    nav.toc {
      max-width: var(--max-card-w);
      margin: 0 auto;
    }

    /* running prose stays at a comfortable measure; evidence blocks
       run full card width because they are exhibits, not text */
    .argument-card>p,
    .argument-card>ul,
    .argument-card>ol,
    .argument-card>.intro-plain,
    .argument-card>.arg-intro,
    .argument-card>.slide-note,
    .argument-card>.key-claim,
    .argument-card>.verdict,
    .argument-card>.quote-mini,
    .argument-card>.punch-quote,
    .argument-card>.tag-row,
    .hadith>p,
    .app-entry>p {
      max-width: var(--max-prose);
    }

    .argument-card>.fact-row,
    .argument-card>.stat-grid,
    .argument-card>.pre-evidence-label,
    .argument-card>p.callout {
      max-width: 100%;
    }

    /* ---------- typography ---------- */
    header.cover {
      padding: 4vh 0 3rem;
      /* floor stops the centered title clipping off the top on short
         landscape phones where 100dvh - 14rem collapses too small */
      min-height: max(22rem, calc(100dvh - 14rem));
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 1.1rem;
      position: relative;
    }

    /* the cover kicker — wider tracking pulls the editorial caps closer
       to the H1's visual weight without making the caps themselves big.
       The trailing letter on a tracked-out word always reads as drifting
       right; padding-right pulls the optical centre back so the kicker
       sits flush-left with the H1 below. */
    .cover-kicker {
      font: 800 .74rem/1 var(--sans);
      letter-spacing: .36em;
      padding-right: .36em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: .95;
    }

    /* H1 lockup: a true display-scale masthead. line-height .92 closes
       the leading on multi-line wraps (rare with our 18ch measure, but
       happens at very narrow widths); letter-spacing -.05em is a true
       display kern; text-wrap:balance keeps both wrap halves the same
       length so the title reads as a designed lockup rather than a
       loose two-liner. */
    header.cover h1 {
      margin: 0;
      font: 800 clamp(2.8rem, 7vw, 5.8rem)/.92 var(--serif);
      letter-spacing: -.05em;
      max-width: 18ch;
      color: var(--ink-strong);
      text-wrap: balance;
    }

    /* the cover-rule is the only mark between H1 and the hint cues —
       a short brass tick that signs the title block. 2px keeps it
       hairline-quiet (3px reads as a control); a 3.6rem run is enough
       to register without crowding. The gradient fades right so the
       rule reads as a closing brushstroke under the H1, not a divider. */
    .cover-rule {
      width: 3.6rem;
      height: 2px;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 50%, transparent 100%);
      border-radius: 1px;
      margin: .4rem 0 .15rem;
    }

    header.cover .subtitle {
      margin: 0;
      font-size: clamp(1.1rem, 1.6vw, 1.35rem);
      font-style: italic;
      color: var(--ink-soft);
      opacity: .78;
      max-width: 56ch;
      line-height: 1.5;
      font-weight: 400;
    }

    /* the cover-hint sits beneath the H1 like a stage direction: just
       two quiet lines, no card chrome, no eyebrow. The reader's eye
       lands on the title first, then naturally drops to the two cues.
       A short gold-edge left rule marks the block as a system message
       (not body prose) without raising volume. The flex gap on
       header.cover already supplies vertical rhythm — own margin stays 0. */
    .cover-hint {
      list-style: none;
      margin: .4rem 0 0;
      padding: .1rem 0 .1rem .95rem;
      max-width: 46ch;
      border-left: 2px solid var(--gold-edge);
      color: var(--muted);
      font: 500 .94rem/1.55 var(--sans);
      display: grid;
      gap: .3rem;
    }

    /* desktop talks in keys + clicks, mobile in swipes + taps — same
       900px breakpoint the rest of the deck uses to swap input model */
    .cover-hint--mobile { display: none; }
    @media (max-width: 900px) {
      .cover-hint--desktop { display: none; }
      .cover-hint--mobile { display: grid; }
    }

    .cover-hint li {
      margin: 0;
      padding: 0;
    }

    /* the action verb on mobile ("Swipe") stands in place of the
       physical keycaps the desktop hint shows ([←][→]). Same bright
       gold-2 the deck uses for in-quote `<b>` highlights (e.g. "Dhul
       Qarnayn reached (balagha)" on the muddy-spring slide), so the
       gesture verb reads as an editorial emphasis word in the deck's
       primary highlight color — not a separate UI label. Shared
       selector covers both the cover slide and the NAVIGATE popover. */
    .cover-hint b,
    .deck-hints-method b {
      color: var(--gold-2);
      font-weight: 700;
      letter-spacing: .005em;
    }

    .cover-hint .hint-chevron {
      display: inline-block;
      width: .52em;
      height: .52em;
      margin: 0 .14em;
      border-right: 2px solid var(--gold-2);
      border-bottom: 2px solid var(--gold-2);
      transform: translateY(-.18em) rotate(45deg);
    }

    /* keycap chip — sized in em so it scales with whatever text it sits
       in (cover hint, hints popover, inline body text). Subtle gold-2
       tinted gradient + a cream inset highlight on top + a soft bottom
       drop make the chip read as a slightly recessed polished-brass key
       on the page, not a flat bordered box. */
    .keycap {
      display: inline-grid;
      place-items: center;
      min-width: 1.7em;
      height: 1.7em;
      padding: 0 .38em;
      border: 1px solid var(--line-strong);
      border-radius: .4em;
      background: linear-gradient(180deg,
        rgb(var(--gold-2-rgb) / .04) 0%,
        transparent 100%);
      color: var(--gold-dim);
      font: 700 .8em/1 var(--sans);
      vertical-align: middle;
      transform: translateY(-0.09em);
      box-shadow:
        inset 0 1px 0 rgba(255, 250, 230, .35),
        0 1px 0 rgba(60, 40, 20, .08);
    }

    .keycap + .keycap {
      margin-left: .28em;
    }

    .keycap svg {
      width: .9em;
      height: .9em;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* wide spacebar variant — long proportion reads unmistakably as
       the space key rather than a generic chip. Tracking pulled in to
       .02em so the "space" legend reads as elegantly set type, not a
       stretched editorial pill. */
    .keycap--space {
      min-width: 5.5em;
      letter-spacing: .02em;
      text-transform: lowercase;
    }

    /* inline reference to the bottom-bar INDEX button — a miniature
       replica of the actual control so readers instantly recognise
       what to tap. Echoes the centre chip's border + gold tag,
       sized in em so it tracks surrounding text. */
    .deck-ref {
      display: inline-flex;
      align-items: center;
      gap: .42em;
      padding: .25em .6em .25em .65em;
      margin: 0 .12em;
      border: 1px solid var(--line-strong);
      border-radius: .4em;
      background: var(--deck-ref-bg);
      vertical-align: middle;
      transform: translateY(-0.06em);
    }

    .deck-ref-label {
      font: 700 .58em/1 var(--sans);
      letter-spacing: .26em;
      color: var(--gold-dim);
      text-transform: uppercase;
    }

    /* mini-chevron — echoes the up-chevron on the real bottom-bar
       INDEX button so the inline reference reads as a true replica. */
    .deck-ref-arrow {
      width: .78em;
      height: .78em;
      fill: none;
      stroke: var(--gold-dim);
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* section divider — "Part I / Part II". A true display-scale chapter
       title with the same editorial seal (gold tick under a hairline
       rule) that the cover-rule and pre-evidence-label carry, so all
       "this is a chapter break" cues across the deck speak one
       visual language. */
    h2.section {
      position: relative;
      margin: 0 0 1.4rem;
      padding: 0 0 1rem;
      border-bottom: 1px solid var(--hairline);
      font: 800 clamp(1.9rem, 4.4vw, 3.4rem)/1.04 var(--serif);
      letter-spacing: -.04em;
      color: var(--ink-strong);
      text-wrap: balance;
    }

    h2.section::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 3.4rem;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--gold-2) 60%, transparent);
      border-radius: 1px;
    }

    .section-slide .slide-note {
      color: var(--muted);
      max-width: 60ch;
      font-size: 1rem;
      line-height: 1.55;
    }

    /* the numbered argument list on each Part section card. Reads as
       an editorial table of contents: leading-zero counter in the
       gutter (01 02 03...), titles in serif, hairline underline on
       hover that ramps to gold — the same gesture as toc-card links
       so the whole section system speaks one language. */
    .section-link-list {
      counter-reset: section-item;
      list-style: none;
      padding-left: 0;
      margin: var(--s-7) 0 0;
      max-width: 78ch;
    }

    .section-link-list li {
      counter-increment: section-item;
      position: relative;
      padding-left: 2.8rem;
      margin: var(--s-3) 0;
      color: var(--ink-soft);
      font-size: clamp(1.02rem, 1.4vw, 1.18rem);
      line-height: 1.38;
      font-weight: 500;
    }

    .section-link-list li::before {
      content: counter(section-item, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: .38rem;
      font: 800 .8rem/1 var(--sans);
      letter-spacing: .08em;
      color: var(--gold-dim);
      font-variant-numeric: tabular-nums;
    }

    .section-link-list a {
      color: var(--ink);
      text-decoration: none;
      border-bottom: 1px solid var(--hairline);
      padding-bottom: .08em;
      transition: color var(--dur-chip) ease, border-color var(--dur-chip) ease;
    }

    @media (hover: hover) {
      .section-link-list a:hover {
        color: var(--gold-2);
        border-bottom-color: var(--gold);
      }
    }

    /* argument / appendix title — display-scale serif that leads each
       card with broadsheet-hed weight. -.04em tracking + 1.04 line-height
       give the title the optical density of a printed headline; the
       hairline rule beneath signs the title block without competing. */
    h3.arg,
    .app-entry h3:first-child {
      margin: 0 0 1.3rem;
      padding: 0 0 .95rem;
      border-bottom: 1px solid var(--hairline);
      font: 800 clamp(1.45rem, 2.7vw, 2.1rem)/1.08 var(--serif);
      letter-spacing: -.032em;
      color: var(--ink-strong);
      text-wrap: balance;
    }

    /* small uppercase kicker inside bodies */
    h4 {
      margin: var(--s-6) 0 var(--s-2);
      padding: 0 0 .4rem;
      border-bottom: 1px solid var(--line);
      color: var(--gold);
      font: 800 .7rem/1.2 var(--sans);
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    p {
      margin: .7rem 0;
    }

    .argument-card p,
    .hadith p,
    .app-entry p {
      color: var(--ink);
    }

    .slide-note {
      color: var(--muted);
      max-width: 70ch;
    }

    /* the premise line: every argument announces its claim first.
       Slightly heavier weight (600→620) gives the intro the optical
       authority needed to register as the lead voice without crossing
       into the territory of the rust-keyed verdict. */
    .arg-intro,
    .claim-pair p {
      font-size: clamp(1.02rem, 1.28vw, 1.15rem);
      font-weight: 600;
      line-height: 1.5;
      color: var(--ink);
      letter-spacing: -.006em;
    }

    .claim-pair {
      margin: var(--s-4) 0 var(--s-6);
      padding: 0;
    }

    .claim-pair p {
      margin: 0;
    }

    .claim-pair p+p {
      margin-top: var(--s-3);
      padding-top: var(--s-3);
      border-top: 1px solid var(--hairline);
    }

    /* The vertical rule is the gold seal that says "this is the load-
       bearing claim." Slightly thicker (2→2px stays, but border-color
       brighter via gold-edge tuning at the variable layer) so it
       registers as a designed marker rather than a default border. */
    .arg-intro {
      position: relative;
      padding-left: var(--s-4);
      border-left: 2px solid var(--gold-edge);
    }

    .arg-intro[data-label]::before {
      content: attr(data-label);
      display: block;
      margin: 0 0 .45rem;
      color: var(--gold);
      font: 800 .66rem/1 var(--sans);
      letter-spacing: .24em;
      text-transform: uppercase;
    }

    /* On a hadith card the evidence IS the hadith. The summary keeps
       the normal component look — same label, same gold rule — just
       smaller and a touch softer so the sourced quotes below lead. */
    .slide[data-kind="hadith"] .arg-intro,
    .slide[data-kind="hadith"] .claim-pair p {
      font-size: clamp(.9rem, 1.05vw, .98rem);
      line-height: 1.55;
      color: var(--ink-soft);
    }

    .slide[data-kind="hadith"] .arg-intro[data-label]::before {
      content: "Summary";
    }

    /* ---------- TOC card ---------- */
    nav.toc h2 {
      margin: 0 0 var(--s-6);
      font: 800 clamp(2.1rem, 5vw, 3.6rem)/1.04 var(--serif);
      letter-spacing: -.04em;
      color: var(--ink-strong);
      border: 0;
      padding: 0;
    }

    .toc-priority {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-5);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .toc-card {
      list-style: none;
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .035), transparent 60%),
        var(--callout-bg-warm);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: var(--s-5) var(--s-5) var(--s-4);
      box-shadow: var(--shadow-lift);
      transition:
        border-color .2s var(--ease-deck),
        transform .2s var(--ease-deck),
        box-shadow .2s var(--ease-deck);
    }

    /* hover: the border ramps to a clear gold, the card rises one pixel
       and the shadow stack deepens to match. Subtle motion that reads
       as "this is selectable" — premium without theatre. */
    @media (hover: hover) {
      .toc-card:hover {
        border-color: var(--gold);
        transform: translateY(-1px);
        box-shadow:
          var(--shadow-lift),
          0 8px 24px -12px rgba(0, 0, 0, .25);
      }
    }

    /* respect motion-sensitivity: keep the border + shadow tell so the
       card still reads as selectable, but drop the 1px translate that
       would otherwise trigger vestibular discomfort. */
    @media (prefers-reduced-motion: reduce) {
      .toc-card:hover {
        transform: none;
      }
    }

    .toc-card>a {
      display: block;
      margin: 0 0 .95rem;
      padding: 0 0 .6rem;
      border-bottom: 1px solid var(--hairline);
      color: var(--gold);
      font: 800 .74rem/1.3 var(--sans);
      letter-spacing: .16em;
      text-transform: uppercase;
      -webkit-tap-highlight-color: transparent;
    }

    /* keyboard focus on the part-title link: the global outline collides
       with the card's bordered chrome, so the link gets its own
       background-tint focus (matching the .ix-item:focus pattern in
       the index overlay) — keyboard nav reads the link as selected
       without doubling up on outlines. */
    .toc-card>a:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 4px;
      border-radius: var(--r-sm);
    }

    .toc-card ol {
      counter-reset: toc-item;
      list-style: none;
      margin: .25rem 0 0;
      padding-left: 0;
      color: var(--ink);
    }

    .toc-card ol li {
      counter-increment: toc-item;
      position: relative;
      padding-left: 2rem;
      margin: .42rem 0;
      line-height: 1.34;
      color: var(--ink-soft);
    }

    .toc-card ol li::before {
      content: counter(toc-item, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: .15rem;
      font: 800 .68rem/1 var(--sans);
      letter-spacing: .06em;
      color: var(--gold-dim);
      font-variant-numeric: tabular-nums;
    }

    .toc-card ol li a {
      color: var(--ink-soft);
      text-decoration: none;
      border-bottom: 1px solid var(--hairline);
      padding-bottom: .06em;
      transition: color .15s ease, border-color .15s ease;
    }

    @media (hover: hover) {
      .toc-card ol li a:hover,
      .toc-card ol li:hover a {
        color: var(--gold-2);
        border-bottom-color: var(--gold);
      }
    }

    li.toc-group {
      margin: .85rem 0 .35rem;
      color: var(--ink);
      font-weight: 700;
      list-style: none;
    }

    /* ---------- evidence blocks ----------
       A body-panel is a quiet aside — a line of reasoning indented from
       the running prose by a single visible rule. The left border is
       --line-strong (the deeper warm beige) NOT --gold — gold is
       reserved for evidence-authority signals. --line-strong is just
       visible enough that the indent reads as a designed aside, not
       a stray indentation. */
    .body-panel {
      margin: 1rem 0;
      padding: .15rem 0 .15rem 1.05rem;
      border-left: 2px solid var(--line-strong);
      color: var(--ink-soft);
    }

    .evidence-group {
      margin: var(--s-4) 0;
      padding: 1.1rem 1.2rem;
      /* near-invisible overlay (just 1.2% white) — the group reads as a
         soft container that DOES NOT compete with the primary-source
         quote it holds. A solid panel here would draw the eye to the
         frame instead of the evidence; this is intentional restraint. */
      background: rgba(255, 255, 255, .012);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
    }

    .evidence-group>*:first-child {
      margin-top: 0;
    }

    .evidence-group>*:last-child {
      margin-bottom: 0;
    }

    .evidence-group>h4:first-child {
      letter-spacing: .2em;
      font-size: .7rem;
      color: var(--gold-2);
      border-bottom-color: var(--hairline);
      padding-bottom: .5rem;
    }

    .primary-sources {
      margin: 1.1rem 0;
      padding: 1rem 1.1rem;
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .025), transparent 80%),
        var(--callout-bg-warm);
      border: 1px solid var(--line-strong);
      border-left: 4px solid var(--gold);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-lift);
    }

    .primary-sources h4 {
      margin: 0 0 .65rem;
      padding: 0 0 .5rem;
      letter-spacing: .22em;
      color: var(--gold);
      border-bottom-color: var(--hairline);
    }

    /* the canonical exhibit — the loudest calm thing on the card.
       A radial gold tint from the top-left corner (light mode only — dark
       mode is flat, see override) reads as page-light falling onto the
       exhibit; the 4px gold left bar is the authority signal; the inset
       hairline + 40px-blur drop shadow give the block real presence on
       the page without theatrics. */
    .primary-source-quote,
    blockquote.primary-source-quote {
      display: block;
      width: 100%;
      margin: 1.15rem 0 1.3rem;
      padding: 1.2rem 1.35rem 1.15rem 1.4rem;
      background:
        radial-gradient(80% 60% at 0% 0%, rgb(var(--gold-rgb) / .06), transparent 60%),
        var(--callout-bg-2);
      border: 1px solid var(--line-strong);
      border-left: 4px solid var(--gold);
      border-radius: var(--r-lg);
      color: var(--ink);
      font-family: var(--serif);
      font-size: clamp(1.06rem, 1.45vw, 1.28rem);
      font-weight: 450;
      line-height: 1.58;
      box-shadow:
        inset 0 0 0 1px rgb(var(--gold-rgb) / .04),
        0 12px 40px -28px rgba(0, 0, 0, .9);
      /* a quote's 40px-blur drop shadow and gold radial used to repaint
         their neighbour quotes whenever a single character of text in
         one ran reflowed (rare but real on long cards). `content`
         containment scopes layout + style + paint + size to this box,
         so each quote is now an isolated render unit. */
      contain: content;
    }

    .primary-source-quote>*:first-child {
      margin-top: 0;
    }

    .primary-source-quote>*:last-child {
      margin-bottom: 0;
    }

    .primary-source-quote p {
      margin: .35rem 0;
    }

    .primary-source-quote .cite,
    .primary-source-quote cite {
      display: block;
      margin-top: .7rem;
      color: var(--gold-2);
      font-family: var(--sans);
      font-size: .78rem;
      font-weight: 800;
      font-style: normal;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .primary-source-quote .source-link,
    .primary-source-quote .ref,
    .primary-source-quote .app-label,
    .primary-source-quote .tag {
      margin-left: .35rem;
      font-size: .78rem;
      vertical-align: .12em;
    }

    .primary-source-quote .source-citation {
      display: inline;
      margin: 0;
      padding: 0;
      border: 0;
    }

    .primary-source-quote>.source-citation:last-child {
      display: block;
      margin-top: .7rem;
      padding-top: .55rem;
      border-top: 1px solid rgb(var(--gold-rgb) / .22);
    }

    .primary-source-quote .quote-source-inline .source-link {
      margin-left: .25rem;
    }

    .evidence-group>.primary-source-quote,
    .body-panel>.primary-source-quote {
      margin: .85rem 0;
    }

    blockquote {
      margin: .85rem 0;
      padding: .35rem 0 .35rem 1rem;
      border-left: 3px solid var(--gold);
      color: var(--ink);
      font-size: 1rem;
      line-height: 1.55;
    }

    blockquote p {
      margin: .3rem 0;
    }

    .cite,
    cite {
      display: block;
      margin-top: .45rem;
      color: var(--gold-dim);
      font-size: .85rem;
      font-style: italic;
      letter-spacing: .005em;
    }

    /* the takeaway: after the title, the loudest thing on the card.
       A rust radial from the top-left corner reads as warning-light
       falling onto the verdict; the 5px rust left bar carries the
       authority signal at a glance; the soft outer shadow lifts it
       a hair off the page so the eye lands here next after the title. */
    .callout {
      position: relative;
      margin: 1.3rem 0;
      padding: 1.05rem 1.2rem 1.05rem 1.3rem;
      background:
        radial-gradient(80% 100% at 0% 0%, rgb(var(--rust-rgb) / .16), transparent 60%),
        var(--rust-callout-bg);
      border: 1px solid rgb(var(--rust-rgb) / .42);
      border-left: 5px solid var(--rust);
      border-radius: var(--r-md);
      color: var(--kill-text-on-rust-panel);
      font-size: clamp(1.06rem, 1.45vw, 1.24rem);
      font-weight: 650;
      line-height: 1.46;
      letter-spacing: -.005em;
      box-shadow: var(--shadow-lift);
    }

    .callout[data-label]::before {
      content: attr(data-label);
      display: block;
      margin: 0 0 .5rem;
      color: var(--rust-text);
      font: 800 .64rem/1 var(--sans);
      letter-spacing: .24em;
      text-transform: uppercase;
      opacity: .92;
    }

    .one-liner {
      margin: .75rem 0;
      padding: .25rem 0 .25rem 1rem;
      border-left: 3px solid var(--gold);
      font-weight: 600;
      color: var(--ink);
    }

    .one-liner b,
    .one-liner strong {
      color: var(--gold-2);
      font-weight: 800;
      letter-spacing: -.005em;
    }

    /* author's voice — cool slate so it never reads as a source. The
       slate gradient is so quiet it reads as a hint of cool light on
       the panel rather than a colored fill, but it's enough to keep
       the note tonally distinct from the gold-keyed evidence blocks. */
    .argument-note-box {
      margin: 1.1rem 0;
      padding: .95rem 1.1rem;
      background: linear-gradient(180deg, rgb(var(--slate-rgb) / .04), transparent 80%);
      border: 1px solid var(--line);
      border-left: 3px solid var(--slate);
      border-radius: var(--r-md);
      color: var(--ink-soft);
      font-size: clamp(1rem, 1.2vw, 1.1rem);
      line-height: 1.55;
      font-weight: 600;
      box-shadow: var(--shadow-lift);
    }

    .argument-note-box p {
      margin: .25rem 0;
    }

    .argument-note-box .body-panel {
      margin: 0;
      padding: .15rem 0 .15rem 1rem;
      border-left: 2px solid var(--slate-dim);
    }

    .gold-note-box {
      border-left-color: var(--gold);
    }

    .gold-note-box .body-panel {
      border-left-color: var(--gold-dim);
    }

    .erv-nested-pattern-inner {
      margin-top: .9rem;
      padding-top: .75rem;
    }

    .erv-nested-pattern-inner h4 {
      margin-top: 0;
    }

    .erv-nested-pattern-inner ul {
      margin-bottom: 0;
    }

    /* the inheritance proof: two parallel cases, rendered identically.
       Same 5px gold left bar, same 1.5px control-edge frame, same panel
       background as Case 1 (math-case-button:not(.supplement)) — so the
       two boxes read as exhibits A & B from one brief, and the
       over-100% total can land as the single climax. */
    .math-case {
      margin: var(--s-4) 0;
      padding: var(--s-4) var(--s-5);
      background: var(--callout-bg);
      border: 1.5px solid var(--control-edge);
      border-left: 5px solid var(--gold);
      border-radius: var(--r-md);
    }

    .math-case .case-heading {
      margin: 0 0 .55rem;
      padding: 0 0 .45rem;
      border-bottom: 1px solid var(--line);
      color: var(--gold);
      font: 800 .7rem/1.2 var(--sans);
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    /* collapsed Case 1 wears the exact same gold case label as Case 2 */
    .case-tag {
      color: var(--gold);
      font: 800 .7rem/1.2 var(--sans);
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .math-case .case-subheading,
    .math-case-button .case-subheading {
      margin: .5rem 0 .8rem;
      color: var(--ink);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.48;
    }

    /* the supplement-body's first-child margin reset would zero the
       subheading's top margin (which is exactly what Case 2 gets in its
       .math-case where the <h4> sits above it); restore parity. */
    .math-case-button>.supplement-body>.case-subheading:first-child {
      margin-top: 0;
    }

    .math-total {
      margin-top: .75rem;
      padding-top: .7rem;
      border-top: 1px solid var(--line);
      color: var(--ink);
      font-weight: 700;
      font-size: 1.02rem;
    }

    ul,
    ol {
      padding-left: 1.4rem;
    }

    li {
      margin: .32rem 0;
    }

    /* Arabic transliterations (al-Sā'ah, mawt, etc.) get the same
       italic-gold treatment as Latin foreign-word convention in
       editorial print: italic body, slight letter-spacing pull because
       transliterated Arabic carries macrons that read better with a
       hair of extra width, oldstyle-figures-off so the diacritics
       don't fight against the digit spacing in compound terms. */
    .arabic-term {
      font-style: italic;
      color: var(--gold-dim);
      letter-spacing: .005em;
      font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    }

    code {
      padding: .08rem .38rem;
      background: var(--callout-bg-3);
      border: 1px solid var(--hairline);
      border-radius: 4px;
      color: var(--gold-2);
      font-size: .9em;
    }

    /* ---------- figures ----------
       Images are evidence, not decoration. Treat each one like a
       museum plate: tight border, no float, generous breathing room
       around the figcaption so the source citation reads as authored
       rather than thrown-in. */
    figure.fig {
      position: relative;
      margin: 1.25rem 0 1.35rem;
      text-align: left;
      /* each figure is its own paint island: image-decode, lightbox
         affordance positioning, and the shadow stack don't trigger
         neighbour repaints. layout/style scope is enough — `content`
         (which adds size) would conflict with the lazy image's
         intrinsic dimensions during decode. */
      contain: layout style paint;
    }

    figure.fig img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 70dvh;
      background: var(--callout-bg-deep);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .35),
        0 12px 32px -16px rgba(0, 0, 0, .55);
      cursor: zoom-in;
      transition: box-shadow var(--dur-chip) ease, border-color var(--dur-chip) ease;
    }

    /* keyboard zoom affordance: evidence images are role=button/
       tabindex=0 lightbox triggers (see lightbox JS), but the global
       focus-visible rule targets only a/button/summary/etc. — so a
       tabbed-to figure showed NO focus ring. Match the canonical
       --focus outline; :focus-visible keeps it invisible to mouse/touch. */
    figure.fig img:focus-visible,
    .muddy-spring-corpus-image img:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 3px;
    }

    /* a calm hover lift — readers benefit from a clear "this is
       interactive" affordance on every evidence image without anything
       theatrical. Border-only ramp; the shadow deepens slightly, no
       scale, no transform — accessible to motion-sensitive readers and
       zero layout shift to neighbour figures. */
    @media (hover: hover) {
      figure.fig img:hover {
        border-color: var(--gold-edge);
        box-shadow:
          inset 0 0 0 1px rgba(0, 0, 0, .35),
          0 16px 40px -18px rgba(0, 0, 0, .65);
      }
    }

    /* the figcaption is a museum plate caption — small, muted, tight
       leading. The figure number / source pill sits below in its own
       source-citation block; the caption itself stays a single line of
       description that doesn't compete with the figure or the citation. */
    figure.fig figcaption {
      margin-top: .7rem;
      padding-left: .1rem;
      color: var(--muted);
      font: 500 .8rem/1.5 var(--sans);
      letter-spacing: .008em;
    }

    figcaption .source-citation {
      margin-top: .45rem;
    }

    .stacked-infographic {
      margin: 0;
      padding: 0 1rem 1rem;
    }

    .stacked-infographic img {
      display: block;
      width: 100%;
      max-width: 100%;
      max-height: none;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: #000;
      cursor: zoom-in;
    }

    .muddy-spring-corpus-image {
      position: relative;
      margin: 1rem 0;
    }

    .muddy-spring-corpus-image img {
      width: 100%;
      max-height: none;
      background: #fff;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      cursor: zoom-in;
    }

    .muddy-spring-corpus-image figcaption {
      color: var(--muted);
    }

    .quran-corpus-word-button {
      margin: 1rem 0;
    }

    .quran-corpus-word-button .supplement-body {
      padding: 0 1rem 1rem;
    }

    .quran-corpus-word-button .muddy-spring-corpus-image {
      margin: .85rem auto;
      max-width: 980px;
    }

    .quran-corpus-word-button .muddy-spring-corpus-image img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: none;
    }

    /* source citation pills — gold-keyed, tabular-numeric, baseline-aligned
       inline with surrounding text. The pill is the click target users
       depend on to verify any claim, so it stays consistently identifiable.
       Tightened padding (.62→.7em horizontal) gives the chip more dignity
       at small sizes and prevents the verse-number digits from feeling
       cramped against the pill edge. */
    .source-link {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .2em .7em;
      border: 1px solid var(--gold-edge);
      border-radius: var(--r-pill);
      background: rgb(var(--gold-rgb) / .04);
      color: var(--gold-2);
      font: 700 .72rem/1.25 var(--sans);
      letter-spacing: .015em;
      text-decoration: none;
      text-transform: none;
      white-space: nowrap;
      vertical-align: baseline;
      -webkit-tap-highlight-color: transparent;
      /* skip the 300ms iOS double-tap-zoom delay on every source pill —
         every citation is a single-tap action, never a zoom target. */
      touch-action: manipulation;
      transition:
        background-color var(--dur-chip) ease,
        border-color var(--dur-chip) ease,
        color var(--dur-chip) ease,
        transform .1s ease;
    }

    .source-link:focus-visible {
      background: rgb(var(--gold-rgb) / .14);
      border-color: var(--gold);
      color: var(--ink);
      text-decoration: none;
    }

    /* hover gated to fine-pointer devices only — on touch, sticky hover
       on every Quran / hadith citation pill was forcing readers to
       double-tap to follow a source. Keyboard focus (:focus-visible
       above) is left ungated so tab navigation still highlights. */
    @media (hover: hover) {
      .source-link:hover {
        background: rgb(var(--gold-rgb) / .14);
        border-color: var(--gold);
        color: var(--ink);
        text-decoration: none;
      }
    }

    /* tactile press feedback — the pill compresses by a hair so a tap
       on a phone reads as "registered" before the new tab opens. Tiny
       scale, no translate (avoids reflow next to other inline pills). */
    .source-link:active {
      transform: scale(.96);
      background: rgb(var(--gold-rgb) / .22);
    }

    /* focus ring tightened: the source-link already shows a clear
       hover-state border color change; a 3px outline-offset bloated the
       pill against neighbouring text. 1px offset keeps the ring snug. */
    .source-link:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 1px;
    }

    .quran-source.source-link {
      color: var(--gold);
    }

    .hadith-source.source-link {
      color: var(--gold-2);
    }

    /* the wrapping container that holds a cite label + one-or-more
       source-link pills. baseline alignment so the small-caps prefix
       sits on the same optical line as the pill text instead of
       drifting above it; row gap is larger than column gap so multi-
       line citations breathe without making single-line ones look airy. */
    .source-citation {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: .45rem;
      row-gap: .35rem;
      margin: .45rem 0;
      color: var(--muted);
      line-height: 1.4;
    }

    .source-citation-top {
      margin: 0 0 .7rem;
      padding: 0 0 .6rem;
      border-bottom: 1px solid var(--hairline);
    }

    /* the "SOURCE:" / "VIA:" caps label that introduces a citation row.
       Pairs with .source-link pills next to it — line-height pulled to
       match the pill's effective height so the prefix and pills share
       the same baseline. .14em tracking is editorial without being
       fussy; the trailing colon at the end of the text earns the eye
       a real beat before the pill. */
    .source-prefix {
      color: var(--muted);
      font: 800 .68rem/1.2 var(--sans);
      letter-spacing: .14em;
      text-transform: uppercase;
      vertical-align: baseline;
    }

    .quote-source-inline {
      display: inline-flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-left: .45rem;
      vertical-align: baseline;
    }

    /* small uppercase chips for references / appendix numbers /
       generic tags. Inline-flex with baseline alignment so they sit
       optically on the same line as surrounding text rather than
       drifting up. Tabular nums so a "12" and a "17" chip have the
       same visual width — citation rows wrap cleanly. */
    /* small reference chips — appendix labels (A1, A6), tag pills */
    .ref,
    .app-label,
    .tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.7rem;
      padding: .18rem .58rem;
      border: 1px solid var(--gold-edge);
      border-radius: var(--r-pill);
      background: transparent;
      color: var(--gold);
      font: 800 .7rem/1 var(--sans);
      font-variant-numeric: tabular-nums;
      letter-spacing: .05em;
      text-decoration: none;
      vertical-align: baseline;
      /* a half-pixel optical lift compensates for the chip's all-caps
         glyphs sitting visually below the surrounding x-height */
      transform: translateY(-.05em);
    }

    .tag {
      color: var(--muted);
      border-color: var(--line);
      font-weight: 600;
    }

    .quote-list-item {
      list-style: none;
      margin: .75rem 0;
    }

    .quote-list-item::marker {
      content: "";
    }

    .quote-list-item>.primary-source-quote {
      margin: .5rem 0;
    }

    @supports selector(:has(.quote-list-item)) {
      .primary-source-section ul:has(.quote-list-item) {
        padding-left: 0;
      }
    }

    /* ---------- disclosures: quiet by default, premium when opened ----
       A disclosure is not a loud button. It is a restrained line the
       reader chooses to open: a refined label, a precise hairline, a
       thin chevron. Opening lifts a quiet gold edge — "exhibit open". */
    details.figure-supplement,
    details.nested-supplement,
    details.toc-appendix,
    details.math-case-button {
      margin: 1.1rem 0;
      width: 100%;
      /* 1.5px hairline reads as a more confident frame than 1px without
         crossing into "decorated card" territory — the gold left bar on
         Case-style boxes (math-case-button:not(.supplement)) stays the
         feature; the surrounding frame is just enough to hold the panel. */
      border: 1.5px solid var(--control-edge);
      border-radius: var(--r-md);
      overflow: hidden;
      transition: border-color var(--dur-chip) ease, background-color var(--dur-chip) ease;
    }

    .nested-supplement {
      margin: .75rem 0;
      background: rgba(255, 255, 255, .014);
    }

    details.figure-supplement>summary,
    details.nested-supplement>summary,
    details.toc-appendix>summary,
    details.math-case-button>summary {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-height: 2.75rem;
      padding: .85rem 1.2rem;
      font: 700 .82rem/1.35 var(--sans);
      letter-spacing: .008em;
      color: var(--gold-2);
      list-style: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      /* every disclosure is a single-tap toggle, never a pinch/zoom
         target — bypass iOS's 300ms double-tap-zoom wait so the first
         tap fires instantly, on EVERY phone (not just the ones where
         the instantDisclosures script also intercepts). */
      touch-action: manipulation;
      transition: color var(--dur-chip) ease, background-color var(--dur-chip) ease, transform var(--dur-chip) ease;
    }

    details.figure-supplement>summary::-webkit-details-marker,
    details.nested-supplement>summary::-webkit-details-marker,
    details.toc-appendix>summary::-webkit-details-marker,
    details.math-case-button>summary::-webkit-details-marker {
      display: none;
    }

    @media (hover: hover) {
      details.figure-supplement>summary:hover,
      details.nested-supplement>summary:hover,
      details.toc-appendix>summary:hover,
      details.math-case-button>summary:hover {
        background: rgb(var(--gold-rgb) / .06);
        color: var(--ink-strong);
      }
    }

    details.figure-supplement>summary:active,
    details.nested-supplement>summary:active,
    details.toc-appendix>summary:active,
    details.math-case-button>summary:active {
      transform: translateY(.5px);
    }

    /* open = the whole outline brightens evenly. No asymmetric side bar:
       the gold left bar is reserved for the Case boxes only. */
    details.figure-supplement[open],
    details.toc-appendix[open],
    details.nested-supplement[open] {
      border-color: var(--gold);
    }

    /* Case 1 (math-case-button, NOT the .supplement collapsibles that
       reuse the class) is a Case box like Case 2: same 5px gold left
       bar, same panel background. Visually parallel to Case 2 whether
       collapsed or open — same authority signal at a glance. */
    details.math-case-button:not(.supplement) {
      border-left: 5px solid var(--gold);
      background: var(--callout-bg);
    }

    details.math-case-button:not(.supplement)[open] {
      border-color: var(--gold);
    }

    details.figure-supplement[open]>summary,
    details.nested-supplement[open]>summary,
    details.toc-appendix[open]>summary,
    details.math-case-button[open]>summary {
      color: var(--gold-2);
      border-bottom: 1px solid var(--hairline);
    }

    /* a thin, precise chevron; sits at the line's end, rotates on open */
    details.figure-supplement>summary::after,
    details.nested-supplement>summary::after,
    details.toc-appendix>summary::after,
    details.math-case-button>summary::after {
      content: "";
      flex: none;
      margin-left: auto;
      width: 9px;
      height: 9px;
      border-right: 2.25px solid var(--gold-2);
      border-bottom: 2.25px solid var(--gold-2);
      transform: translateY(-1px) rotate(45deg);
      transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    }

    details.figure-supplement[open]>summary::after,
    details.nested-supplement[open]>summary::after,
    details.toc-appendix[open]>summary::after,
    details.math-case-button[open]>summary::after {
      transform: translateY(2px) rotate(-135deg);
    }

    /* reduced-motion: the chevron still flips to mark open/closed, it just
       doesn't animate the .22s rotation */
    @media (prefers-reduced-motion: reduce) {
      details.figure-supplement>summary::after,
      details.nested-supplement>summary::after,
      details.toc-appendix>summary::after,
      details.math-case-button>summary::after {
        transition: none;
      }
    }

    .figure-supplement .supplement-body,
    .math-case-button>.supplement-body {
      padding: 1rem 1.15rem 1.1rem;
    }

    .figure-supplement .supplement-body>*:first-child,
    .math-case-button>.supplement-body>*:first-child {
      margin-top: 0;
    }

    .figure-supplement .supplement-body>*:last-child,
    .math-case-button>.supplement-body>*:last-child {
      margin-bottom: 0;
    }

    .nested-supplement .nested-body {
      padding: .9rem 1rem 1rem;
    }

    .figure-supplement figure.fig,
    .nested-supplement figure.fig {
      padding: 0;
      margin: .85rem 0 0;
    }

    .figure-supplement figure.fig:first-child,
    .nested-supplement figure.fig:first-child {
      margin-top: 0;
    }

    /* grouped depth, set apart from the core argument and quietly labelled
       so a hostile reader knows the case is complete above this line.
       The eyebrow label gets a short gold tick prefix, mirroring the
       editorial seal pattern of h2.section and .pre-evidence-label — so
       every "this is a thematic break" cue across the deck speaks one
       designed visual language. */
    .supplement-button-box {
      margin: var(--s-7) 0 var(--s-5);
      padding: var(--s-5) 0 0;
      border-top: 1px solid var(--hairline);
      display: grid;
      gap: var(--s-2);
    }

    .supplement-button-box::before {
      content: "Supporting material";
      color: var(--muted);
      font: 800 .66rem/1 var(--sans);
      letter-spacing: .22em;
      text-transform: uppercase;
      margin-bottom: var(--s-2);
    }

    /* Terminal card-level supplement rails are further reading; nested
       source-level supplement boxes keep the Supporting material label. */
    .argument-card > .supplement-button-box::before,
    .hadith > .supplement-button-box::before {
      content: "READ MORE";
    }

    .supplement-button-box>.figure-supplement {
      margin: 0;
    }

    .hadith>.supplement-button-box {
      width: 100%;
      max-width: 100%;
    }

    .single-supplement-box {
      margin: .85rem 0 1rem;
    }

    /* title-row disclosure (the infographic toggle beside the heading) */
    .title-action-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .85rem;
      border-bottom: 1px solid var(--hairline);
      margin: 0 0 1.2rem;
      padding: 0 0 1rem;
    }

    .title-action-row h3.arg {
      flex: 0 0 auto;
      border-bottom: 0;
      margin: 0;
      padding: 0;
    }

    .title-action-row .figure-supplement {
      flex: 0 0 auto;
      margin: 0;
    }

    .figure-supplement.no-outline {
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }

    .figure-supplement.no-outline>summary {
      min-height: 0;
      gap: .55rem;
      padding: .55rem 1rem;
      border: 1px solid var(--control-edge);
      border-radius: var(--r-pill);
      font-size: .76rem;
      letter-spacing: .02em;
    }

    @media (hover: hover) {
      .figure-supplement.no-outline>summary:hover {
        background: rgb(var(--gold-rgb) / .08);
        border-color: var(--gold);
      }
    }

    .figure-supplement.no-outline[open] {
      border-left: 0;
    }

    .figure-supplement.no-outline[open]>summary {
      border-color: var(--gold);
    }

    .figure-supplement.no-outline>summary::after {
      width: 8px;
      height: 8px;
      border-width: 2px;
    }

    .title-action-row .figure-supplement[open] {
      flex: 0 0 100%;
      width: 100%;
    }

    .title-action-row .figure-supplement[open]>figure.fig img {
      width: 100%;
      max-width: 100%;
      max-height: none;
    }

    .math-case-button .math-case {
      margin: .85rem 0 0;
    }

    .math-case-button .math-case:first-child {
      margin-top: 0;
    }

    .math-case-button .case-heading-divider {
      display: none;
    }

    /* ---------- emphasis system: exactly three voices ----------
       1. body          — calm cream serif (default)
       2. b / strong    — the one load-bearing clause, confident gold
       3. .kill/.kill-red — the single fatal phrase per card, warm red
       Anything that shouts everywhere shouts nothing. */

    b,
    strong {
      color: var(--gold-dim);
      font-weight: 700;
    }

    .arg-intro b,
    .arg-intro strong,
    .claim-pair p b,
    .claim-pair p strong {
      color: var(--ink-strong);
    }

    .primary-source-quote b,
    .primary-source-quote strong,
    blockquote.primary-source-quote b,
    blockquote.primary-source-quote strong {
      color: var(--gold);
      font-weight: 700;
      background: none;
      padding: 0;
    }

    .callout b,
    .callout strong {
      color: var(--ink-strong);
      font-weight: 800;
    }

    /* tier 3 — the single fatal phrase, beats every bold rule.
       Underlined in rust at 1.75px so the verdict lands without
       shouting; 2px on standard body text reads as marker-pen. */
    .kill,
    .kill-red,
    .primary-source-quote .kill,
    .primary-source-quote .kill-red,
    .primary-source-quote b.kill,
    .primary-source-quote b.kill-red,
    .primary-source-quote strong.kill,
    .primary-source-quote strong.kill-red,
    blockquote.primary-source-quote .kill,
    blockquote.primary-source-quote .kill-red,
    .callout .kill,
    .callout .kill-red {
      color: var(--kill);
      font-weight: 800;
      text-decoration-line: underline;
      text-decoration-color: rgb(var(--kill-rgb) / .55);
      text-decoration-thickness: 1.75px;
      text-underline-offset: .18em;
      text-decoration-skip-ink: none;
    }

    /* THREE highlight variants — all share the same gradient anatomy
       (transparent above, color below the baseline) so they read as one
       designed system. .hl-num and .hl are gold-keyed; .hl-rust is the
       single rust-keyed variant reserved for the verdict moment. Bumped
       the underline-position slightly (62→60%) so the colored band
       reads as a marker stripe under the word rather than a band that
       intrudes into the x-height — cleaner against the serif baseline. */
    .hl-num,
    .hl {
      background: linear-gradient(180deg, transparent 60%, rgb(var(--gold-rgb) / .30) 60%);
      color: var(--ink-strong);
      font-weight: 700;
      padding: 0 .1em;
      border-radius: 2px;
    }

    .hl {
      background: linear-gradient(180deg, transparent 60%, rgb(var(--gold-rgb) / .34) 60%);
    }

    .primary-source-quote .hl-num,
    blockquote.primary-source-quote .hl-num {
      color: var(--ink);
    }

    .primary-source-quote .hl,
    blockquote.primary-source-quote .hl {
      background: none;
    }

    .hl-rust {
      background: linear-gradient(180deg, transparent 60%, rgb(var(--rust-rgb) / .42) 60%);
      color: var(--kill-text-on-rust-panel);
      font-weight: 700;
      padding: 0 .1em;
      border-radius: 2px;
    }

    .hl-strike {
      text-decoration: line-through;
      text-decoration-color: rgb(var(--rust-rgb) / .8);
      text-decoration-thickness: 1.75px;
      color: var(--ink-soft);
    }

    .key {
      color: var(--ink-strong);
      font-weight: 800;
    }

    /* inheritance fractions: readable structure, NOT 17 shouting underlines.
       The over-100% total is the lone climax (see b.overflow below).
       Matches the gold + 700 weight that `<b>` gets inside a source quote
       (e.g. "Dhul Qarnayn reached (balagha)" on the muddy-spring slide). */
    .inheritance-emphasis {
      color: var(--gold);
      font-weight: 700;
    }

    .inheritance-label {
      font-weight: 400;
      color: var(--ink-strong);
    }

    .math-total b.overflow {
      color: var(--kill);
      font-weight: 800;
      text-decoration-line: underline;
      text-decoration-color: rgb(var(--rust-rgb) / .65);
      text-decoration-thickness: 1.75px;
      text-underline-offset: .18em;
      text-decoration-skip-ink: none;
    }

    .kill-red {
      color: var(--kill);
    }

    .plain-underline {
      color: inherit;
      text-decoration-line: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: .18em;
      text-decoration-color: currentColor;
    }

    .plain-white-underline {
      color: inherit;
      text-decoration-line: underline;
      text-decoration-color: var(--ink-strong);
      text-decoration-thickness: 1.5px;
      text-underline-offset: .18em;
    }

    /* the few remaining symmetry spans (crucifixion body text) read as
       one quiet danger colour, not a six-colour rainbow */
    .sym-deception,
    .sym-appear-so,
    .sym-damnation {
      color: var(--kill);
      text-decoration-line: underline;
      text-decoration-color: rgb(var(--kill-rgb) / .82);
      text-decoration-thickness: 1.5px;
      text-underline-offset: .16em;
    }

    .sym-supernatural,
    .sym-religion,
    .sym-christianity {
      color: inherit;
      text-decoration: none;
    }

    /* ---------- rich content utilities ---------- */
    .key-claim {
      font-family: var(--serif);
      font-size: clamp(1.08rem, 1.35vw, 1.2rem);
      font-weight: 500;
      line-height: 1.5;
      color: var(--ink-soft);
      max-width: 68ch;
      margin: 0 0 1.6rem;
    }

    .key-claim b,
    .key-claim strong {
      color: var(--ink-strong);
      font-weight: 700;
    }

    .verdict {
      margin: 1.6rem 0 1.1rem;
      padding: .25rem 0 .25rem 1.1rem;
      border-left: 3px solid var(--rust);
      color: var(--kill-text-on-rust-panel);
      font-family: var(--serif);
      font-size: clamp(1.1rem, 1.5vw, 1.28rem);
      font-weight: 600;
      line-height: 1.42;
      letter-spacing: -.005em;
    }

    .verdict::before {
      content: attr(data-label);
      display: block;
      margin-bottom: .35rem;
      color: var(--rust-text);
      font: 800 .66rem/1 var(--sans);
      letter-spacing: .26em;
      text-transform: uppercase;
      opacity: .85;
    }

    .verdict b,
    .verdict strong {
      color: var(--ink-strong);
      font-weight: 800;
    }

    .vs-a {
      color: var(--gold-2);
      font-weight: 700;
      border-bottom: 1.5px solid var(--gold-edge);
      padding-bottom: .04em;
    }

    .vs-b {
      color: var(--kill-text-on-rust-panel);
      font-weight: 700;
      border-bottom: 1.5px solid rgb(var(--rust-rgb) / .42);
      padding-bottom: .04em;
    }

    .vs-neutral {
      color: var(--ink-soft);
      font-weight: 600;
    }

    .quote-mini {
      margin: 1.1rem 0;
      padding: 1rem 1.2rem 1rem 1.25rem;
      background:
        radial-gradient(60% 80% at 0% 50%, rgb(var(--gold-rgb) / .07), transparent 60%),
        var(--callout-bg-2);
      border: 1px solid var(--line-strong);
      border-left: 3px solid var(--gold);
      border-radius: var(--r-md);
      font-family: var(--serif);
      font-size: clamp(1.06rem, 1.42vw, 1.2rem);
      font-weight: 500;
      line-height: 1.5;
      color: var(--ink);
      box-shadow: var(--shadow-lift);
    }

    .quote-mini::before {
      content: "\201C";
      float: left;
      color: var(--gold);
      font: 800 2.2rem/.6 var(--serif);
      margin: .2rem .35rem 0 -.1rem;
    }

    .quote-mini cite,
    .quote-mini .cite {
      display: block;
      margin-top: .55rem;
      color: var(--gold-2);
      font: 800 .68rem/1 var(--sans);
      font-style: normal;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .punch-quote {
      margin: 1.4rem 0;
      padding: 0 0 0 1.4rem;
      border-left: 3px solid var(--gold);
      font-family: var(--serif);
      font-size: clamp(1.32rem, 2.1vw, 1.78rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.02em;
      color: var(--ink-strong);
      text-wrap: balance;
    }

    .punch-quote .hl {
      font-weight: 800;
    }

    .fact-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: .9rem;
      align-items: stretch;
      margin: 1.1rem 0;
    }

    .fact-row .fact-cell {
      padding: .95rem 1.05rem;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background:
        linear-gradient(180deg, rgb(var(--gold-2-rgb) / .03), transparent 70%),
        var(--callout-bg);
      box-shadow: var(--shadow-lift);
    }

    .fact-row .fact-cell.warn {
      background:
        linear-gradient(180deg, rgb(var(--rust-rgb) / .08), transparent 70%),
        var(--rust-callout-bg);
      border-color: rgb(var(--rust-rgb) / .4);
    }

    .fact-row .fact-vs {
      display: grid;
      place-items: center;
      width: 2rem;
      color: var(--gold);
      font: 800 .66rem/1 var(--sans);
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .fact-row .fact-label {
      display: block;
      margin-bottom: .45rem;
      color: var(--gold);
      font: 800 .66rem/1 var(--sans);
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .fact-row .fact-cell.warn .fact-label {
      color: var(--rust);
    }

    .num-line {
      counter-reset: numline;
      list-style: none;
      padding: 0;
      margin: 1.1rem 0;
      display: grid;
      gap: .55rem;
    }

    .num-line>li {
      counter-increment: numline;
      position: relative;
      padding: .85rem 1rem .85rem 3rem;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      /* low-key surface — barely lifts off the page in either theme.
         Using the warm-callout token rather than a hardcoded white-alpha
         so the cells track the panel surface correctly in light mode
         too (where rgba(255,255,255) was washing out invisibly). */
      background: var(--callout-bg-warm);
      color: var(--ink);
      line-height: 1.45;
    }

    .num-line>li::before {
      content: counter(numline);
      position: absolute;
      left: .85rem;
      top: .9rem;
      display: grid;
      place-items: center;
      width: 1.5rem;
      height: 1.5rem;
      background: rgb(var(--gold-rgb) / .08);
      border: 1px solid var(--gold-edge);
      border-radius: var(--r-pill);
      color: var(--gold);
      font: 800 .72rem/1 var(--sans);
      font-variant-numeric: tabular-nums;
    }

    .num-line>li.therefore {
      border-color: rgb(var(--rust-rgb) / .4);
      /* therefore-cell = the conclusion: rust-tinted, slightly deeper.
         The base layer is the rust-callout-bg token so the contrast
         tracks each theme correctly (used to be hardcoded black-alpha
         which only worked in dark mode). */
      background:
        linear-gradient(180deg, rgb(var(--rust-rgb) / .08), transparent 70%),
        var(--rust-callout-bg);
      color: var(--kill-text-on-rust-panel);
    }

    .num-line>li.therefore::before {
      content: "\2234";
      background: rgb(var(--rust-rgb) / .15);
      border-color: rgb(var(--rust-rgb) / .5);
      color: var(--kill-text-on-rust-panel);
      font-size: 1rem;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: .7rem;
      margin: 1.1rem 0;
    }

    .stat-grid .stat {
      padding: .95rem 1.05rem;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background:
        linear-gradient(180deg, rgb(var(--gold-rgb) / .04), transparent 70%),
        var(--callout-bg);
      box-shadow: var(--shadow-lift);
    }

    .stat-grid .stat .stat-label {
      display: block;
      color: var(--gold);
      font: 800 .66rem/1 var(--sans);
      letter-spacing: .22em;
      text-transform: uppercase;
      margin-bottom: .4rem;
    }

    .stat-grid .stat .stat-value {
      font-family: var(--serif);
      font-size: clamp(1.28rem, 1.9vw, 1.6rem);
      font-weight: 800;
      color: var(--ink-strong);
      letter-spacing: -.018em;
      line-height: 1.08;
    }

    .stat-grid .stat .stat-note {
      display: block;
      margin-top: .35rem;
      color: var(--muted);
      font-size: .85rem;
      line-height: 1.32;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      margin: 0 0 1rem;
    }

    .tag-row .tag-mini {
      padding: .24rem .62rem;
      border: 1px solid var(--hairline);
      border-radius: var(--r-pill);
      color: var(--muted);
      font: 700 .66rem/1 var(--sans);
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .tag-row .tag-mini.gold {
      color: var(--gold-2);
      border-color: var(--gold-edge);
      background: rgb(var(--gold-rgb) / .05);
    }

    .tag-row .tag-mini.warn {
      color: var(--rust-text);
      border-color: rgb(var(--rust-rgb) / .4);
      background: rgb(var(--rust-rgb) / .06);
    }

    .intro-plain {
      margin: .55rem 0;
      color: var(--ink-soft);
      font-size: 1rem;
      line-height: 1.48;
      font-weight: 500;
    }

    .intro-plain b {
      color: var(--ink);
    }

    .intro-box {
      margin: 1.1rem 0 1.2rem;
      padding: 1.05rem 1.2rem;
      background: linear-gradient(180deg, rgb(var(--gold-rgb) / .045), transparent 70%);
      border: 1px solid var(--gold-edge);
      border-left: 3px solid var(--gold);
      border-radius: var(--r-md);
      color: var(--ink-soft);
      box-shadow: var(--shadow-lift);
    }

    .intro-box p {
      margin: .45rem 0;
      font-size: clamp(.98rem, 1.18vw, 1.08rem);
      font-weight: 500;
      line-height: 1.45;
      color: var(--ink-soft);
    }

    .intro-box p:first-child {
      margin-top: 0;
    }

    .intro-box p:last-child {
      margin-bottom: 0;
    }

    .intro-box b,
    .intro-box strong {
      color: var(--ink-strong);
      font-weight: 700;
    }

    /* gold-keyed eyebrow that introduces an evidence section. Carries
       the same designed-seal pattern as h2.section above — a hairline
       rule across the full width with a short gold tick anchored at
       the leading edge, so every editorial eyebrow on the deck reads
       as one family of marks. */
    .pre-evidence-label {
      position: relative;
      margin: 1.6rem 0 .55rem;
      padding: 0 0 .5rem;
      border-bottom: 1px solid var(--hairline);
      color: var(--gold);
      font: 800 .7rem/1.25 var(--sans);
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .pre-evidence-label::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 2.4rem;
      height: 1px;
      background: var(--gold);
    }

    .pre-evidence-label b {
      color: var(--gold-2);
    }

    .pointer-note {
      margin: 1rem 0 .45rem;
      color: var(--gold-2);
      font-weight: 800;
      font-size: .98rem;
    }

    /* Sanaa palimpsest substitution box — exhibit panel with gold left bar */
    /* Sanaa palimpsest substitution box — the manuscript exhibit. A
       full r-lg rounded card with a 5px gold left bar and a barely-
       visible gold inset hairline, registering as the most polished
       evidence container on the deck (paired with the figure beside it). */
    .sanaa-variant-box {
      margin: 1rem 0;
      padding: 1rem 1.15rem;
      background: var(--chrome-bg);
      border: 1px solid var(--line-strong);
      border-left: 5px solid var(--gold);
      border-radius: var(--r-lg);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb) / .05);
    }

    .sanaa-variant-box ol {
      margin: 0;
      padding-left: 1.35rem;
    }

    .sanaa-variant-box li {
      margin: .35rem 0;
      font-size: clamp(1.08rem, 1.55vw, 1.3rem);
      line-height: 1.35;
    }

    /* Sanaa folio source group — the Folio 6A pill and study pill sit
       on one line; the figure drops below the pill on open at the slide width. */
    .sanaa-folio-group {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: .55rem;
      margin: 1rem 0 1.15rem;
    }

    .sanaa-folio-group > .sanaa-folio-button {
      margin: 0;
      width: auto;
      max-width: 100%;
    }

    /* keep the visible pill sized to its label even when open — the
       figure below grows to the available slide width on its own. */
    .sanaa-folio-group > .sanaa-folio-button > summary {
      width: fit-content;
      max-width: 100%;
    }

    .sanaa-folio-group > .sanaa-folio-button > .fig {
      width: 100%;
    }

    .sanaa-folio-study {
      margin: 0;
    }

    /* Tabari isnad block */
    #app-A6 .primary-source-quote p {
      margin: .4rem 0;
    }

    #app-A6 .primary-source-quote .tabari-head {
      margin: 1.2rem 0 .55rem;
      padding-top: .7rem;
      border-top: 1px solid var(--hairline);
    }

    #app-A6 .primary-source-quote .tabari-head b {
      color: var(--gold-2);
      font: 800 .82rem/1.35 var(--sans);
      letter-spacing: .06em;
    }

    #app-A6 .primary-source-quote .tabari-verdict {
      margin-top: 1.2rem;
      padding: .85rem 1rem;
      border-left: 3px solid var(--gold);
      background: rgb(var(--gold-rgb) / .06);
      border-radius: var(--r-sm);
    }

    .tabari-source-head {
      margin: 0 0 .7rem;
    }

    .tabari-source-head .source-link {
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .04em;
      padding: .4rem .85rem;
    }

    /* end-of-quote source link: plain pill, matches the other
       .primary-source-quote source links (e.g. Budge) — not the
       larger header pill above */
    .tabari-source-foot {
      margin: .7rem 0 0;
    }

    #app-A6-secular-scholarship .nested-body>blockquote.primary-source-quote {
      margin-bottom: 1.15rem;
    }

    #app-A6-secular-scholarship .nested-body>figure.fig {
      margin: 0 0 1.35rem;
    }

    #app-A6-secular-scholarship .nested-body>figure.fig img {
      width: 100%;
      max-height: none;
    }

    #app-A6-secular-scholarship .nested-body>figure.fig figcaption .source-link {
      display: inline-flex;
    }

    /* ---------- crucifixion custom block (slide 5) ---------- */
    #slide-5 .crucifixion-redesign {
      margin: .35rem auto 1.7rem;
      max-width: 980px;
      text-align: left;
    }

    #slide-5 .crux-kicker {
      display: table;
      margin: 0 auto .75rem;
      padding: .42rem .95rem;
      border: 1px solid var(--gold-edge);
      border-radius: var(--r-pill);
      color: var(--gold-2);
      background: rgb(var(--gold-rgb) / .06);
      font: 800 .66rem/1 var(--sans);
      letter-spacing: .28em;
      text-transform: uppercase;
    }

    #slide-5 .crux-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .85rem;
    }

    #slide-5 .crux-card,
    #slide-5 .crux-question {
      position: relative;
      padding: 1.05rem 1.15rem;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-lg);
      background: radial-gradient(70% 50% at 0% 0%, rgb(var(--gold-rgb) / .07), transparent 60%), var(--callout-bg);
      box-shadow: var(--shadow-lift);
    }

    #slide-5 .crux-card-result {
      background: radial-gradient(70% 50% at 0% 0%, rgb(var(--kill-rgb) / .10), transparent 60%), var(--callout-bg);
      border-color: rgb(var(--kill-rgb) / .30);
    }

    #slide-5 .crux-card::before,
    #slide-5 .crux-question::before {
      content: "";
      position: absolute;
      left: 0;
      top: .8rem;
      bottom: .8rem;
      width: 3px;
      border-radius: 2px;
      background: var(--gold);
    }

    #slide-5 .crux-card-result::before,
    #slide-5 .crux-question::before {
      background: var(--kill);
    }

    #slide-5 .crux-label {
      margin: 0 0 .55rem;
      color: var(--gold);
      font: 800 .66rem/1 var(--sans);
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    #slide-5 .crux-card-result .crux-label,
    #slide-5 .crux-question .crux-label {
      color: var(--rust);
    }

    #slide-5 .crux-card p,
    #slide-5 .crux-question p {
      margin: 0;
      color: var(--ink);
      font-size: clamp(1.08rem, 1.65vw, 1.34rem);
      line-height: 1.36;
      font-weight: 600;
      letter-spacing: -.01em;
    }

    #slide-5 .crux-question {
      margin-top: .75rem;
      text-align: center;
      background: radial-gradient(75% 60% at 50% 0%, rgb(var(--kill-rgb) / .12), transparent 60%), var(--callout-bg);
      border-color: rgb(var(--kill-rgb) / .40);
      box-shadow: inset 0 0 0 1px rgb(var(--kill-rgb) / .05), 0 18px 50px -32px rgb(var(--kill-rgb) / .4);
    }

    #slide-5 .crux-question p {
      max-width: 36em;
      margin: 0 auto;
      font-size: clamp(1.18rem, 2vw, 1.58rem);
      letter-spacing: -.012em;
      line-height: 1.32;
    }

    #slide-5 .crux-arrow {
      width: 2.1rem;
      height: 2.1rem;
      margin: .8rem auto .1rem;
      display: grid;
      place-items: center;
      color: var(--gold-2);
      border: 1px solid var(--gold-edge);
      border-radius: var(--r-pill);
      background: var(--chrome-bg);
      font: 900 .85rem/1 var(--sans);
      box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
    }

    #slide-5 .centered-crucifixion-question {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    #slide-5 .centered-crucifixion-question .arg-intro {
      max-width: calc(100% - 3.5rem);
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      border-left: 0;
      padding-left: 0;
    }

    #slide-5 .centered-crucifixion-question .callout {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 0;
      padding-right: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
    }

    #slide-5 .centered-crucifixion-question .sym-supernatural,
    #slide-5 .centered-crucifixion-question .sym-religion,
    #slide-5 .centered-crucifixion-question .sym-christianity,
    #slide-5 .centered-crucifixion-question .sym-damnation,
    #slide-5 .centered-crucifixion-question .sym-deception,
    #slide-5 .centered-crucifixion-question .sym-appear-so {
      color: inherit;
      text-decoration: none;
    }

    #slide-5 .centered-crucifixion-question .red-emphasis,
    #slide-5 .centered-crucifixion-question .sym-damnation {
      color: var(--kill);
      text-decoration-line: underline;
      text-decoration-color: rgb(var(--kill-rgb) / .82);
      text-decoration-thickness: 1.5px;
      text-underline-offset: .16em;
    }

    /* ---------- image zoom affordance + lightbox ---------- */
    /* zoom-hint badge — polished glass pill in the image corner. The
       saturate(120%) on the backdrop-filter intensifies the warm cream
       behind it so the chip reads as a glassy chip on warm paper, not a
       semi-transparent overlay. Multi-shadow stack gives it actual lift
       off the image. Quiet by default; brighter + lifted on figure hover. */
    .zoom-hint {
      position: absolute;
      top: .55rem;
      right: .55rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: .32rem;
      padding: .32rem .6rem;
      background: rgba(247, 238, 212, .9);
      border: 1px solid var(--gold-edge);
      border-radius: var(--r-pill);
      color: var(--gold-2);
      font: 800 .62rem/1 var(--sans);
      letter-spacing: .1em;
      text-transform: uppercase;
      pointer-events: none;
      backdrop-filter: blur(6px) saturate(120%);
      -webkit-backdrop-filter: blur(6px) saturate(120%);
      opacity: .94;
      box-shadow:
        0 1px 0 rgba(255, 250, 230, .7) inset,
        0 6px 14px -8px rgba(60, 40, 20, .35),
        0 1px 3px -1px rgba(60, 40, 20, .15);
      transition: opacity .14s ease, transform .14s ease, border-color .14s ease;
    }

    @media (hover: hover) {
      figure.fig:hover .zoom-hint,
      .muddy-spring-corpus-image:hover .zoom-hint {
        opacity: 1;
        border-color: var(--gold);
        transform: translateY(-1px);
      }
    }

    .zoom-hint svg {
      width: .82em;
      height: .82em;
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      /* theme-aware modal backdrop. Light mode: a deep warm-cream wash
         so the gallery still reads as the cream-paper deck, just darkened
         enough to make the image's edge readable. Dark mode (override
         below): true near-black so the page underneath reads as gone.
         Blur is the visual signature; saturate(110%) was a costly
         no-op against either of those near-monochrome backdrops so it's
         dropped. 9px blur reads identical to 12px at this opacity but
         materially cheaper on mid-range Android. */
      background: rgba(60, 40, 18, .78);
      opacity: 0;
      visibility: hidden;
      transition: opacity .22s ease, visibility .22s ease;
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
      overscroll-behavior: contain;
      /* lightbox is a full-viewport modal that runs blur on a large
         surface. Promoting it to its own compositor layer (transform
         creates one; isolation hints WebKit to do the same) keeps the
         blur layer cached as a GPU texture so opening + closing the
         modal doesn't force the deck underneath to re-paint. */
      transform: translateZ(0);
      isolation: isolate;
      contain: layout style paint;
      /* the overlay lives OUTSIDE .deck-app, so it doesn't inherit the
         deck's double-tap-zoom suppression. Without this, iOS Safari runs
         its native double-tap / pinch PAGE zoom on the controls (the stage
         + img are touch-action:none, the bar/buttons were not) — a double
         tap on +/− zooms the whole page into the button and traps you. */
      touch-action: manipulation;
    }

    .lightbox.open {
      opacity: 1;
      visibility: visible;
    }

    .lightbox-stage {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      touch-action: none;
      cursor: grab;
    }

    .lightbox-stage.panning {
      cursor: grabbing;
    }

    .lightbox-img {
      max-width: 96vw;
      max-height: 92dvh;
      border-radius: var(--r-sm);
      box-shadow:
        0 24px 64px -16px rgba(0, 0, 0, .85),
        0 0 0 1px rgb(var(--gold-rgb) / .1);
      transform-origin: center center;
      -webkit-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      touch-action: none;
    }

    .lightbox-bar {
      position: fixed;
      top: max(1rem, env(safe-area-inset-top));
      right: max(1rem, env(safe-area-inset-right));
      display: flex;
      gap: .5rem;
      z-index: 2;
      touch-action: manipulation;
    }

    /* lightbox controls — theme-aware glass chips. Light mode renders
       them as polished cream pills with a warm gold edge: the backdrop
       is a deep warm-cream wash, so the chips need to read as lighter
       than the wash to register as floating controls (not as holes).
       Dark mode override below flips to dark glass against the near-
       black backdrop. Hover/active shared between modes via vars. */
    /* lightbox controls — calm glass chips. Light mode renders them as
       cream pills with a gold edge so they read as floating against the
       cream-wash backdrop; dark-mode override below flips to dark glass. */
    .lightbox-btn {
      width: 2.85rem;
      height: 2.85rem;
      display: grid;
      place-items: center;
      touch-action: manipulation;
      border: 1px solid var(--gold);
      background:
        linear-gradient(180deg,
          rgba(255, 248, 224, .92) 0%,
          rgba(247, 238, 212, .88) 100%);
      color: var(--gold-2);
      border-radius: var(--r-pill);
      font: 800 1.15rem/1 var(--sans);
      cursor: pointer;
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 236, .9),
        inset 0 -1px 0 rgb(var(--gold-rgb) / .15),
        0 1px 2px rgba(60, 40, 18, .25),
        0 8px 22px -8px rgba(60, 40, 18, .45);
      transition: border-color .15s ease, color .15s ease,
                  background-color .15s ease, box-shadow .15s ease,
                  transform .1s ease;
    }

    @media (hover: hover) {
      .lightbox-btn:hover {
        border-color: var(--gold-2);
        color: var(--ink);
        background:
          linear-gradient(180deg,
            rgba(255, 250, 232, .96) 0%,
            rgba(250, 240, 218, .92) 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 253, 240, .95),
          inset 0 -1px 0 rgb(var(--gold-rgb) / .22),
          0 2px 4px rgba(60, 40, 18, .3),
          0 12px 26px -8px rgba(60, 40, 18, .5);
      }
    }

    .lightbox-btn:active {
      transform: scale(.96);
      background:
        linear-gradient(180deg,
          rgba(250, 240, 215, .96) 0%,
          rgba(244, 232, 205, .94) 100%);
    }

    .lightbox-btn:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
    }

    body.lightbox-lock {
      overflow: hidden;
    }

    /* ---------- responsive ---------- */
    @media (max-width: 900px) {

      :root {
        /* Phones get a chunkier rail on BOTH ends — the heights track
           in lockstep so the deck reads as a balanced sandwich rather
           than two unrelated strips. Top still sits a beat shorter
           than the bottom (identity vs. controls). */
        --top-h: 58px;
        --bottom-h: 70px;
      }

      html,
      body {
        overflow-x: hidden;
        max-width: 100vw;
      }

      .deck-top {
        padding: 0 clamp(.9rem, 3vw, 1.4rem);
        padding-top: env(safe-area-inset-top, 0px);
        gap: clamp(.7rem, 2vw, 1rem);
      }

      /* on phones the sub-mark would crowd the wordmark — drop it
         and let the serif title carry the identity alone */
      .deck-brand-kind {
        display: none;
      }

      .deck-brand {
        padding: .35rem 0;
        gap: 0;
      }

      /* on phones the wordmark is the whole identity — bump the size and
         tighten the tracking a notch so it reads with the same editorial
         weight as the card titles inside */
      .deck-brand-name {
        font-size: 1.15rem;
        letter-spacing: -.022em;
        transform: none;
      }

      .deck-top-actions {
        gap: .45rem;
      }

      .deck-help,
      .deck-share,
      .deck-theme {
        /* 2.75rem = 44px = Apple HIG minimum touch target. The desktop
           value (2.35rem) is fine for mouse precision; on phones the
           thumb needs the full 44px so missed taps don't happen near
           the screen edge. */
        width: 2.75rem;
        height: 2.75rem;
        border-width: 1.2px;
      }

      .deck-help svg,
      .deck-share svg,
      .deck-theme svg {
        width: 1.3rem;
        height: 1.3rem;
        stroke-width: 1.8;
      }

      .deck-hints {
        /* mobile uses tighter gutters (.9-1.4rem vs .8-1.8rem) but the
           same safe-area-max pattern as the deck-top above it, so the
           popover and the ? button stay aligned even when an iPhone
           rotates to landscape mid-deck and the Dynamic Island lands
           on either side. */
        right: max(
          clamp(.9rem, 3vw, 1.4rem),
          env(safe-area-inset-right, 0px)
        );
        width: min(360px, calc(100vw - 2 * max(
          clamp(.9rem, 3vw, 1.4rem),
          env(safe-area-inset-left, 0px),
          env(safe-area-inset-right, 0px)
        )));
      }

      .deck-hints::before {
        right: calc(2.7rem + .45rem + 1.35rem - 6px);
      }

      .deck-hints-list--desktop { display: none; }
      .deck-hints-list--mobile  { display: block; }

      .deck-bottom {
        /* roomier vertical breathing room + slightly tighter inline
           padding so the nav buttons get every pixel of width they can */
        padding: .68rem clamp(.7rem, 3vw, 1.4rem) calc(.68rem + env(safe-area-inset-bottom, 0px));
        gap: .55rem;
      }

      .deck-nav {
        /* 3.3rem ≈ 56px — comfortably above Apple HIG's 44px minimum,
           feels deliberate and easy to thumb on a phone */
        width: 3.3rem;
        border-width: 1.5px;
      }

      .deck-nav svg {
        /* ~22px chevron, confident at thumb distance */
        width: 1.35rem;
        height: 1.35rem;
        stroke-width: 2.05;
      }

      /* Touch chip: a quiet gold-keyed border and a whisper of warm fill.
         Mobile keeps this control blunt and readable: CARDS plus the
         chevron, centered, with the desktop title/divider removed. */
      .deck-here {
        padding: 0 1rem;
        justify-content: center;
        gap: .46rem;
        border: 1px solid var(--gold-edge);
        background:
          linear-gradient(180deg,
            rgb(var(--gold-2-rgb) / .035) 0%,
            transparent 70%);
        transition: border-color var(--dur-chip) ease, background-color var(--dur-chip) ease,
                    transform .12s ease;
      }

      .deck-here:active {
        border-color: var(--gold);
        background: rgb(var(--gold-rgb) / .08);
        transform: translateY(.5px);
      }

      .deck-here-tag {
        font: 700 .98rem/1 var(--sans);
        letter-spacing: .28em;
        padding-left: .28em;
      }

      .deck-here-title {
        display: none;
      }

      .deck-here-arrow {
        width: 1.02rem;
        height: 1.02rem;
        margin-left: .02rem;
        stroke: var(--gold-2);
        stroke-width: 2.2;
      }

      .argument-card,
      .hadith,
      .app-entry,
      .section-slide,
      header.cover,
      nav.toc {
        max-width: 100%;
      }

      .toc-priority {
        grid-template-columns: 1fr;
      }

      .figure-supplement,
      .figure-supplement .supplement-body,
      .nested-supplement .nested-body,
      figure.fig,
      .stacked-infographic,
      .muddy-spring-corpus-image,
      .quran-corpus-word-button .muddy-spring-corpus-image,
      .primary-source-quote,
      .evidence-group,
      .math-case,
      .math-case-button,
      .sanaa-variant-box {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
      }

      figure.fig img,
      .figure-supplement figure.fig img,
      .nested-supplement figure.fig img,
      .stacked-infographic img,
      .muddy-spring-corpus-image img,
      .quran-corpus-word-button .muddy-spring-corpus-image img,
      #app-A6-secular-scholarship .nested-body>figure.fig img {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        max-height: none;
        object-fit: contain;
      }

      .source-citation,
      .quote-source-inline {
        min-width: 0;
      }

      .source-link {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      details.figure-supplement>summary,
      details.nested-supplement>summary,
      details.toc-appendix>summary,
      details.math-case-button>summary {
        min-height: 3rem;
        font-size: .74rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
      }

      .callout {
        font-size: 1.06rem;
      }
    }

    @media (max-width: 720px) {

      .title-action-row {
        display: block;
      }

      .title-action-row .figure-supplement {
        max-width: none;
        margin: .75rem 0 0;
      }

      .fact-row {
        grid-template-columns: 1fr;
      }

      .fact-row .fact-vs {
        width: auto;
        padding: .25rem 0;
      }

      #slide-5 .crux-grid {
        grid-template-columns: 1fr;
      }

      #slide-5 .crux-question {
        text-align: left;
      }
    }

    @media (max-width: 540px) {

      /* True phones keep the same CARDS-only model; this breakpoint only
         tightens surrounding content, not the control vocabulary. */

      header.cover {
        padding: 5vh 0 2rem;
      }

      header.cover h1 {
        font-size: clamp(2rem, 8vw, 2.8rem);
        max-width: none;
        letter-spacing: -.045em;
      }

      header.cover .subtitle {
        font-size: 1rem;
      }

      .slide {
        padding: .85rem .85rem 1.5rem;
      }

      .evidence-group,
      .primary-sources,
      .callout,
      .math-case,
      .argument-note-box,
      .primary-source-quote {
        padding: .85rem .9rem;
      }

      blockquote,
      .primary-source-quote {
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem;
      }

      .toc-card {
        padding: .9rem 1rem;
      }

      .toc-card ol li {
        padding-left: 1.75rem;
      }

      .section-link-list li {
        padding-left: 2.2rem;
      }

      ul,
      ol {
        padding-left: 1.15rem;
      }
    }

    @media (max-width: 380px) {
      .slide {
        padding: .9rem .8rem 1.6rem;
      }

      /* tiny phones (iPhone SE etc.): pull the chip in a touch so the
         title still has runway, but keep the nav buttons large enough
         that thumbs don't miss. Touch targets stay ≥44px. */
      .deck-top,
      .deck-bottom {
        gap: .45rem;
        padding-inline: .7rem;
      }

      .deck-nav {
        width: 3rem;
      }

      .deck-help,
      .deck-share {
        width: 2.5rem;
        height: 2.5rem;
      }

      .deck-brand-name {
        font-size: 1.04rem;
      }

      .deck-help svg,
      .deck-share svg {
        width: 1.2rem;
        height: 1.2rem;
      }

      .deck-here {
        padding: 0 .8rem;
        gap: .5rem;
      }

      .deck-here-tag {
        font-size: .94rem;
        letter-spacing: .3em;
        padding-left: .3em;
      }

      .deck-here-arrow {
        width: .95rem;
        height: .95rem;
      }

      .deck-hints::before {
        right: calc(2.5rem + .45rem + 1.25rem - 6px);
      }
    }

    /* ---------- print ---------- */
    @media print {

      /* A4/Letter-friendly margins so the cards have a print-page gutter
         even when the browser's "minimum margins" is set to none. Editors
         that read this as PDF still get a usable manuscript. */
      @page {
        margin: 18mm;
        size: auto;
      }

      html,
      body {
        overflow: visible;
        background: #fff;
        color: #111;
        font-size: 11pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      /* image affordances and decorative chrome are irrelevant on paper */
      .zoom-hint,
      .deck-progress,
      .cover-hint,
      .cover-rule {
        display: none !important;
      }

      .deck-top,
      .deck-bottom,
      .deck-index,
      .deck-hints,
      .zoom-hint,
      .lightbox {
        display: none !important;
      }

      .deck-app {
        display: block;
        height: auto;
      }

      .deck-stage {
        display: block;
        padding: 0;
        height: auto;
        overflow: visible;
      }

      .slide {
        display: block !important;
        page-break-after: always;
        height: auto;
        overflow: visible;
        border: 0;
        background: #fff;
        color: #111;
        box-shadow: none;
        /* print has no "near the viewport" — force every card to render
           so the whole deck still flows to paper / PDF, one slide a page */
        content-visibility: visible;
        contain-intrinsic-size: auto;
      }

      a {
        color: #111;
        text-decoration: underline;
      }

      .source-link {
        background: #eee;
        color: #111;
        border-color: #999;
      }

      /* the deck-track carries a JS-applied translateX that centres the
         current card. In print, this would push every other card off the
         page — kill the transform and let cards flow as block siblings. */
      .deck-track {
        display: block !important;
        transform: none !important;
        transition: none !important;
      }

      /* keep proofs / quotes / figures from being split across pages */
      figure.fig,
      blockquote,
      .primary-source-quote,
      .math-case,
      .callout,
      .evidence-group {
        break-inside: avoid;
        page-break-inside: avoid;
      }

      /* the "Link copied" toast is irrelevant on paper */
      .deck-toast {
        display: none !important;
      }
    }

  

:root[data-theme="dark"] {
  background: var(--bg);
}

@media (hover: hover) {
  :root[data-theme="dark"] a:hover {
    color: var(--gold-2);
  }
}

@supports selector(:focus-visible) {
  :root[data-theme="dark"] a:focus-visible,
  :root[data-theme="dark"] button:focus-visible,
  :root[data-theme="dark"] select:focus-visible,
  :root[data-theme="dark"] input:focus-visible,
  :root[data-theme="dark"] summary:focus-visible,
  :root[data-theme="dark"] details:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

@supports not selector(:focus-visible) {
  :root[data-theme="dark"] a:focus,
  :root[data-theme="dark"] button:focus,
  :root[data-theme="dark"] select:focus,
  :root[data-theme="dark"] input:focus,
  :root[data-theme="dark"] summary:focus,
  :root[data-theme="dark"] details:focus {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

:root[data-theme="dark"] ::selection {
  background: rgb(var(--gold-rgb) / .28);
  color: #fff;
}

/* dark mode body: a quiet brass-lamp glow from above, centred so it
   never biases the perceived centre of the slide rectangle. */
:root[data-theme="dark"] body {
  background: var(--bg);
}

:root[data-theme="dark"] .deck-top {
  background: linear-gradient(180deg, var(--chrome-bg) 0%, var(--chrome-bg) 70%, var(--chrome-deep) 100%);
  border-bottom: 1px solid var(--hairline);
}

:root[data-theme="dark"] .deck-brand {
  background: transparent;
}

:root[data-theme="dark"] .deck-brand-name {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .deck-brand-kind {
  color: var(--gold);
}

@media (hover: hover) {
  :root[data-theme="dark"] .deck-brand:hover .deck-brand-name {
    color: var(--gold-2);
  }
}

:root[data-theme="dark"] .deck-brand:focus-visible {
  outline: 2px solid var(--gold);
}

:root[data-theme="dark"] .deck-help,
:root[data-theme="dark"] .deck-share,
:root[data-theme="dark"] .deck-theme {
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 50% 26%,
          rgb(var(--gold-2-rgb) / .075) 0%,
          rgb(var(--gold-rgb) / .02) 55%,
          transparent 100%);
  color: var(--gold-2);
  box-shadow:
    inset 0 1px 0 rgb(var(--gold-2-rgb) / .1),
    inset 0 0 0 1px rgba(0, 0, 0, .22);
}

:root[data-theme="dark"] .deck-help svg,
:root[data-theme="dark"] .deck-share svg,
:root[data-theme="dark"] .deck-theme svg {
  stroke: currentColor;
}

:root[data-theme="dark"] .deck-help svg circle {
  fill: currentColor;
}

@media (hover: hover) {
  :root[data-theme="dark"] .deck-help:hover,
  :root[data-theme="dark"] .deck-share:hover,
  :root[data-theme="dark"] .deck-theme:hover {
    border-color: var(--gold);
    color: var(--ink-strong);
    background: radial-gradient(circle at 50% 26%,
            rgb(var(--gold-2-rgb) / .16) 0%,
            rgb(var(--gold-rgb) / .045) 55%,
            transparent 100%);
    box-shadow:
      inset 0 1px 0 rgb(var(--gold-2-rgb) / .2),
      inset 0 0 0 1px rgba(0, 0, 0, .22);
  }
}

:root[data-theme="dark"] .deck-help:focus-visible,
:root[data-theme="dark"] .deck-share:focus-visible,
:root[data-theme="dark"] .deck-theme:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

:root[data-theme="dark"] .deck-help[aria-expanded="true"] {
  border-color: var(--gold);
  color: var(--ink-strong);
  background: radial-gradient(circle at 50% 28%,
          rgb(var(--gold-2-rgb) / .16) 0%,
          rgb(var(--gold-rgb) / .04) 55%,
          transparent 100%);
  box-shadow: inset 0 1px 0 rgb(var(--gold-2-rgb) / .2),
        inset 0 0 0 1px rgba(0, 0, 0, .18);
}

:root[data-theme="dark"] .deck-progress {
  background: linear-gradient(90deg, rgb(var(--gold-rgb) / .55), var(--gold) 80%);
}

:root[data-theme="dark"] .deck-hints {
  background:
    radial-gradient(ellipse at 80% 0%, rgb(var(--gold-rgb) / .07), transparent 60%),
    linear-gradient(180deg, var(--popover-bg) 0%, var(--popover-bg-deep) 100%);
  border: 1px solid var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgb(var(--gold-2-rgb) / .09),
    inset 0 0 0 1px rgba(0, 0, 0, .2),
    0 30px 64px -22px rgba(0, 0, 0, .9),
    0 10px 26px -12px rgba(0, 0, 0, .65);
}

:root[data-theme="dark"] .deck-hints::before {
  background: var(--popover-arrow);
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
}

:root[data-theme="dark"] .deck-hints-eyebrow {
  color: var(--gold);
  border-bottom: 1px solid var(--hairline);
}

:root[data-theme="dark"] .deck-hints-eyebrow::after {
  background: var(--gold);
}

:root[data-theme="dark"] .deck-hints-list li + li {
  border-top: 1px solid rgb(var(--gold-rgb) / .05);
}

:root[data-theme="dark"] .deck-hints-action {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .deck-hints-method {
  color: var(--muted);
}

:root[data-theme="dark"] .deck-hints-method .hint-chevron {
  border-right: 2px solid var(--gold-2);
  border-bottom: 2px solid var(--gold-2);
}

:root[data-theme="dark"] .deck-hints-or {
  color: var(--faint);
}

:root[data-theme="dark"] .deck-toast {
  color: var(--ink-strong);
  background:
    radial-gradient(120% 220% at 50% 0%, rgb(var(--gold-rgb) / .07), transparent 70%),
    linear-gradient(180deg, var(--popover-bg) 0%, var(--popover-bg-deep) 100%);
  border: 1px solid var(--gold-dim);
  box-shadow:
    inset 0 1px 0 rgb(var(--gold-2-rgb) / .09),
    0 18px 44px -16px rgba(0, 0, 0, .85),
    0 6px 14px -6px rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .slide {
  background: var(--panel);
  border: 1px solid var(--hairline);
}

:root[data-theme="dark"] .deck-bottom {
  background: linear-gradient(180deg, var(--chrome-deep) 0%, var(--chrome-bg) 100%);
  border-top: 1px solid var(--hairline);
}

:root[data-theme="dark"] .deck-nav {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--gold-2);
}

:root[data-theme="dark"] .deck-nav svg {
  stroke: currentColor;
}

@media (hover: hover) {
  :root[data-theme="dark"] .deck-nav:hover {
    border-color: var(--gold);
    color: var(--ink-strong);
    background: rgb(var(--gold-rgb) / .06);
  }
}

:root[data-theme="dark"] .deck-nav:active {
  background: rgb(var(--gold-rgb) / .1);
}

:root[data-theme="dark"] .deck-here {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}

@media (hover: hover) {
  :root[data-theme="dark"] .deck-here:hover {
    border-color: var(--gold);
    background: rgb(var(--gold-rgb) / .05);
  }
}

:root[data-theme="dark"] .deck-here-tag {
  color: var(--gold-2);
}

:root[data-theme="dark"] .deck-here-title {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .deck-here-arrow {
  stroke: var(--gold-2);
}

@media (hover: hover) {
  :root[data-theme="dark"] .deck-here:hover .deck-here-arrow {
    stroke: var(--gold);
  }
}

:root[data-theme="dark"] .deck-index {
  background: rgba(4, 3, 2, .85);
}

:root[data-theme="dark"] .deck-index-panel {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85);
}

:root[data-theme="dark"] .deck-index-bar {
  border-bottom: 1px solid var(--hairline);
}

:root[data-theme="dark"] .deck-index-title {
  color: var(--gold);
}

:root[data-theme="dark"] .deck-index-close {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
}

@media (hover: hover) {
  :root[data-theme="dark"] .deck-index-close:hover {
    border-color: var(--gold);
    color: var(--ink-strong);
  }
}

:root[data-theme="dark"] .deck-index-hint {
  border-left: 1px solid var(--hairline);
  color: var(--muted);
}

:root[data-theme="dark"] .deck-index-hint .keycap {
  border: 1px solid var(--line-strong);
  color: var(--gold-2);
}

:root[data-theme="dark"] .deck-index-hint .keycap svg {
  stroke: currentColor;
}

:root[data-theme="dark"] .ix-group {
  background: transparent;
  color: var(--gold);
}

:root[data-theme="dark"] .ix-group-static {
  color: var(--faint);
}

@media (hover: hover) {
  :root[data-theme="dark"] button.ix-group:hover {
    color: var(--gold-2);
    background: rgb(var(--gold-rgb) / .05);
  }
}

:root[data-theme="dark"] .ix-item {
  background: transparent;
  color: var(--ink-soft);
}

@media (hover: hover) {
  :root[data-theme="dark"] .ix-item:hover {
    background: rgb(var(--gold-rgb) / .06);
    color: var(--ink-strong);
  }
}

:root[data-theme="dark"] .ix-item[aria-current="true"] {
  color: var(--gold-2);
  background: rgb(var(--gold-rgb) / .08);
  box-shadow: inset 2px 0 0 var(--gold);
}

:root[data-theme="dark"] .ix-item:focus,
:root[data-theme="dark"] .ix-group:focus {
  outline: 2px solid var(--focus);
  background: rgb(var(--gold-rgb) / .14);
  color: var(--ink-strong);
}

:root[data-theme="dark"] .ix-item:focus {
  box-shadow: inset 2px 0 0 var(--gold);
}

:root[data-theme="dark"] .cover-kicker {
  color: var(--gold);
}

:root[data-theme="dark"] header.cover h1 {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .cover-rule {
  background: linear-gradient(90deg, var(--gold), var(--gold-2) 50%, transparent);
}

:root[data-theme="dark"] header.cover .subtitle {
  color: var(--ink-soft);
}

:root[data-theme="dark"] .cover-hint {
  border-left-color: var(--gold-edge);
  color: var(--muted);
}

:root[data-theme="dark"] .cover-hint b,
:root[data-theme="dark"] .deck-hints-method b {
  color: var(--gold-2);
}

:root[data-theme="dark"] .keycap {
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg,
    rgb(var(--gold-2-rgb) / .06) 0%,
    rgb(var(--gold-rgb) / .015) 100%);
  color: var(--gold-2);
  box-shadow:
    inset 0 1px 0 rgb(var(--gold-2-rgb) / .12),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 1px 0 rgba(0, 0, 0, .25);
}

:root[data-theme="dark"] .keycap svg {
  stroke: currentColor;
}

:root[data-theme="dark"] .deck-ref {
  border: 1px solid var(--line-strong);
  background: var(--chrome-bg);
}

:root[data-theme="dark"] .deck-ref-label {
  color: var(--gold-2);
}

:root[data-theme="dark"] .deck-ref-arrow {
  stroke: var(--gold-2);
}

:root[data-theme="dark"] h2.section {
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-strong);
}

:root[data-theme="dark"] .section-slide .slide-note {
  color: var(--muted);
}

:root[data-theme="dark"] .section-link-list li {
  color: var(--ink-soft);
}

:root[data-theme="dark"] .section-link-list li::before {
  color: var(--gold-dim);
}

:root[data-theme="dark"] .section-link-list a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}

@media (hover: hover) {
  :root[data-theme="dark"] .section-link-list a:hover {
    color: var(--gold-2);
    border-bottom-color: var(--gold);
  }
}

:root[data-theme="dark"] h3.arg,
:root[data-theme="dark"] .app-entry h3:first-child {
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-strong);
}

:root[data-theme="dark"] h4 {
  border-bottom: 1px solid var(--line);
  color: var(--gold);
}

:root[data-theme="dark"] .argument-card p,
:root[data-theme="dark"] .hadith p,
:root[data-theme="dark"] .app-entry p {
  color: var(--ink);
}

:root[data-theme="dark"] .slide-note {
  color: var(--muted);
}

:root[data-theme="dark"] .arg-intro,
:root[data-theme="dark"] .claim-pair p {
  color: var(--ink);
}

:root[data-theme="dark"] .claim-pair p+p {
  border-top: 1px solid var(--hairline);
}

:root[data-theme="dark"] .arg-intro {
  border-left: 2px solid var(--gold-edge);
}

:root[data-theme="dark"] .arg-intro[data-label]::before {
  color: var(--gold);
}

:root[data-theme="dark"] .slide[data-kind="hadith"] .arg-intro,
:root[data-theme="dark"] .slide[data-kind="hadith"] .claim-pair p {
  color: var(--ink-soft);
}

:root[data-theme="dark"] nav.toc h2 {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .toc-card {
  background: var(--callout-bg-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}

@media (hover: hover) {
  :root[data-theme="dark"] .toc-card:hover {
    border-color: var(--gold-edge);
  }
}

:root[data-theme="dark"] .toc-card>a {
  border-bottom: 1px solid var(--hairline);
  color: var(--gold);
}

:root[data-theme="dark"] .toc-card ol {
  color: var(--ink);
}

:root[data-theme="dark"] .toc-card ol li {
  color: var(--ink-soft);
}

:root[data-theme="dark"] .toc-card ol li::before {
  color: var(--gold-dim);
}

:root[data-theme="dark"] .toc-card ol li a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}

@media (hover: hover) {
  :root[data-theme="dark"] .toc-card ol li a:hover,
  :root[data-theme="dark"] .toc-card ol li:hover a {
    color: var(--gold-2);
    border-bottom-color: var(--gold);
  }
}

:root[data-theme="dark"] li.toc-group {
  color: var(--ink);
}

:root[data-theme="dark"] .body-panel {
  border-left: 2px solid var(--line-strong);
  color: var(--ink-soft);
}

:root[data-theme="dark"] .evidence-group {
  background: var(--callout-bg-warm);
  border: 1px solid var(--line);
}

:root[data-theme="dark"] .evidence-group>h4:first-child {
  color: var(--gold-2);
  border-bottom-color: var(--hairline);
}

:root[data-theme="dark"] .primary-sources {
  background:
    linear-gradient(180deg, rgb(var(--gold-rgb) / .025), transparent 80%),
    var(--callout-bg-warm);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--gold);
  box-shadow: var(--shadow-lift);
}

:root[data-theme="dark"] .primary-sources h4 {
  color: var(--gold);
  border-bottom-color: var(--hairline);
}

:root[data-theme="dark"] .primary-source-quote,
:root[data-theme="dark"] blockquote.primary-source-quote {
  background: var(--callout-bg-2);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--gold);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgb(var(--gold-rgb) / .05),
    0 16px 44px -28px rgba(0, 0, 0, .95);
}

:root[data-theme="dark"] .primary-source-quote .cite,
:root[data-theme="dark"] .primary-source-quote cite {
  color: var(--gold-2);
}

:root[data-theme="dark"] .primary-source-quote>.source-citation:last-child {
  border-top: 1px solid rgb(var(--gold-rgb) / .22);
}

:root[data-theme="dark"] blockquote {
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
}

:root[data-theme="dark"] .cite,
:root[data-theme="dark"] cite {
  color: var(--gold-dim);
}

:root[data-theme="dark"] .callout {
  background:
    radial-gradient(85% 110% at 0% 0%, rgb(var(--rust-rgb) / .18), transparent 62%),
    var(--rust-callout-bg);
  border: 1px solid rgb(var(--rust-rgb) / .42);
  border-left: 5px solid var(--rust);
  color: var(--kill-text-on-rust-panel);
  box-shadow:
    inset 0 1px 0 rgb(var(--kill-rgb) / .06),
    var(--shadow-lift);
}

:root[data-theme="dark"] .callout[data-label]::before {
  color: var(--rust-text);
}

:root[data-theme="dark"] .one-liner {
  border-left: 3px solid var(--gold);
  color: var(--ink);
}

:root[data-theme="dark"] .one-liner b,
:root[data-theme="dark"] .one-liner strong {
  color: var(--gold-2);
}

:root[data-theme="dark"] .argument-note-box {
  background: linear-gradient(180deg, rgb(var(--slate-rgb) / .04), transparent 80%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
  color: var(--ink-soft);
  box-shadow: var(--shadow-lift);
}

:root[data-theme="dark"] .argument-note-box .body-panel {
  border-left: 2px solid var(--slate-dim);
}

:root[data-theme="dark"] .gold-note-box {
  border-left-color: var(--gold);
}

:root[data-theme="dark"] .gold-note-box .body-panel {
  border-left-color: var(--gold-dim);
}

:root[data-theme="dark"] .math-case {
  background: var(--callout-bg);
  border: 1.5px solid var(--control-edge);
  border-left: 5px solid var(--gold);
}

:root[data-theme="dark"] .math-case .case-heading {
  border-bottom: 1px solid var(--line);
  color: var(--gold);
}

:root[data-theme="dark"] .case-tag {
  color: var(--gold);
}

:root[data-theme="dark"] .math-case .case-subheading,
:root[data-theme="dark"] .math-case-button .case-subheading {
  color: var(--ink);
}

:root[data-theme="dark"] .math-total {
  border-top: 1px solid var(--line-strong);
  color: var(--gold-2);
}

:root[data-theme="dark"] .arabic-term {
  color: var(--gold-2);
}

:root[data-theme="dark"] code {
  background: var(--callout-bg-3);
  border: 1px solid var(--hairline);
  color: var(--gold-2);
}

:root[data-theme="dark"] figure.fig img {
  background: var(--callout-bg-deep);
  border: 1px solid var(--line-strong);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .5),
    0 16px 36px -18px rgba(0, 0, 0, .85);
}

:root[data-theme="dark"] figure.fig figcaption {
  color: var(--muted);
}

:root[data-theme="dark"] .stacked-infographic img {
  background: #000;
}

:root[data-theme="dark"] .muddy-spring-corpus-image img {
  /* corpus screenshot itself is white — keep the bg matched but soften
     the edge with a 1px gold-tinted border + an outer shadow so the
     bright rectangle doesn't shock the eye on the near-black page */
  background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .25),
    0 16px 36px -18px rgba(0, 0, 0, .85);
}

:root[data-theme="dark"] .muddy-spring-corpus-image figcaption {
  color: var(--muted);
}

:root[data-theme="dark"] .source-link {
  border: 1px solid var(--gold-edge);
  background: rgb(var(--gold-rgb) / .045);
  color: var(--gold-2);
}

:root[data-theme="dark"] .source-link:focus-visible {
  background: rgb(var(--gold-rgb) / .14);
  border-color: var(--gold);
  color: var(--ink-strong);
}

@media (hover: hover) {
  :root[data-theme="dark"] .source-link:hover {
    background: rgb(var(--gold-rgb) / .14);
    border-color: var(--gold);
    color: var(--ink-strong);
  }
}

:root[data-theme="dark"] .quran-source.source-link {
  color: #f0d18b;
}

:root[data-theme="dark"] .hadith-source.source-link {
  color: var(--gold-2);
}

:root[data-theme="dark"] .source-citation {
  color: var(--muted);
}

:root[data-theme="dark"] .source-citation-top {
  border-bottom: 1px solid rgb(var(--gold-rgb) / .25);
}

:root[data-theme="dark"] .source-prefix {
  color: var(--muted);
}

:root[data-theme="dark"] .ref,
:root[data-theme="dark"] .app-label,
:root[data-theme="dark"] .tag {
  border: 1px solid var(--gold-edge);
  background: transparent;
  color: var(--gold);
}

:root[data-theme="dark"] .tag {
  color: var(--muted);
  border-color: var(--line);
}

:root[data-theme="dark"] details.figure-supplement:not(.no-outline),
:root[data-theme="dark"] details.nested-supplement,
:root[data-theme="dark"] details.toc-appendix,
:root[data-theme="dark"] details.math-case-button {
  border: 1.5px solid var(--control-edge);
}

:root[data-theme="dark"] .nested-supplement {
  background: rgba(255, 255, 255, .014);
}

:root[data-theme="dark"] details.figure-supplement>summary,
:root[data-theme="dark"] details.nested-supplement>summary,
:root[data-theme="dark"] details.toc-appendix>summary,
:root[data-theme="dark"] details.math-case-button>summary {
  color: var(--gold-2);
}

@media (hover: hover) {
  :root[data-theme="dark"] details.figure-supplement>summary:hover,
  :root[data-theme="dark"] details.nested-supplement>summary:hover,
  :root[data-theme="dark"] details.toc-appendix>summary:hover,
  :root[data-theme="dark"] details.math-case-button>summary:hover {
    background: rgb(var(--gold-rgb) / .06);
    color: var(--gold-2);
  }
}

:root[data-theme="dark"] details.figure-supplement[open],
:root[data-theme="dark"] details.toc-appendix[open],
:root[data-theme="dark"] details.nested-supplement[open] {
  border-color: var(--gold);
}

:root[data-theme="dark"] details.math-case-button:not(.supplement) {
  border-left: 5px solid var(--gold);
}

:root[data-theme="dark"] details.math-case-button:not(.supplement)[open] {
  background: var(--callout-bg);
  border-color: var(--gold);
}

:root[data-theme="dark"] details.figure-supplement[open]>summary,
:root[data-theme="dark"] details.nested-supplement[open]>summary,
:root[data-theme="dark"] details.toc-appendix[open]>summary,
:root[data-theme="dark"] details.math-case-button[open]>summary {
  color: var(--gold-2);
  border-bottom: 1px solid var(--hairline);
}

:root[data-theme="dark"] details.figure-supplement>summary::after,
:root[data-theme="dark"] details.nested-supplement>summary::after,
:root[data-theme="dark"] details.toc-appendix>summary::after,
:root[data-theme="dark"] details.math-case-button>summary::after {
  border-right: 2.25px solid var(--gold-2);
  border-bottom: 2.25px solid var(--gold-2);
}

:root[data-theme="dark"] .supplement-button-box {
  border-top: 1px solid var(--hairline);
}

:root[data-theme="dark"] .supplement-button-box::before {
  color: var(--faint);
}

:root[data-theme="dark"] .title-action-row {
  border-bottom: 1px solid var(--hairline);
}

:root[data-theme="dark"] .figure-supplement.no-outline {
  background: transparent;
}

:root[data-theme="dark"] .figure-supplement.no-outline>summary {
  border: 1.5px solid var(--control-edge);
}

@media (hover: hover) {
  :root[data-theme="dark"] .figure-supplement.no-outline>summary:hover {
    background: rgb(var(--gold-rgb) / .08);
    border-color: var(--gold);
  }
}

:root[data-theme="dark"] .figure-supplement.no-outline[open]>summary {
  border-color: var(--gold);
}

:root[data-theme="dark"] b,
:root[data-theme="dark"] strong {
  color: #e8d6b0;
}

:root[data-theme="dark"] .arg-intro b,
:root[data-theme="dark"] .arg-intro strong,
:root[data-theme="dark"] .claim-pair p b,
:root[data-theme="dark"] .claim-pair p strong {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .primary-source-quote b,
:root[data-theme="dark"] .primary-source-quote strong,
:root[data-theme="dark"] blockquote.primary-source-quote b,
:root[data-theme="dark"] blockquote.primary-source-quote strong {
  color: #edc878;
}

:root[data-theme="dark"] .callout b,
:root[data-theme="dark"] .callout strong {
  color: #fff;
}

:root[data-theme="dark"] .kill,
:root[data-theme="dark"] .kill-red,
:root[data-theme="dark"] .primary-source-quote .kill,
:root[data-theme="dark"] .primary-source-quote .kill-red,
:root[data-theme="dark"] .primary-source-quote b.kill,
:root[data-theme="dark"] .primary-source-quote b.kill-red,
:root[data-theme="dark"] .primary-source-quote strong.kill,
:root[data-theme="dark"] .primary-source-quote strong.kill-red,
:root[data-theme="dark"] blockquote.primary-source-quote .kill,
:root[data-theme="dark"] blockquote.primary-source-quote .kill-red,
:root[data-theme="dark"] .callout .kill,
:root[data-theme="dark"] .callout .kill-red {
  color: var(--kill);
  text-decoration-color: rgb(var(--kill-rgb) / .6);
}

:root[data-theme="dark"] .hl-num {
  background: linear-gradient(180deg, transparent 58%, rgb(var(--gold-rgb) / .30) 58%);
  color: var(--ink-strong);
}

:root[data-theme="dark"] .primary-source-quote .hl-num,
:root[data-theme="dark"] blockquote.primary-source-quote .hl-num {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .hl {
  background: linear-gradient(180deg, transparent 60%, rgb(var(--gold-rgb) / .34) 60%);
  color: var(--ink-strong);
}

:root[data-theme="dark"] .primary-source-quote .hl,
:root[data-theme="dark"] blockquote.primary-source-quote .hl {
  background: none;
}

:root[data-theme="dark"] .hl-rust {
  background: linear-gradient(180deg, transparent 60%, rgb(var(--rust-rgb) / .45) 60%);
  color: var(--kill-text-on-rust-panel);
}

:root[data-theme="dark"] .hl-strike {
  text-decoration-color: var(--rust);
  color: var(--ink-soft);
}

:root[data-theme="dark"] .key {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .inheritance-emphasis {
  color: var(--gold-2);
}

:root[data-theme="dark"] .inheritance-label {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .math-total b.overflow {
  color: var(--kill);
  text-decoration-color: var(--rust);
}

:root[data-theme="dark"] .kill-red {
  color: var(--kill);
}

:root[data-theme="dark"] .plain-underline {
  text-decoration-color: currentColor;
}

:root[data-theme="dark"] .plain-white-underline {
  text-decoration-color: #fff;
}

:root[data-theme="dark"] .sym-deception,
:root[data-theme="dark"] .sym-appear-so,
:root[data-theme="dark"] .sym-damnation {
  color: var(--kill);
  text-decoration-color: rgb(var(--kill-rgb) / .82);
}

:root[data-theme="dark"] .key-claim {
  color: var(--ink-soft);
}

:root[data-theme="dark"] .key-claim b,
:root[data-theme="dark"] .key-claim strong {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .verdict {
  border-left: 3px solid var(--rust);
  color: var(--kill-text-on-rust-panel);
}

:root[data-theme="dark"] .verdict::before {
  color: var(--rust-text);
}

:root[data-theme="dark"] .verdict b,
:root[data-theme="dark"] .verdict strong {
  color: var(--emphasis-on-callout);
}

:root[data-theme="dark"] .vs-a {
  color: var(--gold-2);
  border-bottom: 1.5px solid var(--gold-edge);
}

:root[data-theme="dark"] .vs-b {
  color: var(--rust-text);
  border-bottom: 1.5px solid rgb(var(--rust-rgb) / .45);
}

:root[data-theme="dark"] .vs-neutral {
  color: var(--ink-soft);
}

:root[data-theme="dark"] .quote-mini {
  background: var(--callout-bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}

:root[data-theme="dark"] .quote-mini::before {
  color: var(--gold);
}

:root[data-theme="dark"] .quote-mini cite,
:root[data-theme="dark"] .quote-mini .cite {
  color: var(--gold-2);
}

:root[data-theme="dark"] .punch-quote {
  border-left: 3px solid var(--gold);
  color: var(--ink-strong);
}

:root[data-theme="dark"] .fact-row .fact-cell {
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgb(var(--gold-2-rgb) / .04), transparent 70%),
    var(--callout-bg);
  box-shadow: var(--shadow-lift);
}

:root[data-theme="dark"] .fact-row .fact-vs {
  color: var(--gold-2);
}

:root[data-theme="dark"] .fact-row .fact-label {
  color: var(--gold);
}

:root[data-theme="dark"] .fact-row .fact-cell.warn {
  border-color: rgb(var(--rust-rgb) / .4);
  background:
    linear-gradient(180deg, rgb(var(--rust-rgb) / .1), transparent 70%),
    var(--rust-callout-bg);
}

:root[data-theme="dark"] .fact-row .fact-cell.warn .fact-label {
  color: var(--rust-text);
}

:root[data-theme="dark"] .num-line>li {
  border: 1px solid var(--line);
  background: var(--callout-bg-warm);
  color: var(--ink);
}

:root[data-theme="dark"] .num-line>li::before {
  background: rgb(var(--gold-rgb) / .10);
  border: 1px solid var(--gold-edge);
  color: var(--gold-2);
}

:root[data-theme="dark"] .num-line>li.therefore {
  border-color: rgb(var(--rust-rgb) / .4);
  background:
    linear-gradient(180deg, rgb(var(--rust-rgb) / .08), transparent 70%),
    var(--rust-callout-bg);
  color: var(--kill-text-on-rust-panel);
}

:root[data-theme="dark"] .num-line>li.therefore::before {
  background: rgb(var(--rust-rgb) / .15);
  border-color: rgb(var(--rust-rgb) / .5);
  color: var(--rust-text);
}

:root[data-theme="dark"] .stat-grid .stat {
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgb(var(--gold-rgb) / .04), transparent 70%),
    var(--callout-bg);
  box-shadow: var(--shadow-lift);
}

:root[data-theme="dark"] .stat-grid .stat .stat-label {
  color: var(--gold);
}

:root[data-theme="dark"] .stat-grid .stat .stat-value {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .stat-grid .stat .stat-note {
  color: var(--muted);
}

:root[data-theme="dark"] .tag-row .tag-mini {
  border: 1px solid var(--hairline);
  color: var(--muted);
}

:root[data-theme="dark"] .tag-row .tag-mini.gold {
  color: var(--gold-2);
  border-color: var(--gold-edge);
  background: rgb(var(--gold-rgb) / .05);
}

:root[data-theme="dark"] .tag-row .tag-mini.warn {
  color: var(--rust-text);
  border-color: rgb(var(--rust-rgb) / .4);
  background: rgb(var(--rust-rgb) / .06);
}

:root[data-theme="dark"] .intro-plain {
  color: var(--ink-soft);
}

:root[data-theme="dark"] .intro-plain b {
  color: var(--ink);
}

:root[data-theme="dark"] .intro-box {
  background: linear-gradient(180deg, rgb(var(--gold-rgb) / .045), transparent 70%);
  border: 1px solid var(--gold-edge);
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  box-shadow: var(--shadow-lift);
}

:root[data-theme="dark"] .intro-box p {
  color: var(--ink-soft);
}

:root[data-theme="dark"] .intro-box b,
:root[data-theme="dark"] .intro-box strong {
  color: var(--ink-strong);
}

:root[data-theme="dark"] .pre-evidence-label {
  border-bottom: 1px solid var(--hairline);
  color: var(--gold-2);
}

:root[data-theme="dark"] .pre-evidence-label b {
  color: var(--gold-2);
}

:root[data-theme="dark"] .pointer-note {
  color: var(--gold-2);
}

:root[data-theme="dark"] .sanaa-variant-box {
  background: var(--callout-bg-2);
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--gold);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb) / .05);
}

:root[data-theme="dark"] #app-A6 .primary-source-quote .tabari-head {
  border-top: 1px solid var(--hairline);
}

:root[data-theme="dark"] #app-A6 .primary-source-quote .tabari-head b {
  color: var(--gold-2);
}

:root[data-theme="dark"] #app-A6 .primary-source-quote .tabari-verdict {
  border-left: 3px solid var(--gold);
  background: rgb(var(--gold-rgb) / .06);
}

:root[data-theme="dark"] #slide-5 .crux-kicker {
  border: 1px solid var(--gold-edge);
  color: var(--gold-2);
  background: rgb(var(--gold-rgb) / .06);
}

:root[data-theme="dark"] #slide-5 .crux-card,
:root[data-theme="dark"] #slide-5 .crux-question {
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(70% 50% at 0% 0%, rgb(var(--gold-rgb) / .07), transparent 60%),
    var(--callout-bg-warm);
  box-shadow: var(--shadow-lift);
}

:root[data-theme="dark"] #slide-5 .crux-card-result {
  background:
    radial-gradient(70% 50% at 0% 0%, rgb(var(--kill-rgb) / .1), transparent 60%),
    var(--callout-bg-warm);
  border-color: rgb(var(--kill-rgb) / .3);
}

:root[data-theme="dark"] #slide-5 .crux-card::before,
:root[data-theme="dark"] #slide-5 .crux-question::before {
  background: var(--gold);
}

:root[data-theme="dark"] #slide-5 .crux-card-result::before,
:root[data-theme="dark"] #slide-5 .crux-question::before {
  background: var(--kill);
}

:root[data-theme="dark"] #slide-5 .crux-label {
  color: var(--gold);
}

:root[data-theme="dark"] #slide-5 .crux-card-result .crux-label,
:root[data-theme="dark"] #slide-5 .crux-question .crux-label {
  color: var(--rust-text);
}

:root[data-theme="dark"] #slide-5 .crux-card p,
:root[data-theme="dark"] #slide-5 .crux-question p {
  color: var(--ink);
}

:root[data-theme="dark"] #slide-5 .crux-question {
  background:
    radial-gradient(75% 60% at 50% 0%, rgb(var(--kill-rgb) / .12), transparent 60%),
    var(--callout-bg-warm);
  border-color: rgb(var(--kill-rgb) / .4);
  box-shadow:
    inset 0 0 0 1px rgb(var(--kill-rgb) / .05),
    0 18px 50px -32px rgb(var(--kill-rgb) / .4);
}

:root[data-theme="dark"] #slide-5 .crux-arrow {
  color: var(--gold-2);
  border: 1px solid var(--gold-edge);
  background: var(--callout-bg-warm);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
}

:root[data-theme="dark"] #slide-5 .centered-crucifixion-question .callout {
  background: transparent;
}

:root[data-theme="dark"] #slide-5 .centered-crucifixion-question .red-emphasis,
:root[data-theme="dark"] #slide-5 .centered-crucifixion-question .sym-damnation {
  color: var(--kill);
  text-decoration-color: rgb(var(--kill-rgb) / .82);
}

:root[data-theme="dark"] .zoom-hint {
  background: rgba(8, 7, 5, .78);
  border: 1px solid var(--gold-edge);
  color: var(--gold-2);
  box-shadow:
    0 1px 0 rgba(255, 230, 180, .08) inset,
    0 6px 14px -8px rgba(0, 0, 0, .6);
}

@media (hover: hover) {
  :root[data-theme="dark"] figure.fig:hover .zoom-hint,
  :root[data-theme="dark"] .muddy-spring-corpus-image:hover .zoom-hint {
    border-color: var(--gold);
  }
}

/* dark mode lightbox: near-black backdrop so the image pops, and the
   chips flip to dark glass with gold accents — the inverse of the
   light-mode cream chips. Each state (rest/hover/active) stays a
   dark glass disc so the rhythm of the bar is consistent. */
:root[data-theme="dark"] .lightbox {
  background: rgba(3, 2, 1, .92);
}

:root[data-theme="dark"] .lightbox-img {
  box-shadow:
    0 36px 90px -22px rgba(0, 0, 0, .95),
    0 12px 28px -10px rgba(0, 0, 0, .6),
    0 0 0 1px rgb(var(--gold-rgb) / .08);
}

:root[data-theme="dark"] .lightbox-btn {
  border: 1px solid rgb(var(--gold-rgb) / .42);
  background:
    linear-gradient(180deg,
      rgba(26, 22, 16, .88) 0%,
      rgba(18, 15, 11, .9) 100%);
  color: var(--gold-2);
  box-shadow:
    inset 0 1px 0 rgba(232, 201, 134, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 1px 2px rgba(0, 0, 0, .5),
    0 8px 22px -8px rgba(0, 0, 0, .7);
}

@media (hover: hover) {
  :root[data-theme="dark"] .lightbox-btn:hover {
    border-color: var(--gold);
    color: var(--ink-strong);
    background:
      linear-gradient(180deg,
        rgba(32, 27, 19, .92) 0%,
        rgba(24, 20, 14, .94) 100%);
    box-shadow:
      inset 0 1px 0 rgba(232, 201, 134, .22),
      inset 0 -1px 0 rgba(0, 0, 0, .4),
      0 2px 4px rgba(0, 0, 0, .55),
      0 12px 26px -8px rgba(0, 0, 0, .75);
  }
}

:root[data-theme="dark"] .lightbox-btn:active {
  background:
    linear-gradient(180deg,
      rgba(40, 33, 22, .94) 0%,
      rgba(30, 25, 17, .94) 100%);
}

@media (max-width: 900px) {
  /* dark mode mobile INDEX chip: inherit the restrained gold-edge border
     + subtle warm gradient from the base rule. No text-shadow, no
     inscription-style inset shadows — the chip reads as primary nav
     through type and border, not theatre. */
  :root[data-theme="dark"] .deck-here {
    border: 1px solid var(--gold-edge);
    background: linear-gradient(180deg,
            rgb(var(--gold-2-rgb) / .045) 0%,
            transparent 70%);
    box-shadow: none;
  }

  :root[data-theme="dark"] .deck-here:active {
    border-color: var(--gold);
    background: rgb(var(--gold-rgb) / .1);
    box-shadow: none;
  }

  :root[data-theme="dark"] .deck-here-tag {
    color: var(--gold-2);
    text-shadow: none;
  }

  :root[data-theme="dark"] .deck-here-arrow {
    stroke: var(--gold-2);
    filter: none;
  }
}

@media print {
  :root[data-theme="dark"],
:root[data-theme="dark"] body {
    background: #fff;
    color: #111;
  }

  :root[data-theme="dark"] .slide {
    background: #fff;
    color: #111;
  }

  :root[data-theme="dark"] a {
    color: #111;
  }

  :root[data-theme="dark"] .source-link {
    background: #eee;
    color: #111;
    border-color: #999;
  }
}

/* ================================================================
   EDITORIAL MASTERPIECE PASS — DARK MODE
   The leather-bound book aesthetic, lit by a single warm lamp.
   Mirrors the light-mode pass tonally: hanging foil quote glyph,
   refined H3 ornament, polished kicker rules, section dividers,
   verdict accents — all retuned for dark walnut + brass.
   ================================================================ */

/* -- ATMOSPHERE: warm overhead lamp + walnut floor + a whisper of
      grain so the surface reads as leather, not flat black. */
:root[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 84rem 50rem at 50% -20rem,
      rgb(var(--gold-rgb) / .14) 0%,
      rgb(var(--gold-rgb) / .035) 38%,
      transparent 72%),
    radial-gradient(ellipse 60rem 32rem at 50% 112%,
      rgb(var(--gold-2-rgb) / .05),
      transparent 65%),
    var(--bg);
}

:root[data-theme="dark"] body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.36   0 0 0 0 0.28   0 0 0 0 0.18   0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}

/* (See light-mode note: deck-app's isolation:isolate handles
   the stacking-context requirement; no override needed here.) */

/* -- CARDS — leather-bound folio. A faint warm wash across the
      top edge reads as a single overhead lamp catching the page;
      deeper shadows ground the float to the dark walnut. The
      border picks up a touch more brass so the card silhouette
      is crisp against the dark floor. */
:root[data-theme="dark"] .slide {
  background:
    linear-gradient(180deg,
      #1a1612 0%,
      #15120f 22%,
      #14110e 78%,
      #110e0b 100%);
  border: 1px solid rgb(var(--gold-rgb) / .22);
  box-shadow:
    0 1px 0 rgba(255, 240, 200, .04) inset,
    0 1px 1px rgba(0, 0, 0, .35),
    0 6px 18px -8px rgba(0, 0, 0, .55),
    0 26px 60px -28px rgba(0, 0, 0, .88),
    0 50px 96px -48px rgba(0, 0, 0, .50);
}

/* -- TOP / BOTTOM bars: thin warm wash, true foil seam. */
:root[data-theme="dark"] .deck-top {
  background:
    linear-gradient(180deg,
      rgba(20, 16, 12, .82) 0%,
      rgba(14, 11, 8, .82) 100%);
  border-bottom: 1px solid transparent;
  box-shadow:
    0 1px 0 0 rgb(var(--gold-rgb) / .08),
    0 6px 14px -8px rgba(0, 0, 0, .55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

:root[data-theme="dark"] .deck-top::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgb(var(--gold-rgb) / 0) 0%,
    rgb(var(--gold-rgb) / .14) 8%,
    rgb(var(--gold-rgb) / .42) 50%,
    rgb(var(--gold-rgb) / .14) 92%,
    rgb(var(--gold-rgb) / 0) 100%);
  pointer-events: none;
}

:root[data-theme="dark"] .deck-bottom {
  background:
    linear-gradient(0deg,
      rgba(20, 16, 12, .82) 0%,
      rgba(14, 11, 8, .82) 100%);
  border-top: 1px solid transparent;
  box-shadow:
    0 -1px 0 0 rgb(var(--gold-rgb) / .08),
    0 -6px 14px -8px rgba(0, 0, 0, .55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Re-assert the reduced-transparency override AFTER this dark editorial
   pass. The bars here and the accessibility override near the top of the
   sheet share equal specificity, so source order decides the winner —
   without this the .82-alpha bars + blur silently defeat a dark-mode
   reader's Reduce-Transparency request. Fires only under that setting;
   normal dark mode is pixel-identical. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"] .deck-top,
  :root[data-theme="dark"] .deck-bottom {
    background: #0d0c0a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

:root[data-theme="dark"] .deck-bottom::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgb(var(--gold-rgb) / 0) 0%,
    rgb(var(--gold-rgb) / .14) 8%,
    rgb(var(--gold-rgb) / .42) 50%,
    rgb(var(--gold-rgb) / .14) 92%,
    rgb(var(--gold-rgb) / 0) 100%);
  pointer-events: none;
}

/* -- PROGRESS strip: foil needle on dark. */
:root[data-theme="dark"] .deck-progress {
  height: 2px;
  background: linear-gradient(90deg,
    rgb(var(--gold-rgb) / .28) 0%,
    rgb(var(--gold-rgb) / .85) 22%,
    var(--gold) 55%,
    var(--gold-2) 82%,
    #fbd98a 100%);
  box-shadow:
    0 0 6px rgb(var(--gold-rgb) / .55),
    0 0 14px rgb(var(--gold-rgb) / .28),
    0 0 1px rgba(255, 248, 220, .8);
}

/* -- COVER: foil pip + brass rule + display H1 with warm ink */
:root[data-theme="dark"] header.cover {
  padding-top: 3vh;
  gap: 1.35rem;
}

:root[data-theme="dark"] .cover-kicker {
  font: 800 .78rem/1 var(--sans);
  letter-spacing: .42em;
  color: var(--gold-2);
  opacity: 1;
}

:root[data-theme="dark"] header.cover h1 {
  font-weight: 800;
  letter-spacing: -.052em;
  line-height: .94;
  color: #fff8eb;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .4),
    0 0 24px rgba(255, 220, 160, .04);
  font-feature-settings: "kern", "liga", "dlig", "swsh";
}

:root[data-theme="dark"] .cover-rule {
  width: 6.4rem;
  height: 2px;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    #fbd98a 32%,
    var(--gold-2) 60%,
    rgb(var(--gold-rgb) / .55) 82%,
    transparent 100%);
  box-shadow: 0 0 5px rgb(var(--gold-rgb) / .35);
  margin: .55rem 0 .25rem;
}

:root[data-theme="dark"] .cover-hint {
  border-left: 2px solid rgb(var(--gold-rgb) / .42);
  padding-left: 1.1rem;
  color: var(--ink-soft);
}

/* -- PREMISE / ERROR / CASE kickers (h4) */
:root[data-theme="dark"] h4 {
  position: relative;
  color: var(--gold);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .24em;
  padding-bottom: .55rem;
  border-bottom-color: rgb(var(--gold-rgb) / .18);
}

/* -- EVIDENCE GROUP — faint warm container */
:root[data-theme="dark"] .evidence-group {
  background:
    linear-gradient(180deg,
      rgb(var(--gold-rgb) / .025) 0%,
      rgb(var(--gold-rgb) / .005) 100%);
  border: 1px solid rgb(var(--gold-rgb) / .14);
  border-radius: var(--r-md);
}

/* -- PRIMARY-SOURCES (gold-edged folio container) — flat dark
      surface so the gold rule and inset hairline carry the authority
      signal without a top-left wash competing for attention. */
:root[data-theme="dark"] .primary-sources {
  background: linear-gradient(180deg, #16120e 0%, #110e0b 100%);
  border: 1px solid rgb(var(--gold-rgb) / .24);
  border-left: 4px solid var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, .04),
    0 1px 2px rgba(0, 0, 0, .3),
    0 16px 36px -22px rgba(0, 0, 0, .8);
}

/* primary-source-quote keeps the original near-black surface
   defined earlier in the dark cascade. */

/* -- SOURCE-LINK pills */
:root[data-theme="dark"] .source-link {
  background:
    linear-gradient(180deg,
      rgb(var(--gold-rgb) / .12) 0%,
      rgb(var(--gold-rgb) / .04) 100%);
  border-color: rgb(var(--gold-rgb) / .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, .06),
    0 1px 1px rgba(0, 0, 0, .25);
}

@media (hover: hover) {
  :root[data-theme="dark"] .source-link:hover {
    background:
      linear-gradient(180deg,
        rgb(var(--gold-rgb) / .22) 0%,
        rgb(var(--gold-rgb) / .08) 100%);
    border-color: var(--gold);
    box-shadow:
      inset 0 1px 0 rgba(255, 230, 180, .10),
      0 2px 4px rgba(0, 0, 0, .35),
      0 0 0 3px rgb(var(--gold-rgb) / .06);
  }
}

/* -- VERDICT (rust callout) with refined label + pull-strip */
:root[data-theme="dark"] .callout {
  position: relative;
  padding: 1.2rem 1.3rem 1.15rem 1.4rem;
  background:
    radial-gradient(90% 110% at 0% 0%, rgb(var(--rust-rgb) / .18), transparent 60%),
    linear-gradient(180deg, #1a100c 0%, #150b08 100%);
  border: 1px solid rgb(var(--rust-rgb) / .36);
  border-left: 5px solid var(--rust);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 200, .04),
    0 1px 2px rgba(0, 0, 0, .35),
    0 18px 44px -24px rgba(120, 30, 20, .55);
}

:root[data-theme="dark"] .callout[data-label]::before {
  color: var(--kill);
  font-weight: 800;
  letter-spacing: .26em;
  opacity: 1;
}

/* -- DISCLOSURE rows */
@media (hover: hover) {
  :root[data-theme="dark"] details > summary:hover {
    background:
      linear-gradient(180deg,
        rgb(var(--gold-rgb) / .07) 0%,
        rgb(var(--gold-rgb) / .03) 100%);
    border-color: rgb(var(--gold-rgb) / .42);
  }
}

:root[data-theme="dark"] details[open] > summary {
  border-color: rgb(var(--gold-rgb) / .40);
  box-shadow: inset 0 -1px 0 rgb(var(--gold-rgb) / .14);
}

/* -- KEYCAP — refined brass on dark */
:root[data-theme="dark"] .keycap {
  background:
    linear-gradient(180deg,
      rgb(var(--gold-rgb) / .10) 0%,
      rgb(var(--gold-rgb) / .02) 100%);
  border-color: rgb(var(--gold-rgb) / .42);
  color: var(--gold-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, .04),
    0 1px 0 rgba(0, 0, 0, .35);
}

/* -- DECK-REF inline replica */
:root[data-theme="dark"] .deck-ref {
  background:
    linear-gradient(180deg,
      rgb(var(--gold-rgb) / .10) 0%,
      rgb(var(--gold-rgb) / .03) 100%);
  border-color: rgb(var(--gold-rgb) / .48);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, .04),
    0 1px 0 rgba(0, 0, 0, .35);
}

/* I keycap inside the INDEX button: same brass-coin appearance as
   every other keycap (help popover, cover hint, inline references)
   so the deck speaks ONE keycap vocabulary. The base .deck-here-key
   rule lives globally; here we restore full opacity in dark mode
   and pin the same border + shadow as the canonical keycap. */
:root[data-theme="dark"] .deck-here .deck-here-key {
  opacity: 1;
  border: 1px solid rgb(var(--gold-rgb) / .42);
  background: linear-gradient(180deg,
    rgb(var(--gold-rgb) / .12) 0%,
    rgb(var(--gold-rgb) / .04) 100%);
  color: var(--gold-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 1px 0 rgba(0, 0, 0, .35);
}

/* ================================================================
   BOTTOM BAR — RESTRAINT PASS (final cascade)
   The bottom rail is a reading instrument, not a feature. This
   block lives last so it can quietly strip the ornament earlier
   passes accumulated — halo rings, scale-on-tap, chevron travel,
   decorative motion. The vellum and walnut surfaces already
   carry the editorial weight; the chips just clarify themselves
   on hover with a single border shift and a faint warm tint, and
   register contact on press with a half-pixel sink. Nothing else.
   ================================================================ */

/* — DEFAULT (rest) STATE: flatten the chip surfaces. Earlier
     passes stacked drop shadows + gradient fills that read as
     raised SaaS buttons. A single warm-tinted surface + a single
     inset cream highlight + a true hairline border is enough for
     each chip to register as a piece of paper-edge furniture. */
:root[data-theme="light"] .deck-nav {
  background: rgba(252, 248, 236, .42);
  border-color: rgb(var(--gold-rgb) / .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 252, .80);
}

:root[data-theme="light"] .deck-here {
  background: rgba(255, 252, 240, .35);
  border-color: rgb(var(--gold-rgb) / .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 252, .80);
}

/* — dark mode: borders drop from solid --line-strong (#6a5536)
     to a true gold hairline (.22 alpha). Matches the .22-alpha
     foil seam above the bar, so the rail speaks one continuous
     line language instead of three competing weights. */
:root[data-theme="dark"] .deck-nav,
:root[data-theme="dark"] .deck-here {
  background: transparent;
  border-color: rgb(var(--gold-rgb) / .22);
  box-shadow: none;
}

/* — chevrons: a hair finer stroke (2.0 → 1.8 on the nav chips,
     2.3 → 2.0 on the centre arrow) reads as a considered
     editorial mark rather than a CTA arrow. Icon size stays the
     same, so the visual weight at thumb distance is preserved. */
.deck-nav svg { stroke-width: 1.8; }
.deck-here-arrow { stroke-width: 2.0; }

/* — CARDS eyebrow: a touch more tracking (.24em → .26em) lets
     the caps register as confident editorial type rather than a
     small UI label. Weight + colour inherit from the base rule. */
.deck-here-tag { letter-spacing: .26em; }

/* — desktop keycap (C): a touch quieter so it reads as a calm
     keyboard hint, not a UI marker. Hidden entirely on mobile
     by the base rule. */
.deck-here .deck-here-key { opacity: .62; }

/* — chevron icons stay put on hover. The chip's own colour shift
     signals the affordance; the icon never travels. */
@media (hover: hover) {
  #prevSlide:hover svg,
  #nextSlide:hover svg { transform: none; }
}

/* — light theme: hover loses the halo ring entirely. Border
     darkens toward gold, the surface picks up a barely-there
     warm tint. No drop shadows grow on hover. */
@media (hover: hover) {
  :root[data-theme="light"] .deck-nav:hover {
    background: rgb(var(--gold-rgb) / .045);
    border-color: rgb(var(--gold-rgb) / .80);
    color: var(--ink-strong);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 252, .85),
      0 1px 1px rgba(74, 52, 22, .04);
  }
  :root[data-theme="light"] .deck-here:hover {
    background:
      linear-gradient(180deg,
        rgba(255, 253, 244, .78) 0%,
        rgba(254, 246, 220, .50) 100%);
    border-color: rgb(var(--gold-rgb) / .80);
    box-shadow: inset 0 1px 0 rgba(255, 255, 252, .9);
  }
  :root[data-theme="light"] .deck-here:hover .deck-here-arrow {
    stroke: var(--gold);
    transform: none;
  }
}

/* — dark theme: same restraint. Hover is barely visible until
     you focus on it; that's intentional. Border lifts toward
     gold; the surface gains a whisper of warm tint. */
@media (hover: hover) {
  :root[data-theme="dark"] .deck-nav:hover {
    background: rgb(var(--gold-rgb) / .055);
    border-color: rgb(var(--gold-rgb) / .55);
    color: var(--ink-strong);
    box-shadow: none;
  }
  :root[data-theme="dark"] .deck-here:hover {
    background: rgb(var(--gold-rgb) / .04);
    border-color: rgb(var(--gold-rgb) / .50);
    box-shadow: none;
  }
  :root[data-theme="dark"] .deck-here:hover .deck-here-arrow {
    stroke: var(--gold);
    transform: none;
  }
}

/* — active: a single half-pixel sink and a faint warm tint.
     No scale, no shadow theatre. Reads as a tactile contact
     event, not an animation. */
.deck-nav:active,
.deck-here:active {
  transform: translateY(.5px);
  background: rgb(var(--gold-rgb) / .07);
  border-color: var(--gold);
  box-shadow: none;
}

/* — focus-visible: the existing 2px gold outline at 2px offset
     is already accessible and elegant. Re-asserting here just
     to wipe any inherited halo from earlier hover passes. */
.deck-nav:focus-visible,
.deck-here:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* — disabled (start/end of deck): quiet but unambiguous. The
     chip dims to a third of its presence and stops responding
     to input. Already handled by the base .deck-nav:disabled
     rule; this just ensures the polish layer doesn't undo it. */
.deck-nav:disabled,
.deck-nav[aria-disabled="true"] {
  opacity: .26;
  pointer-events: none;
  box-shadow: none;
}

/* — reduced motion: the half-pixel active sink is below any
     vestibular threshold, but honour the preference anyway. */
@media (prefers-reduced-motion: reduce) {
  .deck-nav:active,
  .deck-here:active { transform: none; }
}

/* Final chevron affordance polish: larger center CARDS chevron, same restrained color. */
.deck-here .deck-here-arrow {
  width: 1.12rem !important;
  height: 1.12rem !important;
  stroke-width: 2.15 !important;
  margin-left: .14rem !important;
}
@media (max-width: 540px) {
  .deck-here .deck-here-arrow {
    width: 1.08rem !important;
    height: 1.08rem !important;
    stroke-width: 2.1 !important;
  }
}


/* Final bottom-bar micro-polish: quieter divider + tighter chevron. */
.deck-here-tag::after {
  opacity: .85 !important;
}
.deck-here .deck-here-arrow {
  margin-left: .04rem !important;
}

/* Final inline CARDS parity: compact replica of the mobile bottom
   CARDS chip. Same rail shape and label/chevron relationship, scaled
   down for sentence text so it reads clean instead of buttony. */
.deck-ref {
  justify-content: center !important;
  gap: .32em !important;
  min-height: 1.5em !important;
  padding: .18em .52em .18em .64em !important;
  border: 1px solid var(--gold-edge) !important;
  border-radius: .48em !important;
  background:
    linear-gradient(180deg,
      rgb(var(--gold-2-rgb) / .035) 0%,
      transparent 70%) !important;
  box-shadow: none !important;
  transform: translateY(-.035em) !important;
}

.deck-ref-label {
  font: 700 .62em/1 var(--sans) !important;
  color: var(--gold-2) !important;
  letter-spacing: .28em !important;
  padding-left: .28em !important;
}

.deck-ref-arrow {
  flex: none !important;
  width: .72em !important;
  height: .72em !important;
  margin-left: .02em !important;
  stroke: var(--gold-2) !important;
  stroke-width: 2.2 !important;
}

:root[data-theme="light"] .deck-ref {
  background:
    linear-gradient(180deg,
      rgb(var(--gold-2-rgb) / .035) 0%,
      transparent 70%) !important;
  border-color: var(--gold-edge) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .deck-ref {
  background: transparent !important;
  border-color: var(--gold-edge) !important;
  box-shadow: none !important;
}