/* ===================================================================
   THE WELL OF NINE — stylesheet
   -------------------------------------------------------------------
   HOW TO RE-THEME THE WHOLE SITE:
   Change the values in the :root block right below. Colors and fonts
   cascade from here — you do not need to touch anything else to shift
   the palette. Everything else in this file is layout and polish.

   Identity: deep ink-blue / near-black field, brass/gold linework,
   a nonagon wellhead mark. "University-press colophon, not Viking metal."
   =================================================================== */

:root {
  /* ---- COLOR (edit these to re-skin the site) ---- */
  --ink:         #14100a;  /* warm near-black umber — main field / dark sections   */
  --ink-deep:    #0f0c07;  /* oracle --void — hero + CTA ground                    */
  --ink-2:       #1b1509;  /* lifted umber — cards on dark                         */
  --ink-3:       #241b0e;  /* hover umber                                          */
  --ink-4:       #0a0805;  /* deepest floor tone (behind CTA orb)                  */
  --paper:       #e9dcc0;  /* oracle parchment — the one light band                */
  --text-on-ink: #e9dcc0;  /* parchment text on dark                               */
  --text-soft:   #8d8268;  /* oracle parchment-dim — secondary text on ink         */
  --text-dark:   #2a2214;  /* iron-gall brown-black on parchment (NOT blue-black)  */
  --text-dark-soft:#6b5f49;/* secondary text on the light band                     */
  --brass:       #d4af37;  /* oracle/mission-control gold — primary accent         */
  --brass-soft:  #e8c97a;  /* gold-bright — small accents on dark                  */
  --brass-deep:  #715a26;  /* aged gold — accents on the light band                */
  --ember:       #b06a2c;  /* second warm accent, from the oracle                  */
  --line-dark:   rgba(212,175,55,0.22);  /* gold hairlines on ink                  */
  --line-faint:  rgba(233,220,192,0.10); /* neutral hairlines on ink               */
  --line-light:  rgba(42,34,20,0.18);    /* sepia hairlines on parchment           */

  /* ---- EASING (motion system) ---- */
  --ease-out-quiet: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- TYPE ---- */
  --font-display: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body:    "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-inscript:"Cinzel", serif;

  /* ---- RHYTHM ---- */
  --container: 1140px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 0;
  --line-strong-dark: rgba(212,175,55, 0.45);
  --line-strong-light: rgba(42,34,20, 0.5);
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  /* The site lives mostly on the ink field. */
  color: var(--text-on-ink);
  background: var(--ink);
  line-height: 1.65;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--brass); color: var(--ink-deep); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Accessibility: skip link + focus rings */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brass);
  color: var(--ink-deep);
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 0;
}

/* ---------- THE HAND OF THE DRAUGHTSMAN (da Vinci rough-line figures) ----------
   Applied to figure SVGs only (not header/footer brand marks, not HTML rules —
   the mix of ruled press furniture + wobbling ink figures is the point). */
.hand { filter: url(#quill); }
.figure-leader {
  stroke: #4a3a22;
  stroke-opacity: 0.75;
  stroke-width: 0.75px;
  fill: none;
}
.figure-annot {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  fill: var(--text-soft);
  letter-spacing: 0;
}
.section--alt .figure-annot,
.why-inner ~ .why-figure .figure-annot {
  fill: var(--text-dark-soft);
}
/* on parchment, figure strokes read iron-gall brown rather than gold */
.section--alt .figure-leader,
.why-figure .figure-leader {
  stroke: #4a3a22;
}

/* ---------- PRINT FURNITURE: figure captions ---------- */
.figure-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  text-align: center;
  margin: 1rem 0 0;
  color: var(--text-soft);
}
.section--alt .figure-caption,
.why-inner ~ .figure-caption {
  color: var(--text-dark-soft);
}

/* ---------- PRINT FURNITURE: Oxford rule (thick-thin double rule) ---------- */
.rule-oxford {
  border-top: 2.5px solid var(--line-strong-dark);
  position: relative;
  padding-top: 1.6rem;
  margin-top: 0;
}
.rule-oxford::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line-strong-dark);
}
.section--alt .rule-oxford,
.why-inner .rule-oxford {
  border-top-color: var(--line-strong-light);
}
.section--alt .rule-oxford::after,
.why-inner .rule-oxford::after {
  border-top-color: var(--line-strong-light);
}

