/* ─────────────────────────────────────────────────────────────
   The Mycelium — page styles. (Formerly "The Deep Woods";
   renamed June 2026. The --dw-* token names are kept.)

   Token system (per the design doc): forest floor, not cyberpunk.
   The section deliberately does not participate in the Map's
   tradition palette, and it is low-light by design — there is no
   light mode down here.

   Signature element: the thread line — a fine root-like 1px line
   in --dw-thread with a small open-circle terminal. It appears in
   exactly three places: (1) divider before each thread's epistemic
   note, (2) connector glyph beside outbound map/dispatch links,
   (3) underline on the "Mycelium" door link at the bottom of
   Dispatches / tradition essays (styled in those pages' css).
   ───────────────────────────────────────────────────────────── */

:root {
  --dw-ground: #14110d;   /* forest-floor near-black, brown cast */
  --dw-loam:   #2a2118;   /* panel + card background, dark humus */
  --dw-moss:   #6b7f59;   /* secondary accent — labels, epistemic markers */
  --dw-thread: #c9a86a;   /* primary accent — thread lines, used sparingly */
  --dw-text:   #ede4d6;
  --dw-text2:  #cfc3ae;
  --dw-text3:  #b0a08c;
  --dw-muted:  #847661;
  --dw-border: #352b1f;
  --dw-bright: #f3ead9;   /* highest-contrast text — titles, emphasis */
}

/* ─── lantern-lit variant ───
   The light mode down here is not daylight — it is reading by
   lantern: warm parchment, a pool of light, dim edges. Toggled by
   the site-wide data-mode (nav sun/moon button + Tweaks). */
html.dw-root[data-mode="light"] {
  --dw-ground: #eee3ca;
  --dw-loam:   #e0d2b0;
  --dw-moss:   #5a6c48;
  --dw-thread: #8a6b34;
  --dw-text:   #2b2214;
  --dw-text2:  #443720;
  --dw-text3:  #5e4f33;
  --dw-muted:  #877456;
  --dw-border: #cdba90;
  --dw-bright: #1c1509;
}

html.dw-root, .dw-body {
  background: var(--dw-ground);
}
.dw-body {
  color: var(--dw-text);
}
.dw-body::selection, .dw-body ::selection {
  background: #4a3c26; color: #f5edd8;
}
html[data-mode="light"] .dw-body::selection,
html[data-mode="light"] .dw-body ::selection {
  background: #c9b288; color: #1c1509;
}

/* the lantern — a warm pool of light above, dim loam at the edges */
html[data-mode="light"] .dw-body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 400;
  background:
    radial-gradient(ellipse 120% 80% at 50% 12%, rgba(255,238,196,0.18), transparent 52%),
    radial-gradient(ellipse 145% 125% at 50% 55%, transparent 58%, rgba(92,68,32,0.10) 100%);
}

/* the mycelium in the ground — a fixed canvas behind everything;
   content layers sit above it (see .dw-page / .dw-foot z-index) */
.dw-mycelium-bg {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ───────── header ───────── */
.dw-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 8px 40px; min-height: 64px;
  background: color-mix(in srgb, var(--dw-ground), transparent 10%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--dw-border), transparent 35%);
}
.dw-brand {
  font-family: "Cinzel", serif;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dw-text2);
  white-space: nowrap;
}
.dw-brand .sep { color: var(--dw-muted); margin: 0 8px; }
.dw-brand .sub { color: var(--dw-thread); }
.dw-head nav {
  display: flex; align-items: center; gap: 26px;
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
}
.dw-head nav a { color: var(--dw-text3); transition: color .18s ease; }
.dw-head nav a:hover { color: var(--dw-thread); }

/* ───────── shared page scaffold ───────── */
.dw-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 148px 28px 0;
  position: relative; z-index: 1;
}
.dw-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--dw-moss);
}
.dw-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(38px, 6vw, 54px);
  line-height: 1.12;
  margin: 18px 0 0;
  color: var(--dw-bright);
  text-wrap: balance;
}
.dw-dek {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 21px; line-height: 1.62;
  color: var(--dw-text2);
  margin-top: 26px;
  text-wrap: pretty;
}

/* reading body — slightly larger leading than the rest of the site:
   reading-in-the-dark comfort */
