/* ─────────────────────────────────────────────────────────────
   The Antibody Network — design refresh
   Built on the existing brand: warm gold on midnight, Cinzel
   wordmark, Cormorant Garamond italics, Jost body.
   Theming model:
     html[data-mode="dark|light"]    → bg / ink tones
     html[data-palette="gold|verdigris|lapis|ember"]
                                     → accent + glow hue
   ───────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@200;300;400;500&family=JetBrains+Mono:wght@300;400;500&display=swap");

/* ─── dark mode (default) ─── */
:root,
html[data-mode="dark"] {
  --ink: #0a0806;
  --bg: #0d0b09;
  --bg2: #121008;
  --bg3: #181410;
  --bg4: #1e1a14;
  --border: #2e2618;
  --border2: #3d3120;
  --text: #ede4d6;
  --text2: #cfc3ae;
  --text3: #b0a08c;
  --muted: #7a6e5e;
  --faint: #4a4030;
  --cream: #f5edd8;
}

html[data-mode="light"] {
  --ink: #1a1410;
  --bg: #f3ecdc;
  --bg2: #ece3cf;
  --bg3: #e3d8be;
  --bg4: #d8c9a8;
  --border: #c9b88f;
  --border2: #b7a374;
  --text: #1a1410;
  --text2: #3a2f1f;
  --text3: #5b4d36;
  --muted: #877760;
  --faint: #b3a283;
  /* --cream is the "highest-contrast text" semantic across the app —
     in light mode it has to flip to ink-dark so titles and emphasis
     stay legible. Use a literal hex (#fbf6e6) only where you truly
     want a cream surface — see the floating "Press" button. */
  --cream: #0a0806;
}

/* ─── accent palettes ─── */
:root,
html[data-palette="gold"] {
  --accent: #c8a050;
  --accent-hi: #e8c070;
  --accent-lo: #a07030;
  --glow: rgba(200,160,80,.5);
}
html[data-palette="verdigris"] {
  --accent: #5fb09b;
  --accent-hi: #82d0b9;
  --accent-lo: #3d7868;
  --glow: rgba(95,176,155,.45);
}
html[data-palette="lapis"] {
  --accent: #7a9fd6;
  --accent-hi: #a4c0e6;
  --accent-lo: #4e72a4;
  --glow: rgba(122,159,214,.5);
}
html[data-palette="ember"] {
  --accent: #cf7355;
  --accent-hi: #e89878;
  --accent-lo: #9c4e34;
  --glow: rgba(207,115,85,.5);
}