/* ---------- SHARED BITS ---------- */
.eyebrow {
  font-family: var(--font-inscript);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--brass-deep);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow .num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--brass);
  letter-spacing: 0;
  text-transform: none;
  font-feature-settings: normal;
  font-size: 1.05rem;
}
.eyebrow--light { color: var(--brass-soft); }
.eyebrow--light .num { color: var(--brass-soft); }
.section-head--center .eyebrow { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s var(--ease-inout), background-color 0.16s var(--ease-inout), color 0.16s var(--ease-inout), border-color 0.16s var(--ease-inout);
}
.btn--primary {
  background: var(--brass);
  color: var(--ink-deep);
  border-color: var(--brass);
}
.btn--primary:hover {
  background: var(--brass-soft);
  border-color: var(--brass-soft);
  transform: translateY(1px);
}
.btn--ghost {
  background: transparent;
  color: var(--text-on-ink);
  border-color: var(--line-dark);
}
.btn--ghost:hover {
  border-color: var(--brass-soft);
  color: var(--brass-soft);
  transform: translateY(1px);
}
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
/* solid once you scroll past the hero (toggled by main.js) */
.site-header.scrolled {
  background: rgba(10, 16, 28, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom-color: var(--line-dark);
  box-shadow: 0 1px 0 var(--line-dark);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--brass-soft);
  transition: color 0.3s ease;
}
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: 0;
  color: var(--text-on-ink);
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-family: var(--font-inscript);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--text-on-ink);
  position: relative;
  transition: color 0.24s var(--ease-inout);
}
.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 0; height: 1px;
  background: var(--brass-soft);
  transition: width 0.24s var(--ease-inout);
}
.nav a:not(.nav-cta):hover::after { width: 100%; }
.nav a:not(.nav-cta):hover { color: var(--brass-soft); }
.nav-cta {
  border: 1.5px solid rgba(201, 162, 39, 0.55);
  color: var(--brass-soft);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav-cta:hover { background: var(--brass); color: var(--ink-deep) !important; border-color: var(--brass); }

/* hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 10px;
  background: none;
  border: none;
}
.nav-toggle span {
  height: 2px; width: 100%;
  background: var(--brass-soft);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--ink-deep);
  border-top: 1px solid var(--line-dark);
  padding: 0.5rem var(--pad-x) 1.5rem;
}
.mobile-nav a {
  color: var(--text-on-ink);
  padding: 0.9rem 0;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line-faint);
}
.mobile-nav a:last-child { border-bottom: none; color: var(--brass-soft); font-weight: 600; }
.mobile-nav.open { display: flex; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  background: var(--ink-deep);
  color: var(--text-on-ink);
  padding: clamp(8.5rem, 20vh, 13rem) 0 clamp(4.5rem, 9vw, 7.5rem);
  overflow: hidden;
}
/* flat ink field; grain only (no gradient wash) — folio pass §2 */
.hero-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}
.hero-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  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.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Chamber motes (codex pass §4) — rising gold embers over hero + CTA only.
   Explicit inset (not bare position:absolute) so the layer actually spans the
   section; above the grain (DOM order) but below the content (z-index 1 vs 2). */
.motes-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.hero-text { grid-column: 1; width: 100%; }
.hero-orb-container {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* Plate frame — the orb sits inside a ruled figure box, like an engraved plate. */
.plate-frame {
  border: 1px solid var(--line-dark);
  padding: clamp(1rem, 3vw, 2rem);
}
.hero-title {
  font-size: clamp(3.4rem, 11vw, 7rem);
  font-weight: 500;
  font-style: italic;
  margin: 0 0 1.6rem;
  letter-spacing: 0;
  color: var(--paper);
}
.hero-lead {
  font-size: clamp(1.12rem, 1.4vw, 1.42rem);
  color: var(--text-soft);
  max-width: 46ch;
  margin-bottom: 2.4rem;
  line-height: 1.6;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.5rem; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2rem;
  list-style: none;
  margin: 0;
  padding: 1.7rem 0 0;
  border-top: 1px solid var(--line-dark);
}
.hero-meta li {
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--text-soft);
  position: relative;
  padding-left: 1.1rem;
}
.hero-meta li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--brass);
  border-radius: 50%;
}
/* Orb canvases */
.orb-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: crisp-edges;
}

/* ---- the palantír stage (hero orb only) — WebGL sphere + glow + rune ring + cage ---- */
.orb-stage {
  position: relative;
  width: min(420px, 38vw);
  aspect-ratio: 1;
}
/* the GL canvas can't fade a halo past its own edge (uv.y capped at +-0.5 by
   construction) — this unbounded layer carries the reach further into the
   frame; a blurred radial gradient has no such ceiling. Sits behind the
   canvas, aligned to the sphere's centre (44% down, per the shader's own
   c = uv - vec2(0,.06) reflection offset). */
.orb-glow {
  position: absolute;
  left: 50%; top: 44%;
  width: 165%; height: 165%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(232,201,122,.32) 0%, rgba(212,175,55,.14) 32%,
    rgba(176,106,44,.05) 58%, transparent 78%);
  filter: blur(18px);
  opacity: .3;
  transition: opacity .5s;
}
.hero-orb-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s linear;
}
.hero-orb-canvas.loaded { opacity: 1; }
/* Once the canvas is live, hide the static fallback mark behind it —
   the canvas is transparent, so the fallback would otherwise show through
   as a heavy gray ring around the drawn orb. (No-JS keeps the fallback.) */
