:root {
    --ink:      #080608;
    --ink-warm: #100c0a;
    --gold:     #c79b61;
    --gold-dim: rgba(199,155,97,0.15);
    --gold-glow: rgba(199,155,97,0.32);
    --ember:    #c07840;
    --cream:    #f0e8d8;
    --parchment:#e8d8b8;
    --muted:    rgba(240,232,216,0.45);
    --border:   rgba(199,155,97,0.18);
    --silver:   #c0c8d8;
    --silver-dim: rgba(192,200,216,0.18);
    --silver-border: rgba(192,200,216,0.2);
    --rose:     #c07868;
    --rose-pale: #e8b8a8;
    --rose-dim: rgba(192,120,104,0.16);
    --rose-border: rgba(192,120,104,0.22);
    --forest:        #6a9282;
    --forest-pale:   #a8c2b6;
    --forest-dim:    rgba(106,146,130,0.16);
    --forest-border: rgba(106,146,130,0.22);
    --indigo:        #7868b8;
    --indigo-pale:   #a89cd8;
    --indigo-dim:    rgba(120,104,184,0.16);
    --indigo-border: rgba(120,104,184,0.22);
    --patina:        #6aa294;
    --patina-pale:   #a8d0c4;
    --patina-dim:    rgba(94,154,140,0.16);
    --patina-border: rgba(94,154,140,0.22);
    --amber:         #e0a83c;
    --amber-pale:    #f6e0a4;
    --amber-dim:     rgba(224,168,60,0.16);
    --amber-border:  rgba(224,168,60,0.22);
    --avesha:        #9a86d8;
    --avesha-pale:   #ddd2f8;
    --avesha-dim:    rgba(154,134,216,0.16);
    --avesha-border: rgba(154,134,216,0.22);
    --samvit:        #2d7d7d;
    --samvit-pale:   #7ababa;
    --samvit-dim:    rgba(45,125,125,0.16);
    --samvit-border: rgba(45,125,125,0.22);
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--ink);
    color: var(--cream);
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
  }

  /* ── GRAIN OVERLAY ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.6;
  }

  /* ── FLOWER OF LIFE VEIL ──
     Ambient lattice beneath all content — near-invisible at rest.
     A wide soft pocket of visibility drifts slowly across the
     field, so parts of the geometry surface and sink over minutes.
     Ambient only: no event-driven motion, off under reduced-motion. */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 152.420' width='88' height='152.420'%3E%3Cg fill='none' stroke='%23c79b61' stroke-width='0.8'%3E%3Ccircle cx='-44.0' cy='-76.21' r='88'/%3E%3Ccircle cx='44.0' cy='-76.21' r='88'/%3E%3Ccircle cx='132.0' cy='-76.21' r='88'/%3E%3Ccircle cx='-88.0' cy='0.0' r='88'/%3E%3Ccircle cx='0.0' cy='0.0' r='88'/%3E%3Ccircle cx='88.0' cy='0.0' r='88'/%3E%3Ccircle cx='176.0' cy='0.0' r='88'/%3E%3Ccircle cx='-44.0' cy='76.21' r='88'/%3E%3Ccircle cx='44.0' cy='76.21' r='88'/%3E%3Ccircle cx='132.0' cy='76.21' r='88'/%3E%3Ccircle cx='-88.0' cy='152.42' r='88'/%3E%3Ccircle cx='0.0' cy='152.42' r='88'/%3E%3Ccircle cx='88.0' cy='152.42' r='88'/%3E%3Ccircle cx='176.0' cy='152.42' r='88'/%3E%3Ccircle cx='-44.0' cy='228.63' r='88'/%3E%3Ccircle cx='44.0' cy='228.63' r='88'/%3E%3Ccircle cx='132.0' cy='228.63' r='88'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 110px 190.526px;
    background-position: center top;
    opacity: 0.09;
    -webkit-mask-image: radial-gradient(ellipse 46% 38% at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.26) 78%, rgba(0,0,0,0.18) 100%);
    mask-image: radial-gradient(ellipse 46% 38% at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.26) 78%, rgba(0,0,0,0.18) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 175% 175%;
    mask-size: 175% 175%;
    -webkit-mask-position: 15% 20%;
    mask-position: 15% 20%;
    animation: folDrift 150s ease-in-out infinite alternate,
               folBreathe 47s ease-in-out infinite;
  }
  @keyframes folDrift {
    0%   { -webkit-mask-position: 12% 18%; mask-position: 12% 18%; }
    34%  { -webkit-mask-position: 80% 32%; mask-position: 80% 32%; }
    67%  { -webkit-mask-position: 28% 84%; mask-position: 28% 84%; }
    100% { -webkit-mask-position: 86% 68%; mask-position: 86% 68%; }
  }
  @keyframes folBreathe {
    0%, 100% { opacity: 0.075; }
    50%      { opacity: 0.125; }
  }
  @media (prefers-reduced-motion: reduce) {
    body::after {
      animation: none;
      opacity: 0.055;
      -webkit-mask-image: none;
      mask-image: none;
    }
  }

  /* ── VERTICAL LINE PATTERN ── */

  /* ── HEADER ── */
  header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(8,6,8,0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 5%;
    display: flex; align-items: center; justify-content: space-between;
    height: 112px;
  }

  .logo {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    line-height: 1.2;
  }
  .logo span { display: block; color: var(--muted); font-weight: 300; font-size: 0.65rem; letter-spacing: 0.15em; }

  nav { display: flex; gap: 2rem; align-items: center; }
  nav a {
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
  }
  nav a:hover { opacity: 1; color: var(--gold); }
  /* multi-word series stack onto two lines — the 112px header carries them */
  header nav a span { display: block; }

  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 0; margin: 0; }
  .hamburger span { width: 24px; height: 1px; background: var(--cream); display: block; transition: 0.3s; }
  .hamburger:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  /* Mobile-nav focus outlines */
  .mobile-nav a:focus-visible, .mobile-nav-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  /* Generic keyboard-focus outline for the rest of the page */
  header nav a:focus-visible, .chapter-nav a:focus-visible, footer a:focus-visible, .logo:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* ── SECTIONS ── */
  section {
    position: relative;
    padding: 120px 10% 100px;
  }
  section:first-of-type { padding-top: 160px; }

  h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', sans-serif;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  /* ── CORMORANT BRIDGE ── */
  .hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 300 !important;
    font-style: italic !important;
    letter-spacing: -0.02em !important;
  }
  .hero-title .gold { color: var(--gold); font-style: normal; }
  .hero-sutra {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.1rem !important;
    font-style: italic !important;
    letter-spacing: 0.04em !important;
    color: rgba(199,155,97,0.65) !important;
  }
  .sutra-sanskrit {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 300 !important;
    font-style: italic !important;
    letter-spacing: 0.05em !important;
  }
  .sutra-body {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.2rem !important;
    line-height: 2.1 !important;
    color: rgba(240,232,216,0.72) !important;
  }
  .pull-quote {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.18rem !important;
    line-height: 1.85 !important;
    color: rgba(240,232,216,0.7) !important;
    border-left-color: var(--ember) !important;
  }
  .card-desc {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
    color: rgba(240,232,216,0.62) !important;
  }

  /* ── HERO ── */
  #home {
    min-height: 100vh;
    display: flex; align-items: flex-start;
    padding-top: clamp(110px, 14vh, 180px);
    background: transparent;
    overflow: hidden;
    position: relative;
  }
  .hero-inner { position: relative; z-index: 1; }

  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
  }

  .hero-text {}

  .series-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.48em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2rem;
    display: flex; align-items: center; gap: 1rem;
    opacity: 0.85;
  }
  .series-tag::before { content: ''; width: 40px; height: 1px; background: var(--gold); }

  .hero-title {
    font-size: clamp(4.5rem, 9vw, 8rem);
    font-weight: 300;
    color: var(--cream);
    margin-bottom: 1.5rem;
    line-height: 0.95;
  }

  .hero-sutra {
    font-family: 'Barlow', sans-serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 2.5rem;
    letter-spacing: 0.05em;
  }

  .hero-desc {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    font-style: italic;
    color: rgba(240,232,216,0.72);
    line-height: 1.7;
    margin-bottom: 3.25rem;
    max-width: 540px;
    letter-spacing: 0.01em;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 2.8rem;
    background: transparent;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(199,155,97,0.45);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease, letter-spacing 0.5s ease;
  }
  .btn::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(232,213,167,0.18), transparent);
    transform: translateX(-100%);
    transition: transform 0.9s ease;
    pointer-events: none;
  }
  .btn:hover {
    color: var(--cream);
    border-color: rgba(232,213,167,0.85);
    letter-spacing: 0.5em;
    background: rgba(199,155,97,0.04);
  }
  .btn:hover::after {
    transform: translateX(100%);
  }
  .btn .btn-arrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0;
    transition: transform 0.5s ease;
  }
  .btn:hover .btn-arrow {
    transform: translateX(4px);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn, .btn::after, .btn .btn-arrow { transition: none; }
    .btn:hover { letter-spacing: 0.45em; }
    .btn:hover .btn-arrow { transform: none; }
  }
  .btn-outline {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    margin-left: 1rem;
  }
  .btn-outline:hover { background: var(--gold-dim); color: var(--cream); }

  /* Hero visual */
  .hero-visual {
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }

  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  @keyframes glow-pulse { 0%,100%{box-shadow:0 0 20px rgba(200,160,91,0.2)} 50%{box-shadow:0 0 40px rgba(200,160,91,0.4)} }

  /* Chapter nav strip */
  .chapter-nav {
    background: rgba(200,160,91,0.06);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0;
    display: flex;
    overflow-x: auto;
  }
  .chapter-nav a {
    flex: 1;
    min-width: 120px;
    padding: 1.2rem 1rem;
    text-align: center;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border-right: 1px solid var(--border);
    transition: color 0.2s, background 0.2s;
  }
  .chapter-nav a:last-child { border-right: none; }
  .chapter-nav a:hover { color: var(--gold); background: var(--gold-dim); }
  .chapter-nav a .num {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 0.3rem;
  }
  .chapter-nav a:hover .num { opacity: 1; }

  /* ── SERIES OVERVIEW ── */

  .about-right {}

  .pull-quote {
    border-left: 2px solid var(--gold);
    padding: 1rem 0 1rem 1.5rem;
    margin: 2rem 0;
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(253,253,253,0.7);
    line-height: 1.7;
  }
  .pull-quote em { color: var(--gold); font-style: normal; }

  /* ── CHAPTERS ── */
  #chapters {
    background: rgba(0,0,0,0.2);
    border-top: 1px solid var(--border);
    padding: 120px 5% 100px;
  }

  .chapters-grid {
    /* anchor target for the series mark — clears the 112px fixed header */
    scroll-margin-top: 8.5rem;
    max-width: 1200px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(199,155,97,0.10);
    border: 1px solid var(--border);
  }

  .chapter-card {
    background: rgba(12,9,10,0.95);
    padding: 3rem 2.5rem;
    position: relative;
    transition: background 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
    overflow: hidden;
  }
  .chapter-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }
  .chapter-card:hover { background: rgba(200,160,91,0.04); }
  .chapter-card:hover::before { transform: scaleX(1); }
  /* Keyboard focus — match each series palette */
  .chapter-card:focus { outline: none; }
  .chapter-card:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: -1px;
    background: rgba(200,160,91,0.06);
  }
  .chapter-card:focus-visible::before { transform: scaleX(1); }
  .chapter-card.nn:focus-visible { outline-color: var(--silver); background: rgba(192,200,216,0.06); }
  .chapter-card.aroha:focus-visible { outline-color: var(--rose); background: rgba(192,120,104,0.06); }
  .chapter-card.tt:focus-visible    { outline-color: var(--forest-pale); background: rgba(106,146,130,0.06); }
  .chapter-card.ajati:focus-visible { outline-color: var(--indigo-pale); background: rgba(120,104,184,0.06); }
  .chapter-card.puurva:focus-visible { outline-color: var(--patina-pale); background: rgba(94,154,140,0.06); }
  .chapter-card.aof:focus-visible { outline-color: var(--amber-pale); background: rgba(224,168,60,0.06); }
  .chapter-card.avesha:focus-visible { outline-color: var(--avesha-pale); background: rgba(154,134,216,0.06); }
  .chapter-card.samvit:focus-visible { outline-color: var(--samvit-pale); background: rgba(45,125,125,0.06); }

  .card-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--gold);
    opacity: 0.12;
    line-height: 1;
    margin-bottom: 1rem;
    transition: opacity 0.3s;
  }
  .chapter-card:hover .card-num { opacity: 0.22; }

  .card-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.7;
    font-weight: 400;
    font-style: italic;
    color: var(--parchment);
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
  }
  .card-title:has(+ .card-devanagari) { margin-bottom: 0.15rem; }

  .card-devanagari {
    font-family: 'Tiro Devanagari Sanskrit', 'Amiri', 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(200,160,72,0.55);
    margin-bottom: 0.85rem;
    letter-spacing: 0.02em;
    display: block;
    line-height: 1.4;
  }

  .card-translation {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 400;
    color: rgba(200,160,72,0.45);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1.1rem;
    margin-top: -0.3rem;
  }
  .chapter-card.nn .card-devanagari { color: rgba(200,160,72,0.60); }
  .chapter-card.nn .card-translation { color: rgba(200,160,72,0.42); }
  .chapter-card.aroha .card-devanagari { color: rgba(200,160,72,0.70); }
  .chapter-card.aroha .card-translation { color: rgba(200,160,72,0.50); }
  .chapter-card.tt .card-devanagari { color: rgba(200,160,72,0.78); font-family: 'Noto Serif TC', 'Cormorant Garamond', serif; letter-spacing: 0.14em; }
  .chapter-card.tt .card-translation { color: rgba(200,160,72,0.52); }
  .chapter-card.ajati .card-devanagari { color: rgba(200,160,72,0.65); }
  .chapter-card.ajati .card-translation { color: rgba(200,160,72,0.45); }
  .chapter-card.puurva .card-devanagari { color: rgba(184,154,92,0.68); }
  .chapter-card.puurva .card-translation { color: rgba(184,154,92,0.48); }
  .chapter-card.aof .card-devanagari { color: rgba(224,168,60,0.72); }
  .chapter-card.aof .card-translation { color: rgba(224,168,60,0.50); }
  .chapter-card.avesha .card-devanagari { color: rgba(154,134,216,0.74); }
  .chapter-card.avesha .card-translation { color: rgba(154,134,216,0.52); }
  .chapter-card.samvit .card-devanagari { color: rgba(45,125,125,0.74); }
  .chapter-card.samvit .card-translation { color: rgba(45,125,125,0.52); }

  .card-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
    opacity: 0.7;
  }

  .card-desc {
    font-size: 0.9rem;
    line-height: 1.75;
    color: rgba(253,253,253,0.6);
  }

  .card-arrow {
    position: absolute; bottom: 2rem; right: 2rem;
    font-size: 1.2rem;
    color: var(--gold);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s, transform 0.3s;
  }
  .chapter-card:hover .card-arrow { opacity: 0.6; transform: translateX(0); }

  /* ── SUTRA SECTION ── */
  #sutra {
    background: var(--ink-warm);
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 120px 10%;
  }

  .sutra-inner {
    max-width: 700px; margin: 0 auto;
  }

  .sutra-rule {
    width: 60px; height: 1px;
    background: var(--gold);
    margin: 0 auto 3rem;
    opacity: 0.5;
  }

  .sutra-devanagari {
    font-family: 'Tiro Devanagari Sanskrit', 'Amiri', 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 400;
    color: rgba(199,155,97,0.72);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 1.5rem;
    line-height: 1.3;
  }

  .sutra-sanskrit {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 0.5rem;
    display: block;
  }

  .sutra-translation {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3rem;
    display: block;
  }

  .sutra-body {
    font-size: 1.1rem;
    line-height: 2;
    color: rgba(253,253,253,0.7);
    font-style: italic;
    margin-bottom: 3rem;
  }

  /* ── DESIGN INTENT ── */
  #intent {
    background: rgba(0,0,0,0.25);
    border-top: 1px solid var(--border);
  }

  .intent-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 3fr 2fr; gap: 80px;
    align-items: start;
  }

  .intent-text h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--cream);
  }
  .intent-text p {
    font-size: 1rem;
    line-height: 1.9;
    color: rgba(253,253,253,0.75);
    margin-bottom: 1.5rem;
  }

  .intent-aside {}
  .stat-block {
    border: 1px solid var(--border);
    padding: 2.5rem;
    margin-bottom: 1px;
    background: rgba(200,160,91,0.03);
  }
  .stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.3rem;
  }
  .stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ── ACCESS ── */
  #access {
    background: var(--ink);
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 120px 10%;
  }

  .access-inner {
    max-width: 800px; margin: 0 auto;
  }

  .access-inner h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--cream);
    margin-bottom: 1.5rem;
  }
  .access-inner p {
    font-size: 1.05rem;
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 3rem;
  }

  .access-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 3rem;
    text-align: left;
  }
  .access-item {
    background: var(--ink);
    padding: 2rem 1.75rem;
  }
  .access-item .icon {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    display: block;
  }
  .access-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cream);
    margin-bottom: 0.5rem;
  }
  .access-item p {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
  }

  .cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

  /* ── FOOTER ── */
  footer {
    background: rgba(0,0,0,0.4);
    border-top: 1px solid var(--border);
    padding: 60px 10% 40px;
  }

  .footer-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 32px;
    margin-bottom: 50px;
  }
  .footer-inner .footer-brand { grid-column: 1 / -1; }

  .footer-brand {}
  .footer-brand .brand-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.3rem;
  }
  .footer-brand .brand-sub {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
  }
  .footer-brand p {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 300px;
  }
  .footer-brand .brand-contact {
    margin-top: 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }
  .footer-brand .brand-contact a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(201,168,76,0.25);
    transition: color 0.2s, border-color 0.2s;
  }
  .footer-brand .brand-contact a:hover,
  .footer-brand .brand-contact a:focus-visible {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }

  .footer-col h5 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
  }
  .footer-col a {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 0.6rem;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--cream); }

  .footer-bottom {
    max-width: 1100px; margin: 0 auto;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.75rem;
    color: rgba(253,253,253,0.3);
    letter-spacing: 0.05em;
  }

  /* ── NETI NETI CARDS ── */
  .chapter-card.nn::before {
    background: var(--silver);
  }
  .chapter-card.nn:hover { background: rgba(192,200,216,0.04); }
  .chapter-card.nn .card-num { color: var(--silver); }
  .chapter-card.nn
  .chapter-card.nn .card-title { color: var(--parchment); }
  .chapter-card.nn .card-subtitle { color: var(--silver); }
  .chapter-card.nn .card-arrow { color: var(--silver); }

  /* ── ĀROHA CARDS ── */
  .chapter-card.aroha::before {
    background: var(--rose);
  }
  .chapter-card.aroha:hover { background: rgba(192,120,104,0.04); }
  .chapter-card.aroha .card-num { color: var(--rose); }
  .chapter-card.aroha
  .chapter-card.aroha .card-title { color: var(--parchment); }
  .chapter-card.aroha .card-subtitle { color: var(--rose-pale); }
  .chapter-card.aroha .card-arrow { color: var(--rose-pale); }

  .chapter-card.tt::before {
    background: var(--forest);
  }
  .chapter-card.tt:hover { background: rgba(106,146,130,0.04); }
  .chapter-card.tt .card-num { color: var(--forest-pale); }
  .chapter-card.tt .card-title { color: var(--parchment); }
  .chapter-card.tt .card-subtitle { color: var(--forest-pale); }
  .chapter-card.tt .card-arrow { color: var(--forest-pale); }

  .chapter-card.ajati::before {
    background: var(--indigo);
  }
  .chapter-card.ajati:hover { background: rgba(120,104,184,0.04); }
  .chapter-card.ajati .card-num { color: var(--indigo-pale); }
  .chapter-card.ajati .card-title { color: var(--parchment); }
  .chapter-card.ajati .card-subtitle { color: var(--indigo-pale); }
  .chapter-card.ajati .card-arrow { color: var(--indigo-pale); }

  .chapter-card.puurva::before {
    background: var(--patina);
  }
  .chapter-card.puurva:hover { background: rgba(94,154,140,0.04); }
  .chapter-card.puurva .card-num { color: var(--patina-pale); }
  .chapter-card.puurva .card-title { color: var(--parchment); }
  .chapter-card.puurva .card-subtitle { color: var(--patina-pale); }
  .chapter-card.puurva .card-arrow { color: var(--patina-pale); }

  .chapter-card.aof::before {
    background: var(--amber);
  }
  .chapter-card.aof:hover { background: rgba(224,168,60,0.04); }
  .chapter-card.aof .card-num { color: var(--amber-pale); }
  .chapter-card.aof .card-title { color: var(--parchment); }
  .chapter-card.aof .card-subtitle { color: var(--amber-pale); }
  .chapter-card.aof .card-arrow { color: var(--amber-pale); }

  .chapter-card.avesha::before {
    background: var(--avesha);
  }
  .chapter-card.avesha:hover { background: rgba(154,134,216,0.04); }
  .chapter-card.avesha .card-num { color: var(--avesha-pale); }
  .chapter-card.avesha .card-title { color: var(--parchment); }
  .chapter-card.avesha .card-subtitle { color: var(--avesha-pale); }
  .chapter-card.avesha .card-arrow { color: var(--avesha-pale); }

  .chapter-card.samvit::before {
    background: var(--samvit);
  }
  .chapter-card.samvit:hover { background: rgba(45,125,125,0.04); }
  .chapter-card.samvit .card-num { color: var(--samvit-pale); }
  .chapter-card.samvit .card-title { color: var(--parchment); }
  .chapter-card.samvit .card-subtitle { color: var(--samvit-pale); }
  .chapter-card.samvit .card-arrow { color: var(--samvit-pale); }

  /* ── SERIES DIVIDER ── */
  .series-block { margin-bottom: 0; }
  .series-block-header {
    max-width: 1200px; margin: 0 auto 2rem;
    display: flex; align-items: center; gap: 2rem;
  }
  .series-block-header .series-tag-label {
    font-family: 'Cinzel', serif;
    line-height: 1.7;
    font-size: 0.54rem; font-weight: 400;
    letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--gold); white-space: nowrap;
  }
  .series-block-header.nn .series-tag-label { color: var(--silver); }
  .series-block-header.aroha .series-tag-label { color: var(--rose-pale); }
  .series-block-header.tt .series-tag-label { color: var(--forest-pale); }
  .series-block-header.ajati .series-tag-label { color: var(--indigo-pale); }
  .series-block-header.puurva .series-tag-label { color: var(--patina-pale); }
  .series-block-header.aof .series-tag-label { color: var(--amber-pale); }
  .series-block-header.avesha .series-tag-label { color: var(--avesha-pale); }
  .series-block-header.samvit .series-tag-label { color: var(--samvit-pale); }
  .series-block-header::after {
    content: ''; flex: 1; height: 1px;
    background: var(--border);
  }
  .series-continuation-note {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic; font-size: 0.88rem;
    color: rgba(192,200,216,0.5);
    max-width: 1200px; margin: 1.2rem auto 2.5rem;
    letter-spacing: 0.03em;
  }

  /* ── CHAPTER NAV LABELED ── */
  .chapter-nav-wrap { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .chapter-nav-label {
    font-family: 'Cinzel', serif;
    font-size: 0.5rem; font-weight: 400;
    letter-spacing: 0.4em; text-transform: uppercase;
    padding: 0.6rem 1.2rem 0;
    color: var(--gold); opacity: 0.6;
  }
  .chapter-nav-label.nn { color: var(--silver); }
  .chapter-nav-label.aroha { color: var(--rose-pale); }
  .chapter-nav-label.tt { color: var(--forest-pale); }
  .chapter-nav-label.ajati { color: var(--indigo-pale); }
  .chapter-nav-label.puurva { color: var(--patina-pale); }
  .chapter-nav-label.aof { color: var(--amber-pale); }
  .chapter-nav-label.avesha { color: var(--avesha-pale); }
  .chapter-nav-label.samvit { color: var(--samvit-pale); }
  .chapter-nav { border-top: none; border-bottom: none; }
  .chapter-nav.nn a:hover { color: var(--silver); background: var(--silver-dim); }
  .chapter-nav.nn a .num { color: var(--silver); }
  .chapter-nav.aroha a:hover { color: var(--rose-pale); background: var(--rose-dim); }
  .chapter-nav.aroha a .num { color: var(--rose-pale); }
  .chapter-nav.tt a:hover { color: var(--forest-pale); background: var(--forest-dim); }
  .chapter-nav.tt a .num { color: var(--forest-pale); }
  .chapter-nav.ajati a:hover { color: var(--indigo-pale); background: var(--indigo-dim); }
  .chapter-nav.ajati a .num { color: var(--indigo-pale); }
  .chapter-nav.puurva a:hover { color: var(--patina-pale); background: var(--patina-dim); }
  .chapter-nav.puurva a .num { color: var(--patina-pale); }
  .chapter-nav.aof a:hover { color: var(--amber-pale); background: var(--amber-dim); }
  .chapter-nav.aof a .num { color: var(--amber-pale); }
  .chapter-nav.avesha a:hover { color: var(--avesha-pale); background: var(--avesha-dim); }
  .chapter-nav.avesha a .num { color: var(--avesha-pale); }
  .chapter-nav.samvit a:hover { color: var(--samvit-pale); background: var(--samvit-dim); }
  .chapter-nav.samvit a .num { color: var(--samvit-pale); }

  /* ── FADE IN ── */
  .fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .fade-in.visible { opacity: 1; transform: translateY(0); }

  /* ── DIVIDER ── */
  .gold-divider {
    display: flex; align-items: center; justify-content: center;
    gap: 1.5rem; margin: 3rem 0;
    color: var(--gold); opacity: 0.4; font-size: 0.7rem;
  }
  .gold-divider::before, .gold-divider::after {
    content: ''; flex: 1; max-width: 80px;
    height: 1px; background: var(--gold);
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 980px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero-visual { display: none; }
    .chapters-grid { grid-template-columns: 1fr 1fr; }
    .intent-inner { grid-template-columns: 1fr; gap: 40px; }
    .access-grid { grid-template-columns: 1fr; }
    /* Footer: keep horizontal on tablets, just tighten the brand column */
    .footer-inner { grid-template-columns: repeat(4, 1fr); gap: 30px 24px; }
    nav { display: none; }
    .hamburger { display: flex; }
    section { padding: 80px 6% 60px; }
  }

  @media (max-width: 720px) {
    /* Tablet portrait / large phones: brand on its own row, four columns below */
    .footer-inner {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 30px 24px;
    }
    .footer-brand { grid-column: 1 / -1; }
  }

  @media (max-width: 600px) {
    .chapters-grid { grid-template-columns: 1fr; }
    .chapter-nav a span.title-short { display: none; }
    /* Phones: two columns of links so it stays scannable */
    .footer-inner {
      grid-template-columns: 1fr 1fr;
      gap: 30px 24px;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  }

  /* Mobile nav */
  .mobile-nav {
    display: none;
    position: fixed; inset: 0;
    background: rgba(8,6,8,0.97);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.7rem;
  }
  .mobile-nav.open { display: flex; }
  .mobile-nav a {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 0.6rem 1.4rem;
    position: relative;
    transition: color 0.3s ease, letter-spacing 0.3s ease;
  }
  .mobile-nav a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 1.6rem; height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.55), transparent);
    opacity: 0.55;
    transition: width 0.3s ease, opacity 0.3s ease;
  }
  .mobile-nav a:hover,
  .mobile-nav a:focus-visible { color: var(--cream); letter-spacing: 0.32em; }
  .mobile-nav a:hover::after,
  .mobile-nav a:focus-visible::after { width: 2.4rem; opacity: 0.9; }
  .mobile-nav-close {
    position: absolute; top: 2rem; right: 5%;
    font-size: 1.5rem; color: var(--muted); cursor: pointer;
    background: none; border: none;
    font-family: 'Barlow', sans-serif;
  }