.dw-prose p {
  font-family: "Cormorant Garamond", serif;
  font-size: calc(19px * var(--dw-type-scale, 1));
  line-height: 1.85;
  color: var(--dw-text);
  margin: 0 0 1.45em;
  text-wrap: pretty;
}
.dw-prose p:last-child { margin-bottom: 0; }
.dw-prose strong { font-weight: 600; color: var(--dw-bright); }
.dw-prose em { font-style: italic; }

/* stage-marker paragraphs (the alchemy symbolic system) */
.dw-prose p.dw-stage { position: relative; padding-left: 26px; }
.dw-prose p.dw-stage::before {
  content: "";
  position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--dw-stage-c, var(--dw-muted));
  background: transparent;
}
.dw-prose p.dw-stage.filled::before { background: var(--dw-stage-c); }
.dw-prose p.stage-nigredo    { --dw-stage-c: #524434; }
.dw-prose p.stage-albedo     { --dw-stage-c: #d8cfc0; }
.dw-prose p.stage-citrinitas { --dw-stage-c: #a88f45; }
.dw-prose p.stage-rubedo     { --dw-stage-c: var(--dw-thread); }
html[data-mode="light"] .dw-prose p.stage-nigredo { --dw-stage-c: #3a3226; }
html[data-mode="light"] .dw-prose p.stage-albedo  { --dw-stage-c: #c4b794; }

/* ───────── the thread line ───────── */
.dw-threadline {
  display: block;
  width: min(320px, 70%);
  height: 14px;
  color: var(--dw-thread);
}
.dw-threadline path,
.dw-threadline circle {
  stroke: currentColor; stroke-width: 1; fill: none;
  vector-effect: non-scaling-stroke;
}
/* slow draw-on at section entry; respects prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .dw-anim .dw-threadline path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.4s ease-out;
  }
  .dw-anim .dw-threadline circle {
    opacity: 0; transition: opacity .8s ease 2s;
  }
  .dw-anim .dw-threadline.drawn path { stroke-dashoffset: 0; }
  .dw-anim .dw-threadline.drawn circle { opacity: 1; }
}

/* the small connector glyph version, beside outbound links */
.dw-threadline.glyph {
  width: 34px; height: 12px; flex: none;
  color: var(--dw-thread);
}

/* ───────── landing: the Mycelium ───────── */
.dw-landing { padding-bottom: 140px; }
.dw-mycelium { margin-top: 72px; }
.dw-mycelium .dw-section-label { margin-bottom: 26px; }

.dw-section-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--dw-moss);
}

/* thread index — no teaser cards; the restraint is the invitation */
.dw-thread-list {
  margin-top: 96px;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--dw-border);
}
.dw-thread-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 34px 4px;
  border-bottom: 1px solid var(--dw-border);
  transition: background .25s ease;
}
.dw-thread-row:hover { background: color-mix(in srgb, var(--dw-loam), transparent 55%); }
.dw-thread-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--dw-moss);
  padding-top: 9px;
}
.dw-thread-row h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400; font-size: 27px; line-height: 1.25;
  color: var(--dw-bright);
  transition: color .25s ease;
}
.dw-thread-row:hover h2 { color: var(--dw-thread); }
.dw-thread-row .dw-thread-summary {
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: 14.5px; line-height: 1.7;
  color: var(--dw-text3);
  margin-top: 10px;
  text-wrap: pretty;
}

/* ───────── thread page ───────── */
.dw-thread-page { padding-bottom: 140px; }
.dw-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dw-muted);
  margin-bottom: 44px;
  transition: color .18s ease;
  white-space: nowrap;
}
.dw-back:hover { color: var(--dw-thread); }

.dw-thread-head .dw-title { font-size: clamp(34px, 5.4vw, 48px); }
.dw-thread-head .dw-dek { font-size: 19px; }

/* section list — sticky + collapsible on mobile, quiet list on desktop */
.dw-toc {
  margin: 56px 0 0;
  border-top: 1px solid var(--dw-border);
  border-bottom: 1px solid var(--dw-border);
  padding: 18px 2px;
}
.dw-toc-toggle {
  display: none;
  width: 100%;
  background: none; border: none;
  text-align: left;
  padding: 0;
  color: var(--dw-moss);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
}
.dw-toc-label { margin-bottom: 12px; }
.dw-toc ol {
  list-style: none;
  display: flex; flex-direction: column; gap: 7px;
}
.dw-toc a {
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: 14px; letter-spacing: 0.02em;
  color: var(--dw-text3);
  transition: color .18s ease;
}
.dw-toc a:hover { color: var(--dw-thread); }
.dw-toc .n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; color: var(--dw-muted);
  margin-right: 10px;
}