.hero-orb-canvas.loaded + svg { opacity: 0; transition: opacity 0.9s linear; }
.hero-orb-canvas + svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}
/* Rune ring — masked at the bottom so it fades where the reflection pool
   would be; wrapper carries the mask so the ring can keep rotating inside it. */
.orb-runes-mask {
  position: absolute;
  left: 50%; top: 44%;
  width: 84%; aspect-ratio: 1;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 58%, rgba(0,0,0,.35) 72%, transparent 86%);
  mask-image: linear-gradient(#000 58%, rgba(0,0,0,.35) 72%, transparent 86%);
}
.orb-runes {
  width: 100%; height: 100%;
  opacity: .34;
  animation: orb-turn 150s linear infinite;
}
.orb-runes text { paint-order: stroke; stroke: rgba(22,15,6,.6); stroke-width: 2px; }
@keyframes orb-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* The well scene — the stone rests on a rune-carved wellhead (painted plate,
   assets/wellhead.webp — TRUE-ALPHA image; the black ground is removed at
   the pixel level, so it composites over any backdrop. Blend modes are NOT
   used here: the z-indexed container isolates its stacking context and
   silently breaks them). The stage is anchored to the image by bottom-%, so
   the sphere sits on the mouth and the reflection pool lands on the water. */
.orb-scene {
  position: relative;
  width: min(440px, 38vw);
  margin-top: 14%;
}
.orb-well {
  display: block;
  width: 100%;
}
.orb-scene .orb-stage {
  position: absolute;
  width: 84%;
  left: 8%;
  bottom: 33%;
}
@media (prefers-reduced-motion: reduce) {
  .orb-runes { animation: none; }
}
/* Listen to the Well button — sits below the frontispiece caption, in normal flow */
.orb-listen {
  margin-top: 1.4rem;
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--text-soft);
  background: none;
  border: none;
  border-bottom: 1px solid var(--text-soft);
  padding: 0.4rem 0;
  cursor: pointer;
  transition: color 0.24s var(--ease-inout), border-color 0.24s var(--ease-inout);
  white-space: nowrap;
}
.orb-listen:hover { color: var(--brass-soft); border-color: var(--brass-soft); }
@media (prefers-reduced-motion: reduce) {
  .orb-listen { display: none; }
}

/* ---------- GENERIC SECTION ---------- */
.section { padding: var(--section-y) 0; position: relative; }
.section--alt { background: var(--paper); color: var(--text-dark); }
.section--dark {
  background: var(--ink);
  color: var(--text-on-ink);
  /* clip (not hidden): an overflow:hidden ancestor disables position:sticky,
     which the domains wheel relies on; clip crops identically without
     creating a scroll container. */
  overflow: clip;
}
.section--dark + .section--dark { border-top: 1px solid var(--line-faint); }
.section-head { margin-bottom: 3rem; }
.section-head--center { text-align: center; max-width: 720px; margin-inline: auto; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: 0; }
.section--dark h2 { color: var(--paper); }

/* ---------- ABOUT / FORMATS ---------- */
.about-head { max-width: 760px; margin-bottom: 3.2rem; }
.about-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 0.2rem 0 1.4rem; color: var(--paper); }
.prose { color: var(--text-soft); }
.about-lead { font-size: 1.12rem; max-width: 62ch; color: var(--text-soft); }
p.has-dropcap::first-letter {
  font-size: 3.3em;
  float: left;
  line-height: 0.85;
  padding: 0.04em 0.12em 0 0;
  font-weight: 600;
  color: var(--brass);
}

.formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.format {
  position: relative;
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  border-top: 1px solid var(--line-dark);
  border-radius: 0;
  padding: 2.4rem 0 0;
  transition: border-color 0.24s var(--ease-inout);
}
.format:hover {
  border-top-color: var(--brass-soft);
}
.format-index {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--brass);
  display: block;
  margin-bottom: 1rem;
}
.format h3 { font-size: 1.4rem; margin-bottom: 0.8rem; line-height: 1.2; color: var(--paper); }
.format p { color: var(--text-soft); margin: 0 0 1.4rem; font-size: 0.99rem; flex: 1; }
/* example episodes — a small specimen list under each format's description */
.format-eg {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0.95rem 0 0;
  border-top: 1px solid var(--line-faint);
}
.format-eg::before {
  content: "for instance";
  display: block;
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--brass-deep);
  margin-bottom: 0.55rem;
}
.format-eg li {
  position: relative;
  font-style: italic;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--text-soft);
  padding-left: 1.15rem;
  margin-bottom: 0.4rem;
}
.format-eg li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--brass-deep);
}
.format-tag {
  align-self: flex-start;
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--brass-soft);
  border: 1px solid var(--line-dark);
  padding: 0.32rem 0.7rem;
  border-radius: 0;
}