/* REDUCED-MOTION — injected */
  /* ── REDUCED MOTION — respect user preference ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
    /* Hide the animated canvas particle field entirely */
    canvas#field { display: none !important; }
    /* Ensure faded-in content is visible by default */
    .fade-in { opacity: 1 !important; transform: none !important; }
    /* Disable the breathing/rotating decorative layers */
    .bg-breathe, .bg-torus, .bg-torus-2 { animation: none !important; opacity: 0.04 !important; }
  }
/* SKIP-LINK — injected */
  /* ── SKIP LINK — visually hidden until focused ── */
  .skip-link {
    position: absolute; top: -100px; left: 0;
    background: #080608; color: #c79b61;
    padding: 0.75rem 1.25rem;
    font-family: 'Cinzel', serif; font-size: 0.62rem;
    letter-spacing: 0.4em; text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(199,155,97,0.4);
    z-index: 9999;
    transition: top 0.25s ease;
  }
  .skip-link:focus { top: 0; outline: 2px solid #c79b61; outline-offset: 2px; }


  /* ── ambient background — injected ── */
  .bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }

  .bg-void {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 15% 8%,  rgba(8,6,8,0.99) 0%, transparent 55%),
      radial-gradient(ellipse 70% 80% at 85% 92%, rgba(16,12,10,0.92) 0%, transparent 55%),
      radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8,6,8,1) 25%, transparent 75%);
  }

  .bg-point-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 900px; height: 900px; border-radius: 50%;
    background: radial-gradient(circle,
      rgba(199,155,97,0.045) 0%,
      rgba(192,120,64,0.020) 12%,
      transparent 45%);
    animation: pointpulse 40s ease-in-out infinite;
  }

  .bg-point {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(232,216,184,0.80);
    box-shadow:
      0 0 12px 5px rgba(199,155,97,0.18),
      0 0 40px 14px rgba(192,120,64,0.07),
      0 0 100px 36px rgba(199,155,97,0.035);
    animation: pointpulse 40s ease-in-out infinite;
  }

  @keyframes pointpulse {
    0%,100% { opacity: 0.28; }
    50% { opacity: 1; }
  }

  canvas#field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

  .bg-mask {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse 55% 100% at 50% 50%,
      rgba(8,6,8,0.85) 0%,
      rgba(8,6,8,0.60) 35%,
      rgba(8,6,8,0.20) 62%,
      transparent 80%);
  }

  .grain {
    position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.42;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  }

  /* Content must sit above the background layers */
  body > header,
  body > .mobile-nav,
  body > section,
  body > footer,
  body > .chapter-nav-wrap { position: relative; z-index: 10; }

  /* Reduced motion — disable particle canvas + pulse animations */
  @media (prefers-reduced-motion: reduce) {
    .bg-point, .bg-point-glow { animation: none; opacity: 0.6; }
    canvas#field { display: none !important; }
  }


  .section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.8rem;
    display: inline-block;
  }

  /* ── wordmark sizing — per location ── */

  /* ── full-logo (symbol + wordmark lockup) — hero only ── */
  .full-logo { display: block; height: auto; }

  /* ── centred hero treatment — injected ── */
  .hero-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  /* ── homepage hero mark ──
     Square canvas (1380x1386). The knot occupies the middle ~54%; the rest
     is transparent bloom, so the rendered box runs well past the readable
     form and the surrounding margins are cut to suit. */
  .hero-mark {
    /* height-aware: the hero pane is fixed to the viewport, so the mark
       still yields on short screens — but with the enter ring removed it has
       room to sit larger, since it is now the button itself */
    width: clamp(280px, min(42vw, 54vh), 520px);
    height: auto;
    display: block;
    margin: 0 auto;
    /* one soft layer only — the SVG carries its own core, halo and bloom */
    filter: drop-shadow(0 0 46px rgba(199,155,97,0.16));
    animation: markBreathe 40s ease-in-out infinite;
  }
  @keyframes markBreathe {
    0%, 100% { filter: drop-shadow(0 0 38px rgba(199,155,97,0.11)); }
    50%      { filter: drop-shadow(0 0 60px rgba(232,213,167,0.20)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-mark { animation: none; }
  }
  .icon-nav {
    width: 88px;
    height: auto;
    display: block;
  }
  .icon-footer {
    width: 120px;
    height: auto;
    display: block;
    margin-bottom: 0.6rem;
  }

  /* ── Enter — the mark itself is the button ──
     Carries the full button treatment the torus ring used to hold: pointer,
     bloom on hover/focus, focus ring, press response. The ambient markBreathe
     animation runs on the <img>; the interactive glow runs on the <a>, so the
     two filters compose instead of one overriding the other. */
  .hero-mark-link {
    /* block, shrink-to-fit — keeps the hit area on the mark instead of
       spanning the hero column, and avoids the inline-block baseline gap the
       h1's display type would otherwise open beneath it */
    display: block;
    width: fit-content;
    margin: 0 auto 0.75rem;
    cursor: pointer;
    text-decoration: none;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.7s ease, transform 0.7s ease;
  }
  .hero-mark-link:hover,
  .hero-mark-link:focus-visible {
    filter: drop-shadow(0 0 26px rgba(232,213,167,0.4))
            drop-shadow(0 4px 44px rgba(199,155,97,0.18));
    transform: scale(1.02);
  }
  .hero-mark-link:focus-visible {
    outline: 1px solid rgba(232,213,167,0.45);
    /* pulled inward — the SVG box carries a wide transparent bloom margin,
       so an outline at the box edge would float far off the readable form */
    outline-offset: -3rem;
  }
  .hero-mark-link:active {
    transform: scale(0.995);
    transition: transform 0.12s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-mark-link { transition: none; }
    .hero-mark-link:hover,
    .hero-mark-link:focus-visible,
    .hero-mark-link:active { transform: none; }
  }

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  /* ── PREFACE / THRESHOLD ── */
  .preface {
    padding: 132px 5% 120px;
    border-top: 1px solid var(--border);
  }
  .preface-inner { max-width: 700px; margin: 0 auto; }
  .preface-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.74;
    text-align: center;
    margin-bottom: 3.2rem;
  }
  .preface p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.42rem;
    line-height: 1.7;
    color: rgba(240,232,216,0.72);
    letter-spacing: 0.01em;
    margin-bottom: 1.7rem;
  }
  .preface p.instruction {
    text-align: center;
    color: var(--parchment);
    font-size: 1.56rem;
    letter-spacing: 0.02em;
    margin: 2.2rem 0;
  }
  .preface p.negation {
    color: rgba(240,232,216,0.8);
    font-style: italic;
  }
  .preface-break {
    text-align: center;
    color: var(--gold);
    opacity: 0.5;
    letter-spacing: 0.62em;
    margin: 2.6rem 0 2.4rem;
    font-size: 0.9rem;
  }
  /* ── Preface threshold — the mark is the button, same as the hero ── */
  .preface-enter {
    margin: 3.4rem auto 0;
    display: flex;
    justify-content: center;
  }
  .preface-mark {
    /* smaller than the hero mark — this is the second threshold, not the first */
    width: clamp(220px, min(34vw, 40vh), 320px);
    height: auto;
    display: block;
    filter: drop-shadow(0 0 34px rgba(199,155,97,0.13));
    animation: markBreathe 40s ease-in-out infinite;
  }
  .preface-enter-link {
    display: block;
    width: fit-content;
    cursor: pointer;
    text-decoration: none;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.7s ease, transform 0.7s ease;
  }
  .preface-enter-link:hover,
  .preface-enter-link:focus-visible {
    filter: drop-shadow(0 0 18px rgba(232,213,167,0.34))
            drop-shadow(0 4px 32px rgba(199,155,97,0.15));
    transform: scale(1.02);
  }
  .preface-enter-link:focus-visible {
    outline: 1px solid rgba(232,213,167,0.45);
    outline-offset: -2.4rem;
  }
  .preface-enter-link:active {
    transform: scale(0.995);
    transition: transform 0.12s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .preface-mark { animation: none; }
    .preface-enter-link { transition: none; }
    .preface-enter-link:hover,
    .preface-enter-link:focus-visible,
    .preface-enter-link:active { transform: none; }
  }
  @media (max-width: 600px) {
    .preface { padding: 92px 6% 82px; }
    .preface p { font-size: 1.24rem; }
    .preface p.instruction { font-size: 1.34rem; }
    .preface-eyebrow { letter-spacing: 0.3em; }
  }