html[data-mode="light"] {
  --glow: rgba(160,112,48,.18);
}
html[data-mode="light"][data-palette="gold"]      { --accent:#9c7430; --accent-hi:#b48a3e; --accent-lo:#6c4e1e; }
html[data-mode="light"][data-palette="verdigris"] { --accent:#3d7868; --accent-hi:#5fb09b; --accent-lo:#2c5447; }
html[data-mode="light"][data-palette="lapis"]     { --accent:#4e72a4; --accent-hi:#7a9fd6; --accent-lo:#345382; }
html[data-mode="light"][data-palette="ember"]     { --accent:#9c4e34; --accent-hi:#cf7355; --accent-lo:#702f1c; }

/* ───────── theme toggle (nav button) ─────────
   Sits flush with nav links; matches the wordmark's typographic
   weight. Sun appears when dark, moon when light. The transition
   is short and pure-opacity-driven so it never feels like a UI
   widget shouting for attention. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  margin-left: 6px;
  background: transparent; border: none; padding: 0;
  color: var(--text2); cursor: pointer;
  border-radius: 4px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.theme-toggle:hover { color: var(--accent-hi); background: color-mix(in srgb, var(--accent), transparent 88%); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { display: block; }

/* ───────── reset & base ───────── */
*{box-sizing:border-box;margin:0;padding:0}
html { background: var(--bg); scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background 600ms ease, color 400ms ease;
}
::selection { background: var(--accent-lo); color: var(--cream); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
button, input { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* film grain — same idea as the original site, kept subtle */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: overlay;
}
html[data-mode="light"] body::before { opacity: .06; mix-blend-mode: multiply; }

/* ───────── typography ───────── */
.cinzel { font-family: "Cinzel", serif; letter-spacing: 0.2em; text-transform: uppercase; }
.cormorant { font-family: "Cormorant Garamond", serif; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; color: var(--muted); }

h1, h2, h3 { font-weight: 400; }

/* ───────── nav ───────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 40px; min-height: 64px;
  background: color-mix(in srgb, var(--bg), transparent 12%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%);
}
.nav-brand {
  font-family: "Cinzel", serif;
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.nav-brand span { color: var(--muted); }
.nav-links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-link {
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); transition: color .2s;
  position: relative; padding: 4px 0;
  cursor: pointer;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--accent); transition: right 300ms ease;
}
.nav-link:hover, .nav-link.active { color: var(--accent-hi); }
.nav-link:hover::after, .nav-link.active::after { right: 0; }
.nav-cta {
  background: transparent;
  border: 1px solid var(--accent-lo);
  border-radius: 3px;
  padding: 7px 16px;
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  transition: all .2s;
}
.nav-cta:hover { background: var(--accent-lo); color: var(--ink); }

/* ───────── hero ───────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 24px 64px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%, color-mix(in srgb, var(--accent-lo) 30%, transparent) 0%, transparent 70%),
    var(--bg);
}

/* Top zone: constellation with wordmark centered inside it */
.hero-stage {
  position: relative;
  z-index: 2;
  width: min(720px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hero-stage > .constellation { position: absolute; inset: 0; }
.hero-stage .hero-mark {
  position: relative;
  z-index: 5;
  text-align: center;
  pointer-events: none;
  padding: 0 16px;
  max-width: 56%;
}
.hero-stage .hero-mark.hidden { opacity: 0; transform: scale(0.96); }
.hero-stage .hero-mark { transition: opacity 350ms ease, transform 350ms ease; }

/* Bottom zone: sub + McKenna + CTAs */
.hero-base {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 680px;
  width: 100%;
  margin: 24px auto 0;
}

.hero-eyebrow {
  font-family: "Cinzel", serif;
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: ""; width: 36px; height: 1px; background: var(--border2);
}

.hero-wordmark {
  font-family: "Cinzel", serif;
  font-size: clamp(28px, 5.4vw, 56px);
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 0 80px color-mix(in srgb, var(--glow), transparent 60%);
}
.hero-wordmark em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 300;
  font-style: italic;
  color: var(--text3);
  line-height: 1.6;
  margin: 28px auto 36px;
  max-width: 580px;
}
.hero-sub br { display: block; }

.hero-divider {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--accent-lo), transparent);
  margin: 0 auto 28px;
}

.hero-pull {
  max-width: 560px;
  margin: 0 auto 12px;
  text-align: left;
  padding-left: 22px;
  border-left: 2px solid var(--accent-lo);
}
.hero-pull p {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(14px, 1.6vw, 17px);
  font-style: italic;
  color: var(--text3);
  line-height: 1.8;
  margin: 0;
}
.hero-attr {
  max-width: 560px;
  margin: 0 auto 36px;
  text-align: left;
  padding-left: 24px;
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--muted);
}

.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-fineprint {
  margin-top: 22px;
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.hero-fineprint a {
  color: var(--text3);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-lo), transparent 60%);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.hero-fineprint a:hover { color: var(--accent); border-color: var(--accent); }
.btn-primary, .btn-ghost {
  display: inline-block;
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 14px 28px; border-radius: 3px;
  transition: all .2s;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent); color: var(--ink); font-weight: 500;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent-lo); }
.btn-ghost:hover { background: color-mix(in srgb, var(--accent), transparent 92%); transform: translateY(-1px); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.hero-stage, .hero-base > * { animation: fadeUp 1s ease both; }
.hero-stage { animation-delay: .1s; }
.hero-base > *:nth-child(1) { animation-delay: .5s; }
.hero-base > *:nth-child(2) { animation-delay: .6s; }
.hero-base > *:nth-child(3) { animation-delay: .7s; }
.hero-base > *:nth-child(4) { animation-delay: .8s; }
.hero-base > *:nth-child(5) { animation-delay: .9s; }

/* scroll hint at the bottom of hero */
.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: "Jost", sans-serif;
  font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.scroll-cue .line {
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: drop 2.4s ease-in-out infinite;
}
@keyframes drop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ───────── constellation ───────── */
.constellation { position: relative; width: 100%; height: 100%; }
.constellation svg { width: 100%; height: 100%; display: block; overflow: visible; }

.cn-edge {
  fill: none;
  stroke-width: 0.4;
  opacity: 0.12;
  transition: opacity 500ms, stroke-width 500ms;
}
.cn-edge.active { opacity: 0.7; stroke-width: 0.7; }

.cn-ring {
  fill: none;
  stroke: var(--border2);
  stroke-width: 0.15;
}

.cn-node {
  cursor: pointer;
  transition: transform 400ms cubic-bezier(.2,.7,.2,1);
  transform-box: fill-box;
  transform-origin: center;
}
.cn-node:hover { transform: scale(1.18); }
.cn-node.dim { opacity: 0.28; }
.cn-glyph { transition: filter 400ms; }
.cn-node:hover .cn-glyph { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 22px currentColor); }
.cn-readout {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  width: 240px;
  min-height: 80px;
}
.cn-readout .rd-trad {
  font-family: "Cinzel", serif;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  margin-bottom: 10px;
  transition: color 300ms;
}
.cn-readout .rd-truth {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px; font-style: italic;
  color: var(--text2);
  line-height: 1.4;
}
.cn-readout .rd-hint {
  font-family: "Jost", sans-serif;
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--muted);
}