/* ---------- THE NINE DOMAINS (centerpiece grid) ---------- */
.domains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.domain {
  position: relative;
  background: var(--ink);
}
.domain-link {
  position: relative;
  display: block;
  background: var(--ink);
  padding: 2rem 1.9rem 1.9rem;
  transition: background-color 0.25s ease;
}
.domain-link:hover,
.domain-link:focus-visible { background: var(--ink-2); }
.domain-link:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}
.domain-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--brass);
  letter-spacing: 0.04em;
}
/* Domain sigil thumbnail — the engraved plate, small, ruled like a specimen. */
.domain-sigil {
  display: block;
  width: 84px;
  margin-bottom: 1.1rem;
  border: 1px solid var(--line-dark);
  overflow: hidden;
}
.domain-sigil img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s var(--ease-out-quiet);
}
.domain-link:hover .domain-sigil img,
.domain-link:focus-visible .domain-sigil img { transform: scale(1.06); }
.domain h3 {
  font-size: 1.5rem;
  margin: 0.35rem 0 0.6rem;
  color: var(--paper);
}
.domain p { margin: 0; font-size: 0.94rem; color: var(--text-soft); line-height: 1.55; }
/* a hairline of gold runs across the top of each tile on hover */
.domain-link::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 2px;
  background: var(--brass);
  transition: width 0.3s ease;
}
.domain-link:hover::before,
.domain-link:focus-visible::before { width: 100%; }
/* lit = coupled highlight driven from the wellhead plate staves (main.js §6a) */
.domain { scroll-margin: 130px; }
.domain.lit .domain-link::before { width: 100%; }
.domain.lit h3 { color: var(--brass-soft); }
/* quiet "read the study" affordance — appears at the row's right edge on
   hover/focus (desktop list layout only; see @1024px block below) */
.domain-read {
  display: none;
  font-family: var(--font-inscript);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--brass-soft);
  opacity: 0;
  transition: opacity 0.24s var(--ease-inout);
}

/* ---------- WHY NINE? (lore strip) ---------- */
.why-inner { max-width: 760px; }
.why-inner .eyebrow { color: var(--brass-deep); }
.why-inner .eyebrow .num { color: var(--brass-deep); }
.why-inner h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--text-dark); margin-bottom: 1.6rem; }
.why-lead { font-size: 1.12rem; color: var(--text-dark-soft); max-width: 64ch; }
.why-signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: var(--brass-deep);
  margin: 1.8rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-light);
}

/* ---------- JOIN (CTA band) ---------- */
.section--cta { text-align: center; }
.join-inner { max-width: 680px; margin-inline: auto; position: relative; z-index: 2; }
.join-inner .eyebrow { justify-content: center; }
.join-inner h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); color: var(--paper); margin-bottom: 1.2rem; }
.join-lead { font-size: 1.12rem; color: var(--text-soft); margin-bottom: 2.4rem; }
.join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.4rem;
}
.join-note { font-size: 0.85rem; color: var(--text-soft); margin: 0; }

/* Styles ready for when Ben swaps the mailto link for a real signup form.
   (See README → "Wiring the Notify-me form".) */
.notify-form { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.notify-form input[type="email"] {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 1rem 1.2rem;
  min-width: 260px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(232, 230, 223, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-on-ink);
}
.notify-form input[type="email"]::placeholder { color: var(--text-soft); }
.notify-form input[type="email"]:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--ink-deep); color: var(--text-on-ink); padding: clamp(3rem,6vw,4.5rem) 0 2rem; border-top: 1px solid var(--line-faint); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-faint);
}
.footer-brand { display: flex; align-items: center; gap: 1rem; color: var(--brass-soft); }
.footer-brand .brand-mark { width: 44px; height: 44px; color: var(--brass-soft); }
.footer-name { font-family: var(--font-display); font-size: 1.25rem; margin: 0; color: var(--text-on-ink); }
.footer-tag { font-size: 0.85rem; color: var(--text-soft); margin: 0.2rem 0 0; }
.footer-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-nav a {
  font-family: var(--font-inscript);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  font-size: 0.78rem;
  color: var(--text-soft);
  transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--brass-soft); }

/* Footer "The Nine" group — all nine domain links, two columns on mobile */
.footer-nine-wrap {
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line-faint);
}
.footer-nine-label {
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--brass-deep);
  margin: 0 0 1rem;
}
.footer-nav--nine {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.7rem 2.4rem;
  justify-content: start;
}
@media (max-width: 760px) {
  .footer-nav--nine { grid-template-columns: repeat(2, 1fr); }
}

/* Colophon: the printer's note, centered above the copyright row */
.colophon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--line-faint);
}
.colophon .brand-mark { width: 32px; height: 32px; color: var(--brass-soft); margin-bottom: 1.2rem; }
.colophon-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-soft);
  max-width: 46ch;
  margin: 0 0 0.8rem;
}
.colophon-est {
  font-family: var(--font-inscript);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  font-size: 0.75rem;
  color: var(--text-soft);
  margin: 0;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.5rem;
}
.footer-bottom p { font-size: 0.82rem; color: var(--text-soft); margin: 0; }
.footer-note a { color: var(--text-soft); transition: color 0.2s ease; }
.footer-note a:hover { color: var(--brass-soft); }