/* ═══════════════════════════════════════════════════════════
   SERIES PAGE — hub-and-spoke chamber (added for split-page pattern)
   ═══════════════════════════════════════════════════════════ */
.series-page { position: relative; z-index: 5; padding: max(16vh, 124px) 5% 40px; max-width: 1200px; margin: 0 auto; }
/* uniform opening — header grouping at the same height as the essay pages; fills the first viewport */
.series-opening { min-height: calc(100svh - max(16vh, 124px)); display: flex; flex-direction: column; justify-content: flex-start; }
.series-opening .series-page-hero { margin-top: 0; }
/* Series header carries the essay heading composition — centred column,
   Cinzel eyebrow, Cormorant italic title, glyph snug beneath, centred rule. */
.series-page-hero { max-width: 700px; margin: 3.4rem auto 0; text-align: center; }
/* Mark opening the series page — also the return to the map, replacing the
   torus ring that used to sit below the title. The <img> stays hidden from
   assistive tech; the wrapping <a> carries the label. Height-driven so it
   yields on short screens. */
.series-page-hero { --series-mark-w: clamp(192px, 28vh, 336px); }
.series-mark {
  width: var(--series-mark-w);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 34px rgba(199,155,97,0.14));
  animation: markBreathe 40s ease-in-out infinite;
}
.series-mark-link {
  display: block;
  width: fit-content;
  /* negative margins eat the SVG's transparent bloom margin (~23% per side) so
     the visible knot sits where the box edge appears to. Dial the multipliers
     if the mark crowds the header or the heading. */
  margin: calc(var(--series-mark-w) * -0.17) auto calc(var(--series-mark-w) * -0.13);
  cursor: pointer;
  text-decoration: none;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.7s ease, transform 0.7s ease;
}
.series-mark-link:hover,
.series-mark-link:focus-visible {
  filter: drop-shadow(0 0 18px rgba(232,213,167,0.34))
          drop-shadow(0 4px 32px rgba(199,155,97,0.15));
  transform: scale(1.02);
}
.series-mark-link:focus-visible {
  outline: 1px solid rgba(232,213,167,0.45);
  outline-offset: -2.4rem;
}
.series-mark-link:active {
  transform: scale(0.995);
  transition: transform 0.12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .series-mark { animation: none; }
  .series-mark-link { transition: none; }
  .series-mark-link:hover,
  .series-mark-link:focus-visible,
  .series-mark-link:active { transform: none; }
}
.series-page-hero .part-label {
  font-family: 'Cinzel', serif; font-size: 0.62rem;
  letter-spacing: 0.52em; text-transform: uppercase;
  color: var(--gold); opacity: 0.8; display: block; margin-bottom: 2.2rem;
}
.series-page-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300; font-style: italic;
  font-size: clamp(2.8rem, 8vw, 5.2rem); line-height: 1.05;
  color: var(--parchment); letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}