.dw-section { margin-top: 76px; }
.dw-section-heading {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--dw-moss);
  margin-bottom: 26px;
}

/* ───────── epistemic note ───────── */
.dw-epistemic { margin-top: 88px; }
.dw-epistemic .dw-threadline { margin-bottom: 30px; }
.dw-epi-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  padding: 14px 0;
}
.dw-epi-row + .dw-epi-row { border-top: 1px solid color-mix(in srgb, var(--dw-border), transparent 35%); }
.dw-epi-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--dw-moss);
  padding-top: 3px;
}
.dw-epi-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dw-epi-list li {
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: 14.5px; line-height: 1.65;
  color: var(--dw-text2);
  text-wrap: pretty;
}

/* ───────── outbound links (one-directional by construction) ───────── */
.dw-out { margin-top: 78px; }
.dw-out-group + .dw-out-group { margin-top: 36px; }
.dw-out .dw-section-label { margin-bottom: 16px; }
.dw-out-list { display: flex; flex-direction: column; gap: 10px; }
.dw-out-link {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 3px;
  transition: background .2s ease;
}
.dw-out-link:hover { background: color-mix(in srgb, var(--dw-loam), transparent 45%); }
.dw-out-link .t {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px; color: var(--dw-text);
}
.dw-out-link .k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dw-muted);
  margin-left: auto; flex: none;
}
.dw-out-link:hover .t { color: var(--dw-thread); }

/* ───────── prev / next thread ───────── */
.dw-thread-nav {
  margin-top: 100px;
  padding-top: 30px;
  border-top: 1px solid var(--dw-border);
  display: flex; justify-content: space-between; gap: 24px;
}
.dw-thread-nav a { max-width: 46%; }
.dw-thread-nav .label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--dw-muted);
  margin-bottom: 8px;
}
.dw-thread-nav h4 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400; font-size: 19px; line-height: 1.3;
  color: var(--dw-text2);
  transition: color .2s ease;
}
.dw-thread-nav a:hover h4 { color: var(--dw-thread); }
.dw-thread-nav .next { text-align: right; margin-left: auto; }

/* ───────── footer ───────── */
.dw-foot {
  border-top: 1px solid var(--dw-border);
  margin-top: 140px;
  padding: 56px 28px 72px;
  text-align: center;
  position: relative; z-index: 1;
}
.dw-foot-brand {
  font-family: "Cinzel", serif;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--dw-text3);
}
.dw-foot-line {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 15px; color: var(--dw-muted);
  margin-top: 12px;
}
.dw-foot-back {
  display: inline-block;
  margin-top: 26px;
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dw-text3);
  transition: color .18s ease;
}
.dw-foot-back:hover { color: var(--dw-thread); }

/* ───────── mobile ───────── */
@media (max-width: 720px) {
  .dw-head { padding: 8px 20px; }
  .dw-head nav { gap: 16px; font-size: 12px; }
  .dw-brand .sep, .dw-brand .home { display: none; }
  .dw-page { padding: 120px 20px 0; }

  /* sticky, collapsible section list */
  .dw-toc {
    position: sticky; top: 64px; z-index: 400;
    background: color-mix(in srgb, var(--dw-ground), transparent 6%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-left: -20px; margin-right: -20px;
    padding: 14px 20px;
  }
  .dw-toc-toggle { display: block; }
  .dw-toc-toggle .dw-toc-arrow { float: right; transition: transform .2s ease; }
  .dw-toc.open .dw-toc-arrow { transform: rotate(180deg); }
  .dw-toc-label { margin-bottom: 0; }
  .dw-toc ol { display: none; margin-top: 14px; }
  .dw-toc.open ol { display: flex; }

  .dw-thread-row { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .dw-thread-num { padding-top: 0; }
  .dw-epi-row { grid-template-columns: 1fr; gap: 8px; }
  .dw-thread-nav { flex-direction: column; gap: 28px; }
  .dw-thread-nav a { max-width: none; }
  .dw-thread-nav .next { text-align: left; margin-left: 0; }
}