/* ---------- ACCESSIBILITY UTILITY ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- DEPTH LINE — RETIRED (owner found the center line distracting;
   the divs may linger in older markup, so keep them dead) ---------- */
.depth-line { display: none !important; }
@media (min-width: 900px) {
  /* ensure section content sits above absolutely-positioned ornament */
  .hero-inner, .section > .container {
    position: relative;
    z-index: 1;
  }
}

/* ---------- CTA ORB REPRISE ---------- */
.cta-orb-container { margin-bottom: 2rem; position: relative; z-index: 1; }
.cta-orb-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s linear;
}
.cta-orb-canvas.loaded { opacity: 1; }
.cta-orb-canvas.loaded + svg { opacity: 0; transition: opacity 0.9s linear; }
.cta-orb-canvas + svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}
@media (max-width: 560px) {
  .cta-orb-container > div { width: min(90px, 30vw) !important; }
}

/* ---------- WHY NINE — two-column figure (desktop) ---------- */
.why-grid { display: block; }
.why-figure { display: none; }
@media (min-width: 900px) {
  .why-grid {
    display: grid;
    grid-template-columns: 0.55fr 0.45fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .why-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* Mímisbrunnr engraving plate — multiply seats the ink into the parchment;
     the radial mask melts the plate's edges into the band. */
  .why-figure-img {
    width: min(400px, 100%);
    display: block;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 60%, transparent 90%);
    mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 60%, transparent 90%);
  }
  .why-nonagon {
    width: min(260px, 100%);
    height: auto;
    color: var(--brass-deep);
  }
  .why-nonagon-outer, .why-nonagon-inner {
    fill: none;
    stroke: currentColor;
  }
  .why-nonagon-outer { stroke-width: 2; opacity: 0.35; }
  .why-nonagon-inner { stroke-width: 1; opacity: 0.35; }
  .why-nonagon-node { fill: currentColor; }
  .why-nonagon-line { stroke: currentColor; stroke-width: 1.5; opacity: 0.6; }
  .why-caption {
    margin-top: 1.4rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dark-soft);
  }
}

/* ---------- WHY SIGN-OFF — plain fade (tracking flourish removed, §7) ---------- */
.why-signoff {
  opacity: 0;
  transform: translateY(10px);
}
.why-signoff.in {
  transition: opacity 0.6s var(--ease-out-quiet), transform 0.6s var(--ease-out-quiet);
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .why-signoff { opacity: 1; transform: none; }
}

/* ---------- WHAT'S COMING (preview strip) ---------- */
.coming-inner { max-width: 860px; margin-inline: auto; }
.coming-list { list-style: none; margin: 0; padding: 0; }
.coming-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line-faint);
  transition: color 0.24s var(--ease-inout);
}
.coming-row:first-child { border-top: 1px solid var(--line-faint); }
.coming-badge {
  flex: none;
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--brass-soft);
  border: 1px solid var(--line-dark);
  padding: 0.3rem 0.65rem;
  border-radius: 0;
  transition: border-color 0.24s var(--ease-inout);
}
.coming-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--paper);
  flex: 1;
  transition: color 0.24s var(--ease-inout);
}
.coming-status {
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.coming-row:hover .coming-title { color: var(--brass-soft); }
.coming-row:hover .coming-badge { border-color: rgba(201, 162, 39, 0.5); }
@media (max-width: 560px) {
  .coming-row { flex-wrap: wrap; }
  .coming-status { width: 100%; }
}

/* ---------- NONAGON WHEEL (Nine Domains, desktop) ---------- */
.nonagon-emblem-static { display: block; width: 180px; height: auto; margin: 0 auto 2.5rem; opacity: 0.5; color: var(--brass); }
.domains-wheel-grid { display: block; }
.nonagon-wheel-wrap { display: none; }

/* ---- Fig. 1: painted wellhead plate with nine clickable staves ---- */
.wheel-plate { position: relative; }
.wheel-plate-img {
  display: block;
  width: 100%;
  /* true-alpha webp — no blend mode (stacking contexts break them here) */
  filter: brightness(0.92) saturate(0.9); /* seat the stone into the chamber light */
}
.wheel-dot {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 175, 55, 0.22);
  transition: border-color 0.24s var(--ease-inout), background-color 0.24s var(--ease-inout);
}
.wheel-dot span {
  font-family: var(--font-inscript);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--brass);
  opacity: 0.6;
  transition: opacity 0.24s var(--ease-inout);
  text-shadow: 0 0 6px rgba(15, 12, 7, 0.9);
}
.wheel-dot:hover, .wheel-dot:focus-visible, .wheel-dot.lit {
  border-color: rgba(212, 175, 55, 0.6);
  background: rgba(212, 175, 55, 0.08);
}
.wheel-dot:hover span, .wheel-dot:focus-visible span, .wheel-dot.lit span { opacity: 1; }
/* the domain's name surfaces over the dark water while a stave is regarded */
.wheel-name {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--brass-soft);
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-inout);
  text-shadow: 0 0 10px rgba(15, 12, 7, 0.95);
}
.wheel-name.show { opacity: 1; }

