:root {
    --obsidian: #161616;
    --obsidian-deep: #0F0F0F;
    --obsidian-90: #1F1F1F;
    --pine: #1C2B22;
    --pine-90: #243528;
    --olive: #3A4433;
    --eggplant: #261524;
    --eggplant-light: #341E32;
    --gold: #D4AF37;
    --gold-bright: #E8C76B;
    --gold-soft: #B89530;
    --gold-deep: #8C6F1F;
    --linen: #F5F2EB;
    --linen-bright: #FBF9F2;
    --linen-warm: #EDE7D6;
    --linen-deep: #E8E0CB;
    --platinum: #E5E2D8;
    --platinum-muted: rgba(229, 226, 216, 0.7);
    --platinum-faint: rgba(229, 226, 216, 0.42);
    --charcoal: #1A1A1A;
    --char-muted: rgba(22, 22, 22, 0.7);
    --char-faint: rgba(22, 22, 22, 0.5);
    --char-trace: rgba(22, 22, 22, 0.18);
    --font-display: 'Cinzel', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  html, body { height: 100%; }
  body {
    background: var(--linen);
    color: var(--charcoal);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-top: 84px; /* offset for fixed nav (28px padding + 56px signature) */
  }
  img { max-width: 100%; display: block; }

  /* Parchment grain over the whole page — subtle warmth, not flat */
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.44 0 0 0 0 0.12 0 0 0 0.055 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.8;
  }

  /* Reveal animation */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .reveal.in { opacity: 1; transform: none; }
  .delay-1 { transition-delay: 0.08s; }
  .delay-2 { transition-delay: 0.16s; }
  .delay-3 { transition-delay: 0.24s; }
  .delay-4 { transition-delay: 0.32s; }
  .delay-5 { transition-delay: 0.40s; }

  /* ─────────────────────────── TYPOGRAPHY UTILITIES ─────────────────────────── */
  .meta {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
  }
  .meta-muted { color: var(--char-muted); }
  .meta-faint { color: var(--char-faint); }

  /* ─────────────────────────── MASTHEAD — dark binding ─────────────────────────── */
  .masthead {
    background: var(--obsidian-deep);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    position: relative; z-index: 10;
  }
  .masthead-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 14px 56px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--platinum-muted);
  }
  .masthead-left, .masthead-right { display: flex; gap: 32px; }
  .masthead-right { justify-content: flex-end; }
  .masthead-center { color: var(--gold); letter-spacing: 0.4em; }
  .pulse {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); margin-right: 8px; vertical-align: 1px;
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); opacity: 1; }
    50% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); opacity: 0.6; }
  }

  /* ─────────────────────────── NAV — dark binding ─────────────────────────── */
  nav.top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  }
  .nav-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 14px clamp(20px, 4vw, 56px);
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(16px, 3vw, 48px);
  }
  .nav-mark {
    display: inline-flex; align-items: center;
    text-decoration: none;
    height: 56px;
    flex-shrink: 0;
  }
  .nav-mark .signature-img {
    height: 100%;
    width: auto;
    display: block;
    /* If the image is transparent or already white, this is fine.
       If you ever swap in a dark-on-transparent version, add: filter: invert(1); */
  }
  .nav-links { display: flex; gap: clamp(10px, 2vw, 32px); align-items: center; flex-wrap: nowrap; }
  .nav-links a {
    font-family: var(--font-body);
    font-size: clamp(10px, 0.95vw, 12px);
    letter-spacing: clamp(0.16em, 0.4vw, 0.3em);
    text-transform: uppercase;
    color: var(--linen);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.25s;
  }
  .nav-links a::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0;
    height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a:hover::after { transform: scaleX(1); }
  /* Clear glass-blur bubble — Free Mini-book CTA */
  .nav-links a.nav-cta {
    background: rgba(245, 242, 235, 0.08);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: var(--linen) !important;
    padding: clamp(9px, 1vw, 11px) clamp(16px, 2vw, 26px);
    font-size: clamp(9px, 0.85vw, 11px);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: clamp(0.16em, 0.4vw, 0.28em);
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 999px;
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, color 0.35s ease;
    box-shadow:
      inset 0 1px 0 rgba(245, 242, 235, 0.08),
      0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .nav-links a.nav-cta::after { display: none; }
  .nav-links a.nav-cta:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: var(--gold);
    color: var(--gold) !important;
    transform: translateY(-2px) scale(1.04);
    box-shadow:
      inset 0 1px 0 rgba(245, 242, 235, 0.12),
      0 6px 20px rgba(212, 175, 55, 0.4),
      0 0 0 1px rgba(212, 175, 55, 0.15);
  }
  .nav-section-num {
    color: var(--gold); font-size: 9px; margin-right: 4px;
    letter-spacing: 0.2em; opacity: 0.75;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     THE BRIGHT PAGES (Aged Linen primary)
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────── HERO ─────────────────────────── */
  .hero {
    position: relative;
    padding: 56px 0 96px;
    overflow: hidden;
    background: var(--linen);
  }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 75% 0%, rgba(140, 111, 31, 0.10) 0%, transparent 55%),
      radial-gradient(ellipse at 0% 100%, rgba(28, 43, 34, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
  }
  /* Translucent linen blur layer covering the LOWER portion of the hero — same wash
     as the rest of the page. Top edge soft-fades in just below the sub text so the
     constellation stays clear behind headline + sub, but the lede paragraphs and
     everything below sit on the blur, continuing seamlessly into the next section. */
  .hero::after {
    content: ""; position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    /* Was a FLAT rgba(...,0.22). It faded in via the mask but ended abruptly at the
       hero's bottom edge, where the frontispiece jumps straight to 0.55 with no
       backdrop-filter at all — a visible seam in both tone and blur. Now it ramps to
       exactly 0.55 so it meets the next section's value, and the linen sections below
       carry the same blur so the treatment is continuous (the original intent). */
    background: linear-gradient(
      to bottom,
      rgba(245, 242, 235, 0.22) 0%,
      rgba(245, 242, 235, 0.38) 55%,
      rgba(245, 242, 235, 0.55) 100%
    );
    backdrop-filter: blur(5px) saturate(115%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 100%);
    pointer-events: none;
    z-index: 1;
  }
  /* Gold constellation canvas — FIXED behind entire page, with linen baked in so it always reads as the bone backdrop */
  #hero-canvas {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    background: var(--linen);
  }
  .hero-grid { position: relative; z-index: 2; }
  /* Translucent linen sections — constellation visible through them at all times.
     Dark sections (Manifesto, Reclamation, Mini Book, Footer) stay fully opaque. */
  /* .invitations and .gifts added 2026-08-04: both were fully transparent, leaving the
     bottom ~4,400px of the page (offer cards, mini-book, Q&A, Substack) sitting directly
     on the animated constellation canvas, which hurt legibility. The wash now runs
     unbroken from the frontispiece down to the footer. */
  .frontispiece, .promise, .about, .revelation, .invitations, .gifts {
    background: rgba(245, 242, 235, 0.55) !important;
    /* Same blur the hero uses, so the treatment carries unbroken past the hero's edge
       instead of stopping at it. Without this the seam reads as a hard-edged block. */
    backdrop-filter: blur(5px) saturate(115%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
    position: relative;
    z-index: 1;
  }
  .revelation { background: rgba(237, 231, 214, 0.58) !important; }
  /* HERO is fully transparent — pure constellation backdrop. Q&A keeps the linen wash. */
  .hero {
    background: transparent !important;
    position: relative;
    z-index: 1;
  }
  .qa {
    background: rgba(245, 242, 235, 0.55) !important;
    backdrop-filter: blur(5px) saturate(115%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
    position: relative;
    z-index: 1;
  }
  /* Body bg fallback (in case the canvas fails to load, the page still looks right) */
  body { background: var(--linen); }
  .hero-grid {
    max-width: 1240px; margin: 0 auto;
    padding: 0 56px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 56px;
    align-items: start;
    position: relative;
  }
  .vertical-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    height: 380px;
    display: flex; align-items: center; justify-content: center;
    border-left: 1px solid rgba(140, 111, 31, 0.5);
    margin-top: 16px;
  }
  .vertical-tag .dot { color: var(--char-faint); }

  .hero-eyebrow {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 48px;
  }
  .hero-eyebrow .num {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--gold-deep);
    font-weight: 700;
    padding-right: 16px;
    border-right: 1px solid rgba(140, 111, 31, 0.45);
  }
  .hero-eyebrow .lbl {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--char-muted);
    font-weight: 600;
  }

  .hero-headline {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: clamp(44px, 5.4vw, 84px);
    line-height: 1.0;
    letter-spacing: 0.018em;
    margin-bottom: 28px;
  }
  .hero-headline .l1, .hero-headline .l2 { display: block; }
  .hero-headline .l1-gold { color: var(--gold-deep); }
  .hero-headline .l2 {
    color: var(--gold-deep);
    margin-top: 8px;
    font-size: 0.95em;
  }
  .hero-headline .ornament {
    display: inline-block; width: 24px; height: 1px;
    background: currentColor; vertical-align: 8px;
    margin: 0 14px; opacity: 0.5;
  }

  .hero-sub {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--gold-deep);
    max-width: 640px;
    margin: 36px 0 0;
    font-weight: 600;
    padding-left: 18px;
    border-left: 1px solid var(--gold-deep);
  }

  .hero-lede {
    margin-top: 56px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--char-muted);
    max-width: 580px;
    padding: 4px 10px;
    position: relative;
    isolation: isolate;
  }
  /* Lede paragraphs no longer need their own backdrop card — the hero's ::after blur band
     now covers the entire area below the sub text, so the text already sits on a linen wash. */
  /* Adjacent lede paragraphs sit close together — only the first gets the big gap from .hero-sub above */
  .hero-lede + .hero-lede { margin-top: 8px; }

  .hero-marginalia {
    margin-top: 40px;
    padding-left: 24px;
    border-left: 2px solid var(--gold-deep);
  }
  .hero-marginalia p {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    line-height: 1.55;
    color: var(--gold-deep);
    max-width: 380px;
    font-weight: 500;
  }
  .hero-marginalia p::before { content: "❡ "; font-style: normal; }

  .hero-fig {
    margin-top: 40px;
    display: flex; gap: 28px; align-items: baseline;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--char-faint);
    font-weight: 600;
  }
  .hero-fig span:first-child { color: var(--gold-deep); }

  /* CASE FILE on light */
  .case-file {
    position: relative;
    background: var(--linen-bright);
    border: 1px solid var(--gold-deep);
    padding: 36px 32px 36px;
    box-shadow: 0 4px 0 rgba(22, 22, 22, 0.06), 0 16px 32px rgba(22, 22, 22, 0.06);
  }
  .case-file::before {
    content: ""; position: absolute;
    top: 0; left: 0; width: 36px; height: 36px;
    border-top: 1px solid var(--gold-deep);
    border-left: 1px solid var(--gold-deep);
    transform: translate(-6px, -6px);
  }
  .case-file::after {
    content: ""; position: absolute;
    bottom: 0; right: 0; width: 36px; height: 36px;
    border-bottom: 1px solid var(--gold-deep);
    border-right: 1px solid var(--gold-deep);
    transform: translate(6px, 6px);
  }
  .case-file-tag {
    position: absolute; top: -10px; left: 24px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    background: var(--linen);
    padding: 0 12px;
    line-height: 1.2;
  }
  .case-file-tag .accent { color: var(--char-faint); margin-left: 6px; }
  .cf-row {
    padding: 14px 0;
    border-bottom: 1px dotted rgba(140, 111, 31, 0.35);
  }
  .cf-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .cf-row .k {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--char-faint);
    margin-bottom: 8px;
    font-weight: 700;
  }
  .cf-row .k .ref { color: var(--gold-deep); opacity: 0.8; }
  .cf-row .v {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: 14px;
    letter-spacing: 0.06em;
  }
  .cf-list {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--char-muted);
    line-height: 1.85;
  }
  .cf-list div { display: flex; gap: 14px; align-items: baseline; }
  .cf-list .num {
    color: var(--gold-deep);
    font-weight: 700;
    width: 20px; flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .cf-stamp {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--gold-deep);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
  }

  /* ─────────────────────────── FRONTISPIECE — full-width image ─────────────────────────── */
  .frontispiece {
    background: var(--linen);
    padding: 24px 0 80px;
    position: relative;
  }
  .frontispiece-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 0 56px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 56px;
  }
  .front-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    height: 220px;
    padding-left: 18px;
    border-left: 1px solid rgba(140, 111, 31, 0.5);
  }
  .front-image {
    aspect-ratio: 21/9;
    background:
      radial-gradient(ellipse at 25% 40%, rgba(232, 199, 107, 0.18) 0%, transparent 55%),
      radial-gradient(ellipse at 75% 60%, rgba(58, 68, 51, 0.5) 0%, transparent 60%),
      linear-gradient(135deg, var(--obsidian-90) 0%, var(--pine) 50%, var(--eggplant) 100%);
    position: relative;
    border: 1px solid var(--gold-deep);
    box-shadow: 0 8px 0 rgba(22, 22, 22, 0.08), 0 24px 56px rgba(22, 22, 22, 0.1);
  }
  .front-image::before {
    content: ""; position: absolute;
    top: -1px; left: -1px; width: 36px; height: 36px;
    border-top: 1px solid var(--gold-deep);
    border-left: 1px solid var(--gold-deep);
    transform: translate(-6px, -6px);
  }
  .front-image::after {
    content: ""; position: absolute;
    bottom: -1px; right: -1px; width: 36px; height: 36px;
    border-bottom: 1px solid var(--gold-deep);
    border-right: 1px solid var(--gold-deep);
    transform: translate(6px, 6px);
  }
  .front-image-mark {
    position: absolute; top: 24px; left: 28px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
  }
  .front-image-cap {
    position: absolute; bottom: 24px; left: 28px; right: 28px;
    display: flex; justify-content: space-between;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--platinum-muted);
    font-weight: 600;
  }
  .front-image-cap em {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gold);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 500;
  }
  .front-image-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--platinum-muted);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    pointer-events: none;
  }
  .front-image-center .glyph {
    display: block;
    font-family: var(--font-display);
    font-size: 88px;
    color: rgba(212, 175, 55, 0.3);
    line-height: 1;
    margin-bottom: 18px;
    font-style: italic;
  }

  /* ─────────────────────────── SECTION FRAME ─────────────────────────── */
  .section {
    position: relative;
    padding: 120px 0;
  }
  .section-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 0 56px;
    position: relative;
  }
  .section-num {
    position: absolute;
    top: 0; left: 56px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--gold-deep);
    font-weight: 600;
    padding-top: 28px;
    border-top: 1px solid var(--gold-deep);
    min-width: 120px;
  }
  .section-num .ttl {
    display: block;
    color: var(--char-faint);
    font-family: var(--font-body);
    font-weight: 600;
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: 0.4em;
  }

  /* ─────────────────────────── §01 PROMISE — Aged Linen ─────────────────────────── */
  .promise { background: var(--linen); }
  .promise-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1.5fr;
    gap: 56px;
    padding-top: 72px;
    align-items: start;
  }
  .promise-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    height: 200px;
    padding-left: 18px;
    border-left: 1px solid rgba(140, 111, 31, 0.5);
  }
  .promise-side h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
    letter-spacing: 0.05em;
    margin-bottom: 28px;
  }
  .promise-side h2 .gold {
    color: var(--gold-deep);
    display: block;
    margin-top: 14px;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 0.62em;
    line-height: 1.3;
  }
  .promise-side .marg {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    color: var(--gold-deep);
    margin-top: 24px;
    line-height: 1.55;
    max-width: 280px;
    font-weight: 500;
  }
  .promise-side .marg::before { content: "❡ "; font-style: normal; }
  .promise-body p {
    font-size: 17px;
    line-height: 1.85;
    color: var(--char-muted);
    margin-bottom: 24px;
    max-width: 620px;
  }
  /* correction #4: the opening line reads as a heading but sat at body size (17px)
     next to a 58px drop cap, so it looked smaller than the copy beneath it. */
  .promise-body > p:first-child {
    font-size: 21px;
    line-height: 1.6;
    color: var(--obsidian);
  }
  /* correction #6: the "One Trusted Practice" turn had no styling of its own —
     .pull-line was only ever defined under .about-content, so here it rendered as
     plain body copy. Given its own treatment plus a hand-off arrow to §02. */
  .promise-turn {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid rgba(140, 111, 31, 0.35);
    max-width: 620px;
  }
  .promise-body .promise-turn .pull-line {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--gold-deep);
    font-weight: 500;
    margin: 0 0 22px;
    max-width: none;
  }
  .promise-body .chambers-lead {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 19px;
    color: var(--obsidian);
    margin: 28px 0 6px;
  }
  .chambers-arrow {
    display: block;
    width: 22px;
    margin: 0 auto;
    color: var(--gold-deep);
    opacity: 0.85;
    transition: color 0.3s ease, opacity 0.3s ease;
    animation: chambers-beckon 2.4s ease-in-out infinite;
  }
  .chambers-arrow:hover { color: var(--obsidian); opacity: 1; }
  @keyframes chambers-beckon {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .chambers-arrow { animation: none; }
  }
  /* '>' matters: p:first-child matches any p that is first in ITS parent, so once the
     turn was wrapped in .promise-turn the pull-line qualified and picked up this 58px
     drop cap on "One". Direct-child scoping keeps it on the opening paragraph only. */
  .promise-body > p:first-child::first-letter {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 58px;
    color: var(--gold-deep);
    float: left;
    line-height: 0.9;
    padding: 4px 12px 2px 0;
    margin-top: 2px;
  }
  .promise-body strong {
    color: var(--gold-deep);
    font-style: italic;
    font-family: var(--font-body);
    font-weight: 600;
  }
  /* Bulleted list inside the Burden section — editorial dossier list style */
  .promise-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 32px;
    max-width: 620px;
    border-top: 1px solid rgba(140, 111, 31, 0.35);
  }
  .promise-list li {
    padding: 14px 0 14px 28px;
    border-bottom: 1px solid rgba(140, 111, 31, 0.18);
    color: var(--char-muted);
    font-size: 16.5px;
    line-height: 1.55;
    position: relative;
  }
  .promise-list li::before {
    content: "—";
    position: absolute;
    left: 0; top: 14px;
    color: var(--gold-deep);
    font-weight: 700;
  }

  /* ─────────────────────────── §02 THE THREE LENSES — translucent linen, clinical timeline ─────────────────────────── */
  /* .lenses declares its own background here rather than joining the shared rule, so it
     needs the blur added explicitly — otherwise the Chambers section is an unblurred gap
     between .promise and .about. */
  .lenses {
    background: rgba(245, 242, 235, 0.55) !important;
    backdrop-filter: blur(5px) saturate(115%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
    position: relative;
    z-index: 1;
  }
  .lenses-head {
    padding-top: 72px;
    margin-bottom: 56px;
    max-width: 880px;
  }
  .lenses-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 18px;
  }
  .lenses-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
  }
  .lenses-head h2 .gold {
    display: block;
    margin-top: 14px;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 0.52em;
    line-height: 1.4;
    color: var(--gold-deep);
    max-width: 720px;
  }
  .lenses-intro {
    font-family: var(--font-body);
    color: var(--char-muted);
    font-size: 17px;
    line-height: 1.7;
    max-width: 720px;
    margin-top: 24px;
  }
  .lenses-list {
    position: relative;
    padding-left: 56px;
    max-width: 880px;
  }
  .lenses-list::before {
    content: ""; position: absolute;
    left: 16px; top: 12px; bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, var(--gold-deep) 0%, var(--gold-deep) 70%, transparent 100%);
  }
  .lens {
    position: relative;
    padding: 28px 0;
    border-bottom: 1px solid rgba(140, 111, 31, 0.22);
  }
  .lens:last-of-type { border-bottom: 0; }
  .lens::before {
    content: ""; position: absolute;
    left: -47px; top: 36px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--linen);
    border: 1px solid var(--gold-deep);
    transition: all 0.4s;
  }
  .lens::after {
    content: ""; position: absolute;
    left: -38px; top: 42px;
    width: 24px; height: 1px;
    background: var(--gold-deep);
    opacity: 0.5;
  }
  .lens:hover::before { background: var(--gold-deep); transform: scale(1.4); }
  .lens-num {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
  }
  .lens h3 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: 22px;
    letter-spacing: 0.05em;
    line-height: 1.25;
    margin-bottom: 14px;
  }
  .lens p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--char-muted);
    max-width: 720px;
  }

  /* ─────────────────────────── WASHINGTON ONBOARDING GATE — dark callout box on translucent linen ─────────────────────────── */
  .onboarding-gate {
    background: rgba(245, 242, 235, 0.55) !important;
    position: relative;
    z-index: 1;
    padding: 80px 0 96px;
  }
  .gate-box {
    max-width: 880px;
    margin: 0 auto;
    background: var(--obsidian);
    color: var(--platinum);
    padding: 48px 56px;
    border: 1px solid var(--gold);
    position: relative;
    box-shadow: 0 8px 0 var(--obsidian-deep), 0 24px 56px rgba(0, 0, 0, 0.4);
  }
  .gate-box::before, .gate-box::after {
    content: ""; position: absolute;
    width: 28px; height: 28px;
  }
  .gate-box::before {
    top: -1px; left: -1px;
    border-top: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
    transform: translate(-8px, -8px);
  }
  .gate-box::after {
    bottom: -1px; right: -1px;
    border-bottom: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
    transform: translate(8px, 8px);
  }
  .gate-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 18px;
    display: block;
  }
  .gate-box h3 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--gold);
    font-size: clamp(24px, 2.8vw, 36px);
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin-bottom: 24px;
  }
  .gate-box p {
    font-family: var(--font-body);
    color: var(--platinum);
    font-size: 17px;
    line-height: 1.8;
    max-width: 720px;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     THE DARK MOMENTS (Pine / Eggplant — high contrast against bright pages)
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────── MANIFESTO — DARK warrior moment ─────────────────────────── */
  .manifesto {
    background: var(--pine);
    padding: 110px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(212, 175, 55, 0.4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  }
  .manifesto::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 0% 50%, rgba(212, 175, 55, 0.12) 0%, transparent 45%),
      radial-gradient(ellipse at 100% 50%, rgba(212, 175, 55, 0.10) 0%, transparent 45%);
    pointer-events: none;
  }
  /* Subtle wing chevron motif behind the manifesto */
  .manifesto::after {
    content: ""; position: absolute;
    top: 50%; right: 56px;
    transform: translateY(-50%);
    width: 280px; height: 280px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23D4AF37' stroke-width='1' opacity='0.18'><path d='M30 50 L20 35 L25 35'/><path d='M70 50 L80 35 L75 35'/><path d='M50 32 L58 50 L50 68 L42 50 Z'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  .manifesto-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 0 56px;
    position: relative;
  }
  .manifesto-mark {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--gold);
    margin-bottom: 36px;
    /* keep typographic vars so other inline styles inherit safely */
    font-family: var(--font-display);
    color: var(--gold);
  }
  .manifesto-rule-bottom {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--gold);
    margin-top: 28px;
  }
  .manifesto blockquote {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--linen);
    font-size: clamp(32px, 4.6vw, 64px);
    line-height: 1.08;
    letter-spacing: 0.038em;
    max-width: 1100px;
    margin: 0;
  }
  .manifesto blockquote span { display: block; }
  /* correction #9: the quote replaced three short uppercase manifesto lines.
     At 64px uppercase a two-sentence quote is unreadable, so this variant drops
     to sentence-case italic serif at a calmer size while keeping the scale. */
  .manifesto blockquote.manifesto-quote {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    font-size: clamp(24px, 3.2vw, 42px);
    line-height: 1.32;
    letter-spacing: 0.005em;
    max-width: 960px;
  }
  /* .accent carries font-size:0.45em for the old uppercase manifesto, where it was a
     small counterpoint beneath huge caps. Inside the quote it must match the
     surrounding text — gold stays as emphasis, size/spacing reset. */
  .manifesto blockquote.manifesto-quote .accent {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    line-height: inherit;
    margin-top: 0;
  }
  .manifesto blockquote .accent {
    color: var(--gold);
    font-style: italic;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.45em;
    margin-top: 18px;
  }
  .manifesto-attr {
    margin-top: 40px;
    display: flex; align-items: center; gap: 18px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
  }
  .manifesto-attr::before {
    content: ""; width: 36px; height: 1px; background: var(--gold);
  }

  /* ─────────────────────────── §02 ABOUT — Aged Linen ─────────────────────────── */
  .about { background: var(--linen); position: relative; }
  .about::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 100% 0%, rgba(140, 111, 31, 0.06), transparent 50%);
    pointer-events: none;
  }
  .about-grid {
    padding-top: 72px;
    display: grid;
    grid-template-columns: 80px 1.1fr 1.4fr;
    gap: 56px;
    align-items: start;
  }
  .about-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    height: 200px;
    padding-left: 18px;
    border-left: 1px solid rgba(140, 111, 31, 0.5);
  }
  .portrait-frame {
    aspect-ratio: 4/5;
    background:
      radial-gradient(ellipse at 30% 25%, rgba(212, 175, 55, 0.12) 0%, transparent 55%),
      linear-gradient(155deg, var(--obsidian-90) 0%, var(--pine) 50%, var(--eggplant) 100%);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gold-deep);
    box-shadow: 0 4px 0 rgba(22, 22, 22, 0.08);
  }
  .portrait-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    filter: contrast(1.02) saturate(0.97);
  }
  .portrait-img + .portrait-mark { z-index: 2; }
  .portrait-frame:has(.portrait-img)::before,
  .portrait-frame:has(.portrait-img)::after { content: none; }
  .portrait-frame:has(.portrait-img) .portrait-mark { display: none; }
  .portrait-frame::after {
    content: ""; position: absolute;
    top: 10px; right: 10px;
    width: 24px; height: 24px;
    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
  }
  .portrait-mark {
    position: absolute;
    bottom: 32px; right: 32px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 120px;
    color: rgba(212, 175, 55, 0.22);
    font-weight: 600;
    line-height: 1;
  }
  .portrait-cap {
    margin-top: 16px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--char-faint);
    font-weight: 600;
    display: flex; justify-content: space-between;
  }
  .portrait-cap .em { color: var(--gold-deep); }
  .about-meta {
    margin-top: 28px;
    padding-left: 20px;
    border-left: 2px solid var(--gold-deep);
    position: relative;
  }
  .about-meta::before { content: none; }
  .about-meta p {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--gold-deep);
    font-weight: 500;
  }
  .about-meta p::before { content: "❡ "; font-style: normal; }
  .about-meta p + p { margin-top: 18px; }

  .about-content h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
    letter-spacing: 0.04em;
    margin-bottom: 32px;
  }
  .about-content h2 .it {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gold-deep);
    display: block;
    font-size: 0.75em;
    margin-top: 12px;
    line-height: 1.25;
  }
  .about-content p {
    margin-bottom: 22px;
    color: var(--char-muted);
    max-width: 620px;
    font-size: 16.5px;
  }
  .about-content p sup {
    font-size: 10px;
    color: var(--gold-deep);
    margin-left: 2px;
    font-weight: 700;
  }
  .about-content .pull-line {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gold-deep);
    font-size: 26px;
    line-height: 1.35;
    margin: 36px 0 !important;
    font-weight: 600;
    padding-left: 24px;
    border-left: 2px solid var(--gold-deep);
  }
  .about-cta {
    margin-top: 36px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-deep);
    font-weight: 700;
    transition: color 0.3s, border-color 0.3s, gap 0.3s;
  }
  .about-cta:hover { color: var(--obsidian); border-color: var(--obsidian); gap: 22px; }
  .about-cta .arr { font-family: var(--font-body); font-style: italic; font-size: 14px; }
  .endnotes {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid rgba(140, 111, 31, 0.35);
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 16px;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.7;
    color: var(--char-faint);
    font-style: italic;
  }
  .endnotes .sup {
    font-style: normal;
    color: var(--gold-deep);
    font-size: 10px;
    letter-spacing: 0.2em;
    font-weight: 700;
  }

  /* ─────────────────────────── §03 PATHS — Aged Linen with light cards ─────────────────────────── */
  .paths { background: var(--linen); }
  .paths-head {
    padding-top: 72px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 56px;
    margin-bottom: 72px;
    position: relative;
  }
  .paths-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    height: 200px;
    padding-left: 18px;
    border-left: 1px solid rgba(140, 111, 31, 0.5);
  }
  .paths-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: 0.04em;
    max-width: 900px;
  }
  .paths-head h2 .it {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gold-deep);
    display: block;
    font-size: 0.7em;
    margin-top: 12px;
  }
  .paths-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 56px;
    position: relative;
  }
  .path-card {
    background: var(--linen-bright);
    border: 1px solid var(--gold-deep);
    padding: 56px 48px;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s;
    box-shadow: 0 4px 0 rgba(22, 22, 22, 0.05), 0 16px 32px rgba(22, 22, 22, 0.05);
  }
  .path-card::before {
    content: ""; position: absolute;
    top: -1px; left: -1px;
    width: 40px; height: 40px;
    border-top: 1px solid var(--gold-deep);
    border-left: 1px solid var(--gold-deep);
    transform: translate(-6px, -6px);
  }
  .path-card:hover { transform: translateY(-4px); box-shadow: 0 8px 0 rgba(22, 22, 22, 0.06), 0 24px 56px rgba(22, 22, 22, 0.08); }
  .path-fig {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 28px;
  }
  .path-fig .roman {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.04em;
    color: var(--gold-deep);
    font-weight: 500;
  }
  .path-card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: 26px;
    line-height: 1.18;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .path-card h3 .it {
    display: block;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    color: var(--gold-deep);
    text-transform: none;
    letter-spacing: 0;
    font-size: 22px;
    margin-top: 8px;
    line-height: 1.3;
  }
  .path-card > p { color: var(--char-muted); margin: 28px 0; font-size: 15px; line-height: 1.75; }
  .path-card ul {
    list-style: none; padding: 0;
    margin: 28px 0;
    border-top: 1px solid rgba(140, 111, 31, 0.35);
  }
  .path-card li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(140, 111, 31, 0.25);
    font-size: 14px;
    color: var(--char-muted);
    display: flex; align-items: baseline; gap: 18px;
  }
  .path-card li .ix {
    font-family: var(--font-display);
    color: var(--gold-deep);
    font-size: 9px;
    letter-spacing: 0.2em;
    font-weight: 700;
    flex-shrink: 0; width: 28px;
  }
  .path-card .cta {
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-deep);
    font-weight: 700;
    transition: color 0.3s, border-color 0.3s, gap 0.3s;
  }
  .path-card .cta:hover { color: var(--obsidian); border-color: var(--obsidian); gap: 22px; }
  .path-card .cta .arr { font-family: var(--font-body); font-style: italic; font-size: 14px; }

  /* ─────────────────────────── NATURE BAND — Puget Sound atmospheric transition ─────────────────────────── */
  /* Per Amy's imagery spec category #2: dark mossy evergreen, mist over water, gold flecks on dark mirror */
  .nature-band {
    position: relative;
    height: 320px;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 30% 40%, rgba(212, 175, 55, 0.18) 0%, transparent 30%),
      radial-gradient(ellipse at 70% 70%, rgba(28, 43, 34, 0.6) 0%, transparent 50%),
      linear-gradient(180deg, var(--obsidian-deep) 0%, var(--pine) 50%, var(--obsidian) 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  }
  /* Slot for actual nature image — drop in via background-image or <img> tag */
  .nature-band .nature-image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center center;
    /* Add: background-image: url('puget-sound-mist.jpg'); */
  }
  .nature-band::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(180deg, transparent 0%, transparent 40%, rgba(15, 15, 15, 0.4) 100%);
    pointer-events: none;
  }
  .nature-band-inner {
    position: absolute; bottom: 32px; left: 56px; right: 56px;
    max-width: 1440px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: flex-end;
    z-index: 2;
  }
  .nature-band .meta {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
  }
  .nature-band .quote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    color: var(--platinum-muted);
    max-width: 480px;
    text-align: right;
  }
  .nature-band-mark {
    position: absolute; top: 24px; left: 56px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    z-index: 2;
  }

  /* RELATIONAL ART image slots — for Mini Book + Q&A (Amy spec category #4) */
  .relational-art {
    aspect-ratio: 16/10;
    position: relative;
    background:
      radial-gradient(ellipse at 35% 50%, rgba(232, 199, 107, 0.12) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 30%, rgba(38, 21, 36, 0.45) 0%, transparent 55%),
      linear-gradient(135deg, var(--eggplant) 0%, var(--pine) 60%, var(--obsidian-90) 100%);
    border: 1px solid var(--gold-deep);
    overflow: hidden;
    margin-bottom: 28px;
  }
  .relational-art::before {
    content: ""; position: absolute;
    top: -1px; left: -1px;
    width: 28px; height: 28px;
    border-top: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
    transform: translate(-5px, -5px);
  }
  .relational-art .label {
    position: absolute; top: 16px; left: 20px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    z-index: 2;
  }
  .relational-art .center-note {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--platinum-faint);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    padding: 0 20px;
    line-height: 1.7;
  }
  .relational-art .center-note .glyph {
    font-family: var(--font-display);
    font-size: 56px;
    color: rgba(212, 175, 55, 0.28);
    font-style: italic;
    margin-bottom: 8px;
  }

  /* ─────────────────────────── §04 REVELATION — Aged Linen Deep (slightly warmer for differentiation) ─────────────────────────── */
  .revelation {
    background: var(--linen-warm);
    border-top: 1px solid var(--gold-deep);
    border-bottom: 1px solid var(--gold-deep);
    position: relative;
  }
  .rev-head {
    padding-top: 72px;
    display: grid;
    grid-template-columns: 80px 1.2fr 1fr;
    gap: 56px;
    align-items: start;
    position: relative;
    margin-bottom: 72px;
  }
  .rev-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    height: 220px;
    padding-left: 18px;
    border-left: 1px solid var(--gold-deep);
  }
  .rev-stamp {
    align-self: start;
    justify-self: end;
    border: 1px solid var(--gold-deep);
    padding: 12px 18px;
    text-align: center;
    transform: rotate(-2deg);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--gold-deep);
    font-weight: 700;
    background: var(--linen-bright);
  }
  .rev-stamp .ln {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--char-muted);
    font-weight: 500;
  }
  .rev-headline {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.05;
    letter-spacing: 0.038em;
  }
  .rev-headline .it {
    display: block;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gold-deep);
    font-size: 0.65em;
    margin-top: 14px;
    line-height: 1.3;
  }
  .rev-grid {
    display: grid;
    grid-template-columns: 80px 1.2fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .rev-body p {
    color: var(--char-muted);
    margin-bottom: 22px;
    font-size: 16.5px;
    line-height: 1.85;
    max-width: 580px;
  }
  .rev-body p em {
    font-style: italic;
    color: var(--gold-deep);
    font-weight: 600;
  }
  .rev-includes {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--gold-deep);
    max-width: 580px;
  }
  .rev-includes .lbl {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 20px;
  }
  .rev-includes ul { list-style: none; padding: 0; }
  .rev-includes li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dotted rgba(140, 111, 31, 0.4);
    font-size: 14px;
    color: var(--char-muted);
  }
  .rev-includes li .ix {
    font-family: var(--font-display);
    color: var(--gold-deep);
    font-size: 9px;
    letter-spacing: 0.2em;
    font-weight: 700;
  }
  .rev-cta {
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 36px;
    padding: 18px 36px;
    background: var(--obsidian);
    color: var(--linen);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--obsidian);
    transition: all 0.3s ease;
  }
  .rev-cta:hover { background: var(--gold-deep); border-color: var(--gold-deep); gap: 22px; }
  .rev-cta .arr { font-family: var(--font-body); font-style: italic; font-size: 14px; }

  /* BIOMARKER PANEL */
  .biomarker-panel {
    background: var(--linen-bright);
    border: 1px solid var(--gold-deep);
    padding: 36px 32px;
    position: relative;
    box-shadow: 0 4px 0 rgba(22, 22, 22, 0.08), 0 14px 28px rgba(22, 22, 22, 0.06);
  }
  .biomarker-panel::before {
    content: ""; position: absolute;
    top: -1px; left: -1px;
    width: 32px; height: 32px;
    border-top: 1px solid var(--gold-deep);
    border-left: 1px solid var(--gold-deep);
    transform: translate(-5px, -5px);
  }
  .bm-tag {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 24px;
  }
  .bm-tag .ref { color: var(--char-faint); }
  .biomarker-panel h3 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: 22px;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-bottom: 6px;
  }
  .biomarker-panel .sub {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    color: var(--char-muted);
    margin-bottom: 24px;
  }
  .bm-grid {
    border-top: 1px solid var(--gold-deep);
  }
  .bm-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(22, 22, 22, 0.1);
    transition: padding 0.3s, background 0.3s;
  }
  .bm-row:hover { padding-left: 8px; background: rgba(140, 111, 31, 0.05); }
  .bm-row .ix {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--gold-deep);
    font-weight: 700;
  }
  .bm-row .k {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--char-muted);
    font-weight: 600;
  }
  .bm-row .v {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    padding: 4px 8px;
    border: 1px solid rgba(140, 111, 31, 0.4);
  }
  .bm-foot {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(22, 22, 22, 0.18);
    display: flex; justify-content: space-between;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--char-faint);
    font-weight: 600;
  }
  .bm-foot .signature {
    font-family: var(--font-display);
    color: var(--gold-deep);
    font-weight: 600;
  }

  /* ─────────────────────────── §05 RECLAMATION — DARK Eggplant (intimate descent) ─────────────────────────── */
  .reclamation {
    background: var(--eggplant);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(212, 175, 55, 0.4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  }
  .reclamation::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(212, 175, 55, 0.10), transparent 50%);
    pointer-events: none;
  }
  .reclamation .section-num { color: var(--gold); border-color: rgba(212, 175, 55, 0.5); }
  .reclamation .section-num .ttl { color: var(--platinum-muted); }
  .recl-grid {
    padding-top: 72px;
    display: grid;
    grid-template-columns: 80px 1.1fr 1.4fr;
    gap: 56px;
    align-items: start;
    position: relative;
  }
  .recl-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    height: 220px;
    padding-left: 18px;
    border-left: 1px solid rgba(212, 175, 55, 0.5);
  }
  .recl-side .lbl {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 20px;
  }
  .recl-side h2 {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    color: var(--gold);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    margin-bottom: 28px;
    letter-spacing: -0.005em;
  }
  .recl-side p {
    color: var(--platinum-muted);
    margin-bottom: 22px;
    font-size: 17px;
    line-height: 1.85;
    max-width: 480px;
  }
  .recl-scarcity {
    margin-top: 36px;
    padding: 24px 28px;
    background: rgba(212, 175, 55, 0.08);
    border-left: 2px solid var(--gold);
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gold);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
  }
  .recl-cta {
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 36px;
    padding: 18px 36px;
    background: var(--gold);
    color: var(--eggplant);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s;
  }
  .recl-cta:hover { background: var(--gold-bright); gap: 22px; }
  .recl-cta .arr { font-family: var(--font-body); font-style: italic; font-size: 14px; }
  .phases {
    position: relative;
    padding-left: 56px;
  }
  .phases::before {
    content: ""; position: absolute;
    left: 16px; top: 12px; bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 70%, transparent 100%);
  }
  .phase {
    position: relative;
    padding: 24px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  }
  .phase:last-of-type { border-bottom: 0; }
  .phase::before {
    content: ""; position: absolute;
    left: -47px; top: 32px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--eggplant);
    border: 1px solid var(--gold);
    transition: all 0.4s;
  }
  .phase::after {
    content: ""; position: absolute;
    left: -38px; top: 38px;
    width: 24px; height: 1px;
    background: var(--gold);
    opacity: 0.5;
  }
  .phase:hover::before { background: var(--gold); transform: scale(1.4); }
  .phase-num {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 8px;
  }
  .phase-num .duration {
    color: var(--platinum-faint);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 9px;
  }
  .phase h4 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--linen);
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .phase p {
    font-size: 14px;
    color: var(--platinum-muted);
    line-height: 1.65;
    max-width: 480px;
  }
  .recl-also {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(212, 175, 55, 0.35);
  }
  .recl-also .lbl {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 18px;
  }
  .recl-also ul { list-style: none; padding: 0; }
  .recl-also li {
    padding: 12px 0;
    border-bottom: 1px dotted rgba(212, 175, 55, 0.25);
    font-size: 14px;
    color: var(--platinum-muted);
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: baseline;
  }
  .recl-also li .ix {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--gold);
    font-weight: 700;
  }

  /* ─────────────────────────── §06 MINI BOOK — DARK Eggplant continuing intimate moment, with bright LINEN sealed envelope card popping ─────────────────────────── */
  .mini-book {
    background: var(--eggplant);
    position: relative;
    overflow: hidden;
  }
  .mini-book::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(38, 21, 36, 0.4), transparent 65%),
      radial-gradient(ellipse at 30% 0%, rgba(212, 175, 55, 0.06), transparent 50%);
    pointer-events: none;
  }
  .mini-book .section-num { color: var(--gold); border-color: rgba(212, 175, 55, 0.5); }
  .mini-book .section-num .ttl { color: var(--platinum-muted); }
  .mini-frame {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 72px 56px;
    background: var(--linen);
    color: var(--charcoal);
    border: 1px solid var(--gold);
    position: relative;
    text-align: center;
    box-shadow: 0 12px 0 var(--obsidian-deep), 0 32px 64px rgba(0,0,0,0.5);
  }
  .mini-frame::before, .mini-frame::after {
    content: ""; position: absolute;
    width: 36px; height: 36px;
  }
  .mini-frame::before {
    top: -1px; left: -1px;
    border-top: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
    transform: translate(-8px, -8px);
  }
  .mini-frame::after {
    bottom: -1px; right: -1px;
    border-bottom: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
    transform: translate(8px, 8px);
  }
  .mini-frame .parchment-grain {
    position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.44 0 0 0 0 0.12 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.8;
  }
  .wax-seal {
    width: 84px; height: 84px;
    margin: -56px auto 32px;
    display: block;
    filter: drop-shadow(0 8px 20px rgba(58, 21, 33, 0.6));
    position: relative; z-index: 2;
  }
  .mini-meta {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 18px;
    display: flex; justify-content: center; gap: 16px;
    position: relative; z-index: 2;
  }
  .mini-meta .sep { color: var(--char-faint); }
  /* correction #13: visible "Gifts for the Journey" title beneath the PNW band.
     The section only had the small vertical §05 side-label before. */
  .gifts-head {
    text-align: center;
    margin: 0 auto 56px;
    max-width: 900px;
  }
  .gifts-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    /* --obsidian, NOT --linen. The section carries data-dark="true", but that attribute
       is never referenced in any CSS or JS — it renders on the light linen body, so
       linen text was invisible against it. */
    color: var(--obsidian);
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: 0.05em;
    margin: 0;
  }
  .mini-frame h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    position: relative; z-index: 2;
  }
  .mini-frame h2 .it {
    display: block;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gold-deep);
    font-size: 0.7em;
    margin-top: 12px;
  }
  .mini-frame p {
    max-width: 540px;
    margin: 0 auto 36px;
    color: var(--char-muted);
    font-size: 16px;
    line-height: 1.8;
    position: relative; z-index: 2;
  }
  .opt-in {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    border: 1px solid var(--gold-deep);
    background: rgba(251, 249, 242, 0.7);
    position: relative; z-index: 2;
  }
  .opt-in input {
    flex: 1; background: transparent; border: 0;
    padding: 18px 22px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--obsidian);
    outline: none;
    letter-spacing: 0.02em;
  }
  .opt-in input::placeholder { color: var(--char-faint); }
  .opt-in button {
    background: var(--obsidian);
    border: 0;
    color: var(--linen);
    padding: 0 32px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
  }
  .opt-in button:hover { background: var(--gold-deep); }
  .mini-foot {
    margin-top: 24px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--char-faint);
    font-weight: 600;
    position: relative; z-index: 2;
  }

  /* ─────────────────────────── §07 Q&A — Aged Linen ─────────────────────────── */
  .qa { background: var(--linen); position: relative; }
  .qa-grid {
    padding-top: 72px;
    display: grid;
    grid-template-columns: 80px 1fr 1.3fr;
    gap: 56px;
    align-items: start;
  }
  .qa-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    height: 200px;
    padding-left: 18px;
    border-left: 1px solid rgba(140, 111, 31, 0.5);
  }
  .qa-side h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--obsidian);
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.1;
    letter-spacing: 0.04em;
  }
  .qa-side h2 .it {
    display: block;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gold-deep);
    font-size: 0.65em;
    margin-top: 12px;
    line-height: 1.3;
  }
  .qa-main p {
    color: var(--char-muted);
    margin-bottom: 24px;
    font-size: 17px;
    line-height: 1.85;
    max-width: 560px;
  }
  .qa-detail {
    margin: 28px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--gold-deep);
    border-bottom: 1px solid var(--gold-deep);
    max-width: 600px;
  }
  .qa-detail div {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--char-muted);
    font-weight: 600;
  }
  .qa-detail div strong {
    display: block;
    color: var(--gold-deep);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-weight: 500;
  }
  .qa-cta {
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 24px;
    padding: 18px 36px;
    border: 1px solid var(--gold-deep);
    color: var(--gold-deep);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s;
  }
  .qa-cta:hover { background: var(--obsidian); color: var(--linen); border-color: var(--obsidian); gap: 22px; }
  .qa-cta .arr { font-family: var(--font-body); font-style: italic; font-size: 14px; }

  /* ─────────────────────────── COLOPHON / FOOTER — Dark binding ─────────────────────────── */
  footer {
    background: var(--obsidian-deep);
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    padding: 100px 56px 36px;
    position: relative;
    color: var(--platinum);
  }
  .foot-masthead {
    max-width: 1440px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--platinum-faint);
    font-weight: 700;
  }
  .foot-masthead .center {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.18em;
    font-weight: 600;
  }
  .foot-masthead .right { text-align: right; }
  .foot-grid {
    max-width: 1440px; margin: 64px auto 0;
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
    gap: 56px;
  }
  .foot-about p {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--platinum-muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 380px;
    font-weight: 500;
  }
  .foot-mark {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--linen);
    font-size: 18px;
    letter-spacing: 0.22em;
    margin-bottom: 14px;
    display: flex; align-items: baseline; gap: 14px;
  }
  .foot-mark .nd {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--gold);
    letter-spacing: 0.3em;
    font-weight: 700;
  }
  .foot-mark .seal { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
  .foot-credit {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 200ms ease, border-color 200ms ease;
  }
  .foot-credit:hover {
    color: var(--gold);
    border-color: var(--gold);
  }
  .foot-social {
    display: flex;
    gap: 16px;
    margin-top: 18px;
  }
  .foot-social a {
    color: var(--gold-soft);
    width: 36px; height: 36px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
  }
  .foot-social a:hover {
    color: var(--gold-bright);
    border-color: var(--gold);
    transform: translateY(-2px);
  }
  .foot-address {
    margin-top: 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-style: normal;
    line-height: 1.6;
    color: rgba(245, 242, 235, 0.55);
    letter-spacing: 0.04em;
  }
  .foot-tag {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 20px;
  }
  footer h4 {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
    font-weight: 600;
  }
  footer ul { list-style: none; padding: 0; }
  footer ul li { margin-bottom: 12px; }
  footer ul a {
    color: var(--platinum-muted);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: color 0.25s, padding-left 0.25s;
    display: inline-block;
  }
  footer ul a:hover { color: var(--gold); padding-left: 6px; }
  .foot-colophon {
    max-width: 1440px; margin: 64px auto 0; padding-top: 32px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--platinum-faint);
    flex-wrap: wrap; gap: 16px;
    font-weight: 600;
  }
  .foot-compliance {
    max-width: 1440px; margin: 36px auto 0;
    font-family: var(--font-body);
    font-size: 10px; line-height: 1.7;
    letter-spacing: 0.01em; text-transform: none;
    color: var(--platinum-faint);
    font-weight: 400;
    padding-top: 24px;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
  }
  .foot-compliance sup {
    color: var(--gold);
    font-weight: 700;
    margin-right: 6px;
    font-size: 9px;
    letter-spacing: 0.15em;
  }

  /* ─────────────────────────── OVERRIDE: kill all editorial-journal scaffolding ─────────────────────────── */
  /* Vertical sideways tags */
  .vertical-tag, .front-tag, .promise-tag, .about-tag, .rev-tag, .recl-tag, .qa-tag,
  /* Section-numbering markers (§ 01, § 02, etc.) */
  .section-num,
  /* Reclamation "Filed Under Seal" rev-stamp */
  .rev-stamp {
    display: none !important;
  }
  /* Universal blank-image placeholder treatment — replaces Plate/Figure labels with a clean "Image" mark */
  .front-image-mark,
  .portrait-frame::before,
  .nature-band-mark,
  .relational-art .label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    opacity: 0.85;
  }
  .front-image-mark { content: ""; }
  /* Standardize blank image labels */
  .blank-image-tag {
    position: absolute; top: 16px; left: 20px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    opacity: 0.85;
    z-index: 4;
  }
  /* TABLE styling — for content blocks that should read as data tables */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: var(--font-body);
    background: var(--linen-bright);
    border: 1px solid var(--gold-deep);
    box-shadow: 0 2px 0 rgba(22, 22, 22, 0.05);
  }
  .data-table caption {
    text-align: left;
    padding: 14px 18px 12px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    border-bottom: 1px solid var(--gold-deep);
    background: rgba(140, 111, 31, 0.06);
  }
  .data-table th, .data-table td {
    padding: 12px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(140, 111, 31, 0.25);
    font-size: 14px;
  }
  .data-table th {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    background: rgba(140, 111, 31, 0.04);
  }
  .data-table tbody tr:last-child td { border-bottom: 0; }
  .data-table td.ix {
    width: 32px;
    font-family: var(--font-display);
    color: var(--gold-deep);
    font-size: 10px;
    letter-spacing: 0.18em;
    font-weight: 700;
  }
  .data-table td.status {
    text-align: right;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    width: 110px;
  }
  /* On dark sections (Reclamation), invert table styling */
  .reclamation .data-table,
  .reclamation .data-table caption,
  .reclamation .data-table th {
    background: rgba(212, 175, 55, 0.05);
    color: var(--platinum);
    border-color: rgba(212, 175, 55, 0.3);
  }
  .reclamation .data-table { border-color: rgba(212, 175, 55, 0.4); }
  .reclamation .data-table th { color: var(--gold); background: rgba(212, 175, 55, 0.08); }
  .reclamation .data-table td { color: var(--platinum-muted); border-color: rgba(212, 175, 55, 0.2); }
  .reclamation .data-table td.status, .reclamation .data-table td.ix { color: var(--gold); }

  /* ─────── BLANK IMAGE PLACEHOLDERS — obvious dashed outline + PLACEHOLDER stamp ─────── */
  .front-video,
  .portrait-frame,
  .nature-band,
  .relational-art {
    outline: 2px dashed rgba(212, 175, 55, 0.55);
    outline-offset: -10px;
  }
  /* Centered PLACEHOLDER stamp injected via pseudo.
     .front-video removed 2026-08-04 — real video is live; the stamp's bg+border
     still painted a chip over frame center even though ::after content is
     overridden to "" by the corner-bracket rule below. */
  .portrait-frame::after,
  .nature-band::before,
  .relational-art::after {
    content: "PLACEHOLDER";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    z-index: 5;
    background: rgba(15, 15, 15, 0.78);
    padding: 14px 28px;
    border: 1px solid var(--gold);
    pointer-events: none;
    white-space: nowrap;
  }
  /* Light surfaces (Mini Book linen, About on Pine) need darker stamp bg for contrast */
  .mini-frame .relational-art::after {
    background: rgba(245, 242, 235, 0.92);
    color: var(--gold-deep);
    border-color: var(--gold-deep);
  }
  .about .portrait-frame::after {
    background: rgba(28, 43, 34, 0.85);
  }
  /* Nature band — stamp positioned a bit higher so it doesn't conflict with the bottom caption */
  .nature-band::before {
    top: 42%;
  }
  /* Reset the portrait-frame::after (was being used for the corner bracket) — overriden by the placeholder stamp now.
     Restore the corner bracket via a different selector. */
  .portrait-frame > .corner-tr {
    position: absolute;
    top: 10px; right: 10px;
    width: 24px; height: 24px;
    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
  }
  /* Smaller PLACEHOLDER on the about portrait since it's a smaller image */
  .about .portrait-frame::after {
    font-size: 14px;
    padding: 10px 18px;
  }
  /* Smaller PLACEHOLDER on relational art panels (mid-size) */
  .relational-art::after { font-size: 16px; padding: 10px 20px; }
  /* Real-image override — when .has-image is on a placeholder container, suppress placeholder treatment */
  .has-image { outline: none !important; }
  .has-image::before, .has-image::after { display: none !important; }
  /* Restore proper bottom gradient on nature-band with image so caption text stays readable */
  .nature-band.has-image::after {
    display: block !important; content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.15) 0%, transparent 30%, transparent 50%, rgba(15, 15, 15, 0.75) 100%);
    pointer-events: none;
    /* These reset the placeholder stamp styles back to a real overlay */
    transform: none; top: 0; left: 0;
    font-size: 0; color: transparent; border: 0; padding: 0;
  }
  /* Hide ".ref" tags inside case file rows (REF: A, TAB. 01, etc.) — already removed since case file is gone, but kept defensively */
  .cf-row .k .ref { display: none; }
  /* Nav section-num prefixes (§01, §02 spans before each link text) */
  .nav-section-num { display: none; }
  /* Kill all pilcrow ❡ markers — CSS pseudos and glyph spans */
  .hero-marginalia p::before,
  .promise-side .marg::before,
  .about-meta p::before,
  .marginalia::before {
    content: "" !important;
  }
  .relational-art .center-note .glyph { display: none; }
  /* Collapse the now-empty 80px first column on every grid that had a vertical tag */
  .hero-grid, .frontispiece-inner { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr 1.5fr; }
  .about-grid { grid-template-columns: 1.1fr 1.4fr; }
  .rev-head { grid-template-columns: 1fr; max-width: 1100px; }
  .rev-grid { grid-template-columns: 1.2fr 1fr; }
  .recl-grid { grid-template-columns: 1.1fr 1.4fr; }
  .qa-grid { grid-template-columns: 1fr 1.3fr; }
  /* Pull section content slightly left now that the tag column is gone */
  .section-num { left: 56px; }

  /* ─────────────────────────── RESPONSIVE ─────────────────────────── */
  @media (max-width: 1200px) {
    .hero-grid, .promise-grid, .about-grid, .paths-head, .paths-grid,
    .rev-head, .rev-grid, .recl-grid, .qa-grid {
      grid-template-columns: 1fr;
    }
    .vertical-tag, .promise-tag, .about-tag, .paths-tag, .rev-tag, .recl-tag, .qa-tag, .front-tag {
      writing-mode: horizontal-tb;
      transform: none;
      height: auto;
      border-left: 0;
      border-top: 1px solid rgba(140, 111, 31, 0.5);
      padding: 14px 0 0;
      margin-bottom: 16px;
    }
    .recl-tag, .reclamation .recl-tag { border-top-color: rgba(212, 175, 55, 0.5); }
    .case-file { margin-top: 56px; }
    .biomarker-panel { margin-top: 32px; }
    .phases { padding-left: 32px; }
    .phases::before { left: 0; }
    .phase::before { left: -23px; }
    .phase::after { left: -16px; width: 14px; }
    .rev-stamp { justify-self: start; margin-top: 24px; }
    .manifesto::after { display: none; }
  }
  @media (max-width: 900px) {
    .container, .section-inner, .nav-inner, .masthead-inner { padding-left: 28px; padding-right: 28px; }
    .hero { padding: 80px 0 60px; }
    .frontispiece { padding: 8px 0 60px; }
    .hero-grid, .promise-grid, .about-grid, .paths-head, .paths-grid,
    .rev-head, .rev-grid, .recl-grid, .qa-grid, .frontispiece-inner {
      padding-left: 28px; padding-right: 28px; gap: 32px;
    }
    .section { padding: 80px 0; }
    .section-num { left: 28px; }
    .manifesto-inner { padding: 0 28px; }
    .path-card { padding: 40px 28px; }
    .biomarker-panel { padding: 28px 20px; }
    .opt-in { flex-direction: column; }
    .opt-in button { padding: 18px; }
    .foot-grid { grid-template-columns: 1fr; }
    .foot-masthead { grid-template-columns: 1fr; text-align: center; gap: 16px; }
    .foot-masthead .right { text-align: center; }
    .mini-frame { padding: 56px 28px; }
    /* Only hide regular nav links on TRUE mobile (≤640px); above that, clamp() in the base styles keeps them visible by shrinking gap/font/spacing smoothly */
    .qa-detail { grid-template-columns: 1fr; }
    .manifesto { padding: 80px 0; }
  }
  /* True-mobile fallback: when there's no horizontal room left, hide non-CTA links so the signature + Free Mini-book button still fit cleanly */
  @media (max-width: 640px) {
    .nav-links a:not(.nav-cta) { display: none; }
  }
  /* Scroll progress bar */
  .scroll-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: left center;
    z-index: 9998;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
  }
  /* Video frontispiece — 16:9 slot for Amy's 90-second somatic-transmission video */
  .front-video {
    aspect-ratio: 16/9;
    position: relative;
    border: 1px solid var(--gold-deep);
    overflow: hidden;
    box-shadow: 0 8px 0 rgba(22, 22, 22, 0.08), 0 24px 56px rgba(22, 22, 22, 0.1);
    background: var(--obsidian);
  }
  .front-video::before {
    content: ""; position: absolute;
    top: -1px; left: -1px; width: 36px; height: 36px;
    border-top: 1px solid var(--gold-deep);
    border-left: 1px solid var(--gold-deep);
    transform: translate(-6px, -6px);
    z-index: 3;
  }
  .front-video::after {
    content: ""; position: absolute;
    bottom: -1px; right: -1px; width: 36px; height: 36px;
    border-bottom: 1px solid var(--gold-deep);
    border-right: 1px solid var(--gold-deep);
    transform: translate(6px, 6px);
    z-index: 3;
  }
  .front-video video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  /* .front-figure wraps the video so the frontispiece grid keeps its 80px/1fr
     columns. The caption that briefly lived under it was removed 2026-08-04
     per David — the video stands on its own. */
  .front-figure { display: block; }
  /* Ambient placeholder — visible when no video source loads. Slow-shifting warm gradient mesh. */
  .front-video .ambient-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse at 25% 40%, rgba(232, 199, 107, 0.35) 0%, transparent 55%),
      radial-gradient(ellipse at 75% 60%, rgba(58, 68, 51, 0.6) 0%, transparent 60%),
      linear-gradient(135deg, var(--obsidian-90) 0%, var(--pine) 50%, var(--eggplant) 100%);
    animation: ambient-drift 22s ease-in-out infinite alternate;
  }
  @keyframes ambient-drift {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%; filter: hue-rotate(0deg) brightness(1); }
    100% { background-position: 8% 6%, -8% -6%, 0% 0%; filter: hue-rotate(-6deg) brightness(1.15); }
  }
  /* Warm overlay for text legibility */
  .front-video .overlay {
    position: absolute; inset: 0; z-index: 2;
    background:
      linear-gradient(180deg, rgba(22, 22, 22, 0.05) 0%, transparent 30%, transparent 60%, rgba(22, 22, 22, 0.55) 100%),
      radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(22, 22, 22, 0.3) 100%);
    pointer-events: none;
  }
  /* 3D tilt cards — perspective container */
  .tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
  }
  /* Hide reveal elements before GSAP initializes (no flash) */
  .reveal { opacity: 0; }
  /* Make body fade-in on load to avoid any flash */
  body { opacity: 0; transition: opacity 0.5s; }
  body.loaded { opacity: 1; }