.series-page-hero .series-glyph {
  font-family: 'Tiro Devanagari Sanskrit', 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem); color: rgba(200,160,72,0.48);
  display: block; margin-top: -0.4rem; letter-spacing: 0.06em;
}
.series-page-hero::after {
  content: ''; display: block;
  width: 60px; height: 1px;
  background: var(--gold); opacity: 0.5;
  margin: 2.4rem auto 0;
}
.series-page-coda {
  text-align: center; padding: 5rem 5% 2rem;
  border-top: 1px solid var(--border); margin-top: 4rem;
}
.series-page-coda .coda-deva {
  font-family: 'Tiro Devanagari Sanskrit', 'Amiri', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold);
  letter-spacing: 0.06em; display: block;
}
.series-page-coda .coda-roman {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 1.2rem; color: rgba(240,232,216,0.6);
  display: block; margin-top: 0.9rem; letter-spacing: 0.04em;
}
.series-page-coda .coda-source {
  font-family: 'Cinzel', serif; font-size: 0.58rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted); display: block; margin-top: 1.6rem;
}
.series-onward {
  display: flex; justify-content: space-between; gap: 1.5rem;
  max-width: 1200px; margin: 3rem auto 0; padding: 0 5%; flex-wrap: wrap;
}
.series-onward a {
  font-family: 'Cinzel', serif; font-size: 0.64rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.4s ease;
}
.series-onward a:hover, .series-onward a:focus-visible { color: var(--gold); }
@media (max-width: 600px) { .series-page { padding: max(16vh, 78px) 6% 30px; } }