/* ---- the channels: where the well speaks (CTA + reused patterns) ---- */
.channel-row {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
}
.channel-row a {
  font-family: var(--font-inscript);
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--text-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.24s var(--ease-inout), border-color 0.24s var(--ease-inout);
}
.channel-row a:hover { color: var(--brass-soft); border-color: var(--brass-soft); }
.nonagon-outer-ring { fill: none; stroke: var(--brass); stroke-width: 2; opacity: 0.35; }
.nonagon-inner-ring { fill: none; stroke: var(--brass); stroke-width: 1; opacity: 0.18; }
.nonagon-center-dot { fill: var(--brass); }
.nonagon-center-ring { fill: none; stroke: var(--brass); stroke-width: 1; opacity: 0.5; transition: r 0.24s var(--ease-inout); }

@media (min-width: 1024px) {
  .nonagon-emblem-static { display: none; }
  .domains-wheel-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
  .nonagon-wheel-wrap {
    display: block;
    position: sticky;
    top: 120px;
  }
  .nonagon-wheel { width: 100%; height: auto; }
  .nonagon-node {
    fill: var(--ink-2);
    stroke: var(--brass);
    stroke-width: 1.5;
    stroke-opacity: 0.5;
    transition: fill 0.24s var(--ease-inout);
  }
  .nonagon-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-variant-numeric: lining-nums;
    font-size: 11px;
    letter-spacing: 0.08em;
    fill: var(--text-soft);
  }
  .nonagon-chord {
    stroke: var(--brass);
    stroke-width: 1.5;
    fill: none;
    opacity: 0;
    transition: opacity 0.25s var(--ease-out-quiet);
  }
  .nonagon-node-group.active .nonagon-node { fill: var(--brass); }
  .nonagon-node-group.passive .nonagon-node { fill: var(--brass); fill-opacity: 0.6; }
  /* the wheel's dots are links to their domain studies */
  .nonagon-node-group a { cursor: pointer; }
  .nonagon-node-group a:hover .nonagon-node,
  .nonagon-node-group a:focus .nonagon-node { fill: var(--brass); }
  .nonagon-active-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    fill: var(--brass-soft);
    opacity: 0;
    transition: opacity 0.2s var(--ease-inout);
  }
  .nonagon-active-name.show { opacity: 1; }
  .nonagon-center-ring.expand { r: 18; }

  /* desktop: domains becomes a vertical list, not a grid */
  .domains {
    display: block;
    background: none;
    border: none;
    gap: 0;
  }
  .domain {
    background: none;
    border-bottom: 1px solid var(--line-faint);
  }
  .domain:first-child { border-top: 1px solid var(--line-faint); }
  .domain-link {
    background: none;
    padding: 1.4rem 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 1.1rem;
  }
  .domain-sigil {
    flex: none;
    align-self: center;
    width: 64px;
    margin: 0;
  }
  .domain-link:hover,
  .domain-link:focus-visible { background: none; }
  .domain-num { font-size: 1rem; }
  .domain h3 { font-size: 1.6rem; flex: none; }
  .domain-link p {
    flex: 1 1 auto;
    min-width: 40%;
  }
  .domain-read {
    display: block;
    flex: none;
    margin-left: auto;
    align-self: center;
  }
  .domain-link:hover .domain-read,
  .domain-link:focus-visible .domain-read { opacity: 1; }
}

/* ---------- SCROLL-REVEAL (subtle fade-up; disabled if user prefers reduced motion) ---------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-out-quiet), transform 0.6s var(--ease-out-quiet); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Stagger helpers for groups of reveals */
/* Hero eyebrow, title, lead, buttons, meta — sequenced in JS via inline styles */
.format:nth-child(1) { --stagger: 0ms; }
.format:nth-child(2) { --stagger: 80ms; }
.format:nth-child(3) { --stagger: 160ms; }
.domain:nth-child(1) { --stagger: 0ms; }
.domain:nth-child(2) { --stagger: 60ms; }
.domain:nth-child(3) { --stagger: 120ms; }
.domain:nth-child(4) { --stagger: 180ms; }
.domain:nth-child(5) { --stagger: 240ms; }
.domain:nth-child(6) { --stagger: 300ms; }
.domain:nth-child(7) { --stagger: 360ms; }
.domain:nth-child(8) { --stagger: 420ms; }
.domain:nth-child(9) { --stagger: 480ms; }
.reveal { transition-delay: var(--stagger, 0ms); }

/* anchor offset so sticky header doesn't cover section tops */
section[id] { scroll-margin-top: 90px; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-text { grid-column: 1; }
  .hero-orb-container {
    grid-column: 1;
    margin-bottom: 2rem;
  }
  .hero-orb-canvas {
    width: min(300px, 70vw);
    height: min(300px, 70vw);
  }
}

