/* ============================================================
   HAMILTON 2092 GUIDEBOOK — FINAL GRID LAYOUT v3
   6-Column × 8-Row Module Grid — Layout (1, 2, 2, 1)
   Brand: brand-guidelines-final1.html
   Grid: GRID GUIDEBOOK.ai / chapter 1.svg
   Chapter colors: extracted from gradient reference PNG
   ============================================================

   NEW GRID ANATOMY:
   ┌────┬──────────────┬──────────────┬────┐
   │ R1 │   CHAPTER HEADER (all 6)   │    │
   ├────┼──────────────┬──────────────┼────┤
   │    │              │              │    │
   │ ML │  MAIN COPY   │   GUIDE /    │ MR │
   │    │  (cols 2-3)  │  SPEC VOICE  │    │
   │    │              │  (cols 4-5)  │    │
   │    │              │              │    │
   ├────┴──────────────┴──────────────┴────┤
   │ R7 │      ANNOTATION BAR (all 6)      │
   ├────┴──────────────────────────────────┤
   │ R8 │      PAGE FOOTER (all 6)         │
   └───────────────────────────────────────┘
   ML = info-left (col 1) — left margin: key cross-refs, chapter markers
   MR = info-right (col 6) — right margin: source truth, citations

   Module: 77.17 × 76.75px | Gap: 10px | Margin: 2in print / min(2in,6vw) screen
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600&display=swap');

/* ── SELF-HOSTED FONTS ─────────────────────────────────────── */

@font-face {
  font-family: 'Augify';
  src: url('fonts/Augify.woff2') format('woff2'),
       url('fonts/Augify.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('fonts/ObjectSans-Regular.woff2') format('woff2'),
       url('fonts/ObjectSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('fonts/ObjectSans-Medium.woff2') format('woff2'),
       url('fonts/ObjectSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('fonts/ObjectSans-Bold.woff2') format('woff2'),
       url('fonts/ObjectSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('fonts/FoundersGrotesk-Light.woff2') format('woff2'),
       url('fonts/FoundersGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('fonts/FoundersGrotesk-Regular.woff2') format('woff2'),
       url('fonts/FoundersGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('fonts/FoundersGrotesk-RegularItalic.woff2') format('woff2'),
       url('fonts/FoundersGrotesk-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('fonts/FoundersGrotesk-Medium.woff2') format('woff2'),
       url('fonts/FoundersGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('fonts/FoundersGrotesk-Bold.woff2') format('woff2'),
       url('fonts/FoundersGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS ─────────────────────────────────────────── */

:root {
  /* Brand — Primary */
  --harbour-green:  #2C7A69;
  --sunlit-apricot: #E2A65B;
  --night-air:      #24363A;
  --cloud-linen:    #FBF6EE;

  /* Brand — Secondary */
  --bloom-coral:    #E08C74;
  --meadow-light:   #A7C98B;
  --lake-sky:       #82B4D8;
  --dream-lilac:    #D39BC9;

  /* Brand — Neon Accents */
  --luminous-cyan:  #52E6F2;
  --solar-orchid:   #FF66B3;
  --citrus-glow:    #D6F25A;
  --aurora-violet:  #6A54AD;
  --horizon-pink:   #FF8DA1;
  --forge-gold:     #FFC857;

  /* Typography */
  --font-display:    'Augify', sans-serif;
  --font-subheading: 'Object Sans', sans-serif;
  --font-body:       'Founders Grotesk', sans-serif;
  --font-caption:    'Founders Grotesk', sans-serif;

  /* Grid geometry */
  --grid-gap:    10px;

  /* Card system */
  --card-border: rgba(36, 54, 58, 0.12);
  --card-shadow: 0 18px 38px rgba(36, 54, 58, 0.08);
  --card-radius: 12px;

  /* Chapter color defaults — overridden per page with data-chapter attribute */
  --ch-top:    var(--cloud-linen);
  --ch-bottom: var(--cloud-linen);
  --ch-accent: var(--harbour-green);
  --ch-text:   var(--night-air);
  --ch-text-on-bg: var(--night-air);  /* text color when bg is a chapter gradient */

  /* ── V2 Design Tokens — blur levels ─────────────────────────── */
  --blur-subtle:   blur(4px);
  --blur-standard: blur(12px) saturate(1.3);
  --blur-soft:     blur(16px) saturate(1.3);
  --blur-badge:    blur(10px);

  /* ── V2 Design Tokens — border strokes ──────────────────────── */
  --border-divider: 1px solid rgba(36, 54, 58, 0.10);
  --border-glass:   1px solid rgba(255, 255, 255, 0.12);
  --border-linen:   1px solid rgba(255, 255, 255, 0.60);
}

/* ── CHAPTER COLOR SYSTEM ──────────────────────────────────── */
/* Apply to <html> via data-chapter="front|1|2|3|4|5|6|timeline|back" */

[data-chapter="front"] {
  --ch-top:    #FBF6EE;
  --ch-bottom: #D4C0E0;
  --ch-accent: #9B8AC0;
  --ch-text-on-bg: #24363A;
}

[data-chapter="1"] {
  --ch-top:    #FBF6EE;
  --ch-bottom: #798cc2;
  --ch-accent: #798cc2;
  --ch-text-on-bg: #24363A;
}

[data-chapter="2"] {
  --ch-top:    #FBF6EE;
  --ch-bottom: #2C7A69;
  --ch-accent: #2C7A69;
  --ch-text-on-bg: #24363A;
}

[data-chapter="3"] {
  --ch-top:    #FBF6EE;
  --ch-bottom: #E2A65B;
  --ch-accent: #E2A65B;
  --ch-text-on-bg: #24363A;
}

[data-chapter="4"] {
  --ch-top:    #FBF6EE;
  --ch-bottom: #E08C74;
  --ch-accent: #E08C74;
  --ch-text-on-bg: #24363A;
}

[data-chapter="5"] {
  --ch-top:    #FBF6EE;
  --ch-bottom: #D39BC9;
  --ch-accent: #D39BC9;
  --ch-text-on-bg: #24363A;
}

[data-chapter="6"] {
  --ch-top:    #FBF6EE;
  --ch-bottom: #52E6F2;
  --ch-accent: #52E6F2;
  --ch-text-on-bg: #24363A;
}

[data-chapter="timeline"],
[data-chapter="back"] {
  --ch-top:    #FBF6EE;
  --ch-bottom: #8AABB5;
  --ch-accent: #52E6F2;
  --ch-text-on-bg: #24363A;
}

/* ── RESET & BASE ───────────────────────────────────────────── */

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

img { max-width: 100%; height: auto; }

html { font-size: 11pt; }

/* ── BACKGROUND GRADIENT + GRAIN ───────────────────────────── */
/* Add class .chapter-bg to <body> to activate the gradient      */

body {
  font-family: var(--font-body);
  color: var(--night-air);
  line-height: 1.65;
  background: var(--cloud-linen);
  position: relative;
}

body.chapter-bg {
  background:
    linear-gradient(180deg,
      var(--ch-top)    0%,
      var(--ch-bottom) 100%
    );
  min-height: 100vh;
  color: var(--ch-text-on-bg);
}

/* Film grain overlay — SVG turbulence, mix-blend: overlay */
body.chapter-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.25;
}

body.chapter-bg > *:not(.nav-top) {
  position: relative;
  z-index: 1;
}

/* ── STICKY NAV ─────────────────────────────────────────────── */

/* ── SKIP LINK ────────────────────────────────────────────── */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75em 1.5em;
  background: var(--sunlit-apricot);
  color: var(--night-air);
  font-family: var(--font-subheading);
  font-size: 10pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
}

.skip-to-content:focus {
  left: 50%;
  transform: translateX(-50%);
}

.nav-top {
  background: rgba(36, 54, 58, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.15em min(2in, 6vw) 0.75em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  box-shadow: 0 12px 24px rgba(36, 54, 58, 0.18);
  position: sticky;
  top: 0;
  z-index: 200;
}

.nav-wordmark {
  font-family: var(--font-display);
  font-size: 15pt;
  letter-spacing: 0.02em;
  color: var(--cloud-linen);
  text-decoration: none;
  white-space: nowrap;
}

.mycelium-lock {
  background: none;
  border: none;
  padding: 0 0 0 0.5em;
  cursor: pointer;
  color: rgba(251, 246, 238, 0.40);
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  transition: color 0.25s ease, opacity 0.25s ease;
  opacity: 0.7;
  line-height: 1;
}
.mycelium-lock:hover { color: var(--luminous-cyan); opacity: 1; }
.mycelium-lock:focus-visible {
  outline: 2px solid var(--sunlit-apricot);
  outline-offset: 3px;
  border-radius: 3px;
}

.nav-links {
  display: flex;
  gap: 1.6em;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-subheading);
  font-size: 11pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(251, 246, 238, 0.82);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--sunlit-apricot);
}

/* ── FOCUS INDICATORS ─────────────────────────────────────── */

.nav-links a:focus-visible,
.nav-wordmark:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--sunlit-apricot);
  outline-offset: 3px;
  border-radius: 3px;
}

.nav-sub a:focus-visible {
  outline-offset: -2px;
  background: rgba(251, 246, 238, 0.08);
}

/* ── NAV DROPDOWNS ─────────────────────────────────────────── */

.nav-dropdown {
  position: relative;
}

.nav-dropdown > a::after {
  content: ' \25BE';
  font-size: 6pt;
  opacity: 0.5;
}

.nav-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(36, 54, 58, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0 0 8px 8px;
  padding: 0.5em 0;
  min-width: 180px;
  list-style: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 300;
}

/* Dropdown opens on click (toggle via JS), not hover */
.nav-dropdown.dropdown-open > .nav-sub {
  display: block;
}

.nav-sub li {
  padding: 0;
}

.nav-sub a {
  display: block;
  padding: 0.5em 1.2em;
  white-space: nowrap;
  font-size: 8.5pt !important;
  letter-spacing: 0.08em !important;
}

.nav-sub a:hover {
  background: rgba(251, 246, 238, 0.08);
}

/* Keep rightmost dropdowns (Appendix, Front Matter) from overflowing the viewport */
.nav-dropdown:last-child .nav-sub,
.nav-dropdown:nth-last-child(2) .nav-sub {
  left: auto;
  right: 0;
  transform: none;
}

.nav-sub a {
  pointer-events: auto;
}

/* ── HAMBURGER TOGGLE ──────────────────────────────────────── */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5em;
  z-index: 210;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cloud-linen);
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 1px;
}

/* Animate to X when open */
.nav-open .nav-toggle span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.nav-open .nav-toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── COLUMN GUIDE ROW FIX ──────────────────────────────────── */
/* Pages with a full-span column guide between header and zones
   need zones shifted down by one row.
   Add class .has-column-guide to <main class="page-grid"> */

.page-grid.has-column-guide .full-span { grid-row: 2; }
.page-grid.has-column-guide .info-left { grid-row: 3 / 9; }
.page-grid.has-column-guide .main-copy { grid-row: 3 / 8; }
.page-grid.has-column-guide .guide-content { grid-row: 3 / 8; }
.page-grid.has-column-guide .info-right { grid-row: 3 / 8; }
.page-grid.has-column-guide .annotation-bar { grid-row: 8; }
.page-grid.has-column-guide .page-footer { grid-row: 9; }

/* Pages with TWO full-span sections need zones shifted further */
.page-grid.has-column-guide .full-span:nth-of-type(2) { grid-row: 3; }
.page-grid.has-column-guide.has-two-guides .info-left { grid-row: 4 / 10; }
.page-grid.has-column-guide.has-two-guides .main-copy { grid-row: 4 / 9; }
.page-grid.has-column-guide.has-two-guides .guide-content { grid-row: 4 / 9; }
.page-grid.has-column-guide.has-two-guides .info-right { grid-row: 4 / 9; }
.page-grid.has-column-guide.has-two-guides .annotation-bar { grid-row: 9; }
.page-grid.has-column-guide.has-two-guides .page-footer { grid-row: 10; }

/* ── PAGE GRID — (1, 2, 2, 1) ──────────────────────────────── */
/* ── ZONE CONTRACT (V2) ──────────────────────────────────────────
   Zone A │ .info-left  / .s-left  │ col 1     │ Specimen Jar glass
   Zone B │ .main-copy  / .s-main  │ cols 2–3  │ Clean page — no surface
   Zone C │ .guide-content/.s-guide│ cols 4–5  │ The Voice — linen/frosted
   Zone D │ .info-right / .s-right │ col 6     │ The Strip — recessed chips
   Zone X │ any breakout element   │ variable  │ Columns snap to X's range

   Component placement rules:
   • .data-card + .sidebar-note[data-credibility] → Zone A (.s-left)
   • .field-note (character voices)               → Zone C (.s-guide)
   • .sidebar-note (citations/facts)              → Zone D (.s-right)
   • .section-block wraps one row of A+B+C+D
   ─────────────────────────────────────────────────────────────── */

.page-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;  /* all rows auto-sized — no 1fr stretching between sections */
  gap: var(--grid-gap);
  padding: min(2in, 5vw);
  min-height: calc(100vh - 3em); /* subtract nav height */
  max-width: 1600px;
  margin: 0 auto;
}

/* ── R1 — CHAPTER HEADER ─────────────────────────────────────── */

.chapter-header {
  grid-column: 1 / -1;
  grid-row: 1;
  border-bottom: 2px solid var(--ch-accent, var(--sunlit-apricot));
  padding-bottom: 0.5em;
}

.chapter-kicker {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 8pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ch-accent, var(--sunlit-apricot));
  margin-bottom: 0.3em;
  /* Lumen — gentle backlit halo in warm chapter accent */
  text-shadow: 0 0 10px var(--lumen-text-halo);
  animation: lumen-breathe 5.5s ease-in-out infinite;
}

.chapter-title {
  font-family: var(--font-display);
  font-size: 18pt;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.chapter-subtitle {
  font-family: var(--font-subheading);
  font-size: 9pt;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ch-accent, var(--harbour-green));
  margin-top: 0.35em;
  opacity: 0.8;
}

/* ── R2 — SECTION INTRO ─────────────────────────────────────── */

.section-intro {
  grid-column: 2 / 6;  /* spans only the inner 4 cols */
  grid-row: 2;
  padding: 0.5em 0;
  font-family: var(--font-subheading);
  font-size: 13pt;
  font-weight: 500;
  color: inherit;
  opacity: 0.65;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--card-border);
}