/* ═══════════════════════════════════════════════════════════
   SERIES HUB — the map (nine doors, landing page)
   ═══════════════════════════════════════════════════════════ */
/* Map doors use the same boxed grid as the series-page chapter cards:
   3-col grid with hairline gold gridlines, dark cells, top gold hover-bar.
   Content centred. Responsive 3 → 2 → 1 at the chapters-grid breakpoints. */
.series-hub {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(199,155,97,0.10);
  border: 1px solid var(--border);
}
.series-door {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; position: relative;
  padding: 3rem 2.2rem;
  background: rgba(12,9,10,0.95);
  overflow: hidden;
  transition: background 0.35s ease;
}
.series-door::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform 0.45s ease;
}
.series-door:hover, .series-door:focus-visible { background: rgba(200,160,91,0.04); outline: none; }
.series-door:hover::before, .series-door:focus-visible::before { transform: scaleX(1); }
.series-door:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.series-door .door-part {
  font-family: 'Cinzel', serif; font-size: 0.58rem;
  letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--gold); opacity: 0.85; display: block; margin-bottom: 1rem;
}
.series-door .door-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300; font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.08;
  color: var(--parchment); letter-spacing: -0.01em; display: block;
}
.series-door .door-glyph {
  font-family: 'Tiro Devanagari Sanskrit', 'Noto Serif TC', 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: rgba(200,160,72,0.42);
  letter-spacing: 0.06em; display: block; margin-top: 0.5rem;
}
.series-door .door-note {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 1.02rem; line-height: 1.55; color: rgba(240,232,216,0.55);
  margin-top: 1.1rem; max-width: 34ch;
}
.series-door .door-note em { font-style: normal; color: rgba(240,232,216,0.78); }
.series-door .door-arrow {
  font-family: 'Barlow', sans-serif; font-size: 1.15rem; color: var(--gold);
  margin-top: 1.3rem; opacity: 0; transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.series-door:hover .door-arrow, .series-door:focus-visible .door-arrow { opacity: 0.7; transform: translateY(0); }
@media (max-width: 980px) { .series-hub { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .series-hub { grid-template-columns: 1fr; } }
.series-door.nn::before      { background: var(--silver); }
.series-door.nn      .door-part { color: var(--silver); }
.series-door.aroha::before   { background: var(--rose); }
.series-door.aroha   .door-part { color: var(--rose-pale); }
.series-door.tt::before      { background: var(--forest); }
.series-door.tt      .door-part { color: var(--forest-pale); }
.series-door.ajati::before   { background: var(--indigo); }
.series-door.ajati   .door-part { color: var(--indigo-pale); }
.series-door.avesha::before  { background: var(--avesha); }
.series-door.avesha  .door-part { color: var(--avesha-pale); }
.series-door.puurva::before  { background: var(--patina); }
.series-door.puurva  .door-part { color: var(--patina-pale); }
.series-door.aof::before     { background: var(--amber); }
.series-door.aof     .door-part { color: var(--amber-pale); }
.series-door.samvit::before  { background: var(--samvit); }
.series-door.samvit  .door-part { color: var(--samvit-pale); }
@media (max-width: 600px) {
  .series-door { padding: 1.5rem 1.6rem 1.5rem 1.7rem; }
  .series-door .door-arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   LANDING — THRESHOLD VIEW MODE
   index.html only. Three full-viewport thresholds (hero →
   preface → map) that crossfade on click instead of scrolling.
   Inert anywhere without a .view element (e.g. series pages).
   ═══════════════════════════════════════════════════════════ */
.viewport { position: relative; }

.view {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transition: opacity 0.9s ease;
  outline: none;
}
.view.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}
/* The map is the arrival: doors, closing sutra and footer scroll
   as a single screen. Hero and preface hold to the viewport and
   only scroll internally as a fallback on very short screens. */
.view--map { scroll-behavior: smooth; }

/* Hero and preface centre vertically within the viewport; the map stays
   top-aligned so its doors, sutra and footer scroll as one screen.
   margin:auto (not justify-content) keeps the top reachable when a short
   screen makes the content overflow. Vertical padding clears the header. */
.view:not(.view--map) {
  display: flex;
  flex-direction: column;
  padding: 112px 0 40px;
}
.view:not(.view--map) > * {
  margin-top: auto;
  margin-bottom: auto;
}
.viewport #home { min-height: 0; padding-top: 0; }
.viewport #preface.preface {
  padding-top: 0; padding-bottom: 0;
  border-top: none;
}

@media (prefers-reduced-motion: reduce) {
  .view { transition: none; }
}

/* ── NAV MARK ──────────────────────────────────────────────────────────────
   The header logo was the one mark on the site carrying no treatment: the
   hero, preface and series marks all sit in a soft gold bloom and breathe on
   a 40s cycle, while .icon-nav rendered flat. It joins that family here.

   markBreathe hard-codes 38px/60px blur radii, sized for marks 220–520px
   wide; at the nav's 88px that halo would be two thirds of the mark. This is
   the same curve, same easing, same colour stops, scaled proportionally
   (~0.11× / ~0.18× of width, matching the hero's 46px at ~400px).

   The negative delay starts it mid-cycle so it does not pulse in lockstep
   with the preface mark on the landing page. Ambient only — the hover is a
   lift, not an event-driven animation. */

.icon-nav {
  /* base value carries the reduced-motion case, where the animation is off */
  filter: drop-shadow(0 0 12px rgba(199,155,97,0.15));
  animation: navMarkBreathe 40s ease-in-out infinite;
  animation-delay: -12s;
}

@keyframes navMarkBreathe {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(199,155,97,0.11)); }
  50%      { filter: drop-shadow(0 0 16px rgba(232,213,167,0.20)); }
}