/* ───────── traditions strip ───────── */
.traditions-sect {
  padding: 80px 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  position: relative;
}
.traditions-label {
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 48px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.traditions-label::before, .traditions-label::after {
  content: ""; width: 56px; height: 1px; background: var(--border2);
}
.traditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  max-width: 1180px;
  margin: 0 auto;
}
.trad-card {
  background: var(--bg2);
  padding: 32px 20px 28px;
  text-align: center;
  cursor: pointer;
  transition: background .25s;
  position: relative;
}
.trad-card:hover { background: var(--bg3); }
.trad-card svg {
  display: block;
  margin: 0 auto 16px;
  filter: drop-shadow(0 0 6px currentColor);
  transition: filter .25s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.trad-card:hover svg {
  filter: drop-shadow(0 0 16px currentColor);
  transform: rotate(-3deg) scale(1.05);
}
.trad-name {
  font-family: "Cinzel", serif;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 8px;
}
.trad-desc {
  font-family: "Cormorant Garamond", serif;
  font-size: 13px; font-style: italic;
  color: var(--faint);
  line-height: 1.5;
}

/* ───────── manifesto ───────── */
.manifesto {
  position: relative;
  padding: 140px 24px;
  max-width: 800px;
  margin: 0 auto;
}
.manifesto-eyebrow {
  font-family: "Cinzel", serif;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 48px;
  display: flex; align-items: center; gap: 18px;
}
.manifesto-eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.manifesto-header {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 48px;
  letter-spacing: -0.01em;
}
.manifesto-header em {
  color: var(--accent);
  font-style: italic;
}
.manifesto-divider {
  width: 60px; height: 1px;
  background: var(--border2, var(--border));
  margin: 56px 0;
}
.manifesto-body p {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 300;
  line-height: 1.85;
  color: var(--text2);
  margin-bottom: 36px;
  max-width: 64ch;
}
.manifesto-body p strong { color: var(--cream); font-weight: 400; }
.manifesto-body p em { color: var(--accent); font-style: italic; }
.manifesto-mckenna {
  margin: 16px 0 44px;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--accent-lo);
}
.manifesto-mckenna-intro {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(15px, 1.7vw, 17px);
  color: var(--text3);
  line-height: 1.75;
  margin-bottom: 18px;
}
.manifesto-mckenna-quote {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(18px, 2vw, 22px);
  font-style: italic;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 14px;
}
.manifesto-mckenna-attr {
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--muted);
  font-style: normal;
}
.manifesto-cta {
  margin-top: 64px;
}

/* ───────── ways in (top-of-page explainer) ─────────
   Same vocabulary as enter-cta, lighter chrome (no halo, no border)
   because this one sits near the top rather than closing the page. */
.ways-in {
  padding: 96px 24px 80px;
  text-align: center;
  background: var(--bg);
  position: relative;
}
.ways-in .cta-eyebrow { color: var(--muted); }
.ways-in .cta-title { margin-bottom: 16px; }
.ways-in .cta-sub { margin-bottom: 56px; }

/* Four-path layout: 2×2 on desktop, single column on narrow */
.cta-paths-four {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 1180px;
}
@media (min-width: 980px) {
  .cta-paths-four { grid-template-columns: repeat(2, 1fr); }
}