/* ── ZONE: LEFT MARGIN — col 1, rows 2-7 ───────────────────── */
/* Glass slab column — translucent, refractive, prismatic        */

.info-left {
  grid-column: 1;
  grid-row: 2 / 8;
  padding: 0.75em 0.85em 0.75em 0.5em;
  border-right: 1px solid rgba(36, 54, 58, 0.06);
  border-radius: 0 12px 12px 0;
}

/* ── Glass slab cards — translucent glass with light refracting */
/* through internal texture. Like a thick glass block catching    */
/* prismatic rainbow light diagonally through its body.          */

.info-left .sidebar-note,
.info-left .data-card {
  /* Translucent glass — lets page bg show through               */
  background:
    /* Liquid glass gloss — curved top highlight like thick glass */
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.08) 25%,
      rgba(255, 255, 255, 0.0) 45%,
      rgba(0, 0, 0, 0.02) 100%
    ),
    /* Diagonal prismatic refraction — light passing through     */
    linear-gradient(135deg,
      hsla(30, 80%, 60%, 0.18) 0%,
      hsla(45, 85%, 55%, 0.15) 12%,
      hsla(120, 50%, 50%, 0.10) 25%,
      hsla(190, 70%, 55%, 0.20) 40%,
      hsla(220, 65%, 55%, 0.18) 55%,
      hsla(270, 55%, 50%, 0.15) 70%,
      hsla(300, 50%, 48%, 0.12) 85%,
      hsla(340, 45%, 45%, 0.08) 100%
    ),
    /* Glass body — semi-transparent dark base                   */
    linear-gradient(180deg,
      rgba(30, 25, 50, 0.78) 0%,
      rgba(25, 22, 45, 0.82) 100%
    );
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    /* Glass slab sitting on surface — deep, physical shadow     */
    0 10px 30px rgba(10, 5, 25, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.15),
    /* Internal glass edge highlights                            */
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset -1px 0 0 rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.95);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  width: fit-content;
  max-width: 100%;
}

/* Internal glass texture — fine particles suspended in glass    */
/* Like tiny bubbles or grain visible when light passes through  */
.info-left .sidebar-note::after,
.info-left .data-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Text — soft, slightly glowing, pressed into glass             */
.info-left .sidebar-note strong,
.info-left .data-card strong {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}