.logo {
  transition: filter 0.6s ease, transform 0.6s ease;
  -webkit-tap-highlight-color: transparent;
}

.logo:hover, .logo:focus-visible {
  filter: drop-shadow(0 0 14px rgba(232,213,167,0.30)) drop-shadow(0 2px 20px rgba(199,155,97,0.14));
  transform: scale(1.02);
}

.logo:active { transform: scale(0.995); transition: transform 0.12s ease; }

@media (prefers-reduced-motion: reduce) {
  .icon-nav { animation: none; }
  .logo { transition: none; }
  .logo:hover, .logo:focus-visible, .logo:active { transform: none; }
}

/* ── FOOTER MARK ───────────────────────────────────────────────────────────
   Same treatment as .icon-nav, scaled for 120px rather than 88px, holding
   the hero's ratios (base ~0.115× width, breathe ~0.095× → ~0.15×).

   No hover state here: unlike .logo and the hero/preface/series marks, the
   footer mark is a bare <img> with no wrapping anchor — there is nothing to
   hover, and a lift on a non-control would be decoration attached to no
   gesture. Ambient only, like .preface-mark, whose hover lives on its link.

   The delay is offset differently from the nav's so the two do not pulse
   together when both are on screen in the map view. */

.icon-footer {
  filter: drop-shadow(0 0 14px rgba(199,155,97,0.15));
  animation: footerMarkBreathe 40s ease-in-out infinite;
  animation-delay: -26s;
}