/* ───────── enter cta ───────── */
.enter-cta {
  padding: 140px 24px;
  text-align: center;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.enter-cta::before {
  /* a soft halo */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, color-mix(in srgb, var(--accent-lo) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.enter-cta > * { position: relative; z-index: 1; }
.cta-eyebrow {
  font-family: "Cinzel", serif;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 16px;
}
.cta-eyebrow::before, .cta-eyebrow::after {
  content: ""; width: 36px; height: 1px; background: var(--border2);
}
.cta-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.cta-title em { color: var(--accent); font-style: italic; }
.cta-sub {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(16px, 1.6vw, 18px);
  font-style: italic;
  color: var(--text3);
  margin: 0 auto 48px;
  line-height: 1.7;
  max-width: 540px;
}

/* Two-path closing — Clearing for new readers, Map for wanderers */
.cta-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}
.cta-path {
  display: block;
  padding: 32px 32px 28px;
  background: color-mix(in srgb, var(--bg), transparent 0%);
  border: 1px solid var(--border);
  border-radius: 4px;
  position: relative;
  transition: border-color .25s, transform .25s, background .25s;
  text-decoration: none;
  color: inherit;
}
.cta-path:hover {
  border-color: var(--accent-lo);
  background: color-mix(in srgb, var(--bg2), transparent 0%);
  transform: translateY(-2px);
}
.cta-path.primary {
  border-color: var(--accent-lo);
  background: color-mix(in srgb, var(--accent), transparent 92%);
  box-shadow: 0 0 24px var(--glow);
}
.cta-path.primary:hover { border-color: var(--accent); }
.cta-path-eyebrow {
  font-family: "Cinzel", serif;
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.cta-path:not(.primary) .cta-path-eyebrow { color: var(--muted); }
.cta-path-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 28px;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 8px;
}
.cta-path-dek {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text3);
  line-height: 1.5;
  max-width: 32ch;
}
.cta-path-arrow {
  position: absolute;
  right: 24px; bottom: 24px;
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  color: var(--accent);
  transition: transform .25s ease;
}
.cta-path:hover .cta-path-arrow { transform: translateX(6px); }

/* ───────── footer ───────── */
.foot {
  border-top: 1px solid var(--border);
  padding: 54px 48px 40px;
  display: flex; flex-direction: column;
  background: var(--bg2);
  gap: 36px;
}
.foot-connect { display: flex; flex-direction: column; gap: 18px; }
.foot-connect-label {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 21px; letter-spacing: 0.01em; color: var(--text3);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 12px; }
.foot-link {
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none; padding: 14px 20px;
  min-width: 190px; flex: 0 1 auto;
  border: 1px solid var(--border); border-radius: 2px;
  background: var(--bg3);
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.foot-link:hover {
  border-color: var(--accent-lo); background: var(--bg4);
  transform: translateY(-1px);
}
.foot-link-k {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
}
.foot-link-v {
  font-family: "Jost", sans-serif; font-size: 13px; letter-spacing: 0.02em;
  color: var(--text2);
}
.foot-base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-top: 30px; border-top: 1px solid var(--border);
}
.foot-brand {
  font-family: "Cinzel", serif;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.foot-copy {
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--faint);
}
.foot-door {
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
  transition: color .2s ease;
}
.foot-door:hover { color: #c9a86a; }
/* Field Office — the "about this work" page, reachable from every
   footer. A quiet internal link, a touch warmer than the copy line. */
.foot-fieldoffice {
  font-family: "Jost", sans-serif;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.foot-fieldoffice:hover { color: var(--accent-hi); }
/* The same quiet door, repeated as the last line of every full page
   footer — the Mycelium lives under the floor of each page. */
.foot-door-row {
  flex: 0 0 100%; grid-column: 1 / -1;
  display: flex; margin-top: 14px;
}

/* ───────── "The Deep Woods" door link ─────────
   A door you find, not a door you're pushed through. Appears at the
   bottom of each Dispatch reading and each tradition essay (plus one
   line in the home footer above). The underline is the Deep Woods'
   signature thread line — fine, root-like, pale gold. */
.dw-door-wrap {
  margin-top: 72px;
  display: flex; justify-content: center;
}
.dw-door {
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  white-space: nowrap;
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted);
  transition: color .25s ease;
}
.dw-door .dw-door-line {
  width: 150px; height: 10px;
  color: color-mix(in srgb, #c9a86a, transparent 35%);
  transition: color .25s ease;
}
.dw-door .dw-door-line path,
.dw-door .dw-door-line circle {
  stroke: currentColor; stroke-width: 1; fill: none;
  vector-effect: non-scaling-stroke;
}
.dw-door:hover { color: var(--text2); }
.dw-door:hover .dw-door-line { color: #c9a86a; }
html[data-mode="light"] .dw-door .dw-door-line { color: color-mix(in srgb, #8a6b34, transparent 30%); }
html[data-mode="light"] .dw-door:hover .dw-door-line { color: #8a6b34; }

/* ───────── shared connect row (interior footers) ─────────
   Dropped into every page footer (.td2-foot, .lb-foot, .cl-foot-inner,
   .bp-foot-inner, .idx-foot, .tm-foot, .tx-foot). flex:0 0 100% forces it
   onto its own line below the brand + page links; spans full width inside
   the grid footers too. Shares the home footer's type vocabulary. */
.foot-social {
  flex: 0 0 100%;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.foot-social-label {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 16px; letter-spacing: 0.01em; color: var(--text3);
  margin-right: 4px;
}
.foot-social a {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--text2); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s ease;
}
.foot-social a::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: 0.7; flex: none;
}
.foot-social a:hover { color: var(--accent); }

/* ───────── breakpoints ───────── */
@media (max-width: 800px) {
  .nav { padding: 0 16px; gap: 12px; }
  .nav-brand { font-size: 11px; letter-spacing: 0.16em; }
  .nav-links {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 18px;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; flex-shrink: 0; }
  .nav-cta {
    /* keep it on one line — no padding-induced wrapping */
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .hero { padding: 88px 16px 56px; min-height: auto; }
  .hero-stage { width: min(540px, 84vw); }
  .hero-stage .hero-mark { max-width: 70%; }
  .hero-net-inner { width: min(700px, 100vw); }
  .traditions-sect { padding: 64px 20px; }
  .traditions-grid { grid-template-columns: repeat(2, 1fr); }
  .manifesto { padding: 80px 20px; }
  .enter-cta { padding: 80px 20px; }
  .cta-paths { gap: 14px; }
  .cta-path { padding: 26px 22px 56px; }
  .cta-path-title { font-size: 24px; }
  .foot { padding: 40px 20px 28px; }
  .foot-link { min-width: 0; flex: 1 1 100%; }
}

/* very narrow phones — iPhone SE / older Androids */
@media (max-width: 420px) {
  .nav { height: 56px; padding: 0 14px; gap: 12px; }
  .nav-brand { font-size: 10px; letter-spacing: 0.14em; }
  .nav-links { gap: 14px; }
  .nav-link { font-size: 10px; letter-spacing: 0.12em; }
  .nav-cta { display: none; }
  .hero { padding: 76px 14px 40px; }
  .hero-stage { width: min(440px, 90vw); }
  .hero-eyebrow { font-size: 9px; letter-spacing: 0.28em; gap: 10px; margin-bottom: 14px; }
  .hero-eyebrow::before, .hero-eyebrow::after { width: 24px; }
  .hero-sub { font-size: 16px; margin: 22px auto 28px; }
  .hero-pull { padding-left: 16px; }
  .hero-pull p { font-size: 14px; line-height: 1.7; }
  .hero-attr { padding-left: 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-primary, .btn-ghost { padding: 12px 22px; text-align: center; }
  .hero-fineprint { font-size: 10px; letter-spacing: 0.16em; }
  .traditions-sect { padding: 48px 14px; }
  .traditions-grid { grid-template-columns: 1fr 1fr; }
  .trad-card { padding: 24px 14px 22px; }
  .manifesto { padding: 64px 16px; }
  .manifesto-header { font-size: 30px; line-height: 1.18; }
  .manifesto-body p { font-size: 17px; line-height: 1.75; }
  .enter-cta { padding: 64px 16px; }
  .cta-title { font-size: 32px; }
  .cta-sub { font-size: 15px; margin-bottom: 32px; }
}

/* ─── scroll-in animation ─── */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 1000ms ease, transform 1000ms cubic-bezier(.2,.7,.2,1); }
.fade-in.in { opacity: 1; transform: none; }