.info-left .data-card .data-label {
  color: rgba(200, 215, 240, 0.60);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.info-left .data-card .data-value {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}

.info-left .sidebar-note p,
.info-left .sidebar-note span,
.info-left .data-card p,
.info-left .data-card span {
  color: rgba(230, 238, 250, 0.85);
  position: relative;
  z-index: 2;
}

.info-left .data-card .data-sub {
  color: rgba(200, 215, 235, 0.60);
  position: relative;
  z-index: 2;
}

.info-left .sidebar-note-label {
  position: relative;
  z-index: 2;
}

/* Credibility — glass base maintained                           */
.info-left .sidebar-note[data-credibility="fact"],
.info-left .sidebar-note[data-credibility="plausible"],
.info-left .sidebar-note[data-credibility="speculative"],
.info-left .data-card[data-credibility="fact"],
.info-left .data-card[data-credibility="plausible"],
.info-left .data-card[data-credibility="speculative"] {
  border-left: none;
}

.info-left .sidebar-note[data-credibility="fact"]::before,
.info-left .data-card[data-credibility="fact"]::before {
  color: #7ee8c0; position: relative; z-index: 2;
}
.info-left .sidebar-note[data-credibility="plausible"]::before,
.info-left .data-card[data-credibility="plausible"]::before {
  color: #e8d08a; position: relative; z-index: 2;
}
.info-left .sidebar-note[data-credibility="speculative"]::before,
.info-left .data-card[data-credibility="speculative"]::before {
  color: #e8a898; position: relative; z-index: 2;
}

/* Field notes — same glass slab treatment                       */
.info-left .field-note {
  background:
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.06) 25%,
      rgba(255, 255, 255, 0.0) 45%,
      rgba(0, 0, 0, 0.02) 100%
    ),
    linear-gradient(140deg,
      hsla(200, 70%, 55%, 0.15) 0%,
      hsla(260, 55%, 50%, 0.18) 35%,
      hsla(320, 50%, 48%, 0.12) 65%,
      hsla(30, 60%, 50%, 0.10) 100%
    ),
    linear-gradient(180deg,
      rgba(28, 24, 48, 0.80) 0%,
      rgba(24, 20, 42, 0.84) 100%
    );
  border-left: none;
  color: rgba(230, 238, 250, 0.90);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  transform-style: preserve-3d;
  box-shadow:
    0 10px 30px rgba(10, 5, 25, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.info-left .field-note::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.info-left .field-note em,
.info-left .field-note p {
  color: rgba(225, 232, 245, 0.85);
  position: relative;
  z-index: 2;
}

.info-left .field-note .field-note-header {
  position: relative;
  z-index: 2;
}

/* ── ZONE: MAIN COPY — cols 2-3, rows 2-7 ──────────────────── */

.main-copy {
  grid-column: 2 / 4;
  grid-row: 2 / 7;
  padding: 0 1.25em;
}

/* ── ZONE: GUIDE / SPEC VOICE — cols 4-5, rows 2-7 ─────────── */

.guide-content {
  grid-column: 4 / 6;
  grid-row: 2 / 7;
  padding: 0 1.25em;
  border-left: 1px solid rgba(36, 54, 58, 0.1);
}

/* Glass panel for guide-content column on chapter pages */
.page-grid .guide-content {
  background: linear-gradient(155deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 45%, rgba(28,44,80,0.07) 100%) !important;
  backdrop-filter: blur(10px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 3px 10px rgba(10,18,50,0.18),
    inset 0 1px 3px rgba(10,18,50,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 4px 20px rgba(0,0,0,0.07) !important;
  padding: 1.1em 1.25em !important;
}

/* ── ZONE: RIGHT MARGIN — col 6, rows 2-7 ──────────────────── */

.info-right {
  grid-column: 6;
  grid-row: 2 / 8;
  padding: 0 0 0 0.85em;
  border-left: 1px solid rgba(36, 54, 58, 0.1);
}

/* ── R7 — ANNOTATION BAR ─────────────────────────────────────── */

.annotation-bar {
  grid-column: 2 / 6;   /* inner 4 cols only */
  grid-row: 7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0;
  border-top: 1px solid rgba(36, 54, 58, 0.1);
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  opacity: 0.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── R8 — PAGE FOOTER ─────────────────────────────────────────── */

.page-footer {
  grid-column: 1 / -1;
  grid-row: 8;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5em 0;
  border-top: 2px solid var(--ch-accent, var(--sunlit-apricot));
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  opacity: 0.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── SECTION BLOCK — cross-column row alignment ─────────────── */
/*
   Each chapter section gets a .section-block that spans all 6 cols
   and uses CSS subgrid so its 4 children align to the parent tracks.
   This keeps info-left / main-copy / guide-content / info-right in
   the same horizontal band as you scroll — no more drift between zones.

   HTML pattern:
   <div class="section-block">
     <div class="s-left">   ...sidebar for §X... </div>
     <div class="s-main">   ...text for §X...    </div>
     <div class="s-guide">  ...field note for §X...</div>
     <div class="s-right">  ...citation for §X... </div>
   </div>
*/

.section-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  padding-bottom: 1in;
}

.section-block > .s-left {
  grid-column: 1;
  padding: 0 0.85em 0 0;
  border-right: 1px solid rgba(36,54,58,0.08);
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7.5pt;
  line-height: 1.55;
}

.section-block > .s-main {
  grid-column: 2 / 4;
  padding: 0 1.25em;
}

.section-block > .s-guide {
  grid-column: 4 / 6;
  padding: 0 1.25em;
  border-left: 1px solid rgba(36,54,58,0.08);
  /* Sticky guide column — follows reader through long narrative */
  position: sticky;
  top: 4em;
  align-self: start;
  max-height: calc(100vh - 5em);
  overflow-y: auto;
  scrollbar-width: thin;
}

.section-block > .s-right {
  grid-column: 6;
  padding: 0 0 0 0.85em;
  border-left: 1px solid rgba(36,54,58,0.08);
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7.5pt;
  line-height: 1.55;
  /* Sticky right margin — stays visible alongside narrative */
  position: sticky;
  top: 4em;
  align-self: start;
  max-height: calc(100vh - 5em);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* A section block with no guide or right content — main only */
.section-block.s-wide > .s-main {
  grid-column: 2 / 6;
}

/* Paragraph-paired blocks: field-note is aligned to its specific paragraph,
   not sticky-floating across the whole section. Use for contextual B↔C pairing. */
.section-block.s-paired > .s-guide,
.section-block.s-paired > .s-right {
  position: static;
  max-height: none;
  overflow-y: visible;
  align-self: start;
}

/* ── Two-column readability: s-main / guide-content relationship ── */

/* Subtle separator between main narrative and guide/editorial column */
.s-main,
.main-copy {
  border-right: 1px solid rgba(44, 122, 105, 0.08);
  padding-right: 0.75em;
}

/* Guide column text hierarchy — slightly smaller than main to establish reading priority */
.guide-content p,
.s-guide p {
  font-size: 0.92em;
  line-height: 1.65;
}

/* Align first child of guide-content with s-main top */
.guide-content > *:first-child,
.s-guide > *:first-child {
  margin-top: 0;
}

/* Guide-content sidebar-notes: warm linen treatment (not holographic glass)
   to differentiate editorial voice from speculative s-left glass cards */
.guide-content .sidebar-note,
.s-guide .sidebar-note {
  background: linear-gradient(135deg, rgba(251,246,238,0.94) 0%, rgba(236,220,198,0.88) 100%) !important;
  backdrop-filter: blur(4px) !important;
  /* Override holographic glass if inherited */
  --card-bg: transparent;
}
/* Field notes in guide/voice column: warm linen treatment (matches sidebar-note above) */
.guide-content .field-note,
.s-guide .field-note {
  background: linear-gradient(135deg, rgba(251,246,238,0.94) 0%, rgba(236,220,198,0.88) 100%) !important;
  backdrop-filter: blur(4px) !important;
}
/* Keep credibility badges readable on linen background */
.guide-content .sidebar-note[data-credibility]::before,
.s-guide .sidebar-note[data-credibility]::before {
  color: var(--night-air, #24363A);
  background: rgba(44, 122, 105, 0.12);
}

/* ── SPAN HELPERS ───────────────────────────────────────────── */

.full-span       { grid-column: 1 / -1; }   /* all 6 cols */
.inner-span      { grid-column: 2 / 6; }     /* inner 4 cols — (1,4,1) content area */
.span-left-half  { grid-column: 1 / 4; }     /* left 3 cols */
.span-right-half { grid-column: 4 / 7; }     /* right 3 cols */
.span-main       { grid-column: 2 / 4; }     /* main copy zone only */
.span-guide      { grid-column: 4 / 6; }     /* guide voice zone only */
.span-main-wide  { grid-column: 2 / 5; }     /* main copy + 1 guide col */

/* ── BADGE BOX — text container on colorful/dark backgrounds ── */
/*
   Use on any element when the chapter-bg gradient makes plain text
   hard to read. Creates a linen/white floating box.
*/

.badge-box {
  background: rgba(251, 246, 238, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--card-radius);
  padding: 1.25em 1.5em;
  border: 1px solid rgba(36, 54, 58, 0.08);
  box-shadow: 0 8px 32px rgba(36, 54, 58, 0.12);
  color: var(--night-air);
  margin-bottom: 1em;
}

.badge-box h2,
.badge-box h3,
.badge-box h4,
.badge-box p { color: var(--night-air); }

/* Dark variant (for light chapter backgrounds) */
.badge-box.dark {
  background: rgba(36, 54, 58, 0.88);
  color: var(--cloud-linen);
}

.badge-box.dark h2,
.badge-box.dark h3,
.badge-box.dark h4,
.badge-box.dark p { color: var(--cloud-linen); }

/* Accent-bordered variant */
.badge-box.accented {
  border-left: 4px solid var(--ch-accent, var(--sunlit-apricot));
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
}

/* ── IMAGE PLACEHOLDERS ─────────────────────────────────────── */
/*
   SIMPLE — chapter color fill, figure number + title only.
   No text overlay, no texture, no dashed border.
   Position via inline style: style="grid-column:2/5; grid-row:3/8;"
   Height = module count × ~80px (1 row≈80px, 7 rows≈560px)

   Text cells in adjacent rows adapt naturally — the grid item
   occupies its declared rows/cols and surrounding cells fill in.

   Usage:
   <div class="img-placeholder" style="grid-column:2/5; grid-row:3/7; height:320px;">
     <span class="img-fig">Fig. 04</span>
     <span class="img-title">City Overview Map</span>
   </div>
*/

.img-placeholder {
  /* Holographic foil base + soft glass overlay */
  background:
    linear-gradient(160deg,
      rgba(82, 230, 242, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 30%,
      rgba(211, 155, 201, 0.10) 50%,
      rgba(255, 255, 255, 0.04) 70%,
      rgba(106, 84, 173, 0.10) 100%
    ),
    linear-gradient(135deg,
      hsl(210, 50%, 28%) 0%,
      hsl(195, 60%, 38%) 25%,
      hsl(220, 50%, 42%) 50%,
      hsl(260, 40%, 38%) 75%,
      hsl(200, 55%, 30%) 100%
    );
  border-radius: 12px;
  border: 1px solid rgba(82, 230, 242, 0.20);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.75em 1em;
  min-height: 80px;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(82, 230, 242, 0.10),
    0 4px 20px rgba(20, 40, 80, 0.20);
}

/* Glass grain texture on figure placeholders */
.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23fg)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* Figure number — bottom left, small caption */
.img-fig {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
  margin-bottom: 0.2em;
}

/* Image title — below fig number */
.img-title {
  font-family: var(--font-subheading);
  font-size: 9pt;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.2;
}

/* Row height helpers — module × 80px */
.img-ph--r1  { min-height:  80px; }
.img-ph--r2  { min-height: 160px; }
.img-ph--r3  { min-height: 240px; }
.img-ph--r4  { min-height: 320px; }
.img-ph--r5  { min-height: 400px; }
.img-ph--r6  { min-height: 480px; }
.img-ph--r7  { min-height: 560px; }

/* ── LAYOUT VARIANT: (1, 4, 1) ──────────────────────────────── */
/*
   Use when inner content is wide (e.g. full-page maps, long timelines).
   The 4-wide zone spans cols 2-5. Row height 5-7 modules.
   Outer margins (cols 1 and 6) remain for annotations.

   Usage: add class .layout-wide to .main-copy OR .guide-content
   when content overflows. The wide zone replaces both col 2-3 and 4-5.
*/

.layout-wide {
  grid-column: 2 / 6 !important;   /* spans inner 4 cols */
}

/* Hero rebalance — chapter-opener A | B+C | D + X-breakout */
.hero-intro-block {
  align-self: center;
  padding: 0 0.4em;
}
.hero-intro-block .chapter-lede {
  font-family: var(--font-display);
  font-size: 18pt;
  line-height: 1.15;
  margin-bottom: 0.6em;
  color: var(--ch-accent, var(--harbour-green));
}
.hero-intro-block p { margin-bottom: 0.6em; }
.hero-zone-a img, .hero-zone-d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
}
.hero-zone-a figcaption, .hero-zone-d figcaption {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 0.35em;
}

/* For page sections where only (1,4,1) makes sense, use on the parent: */
.section-wide {
  display: contents;  /* dissolve the section wrapper */
}

.section-wide > * {
  grid-column: 2 / 6;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */

h1 {
  font-family: var(--font-display);
  font-size: 42pt;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 0.5em;
}

h2 {
  font-family: var(--font-display);
  font-size: 22pt;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin-bottom: 0.4em;
  margin-top: 1.2em;
}

h2:first-child { margin-top: 0; }

h3 {
  font-family: var(--font-subheading);
  font-size: 13pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4em;
  margin-top: 1em;
  color: var(--ch-accent, var(--harbour-green));
}

h4 {
  font-family: var(--font-subheading);
  font-size: 11pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3em;
  margin-top: 0.9em;
}

h5 {
  font-family: var(--font-subheading);
  font-size: 10pt;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.25em;
  margin-top: 0.75em;
}

p {
  font-size: 11pt;
  line-height: 1.65;
  margin-bottom: 0.85em;
}

p:last-child { margin-bottom: 0; }

ul, ol {
  padding-left: 1.4em;
  margin-bottom: 0.85em;
}

li {
  font-size: 10.5pt;
  line-height: 1.55;
  margin-bottom: 0.2em;
}

/* Numbered district / enumerated-set list — used in 1.4 district roster */
.district-list {
  list-style: decimal;
  padding-left: 1.8em;
  margin: 0.6em 0 1em;
  font-family: var(--font-body);
}

.district-list li {
  font-size: 10.5pt;
  line-height: 1.7;
  margin-bottom: 0.25em;
  padding-left: 0.25em;
}

.district-list li::marker {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 9pt;
  color: var(--ch-accent, var(--harbour-green));
  letter-spacing: 0.06em;
}

strong { font-weight: 600; }
em     { font-style: italic; }

/* ── FIELD NOTE — guide-content zone component ──────────────── */

.field-note {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-left: none;
  border-radius: 12px;
  padding: 1em 1.25em;
  margin-bottom: 1.1em;
  font-style: italic;
  font-size: 10.5pt;
  line-height: 1.55;
  color: var(--night-air);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.field-note-header {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-accent, var(--harbour-green));
  font-style: normal;
  margin-bottom: 0.5em;
  display: block;
  opacity: 0.85;
  align-self: flex-start;
}

.field-note p { font-size: 10.5pt; }

/* On chapter-bg, field notes get badge-box treatment */
body.chapter-bg .field-note {
  background: rgba(255, 255, 255, 0.65);
  border-left: none;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  color: var(--night-air);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

body.chapter-bg .field-note-header {
  color: var(--ch-accent, var(--sunlit-apricot));
}

/* ── SIDEBAR NOTE — info zone component ─────────────────────── */

.sidebar-note {
  position: relative;
  background: rgba(251, 246, 238, 0.78);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 0.7em 0.85em;
  margin-bottom: 0.85em;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);
  font-size: 9pt;
  line-height: 1.45;
  color: var(--night-air);
  overflow: hidden;
}

.sidebar-note-label {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ch-accent, var(--sunlit-apricot));
  display: block;
  margin-bottom: 0.4em;
}

.sidebar-note p { font-size: 9pt; margin-bottom: 0.4em; }
.sidebar-note p:last-child { margin-bottom: 0; }

/* ── CREDIBILITY SPECTRUM ──────────────────────────────────── */
/* data-credibility="fact|plausible|speculative" on .data-card and .sidebar-note */

.data-card[data-credibility],
.sidebar-note[data-credibility] {
  position: relative;
}

/* Fact — harbour-green */
.data-card[data-credibility="fact"],
.sidebar-note[data-credibility="fact"] {
  border-left: none;
  background: linear-gradient(180deg,
    rgba(44, 122, 105, 0.10) 0%,
    rgba(44, 122, 105, 0.06) 100%
  );
}

/* Plausible — sunlit-apricot */
.data-card[data-credibility="plausible"],
.sidebar-note[data-credibility="plausible"] {
  border-left: none;
  background: linear-gradient(180deg,
    rgba(226, 166, 91, 0.10) 0%,
    rgba(226, 166, 91, 0.06) 100%
  );
}

/* Speculative — bloom-coral */
.data-card[data-credibility="speculative"],
.sidebar-note[data-credibility="speculative"] {
  border-left: none;
  background: linear-gradient(180deg,
    rgba(224, 140, 116, 0.10) 0%,
    rgba(224, 140, 116, 0.06) 100%
  );
}

/* Badge label via ::before */
.data-card[data-credibility]::before,
.sidebar-note[data-credibility]::before {
  position: relative;
  z-index: 1;
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 6pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5em;
  opacity: 0.7;
}

.data-card[data-credibility="fact"]::before,
.sidebar-note[data-credibility="fact"]::before {
  content: 'FACT';
  color: var(--harbour-green);
  background: rgba(44, 122, 105, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.data-card[data-credibility="plausible"]::before,
.sidebar-note[data-credibility="plausible"]::before {
  content: 'PLAUSIBLE';
  color: var(--sunlit-apricot);
  background: rgba(226, 166, 91, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.data-card[data-credibility="speculative"]::before,
.sidebar-note[data-credibility="speculative"]::before {
  content: 'SPECULATIVE';
  color: var(--bloom-coral);
  background: rgba(224, 140, 116, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* ── SPECIES ENTRY ──────────────────────────────────────────── */

.species-entry {
  background: rgba(167, 201, 139, 0.1);
  border: 1px solid rgba(167, 201, 139, 0.35);
  border-radius: 8px;
  padding: 0.7em 0.9em;
  margin-bottom: 0.85em;
  color: var(--night-air);
}

.species-name {
  font-family: var(--font-subheading);
  font-size: 10pt;
  font-weight: 600;
  color: var(--harbour-green);
  margin-bottom: 0.1em;
}

.species-latin {
  font-family: var(--font-body);
  font-size: 8.5pt;
  font-style: italic;
  color: rgba(36, 54, 58, 0.55);
  margin-bottom: 0.35em;
}

.species-entry p { font-size: 9pt; line-height: 1.5; margin-bottom: 0; }

/* Pretext-wrapped species lines                                */
.species-line { display: block; }
.species-entry::after { content: ''; display: table; clear: both; }

/* ── SPECIES ILLUSTRATION FIGURES ─────────────────────────────── */

.species-figure {
  margin-bottom: 1em;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.species-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.species-caption {
  font-family: var(--font-body);
  font-size: 8.5pt;
  line-height: 1.45;
  color: rgba(36, 54, 58, 0.65);
  padding: 0.5em 0.75em;
  background: rgba(167, 201, 139, 0.08);
  border: 1px solid rgba(167, 201, 139, 0.2);
  border-top: none;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  font-style: italic;
}

/* ── TIMELINE ENTRY ─────────────────────────────────────────── */

.timeline-entry {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0.7em;
  padding-bottom: 0.8em;
  margin-bottom: 0.8em;
  border-bottom: 1px solid rgba(36, 54, 58, 0.07);
}

.timeline-entry:last-child { border-bottom: none; }

/* Timeline credibility visual distinction — dot badge only, no left ribbon */
.timeline-entry[data-credibility="fact"] .timeline-year::before {
  content: '●';
  font-size: 6pt;
  color: var(--harbour-green);
  margin-right: 0.35em;
  vertical-align: middle;
}

.timeline-entry[data-credibility="plausible"] {
  background: rgba(226, 166, 91, 0.05);
  border-radius: 6px;
}

.timeline-entry[data-credibility="plausible"] .timeline-year::before {
  content: '●';
  font-size: 6pt;
  color: var(--sunlit-apricot);
  margin-right: 0.35em;
  vertical-align: middle;
}

.timeline-entry[data-credibility="speculative"] {
  background: rgba(224, 140, 116, 0.05);
  border-radius: 6px;
}

.timeline-entry[data-credibility="speculative"] .timeline-year::before {
  content: '●';
  font-size: 6pt;
  color: var(--bloom-coral);
  margin-right: 0.35em;
  vertical-align: middle;
}

.timeline-title {
  font-family: var(--font-subheading);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.22em;
  color: inherit;
}

.timeline-year {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  color: var(--ch-accent, var(--sunlit-apricot));
  letter-spacing: 0.08em;
  padding-top: 0.22em;
  line-height: 1.3;
}

.timeline-text {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
}

.timeline-text strong {
  display: block;
  font-family: var(--font-subheading);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.24em;
}

/* ── DATA CARD ──────────────────────────────────────────────── */

.data-card {
  position: relative;
  background: rgba(251, 246, 238, 0.78);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 0.8em 0.95em;
  margin-bottom: 0.75em;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);
  color: var(--night-air);
  overflow: hidden;
}

.data-label {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(36, 54, 58, 0.45);
  display: block;
  margin-bottom: 0.3em;
}

.data-value {
  font-family: var(--font-display);
  font-size: 17pt;
  line-height: 1;
  color: var(--ch-accent, var(--harbour-green));
}

.data-sub {
  font-size: 8.5pt;
  color: rgba(36, 54, 58, 0.55);
  margin-top: 0.25em;
  line-height: 1.35;
}

/* Grain texture inside ALL cards — holographic noise overlay */
.sidebar-note::after,
.data-card::after,
.field-note::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 128px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* ── BLOCKQUOTE — Glass morphism pull quote ─────────────────── */

blockquote {
  padding: 1.2em 1.5em;
  margin: 1.5em 0;
  font-style: italic;
  border-radius: 12px;
  background: rgba(30, 25, 50, 0.05);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
}

blockquote::before {
  content: '\201C';
  position: absolute;
  top: 0.1em;
  left: 0.3em;
  font-family: var(--font-display);
  font-size: 32pt;
  font-style: normal;
  color: var(--ch-accent, var(--sunlit-apricot));
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
}

body.chapter-bg blockquote {
  background: rgba(251, 246, 238, 0.10);
}

blockquote p { font-size: 10.5pt; }

blockquote cite {
  display: block;
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
  margin-top: 0.5em;
  opacity: 0.5;
}

/* ── TABLES ─────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  margin-bottom: 1em;
}

th {
  font-family: var(--font-subheading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 8pt;
  padding: 0.5em 0.75em;
  border-bottom: 2px solid var(--ch-accent, var(--sunlit-apricot));
  text-align: left;
}

td {
  padding: 0.4em 0.75em;
  border-bottom: 1px solid rgba(36, 54, 58, 0.07);
  vertical-align: top;
  line-height: 1.45;
}

tr:last-child td { border-bottom: none; }

/* ── SECTION DIVIDER — removed 2026-04-15: the rainbow gradient was too
      distracting and read as decorative, not structural. Kept as a hidden
      element so existing DOM selectors don't break.                           */

.section-divider {
  display: none;
}

/* ── H2 UNDERLINE ACCENT — full-width chapter-tinted gradient [2026-04-15]
      Spans slab edge-to-edge. Gradient uses the chapter accent token so
      each chapter carries its own thread (intro periwinkle, transit teal,
      residential amber, etc.) — see /2092 §I chapter-color table.            */

.s-main h2 {
  position: relative;
  padding-bottom: 0.55em;
}

.s-main h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 0%,  transparent) 0%,
    color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 85%, transparent) 18%,
    color-mix(in srgb, var(--sunlit-apricot)                 55%, transparent) 50%,
    color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 85%, transparent) 82%,
    color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 0%,  transparent) 100%);
  border-radius: 1px;
  opacity: 0.9;
}

/* ── H3 ACCENT DOT ────────────────────────────────────────── */

.s-main h3::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--ch-accent, var(--harbour-green));
  border-radius: 1px;
  margin-right: 0.5em;
  vertical-align: middle;
  transform: rotate(45deg);
}

/* ── REFERENCES / CITATIONS ─────────────────────────────────── */

.references p,
.reference-entry {
  font-size: 8.5pt;
  line-height: 1.5;
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 0.55em;
  opacity: 0.75;
}

/* ── CHAPTER RUNNING HEAD (left margin decoration) ───────────── */
/* Rotate text in .info-left for chapter number/title vertical label */

.running-head {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ch-accent, var(--sunlit-apricot));
  opacity: 0.5;
  margin-bottom: 1.5em;
  line-height: 1.6;
}

/* ── GLOSSARY TOOLTIPS ─────────────────────────────────────── */

.glossary-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px dotted var(--ch-accent, var(--harbour-green));
  transition: border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.glossary-link:hover,
.glossary-link:focus {
  border-bottom-style: solid;
  color: var(--ch-accent, var(--harbour-green));
}

.glossary-link--active {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  color: var(--ch-accent, var(--harbour-green));
}

.glossary-tooltip {
  position: absolute;
  z-index: 500;
  max-width: 320px;
  padding: 0.85em 1em;
  background: rgba(30, 25, 50, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid;
  border-image: linear-gradient(
    90deg,
    rgba(82, 230, 242, 0.6),
    rgba(168, 130, 255, 0.5),
    rgba(82, 230, 242, 0.3)
  ) 1;
  border-radius: 12px;
  /* border-image overrides border-radius on the top edge;
     use clip-path or an inner wrapper if full rounding is needed.
     The 12px radius still rounds the other three corners. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 16px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.glossary-tooltip-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.glossary-tooltip-term {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-bottom: 0.45em;
}

.glossary-tooltip-def {
  font-family: var(--font-body, 'Founders Grotesk', sans-serif);
  font-size: 9pt;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.65em;
}

.glossary-tooltip-link {
  display: inline-block;
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(82, 230, 242, 0.85);
  text-decoration: none;
  padding: 0.3em 0.7em;
  border: 1px solid rgba(82, 230, 242, 0.25);
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.glossary-tooltip-link:hover {
  background: rgba(82, 230, 242, 0.12);
  color: rgba(82, 230, 242, 1);
  text-decoration: none;
}

.glossary-back-btn {
  position: fixed;
  bottom: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  padding: 0.6em 1.5em;
  background: var(--night-air);
  color: var(--cloud-linen);
  font-family: var(--font-subheading);
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(36, 54, 58, 0.25);
  transition: background 0.2s ease;
}

.glossary-back-btn:hover {
  background: var(--harbour-green);
}

/* ── SEARCH OVERLAY (Cmd+K) ────────────────────────────────── */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.search-overlay.search-open {
  display: flex;
}

.search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(36, 54, 58, 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.search-panel {
  position: relative;
  width: min(680px, 90vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(160deg,
      rgba(82, 230, 242, 0.04) 0%,
      rgba(251, 246, 238, 0.97) 15%,
      rgba(251, 246, 238, 0.98) 85%,
      rgba(211, 155, 201, 0.04) 100%
    );
  border: 1px solid rgba(82, 230, 242, 0.15);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 24px 60px rgba(36, 54, 58, 0.25),
    0 0 0 1px rgba(36, 54, 58, 0.08);
  overflow: hidden;
}

.search-header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 1em;
  border-bottom: 1px solid rgba(36, 54, 58, 0.08);
}

.search-icon {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 8pt;
  letter-spacing: 0.08em;
  color: rgba(36, 54, 58, 0.35);
  background: rgba(36, 54, 58, 0.06);
  padding: 0.25em 0.5em;
  border-radius: 4px;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14pt;
  color: var(--night-air);
  background: transparent;
  border: none;
  outline: none;
  letter-spacing: 0.01em;
}

.search-input::placeholder {
  color: rgba(36, 54, 58, 0.35);
}

.search-close {
  background: none;
  border: none;
  font-size: 18pt;
  color: rgba(36, 54, 58, 0.35);
  cursor: pointer;
  padding: 0 0.3em;
  line-height: 1;
}

.search-close:hover {
  color: var(--night-air);
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 1em;
  min-height: 200px;
}

.search-card {
  display: block;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(251, 246, 238, 0.85) 100%
    );
  border: 1px solid rgba(36, 54, 58, 0.08);
  border-radius: 10px;
  padding: 0.65em 0.85em;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow:
    inset 0 1px 2px rgba(36, 54, 58, 0.04),
    0 2px 8px rgba(36, 54, 58, 0.05);
  overflow: hidden;
}

.search-card:hover,
.search-card-selected {
  border-color: rgba(82, 230, 242, 0.35);
  box-shadow:
    inset 0 1px 2px rgba(36, 54, 58, 0.04),
    0 4px 16px rgba(82, 230, 242, 0.12);
  transform: translateY(-1px);
}

.search-card-label {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 6pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--luminous-cyan);
  display: block;
  margin-bottom: 0.3em;
  opacity: 0.7;
}

.search-card-term {
  font-family: var(--font-subheading);
  font-size: 11pt;
  font-weight: 600;
  color: var(--night-air);
  display: block;
  margin-bottom: 0.2em;
  letter-spacing: 0.02em;
}

.search-card-def {
  font-family: var(--font-body);
  font-size: 9pt;
  line-height: 1.4;
  color: rgba(36, 54, 58, 0.6);
  display: block;
}

.search-empty {
  text-align: center;
  padding: 3em 1em;
  font-family: var(--font-body);
  font-size: 11pt;
  color: rgba(36, 54, 58, 0.4);
}

.search-footer {
  display: flex;
  gap: 1.5em;
  padding: 0.5em 1em;
  border-top: 1px solid rgba(36, 54, 58, 0.06);
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.1em;
  color: rgba(36, 54, 58, 0.3);
}

.search-pretext-credit {
  margin-left: auto;
  color: rgba(82, 230, 242, 0.5);
}

@media print {
  .glossary-tooltip,
  .glossary-back-btn { display: none !important; }
  .glossary-link { border-bottom: none; }
}

/* ── PRINT ──────────────────────────────────────────────────── */

@media print {
  body        { background: white !important; }
  body::before { display: none; }
  .nav-top    { display: none; }

  .page-grid {
    min-height: auto;
    padding: 2in;
    gap: 5px;
  }

  .main-copy,
  .guide-content,
  .info-left,
  .info-right { break-inside: avoid; }

  .field-note,
  .sidebar-note,
  .species-entry,
  .timeline-entry,
  .data-card { break-inside: avoid; }
}

/* ── LEFT COLUMN (s-left) — GLASS SLAB TREATMENT ─────────── */
/* Same refractive glass slab as info-left, applied to chapter   */
/* section cards for visual continuity across the whole site.    */

.s-left .sidebar-note,
.s-left .data-card {
  background:
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.08) 25%,
      rgba(255, 255, 255, 0.0) 45%,
      rgba(0, 0, 0, 0.02) 100%
    ),
    linear-gradient(135deg,
      hsla(30, 80%, 60%, 0.18) 0%,
      hsla(45, 85%, 55%, 0.15) 12%,
      hsla(120, 50%, 50%, 0.10) 25%,
      hsla(190, 70%, 55%, 0.20) 40%,
      hsla(220, 65%, 55%, 0.18) 55%,
      hsla(270, 55%, 50%, 0.15) 70%,
      hsla(300, 50%, 48%, 0.12) 85%,
      hsla(340, 45%, 45%, 0.08) 100%
    ),
    linear-gradient(180deg,
      rgba(30, 25, 50, 0.78) 0%,
      rgba(25, 22, 45, 0.82) 100%
    );
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    0 10px 30px rgba(10, 5, 25, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}

/* Glass texture inside s-left cards                             */
.s-left .sidebar-note::after,
.s-left .data-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.s-left .sidebar-note-label {
  color: rgba(200, 215, 240, 0.65);
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.s-left .data-label {
  color: rgba(200, 215, 240, 0.60);
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.s-left .data-value {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}

.s-left .data-sub {
  color: rgba(200, 215, 235, 0.60);
  position: relative;
  z-index: 2;
}

.s-left .sidebar-note p,
.s-left .sidebar-note span,
.s-left .data-card p,
.s-left .data-card span {
  color: rgba(230, 238, 250, 0.85);
  position: relative;
  z-index: 2;
}

/* Credibility badges in s-left — glass base maintained          */
.s-left .sidebar-note[data-credibility="fact"],
.s-left .data-card[data-credibility="fact"] {
  border-left: none;
}
.s-left .sidebar-note[data-credibility="plausible"],
.s-left .data-card[data-credibility="plausible"] {
  border-left: none;
}
.s-left .sidebar-note[data-credibility="speculative"],
.s-left .data-card[data-credibility="speculative"] {
  border-left: none;
}

.s-left .sidebar-note[data-credibility]::before,
.s-left .data-card[data-credibility]::before {
  position: relative;
  z-index: 2;
}

/* Field notes in s-left — glass slab treatment                  */
.s-left .field-note {
  background:
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.06) 25%,
      rgba(255, 255, 255, 0.0) 45%,
      rgba(0, 0, 0, 0.02) 100%
    ),
    linear-gradient(140deg,
      hsla(200, 70%, 55%, 0.15) 0%,
      hsla(260, 55%, 50%, 0.18) 35%,
      hsla(320, 50%, 48%, 0.12) 65%,
      hsla(30, 60%, 50%, 0.10) 100%
    ),
    linear-gradient(180deg,
      rgba(28, 24, 48, 0.80) 0%,
      rgba(24, 20, 42, 0.84) 100%
    );
  color: rgba(230, 238, 250, 0.90);
  border-left: none;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(10, 5, 25, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.s-left .field-note::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.s-left .field-note em,
.s-left .field-note p {
  color: rgba(225, 232, 245, 0.85);
  position: relative;
  z-index: 2;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Tablet: collapse to 2 main content cols + 1 margin */
@media (max-width: 1100px) {
  .page-grid {
    grid-template-columns: 1fr 3fr 3fr 1fr;
    padding: min(2in, 4vw);
  }

  .info-left     { grid-column: 1; }
  .main-copy     { grid-column: 2 / 4; }
  .guide-content { grid-column: 4 / -1; }
  .info-right    { display: none; } /* collapse right margin on tablet */

  /* Disable sticky on tablet — columns too narrow */
  .section-block > .s-guide,
  .section-block > .s-right {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .annotation-bar { grid-column: 2 / 4; }

  /* Hamburger visible */
  .nav-toggle { display: block; }

  /* Nav links hidden by default, revealed via max-height for smooth animation */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(36, 54, 58, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0 min(2in, 4vw);
    box-shadow: 0 12px 24px rgba(0,0,0,0.3);
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }

  .nav-open .nav-links {
    max-height: 100vh;
    overflow-y: auto;
    padding: 1em min(2in, 4vw);
  }

  .nav-links li {
    border-bottom: 1px solid rgba(251, 246, 238, 0.08);
  }

  .nav-links a {
    display: block;
    padding: 0.75em 0;
    font-size: 9pt !important;
  }

  /* Dropdown sub-menus inline */
  .nav-sub {
    position: static;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 1.5em;
    min-width: auto;
  }

  .nav-dropdown.dropdown-open > .nav-sub {
    display: block !important;
  }

  .nav-sub a {
    padding: 0.5em 0 !important;
    border-bottom: none !important;
  }
}

/* ── LEFT COLUMN ENTRY ANIMATIONS ─────────────────────────── */
/* Staggered fade-in for data cards on scroll                  */

.info-left .data-card,
.info-left .sidebar-note,
.info-left .field-note {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.info-left .data-card.card-visible,
.info-left .sidebar-note.card-visible,
.info-left .field-note.card-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Light refraction sweep on hover — prismatic beam             */
.info-left .data-card::before,
.info-left .sidebar-note::before,
.s-left .data-card::before,
.s-left .sidebar-note::before {
  content: '';
  position: absolute;
  top: -20%; left: -90%;
  width: 50%;
  height: 140%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 200, 100, 0.06) 20%,
    rgba(100, 255, 200, 0.08) 35%,
    rgba(255, 255, 255, 0.15) 48%,
    rgba(150, 150, 255, 0.08) 62%,
    rgba(255, 100, 200, 0.06) 78%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.8s ease;
  pointer-events: none;
  z-index: 3;
}

.info-left .data-card:hover::before,
.info-left .sidebar-note:hover::before,
.s-left .data-card:hover::before,
.s-left .sidebar-note:hover::before {
  left: 140%;
}

/* 3D lift on hover — glass slab rising off surface             */
.info-left .data-card:hover,
.info-left .sidebar-note:hover,
.s-left .data-card:hover,
.s-left .sidebar-note:hover {
  box-shadow:
    0 16px 40px rgba(10, 5, 25, 0.40),
    0 6px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  transform: perspective(600px) translateZ(8px);
}

/* Improved card spacing in info-left                          */
.info-left .data-card + .data-card,
.info-left .sidebar-note + .sidebar-note,
.info-left .data-card + .sidebar-note,
.info-left .sidebar-note + .data-card {
  margin-top: 0.65em;
}

/* ── COMPARISON SLIDER ────────────────────────────────────── */
/* Before/after draggable reveal for 2026 vs 2092              */

.comparison-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.comparison-slider img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.comparison-slider .cs-after {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}

.comparison-slider .cs-after img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: auto;
  min-height: 100%;
  object-fit: cover;
}

.comparison-slider .cs-handle {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--luminous-cyan);
  box-shadow: 0 0 12px rgba(82, 230, 242, 0.5);
  z-index: 10;
  pointer-events: none;
}

.comparison-slider .cs-handle::before,
.comparison-slider .cs-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
}

.comparison-slider .cs-handle::before {
  top: 50%;
  margin-top: -20px;
  border: 8px solid transparent;
  border-right-color: var(--luminous-cyan);
  margin-left: -10px;
}

.comparison-slider .cs-handle::after {
  top: 50%;
  margin-top: -20px;
  border: 8px solid transparent;
  border-left-color: var(--luminous-cyan);
  margin-left: 5px;
}

.comparison-slider .cs-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  background: rgba(36, 54, 58, 0.85);
  backdrop-filter: blur(8px);
  border: 2px solid var(--luminous-cyan);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(82, 230, 242, 0.4);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 11;
}

.comparison-slider .cs-knob::before {
  content: '\2194';
  color: var(--luminous-cyan);
  font-size: 16px;
  font-weight: bold;
}

.comparison-slider .cs-label {
  position: absolute;
  bottom: 12px;
  padding: 4px 10px;
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(36, 54, 58, 0.75);
  backdrop-filter: blur(6px);
  border-radius: 4px;
  z-index: 5;
  pointer-events: none;
}

.comparison-slider .cs-label-before { left: 12px; }
.comparison-slider .cs-label-after  { right: 12px; }

/* ── AMBIENT SOUND TOGGLE ─────────────────────────────────── */
/* Hidden by default — ambient sound runs silently via API     */

.ambient-toggle {
  display: none;
}

.ambient-toggle:hover {
  background: rgba(36, 54, 58, 0.95);
  border-color: rgba(82, 230, 242, 0.6);
}

.ambient-toggle.ambient-on {
  border-color: var(--luminous-cyan);
  box-shadow: 0 0 16px rgba(82, 230, 242, 0.35), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ambient-toggle .sound-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 16px;
}

.ambient-toggle .sound-bars span {
  display: block;
  width: 2px;
  background: rgba(220, 235, 245, 0.6);
  border-radius: 1px;
  transition: height 0.3s ease;
}

.ambient-toggle .sound-bars span:nth-child(1) { height: 4px; }
.ambient-toggle .sound-bars span:nth-child(2) { height: 8px; }
.ambient-toggle .sound-bars span:nth-child(3) { height: 12px; }
.ambient-toggle .sound-bars span:nth-child(4) { height: 6px; }
.ambient-toggle .sound-bars span:nth-child(5) { height: 10px; }

.ambient-toggle.ambient-on .sound-bars span {
  background: var(--luminous-cyan);
  animation: soundBar 1.2s ease-in-out infinite alternate;
}

.ambient-toggle.ambient-on .sound-bars span:nth-child(1) { animation-delay: 0s; }
.ambient-toggle.ambient-on .sound-bars span:nth-child(2) { animation-delay: 0.15s; }
.ambient-toggle.ambient-on .sound-bars span:nth-child(3) { animation-delay: 0.3s; }
.ambient-toggle.ambient-on .sound-bars span:nth-child(4) { animation-delay: 0.45s; }
.ambient-toggle.ambient-on .sound-bars span:nth-child(5) { animation-delay: 0.6s; }

@keyframes soundBar {
  0%   { height: 3px; }
  100% { height: 14px; }
}

/* ── MYCELIUM TIMELINE VISUALIZER ─────────────────────────── */
/* Bioluminescent network visualization — dark forest floor     */

/* Override body gradient for dark mycelium page                 */
body.chapter-bg:has(.tl-viz) {
  background: #0a0812 !important;
  color: rgba(230, 238, 250, 0.85);
}
body.chapter-bg:has(.tl-viz)::after {
  display: none !important;
}

/* Dark nav on mycelium page */
.tl-viz ~ .annotation-bar,
.tl-viz ~ .page-footer {
  background: rgba(10, 8, 18, 0.6);
  backdrop-filter: blur(12px);
  color: rgba(230, 238, 250, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Page container */
.tl-viz {
  width: 100%;
  min-height: 100vh;
  background: #0a0812;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.tl-viz * {
  box-sizing: border-box;
}

/* Split layout: canvas left, detail panel right */
.myc-split {
  display: flex;
  gap: 0;
  margin: 0 2em;
  height: 78vh;
  min-height: 480px;
  max-height: 900px;
}

/* Canvas container — fills left side */
.myc-canvas-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  cursor: grab;
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(255,255,255,0.04);
  border-right: none;
  overflow: hidden;
}
.myc-canvas-wrap:active {
  cursor: grabbing;
}

/* Right-side detail panel positioning lives in 07.1-timeline-visualizer.html inline <style> */

/* Bottom bar: filters + legend */
.myc-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 2em;
  gap: 1em;
  flex-wrap: wrap;
}
.myc-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Controls bar (top) */
.myc-controls {
  position: sticky;
  top: 46px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 min(2in, 6vw);
  background: rgba(10,8,18,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(82,230,242,0.08);
}

.myc-era-tab {
  font-family: 'Orbitron', sans-serif;
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(251,246,238,0.35);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.65em 1em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.3s;
}
.myc-era-tab.active {
  color: #52E6F2;
  border-bottom-color: #52E6F2;
}
.myc-era-tab:hover {
  color: rgba(251,246,238,0.7);
}

/* Filter bar */
.myc-filters {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  padding: 0.8em min(2in, 6vw);
  background: rgba(10,8,18,0.85);
  flex-wrap: wrap;
  align-items: center;
}

.myc-filter-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45em 0.9em;
  border-radius: 20px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.25s;
}
.myc-filter-btn.fact        { border-color: #2C7A69; color: #2C7A69; }
.myc-filter-btn.plausible   { border-color: #E2A65B; color: #E2A65B; }
.myc-filter-btn.speculative { border-color: #E08C74; color: #E08C74; }
.myc-filter-btn.on.fact        { background: rgba(44,122,105,0.15); }
.myc-filter-btn.on.plausible   { background: rgba(226,166,91,0.15); }
.myc-filter-btn.on.speculative { background: rgba(224,140,116,0.15); }
.myc-filter-btn.off {
  opacity: 0.25;
}

.myc-filter-count {
  font-family: 'Orbitron', sans-serif;
  font-size: 7pt;
  color: rgba(251,246,238,0.3);
  margin-left: 0.5em;
}

/* Hit targets (invisible node overlays) */
.myc-hit {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transform: translate(-50%, -50%);
}
.myc-hit:focus-visible {
  outline: 2px solid #52E6F2;
  outline-offset: 2px;
}

/* Tooltip */
.myc-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.2s ease;
  transform: translateY(-8px);
}
.myc-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.myc-tooltip-inner {
  background: rgba(10,8,18,0.94);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 0.75em 1em;
  min-width: 180px;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(82,230,242,0.06);
}

.myc-tooltip-year {
  font-family: 'Orbitron', sans-serif;
  font-size: 7pt;
  letter-spacing: 0.1em;
  margin-bottom: 0.25em;
  text-transform: uppercase;
}
.myc-tooltip-title {
  font-family: 'Object Sans', sans-serif;
  font-size: 9.5pt;
  font-weight: bold;
  color: rgba(255,255,255,0.95);
  margin-bottom: 0.3em;
}
.myc-tooltip-text {
  font-family: 'Founders Grotesk', sans-serif;
  font-size: 8pt;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.myc-tooltip-badge {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 5.5pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 10px;
  margin-top: 0.4em;
  border: 1px solid;
}

.myc-detail-card {
  background: rgba(10,8,18,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 1.5em 2em;
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
  position: relative;
}

.myc-detail-close {
  position: absolute;
  top: 1em;
  right: 1em;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myc-detail-close:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

.myc-detail-year {
  font-family: 'Orbitron', sans-serif;
  font-size: 8pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
.myc-detail-title {
  font-family: 'Augify', sans-serif;
  font-size: 18pt;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.6em;
}
.myc-detail-text {
  font-family: 'Founders Grotesk', sans-serif;
  font-size: 10pt;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
}

.myc-detail-connections {
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.myc-detail-conn-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 6pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.4em;
}
.myc-detail-conn-chip {
  display: inline-block;
  font-family: 'Founders Grotesk', sans-serif;
  font-size: 8pt;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 0.2em 0.6em;
  margin: 0.15em;
  cursor: pointer;
  transition: background 0.2s;
}
.myc-detail-conn-chip:hover {
  background: rgba(82,230,242,0.1);
  border-color: rgba(82,230,242,0.2);
}

/* Legend */
.myc-legend {
  display: flex;
  gap: 1.2em;
  justify-content: center;
  padding: 1em;
  flex-wrap: wrap;
}

.myc-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-family: 'Orbitron', sans-serif;
  font-size: 6pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
}

.myc-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.myc-legend-dot.fact {
  background: #2C7A69;
  box-shadow: 0 0 6px rgba(44,122,105,0.5);
}
.myc-legend-dot.plausible {
  background: #E2A65B;
  box-shadow: 0 0 6px rgba(226,166,91,0.5);
}
.myc-legend-dot.speculative {
  background: #E08C74;
  box-shadow: 0 0 6px rgba(224,140,116,0.5);
}

/* Zoom controls */
.myc-zoom {
  position: absolute;
  bottom: 1em;
  right: 1em;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 20;
}
.myc-zoom-btn {
  width: 32px;
  height: 32px;
  background: rgba(10,8,18,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.myc-zoom-btn:hover {
  border-color: rgba(82,230,242,0.3);
  color: #52E6F2;
}

/* Mycelium responsive */
@media (max-width: 1100px) {
  .myc-split { margin: 0 1em; height: 65vh; }
  .myc-controls { padding: 0 1em; }
  .myc-bottom-bar { padding: 0.5em 1em; }
}

@media (max-width: 700px) {
  .myc-split { flex-direction: column; height: auto; margin: 0 0.5em; }
  .myc-canvas-wrap { height: 55vh; min-height: 300px; border-radius: 12px 12px 0 0; border-right: 1px solid rgba(255,255,255,0.04); }
  .myc-controls { padding: 0 0.5rem; overflow-x: auto; scrollbar-width: none; }
  .myc-era-tab { padding: 0.5em 0.6em; font-size: 6pt; }
  .myc-bottom-bar { padding: 0.4em 0.5em; flex-direction: column; gap: 0.4em; }
  .myc-filter-btn { font-size: 6pt; padding: 0.3em 0.6em; }
  .myc-hit { width: 24px; height: 24px; }
  .myc-zoom { bottom: 0.5em; right: 0.5em; }
  .myc-zoom-btn { width: 28px; height: 28px; }
}

/* Mobile: single column stack */
@media (max-width: 700px) {
  .nav-top {
    padding: 0.55em 1.5rem;
  }

  .nav-open .nav-links {
    padding: 1em 1.5rem;
  }

  .page-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 1.5rem;
  }

  .chapter-header,
  .section-intro,
  .main-copy,
  .guide-content,
  .info-left,
  .info-right,
  .annotation-bar,
  .page-footer {
    grid-column: 1;
    grid-row: auto;
  }

  /* Mobile reading order: header → info-left → main → guide → info-right */
  .chapter-header { order: 1; }
  .info-left      { order: 2; border-right: none; border-bottom: 1px solid var(--card-border); padding: 0 0 0.75em; margin-bottom: 0.75em; }
  .main-copy      { order: 3; padding: 0; }
  .guide-content  { order: 4; padding: 0.75em 1em; background: rgba(44,122,105,0.05); border-radius: 8px; }
  .info-right     { order: 5; padding: 0.75em 1em; background: rgba(226,166,91,0.05); border-radius: 8px; }
  .annotation-bar { order: 6; }
  .page-footer    { order: 7; }

  .running-head { writing-mode: horizontal-tb; transform: none; }

  .chapter-title {
    font-size: clamp(18pt, 8vw, 28pt);
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .layout-wide {
    grid-column: 1 !important;
  }
}

/* ─── Citation reference superscripts ─── */
.cite-ref {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}
.cite-ref a {
  color: var(--harbour-green, #2C7A69);
  text-decoration: none;
  opacity: 0.65;
  font-weight: 600;
}
.cite-ref a:hover { opacity: 1; text-decoration: underline; }

/* ─── Chapter back-links in citations page ─── */
.chapter-backlink {
  font-size: 0.6em;
  font-weight: 400;
  margin-left: 0.75em;
  color: var(--harbour-green, #2C7A69);
  text-decoration: none;
  opacity: 0.6;
  vertical-align: middle;
}
.chapter-backlink:hover { opacity: 1; text-decoration: underline; }

/* ── PAGE NAVIGATION (Prev / Next) ────────────────────────── */

.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em min(2in, 5vw);
  gap: 1em;
  border-top: 1px solid rgba(251, 246, 238, 0.1);
  background: rgba(36, 54, 58, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.page-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 1.25em;
  background: rgba(251, 246, 238, 0.06);
  border: 1px solid rgba(251, 246, 238, 0.14);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7.5pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 246, 238, 0.62);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 3px 10px rgba(0,0,0,0.18);
  white-space: nowrap;
}

.page-nav-btn:hover {
  background: rgba(251, 246, 238, 0.11);
  border-color: rgba(226, 166, 91, 0.42);
  color: var(--sunlit-apricot);
  transform: translateY(-1px);
}

.page-nav-arrow {
  font-size: 10pt;
  line-height: 1;
}

.page-nav-label {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 246, 238, 0.22);
}

.page-nav-spacer {
  flex: 0 0 120px;
}

/* ── INFO-RIGHT: depth-cut tag chips ────────────────────────── */
/* Applied globally so every chapter info-right column has the   */
/* same compact chip treatment. Overrides data-card base styles. */

.info-right .data-card {
  padding: 0.5em 0.85em;
  background: rgba(36, 54, 58, 0.06);
  border: 1px solid rgba(36, 54, 58, 0.1);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 3px rgba(36,54,58,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.45);
  margin-bottom: 0.45em;
}

body.chapter-bg .info-right .data-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

.info-right .data-card .data-label {
  font-size: 6pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 0.1em;
  font-weight: 500;
}

.info-right .data-card .data-value {
  font-size: 9.5pt;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* ── COLLAPSIBLE SECTION (details/summary accordion) ────────── */

.collapsible-section {
  border: 1px solid rgba(36,54,58,0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5em;
}

.collapsible-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9em 1.2em;
  cursor: pointer;
  list-style: none;
  background: rgba(44, 122, 105, 0.06);
  border-bottom: 1px solid rgba(36,54,58,0.08);
  font-family: var(--font-subheading);
  font-size: 10pt;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--night-air);
  user-select: none;
}

.collapsible-section summary::-webkit-details-marker { display: none; }

.collapsible-section summary::after {
  content: '+';
  font-size: 14pt;
  font-weight: 300;
  color: var(--harbour-green);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.collapsible-section[open] summary::after {
  transform: rotate(45deg);
}

.collapsible-section-body {
  padding: 1.25em 1.2em;
}

/* ─────────────────────────────────────────────────
   Chapter pagination (prev / next footer nav)
   Sits at the bottom of every chapter HTML inside .page-grid
   ───────────────────────────────────────────────── */
.chapter-pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
  padding: 2.5em min(2in, 6vw);
  margin-top: 2em;
  border-top: 1px solid rgba(36, 54, 58, 0.18);
  font-family: var(--font-subheading);
  font-size: 9pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chapter-pagination-prev,
.chapter-pagination-next {
  color: var(--ch-text-on-bg, var(--night-air));
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}

.chapter-pagination-next {
  margin-left: auto;
  text-align: right;
}

.chapter-pagination-prev:hover,
.chapter-pagination-next:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (max-width: 720px) {
  .chapter-pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
    padding: 2em min(2in, 6vw);
  }

  .chapter-pagination-next {
    margin-left: 0;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §ZONES — Reading-chapter A/B/C/D slab treatment
   Lifted from 01-introduction.html (v-session61, 2026-04-16).
   Applies to any page with .page-grid .section-block > .s-{left,main,guide,right}.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 2 · ZONE A (.s-left) - dark holographic glass enclosure, from title-page.    */
.page-grid .section-block > .s-left {
  background:
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(18, 28, 58, 0.08)   50%,
      rgba(10, 18, 42, 0.12)  100%
    );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 0.85em 0.85em 0.85em 0.85em;
}

/* 3 · ZONE B (.s-main) - embossed inner-glow slab.                             */
.page-grid .section-block > .s-main:not(.hero-intro-block) {
  background:
    linear-gradient(155deg,
      rgba(251, 246, 238, 0.92) 0%,
      rgba(245, 238, 222, 0.88) 45%,
      rgba(230, 222, 210, 0.90) 100%
    );
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  border: 1px solid rgba(36, 54, 58, 0.10);
  border-right: none;
  border-radius: 12px;
  box-shadow:
    inset 0 3px 10px rgba(10, 18, 50, 0.10),
    inset 0 1px 3px rgba(10, 18, 50, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 4px 20px rgba(0, 0, 0, 0.07);
  padding: 1.1em 1.25em;
  color: var(--night-air);
}
.page-grid .section-block > .s-main p,
.page-grid .section-block > .s-main li {
  color: var(--night-air);
}

/* 4 · ZONE C (.s-guide) - matching embossed slab; retains sticky behaviour.     */
.page-grid .section-block > .s-guide {
  background:
    linear-gradient(155deg,
      rgba(251, 246, 238, 0.92) 0%,
      rgba(245, 238, 222, 0.88) 45%,
      rgba(230, 222, 210, 0.90) 100%
    );
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  border: 1px solid rgba(36, 54, 58, 0.10);
  border-left: none;
  border-radius: 12px;
  box-shadow:
    inset 0 3px 10px rgba(10, 18, 50, 0.10),
    inset 0 1px 3px rgba(10, 18, 50, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 4px 20px rgba(0, 0, 0, 0.07);
  padding: 1.1em 1.25em;
  color: var(--night-air);
}
.page-grid .section-block > .s-guide p,
.page-grid .section-block > .s-guide li {
  color: var(--night-air);
}

/* 5 · Breathing room between encapsulated section blocks.
      Tight vertical gap so Zone D slabs stack and read as a continuous
      right-column column down the page.                                   */
.page-grid .section-block {
  gap: 0.75rem;
  padding-bottom: 0.25in;
}
.page-grid .section-block + .section-block {
  margin-top: 0.25in;
}

/* 6 · ZONE D (.s-right) - revert to the default recessed fact-chip strip from
      grid-styles.css (no glass slab). Keep the structural wins only: sticky
      anchor to the section + no internal scroll clip, so chips flow freely. */
.page-grid .section-block > .s-right {
  max-height: none;
  overflow-y: visible;
}

/* Matching de-clip on Zone C (.s-guide) - same sticky+scroll bug pattern.    */
.page-grid .section-block > .s-guide {
  max-height: none;
  overflow-y: visible;
}

/* 7 · INTRO TRIPTYCH - section-block that overrides to A | B-wide | D row.
      Re-adds a glass slab to .s-right inside .s-intro (default Zone D strip
      is for fact chips, not hero-figure images).                            */
.page-grid .section-block.s-intro > .s-right {
  background:
    linear-gradient(190deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(18, 28, 58, 0.08)   50%,
      rgba(10, 18, 42, 0.12)  100%
    );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 0.85em;
}
.page-grid .section-block.s-intro {
  padding-bottom: 1in;
  align-items: stretch;
}
.page-grid .section-block.s-intro > .s-left,
.page-grid .section-block.s-intro > .s-main,
.page-grid .section-block.s-intro > .s-right {
  align-self: stretch;
}
.page-grid .section-block.s-intro > .s-left  { grid-column: 1; }
.page-grid .section-block.s-intro > .s-main  { grid-column: 2 / 6; }
.page-grid .section-block.s-intro > .s-right { grid-column: 6; }

/* Figures inside the intro triptych glass slabs: stretch to fill slab height  */
.page-grid .section-block.s-intro .chapter-figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page-grid .section-block.s-intro .chapter-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  flex: 1 1 auto;
}
.page-grid .section-block.s-intro .chapter-figure figcaption {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 7pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 0.55em;
  color: var(--night-air);
}

/* Intro text inside the glass slab - vertical centring for visual balance */
.page-grid .section-block.s-intro > .s-main.hero-intro-block {
  align-self: stretch;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.page-grid .section-block.s-intro .chapter-lede {
  color: var(--harbour-green);
}

/* 8 · Section 1.5 · enumerate the seven bioregional districts (1.–7.) instead
      of the default h3 square-dot bullet. h3.h3-aside is excluded from the
      counter (e.g. "The Transition Zones" - an addendum, not one of the 7).   */
.page-grid .section-block.s-enum-districts > .s-main { counter-reset: district; }
.page-grid .section-block.s-enum-districts > .s-main h3:not(.h3-aside) {
  counter-increment: district;
  display: flex;
  align-items: baseline;
  gap: 0.55em;
}
.page-grid .section-block.s-enum-districts > .s-main h3:not(.h3-aside)::before {
  content: counter(district) ".";
  width: auto;
  height: auto;
  background: transparent;
  transform: none;
  color: var(--ch-accent, var(--harbour-green));
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-right: 0;
  border-radius: 0;
  vertical-align: baseline;
  flex: 0 0 auto;
}

/* 9 · Zone A always-on - the specimen-jar spine paints full section height
      even when content inside is shorter than B+C.                          */
.page-grid .section-block > .s-left {
  align-self: stretch;
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
}

/* 10 · Zone D content-dependent - collapse when no element children.
       :has(*) ignores whitespace-only wrappers, so sections 1.3/1.8/1.9/1.12/1.15
       with <div class="s-right">      </div> collapse cleanly.              */
.page-grid .section-block > .s-right:not(:has(*)) {
  display: none;
}

/* 11 · Softer pretext .fn-line timing - per user ask, slow/smooth/soft.
       Overrides the 0.55s baseline injected by js/pretext-effects.js.       */
.fn-line {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.fn-animate .fn-line {
  opacity: 1;
  transform: none;
}

/* 12 · SCROLL REVEAL - "Harry Potter" soft appearing text per section.
       Every prose element inside .s-main animates in as it scrolls into view.
       Zone A tags (data-cards, sidebar-notes) and Zone C field notes stay
       static - they're always-on reference marginalia, not the narrative flow.
       Uses .chapter-reveal / .is-visible so we don't collide with pretext's
       fn-line / fn-animate system.                                           */
.page-grid .section-block > .s-main .chapter-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.page-grid .section-block > .s-main .chapter-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Respect reduced motion - show content immediately without transition */
@media (prefers-reduced-motion: reduce) {
  .page-grid .section-block > .s-main .chapter-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 13 · COLUMN-FLOW INSIDE PER-SECTION SLABS [2026-04-15 final]
       Row-grid left big empty space under short paragraphs. CSS columns
       pack vertically with no gaps - the only issue was loss of section
       boundary in an unbounded stream. Fix: keep section slabs (Genesis
       0 = one box, §1.1 = next box, etc.) and use column-count:2 INSIDE
       each bounded slab. Reader sees column 1 end and column 2 begin
       within the same visible slab, so no left-right tracking confusion. */
.page-grid .section-block {
  padding-bottom: 0 !important;
  margin-bottom: 2rem;
}
.page-grid .section-block > .s-main:not(.hero-intro-block) {
  position: relative;
  grid-column: 2 / 6 !important;
  /* BASELINE RHYTHM - every child snaps to a 1.7rem line grid so
     paragraphs, lists, and field-notes line up horizontally across
     the two columns. Prevents the "drifting baseline" column-fill
     artifact where left and right text rows float out of sync.          */
  --baseline: 25px;
  line-height: var(--baseline);
  font-size: 1rem;
  text-rendering: geometricPrecision;
  /* LIQUID-GLASS PARCHMENT (per /2092 §IV + /webskills glass-panel recipe):
     3-layer background - radial top-light, diagonal linen wash, base linen.
     Chapter-accent glow anchors the upper-left corner (color-mix with
     --ch-accent so each chapter carries its own thread).                  */
  background:
    radial-gradient(120% 60% at 0% 0%,
      color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 14%, transparent) 0%,
      transparent 42%),
    radial-gradient(140% 100% at 50% 0%,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(251, 246, 238, 0.58) 38%,
      rgba(242, 234, 222, 0.48) 100%),
    linear-gradient(168deg,
      rgba(251, 246, 238, 0.94) 0%,
      rgba(245, 236, 221, 0.80) 50%,
      rgba(251, 246, 238, 0.90) 100%),
    var(--cloud-linen);
  border: 1px solid rgba(36, 54, 58, 0.09);
  border-radius: 14px;
  padding: calc(var(--baseline) * 1) 2.3rem !important;
  /* Layered depth: inset top-highlight + subtle inner glow + stacked drops. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 -1px 0 rgba(36, 54, 58, 0.06) inset,
    0 2px 4px rgba(255, 255, 255, 0.6) inset,
    0 22px 46px -26px rgba(36, 54, 58, 0.35),
    0 6px 14px -8px rgba(36, 54, 58, 0.14);

  /* Multi-column - packs content with no empty-cell gaps */
  display: block !important;
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid rgba(36, 54, 58, 0.08);
  column-fill: balance;
}
/* Grain overlay + diagonal shine layered under content for liquid depth */
.page-grid .section-block > .s-main:not(.hero-intro-block)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.page-grid .section-block > .s-main:not(.hero-intro-block)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    142deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.04) 22%,
    transparent 45%,
    transparent 60%,
    rgba(255, 255, 255, 0.06) 82%,
    rgba(255, 255, 255, 0.18) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
/* Keep every column child above the overlay layers */
.page-grid .section-block > .s-main > * {
  position: relative;
  z-index: 1;
}
/* Full-width breakouts - column-span: all bridges both columns */
.page-grid .section-block > .s-main > h2,
.page-grid .section-block > .s-main > h3,
.page-grid .section-block > .s-main > .chapter-lede,
.page-grid .section-block > .s-main > figure,
.page-grid .section-block > .s-main > .chapter-figure,
.page-grid .section-block > .s-main > blockquote,
.page-grid .section-block > .s-main > .section-divider,
.page-grid .section-block > .s-main > .guide-reading-hint,
.page-grid .section-block > .s-main > .species-entry {
  column-span: all;
  break-inside: avoid;
}
.page-grid .section-block > .s-main > .field-note {
  break-inside: avoid;
}
/* Inline figure — stays in one column, flows with text */
.page-grid .section-block > .s-main > .fig-inline {
  column-span: none;
  margin: 0.6rem 0 var(--baseline) 0;
}
.page-grid .section-block > .s-main > .fig-inline img {
  width: 100%;
  border-radius: 8px;
}
.page-grid .section-block > .s-main > .fig-inline figcaption {
  font-family: var(--font-caption, 'Orbitron', monospace);
  font-size: 7.5pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.4em;
  color: var(--night-air);
}
/* Paragraph pacing + baseline snap - every block uses baseline as its
   bottom margin so column text lines up row-by-row across both columns */
.page-grid .section-block > .s-main > p,
.page-grid .section-block > .s-main > ul,
.page-grid .section-block > .s-main > ol,
.page-grid .section-block > .s-main > .field-note,
.page-grid .section-block > .s-main > .species-entry {
  break-inside: avoid;
  orphans: 3;
  widows: 3;
  line-height: var(--baseline);
  margin: 0 0 var(--baseline) 0;
}
/* Headings snap to baseline multiples so columns stay aligned */
.page-grid .section-block > .s-main > h2 {
  line-height: calc(var(--baseline) * 2);
  margin: 0 0 var(--baseline) 0;
  padding-bottom: 0;
}
.page-grid .section-block > .s-main > h3 {
  line-height: var(--baseline);
  margin: var(--baseline) 0 var(--baseline) 0;
}
/* Any inline <br> or <sup> inside paragraphs keeps the baseline rhythm */
.page-grid .section-block > .s-main p sup,
.page-grid .section-block > .s-main p sub {
  line-height: 0;
}
/* 13b · BULLET LISTS as card grid - break across columns, render each
         <li> as a mini parchment card within a 2-col grid spanning full width. */
.page-grid .section-block > .s-main > ul,
.page-grid .section-block > .s-main > ol {
  column-span: all;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0.6rem 0;
}
.page-grid .section-block > .s-main > ul > li,
.page-grid .section-block > .s-main > ol > li {
  position: relative;
  background: rgba(251, 246, 238, 0.78);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 0.9em 1.05em;
  font-size: 0.95em;
  line-height: 1.55;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.7);
  break-inside: avoid;
}
/* Chapter-accent corner glow inside the glass (replaces the old border-left slab).
   Uses ::after because ol > li::before is already claimed by the counter. */
.page-grid .section-block > .s-main > ul > li::after,
.page-grid .section-block > .s-main > ol > li::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(at 0% 0%,
    color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 18%, transparent) 0%,
    transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.9;
  z-index: 0;
}
.page-grid .section-block > .s-main > ul > li > *,
.page-grid .section-block > .s-main > ol > li > * { position: relative; z-index: 2; }
/* Keep the ordered-list counter above the glow overlay */
.page-grid .section-block > .s-main > ol > li::before { z-index: 2; }
.page-grid .section-block > .s-main > ol {
  counter-reset: li-card;
}
.page-grid .section-block > .s-main > ol > li {
  counter-increment: li-card;
  position: relative;
  padding-left: 2.4em;
}
/* 3-provotype list — always one row, left-to-right. Overrides the default
   2-col bullet grid so the three cards read as a single horizontal trio. */
.page-grid .section-block > .s-main > ul.provotype-bullets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}
.page-grid .section-block > .s-main > ul.provotype-bullets > li {
  padding: 0.7em 0.85em;
  font-size: 0.86em;
  line-height: 1.45;
}
/* District index — 7 bioregional districts + transition zones as numbered
   entries in a 2-col masonry. Each article is a parchment card tagged with
   its district number; the number lives inside the glass as a small badge
   (per CLAUDE.md liquid-glass rule — no border-left slabs). */
.page-grid .section-block > .s-main > .district-index {
  column-span: all;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0.6rem 0 var(--baseline) 0;
}
.page-grid .section-block > .s-main > .district-index > .district-entry {
  position: relative;
  background: rgba(251, 246, 238, 0.78);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 1.1em 1.15em 0.9em 1.15em;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  break-inside: avoid;
  overflow: hidden;
}
.page-grid .section-block > .s-main > .district-index > .district-entry::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(at 0% 0%,
    color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 16%, transparent) 0%,
    transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.9;
  z-index: 0;
}
.page-grid .section-block > .s-main > .district-index > .district-entry > * {
  position: relative;
  z-index: 1;
}
.page-grid .section-block > .s-main > .district-index > .district-entry::before {
  content: attr(data-district-num);
  position: absolute;
  top: 0.9em;
  right: 1em;
  font-family: var(--font-caption, 'Orbitron', monospace);
  font-size: 8pt;
  letter-spacing: 0.16em;
  color: var(--ch-accent, var(--harbour-green));
  opacity: 0.72;
  z-index: 1;
}
.page-grid .section-block > .s-main > .district-index > .district-entry h3 {
  font-size: 0.92em;
  line-height: 1.3;
  margin: 0 3.2em 0.5em 0;
  padding: 0;
  color: var(--night-air);
}
.page-grid .section-block > .s-main > .district-index > .district-entry p {
  font-size: 0.82em;
  line-height: 1.5;
  margin: 0 0 0.55em 0;
}
.page-grid .section-block > .s-main > .district-index > .district-entry p:last-child {
  margin-bottom: 0;
}
.page-grid .section-block > .s-main > .district-index > .district-entry--transition {
  grid-column: 1 / -1;
  background: rgba(245, 236, 221, 0.6);
}
/* Aside figure anchored in s-right (zone D) — compact, parchment-framed,
   caption styled like the sidebar notes so it reads as a marginalia card. */
.page-grid .section-block > .s-right > .s-right-aside {
  margin: 0 0 var(--baseline) 0;
  padding: 0;
}
.page-grid .section-block > .s-right > .s-right-aside img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow:
    0 10px 28px -14px rgba(36, 54, 58, 0.38),
    0 2px 6px -2px rgba(36, 54, 58, 0.14);
}
.page-grid .section-block > .s-right > .s-right-aside figcaption {
  font-family: var(--font-caption, 'Orbitron', monospace);
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.55em;
  color: var(--night-air);
  line-height: 1.4;
}
.page-grid .section-block > .s-main > ol > li::before {
  content: counter(li-card, decimal-leading-zero);
  position: absolute;
  left: 0.8em;
  top: 0.9em;
  font-family: var(--font-caption, monospace);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  color: var(--harbour-green);
}
/* Field notes — single-column inline quote breaks; /2092 parchment glass per
   CLAUDE.md liquid-glass accent rule (NO border-left ribbon — chapter accent
   lives as a soft bottom halo inside the glass). */
.page-grid .section-block > .s-main > .field-note {
  position: relative;
  display: block;
  font-family: var(--font-body, 'Founders Grotesk', sans-serif);
  font-style: italic;
  font-size: 0.92em;
  line-height: 1.55;
  color: var(--night-air);
  background: rgba(251, 246, 238, 0.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 1em 1.25em;
  margin: var(--baseline) 0;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
.page-grid .section-block > .s-main > .field-note::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 100%,
    color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 20%, transparent) 0%,
    transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}
.page-grid .section-block > .s-main > .field-note > * {
  position: relative;
  z-index: 1;
}
.page-grid .section-block > .s-main > .field-note .field-note-header {
  display: block;
  font-family: var(--font-caption, 'Orbitron', monospace);
  font-style: normal;
  font-size: 7pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-accent, var(--harbour-green));
  opacity: 0.88;
  margin-bottom: 0.6em;
}
.page-grid .section-block > .s-main > .field-note p {
  margin: 0 0 0.6em 0;
  font-size: 10.5pt;
}
.page-grid .section-block > .s-main > .field-note p:last-child { margin-bottom: 0; }
/* 13c · Reading-hint link (top of chapter, links to /how-to-read-this-guide.html) */
.guide-reading-hint {
  font-family: var(--font-caption, monospace);
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0.5rem 0 1.2rem;
  padding: 0.55em 0.8em;
  background: rgba(36, 54, 58, 0.04);
  border-radius: 999px;
}
.guide-reading-hint a {
  color: var(--harbour-green);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--harbour-green) 55%, transparent);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.guide-reading-hint a:hover {
  color: var(--night-air);
  border-bottom-color: var(--night-air);
}
/* Narrow viewport: collapse to single column inside slab */
@media (max-width: 1024px) {
  .page-grid .section-block > .s-main:not(.hero-intro-block) {
    column-count: 1;
    column-gap: 0;
    column-rule: none;
    padding: var(--baseline) 1.5rem !important;
  }
  .page-grid .section-block > .s-main > ul,
  .page-grid .section-block > .s-main > ol {
    grid-template-columns: 1fr;
  }
  .page-grid .section-block > .s-main > .field-note {
    display: block;
  }
}

/* 14 · SCROLL-LINKED REVEAL - animation-timeline: view() enhancement
       On browsers that support scroll-driven animations, .chapter-reveal
       elements animate continuously as they move through the viewport -
       true "writes as you scroll" behaviour instead of a one-shot fade.
       Fallback (Safari, older Chrome) uses the IntersectionObserver
       script below, which still fades elements in as they enter view.   */
@supports (animation-timeline: view()) {
  .page-grid .section-block > .s-main .chapter-reveal {
    animation: chapter-reveal-scroll linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 40%;
    transition: none;
  }
  @keyframes chapter-reveal-scroll {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §HERO — Full-bleed chapter hero (100vh photo opener)
   Lifted from 01-introduction.html inline (v-session61, 2026-04-16).
   Sits OUTSIDE .page-grid so it escapes the max-width + padding.
   Any chapter that wants the dramatic opener adds:
     <section class="hero-bleed">
       <img class="hero-bleed-img" src="…">
       <div class="hero-bleed-plate">
         <div class="hero-bleed-kicker">Chapter N · Topic</div>
         <h1 class="hero-bleed-title">…</h1>
         <div class="hero-bleed-caption">Fig N.0.1. …</div>
       </div>
       <div class="hero-bleed-scroll">Scroll ↓</div>
     </section>
   immediately before <main class="page-grid">.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-bleed {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--night-air, #24363A);
}
.hero-bleed .hero-bleed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
.hero-bleed::after {
  /* subtle vignette so title plate stays readable */
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(36,54,58,0.18) 0%,
      rgba(36,54,58,0.00) 28%,
      rgba(36,54,58,0.00) 60%,
      rgba(36,54,58,0.55) 100%);
  pointer-events: none;
}
.hero-bleed-plate {
  position: absolute;
  left: min(2in, 5vw);
  bottom: min(1.5in, 4vw);
  z-index: 2;
  max-width: 44rem;
  padding: 1.25em 1.5em;
  background:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(28, 44, 80, 0.18)   100%
    );
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 40px rgba(0, 0, 0, 0.28);
  color: var(--cloud-linen, #FBF6EE);
}
.hero-bleed-kicker {
  font-family: var(--font-caption, 'Orbitron', monospace);
  font-size: 9pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.5em;
}
.hero-bleed-title {
  font-family: var(--font-display, 'Augify'), serif;
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em 0;
  color: var(--cloud-linen, #FBF6EE);
}
.hero-bleed-caption {
  font-family: var(--font-caption, 'Orbitron', monospace);
  font-size: 8pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}
.hero-bleed-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-caption, 'Orbitron', monospace);
  font-size: 8pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 246, 238, 0.75);
  animation: heroBleedNudge 2.2s ease-in-out infinite;
}
@keyframes heroBleedNudge {
  0%,100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%     { transform: translate(-50%, 6px); opacity: 0.95; }
}
@media (max-width: 900px) {
  .hero-bleed { height: 85vh; }
  .hero-bleed-plate { left: 1rem; right: 1rem; bottom: 4rem; max-width: none; }
}

/* ─────────────────────────────────────────────────────────────
   LUMEN — subtle glow-neon for "safe organic clean" futurism
   Utilities. Opt-in per element. Warm/cool mix (chapter accent
   + sunlit-apricot) keeps the light candle-like, not LCD.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Warm-tempered accent: 70% chapter color + 30% apricot warmth.
     Reads as a backlit glass panel rather than a neon sign. */
  --lumen-warm: color-mix(in srgb, var(--ch-accent, var(--harbour-green)) 70%, var(--sunlit-apricot) 30%);
  --lumen-soft: color-mix(in srgb, var(--lumen-warm) 22%, transparent);
  --lumen-edge-ring: color-mix(in srgb, var(--lumen-warm) 28%, transparent);
  --lumen-text-halo: color-mix(in srgb, var(--lumen-warm) 26%, transparent);
}

/* .lumen-edge — apply to glass surfaces (cards, tiles, buttons).
   Inner ring + low-lumen halo. Sits ON TOP of existing glass. */
.lumen-edge {
  position: relative;
  box-shadow:
    inset 0 0 0 1px var(--lumen-edge-ring),
    0 0 18px -2px var(--lumen-soft);
  transition: box-shadow 0.6s ease;
  animation: lumen-breathe 6.5s ease-in-out infinite;
}
.lumen-edge:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lumen-warm) 44%, transparent),
    0 0 32px -4px color-mix(in srgb, var(--lumen-warm) 32%, transparent);
}