@keyframes footerMarkBreathe {
  0%, 100% { filter: drop-shadow(0 0 11px rgba(199,155,97,0.11)); }
  50%      { filter: drop-shadow(0 0 18px rgba(232,213,167,0.20)); }
}

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

/* ── HOVER TORUS LAYER (hero mark) ─────────────────────────────────────────
   A translucent torus sits behind the homepage mark, concentric with the
   knot, and turns continuously. The rotation is ambient — it runs whether or
   not the pointer is present, so nothing about the motion is event-driven;
   the hover changes only opacity, which is the same class of response as the
   existing bloom-and-lift on .hero-mark-link. Turning the layer on and off
   with the animation itself would have made the movement a reaction to the
   cursor, which the design rules do not allow.

   Sized at 135% of the link box — a touch past the ray edge, which measures
   at 123%. Two measurements set that baseline: torus.svg's own
   ink fills only 63.2% of its viewBox (the rest is padding), and the star's
   horizontal and vertical streaks fade out at ~77.5% of the icon box. 0.775
   / 0.632 = 1.23. At 135% the layer overflows the link box by ~17% a side,
   which is harmless — it is absolutely positioned, nothing clips it, and the
   radial mask has already taken the rim to zero before it gets there.

   For the other reading of "rays": the four principal spikes tip out at
   43.5% of the box, so a ring at the spike tips rather than the streak ends
   is width: 69%. One value, same rule.

   pointer-events: none — the layer is decoration inside a control; the click
   target stays the mark. */