@media (max-width: 900px) {
  .formats { grid-template-columns: 1fr; }
  .domains { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 560px) {
  .domains { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero-actions, .join-actions { width: 100%; }
  .hero-meta { gap: 0.5rem 1.2rem; }
}

/* ===================================================================
   DOMAIN PAGE TEMPLATE  (§7 of the codex spec)
   -------------------------------------------------------------------
   Everything below serves the nine domains/<slug>.html pages only.
   Reuses .section, .section--alt, .section--dark, .rule-oxford, .eyebrow,
   .prose, .has-dropcap, .btn, .figure-caption, .hand, .channel-row,
   .footer-nine-wrap, .footer-nine-label, .footer-nav--nine (CTA channels +
   footer "Where the well speaks" group are shared with index.html — no
   per-page CSS needed for those), .figure-leader, .figure-annot, .reveal —
   see the blocks above for those.
   No orb, no motes, no chant audio on these pages.
   =================================================================== */

/* ---------- STUDY NAV (return + lateral movement across the nine) ----------
   Sits inside .study-hero, above the hero grid; its top padding clears the
   fixed header (which is why .study-hero's own top padding is modest). */
.study-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-top: 5.6rem;
  padding-bottom: 1rem;
  margin-bottom: clamp(2rem, 6vh, 4rem);
}
.study-nav::after {
  content: "";
  position: absolute;
  left: var(--pad-x); right: var(--pad-x); bottom: 0;
  border-bottom: 1px solid var(--line-faint);
}
.study-nav-back {
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--text-soft);
  transition: color 0.2s var(--ease-inout);
}
.study-nav-back:hover { color: var(--brass-soft); }
.study-nav-ring {
  list-style: none;
  display: flex;
  gap: clamp(0.7rem, 1.6vw, 1.15rem);
  margin: 0;
  padding: 0;
}
.study-nav-ring a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease-inout), border-color 0.2s var(--ease-inout);
}
.study-nav-ring a:hover { color: var(--brass-soft); }
.study-nav-ring a[aria-current="page"] {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* ---------- STUDY HERO (dark, chamber gradient) ---------- */
.study-hero {
  position: relative;
  background: var(--ink-deep);
  background-image: radial-gradient(ellipse at 50% 120%, #1b1409 0%, var(--ink-deep) 60%);
  color: var(--text-on-ink);
  padding: 0 0 clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}
.study-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.study-breadcrumb {
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--brass-soft);
  margin: 0 0 1.4rem;
}
.study-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  color: var(--paper);
  margin: 0 0 1.3rem;
  letter-spacing: 0;
}
.study-essence {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--text-soft);
  max-width: 46ch;
  margin: 0 0 1.8rem;
  line-height: 1.55;
}
.study-epigraph {
  border-left: 1.5px solid var(--line-dark);
  padding-left: 1.3rem;
  max-width: 40ch;
}
.study-epigraph p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.65;
}
.study-figure-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.study-figure-svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--brass);
}
/* ---- Sigil plate: the ancient nonagonal frame housing each study sigil.
   assets/sigil-frame.webp and assets/sigils/<slug>.webp are TRUE-ALPHA
   images (black grounds removed at the pixel level), so they composite
   over any backdrop. No blend modes — z-indexed ancestors isolate the
   stacking context and silently disable them. ---- */
.sigil-plate {
  position: relative;
  width: 100%;
}
.sigil-frame-img {
  display: block;
  width: 100%;
  height: auto;
}
.study-figure-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54%;
  transform: translate(-50%, -50%);
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .study-hero-inner {
    grid-template-columns: 1fr;
  }
  .study-figure-wrap { order: -1; margin-bottom: 2.2rem; }
}

/* ---------- WHAT THIS DOMAIN HOLDS ---------- */
.holds-head { max-width: 760px; margin-bottom: 2.6rem; }
.holds-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--paper); margin: 0.2rem 0 0; }
.holds-body { max-width: 68ch; }
.holds-body p { color: var(--text-soft); font-size: 1.05rem; }

/* ---------- CURRICULUM ("what you will learn to draw") ---------- */
.curriculum-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--text-soft);
  max-width: 68ch;
  margin: -1.2rem 0 2.2rem;
}
.curriculum-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.curriculum-row {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line-faint);
}
.curriculum-row:first-child { border-top: 1px solid var(--line-faint); }
.curriculum-row h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--paper);
  margin: 0 0 0.4rem;
}
.curriculum-row p { margin: 0; color: var(--text-soft); font-size: 0.98rem; }
.curriculum-row .to-come {
  font-style: italic;
  color: var(--text-soft);
  opacity: 0.75;
  font-size: 0.88em;
}

/* ---------- FIRST DRAWS ---------- */
.draws-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.draws-row {
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line-faint);
  flex-wrap: wrap;
}
.draws-row:first-child { border-top: 1px solid var(--line-faint); }
.draws-badge {
  flex: none;
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--brass-soft);
  border: 1px solid var(--line-dark);
  padding: 0.3rem 0.65rem;
}
.draws-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paper);
  flex: none;
  min-width: 22ch;
}
.draws-desc { color: var(--text-soft); font-size: 0.98rem; flex: 1 1 30ch; margin: 0; }

