:root {
    /* ── Gilded Night — the sanctuary at night ──
       Variable names kept semantic: --paper is the dark ground, --ink the light text,
       so the site's existing var() references invert as one. */
    --paper:   #0b0908;  /* near-black aged ink ground */
    --paper-2: #141110;  /* raised dark surface */
    --ink:     #efe6d2;  /* candle-lit parchment text */
    --ink-soft:#b7a982;  /* dimmer warm text */
    --muted:   #8d8163;  /* faint captions */
    --gold:    #c6a15b;  /* candle gold */
    --gold-lt: #e8d5ae;  /* lit highlight gold */
    --gold-dp: #d8b978;  /* on dark, the "deep" gold reads brighter than ink */
    /* Reddish rose — the feminine column of the ayat grid. Kept in the same
       warm family as the candle gold so the two never clash on one page. */
    --rose:    #d8455f;
    --rose-lt: #f08b9e;
    --rose-dp: #e55b70;  /* like --gold-dp, "deep" reads brighter on the dark ground */
    --rule:    rgba(198, 161, 91, 0.22);
    --rule-st: rgba(198, 161, 91, 0.42);
    --serif:   "EB Garamond", Georgia, serif;
    --display: "Cormorant Garamond", Georgia, serif;
    /* dark-only helper tokens used by the override block below */
    --gn-surface: rgba(198, 161, 91, 0.05); /* replaces hardcoded rgba(255,253,247,x) chips */
    --gn-surface-2: rgba(28, 24, 21, 0.7);
    --gn-ember: #e0a552;

    /* ── Type scale ──────────────────────────────────────────────────────
       Ten steps on a ~1.2 ratio, plus three ornament sizes. Every font-size
       in this sheet resolves to one of these — nothing sets a raw px value,
       so the page reads as a handful of deliberate levels instead of fifty
       near-identical ones. Steps 500 and up are fluid, which is why the
       headings need no per-breakpoint overrides. */
    --fs-100:  clamp(9.5px, 1.1vw, 11px);   /* diagram labels, dates, badges */
    --fs-200:  clamp(11px, 1.5vw, 13px);    /* tracked uppercase eyebrows */
    --fs-300:  14px;                        /* captions, meta, controls */
    --fs-400:  17px;                        /* body */
    --fs-500:  clamp(18px, 1.6vw, 20px);    /* lead paragraphs, small titles */
    --fs-600:  clamp(20px, 2.4vw, 24px);    /* card and panel titles */
    --fs-700:  clamp(23px, 3.2vw, 30px);    /* sub-headings, pull quotes */
    --fs-800:  clamp(27px, 4.4vw, 40px);    /* display quotes, gate names */
    --fs-900:  clamp(32px, 6vw, 56px);      /* section and cover titles */
    --fs-1000: clamp(40px, 8vw, 88px);      /* hero */
    /* ornamental glyphs and numerals — drawn, not read, so off the text scale */
    --fs-orn-sm: 22px;
    --fs-orn-md: clamp(38px, 6vw, 52px);
    --fs-orn-lg: clamp(96px, 12vw, 132px);
  }

  /* ── Cream Day — the same sanctuary by daylight ──
     Only the tokens flip here; the surface overrides that assume a dark
     ground live in the [data-theme="light"] block at the end of this sheet. */
  :root[data-theme="light"] {
    --paper:   #f6efe0;
    --paper-2: #efe6d2;
    --ink:     #2a231d;
    --ink-soft:#5f574c;
    --muted:   #6b5f4d;
    --gold:    #9c7c33;
    --gold-lt: #c6a23f;
    --gold-dp: #6f5520;
    --rose:    #b82e4b;
    --rose-lt: #d44d6a;
    --rose-dp: #8f1d33;
    --rule:    rgba(120, 95, 40, 0.30);
    --rule-st: rgba(120, 95, 40, 0.55);
    --gn-surface:   rgba(120, 95, 40, 0.05);
    --gn-surface-2: rgba(255, 253, 247, 0.75);
    --gn-ember: #9c7c33;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html.cover-active, html.cover-active body { overflow: hidden; height: 100vh; }
  html.modal-open, html.modal-open body { overflow: hidden; }

  body {
    font-family: var(--serif);
    font-size: var(--fs-400);
    color: var(--ink);
    background:
      radial-gradient(120% 90% at 50% -10%, #17130e 0%, var(--paper-2) 45%, var(--paper) 100%);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    position: relative;
  }
  /* faint pools of candle light via layered gradients */
  body::before {
    content: "";
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(circle at 18% 22%, rgba(198,161,91,0.06), transparent 42%),
      radial-gradient(circle at 82% 78%, rgba(224,165,82,0.05), transparent 44%);
    mix-blend-mode: screen;
  }
  ::selection { background: rgba(198,161,91,0.30); color: #fff; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .gold-heart-logo {
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--gold) 40%, var(--gold-dp) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(120, 95, 40, 0.25));
  }

  .version-badge {
    display: inline-block;
    font-family: var(--serif);
    font-size: var(--fs-200);
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--gold-dp);
    border: 1px solid var(--rule-st);
    padding: 3px 14px;
    border-radius: 20px;
    background: var(--gn-surface);
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(120, 95, 40, 0.08);
    transition: all 0.25s ease;
  }

  /* ---------- Cover ---------- */
  #cover {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px;
    background:
      radial-gradient(120% 100% at 50% 0%, #fbf7ec 0%, var(--paper) 50%, var(--paper-2) 100%);
    transition: opacity 1.1s ease, transform 1.1s ease;
  }
  #cover.dismissed { opacity: 0; transform: scale(1.04); pointer-events: none; }
  #cover .frame {
    border: 1px solid var(--rule-st);
    padding: clamp(40px, 7vw, 80px) clamp(28px, 8vw, 90px);
    position: relative;
    max-width: 680px;
  }
  #cover .frame::before, #cover .frame::after {
    content: ""; position: absolute; width: 14px; height: 14px;
    border: 1px solid var(--gold);
  }
  #cover .frame::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
  #cover .frame::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
  #cover .glyph {
    font-size: var(--fs-orn-md); color: var(--gold-dp); margin-bottom: 18px;
    text-shadow: none;
  }
  #cover h1 {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--fs-900);
    line-height: 1.02;
    letter-spacing: 0.5px;
    color: var(--ink);
    margin-bottom: 14px;
  }
  #cover .sub {
    font-family: var(--display);
    font-style: italic;
    font-size: var(--fs-600);
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
  #cover .tawil {
    font-family: var(--display);
    font-size: var(--fs-500);
    color: var(--gold-dp);
    margin-bottom: 24px;
    letter-spacing: 0.5px;
  }
  .gold-rule {
    width: 200px; max-width: 60%; height: 1px; margin: 0 auto 30px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    position: relative;
  }
  .gold-rule::after {
    content: "❖"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    color: var(--gold); font-size: var(--fs-300); background: var(--paper); padding: 0 10px;
  }
  .enter-btn {
    font-family: var(--serif);
    font-size: var(--fs-300); letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold-dp);
    background: transparent;
    border: 1px solid var(--gold);
    padding: 13px 34px; border-radius: 2px; cursor: pointer;
    transition: 0.3s;
  }
  .enter-btn:hover { background: var(--gold); color: #fff; letter-spacing: 4px; }
  .donation-note {
    margin-top: 14px;
    font-family: var(--serif);
    font-size: var(--fs-300);
    color: var(--muted);
    text-align: center;
  }

  /* ---------- Nav ---------- */
  #top-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; flex-direction: column; align-items: center;
    background: rgba(246, 239, 224, 0.90);
    backdrop-filter: blur(10px);
    border-bottom: none;
    opacity: 0; transform: translateY(-16px); pointer-events: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  #top-nav.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  
  .brand-row {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12px 20px 8px;
  }
  .brand-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.25s;
  }
  .brand-link:hover {
    opacity: 0.85;
  }
  .brand {
    text-align: center;
  }
  .brand h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-500);
    color: var(--ink);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    line-height: 1.2;
  }
  .brand p {
    font-size: var(--fs-100);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.2;
  }
  
  .divider-line {
    width: 100%;
    height: 1px;
    background: var(--rule);
  }
  
  .links-row {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 20px 12px;
  }
  
  .nav-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .nav-link-btn {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-300);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold-dp);
    text-decoration: none;
    padding: 9px 26px;
    border: 1.5px solid var(--rule-st);
    border-radius: 24px;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgba(255, 253, 247, 0.8);
    box-shadow: 0 2px 6px rgba(120, 90, 30, 0.06);
  }
  
  .nav-link-btn:hover {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold-dp);
    box-shadow: 0 6px 14px rgba(120, 90, 30, 0.18);
    transform: translateY(-1.5px);
  }

  /* Email input wrapper for Cover */
  .email-input-wrapper {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 22px;
  }
  #cover-email {
    width: 100%;
    padding: 12px 18px;
    font-family: var(--serif);
    font-size: var(--fs-400);
    color: var(--ink);
    background: rgba(255, 253, 247, 0.55);
    border: 1px solid var(--rule-st);
    border-radius: 2px;
    text-align: center;
    outline: none;
    transition: all 0.3s;
  }
  #cover-email:focus {
    border-color: var(--gold);
    background: var(--paper);
    box-shadow: 0 0 10px rgba(156, 124, 51, 0.2);
  }

  /* ---------- Layout / sections ---------- */
  main { position: relative; z-index: 1; }
  .section {
    max-width: 1080px; margin: 0 auto;
    padding: clamp(80px, 12vh, 150px) clamp(22px, 6vw, 40px);
    scroll-margin-top: 110px;
  }
  .section + .section { border-top: 1px solid var(--rule); }
  /* Rhythm tiers: dense sections carry their own visual weight; pause sections breathe */
  .section--dense { padding-top: clamp(64px, 9vh, 110px); padding-bottom: clamp(64px, 9vh, 110px); }
  .section--pause { padding-top: clamp(96px, 15vh, 180px); padding-bottom: clamp(96px, 15vh, 180px); }
  .eyebrow {
    font-size: var(--fs-200); letter-spacing: 4px; text-transform: uppercase;
    color: var(--gold-dp); text-align: center; margin-bottom: 14px;
  }
  .section-title {
    font-family: var(--display); font-weight: 600;
    font-size: var(--fs-900); line-height: 1.05;
    text-align: center; color: var(--ink); margin-bottom: 10px;
  }
  .section-note { text-align: center; color: var(--muted); font-style: italic; font-size: var(--fs-400); margin-bottom: 8px; }

  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1); }
  .reveal.in-view { opacity: 1; transform: none; }

  /* ---------- Scroll motion: editorial reveal choreography ---------- */
  html { scroll-behavior: smooth; }

  /* Section headers arrive in two beats: eyebrow leads, title follows, note trails */
  .section-title.reveal { transition-delay: 0.1s; }
  .section-note.reveal { transition-delay: 0.22s; }

  /* Shared entrance: ink settling onto the page. Keyframes (not transitions) so
     they never fight component hover/expand transitions on the same elements. */
  @keyframes ink-rise {
    from { opacity: 0; transform: translateY(24px); }
  }
  @keyframes rule-draw {
    from { transform: scale(0); }
  }
  @keyframes seal-settle {
    from { opacity: 0; transform: translateY(18px) scale(0.965); }
  }

  /* Stagger containers: the container fades in place; its children carry the motion */
  .gate.reveal,
  .shajara.reveal,
  .ayat-grid.reveal,
  .teaching.reveal,
  .arabic-study-container.reveal,
  .study-with-us-container.reveal { transform: none; }

  /* Teaching prose settles one beat at a time, so the argument arrives in the
     order it is meant to be read rather than all at once. */
  .teaching.reveal > * { opacity: 0; }
  .teaching.reveal.in-view > * {
    opacity: 1;
    animation: ink-rise 1s cubic-bezier(0.16,1,0.3,1) backwards;
  }
  .teaching.reveal.in-view > :nth-child(2) { animation-delay: 0.14s; }
  .teaching.reveal.in-view > :nth-child(3) { animation-delay: 0.28s; }
  .teaching.reveal.in-view > :nth-child(4) { animation-delay: 0.42s; }
  .teaching.reveal.in-view > :nth-child(5) { animation-delay: 0.56s; }
  .teaching.reveal.in-view > :nth-child(6) { animation-delay: 0.70s; }
  .teaching.reveal.in-view > :nth-child(n+7) { animation-delay: 0.84s; }

  .gate.reveal .gate-panel { opacity: 0; }
  .gate.reveal.in-view .gate-panel {
    opacity: 1;
    animation: ink-rise 0.9s cubic-bezier(0.16,1,0.3,1) backwards;
  }
  .gate.reveal.in-view .gate-panel:nth-child(2) { animation-delay: 0.12s; }
  .gate.reveal.in-view .gate-panel:nth-child(3) { animation-delay: 0.24s; }
  .gate.reveal.in-view .gate-panel:nth-child(4) { animation-delay: 0.36s; }

  /* Shajara: light kindles generation by generation, top of the tree first,
     while the thread draws itself down through them. Each figure and rule
     carries its own beat as --d, set where it is placed, so the order follows
     the drawing rather than a ladder of nth-child rules that has to be
     renumbered whenever a figure is added. */
  .shajara.reveal .shj-node { opacity: 0; }
  .shajara.reveal.in-view .shj-node {
    opacity: 1;
    animation: ink-rise 0.9s cubic-bezier(0.16,1,0.3,1) backwards;
    animation-delay: var(--d, 0s);
  }
  /* Rules draw along their own length: verticals grow down out of the figure
     above, bars open from the middle outward to both children. */
  .shajara.reveal .shj-v,
  .shajara.reveal .shj-h,
  .shajara.reveal .shj-union,
  .shajara.reveal .shj-return,
  .shajara.reveal .shj-continues {
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.55s ease;
    transition-delay: var(--d, 0s);
  }
  .shajara.reveal .shj-v,
  .shajara.reveal .shj-continues { transform: scaleY(0); transform-origin: top; }
  .shajara.reveal .shj-h { transform: scaleX(0); transform-origin: center; }
  /* the union and the return turn are two strokes in one box, so they take
     light rather than draw — scaling either axis would skew the other */
  .shajara.reveal .shj-union,
  .shajara.reveal .shj-return { opacity: 0; }
  .shajara.reveal.in-view .shj-v,
  .shajara.reveal.in-view .shj-continues,
  .shajara.reveal.in-view .shj-h { transform: none; }
  .shajara.reveal.in-view .shj-union,
  .shajara.reveal.in-view .shj-return { opacity: 1; }

  .shajara.reveal .shj-note { opacity: 0; transition: opacity 0.9s ease; transition-delay: var(--d, 0s); }
  .shajara.reveal.in-view .shj-note { opacity: 1; }

  /* Ayat: quotes surface slowly (pause-tier pacing), then the gold rules draw in */
  .ayat-grid.reveal .ayat-card { opacity: 0; }
  .ayat-grid.reveal.in-view .ayat-card {
    opacity: 1;
    animation: ink-rise 1.1s cubic-bezier(0.16,1,0.3,1) backwards;
  }
  .ayat-grid.reveal.in-view .ayat-row .ayat-card:last-of-type { animation-delay: 0.15s; }
  .ayat-grid.reveal.in-view .ayat-row:last-child .ayat-card { animation-delay: 0.3s; }
  .ayat-grid.reveal.in-view .ayat-row:last-child .ayat-card:last-of-type { animation-delay: 0.45s; }
  .ayat-grid.reveal.in-view .ayat-divider,
  .ayat-grid.reveal.in-view .ayat-row-divider {
    animation: rule-draw 1.4s cubic-bezier(0.16,1,0.3,1) 0.5s backwards;
  }

  /* Letters: cards rise in sequence; opacity handled here since the card's own
     hover transition doesn't cover it */
  .letter-card.reveal { opacity: 0; transform: none; }
  .letter-card.reveal.in-view {
    opacity: 1;
    animation: ink-rise 0.9s cubic-bezier(0.16,1,0.3,1) backwards;
  }
  #letters-grid .letter-card:nth-child(2).in-view { animation-delay: 0.08s; }
  #letters-grid .letter-card:nth-child(3).in-view { animation-delay: 0.16s; }
  #letters-grid .letter-card:nth-child(4).in-view { animation-delay: 0.24s; }
  #letters-grid .letter-card:nth-child(5).in-view { animation-delay: 0.32s; }
  #letters-grid .letter-card:nth-child(6).in-view { animation-delay: 0.4s; }

  /* Concept map preview settles like a seal being pressed */
  .chart-gate.reveal.in-view .chart-preview-wrapper {
    animation: seal-settle 1.2s cubic-bezier(0.16,1,0.3,1) 0.1s backwards;
  }

  /* Arabic study: philosophy column leads, SOP column answers */
  .arabic-study-container.reveal > * { opacity: 0; }
  .arabic-study-container.reveal.in-view > * {
    opacity: 1;
    animation: ink-rise 1s cubic-bezier(0.16,1,0.3,1) backwards;
  }
  .arabic-study-container.reveal.in-view > :nth-child(2) { animation-delay: 0.15s; }

  .study-with-us-container.reveal > * { opacity: 0; }
  .study-with-us-container.reveal.in-view > * {
    opacity: 1;
    animation: ink-rise 1s cubic-bezier(0.16,1,0.3,1) backwards;
  }
  .study-with-us-container.reveal.in-view > :nth-child(2) { animation-delay: 0.15s; }
  .study-with-us-container.reveal.in-view > :nth-child(3) { animation-delay: 0.3s; }

  /* Gilded thread: reading progress as a gold line at the page's top edge.
     Native scroll-timeline only — browsers without it simply show no thread. */
  #scroll-thread { display: none; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      #scroll-thread {
        display: block;
        position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 101;
        background: linear-gradient(90deg, var(--gold-dp), var(--gold) 55%, var(--gold-lt));
        transform-origin: 0 50%; transform: scaleX(0);
        pointer-events: none;
        animation: thread-grow linear both;
        animation-timeline: scroll(root);
      }
    }
  }
  @keyframes thread-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* Hero departure: the title page recedes as the reader turns past it.
     The page's single scrubbed effect — small, fade-dominant, scroll-linked. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      #hero {
        animation: hero-depart linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 75%;
      }
    }
  }
  @keyframes hero-depart {
    to { opacity: 0.1; transform: translateY(-30px); }
  }

  /* Reduced motion: same story, told statically. Content is never hidden. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal,
    .gate.reveal .gate-panel,
    .shajara.reveal .shj-node,
    .shajara.reveal .shj-v,
    .shajara.reveal .shj-h,
    .shajara.reveal .shj-union,
    .shajara.reveal .shj-return,
    .shajara.reveal .shj-continues,
    .shajara.reveal .shj-note,
    .ayat-grid.reveal .ayat-card,
    .teaching.reveal > *,
    .letter-card.reveal,
    .arabic-study-container.reveal > *,
    .study-with-us-container.reveal > * {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
    .ayat-grid.reveal.in-view .ayat-divider,
    .ayat-grid.reveal.in-view .ayat-row-divider,
    .chart-gate.reveal.in-view .chart-preview-wrapper,
    #hero { animation: none !important; }
    #scroll-thread { display: none !important; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ---------- The 12 Golden Nuggets (Four-Fold Sacred Gate) ---------- */
  .gate {
    display: flex;
    gap: 14px;
    margin-top: 38px;
    min-height: 420px;
  }
  .gate-panel {
    position: relative;
    flex: 1 1 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px 26px;
    cursor: pointer;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background:
      linear-gradient(180deg, rgba(156,124,51,0.04) 0%, rgba(120,95,40,0.10) 100%),
      var(--paper);
    transition: flex-grow 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease, border-color 0.5s ease;
    outline: none;
  }
  .gate-panel:nth-child(odd) {
    background:
      linear-gradient(180deg, rgba(156,124,51,0.04) 0%, rgba(120,95,40,0.13) 100%),
      var(--paper-2);
  }
  /* Large ghosted roman numeral backdrop */
  .gate-numeral {
    position: absolute;
    top: 8px; right: 14px;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-orn-lg);
    line-height: 1;
    color: var(--gold);
    opacity: 0.08;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
  }
  .gate-label { position: relative; z-index: 2; }
  .gate-eyebrow {
    display: block;
    font-size: var(--fs-200); letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold-dp); margin-bottom: 4px;
  }
  .gate-name {
    display: block;
    font-family: var(--display); font-weight: 600;
    font-size: var(--fs-800); line-height: 1.05;
    color: var(--ink);
    white-space: nowrap;
  }
  /* Nuggets hidden by default, revealed on expand */
  .gate-nuggets {
    list-style: none;
    position: relative; z-index: 2;
    margin-top: 22px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease, margin-top 0.6s ease;
  }
  .gate-nuggets li {
    font-family: var(--serif);
    font-size: var(--fs-400);
    color: var(--ink-soft);
    padding: 11px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--rule-st);
    border-radius: 2px;
    background: rgba(255, 253, 247, 0.55);
    box-shadow: 0 2px 6px rgba(120, 90, 30, 0.06);
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease;
  }
  .gate-nuggets li:last-child { margin-bottom: 0; }

  /* Expanded state — hover, focus, or keyboard focus-within */
  .gate-panel:hover,
  .gate-panel:focus,
  .gate-panel:focus-within {
    flex-grow: 2.6;
    border-color: var(--gold);
    box-shadow: 0 18px 40px rgba(120, 90, 30, 0.16);
  }
  .gate-panel:hover .gate-numeral,
  .gate-panel:focus .gate-numeral,
  .gate-panel:focus-within .gate-numeral {
    opacity: 0.14;
    transform: translateY(-6px);
  }
  .gate-panel:hover .gate-nuggets,
  .gate-panel:focus .gate-nuggets,
  .gate-panel:focus-within .gate-nuggets {
    max-height: 280px;
    opacity: 1;
  }
  .gate-panel:hover .gate-nuggets li,
  .gate-panel:focus .gate-nuggets li,
  .gate-panel:focus-within .gate-nuggets li {
    transform: none;
    opacity: 1;
  }
  .gate-panel:hover .gate-nuggets li:nth-child(2),
  .gate-panel:focus .gate-nuggets li:nth-child(2),
  .gate-panel:focus-within .gate-nuggets li:nth-child(2) { transition-delay: 0.08s; }
  .gate-panel:hover .gate-nuggets li:nth-child(3),
  .gate-panel:focus .gate-nuggets li:nth-child(3),
  .gate-panel:focus-within .gate-nuggets li:nth-child(3) { transition-delay: 0.16s; }

  /* ---------- Hero ---------- */
  #hero {
    min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    max-width: none; padding-top: 90px;
  }
  #hero .glyph { font-size: var(--fs-orn-md); color: var(--gold-dp); margin-bottom: 18px; }
  #hero h1 {
    font-family: var(--display); font-weight: 600;
    font-size: var(--fs-1000); line-height: 0.98; letter-spacing: 0.5px;
    color: var(--ink); margin-bottom: 16px;
  }
  #hero h1 .gold-glow {
    background: linear-gradient(90deg, var(--gold-dp) 0%, var(--gold-lt) 22%, #fff 50%, var(--gold-lt) 78%, var(--gold-dp) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: goldGlimmer 4.5s linear infinite;
    display: inline-block;
  }
  @keyframes goldGlimmer {
    0% { background-position: 0% center; filter: drop-shadow(0 0 1px rgba(198, 162, 63, 0.1)); }
    50% { background-position: 100% center; filter: drop-shadow(0 0 8px rgba(198, 162, 63, 0.5)); }
    100% { background-position: 200% center; filter: drop-shadow(0 0 1px rgba(198, 162, 63, 0.1)); }
  }
  #hero .tagline { font-family: var(--display); font-style: italic; font-size: var(--fs-700); color: var(--ink-soft); margin-bottom: 8px; }
  #hero .tawil { font-family: var(--display); font-size: var(--fs-600); color: var(--gold-dp); margin-bottom: 24px; letter-spacing: 0.5px; }
  .hero-verse-block {
    max-width: 650px;
    margin: 20px auto 0;
    text-align: center;
    padding: 0 20px;
  }
  .hero-verse-text {
    font-family: var(--display);
    font-style: italic;
    font-size: var(--fs-500);
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 12px;
  }
  .hero-verse-ref {
    font-size: var(--fs-200);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-dp);
    font-weight: 600;
  }

  /* ---------- Sacred Feminine quote ---------- */
  .quote-block { max-width: 760px; margin: 30px auto 0; text-align: center; }
  .quote-block .quote {
    font-family: var(--display); font-style: italic; font-weight: 500;
    font-size: var(--fs-800); line-height: 1.4; color: var(--ink);
  }
  .quote-block .quote .mother,
  .quote-block .quote .emph {
    font-style: normal; font-weight: 700; color: var(--gold-dp);
    letter-spacing: 1px;
  }
  .quote-block .drop { float: left; font-family: var(--display); font-weight: 700; font-size: 2.2em; line-height: 0.85; padding: 2px 8px 0 0; color: var(--gold); }
  .quote-ref { margin-top: 26px; font-size: var(--fs-200); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
  .quote-ref::before, .quote-ref::after { content: "—"; color: var(--gold); margin: 0 10px; }
  /* Root-letter footnote under a verse whose translation departs from the
     familiar English. Quiet: it justifies the reading without arguing it. */
  .quote-note {
    margin-top: 16px; max-width: 44ch;
    font-size: var(--fs-300); line-height: 1.6; font-style: italic;
    color: var(--muted);
  }
  .quote-note em { font-style: normal; color: var(--ink-soft); }

  /* ---------- Teaching sections (The Heavenly Path / In Love We Are Healed) ----------
     Long-form prose, unlike the quote cards elsewhere. A single measured column
     so the argument reads as an argument, with the verses as its landings. */
  .teaching { max-width: 720px; margin: 0 auto; text-align: center; }
  .teaching-p {
    font-family: var(--serif);
    font-size: var(--fs-500);
    line-height: 1.78;
    color: var(--ink);
    margin-top: 26px;
  }
  .teaching-p .cite { white-space: nowrap; color: var(--gold-dp); font-variant: small-caps; letter-spacing: 1px; }
  .teaching-verse { margin: 46px auto 0; max-width: 640px; }
  .teaching-verse .quote {
    font-family: var(--display); font-style: italic; font-weight: 500;
    font-size: var(--fs-700); line-height: 1.42; color: var(--ink);
  }
  .teaching-verse .emph { font-style: normal; font-weight: 700; color: var(--gold-dp); letter-spacing: 1px; }
  .teaching-verse .quote-ref { margin-top: 20px; }

  /* The hinge: his question, given the silence it needs. */
  .teaching-hinge {
    margin: 52px auto 0; max-width: 640px;
    padding: 30px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .teaching-hinge .hinge-lead {
    font-size: var(--fs-200); letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 16px;
  }
  .teaching-hinge .hinge-q {
    font-family: var(--display); font-style: italic;
    font-size: var(--fs-700); line-height: 1.45;
    color: var(--gold-dp);
  }
  /* The conclusion the whole section walks toward. */
  .teaching-close {
    margin: 46px auto 0; max-width: 660px;
    font-family: var(--display);
    font-size: var(--fs-700); line-height: 1.5;
    color: var(--ink);
  }
  .teaching-close strong { font-weight: 600; color: var(--gold-dp); }

  /* Personal commentary / reflection following a verse */
  .teaching-commentary {
    margin: 28px auto 0; max-width: 580px;
    font-family: var(--serif);
    font-size: var(--fs-500); line-height: 1.7;
    color: var(--ink-soft);
  }
  .teaching-commentary strong { font-weight: 600; color: var(--gold-dp); }


  /* ---------- Orbit mount ----------
     Reserved stage for the solar orrery. Empty on purpose: the visual is
     mounted here by script. The aspect-ratio holds the layout so the page
     does not reflow when it arrives, and the section reads correctly even
     if the script never runs. */
  .orbit-mount {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: clamp(28px, 5vh, 52px) auto 0;
  }
  #orbit-solar { aspect-ratio: 960 / 400; max-height: 46vh; }
  .orbit-mount:empty::after {
    content: "";
    position: absolute; inset: 50% auto auto 50%;
    width: clamp(120px, 26vw, 190px); height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, var(--rule-st), transparent);
  }

  /* ---------- Orbit figure: the orrery (orbit-morph.js) ----------
     Everything is colour-tokened so the figure follows the theme toggle. */
  .orbit-mount .om-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* stroke is a per-instance gradient set in JS, so none is declared here */
  .om-ring { fill: none; stroke-width: 1.1; }
  /* the seven wanderers — warm family, one rose (it survives as an electron) */
  .om-b0 { fill: var(--gold); }
  .om-b1 { fill: var(--ink-soft); }
  .om-b2 { fill: var(--gold-dp); }
  .om-b3 { fill: var(--rose-dp); }
  .om-b4 { fill: var(--gold); }
  .om-b5 { fill: var(--gold-lt); }
  .om-b6 { fill: var(--muted); }
  /* Gradient stops are classed rather than inlined so every part of the figure
     re-tints with the theme toggle. */
  /* the sun's haze */
  .om-gs0 { stop-color: var(--gold); stop-opacity: 0.30; }
  .om-gs1 { stop-color: var(--gold); stop-opacity: 0.10; }
  .om-gs2 { stop-color: var(--gold); stop-opacity: 0; }
  /* the sun's body: lit face to shaded limb, so it reads as a sphere */
  .om-cs0 { stop-color: var(--gold-lt); }
  .om-cs1 { stop-color: var(--gold); }
  .om-cs2 { stop-color: #7d5f28; }
  /* each ring: faint along its far arc, full along the near one */
  .om-rg0 { stop-color: var(--gold); stop-opacity: 0.12; }
  .om-rg1 { stop-color: var(--gold); stop-opacity: 0.30; }
  .om-rg2 { stop-color: var(--gold); stop-opacity: 0.55; }

  /* ---------- Ahl al-Bayt: the two shajara tables ----------
     Two genealogies read side by side on desktop and stack on narrow screens:
     the House of Hashim (how the Prophet and Ali stand to one another) and the
     Twelve Imams (the line that passes through Husayn alone).

     Both are drawn in the manuscript convention — each figure is a nimbus,
     light held in a double hairline ring, never a body. The rules between them
     are CSS borders laid on a grid rather than stroked SVG paths: the earlier
     SVG branches stretched a 100x100 viewBox to roughly 300x30 and dashed the
     stroke with pathLength, and under non-scaling-stroke the dash was measured
     in a different space than it was drawn in, so a connector could stop short
     of the node it was meant to reach. A border cannot come up short.

     Placement is per-figure data, so it rides on the element: --c/--cs are the
     grid column and its span, --r/--rs the row and its span, --d the beat at
     which that piece takes light. */
  .shj-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(30px, 5vw, 48px);
    margin: clamp(34px, 5vh, 54px) auto 0;
  }
  @media (min-width: 900px) {
    .shj-pair { grid-template-columns: 1fr 1fr; align-items: start; }
  }

  /* The Cloak plate stands alone above the pair — smaller nimbi, narrower
     folio, centred. Shares the pair's top margin so the rhythm holds. */
  .shajara--kisa {
    --shj-disc: clamp(38px, 8vw, 46px);
    max-width: 560px;
    margin: clamp(34px, 5vh, 54px) auto 0;
  }

  .shajara {
    --shj-disc: clamp(42px, 9.5vw, 54px);  /* nimbus diameter */
    --shj-stem: clamp(18px, 2.6vw, 26px);  /* height of one connector row */
    position: relative;
    padding: clamp(26px, 4vw, 38px) clamp(8px, 1.6vw, 16px) clamp(28px, 4vw, 40px);
    border: 1px solid var(--rule);
  }
  /* folio corner marks, as on the cover frame */
  .shajara::before, .shajara::after {
    content: ""; position: absolute; width: 14px; height: 14px;
    border: 1px solid var(--gold);
  }
  .shajara::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
  .shajara::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

  .shj-caption {
    font-family: var(--display); font-weight: 600;
    font-size: var(--fs-500);
    text-align: center; color: var(--ink);
    margin-bottom: 4px;
  }
  .shj-caption-sub {
    font-size: var(--fs-200); letter-spacing: 3px; text-transform: uppercase;
    text-align: center; color: var(--gold-dp);
    margin-bottom: clamp(18px, 3vw, 28px);
  }

  /* The grid every figure and rule is placed on. Column gap stays 0 so a
     column centre sits at an exact fraction of the track — that is what lets a
     horizontal rule reach from one node centre to another with a plain
     percentage inset, at any width, with nothing measured in script. */
  .shj-tree {
    display: grid;
    column-gap: 0;
    justify-items: center;
  }
  /* Rows alternate figure / connector. A connector row holds nothing but
     hairlines, so it is given an explicit height — left to auto it would
     collapse to zero and take its rules with it. */
  .shj-tree--hashim {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows:
      auto var(--shj-stem) auto var(--shj-stem) auto var(--shj-stem)
      auto var(--shj-stem) auto var(--shj-stem) auto var(--shj-stem)
      auto var(--shj-stem) auto;
  }
  .shj-tree--imams {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto var(--shj-stem) auto var(--shj-stem) auto;
  }
  /* The People of the Cloak: five figures. Content sits on columns 2–6 of
     seven, so the composition centres itself with a clear column each side. */
  .shj-tree--kisa {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto var(--shj-stem) auto var(--shj-stem) auto auto;
  }
  .shj-tree > * {
    grid-column: var(--c, 1) / span var(--cs, 1);
    grid-row: var(--r) / span var(--rs, 1);
    /* a grid item floors at its min-content width unless told otherwise, and
       a name like 'Abd al-Muttalib is wider than a quarter of a phone — without
       this the four-column plate pushes past the screen instead of wrapping */
    min-width: 0;
  }

  .shj-node {
    position: relative;
    width: 100%;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
  }
  .shj-disc {
    display: flex; align-items: center; justify-content: center;
    width: var(--shj-disc); height: var(--shj-disc);
    border-radius: 50%;
    border: 1px solid rgba(198,161,91,0.45);
    background:
      radial-gradient(circle at 36% 30%, rgba(240,214,160,0.22), rgba(198,161,91,0.09) 55%, rgba(198,161,91,0.02) 78%);
    box-shadow: 0 0 26px rgba(198,161,91,0.13);
  }
  .shj-disc::after { /* the second hairline of the nimbus */
    content: ""; position: absolute;
    width: calc(var(--shj-disc) + 7px); height: calc(var(--shj-disc) + 7px);
    border-radius: 50%; border: 1px solid rgba(198,161,91,0.20);
  }
  .shj-ar {
    font-family: "Amiri", var(--serif);
    font-size: var(--fs-200);
    line-height: 1.2;
    color: var(--gold-dp);
    padding: 0 5px;
  }
  .shj-en {
    margin-top: 7px;
    font-size: var(--fs-100);
    color: var(--ink-soft);
    line-height: 1.25;
    padding: 0 2px;
    /* a quarter of a narrow phone is thinner than 'Abd al-Muttalib, so let the
       name break inside itself rather than push the plate off the screen */
    overflow-wrap: anywhere;
  }
  /* the honorific each blessed name carries. Set in the manuscript gold of the
     numerals so it reads as reverence rather than as part of the name, and kept
     unbreakable — it may fall to its own line under a narrow name, never split. */
  .shj-hon {
    white-space: nowrap;
    font-size: 0.85em;
    letter-spacing: 0.3px;
    color: var(--gold-dp);
    opacity: 0.85;
  }

  /* the Imams carry the same roman numerals as the four gates */
  .shj-ord {
    display: block;
    font-family: var(--display); font-weight: 600;
    font-size: var(--fs-100); letter-spacing: 2px;
    color: var(--gold-dp); opacity: 0.85;
    margin-bottom: 2px;
  }
  /* the year each Imam passed, as the plate gives it (hijri/CE) */
  .shj-date {
    display: block;
    font-size: var(--fs-100); letter-spacing: 0.4px;
    color: var(--muted);
    margin-top: 3px;
  }
  /* the feminine line, in the register the ayat grid established */
  .shj-node--rose .shj-disc {
    background:
      radial-gradient(circle at 36% 30%, rgba(240,139,158,0.24), rgba(216,69,95,0.11) 55%, rgba(216,69,95,0.03) 78%);
    border-color: rgba(216,69,95,0.42);
    box-shadow: 0 0 26px rgba(216,69,95,0.12);
  }
  .shj-node--rose .shj-disc::after { border-color: rgba(216,69,95,0.22); }
  .shj-node--rose .shj-ar { color: var(--rose-dp); }
  /* the Twelfth, in occultation: the ring holds, the light is withheld */
  .shj-node--veiled .shj-disc { background: none; box-shadow: 0 0 32px rgba(198,161,91,0.10); }
  .shj-node--veiled .shj-ar { color: var(--muted); }

  /* ----- the rules between figures -----
     A connector row is --shj-stem tall. A parent stem drops through its top
     half, the sibling bar crosses at the middle, and each child stem drops
     through the bottom half — so one row carries a whole split. */
  .shj-v {
    width: 1px; background: var(--rule-st);
    justify-self: center; align-self: stretch; height: 100%;
  }
  .shj-v--t { align-self: start;  height: 50%; }
  .shj-v--b { align-self: end;    height: 50%; }
  /* Every figure occupies a two-column slot, so a slot centre falls on a
     column boundary and the midpoint between two figures is addressable too —
     that is what lets the descent to Fatima leave the knot between Khadija and
     the Prophet rather than either of them. A bar inset by one column on each
     side therefore runs centre-to-centre between the first and last slot it
     spans. Percentage margins on a grid item resolve against its grid area, so
     this holds at every width. */
  .shj-h {
    height: 1px; background: var(--rule-st);
    align-self: center; justify-self: stretch;
    /* width stays auto: a stretched grid item resolves its width from its
       margins, so both insets are honoured. Pinning width:100% here would
       over-constrain the box, the right margin would be dropped, and the bar
       would run half a slot past the last child it is meant to reach. */
    margin-inline: calc(100% / var(--cs, 2));
  }

  /* Union bar: a marriage, with the knot descent leaves from. Stretched to the
     row height so it can also carry the descent stem from the knot down to the
     branch below — the row height (disc + caption) would otherwise leave a
     break in the line. The bar is inset half a disc beyond the half-column so
     it meets the rings at their edges instead of crossing them. */
  .shj-union {
    position: relative;
    align-self: stretch; justify-self: stretch; width: 100%;
    margin-top: calc(var(--shj-disc) / 2);
    background: linear-gradient(var(--rule-st), var(--rule-st)) 50% 100% / 1px 100% no-repeat;
  }
  .shj-union::before {
    content: ""; position: absolute; top: 0; height: 1px;
    left:  calc(100% / var(--cs, 2) + var(--shj-disc) / 2);
    right: calc(100% / var(--cs, 2) + var(--shj-disc) / 2);
    background: var(--rule-st);
  }
  .shj-union::after { /* the knot */
    content: ""; position: absolute;
    left: 50%; top: 0;
    width: 6px; height: 6px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--gold);
  }

  /* Husayn stands in the right column, but the nine after him run down the
     centre — this is the turn that brings the thread back. */
  .shj-return { position: relative; align-self: stretch; justify-self: stretch; width: 100%; }
  .shj-return::before { /* down out of Husayn */
    content: ""; position: absolute;
    left: 75%; top: 0; height: 50%; width: 1px;
    background: var(--rule-st);
  }
  .shj-return::after { /* across to the centre, then down */
    content: ""; position: absolute;
    left: 50%; right: 25%; top: 50%; bottom: 0;
    border-top: 1px solid var(--rule-st);
    border-left: 1px solid var(--rule-st);
  }

  /* the nine after Husayn, on one thread. The stem between them is drawn to
     --shj-step, so the gap and the line it spans can never drift apart. */
  .shj-column {
    --shj-step: clamp(16px, 2.4vw, 21px);
    display: flex; flex-direction: column; align-items: center;
    gap: var(--shj-step);
    width: 100%;
  }
  .shj-column .shj-node:not(:first-child)::before {
    content: ""; position: absolute;
    top: calc(var(--shj-step) * -1); left: 50%; width: 1px; height: var(--shj-step);
    background: var(--rule-st);
  }
  /* past the Twelfth the thread does not end — it fades */
  .shj-continues { width: 1px; height: 38px; background: linear-gradient(var(--rule-st), transparent); }

  /* the plate footnote: the bridge from the House into the Imams */
  .shj-note {
    font-size: var(--fs-200); line-height: 1.45; text-align: center;
    color: var(--muted); font-style: italic;
    padding: 8px 6px 0;
  }

  /* By daylight the parchment is brighter than the glow, so the nimbus is
     drawn in gold shadow rather than gold light */
  :root[data-theme="light"] .shj-disc {
    background: radial-gradient(circle at 36% 30%, rgba(156,124,51,0.16), rgba(156,124,51,0.06) 55%, rgba(156,124,51,0.02) 78%);
    box-shadow: 0 0 26px rgba(156,124,51,0.10);
  }
  :root[data-theme="light"] .shj-node--rose .shj-disc {
    background: radial-gradient(circle at 36% 30%, rgba(184,46,75,0.13), rgba(184,46,75,0.05) 55%, rgba(184,46,75,0.02) 78%);
    box-shadow: 0 0 26px rgba(184,46,75,0.08);
  }
  :root[data-theme="light"] .shj-node--veiled .shj-disc { background: none; }

  /* ---------- Illuminated Chart: gate button & preview ---------- */
  .chart-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 52px; }
  .chart-preview-wrapper {
    position: relative;
    max-width: 780px;
    width: 100%;
    margin-bottom: 28px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* Smooth radial mask to fade out the rectangular corners and edges */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 98%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 98%);
  }
  .chart-preview-wrapper:hover {
    transform: translateY(-4px) scale(1.008);
  }
  .chart-preview-img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.94;
    transition: opacity 0.3s;
    mix-blend-mode: screen; /* Blends the black background of the image with the page background */
  }
  .chart-preview-wrapper:hover .chart-preview-img {
    opacity: 1;
  }
  .chart-enter-btn { font-size: var(--fs-300); padding: 16px 40px; }

  /* ---------- Illuminated Chart: full-screen overlay ---------- */
  #chart-overlay {
    position: fixed; inset: 0; z-index: 20000;
    display: flex; flex-direction: column;
    background:
      radial-gradient(130% 100% at 50% -10%, #fbf6ea 0%, var(--paper) 50%, var(--paper-2) 100%);
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
  }
  #chart-overlay.open { opacity: 1; pointer-events: auto; }

  .chart-bar {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 14px clamp(18px, 4vw, 40px);
    border-bottom: 1px solid var(--rule);
    background: rgba(246, 239, 224, 0.7); backdrop-filter: blur(8px);
  }
  .chart-bar-title { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: var(--fs-600); color: var(--ink); }
  .chart-bar-glyph { color: var(--gold-dp); font-size: var(--fs-orn-sm); }
  .chart-controls { display: flex; gap: 10px; }
  .chart-ctl {
    font-family: var(--serif); font-size: var(--fs-200); letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-soft); background: transparent; border: 1px solid var(--rule-st);
    padding: 9px 16px; border-radius: 2px; cursor: pointer; transition: 0.25s;
  }
  .chart-ctl:hover { border-color: var(--gold); color: var(--gold-dp); }
  .chart-ctl.active { background: var(--gold); color: #fff; border-color: var(--gold); }
  .chart-ctl-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  .chart-field { position: relative; flex: 1; overflow: hidden; }
  #chart-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  #chart-stage { position: absolute; inset: 0; z-index: 2; }

  .chart-hint {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4;
    font-style: italic; font-size: var(--fs-300); color: var(--muted); text-align: center;
    pointer-events: none; transition: opacity 0.5s; padding: 0 16px;
  }

  /* ----- chart nodes (medallions) ----- */
  .chart-node {
    position: absolute; transform: translate(-50%, -50%); z-index: 3; cursor: pointer;
    transition: left 0.6s cubic-bezier(0.22,1,0.36,1), top 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.45s;
  }
  .medallion {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    background: radial-gradient(120% 120% at 50% 18%, #fdfaf1, var(--paper-2));
    border: 1px solid var(--gold);
    box-shadow: 0 10px 26px -16px rgba(120,90,30,0.6), inset 0 0 0 4px rgba(255,255,255,0.55), inset 0 0 0 5px var(--rule);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  }
  .chart-node:hover .medallion { transform: scale(1.06); box-shadow: 0 16px 32px -16px rgba(120,90,30,0.75), inset 0 0 0 4px rgba(255,255,255,0.6), inset 0 0 0 5px var(--gold-lt); }
  .m-glyph { color: var(--gold-dp); font-size: var(--fs-orn-sm); line-height: 1; margin-bottom: 3px; }
  .m-numeral { font-family: var(--display); font-style: italic; font-weight: 700; font-size: var(--fs-300); color: var(--gold-dp); line-height: 1; }
  .m-name { font-family: var(--display); font-weight: 600; font-size: var(--fs-300); line-height: 1.1; color: var(--ink); max-width: 120px; }
  .m-sub, .m-ct { font-size: var(--fs-100); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

  /* central seal */
  #chart-core .medallion.seal {
    width: 160px;
    height: 160px;
    background: radial-gradient(120% 120% at 50% 18%, #fdf7e6, #ecdfbf);
    border-color: var(--gold-dp);
    box-shadow: 0 14px 34px -16px rgba(120,90,30,0.7), inset 0 0 0 5px rgba(255,255,255,0.6), inset 0 0 0 6px var(--gold);
  }
  #chart-core .m-glyph { font-size: var(--fs-700); }
  #chart-core.gone { opacity: 0; transform: translate(-50%,-50%) scale(0.3); pointer-events: none; }

  /* theme node states */
  .theme-node.dim { opacity: 0.5; }
  .theme-node.dim .medallion { width: 96px; height: 96px; }
  .theme-node.dim .m-numeral, .theme-node.dim .m-ct { display: none; }
  .theme-node.focused .medallion { width: 170px; height: 170px; border-color: var(--gold-dp); box-shadow: 0 18px 40px -16px rgba(120,90,30,0.8), inset 0 0 0 5px rgba(255,255,255,0.6), inset 0 0 0 6px var(--gold); }

  /* concept node */
  .concept-node { animation: chart-pop 0.45s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes chart-pop { from { opacity: 0; transform: translate(-50%,-50%) scale(0.4); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
  .medallion.concept-med {
    width: 116px;
    height: 116px;
    position: relative;
    background: radial-gradient(120% 120% at 50% 18%, #fffdf6, var(--paper));
  }
  .concept-node.sel .medallion { transform: scale(1.1); border-color: var(--gold-dp); box-shadow: 0 16px 32px -14px rgba(120,90,30,0.8), inset 0 0 0 4px rgba(255,255,255,0.6), inset 0 0 0 5px var(--gold); }
  .m-badge {
    position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px;
    border-radius: 11px; background: var(--gold); color: #fff; font-size: var(--fs-100); font-weight: 600;
    display: flex; align-items: center; justify-content: center; border: 1px solid var(--paper);
  }
  .concept-med .m-name { font-size: var(--fs-200); max-width: 100px; }

  /* thread labels */
  .chart-tlabel {
    position: absolute; z-index: 15; transform: translate(-50%, -50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 50% 18%, #fdfaf1, var(--paper-2));
    border: 1px solid var(--gold);
    color: var(--gold-dp); cursor: pointer;
    box-shadow: 0 4px 10px rgba(120, 90, 30, 0.15), inset 0 0 0 2px rgba(255,255,255,0.6), inset 0 0 0 3px var(--rule);
    font-family: var(--serif); font-size: var(--fs-300); font-weight: 600;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s, border-color 0.3s, background-color 0.3s, color 0.3s;
  }
  .chart-tlabel:hover {
    transform: translate(-50%, -50%) scale(1.18);
    border-color: var(--gold-lt);
    box-shadow: 0 6px 16px rgba(120, 90, 30, 0.25), inset 0 0 0 2px rgba(255,255,255,0.6), inset 0 0 0 3px rgba(198, 162, 63, 0.2);
    color: var(--gold-dp);
    z-index: 25;
  }
  .chart-tlabel.active {
    background: radial-gradient(120% 120% at 50% 18%, var(--gold-lt), var(--gold-dp));
    color: #fff;
    border-color: var(--gold-dp);
    box-shadow: 0 6px 18px rgba(120, 90, 30, 0.35), inset 0 0 0 2px rgba(255,255,255,0.2);
    transform: translate(-50%, -50%) scale(1.18);
  }

  /* Parchment Tooltip on hover */
  .chart-tlabel::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 140%; left: 50%;
    transform: translateX(-50%) scale(0.85);
    background: #fdfaf2; color: var(--ink);
    padding: 5px 12px; border-radius: 3px;
    font-size: var(--fs-300); font-family: var(--serif); font-style: italic;
    white-space: nowrap; pointer-events: none; opacity: 0;
    box-shadow: 0 4px 12px rgba(120, 90, 30, 0.15);
    border: 1px solid var(--gold);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
  }
  .chart-tlabel:hover::after {
    opacity: 1; transform: translateX(-50%) scale(1);
  }
  .chart-tlabel::before {
    content: ""; position: absolute; bottom: 120%; left: 50%;
    transform: translateX(-50%);
    border-width: 6px; border-style: solid;
    border-color: var(--gold) transparent transparent transparent;
    pointer-events: none; opacity: 0;
    transition: opacity 0.2s ease; z-index: 100;
  }
  .chart-tlabel:hover::before {
    opacity: 1;
  }

  /* ----- reading drawer ----- */
  #chart-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 10;
    width: min(420px, 92vw); padding: 26px clamp(20px, 3vw, 30px) 36px;
    background: rgba(250, 245, 233, 0.97); backdrop-filter: blur(6px);
    border-left: 1px solid var(--gold);
    box-shadow: -24px 0 60px -30px rgba(120,90,30,0.5);
    overflow-y: auto; transform: translateX(calc(100% + 60px));
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  }
  #chart-drawer.open { transform: translateX(0); }
  .dr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
  .dr-eyebrow { font-size: var(--fs-200); letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-dp); font-weight: 600; padding-top: 4px; }
  .dr-back { background: transparent; border: 0; color: var(--gold-dp); font-family: var(--serif); font-size: var(--fs-200); letter-spacing: 2px; text-transform: uppercase; cursor: pointer; padding: 0; }
  .dr-back:hover { text-decoration: underline; }
  .dr-close { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--rule-st); background: transparent; color: var(--ink-soft); cursor: pointer; transition: 0.2s; }
  .dr-close:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
  .dr-title { font-family: var(--display); font-weight: 600; font-size: var(--fs-700); line-height: 1.1; color: var(--ink); margin-bottom: 10px; }
  .dr-glyph { color: var(--gold); }
  .dr-blurb { color: var(--ink-soft); font-size: var(--fs-400); line-height: 1.55; margin-bottom: 8px; }
  .dr-blurb:empty { margin: 0; }
  .dr-def { color: var(--ink-soft); font-size: var(--fs-400); line-height: 1.6; margin: 6px 0 6px; }
  .dr-sect { font-size: var(--fs-200); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 24px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--rule); }

  .dr-clist { display: flex; flex-direction: column; gap: 4px; }
  .dr-citem {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: transparent; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
    padding: 11px 12px; font-family: var(--serif); color: var(--ink); transition: 0.2s;
  }
  .dr-citem:hover { background: rgba(156,124,51,0.08); border-color: var(--rule-st); }
  .dr-cdot { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1px solid var(--gold); }
  .dr-cx { flex: 1; display: flex; flex-direction: column; }
  .dr-cn { font-family: var(--display); font-weight: 600; font-size: var(--fs-500); line-height: 1.15; }
  .dr-cd { font-size: var(--fs-200); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .dr-arr { color: var(--gold); font-size: var(--fs-500); }

  .dr-threads { display: flex; flex-direction: column; gap: 6px; }
  .dr-thread {
    display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
    background: transparent; border: 0; border-left: 1px solid var(--rule-st); cursor: pointer;
    padding: 9px 14px; font-family: var(--serif); color: var(--ink); transition: 0.2s;
  }
  .dr-thread:hover { border-left-color: var(--gold); background: rgba(156,124,51,0.06); }
  .dr-tt { font-size: var(--fs-200); letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dp); }
  .dr-td { font-style: italic; font-size: var(--fs-300); line-height: 1.4; color: var(--ink); }

  .dr-videos { display: flex; flex-direction: column; gap: 6px; }
  .dr-vid {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
    background: rgba(255,253,247,0.6); border: 1px solid var(--rule-st); border-radius: 2px; cursor: pointer;
    padding: 12px 14px; font-family: var(--serif); color: var(--ink); transition: 0.2s;
  }
  .dr-vid:hover { border-color: var(--gold); background: rgba(156,124,51,0.08); transform: translateX(2px); }
  .dr-play { color: var(--gold); font-size: var(--fs-200); flex: none; margin-top: 5px; }
  .dr-vt { font-size: var(--fs-400); line-height: 1.3; display: block; }
  .dr-vh { font-size: var(--fs-100); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); display: block; margin-top: 3px; }

  /* papers shown as connections in "How it connects" reuse .dr-thread, with a warmer tint */
  .dr-thread-paper { border-left-color: var(--gold); background: rgba(156,124,51,0.04); }

  /* ---------- Letters ---------- */
  #letters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; margin-top: 48px; }
  .letter-card {
    position: relative; cursor: pointer; padding: 32px;
    background: rgba(255,253,247,0.6);
    border: 1px solid var(--rule-st); border-radius: 2px;
    display: flex; flex-direction: column; gap: 12px;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s, border-color 0.3s;
    outline: none;
  }
  .letter-card:hover, .letter-card:focus-visible { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 22px 40px -22px rgba(120,90,30,0.5); }
  .letter-title { font-family: var(--display); font-weight: 600; font-size: var(--fs-600); color: var(--ink); }
  .letter-desc { color: var(--ink-soft); font-size: var(--fs-400); flex-grow: 1; }
  .letter-link { font-size: var(--fs-200); letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dp); margin-top: 6px; }

  /* ---- Locked state ----
     The title stays at full strength: a locked card still has to sell the
     paper, and dimming its name is the one change that would stop it. Only
     the description recedes, and the lift shortens so the card reads as
     closed rather than broken. */
  .letter-card--locked { border-style: dashed; }
  .letter-card--locked .letter-desc { color: var(--muted); }
  .letter-card--locked:hover, .letter-card--locked:focus-visible {
    transform: translateY(-2px);
    border-style: solid;
  }
  .letter-card--locked::after {
    content: "🔒";
    position: absolute; top: 16px; right: 18px;
    font-size: var(--fs-300); line-height: 1;
    opacity: 0.5; transition: opacity 0.3s;
  }
  .letter-card--locked:hover::after, .letter-card--locked:focus-visible::after { opacity: 1; }
  .letter-link--locked { color: var(--muted); }
  .letter-card--locked:hover .letter-link--locked,
  .letter-card--locked:focus-visible .letter-link--locked { color: var(--gold-dp); }

  .letter-badge {
    align-self: flex-start;
    font-size: var(--fs-200); letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-dp); border: 1px solid var(--rule-st); border-radius: 999px;
    padding: 3px 12px; margin-bottom: 2px;
  }

  /* Concept-map drawer's related-paper buttons, same story in miniature. */
  .dr-thread-locked { opacity: 0.72; }
  .dr-thread-locked:hover { opacity: 1; }

  /* ---------- Ayat Section (Combined Row) ---------- */
  .ayat-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 20px;
  }
  .ayat-row {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
  }
  .ayat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ayat-card .eyebrow {
    font-size: var(--fs-200);
    letter-spacing: 3px;
    margin-bottom: 12px;
  }
  .ayat-card .section-title {
    font-size: var(--fs-700);
    margin-bottom: 16px;
    cursor: pointer;
    transition: color 0.3s ease;
    user-select: none;
    position: relative;
    display: inline-block;
  }
  .ayat-card .section-title:hover {
    color: var(--gold);
  }
  .ayat-card .section-title::after {
    content: " ➔";
    font-size: 0.6em;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: inline-block;
    transform: translateX(-4px);
    color: var(--gold-lt);
  }
  .ayat-card .section-title:hover::after {
    opacity: 1;
    transform: translateX(4px);
  }
  /* The feminine column: Umm al-Kitab above, Maryam below, one colour between
     them so the left side of the grid reads as a single voice. */
  .ayat-card .section-title--feminine { color: var(--rose-dp); }
  .ayat-card .section-title--feminine:hover { color: var(--rose); }
  .ayat-card .section-title--feminine::after { color: var(--rose-lt); }
  /* Cards that carry only the verse have nothing to open, so they must not
     offer the affordance. */
  .ayat-card .section-title--static { cursor: default; }
  .ayat-card .section-title--static::after { content: none; }
  .ayat-card .section-title--static:hover { color: var(--ink); }
  .ayat-card .section-title--static.section-title--feminine:hover { color: var(--rose-dp); }

  /* ---------- Ayat Insight Modal Content Styling ---------- */
  .insight-p {
    margin-bottom: 20px;
    text-align: justify;
  }
  .insight-p:last-of-type {
    margin-bottom: 0;
  }
  .insight-p strong {
    color: var(--gold-dp);
    font-weight: 600;
  }
  .insight-p em {
    font-style: italic;
    color: var(--gold-dp);
  }
  .insight-divider {
    text-align: center;
    color: var(--gold);
    font-size: var(--fs-400);
    margin: 24px 0;
    letter-spacing: 6px;
    opacity: 0.8;
  }

  .ayat-card .quote-block {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 480px;
  }
  .ayat-card .quote-block .quote {
    font-size: var(--fs-500);
    line-height: 1.5;
  }
  .ayat-card .quote-block .drop {
    font-size: 1.8em;
    padding: 0px 4px 0 0;
  }
  .ayat-card .quote-ref {
    margin-top: 18px;
    font-size: var(--fs-200);
    letter-spacing: 2px;
  }
  .ayat-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
    opacity: 0.6;
    align-self: stretch;
  }
  .ayat-row-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.6;
    margin: 0;
  }
  @media (max-width: 820px) {
    .ayat-grid {
      gap: 30px;
    }
    .ayat-row {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .ayat-divider {
      height: 1px;
      width: 100%;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      align-self: auto;
    }

    /* Golden Nuggets — vertical stack, tap a panel to open it */
    .gate {
      flex-direction: column;
      min-height: 0;
      gap: 16px;
    }
    /* Neutralize desktop hover/focus expansion so touch "sticky hover"
       doesn't auto-open panels; opening is driven by the .open class only. */
    .gate-panel,
    .gate-panel:hover,
    .gate-panel:focus,
    .gate-panel:focus-within {
      flex: none;
      flex-grow: 0;
      box-shadow: none;
      border-color: var(--rule);
    }
    .gate-panel:hover .gate-numeral,
    .gate-panel:focus .gate-numeral,
    .gate-panel:focus-within .gate-numeral {
      opacity: 0.08;
      transform: none;
    }
    /* Nuggets stay collapsed until the panel is tapped open */
    .gate-panel:hover .gate-nuggets,
    .gate-panel:focus .gate-nuggets,
    .gate-panel:focus-within .gate-nuggets {
      max-height: 0;
      opacity: 0;
    }
    .gate-panel:hover .gate-nuggets li,
    .gate-panel:focus .gate-nuggets li,
    .gate-panel:focus-within .gate-nuggets li {
      transform: translateY(10px);
      opacity: 0;
    }
    /* Open state (set by JS on tap) */
    .gate-panel.open {
      border-color: var(--gold);
      box-shadow: 0 12px 30px rgba(120, 90, 30, 0.14);
    }
    .gate-panel.open .gate-numeral { opacity: 0.14; transform: translateY(-6px); }
    .gate-panel.open .gate-nuggets {
      max-height: 320px;
      opacity: 1;
      overflow: hidden;
      margin-top: 20px;
    }
    .gate-panel.open .gate-nuggets li { transform: none; opacity: 1; }
  }

  /* ---------- Modals ---------- */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 30000; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(40, 32, 20, 0.55); backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
  }
  .modal-overlay.open { opacity: 1; pointer-events: auto; }
  /* PDF reader modal */
  #pdf-modal .modal-content {
    background: var(--paper); border: 1px solid var(--gold); border-radius: 2px;
    width: 90vw; max-width: 1000px; height: 85vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 40px 80px rgba(40,30,10,0.4);
  }
  .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--rule); }
  .modal-header h3, .modal-title { font-family: var(--display); font-size: var(--fs-500); font-weight: 600; color: var(--ink); margin: 0; line-height: 1.2; }
  .modal-eyebrow { font-family: var(--serif); font-size: var(--fs-200); letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dp); margin: 0 0 2px 0; }
  .modal-close {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule-st);
    background: transparent; color: var(--ink-soft); cursor: pointer; font-size: var(--fs-300); transition: 0.2s;
  }
  .modal-close:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
  .modal-body { flex: 1; background: #e7ddc8; }
  .modal-body iframe { width: 100%; height: 100%; border: none; }
  .modal-footer { padding: 12px 22px; border-top: 1px solid var(--rule); text-align: right; }
  .modal-footer a { color: var(--gold-dp); font-size: var(--fs-300); text-decoration: none; }
  .modal-footer a:hover { text-decoration: underline; }

  /* Access modal (the Letters paywall).
     Borrows the shell from #pdf-modal above and only overrides what a reading
     panel needs that a PDF frame does not: it sizes to its content instead of
     filling the viewport, and the body is paper rather than the iframe's flat
     backing colour. */
  #access-modal .modal-content {
    background: var(--paper); border: 1px solid var(--gold); border-radius: 2px;
    width: min(92vw, 480px); max-height: 88vh; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 40px 80px rgba(40,30,10,0.4);
  }
  .access-body {
    padding: 24px 22px 26px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
    background: transparent;
  }
  .access-lede { font-family: var(--display); font-size: var(--fs-500); color: var(--ink); line-height: 1.35; margin: 0; }
  .access-note { font-size: var(--fs-300); color: var(--ink-soft); line-height: 1.6; margin: 0; }
  .access-note--quiet { font-size: var(--fs-200); color: var(--muted); }

  .access-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .access-label { font-size: var(--fs-200); letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dp); }
  .access-input {
    font-family: var(--serif); font-size: var(--fs-300); color: var(--ink);
    padding: 12px 14px; background: rgba(255,253,247,0.7);
    border: 1px solid var(--rule-st); border-radius: 2px; outline: none;
    transition: border-color 0.3s;
  }
  .access-input:focus { border-color: var(--gold); }
  .access-submit {
    /* 46px tall: comfortably past the 44px touch target the rest of the site keeps to. */
    font-family: var(--serif); font-size: var(--fs-200); letter-spacing: 2px; text-transform: uppercase;
    min-height: 46px; padding: 13px 18px; cursor: pointer;
    color: var(--paper); background: var(--gold-dp);
    border: 1px solid var(--gold-dp); border-radius: 2px;
    transition: background 0.3s, border-color 0.3s, opacity 0.3s;
  }
  .access-submit:hover { background: var(--gold); border-color: var(--gold); }
  .access-submit:disabled { opacity: 0.55; cursor: default; }
  .access-secondary {
    align-self: flex-start; font-family: var(--serif); font-size: var(--fs-200);
    letter-spacing: 2px; text-transform: uppercase; min-height: 44px; padding: 11px 16px;
    cursor: pointer; color: var(--ink-soft); background: transparent;
    border: 1px solid var(--rule-st); border-radius: 2px; transition: 0.3s;
  }
  .access-secondary:hover { border-color: var(--gold); color: var(--gold-dp); }

  .access-links { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; }
  .access-links a {
    font-size: var(--fs-300); color: var(--gold-dp); text-decoration: none;
    padding: 11px 14px; min-height: 44px; display: flex; align-items: center;
    border: 1px solid var(--rule-st); border-radius: 2px; transition: 0.3s;
  }
  .access-links a:hover { border-color: var(--gold); background: rgba(156,124,51,0.05); }

  .access-msg { font-size: var(--fs-300); line-height: 1.5; margin: 0; padding: 10px 12px; border-radius: 2px; }
  .access-msg--error { color: var(--rose); background: rgba(158,74,74,0.07); border: 1px solid rgba(158,74,74,0.25); }
  .access-msg--info { color: var(--ink-soft); background: rgba(156,124,51,0.06); border: 1px solid var(--rule-st); }

  /* Video modal */
  #video-modal .video-modal-content {
    position: relative; width: 90vw; max-width: 920px;
    background: #000; border: 1px solid var(--gold); border-radius: 2px; overflow: hidden;
    box-shadow: 0 40px 80px rgba(40,30,10,0.5); transform: scale(0.96); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  #video-modal.open .video-modal-content { transform: scale(1); }
  #video-modal .video-modal-body { position: relative; width: 100%; aspect-ratio: 16/9; }
  #video-modal .video-modal-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
  .video-modal-caption {
    font-family: var(--display); font-weight: 600; font-size: var(--fs-500); line-height: 1.3;
    color: var(--ink); background: var(--paper); padding: 14px 20px;
    border-top: 1px solid var(--rule);
  }
  .video-modal-caption:empty { display: none; }
  .video-modal-close {
    position: absolute; top: 12px; right: 12px; z-index: 5; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; transition: 0.2s;
  }
  .video-modal-close:hover { background: var(--gold); color: #000; border-color: var(--gold); }

  /* Touch devices: hover tooltips on thread labels never fire — remove them so
     stale "sticky hover" tooltips don't linger after a tap */
  @media (hover: none) {
    .chart-tlabel::before, .chart-tlabel::after { display: none; }
  }

  @media (max-width: 480px) {
    #cover .frame { padding: 36px 22px; }
    #cover .frame::before { top: 6px; left: 6px; }
    #cover .frame::after { bottom: 6px; right: 6px; }
    .quote-block .drop { font-size: 1.8em; }
  }

  @media (max-width: 720px) {
    .nav-links { display: flex; gap: 10px; justify-content: center; }
    .nav-link-btn { padding: 6px 16px; letter-spacing: 1px; }
    .quote-block .drop { font-size: 2em; }
    .chart-bar-title span:last-child { display: none; }
    .chart-ctl { padding: 8px 11px; letter-spacing: 1px; }
    .medallion { width: 110px; height: 110px; }
    .m-name { font-size: var(--fs-200); max-width: 95px; }
    .m-glyph { font-size: var(--fs-500); }
    #chart-core .medallion.seal { width: 125px; height: 125px; }
    .theme-node.dim .medallion { width: 80px; height: 80px; }
    .theme-node.focused .medallion { width: 125px; height: 125px; }
    .medallion.concept-med { width: 100px; height: 100px; }
    #chart-drawer { width: 100%; max-width: 100%; border-left: 0; }
    .chart-tlabel { width: 24px; height: 24px; font-size: var(--fs-200); }
  }

  /* ---------- Arabic Word Study Section ---------- */
  .arabic-study-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(30px, 5vw, 60px);
    margin-top: 40px;
    align-items: start;
  }
  .arabic-study-philosophy {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .philosophy-card {
    background: rgba(255, 253, 247, 0.4);
    border: 1px solid var(--rule);
    padding: 30px;
    border-radius: 4px;
    position: relative;
    transition: transform 0.3s, border-color 0.3s;
  }
  .philosophy-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
  }
  .philosophy-card::before {
    content: "❖";
    position: absolute;
    top: -10px;
    left: 30px;
    background: var(--paper);
    color: var(--gold);
    padding: 0 8px;
    font-size: var(--fs-200);
  }
  .philosophy-text {
    font-family: var(--serif);
    font-size: var(--fs-500);
    line-height: 1.65;
    color: var(--ink);
  }
  .philosophy-text em {
    color: var(--gold-dp);
    font-weight: 500;
  }

  /* SOP Display Card */
  .sop-card {
    background: rgba(255, 253, 247, 0.6);
    border: 1px solid var(--rule-st);
    border-radius: 4px;
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 0 12px 30px rgba(120, 95, 40, 0.05);
  }
  .sop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1.5px solid var(--rule-st);
    padding-bottom: 16px;
    margin-bottom: 24px;
  }
  .sop-header h3 {
    font-family: var(--display);
    font-size: var(--fs-600);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
  }
  .sop-examples-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--serif);
    font-size: var(--fs-300);
    font-style: italic;
    color: var(--gold-dp);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    align-self: baseline;
  }
  .sop-examples-trigger:hover {
    color: var(--gold-dp);
  }
  .sop-step-content button.abjad-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--gold-dp);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dotted var(--gold);
    cursor: pointer;
    transition: color 0.2s;
  }
  .sop-step-content button.abjad-trigger:hover {
    color: var(--gold-dp);
    border-bottom-style: solid;
  }
  .abjad-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
  }
  .abjad-table th, .abjad-table td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid var(--rule-st);
  }
  .abjad-table th {
    font-family: var(--display);
    font-size: var(--fs-200);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-dp);
    font-weight: 600;
    background: rgba(156, 124, 51, 0.05);
  }
  .abjad-table td {
    font-size: var(--fs-300);
    color: var(--ink);
  }
  .abjad-table td.arabic-char {
    font-size: var(--fs-500);
    line-height: 1;
    color: var(--ink);
  }
  .abjad-table tr:hover {
    background: rgba(156, 124, 51, 0.03);
  }
  .sop-badge {
    font-size: var(--fs-200);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--gold);
    color: #fff;
    padding: 4px 10px;
    border-radius: 2px;
  }
  .sop-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .sop-step {
    border: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    outline: none;
  }
  .sop-step:hover, .sop-step:focus-visible {
    border-color: var(--gold);
    background: rgba(156, 124, 51, 0.05);
    transform: translateX(4px);
  }
  .sop-step.active {
    border-color: var(--gold-dp);
    background: radial-gradient(120% 120% at 50% 18%, #fdfcf9, var(--paper-2));
    box-shadow: inset 0 0 0 1px var(--gold);
  }
  .sop-step-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .sop-step-num {
    font-family: var(--display);
    font-style: italic;
    font-weight: 700;
    color: var(--gold-dp);
    font-size: var(--fs-400);
  }
  .sop-step-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--fs-500);
    color: var(--ink);
    flex-grow: 1;
  }
  .sop-step-arabic {
    font-family: var(--serif);
    font-size: var(--fs-500);
    color: var(--gold-dp);
    font-weight: 600;
  }
  .sop-step-content {
    margin-top: 10px;
    font-size: var(--fs-400);
    line-height: 1.55;
    color: var(--ink-soft);
    display: none;
    border-top: 1px solid rgba(120, 95, 40, 0.15);
    padding-top: 10px;
  }
  .sop-step-content a {
    color: var(--gold-dp);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dotted var(--gold);
  }
  .sop-step-content a:hover {
    color: var(--gold-dp);
    border-bottom-style: solid;
  }
  .sop-step.active .sop-step-content {
    display: block;
  }
  .sop-placeholder-btn {
    margin-top: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed var(--gold);
    background: transparent;
    color: var(--gold-dp);
    font-family: var(--serif);
    font-size: var(--fs-300);
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
  }
  .sop-placeholder-btn:hover {
    background: rgba(156, 124, 51, 0.05);
    border-style: solid;
    color: var(--gold-dp);
  }

  @media (max-width: 900px) {
    .arabic-study-container {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  }
  /* ---------- Study With Us Section ---------- */
  .study-with-us-container {
    text-align: center;
    max-width: 650px;
    margin: 40px auto 0 auto;
  }
  .study-with-us-text {
    font-family: var(--serif);
    font-size: var(--fs-500);
    line-height: 1.65;
    color: var(--ink);
  }
  .study-with-us-badge {
    margin-top: 32px;
    display: inline-block;
    padding: 16px 36px;
    border: 1px dashed var(--gold);
    border-radius: 4px;
    background: rgba(255, 253, 247, 0.4);
    color: var(--gold-dp);
    font-family: var(--display);
    letter-spacing: 2px;
    font-size: var(--fs-300);
    text-transform: uppercase;
    transition: all 0.3s;
  }
  .study-with-us-badge:hover {
    background: rgba(156, 124, 51, 0.05);
    border-style: solid;
    color: var(--gold-dp);
  }
  /* The open door beneath the "coming soon": the gathering already exists. */
  .study-with-us-invite {
    margin-top: 30px;
    font-family: var(--serif);
    font-size: var(--fs-400);
    line-height: 1.72;
    color: var(--ink-soft);
  }
  .study-with-us-invite .invite-when {
    color: var(--ink);
    font-weight: 600;
  }
  .study-with-us-invite a {
    color: var(--gold-dp);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-st);
    padding-bottom: 1px;
    white-space: nowrap;
    transition: 0.25s;
  }
  .study-with-us-invite a:hover {
    color: var(--gold-lt);
    border-bottom-color: var(--gold);
  }
  
  /* ---------- Footer ---------- */
  .site-footer {
    border-top: 1px solid var(--rule);
    padding: 60px 20px;
    margin-top: 60px;
    background: transparent;
  }
  .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(30px, 6vw, 60px);
    max-width: 800px;
    margin: 0 auto;
  }
  .footer-links a {
    color: var(--ink);
    font-family: var(--serif);
    font-size: var(--fs-400);
    text-decoration: none;
    transition: color 0.3s;
    letter-spacing: 0.5px;
  }
  .footer-links a:hover {
    color: var(--gold-dp);
  }
  .footer-yt {
    color: var(--gold-dp) !important;
    transition: color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer-yt:hover {
    color: var(--gold) !important;
    transform: scale(1.1);
  }
  @media (max-width: 600px) {
    .footer-links {
      flex-direction: column;
      gap: 24px;
    }
  }

  /* ============================================================
     GILDED NIGHT — surface overrides + cinematic layer
     Everything below adapts hardcoded light surfaces to the dark
     ground and adds the concept's motion. The DOM and JS are
     unchanged; this is a theming + enhancement layer only.
     ============================================================ */

  /* ---- Atmosphere: WebGL-free canvas haze behind the whole page ---- */
  #gn-haze {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    width: 100%; height: 100%;
  }
  main, #top-nav, .site-footer { position: relative; z-index: 1; }

  /* ---- Cover ---- */
  #cover {
    background:
      radial-gradient(120% 100% at 50% 0%, #17130e 0%, var(--paper-2) 45%, var(--paper) 100%);
  }
  #cover .glyph {
    color: var(--gold);
    filter: drop-shadow(0 0 16px rgba(224,165,82,0.45));
  }
  #cover h1 { color: var(--gold-lt); text-shadow: 0 0 30px rgba(198,161,91,0.22); }
  .gold-rule::after { background: var(--paper); }
  .enter-btn {
    color: var(--paper);
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--gold) 55%, var(--gold-dp) 100%);
    border-color: var(--gold);
  }
  .enter-btn:hover { color: var(--paper); box-shadow: 0 0 26px rgba(198,161,91,0.45); }
  #cover-email {
    background: rgba(20,17,16,0.7);
    color: var(--ink);
  }
  #cover-email:focus { background: rgba(20,17,16,0.9); box-shadow: 0 0 12px rgba(198,161,91,0.3); }

  /* ---- Nav ---- */
  #top-nav {
    background: rgba(11, 9, 8, 0.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
  }
  .nav-link-btn {
    color: var(--gold-lt);
    background: rgba(198,161,91,0.06);
    box-shadow: none;
  }
  .nav-link-btn:hover {
    background: var(--gold);
    color: var(--paper);
    border-color: var(--gold);
    box-shadow: 0 6px 18px rgba(198,161,91,0.25);
  }

  /* ---- Hero: the animated gold sheen already reads on dark ---- */
  #hero h1 .gold-glow {
    background: linear-gradient(90deg, var(--gold-dp) 0%, var(--gold-lt) 22%, #fff8e6 50%, var(--gold-lt) 78%, var(--gold-dp) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* ---- Gates as mihrab arches ---- */
  .gate-panel {
    background:
      linear-gradient(180deg, rgba(198,161,91,0.05) 0%, rgba(20,17,16,0.35) 100%),
      var(--paper-2);
    border-top: none;
    border-radius: 0 0 4px 4px;
  }
  .gate-panel:nth-child(odd) {
    background:
      linear-gradient(180deg, rgba(198,161,91,0.07) 0%, rgba(20,17,16,0.4) 100%),
      var(--paper-2);
  }
  /* arch crown drawn above each panel */
  .gate-panel::after {
    content: ""; position: absolute; left: -1px; right: -1px; top: -58px; height: 58px;
    border: 1px solid var(--rule); border-bottom: none;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
    pointer-events: none;
  }
  .gate { margin-top: 84px; }  /* room for the arch crowns */
  .gate-panel:hover::after,
  .gate-panel:focus::after,
  .gate-panel:focus-within::after {
    border-color: var(--gold);
    box-shadow: 0 0 28px rgba(198,161,91,0.22);
  }
  .gate-panel:hover,
  .gate-panel:focus,
  .gate-panel:focus-within {
    box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  }
  .gate-nuggets li {
    background: var(--gn-surface);
    box-shadow: none;
  }

  /* Eight-fold star divider drawn under the gates */
  .gn-star {
    display: block; margin: 64px auto 0;
    width: clamp(58px, 8vw, 92px); height: auto; color: var(--gold);
  }
  .gn-star path { fill: none; stroke: var(--gold); stroke-width: 1; }
  @media (prefers-reduced-motion: reduce) {
    .gn-star path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  }

  /* ---- Verse illumination: words warm from ember to lit gold on scrub ---- */
  .gn-verse .gn-vw { color: var(--ink); transition: color 0.1s linear; }
  .gn-verse .gn-vw.lit { color: var(--gold-lt); text-shadow: 0 0 18px rgba(224,165,82,0.35); }
  @media (prefers-reduced-motion: reduce) {
    .gn-verse .gn-vw { color: var(--ink); }
  }

  /* ---- Chart overlay + medallions ---- */
  #chart-overlay {
    background:
      radial-gradient(130% 100% at 50% -10%, #17130e 0%, var(--paper-2) 50%, var(--paper) 100%);
  }
  .chart-bar { background: rgba(11,9,8,0.72); }
  .chart-ctl.active { color: var(--paper); }
  .chart-ctl-close:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
  .medallion {
    background: radial-gradient(120% 120% at 50% 18%, #241d13, var(--paper-2));
    box-shadow: 0 10px 26px -12px rgba(0,0,0,0.7), inset 0 0 0 4px rgba(198,161,91,0.12), inset 0 0 0 5px var(--rule);
  }
  .chart-node:hover .medallion { box-shadow: 0 16px 34px -14px rgba(0,0,0,0.8), inset 0 0 0 4px rgba(198,161,91,0.18), inset 0 0 0 5px var(--gold-lt); }
  #chart-core .medallion.seal {
    background: radial-gradient(120% 120% at 50% 18%, #2a2113, #17120a);
    box-shadow: 0 14px 34px -14px rgba(0,0,0,0.8), inset 0 0 0 5px rgba(198,161,91,0.16), inset 0 0 0 6px var(--gold);
  }
  .theme-node.focused .medallion { box-shadow: 0 18px 40px -14px rgba(0,0,0,0.85), inset 0 0 0 5px rgba(198,161,91,0.18), inset 0 0 0 6px var(--gold); }
  .medallion.concept-med { background: radial-gradient(120% 120% at 50% 18%, #241d13, var(--paper)); }
  .concept-node.sel .medallion { box-shadow: 0 16px 32px -12px rgba(0,0,0,0.85), inset 0 0 0 4px rgba(198,161,91,0.18), inset 0 0 0 5px var(--gold); }
  .m-badge { color: var(--paper); border-color: var(--paper); }
  .chart-tlabel {
    background: radial-gradient(120% 120% at 50% 18%, #241d13, var(--paper-2));
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(198,161,91,0.16), inset 0 0 0 3px var(--rule);
  }
  .chart-tlabel.active { color: var(--paper); }
  .chart-tlabel::after { background: #17130e; color: var(--ink); }
  #chart-drawer { background: rgba(13, 11, 9, 0.97); }
  .dr-close:hover, .dr-vid:hover { color: inherit; }
  .dr-close:hover { color: var(--paper); }

  /* ---- Letters, philosophy, SOP, study chips ---- */
  .letter-card { background: var(--gn-surface-2); }
  .letter-card:hover, .letter-card:focus-visible { box-shadow: 0 22px 44px -20px rgba(0,0,0,0.6); }
  /* Paywall: the cream chip grounds that read as paper by day are opaque
     patches at night, so they take the dark surface token like every other
     inset on this page. */
  .letter-card--locked:hover, .letter-card--locked:focus-visible { box-shadow: 0 14px 30px -18px rgba(0,0,0,0.6); }
  .access-input { background: var(--gn-surface-2); }
  #access-modal .modal-content { box-shadow: 0 40px 90px rgba(0,0,0,0.7); }
  .access-msg--error { background: rgba(216,69,95,0.10); border-color: rgba(216,69,95,0.32); }
  .philosophy-card { background: var(--gn-surface); }
  .philosophy-card::before { background: var(--paper); }
  .sop-card { background: var(--gn-surface-2); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
  .sop-step { background: var(--gn-surface); }
  .sop-step:hover, .sop-step:focus-visible { background: rgba(198,161,91,0.08); }
  .sop-step.active { background: radial-gradient(120% 120% at 50% 18%, #241d13, var(--paper-2)); }
  .sop-badge { color: var(--paper); }
  .abjad-table th { background: rgba(198,161,91,0.06); }
  .abjad-table tr:hover { background: rgba(198,161,91,0.05); }
  .study-with-us-badge { background: var(--gn-surface); }
  .study-with-us-badge:hover { background: rgba(198,161,91,0.08); }

  /* ---- Modals ---- */
  .modal-overlay { background: rgba(6, 4, 3, 0.72); }
  #pdf-modal .modal-content { box-shadow: 0 40px 90px rgba(0,0,0,0.7); }
  .modal-body { background: #17130e; }
  .modal-close:hover { color: var(--paper); }
  .video-modal-caption { background: var(--paper-2); }

  /* ---- Alphabet flashcard + quiz (shared arabicLearning.css) night skin ---- */
  .quiz-modal-card {
    background: var(--paper-2);
    border-color: var(--gold);
    color: var(--ink);
    box-shadow: 0 40px 90px rgba(0,0,0,0.7);
  }
  .card-front, .card-back {
    background: linear-gradient(160deg, #241d13 0%, var(--paper) 100%);
    border-color: var(--rule-st);
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  }
  .form-glyph { background: var(--gn-surface); }
  .quiz-mode-select-btn, .quiz-option-btn { background: var(--gn-surface); color: var(--ink); }
  .quiz-mode-select-btn:hover, .quiz-option-btn:not(:disabled):hover { background: rgba(198,161,91,0.10); }
  .quiz-option-btn.correct { background: #22301c; border-color: #6f8a4e; color: #bcd79a; }
  .quiz-option-btn.wrong   { background: #34211a; border-color: #a05a3e; color: #e0a58c; }
  .gold-cta-btn { color: var(--paper); }
  .speak-icon-btn, .deck-controls button { background: var(--gn-surface); }
  .speak-icon-btn:hover, .deck-controls button:hover { background: var(--gold); color: var(--paper); }

  /* ============================================================
     THEME TOGGLE — fixed cream pill, top right
     ============================================================ */
  #theme-toggle {
    position: fixed;
    top: 14px;
    right: 16px;
    /* above the cover (9000) so it works on the opening screen, but below the
       chart overlay (20000) and modals (30000) which own the whole viewport */
    z-index: 9500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    font-family: var(--display);
    font-size: var(--fs-200);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    color: #4a3c22;
    background: linear-gradient(160deg, #fdf8ec 0%, #f3e9d2 100%);
    border: 1px solid var(--gold);
    border-radius: 999px;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.55);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease, color 0.3s ease;
  }
  #theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(0,0,0,0.6);
  }
  #theme-toggle .tt-icon { font-size: var(--fs-300); line-height: 1; }
  #theme-toggle .tt-label { display: inline-block; }
  :root[data-theme="light"] #theme-toggle {
    color: #f6efe0;
    background: linear-gradient(160deg, #3a2f1c 0%, #241d13 100%);
    border-color: var(--gold-dp);
    box-shadow: 0 6px 18px -8px rgba(120,95,40,0.45);
  }
  @media (prefers-reduced-motion: reduce) {
    #theme-toggle { transition: none; }
    #theme-toggle:hover { transform: none; }
  }
  /* full-viewport surfaces own the screen — don't float the pill over them */
  html.modal-open #theme-toggle { display: none; }
  @media (max-width: 600px) {
    #theme-toggle { padding: 0 12px; letter-spacing: 1.2px; }
    #theme-toggle .tt-label { display: none; }
  }

  /* ============================================================
     CREAM DAY — surface overrides
     Undoes the dark-ground assumptions of the Gilded Night block
     above. Token-driven rules need nothing here; only the rules
     with hardcoded dark colors are restated.
     ============================================================ */
  :root[data-theme="light"] body {
    background:
      radial-gradient(120% 90% at 50% -10%, #fbf6ea 0%, var(--paper) 45%, var(--paper-2) 100%);
  }
  :root[data-theme="light"] body::before {
    background:
      radial-gradient(circle at 18% 22%, rgba(156,124,51,0.05), transparent 40%),
      radial-gradient(circle at 82% 78%, rgba(156,124,51,0.05), transparent 42%);
    mix-blend-mode: multiply;
  }
  :root[data-theme="light"] ::selection { background: rgba(156,124,51,0.22); color: inherit; }
  :root[data-theme="light"] .gold-heart-logo { filter: drop-shadow(0 2px 4px rgba(120,95,40,0.25)); }

  /* the canvas haze is a night effect — hide it by day */
  :root[data-theme="light"] #gn-haze { display: none; }

  /* ---- Cover ---- */
  :root[data-theme="light"] #cover {
    background:
      radial-gradient(120% 100% at 50% 0%, #fbf6ea 0%, var(--paper) 45%, var(--paper-2) 100%);
  }
  :root[data-theme="light"] #cover .glyph { filter: drop-shadow(0 2px 6px rgba(120,95,40,0.30)); }
  :root[data-theme="light"] #cover h1 { color: var(--gold-dp); text-shadow: none; }
  :root[data-theme="light"] .enter-btn:hover { box-shadow: 0 6px 20px rgba(156,124,51,0.35); }
  :root[data-theme="light"] #cover-email {
    background: rgba(255,253,247,0.85);
    color: var(--ink);
  }
  :root[data-theme="light"] #cover-email:focus {
    background: #fffdf7;
    box-shadow: 0 0 10px rgba(156,124,51,0.28);
  }

  /* ---- Nav ---- */
  :root[data-theme="light"] #top-nav { background: rgba(246, 239, 224, 0.86); }
  :root[data-theme="light"] .nav-link-btn {
    color: var(--gold-dp);
    background: rgba(120,95,40,0.06);
  }
  :root[data-theme="light"] .nav-link-btn:hover { box-shadow: 0 6px 18px rgba(156,124,51,0.22); }

  /* ---- Hero ---- */
  :root[data-theme="light"] #hero h1 .gold-glow {
    background: linear-gradient(90deg, var(--gold-dp) 0%, var(--gold) 22%, var(--gold-lt) 50%, var(--gold) 78%, var(--gold-dp) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* ---- Gates ---- */
  :root[data-theme="light"] .gate-panel {
    background:
      linear-gradient(180deg, rgba(255,253,247,0.9) 0%, rgba(239,230,210,0.6) 100%),
      var(--paper);
  }
  :root[data-theme="light"] .gate-panel:nth-child(odd) {
    background:
      linear-gradient(180deg, rgba(255,253,247,0.95) 0%, rgba(239,230,210,0.7) 100%),
      var(--paper);
  }
  :root[data-theme="light"] .gate-panel:hover::after,
  :root[data-theme="light"] .gate-panel:focus::after,
  :root[data-theme="light"] .gate-panel:focus-within::after {
    box-shadow: 0 0 22px rgba(156,124,51,0.20);
  }
  :root[data-theme="light"] .gate-panel:hover,
  :root[data-theme="light"] .gate-panel:focus,
  :root[data-theme="light"] .gate-panel:focus-within {
    box-shadow: 0 18px 40px -22px rgba(120,95,40,0.45);
  }

  /* ---- Verse illumination ---- */
  :root[data-theme="light"] .gn-verse .gn-vw.lit {
    color: var(--gold-dp);
    text-shadow: 0 0 12px rgba(156,124,51,0.22);
  }

  /* ---- Chart overlay + medallions ---- */
  :root[data-theme="light"] #chart-overlay {
    background:
      radial-gradient(130% 100% at 50% -10%, #fbf6ea 0%, var(--paper) 50%, var(--paper-2) 100%);
  }
  :root[data-theme="light"] .chart-bar { background: rgba(246,239,224,0.78); }
  :root[data-theme="light"] .medallion {
    background: radial-gradient(120% 120% at 50% 18%, #fffdf7, var(--paper-2));
    box-shadow: 0 10px 26px -14px rgba(120,95,40,0.45), inset 0 0 0 4px rgba(156,124,51,0.10), inset 0 0 0 5px var(--rule);
  }
  :root[data-theme="light"] .chart-node:hover .medallion {
    box-shadow: 0 16px 34px -16px rgba(120,95,40,0.5), inset 0 0 0 4px rgba(156,124,51,0.16), inset 0 0 0 5px var(--gold);
  }
  :root[data-theme="light"] #chart-core .medallion.seal {
    background: radial-gradient(120% 120% at 50% 18%, #fffdf7, #f0e6cf);
    box-shadow: 0 14px 34px -16px rgba(120,95,40,0.5), inset 0 0 0 5px rgba(156,124,51,0.14), inset 0 0 0 6px var(--gold);
  }
  :root[data-theme="light"] .theme-node.focused .medallion {
    box-shadow: 0 18px 40px -18px rgba(120,95,40,0.55), inset 0 0 0 5px rgba(156,124,51,0.16), inset 0 0 0 6px var(--gold);
  }
  :root[data-theme="light"] .medallion.concept-med {
    background: radial-gradient(120% 120% at 50% 18%, #fffdf7, var(--paper));
  }
  :root[data-theme="light"] .concept-node.sel .medallion {
    box-shadow: 0 16px 32px -16px rgba(120,95,40,0.55), inset 0 0 0 4px rgba(156,124,51,0.16), inset 0 0 0 5px var(--gold);
  }
  :root[data-theme="light"] .chart-tlabel {
    background: radial-gradient(120% 120% at 50% 18%, #fffdf7, var(--paper-2));
    box-shadow: 0 4px 10px rgba(120,95,40,0.18), inset 0 0 0 2px rgba(156,124,51,0.12), inset 0 0 0 3px var(--rule);
  }
  :root[data-theme="light"] .chart-tlabel::after { background: #fffdf7; color: var(--ink); }
  :root[data-theme="light"] #chart-drawer { background: rgba(250, 245, 233, 0.97); }

  /* ---- Letters, philosophy, SOP, study chips ---- */
  :root[data-theme="light"] .letter-card:hover,
  :root[data-theme="light"] .letter-card:focus-visible {
    box-shadow: 0 22px 44px -24px rgba(120,95,40,0.45);
  }
  /* Paywall: a locked card lifts less, so its shadow is drawn to match rather
     than inheriting the full-height one above. */
  :root[data-theme="light"] .letter-card--locked:hover,
  :root[data-theme="light"] .letter-card--locked:focus-visible {
    box-shadow: 0 14px 30px -22px rgba(120,95,40,0.45);
  }
  :root[data-theme="light"] #access-modal .modal-content { box-shadow: 0 40px 80px rgba(40,30,10,0.28); }
  :root[data-theme="light"] .sop-card { box-shadow: 0 12px 30px rgba(120,95,40,0.14); }
  :root[data-theme="light"] .sop-step:hover,
  :root[data-theme="light"] .sop-step:focus-visible { background: rgba(120,95,40,0.08); }
  :root[data-theme="light"] .sop-step.active {
    background: radial-gradient(120% 120% at 50% 18%, #fffdf7, var(--paper-2));
  }
  :root[data-theme="light"] .abjad-table th { background: rgba(120,95,40,0.07); }
  :root[data-theme="light"] .abjad-table tr:hover { background: rgba(120,95,40,0.05); }
  :root[data-theme="light"] .study-with-us-badge:hover { background: rgba(120,95,40,0.09); }

  /* ---- Orbit figures: on cream the sun's limb wants the daylight deep gold ---- */
  :root[data-theme="light"] .om-cs2 { stop-color: var(--gold-dp); }
  :root[data-theme="light"] .om-rg0 { stop-opacity: 0.16; }
  :root[data-theme="light"] .om-rg1 { stop-opacity: 0.36; }
  :root[data-theme="light"] .om-rg2 { stop-opacity: 0.62; }

  /* ---- Modals ---- */
  :root[data-theme="light"] .modal-overlay { background: rgba(42, 35, 29, 0.55); }
  :root[data-theme="light"] #pdf-modal .modal-content { box-shadow: 0 40px 90px rgba(120,95,40,0.35); }
  :root[data-theme="light"] .modal-body { background: #fffdf7; }

  /* ---- Alphabet flashcard + quiz ---- */
  :root[data-theme="light"] .quiz-modal-card {
    background: #fffdf7;
    box-shadow: 0 40px 90px rgba(120,95,40,0.32);
  }
  :root[data-theme="light"] .card-front,
  :root[data-theme="light"] .card-back {
    background: linear-gradient(160deg, #fffdf7 0%, var(--paper) 100%);
    box-shadow: 0 8px 28px rgba(120,95,40,0.20);
  }
  :root[data-theme="light"] .quiz-mode-select-btn:hover,
  :root[data-theme="light"] .quiz-option-btn:not(:disabled):hover { background: rgba(120,95,40,0.10); }
  :root[data-theme="light"] .quiz-option-btn.correct { background: #e6f0da; border-color: #6f8a4e; color: #3c5222; }
  :root[data-theme="light"] .quiz-option-btn.wrong   { background: #f6dfd5; border-color: #a05a3e; color: #6d3220; }