/* .lumen-text — apply sparingly to display numerals, kickers, CTAs.
   Reads as ink that's been gently backlit. */
.lumen-text {
  text-shadow: 0 0 10px var(--lumen-text-halo);
  animation: lumen-breathe 5.5s ease-in-out infinite;
}

/* Breathing pulse — opacity 0.9 ↔ 1.0, slow and off-cadence so
   different elements don't sync. Motion-safe by default. */
@keyframes lumen-breathe {
  0%, 100% { filter: brightness(0.96); }
  50%      { filter: brightness(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .lumen-edge,
  .lumen-text { animation: none; }
}

/* ───────────────────────────────────────────────
   Phone portrait <= 480px (v-responsive-20260423)
   Devices: iPhone SE (375px), iPhone 12/13/14 (390px),
            iPhone 15 Pro Max (430px), Android 360-414px.
   Additive layer. Targets the phone-only gap below
   the existing 700px / 720px rules. Preserves all
   existing holographic, glass, and chapter-color
   effects. No new visual language introduced.
   ─────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Root — prevent accidental horizontal scroll caused by
     off-viewport transforms (e.g. provotype carousel slides
     in index.html) and fixed-width inline widgets. Phone
     screens are precious real estate. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Body text baseline — iOS/Android default tap-target
     comfort. Existing 700px rule uses clamp(15pt,3.3vw,…)
     which at 414px can compute ~13.6px. Bump to 16px min. */
  body {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Heading scale — readable on a palm, still display-y. */
  h1, .chapter-title {
    font-size: clamp(28px, 7.5vw, 36px);
    line-height: 1.08;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  h2 {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.15;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  h3 {
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.2;
  }

  /* ── NAV ──────────────────────────────────────────
     Compress horizontal padding, shrink wordmark, let
     the secondary chapter strip scroll horizontally
     rather than wrap untidily. */
  .nav-top {
    padding: 10px 14px;
    gap: 0.4em;
  }
  .nav-wordmark {
    font-size: 12pt;
    letter-spacing: 0.01em;
  }
  .nav-wordmark::after {
    /* Optional: if brand string is long, CSS can clip it.
       Kept disabled so chapter pages retain full wordmark. */
  }
  .nav-links {
    gap: 1em;
  }
  .nav-links a {
    font-size: 10pt;
    letter-spacing: 0.08em;
  }
  .nav-open .nav-links {
    padding: 0.9em 1em;
    gap: 0.9em;
  }
  /* Chapter sub-nav row scrolls horizontally if present */
  .nav-sub {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-sub::-webkit-scrollbar { display: none; }

  /* Tap targets — iOS HIG 44x44 minimum. Nav links and
     toggles need a touchable hit area even if visually
     the label is smaller. */
  .nav-links a,
  .nav-toggle,
  .mycelium-lock,
  .skip-to-content {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── PAGE GRID ────────────────────────────────────
     Single stacked column. Zones A (info-left) / B
     (main-copy) / C (guide-content) / D (info-right)
     all become full-width. The existing 700px rule
     already stacks these via grid-row auto + order;
     we just tighten padding and lock full-width on
     any descendants still carrying column spans.

     minmax(0, 1fr) is load-bearing: plain 1fr resolves
     to min-content which lets long words (species
     names, glossary terms) blow the column wider than
     the viewport. minmax(0, 1fr) caps it. */
  .page-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 1rem;
    gap: 0.75rem;
    max-width: 100%;
    box-sizing: border-box;
  }
  .info-left,
  .info-right,
  .main-copy,
  .guide-content,
  .chapter-header,
  .section-intro,
  .annotation-bar,
  .page-footer,
  .s-left,
  .s-main,
  .s-guide,
  .s-right {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Higher-specificity override for pages (like
     00.6-guidebook-home.html) that scope zone widths
     via .page-grid > .info-left etc. in an inline
     <style>. Direct-child selectors beat the plain
     class selectors above on specificity. */
  .page-grid > .info-left,
  .page-grid > .info-right,
  .page-grid > .main-copy,
  .page-grid > .guide-content,
  .page-grid > .chapter-header,
  .page-grid > .section-intro,
  .page-grid > .annotation-bar,
  .page-grid > .page-footer,
  .page-grid > .s-left,
  .page-grid > .s-main,
  .page-grid > .s-guide,
  .page-grid > .s-right,
  .page-grid > .section-block {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Section blocks — the 4-zone slab row collapses to a
     vertical stack with consistent spacing. */
  .page-grid .section-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding-bottom: 0.75rem;
    max-width: 100%;
    min-width: 0;
  }
  .page-grid .section-block > .s-left,
  .page-grid .section-block > .s-main,
  .page-grid .section-block > .s-guide,
  .page-grid .section-block > .s-right {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.8em 0.9em;
  }
  /* The s-intro triptych override (3-across A|B|D) also
     collapses, so the intro reads as a single vertical
     run on phones. */
  .page-grid .section-block.s-intro > .s-left,
  .page-grid .section-block.s-intro > .s-main,
  .page-grid .section-block.s-intro > .s-right {
    grid-column: 1 / -1;
  }

  /* Zone-A specimen-jar cards — on desktop these use
     width: fit-content so the glass slab hugs label text.
     At phone width that fit-content can exceed viewport
     when the label string has no soft breaks. Force
     full-width on phone so the slab never overflows. */
  .info-left .sidebar-note,
  .info-left .data-card {
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
  }
  .sidebar-note,
  .data-card {
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    box-sizing: border-box;
  }
  .sidebar-note-label,
  .data-label {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Chapter header / kicker / subtitle — the appendix
     chapter-title computes wide because of letter-spacing
     on the display font. Force wrap and a tighter box. */
  .chapter-header {
    padding: 1.25rem 0 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .chapter-kicker,
  .chapter-subtitle {
    width: 100%;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }
  .running-head {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 8pt;
    letter-spacing: 0.12em;
  }

  /* ── HERO (chapter opener) ────────────────────────
     Desktop = 100vh, 900px tier = 85vh. On phones a
     60-65vh hero still feels bold but leaves room for
     the body copy without extra scroll. */
  .hero-bleed {
    height: 60vh;
    min-height: 420px;
  }
  .hero-bleed-plate {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 1.25rem;
    max-width: none;
    padding: 0.9em 1em;
    border-radius: 10px;
  }
  .hero-bleed-title {
    font-size: clamp(28px, 8vw, 40px);
    margin-bottom: 0.45em;
  }
  .hero-bleed-kicker {
    font-size: 7.5pt;
    letter-spacing: 0.14em;
  }
  .hero-bleed-caption {
    font-size: 7pt;
    letter-spacing: 0.1em;
  }
  .hero-bleed-scroll {
    bottom: 0.6rem;
    font-size: 7pt;
  }

  /* ── GLOSSARY POPUP ────────────────────────────────
     Shift from anchored-beside-link to bottom-sheet on
     phones. The popup is JS-injected with class
     .gloss-popup (glossary-popup.js); the task spec
     also names .glossary-popup so we cover both. */
  .gloss-popup,
  .glossary-popup {
    position: fixed !important;
    left: 2vw !important;
    right: 2vw !important;
    bottom: 10px !important;
    top: auto !important;
    width: auto !important;
    max-width: 96vw !important;
    max-height: 70vh !important;
    overflow-y: auto;
    border-radius: 14px;
    box-shadow: 0 -12px 48px rgba(10, 18, 42, 0.32);
    animation: gloss-slide-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    -webkit-overflow-scrolling: touch;
  }
  @keyframes gloss-slide-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .gloss-popup-close,
  .glossary-popup-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── INDEX-PAGE CAROUSEL & HERO BLOCK ─────────────
     index.html ships most of its layout inline. Cap
     overflow here so the body never h-scrolls on the
     provotype 3D ring (which intentionally places
     cards off-viewport). */
  .prov-carousel,
  .prov-stage,
  .prov-section {
    max-width: 100vw;
    overflow-x: clip;
  }
  .hero-bottom-strip,
  .hero-stats,
  .weather-graph {
    max-width: 100%;
  }

  /* ── CHAPTER PAGINATION / FOOTER ──────────────────
     Already stacks at 720px; on phone give it room. */
  .chapter-pagination {
    padding: 1.5em 1rem;
    gap: 1em;
  }

  /* ── IMAGES / FIGURES ─────────────────────────────
     Photographs and figures must never blow past the
     viewport. */
  img, figure, .chapter-figure,
  .chapter-figure img {
    max-width: 100%;
    height: auto;
  }

  /* ── MYCELIUM / TIMELINE visualisers ─────────────
     Already compressed at 700px; clamp one more time
     so the canvas and controls fit 360-414px. */
  .myc-split {
    margin: 0 0.25rem;
  }
  .myc-canvas-wrap {
    border-radius: 10px 10px 0 0;
  }

  /* ── SKIP-LINK focus state ────────────────────────
     Preserve the a11y keyboard shortcut; just make
     sure the focused skip-link doesn't itself cause
     horizontal scroll on a narrow viewport. */
  .skip-to-content:focus {
    max-width: 96vw;
    box-sizing: border-box;
  }
}

/* ───────────────────────────────────────────────
   iPad portrait 768-900px (v-responsive-20260423)
   Fills the gap between the 1100px tablet rules
   (which collapse to a cramped 1fr 3fr 3fr 1fr grid
   but still try to place .s-right at grid-column 6
   of a 4-col subgrid, wrapping the chip strip onto
   a new row) and the 700px phone rules (single
   column stack).
   Devices: iPad Air portrait (820px), iPad Pro 11"
            portrait (834px), iPad 10.9" portrait
            (810px), similar 770-900 Android tablets.
   Strategy: collapse the 4 zones into a 3-column
   layout. Zone A (spine) stays col 1, Zone B/C
   merge into the wide reading column (col 2),
   Zone D becomes a narrow chip strip (col 3). The
   .s-right chips stack UNDER .s-main instead of
   trying to occupy a phantom col 6. Hero, nav,
   glossary popup, and data cards get sized for a
   comfortable iPad reading posture.
   Additive layer. Preserves all holographic glass
   and chapter-color effects untouched.
   ─────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 900px) {

  /* ── Root, protect against any fixed-pixel child
     wider than the viewport (carousels, inline SVG). */
  html, body {
    max-width: 100vw;
  }

  /* ── PAGE GRID, 3 cols: spine, reading, chip strip.
     Overrides the 1100px 1fr 3fr 3fr 1fr grid so
     that .s-right / .info-right live in col 3
     (not phantom col 6 of a 4-col parent).
     minmax(0, Xfr) lets fr-sized columns shrink
     below their min-content so long words inside
     paragraphs (eg glossary terms) don't force the
     column wider than the viewport. */
  .page-grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 4fr) minmax(0, 1.1fr) !important;
    padding: min(1.25in, 4.5vw);
    gap: 0.85rem;
  }
  /* Each zone gets min-width: 0 so long text wraps
     inside the zone rather than widening the col. */
  .page-grid > .info-left,
  .page-grid > .main-copy,
  .page-grid > .guide-content,
  .page-grid > .info-right,
  .page-grid > .section-block > .s-left,
  .page-grid > .section-block > .s-main,
  .page-grid > .section-block > .s-guide,
  .page-grid > .section-block > .s-right {
    min-width: 0;
  }

  /* Row 1 chapter header spans all 3 cols (already
     uses grid-column: 1 / -1). */
  .chapter-header {
    grid-column: 1 / -1;
  }

  /* ── ZONES, remap to the 3-col grid. Use
     !important on grid-column so page-scoped
     overrides (eg 00.6-guidebook-home inline
     styles which redefine .page-grid > .info-left
     to a 6-col layout) don't win by source order. */
  .info-left,
  .page-grid .info-left,
  .page-grid > .info-left {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .main-copy,
  .guide-content,
  .page-grid > .main-copy,
  .page-grid > .guide-content {
    grid-column: 2 !important;
    grid-row: auto !important;
  }
  /* Reveal info-right at this viewport (the 1100px
     rule hid it; at 820px we have room for a
     narrow chip strip). */
  .info-right,
  .page-grid > .info-right {
    display: block;
    grid-column: 3 !important;
    grid-row: auto !important;
    padding-left: 0.55em;
    border-left: 1px solid rgba(36, 54, 58, 0.1);
  }

  /* Guide content stacks under main-copy in the same
     col, so long-form chapters read top to bottom
     without a narrow column forcing 4 word lines. */
  .page-grid.has-column-guide .main-copy,
  .page-grid.has-column-guide .guide-content {
    grid-column: 2 !important;
  }

  /* ── SECTION BLOCK, remap subgrid tracks so
     .s-left, .s-main, .s-guide, .s-right don't
     reference the phantom 4th, 5th, 6th columns
     of the old 6-col grid. Keep s-main and s-guide
     in the same col (row stacked), chips in col 3. */
  .page-grid .section-block > .s-left {
    grid-column: 1;
  }
  .page-grid .section-block > .s-main,
  .page-grid .section-block > .s-guide {
    grid-column: 2;
  }
  .page-grid .section-block > .s-right {
    grid-column: 3;
  }
  .page-grid .section-block.s-wide > .s-main {
    grid-column: 2 / 4;
  }
  /* Intro triptych (s-intro) anchors its 3 blocks
     to the matching 3 cols. */
  .page-grid .section-block.s-intro > .s-left  { grid-column: 1; }
  .page-grid .section-block.s-intro > .s-main  { grid-column: 2; }
  .page-grid .section-block.s-intro > .s-right { grid-column: 3; }
  .page-grid .section-block.s-intro .chapter-figure img {
    min-height: 180px;
  }

  /* Disable sticky on the guide and chip columns.
     At 820px the columns are narrow enough that a
     sticky element blocks the reader from scrolling
     the main narrative past it. */
  .section-block > .s-guide,
  .section-block > .s-right,
  .page-grid .section-block > .s-guide,
  .page-grid .section-block > .s-right {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  /* ── ZONE A (.info-left / .s-left), give the
     glass spine enough breathing room so
     specimen-jar cards can render their
     holographic refraction without clipping. */
  .info-left,
  .page-grid .section-block > .s-left {
    padding: 0.7em 0.6em;
  }
  .info-left .data-card,
  .info-left .sidebar-note,
  .info-left .field-note,
  .s-left .data-card,
  .s-left .sidebar-note,
  .s-left .field-note {
    padding: 0.65em 0.75em;
    font-size: 8.5pt;
  }

  /* ── ZONE B (.main-copy / .s-main), kill any
     multi column flow (the 1024px rule already
     does this for .s-main, belt and suspenders
     for .main-copy pages). */
  .main-copy,
  .page-grid .section-block > .s-main:not(.hero-intro-block) {
    column-count: 1;
    column-gap: 0;
    padding: var(--baseline, 1em) 1.1rem;
  }

  /* ── ZONE C (.guide-content / .s-guide), now
     sits below .s-main in the same column, so the
     voice track memo reads as a follow up rather
     than a parallel column. */
  .page-grid .guide-content,
  .page-grid .section-block > .s-guide {
    padding: 1em 1.1rem !important;
    margin-top: 0.75rem;
  }

  /* ── ZONE D (.info-right / .s-right), compact
     chip column. Let the card flow wrap inside
     its narrow track. */
  .info-right .data-card,
  .section-block > .s-right .data-card,
  .section-block > .s-right .sidebar-note {
    font-size: 8pt;
    padding: 0.45em 0.7em;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── HERO BLEED, at iPad portrait 100vh still
     works, but the plate sits cleaner on the
     left bottom without stretching edge to edge. */
  .hero-bleed {
    height: 100vh;
  }
  .hero-bleed-plate {
    left: 1.5rem;
    right: auto;
    bottom: 4.5rem;
    max-width: min(30rem, 70vw);
    padding: 1.1em 1.35em;
  }
  .hero-bleed-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
  }
  .hero-bleed-caption {
    font-size: 7.5pt;
  }
  .hero-bleed-scroll {
    bottom: 1.5rem;
  }

  /* ── NAV MASTHEAD, the 1100px rule already hides
     nav links behind the hamburger. Tighten the
     wordmark and padding so the nav bar reads as
     a slim band, not a chunky shelf. */
  .nav-top {
    padding: 0.85em 1.25rem 0.7em;
  }
  .nav-wordmark {
    font-size: 14pt;
  }
  /* When the hamburger is open, give the drawer
     comfortable padding so the links are tappable. */
  .nav-open .nav-links {
    padding: 1em 1.25rem;
  }
  .nav-links a {
    font-size: 10pt !important;
    padding: 0.85em 0;
  }

  /* ── GLOSSARY POPUP, both the inline injected
     .gloss-popup and the CSS .glossary-tooltip.
     Cap at 92vw so popups never exit the viewport. */
  .gloss-popup,
  .glossary-tooltip {
    max-width: min(92vw, 340px) !important;
  }
  .glossary-back-btn {
    font-size: 8.5pt;
    padding: 0.55em 1.25em;
    bottom: 1rem;
  }

  /* ── BODY / READING TYPOGRAPHY, small scale bump
     so reading on a lap held iPad is comfortable
     without jumping to the phone single column size. */
  body {
    font-size: clamp(11pt, 1.6vw, 13pt);
    line-height: 1.55;
  }
  .page-grid .section-block > .s-main p,
  .page-grid .section-block > .s-main li,
  .main-copy p,
  .main-copy li {
    font-size: 1em;
  }
  .chapter-title {
    font-size: clamp(20pt, 4vw, 26pt);
    line-height: 1.05;
    word-break: break-word;
  }

  /* ── PAGINATION, widen tap targets on iPad. */
  .chapter-pagination {
    padding: 2em 1.5rem;
  }

  /* ── FULL SPAN / INNER SPAN HELPERS, remap to
     the 3-col grid so any element using these
     helpers does not land in a phantom column. */
  .full-span    { grid-column: 1 / -1; }
  .inner-span   { grid-column: 1 / -1; }
  .span-main    { grid-column: 2; }
  .span-guide   { grid-column: 2; }
  .span-main-wide { grid-column: 2 / 4; }
  .span-left-half  { grid-column: 1 / 3; }
  .span-right-half { grid-column: 2 / 4; }

  /* ── ANNOTATION BAR, re anchor to col 2 inside
     the new 3-col grid. */
  .annotation-bar {
    grid-column: 2;
  }
}

/* ============================================================
   NARRATOR BADGE  ·  chapter-header quiet tag showing the
   dominant canonical narrator for the chapter. Sits under the
   kicker, before <h1>. Small, Orbitron caption + Augify italic.
   ============================================================ */
.narrator-badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(36, 54, 58, 0.08);
  border-radius: 8px;
  margin: 12px 0;
  max-width: max-content;
}
.narrator-badge .nb-eyebrow {
  font: 500 9px/1 var(--font-caption, 'Orbitron', monospace);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--night-air, #24363a);
  opacity: 0.55;
}
.narrator-badge .nb-name {
  font: italic 400 16px/1.1 var(--font-display, 'Augify', serif);
  color: var(--night-air, #24363a);
}