.hero-mark-link {
  position: relative;
  isolation: isolate;
}

.hero-mark-link .hero-mark {
  position: relative;
  z-index: 1;
}

.mark-torus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 135%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  /* the fade is slower than the mark's own 0.7s lift so the ring arrives
     after the bloom rather than with it */
  transition: opacity 1.1s ease;
}

/* the spin lives on an inner pseudo-element so the centring transform on
   .mark-torus is not overwritten by the rotation */
.mark-torus::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../torus.svg') center / contain no-repeat;
  /* softens the arcs so the ring thins out without taking the ink lower —
     below ~0.05 opacity the finer strokes fall under the panel's black point
     and the torus starts reading as broken rather than faint */
  filter: blur(0.6px);
  /* radial falloff — full strength through the centre, gone by the rim, so
     the ring reads as light gathering at the middle of the mark rather than
     as a drawn circle with an edge. The stops are weighted late (holding
     near-full to 34%) because a linear falloff on a form this faint eats the
     inner arcs before it touches the outer ones. -webkit- first for iOS. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.92) 34%,
    rgba(0,0,0,0.52) 62%,
    rgba(0,0,0,0.18) 82%,
    rgba(0,0,0,0) 96%);
  mask-image: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.92) 34%,
    rgba(0,0,0,0.52) 62%,
    rgba(0,0,0,0.18) 82%,
    rgba(0,0,0,0) 96%);
  animation: markTorusTurn 96s linear infinite;
}
@keyframes markTorusTurn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-mark-link:hover .mark-torus,
.hero-mark-link:focus-visible .mark-torus {
  opacity: 0.05;
}

@media (prefers-reduced-motion: reduce) {
  .mark-torus { transition: none; }
  .mark-torus::before { animation: none; }
}

/* ── TORUS LAYER — NAV MARK & PREFACE MARK ─────────────────────────────────
   The hover torus was built for the hero mark alone. The nav logo and the
   preface threshold carry the same knot and the same button treatment, so
   they carry the same ring. Nothing here is new geometry: 135% of the link
   box, the same radial mask, the same 96s turn — only the phase and the
   ink weight change, and both changes are forced by scale.

   Phase: three negative delays, chosen so no two marks visible at once sit
   at the same angle. The nav mark and the preface mark share a viewport on
   the landing page; a common phase would have read as one motion in two
   places rather than as ambient turning.

   Ink weight: the mark scales from ~460px (hero) to 320px (preface) to 88px
   (nav), but the torus strokes do not scale with it in perceived density —
   downsampling spreads the same ink across fewer device pixels, so the arcs
   render lighter, not thinner. The hero's 0.05 falls below the panel's black
   point well before the nav's size. Each context is corrected back to the
   hero's apparent weight: opacity up, blur down, in proportion.

   Ambient only, in both cases. The rotation runs whether or not the pointer
   is present; hover changes opacity alone, exactly as on the hero. */

/* ── nav mark ── */
.logo {
  position: relative;
  isolation: isolate;
}

.logo .icon-nav {
  position: relative;
  z-index: 1;
}

.logo .mark-torus::before {
  /* 0.6px of blur at 88px is a fifth of the arc width — it would take the
     ring to a smudge. Held just above the point where the strokes alias */
  filter: blur(0.3px);
  animation-delay: -31s;
}

.logo:hover .mark-torus,
.logo:focus-visible .mark-torus {
  opacity: 0.11;
}

/* ── preface mark ── */
.preface-enter-link {
  position: relative;
  isolation: isolate;
}

.preface-enter-link .preface-mark {
  position: relative;
  z-index: 1;
}

.preface-enter-link .mark-torus::before {
  filter: blur(0.5px);
  animation-delay: -63s;
}

.preface-enter-link:hover .mark-torus,
.preface-enter-link:focus-visible .mark-torus {
  opacity: 0.06;
}

/* ── torus layer — series mark ──
   Same size band as the preface mark (192–336px against 220–320px), so the
   same ink correction holds. Fourth phase in the set. The negative margins
   on .series-mark-link pull the box into the header and the title; the ring
   overflows both, which is harmless — the radial mask has taken it to zero
   well before it reaches anything. */
.series-mark-link {
  position: relative;
  isolation: isolate;
}

.series-mark-link .series-mark {
  position: relative;
  z-index: 1;
}

.series-mark-link .mark-torus::before {
  filter: blur(0.5px);
  animation-delay: -17s;
}

.series-mark-link:hover .mark-torus,
.series-mark-link:focus-visible .mark-torus {
  opacity: 0.06;
}



/* ── AMBIENT LANDING AUDIO ─────────────────────────────────────────────
   Sound begins with the page. It cannot begin before a user activation
   gesture (see the note in site.js), so the toggle is also the recovery
   surface: if the browser refused the opening play, the first click on
   the page starts it and this control shows the state either way.       */
.ambient-toggle {
  position: fixed;
  right: clamp(14px, 2.2vw, 26px);
  bottom: clamp(14px, 2.2vw, 26px);
  z-index: 60;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 8, 0.55);
  border: 1px solid rgba(199, 155, 97, 0.20);
  border-radius: 50%;
  color: var(--gold);
  opacity: 0.34;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: opacity 0.8s ease, border-color 0.8s ease, background-color 0.8s ease;
}
.ambient-toggle:hover,
.ambient-toggle:focus-visible {
  opacity: 0.92;
  border-color: rgba(199, 155, 97, 0.42);
  background: rgba(8, 6, 8, 0.78);
}
.ambient-toggle:focus-visible {
  outline: 1px solid rgba(199, 155, 97, 0.55);
  outline-offset: 3px;
}
.ambient-toggle svg { width: 17px; height: 17px; display: block; overflow: visible; }
.ambient-toggle .wave  { opacity: 1; transition: opacity 0.6s ease; }
.ambient-toggle .slash { opacity: 0; transition: opacity 0.6s ease; }
.ambient-toggle.is-muted .wave  { opacity: 0.20; }
.ambient-toggle.is-muted .slash { opacity: 1; }
@media (max-width: 600px) { .ambient-toggle { width: 34px; height: 34px; } }
@media print { .ambient-toggle { display: none; } }