/* ---------- CROSSINGS ---------- */
.crossings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.crossings-row {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line-faint);
}
.crossings-row:first-child { border-top: 1px solid var(--line-faint); }
.crossings-row h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--paper);
  margin: 0 0 0.4rem;
}
.crossings-row h3 a {
  color: var(--brass-soft);
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.crossings-row h3 a:hover { color: var(--brass); border-color: var(--brass); }
.crossings-row p { margin: 0; color: var(--text-soft); font-size: 0.98rem; }
.crossings-row .to-come {
  font-style: italic;
  color: var(--text-soft);
  opacity: 0.75;
  font-size: 0.88em;
}

/* ---------- FROM THE WELL (parchment band, no figure) ---------- */
.well-band .why-inner { max-width: 720px; }
.well-signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--brass-deep);
  margin: 1.8rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
}

/* ---------- CONTINUE THE CIRCLE (prev/next pagination) ---------- */
.pagination {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem 0;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}
.pagination-link {
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--text-soft);
  transition: color 0.24s var(--ease-inout);
  max-width: 45%;
}
.pagination-link:hover { color: var(--brass-soft); }
.pagination-link--next { text-align: right; margin-left: auto; }
@media (max-width: 560px) {
  .pagination { flex-direction: column; }
  .pagination-link, .pagination-link--next { max-width: 100%; text-align: left; }
}

/* ---------- COMPACT CTA (domain pages — no orb) ---------- */
.study-cta { text-align: center; }
.study-cta-inner { max-width: 640px; margin-inline: auto; }
.study-cta h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--paper); margin-bottom: 1.1rem; }
.study-cta-lead { font-size: 1.05rem; color: var(--text-soft); margin-bottom: 2rem; }

/* ---------- FOOTER: current-page marker ("The Nine" group) ---------- */
.footer-nav--nine a.is-current {
  color: var(--brass-soft);
  position: relative;
  padding-left: 1rem;
}
.footer-nav--nine a.is-current::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

/* ---------- STUDY FIGURES (§8) — shared SVG figure styling ---------- */
.study-figure-svg .figure-hairline {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
}
.study-figure-svg .figure-construction {
  fill: none;
  stroke: var(--brass);
  stroke-width: 0.75;
  opacity: 0.4;
  stroke-dasharray: 3 4;
}
.study-figure-svg .figure-hatch {
  stroke: var(--brass);
  stroke-width: 0.6;
  opacity: 0.5;
}
.study-figure-svg .figure-perimeter {
  fill: none;
  stroke: var(--brass);
  stroke-width: 0.5;
  opacity: 0.15;
}
.study-figure-svg .figure-node {
  fill: var(--brass);
}
.study-figure-svg .figure-leader {
  stroke: var(--brass);
  stroke-opacity: 0.55;
  stroke-width: 0.75;
  fill: none;
}
.study-figure-svg .figure-annot {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  fill: var(--text-soft);
  letter-spacing: 0;
}

/* ===================================================================
   READING LIST PAGE  (reading.html)
   -------------------------------------------------------------------
   Cross-cutting interior page, not a domain study. Reuses .section,
   .section--dark, .section--alt, .rule-oxford, .eyebrow, .section-head,
   .prose, .about-lead, .curriculum-list/.curriculum-row, .why-inner,
   .well-band, .well-signoff, .study-cta* — see the blocks above for
   those. Only truly new patterns (the "current page" nav marker and the
   per-domain shelf heading) get their own rules below.
   =================================================================== */

/* ---------- CURRENT-PAGE MARKER for header / mobile / plain footer nav
   (distinct from .footer-nav--nine's dot-marker, which is for the
   nine-domain footer group only) ---------- */
.nav a.is-current,
.mobile-nav a.is-current,
.footer-nav:not(.footer-nav--nine) a.is-current {
  color: var(--brass-soft);
}
.nav a.is-current::after { width: 100%; }

/* ---------- READING LIST: affiliate disclosure line under the hero lead ---------- */
.reading-disclosure {
  font-size: 0.92rem;
  color: var(--text-soft);
  max-width: 62ch;
  margin-top: 1.2rem;
}

/* ---------- READING LIST: one shelf per domain, heading + curriculum-list ---------- */
.reading-domain { margin-bottom: 3.2rem; }
.reading-domain:last-child { margin-bottom: 0; }
.reading-domain-head {
  font-family: var(--font-inscript);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.reading-domain-head a {
  color: var(--brass-deep);
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.reading-domain-head a:hover { color: var(--brass); border-color: var(--brass); }
.reading-domain .curriculum-row h3 {
  font-size: 1.05rem;
  font-weight: 600;
}
.reading-domain .curriculum-row h3 a {
  color: var(--paper);
  border-bottom: 1px solid var(--line-faint);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.reading-domain .curriculum-row h3 a:hover { color: var(--brass-soft); border-color: var(--brass-soft); }