/* ─── nqant.com/map — the self-model · editorial + the forest ────────────
   Loads AFTER style.css: inherits :root brand tokens + .hdr/.wordmark chrome,
   then overrides the landing's fixed-viewport lock so the page scrolls.
   The painting stays FIXED + fully visible the whole scroll (dashboard glass
   system); editorial sits in frosted-glass panels, the forest in a sticky
   rail beside the writing. No new colors — brand tokens only.                */

html.map, body.map {
  overflow: visible;
  overflow-x: clip;            /* clip (not hidden): no scroll container → sticky rail keeps working */
  height: auto;
  min-height: 100%;
  scroll-behavior: smooth;
}
body.map {
  background: var(--void);
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  html.map, body.map { scroll-behavior: auto; }
}

/* The painting is fixed and fully visible the WHOLE scroll (continuity with
   the dashboard). Legibility comes from glass panels + text-shadow, never from
   fading the art to void — a light, even vignette only. */
body.map #painting {
  position: fixed;
  inset: 0;
  height: 100%;
  opacity: 1;
}
body.map #painting::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 30%, transparent 38%, rgba(10,5,32,0.34) 100%),
    linear-gradient(to bottom, rgba(10,5,32,0.22), rgba(10,5,32,0.30));
}

/* ─── glass panel recipe (the dashboard system) ──────────────────────────
   light frosted card; legibility via blur + text-shadow, not darkening.      */
.glass {
  background: rgba(16,10,34,0.46);
  backdrop-filter: blur(17px) saturate(1.05);
  -webkit-backdrop-filter: blur(17px) saturate(1.05);
  border: 1px solid rgba(200,190,224,0.14);
  border-radius: 18px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ─── type ───────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--regime);
  transition: color 2.5s ease;
  margin-bottom: 16px;
}
h1, h2, h3 { font-family: 'MuseoModerno', var(--mono); font-weight: 500; }
h1 {
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.04; letter-spacing: -0.01em;
  color: var(--crest);
}
h2 {
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.1; letter-spacing: -0.005em;
  color: var(--crest);
  margin-bottom: 20px;
}
h3 {
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--foam); font-weight: 500;
  margin-bottom: 8px;
}
p {
  font-family: var(--mono);
  font-size: clamp(14px, 1.45vw, 16px);
  font-weight: 300; line-height: 1.72;
  color: #e2dcf0;
  text-shadow: 0 1px 8px rgba(10,5,32,0.5);
  margin-bottom: 16px;
}
strong { color: var(--crest); font-weight: 500; }
em { color: var(--foam); font-style: italic; }

/* ─── hero (open, over the full painting) ────────────────────────────── */
.hero {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  width: min(1180px, 92vw); margin: 0 auto;
  padding: 0 0 clamp(56px, 9vh, 110px);
}
.hero-inner { max-width: 760px; }
.hero h1 {
  margin-bottom: 22px; max-width: 13ch;
  text-shadow: 0 2px 30px rgba(10,5,32,0.85), 0 1px 8px rgba(10,5,32,0.95), 0 0 60px rgba(10,5,32,0.5);
}
.hero .sub {
  font-size: clamp(15px, 1.7vw, 18.5px);
  color: var(--foam); font-weight: 300; line-height: 1.7;
  max-width: 54ch; margin-bottom: 34px;
  text-shadow: 0 1px 12px rgba(10,5,32,0.9);
}
.scrollcue {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mid-purple);
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  text-shadow: 0 1px 8px rgba(10,5,32,0.9);
}
.scrollcue::after {
  content: ''; width: 1px; height: 30px;
  background: linear-gradient(var(--mid-purple), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(4px)} }

/* the daily loop, as a hero callout */
.loop { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 4px 0 32px; }
.loop-step {
  flex: 1 1 150px;
  border: 1px solid rgba(200,190,224,0.16);
  border-radius: 12px;
  background: rgba(16,10,34,0.46);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 16px 16px 18px;
}
.loop-step .n { font-family: 'MuseoModerno', var(--mono); font-size: 22px; color: var(--regime); transition: color 2.5s ease; display: block; margin-bottom: 6px; }
.loop-step .t { font-family: var(--mono); font-size: 13px; color: var(--crest); font-weight: 500; letter-spacing: 0.02em; display: block; }
.loop-step .d { font-family: var(--mono); font-size: 12px; color: var(--mid-purple); font-weight: 300; line-height: 1.5; margin-top: 6px; display: block; }
.loop-arrow { align-self: center; color: var(--mid-purple); font-size: 16px; }
@media (max-width: 640px){ .loop-arrow{ display:none } }

/* ─── reading: editorial (left) + sticky forest rail (right) ─────────── */
.reading {
  position: relative; z-index: 1;
  width: min(1180px, 92vw); margin: 0 auto;
  padding: clamp(8px, 3vh, 40px) 0 clamp(40px, 7vh, 90px);
}
.prose { min-width: 0; }
.prose .section { padding: clamp(26px, 3.4vw, 44px); margin-bottom: clamp(18px, 2.6vh, 30px); }
.prose .section:last-child { margin-bottom: 0; }

/* the forest rail — mobile-first: static block; desktop: sticky companion */
.forest-rail { margin-bottom: clamp(18px, 2.6vh, 30px); }
.graph-stage {
  position: relative;
  width: 100%; height: 62vh; min-height: 380px;
  overflow: hidden; cursor: grab;
}
.graph-stage:active { cursor: grabbing; }
#graph-host { position: absolute; inset: 0; z-index: 1; }
#graph-host canvas { display: block; }

@media (min-width: 940px) {
  .reading {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
    gap: clamp(26px, 3.4vw, 60px);
    align-items: stretch;          /* the rail cell stretches to the prose's full height */
  }
  /* explicit row keeps both in row 1 — DOM order is rail-first (for mobile),
     so without this the sparse auto-flow pushes .prose into row 2. */
  .prose { grid-column: 1; grid-row: 1; }
  .forest-rail { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  /* the STAGE (not the cell) is sticky — robust across the whole prose column */
  .graph-stage { position: sticky; top: 82px; height: calc(100vh - 100px); }
}

/* rail overlays */
.rail-cap {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px 28px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14,8,30,0.62), transparent);
}
.rail-cap .eyebrow { margin: 0; }
.rail-sub { font-family: var(--mono); font-size: 11.5px; font-weight: 300; color: var(--mid-purple); letter-spacing: 0.02em; }

.graph-legend {
  position: absolute; bottom: 14px; left: 14px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: min(78%, 420px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  pointer-events: none;
  background: rgba(14,8,30,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 9px 13px; border-radius: 10px; border: 1px solid rgba(200,190,224,0.10);
}
.graph-legend .lg { display: inline-flex; align-items: center; gap: 6px; color: var(--mid-purple); }
.graph-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.graph-hint {
  position: absolute; bottom: 16px; right: 16px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mid-purple); pointer-events: none; text-align: right; max-width: 40%;
  transition: opacity .4s ease;
}

/* node detail drawer (Matuschak-ish slide-in within the rail) */
.drawer {
  position: absolute; top: 0; right: 0; z-index: 5;
  width: min(380px, 92%); height: 100%;
  background: rgba(14,8,30,0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(200,190,224,0.16);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
  padding: 26px 24px; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer .close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--mid-purple); font-size: 20px; cursor: pointer; font-family: var(--mono); }
.drawer .close:hover { color: var(--foam); }
.drawer .d-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 22px 14px 0; }
.drawer .d-crumbs:empty { display: none; }
.drawer .crumb { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 10.5px; color: var(--mid-purple); letter-spacing: 0.02em; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer .crumb:hover { color: var(--foam); }
.drawer .crumb.cur { color: var(--foam); }
.drawer .d-crumbs .sep { color: rgba(160,144,196,0.5); font-size: 11px; }
.drawer .d-cat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.drawer .d-title { font-family: 'MuseoModerno', var(--mono); font-size: 21px; color: var(--crest); margin: 10px 0 4px; line-height: 1.15; }
.drawer .d-stage { font-family: var(--mono); font-size: 12px; color: var(--foam); margin-bottom: 16px; }
.drawer .d-body { font-family: var(--mono); font-size: 13.5px; font-weight: 300; line-height: 1.62; color: #d4cce8; }
.drawer .d-body p { font-size: 13.5px; margin-bottom: 12px; text-shadow: none; }
.drawer .d-rel { margin-top: 18px; }
.drawer .d-rel .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid-purple); display: block; margin-bottom: 8px; }
.drawer .chip { display: inline-block; font-family: var(--mono); font-size: 11px; color: var(--foam); border: 1px solid rgba(200,190,224,0.2); border-radius: 20px; padding: 3px 10px; margin: 0 5px 6px 0; cursor: pointer; transition: border-color .2s, color .2s; }
.drawer .chip:hover { border-color: var(--regime); color: var(--crest); }
.drawer .d-redact { margin-top: 18px; font-family: var(--mono); font-size: 11px; font-weight: 300; color: var(--mid-purple); line-height: 1.5; border-top: 1px solid rgba(200,190,224,0.1); padding-top: 14px; }

/* ─── maturity legend / forest ───────────────────────────────────────── */
.forest { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px,1fr)); gap: 8px; margin: 24px 0 6px; }
.stage { text-align: center; padding: 16px 8px 14px; border-radius: 10px; background: rgba(20,12,42,0.42); border: 1px solid rgba(200,190,224,0.10); }
.stage .ico { font-size: 24px; display: block; margin-bottom: 8px; filter: saturate(1.1); }
.stage .nm { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foam); }
.stage .ph { font-family: var(--mono); font-size: 10.5px; color: var(--mid-purple); font-weight: 300; margin-top: 3px; line-height: 1.4; }

/* ─── the gauntlet (gate) ────────────────────────────────────────────── */
.gauntlet { display: grid; gap: 12px; margin: 22px 0 6px; }
.gate { border: 1px solid rgba(200,190,224,0.14); border-left: 2px solid var(--regime); border-radius: 8px; padding: 18px 20px; background: rgba(20,12,42,0.42); transition: border-left-color 2.5s ease; }
.gate .k { font-family: 'MuseoModerno', var(--mono); font-size: 15px; color: var(--crest); }
.gate .k b { color: var(--regime); font-weight: 700; transition: color 2.5s ease; }
.gate p { margin: 8px 0 0; font-size: 14px; text-shadow: none; }

/* ─── pull quote ─────────────────────────────────────────────────────── */
.pull { border-left: 2px solid var(--regime); padding: 4px 0 4px 24px; margin: 26px 0; transition: border-color 2.5s ease; }
.pull p { font-family: 'MuseoModerno', var(--mono); font-weight: 400; font-size: clamp(18px, 2.3vw, 25px); line-height: 1.32; color: var(--crest); margin: 0; text-shadow: 0 2px 18px rgba(10,5,32,0.6); }

/* ─── two laws ───────────────────────────────────────────────────────── */
.laws { display: grid; gap: 14px; margin-top: 6px; }
.law { padding: 20px 22px; border-radius: 12px; background: rgba(20,12,42,0.5); border: 1px solid rgba(200,190,224,0.12); }
.law .claim { color: var(--foam); font-style: italic; font-size: 14px; margin: 6px 0 14px; }

/* ─── constitution grid ──────────────────────────────────────────────── */
.consti { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1px; margin-top: 20px; background: rgba(200,190,224,0.10); border: 1px solid rgba(200,190,224,0.10); border-radius: 12px; overflow: hidden; }
.guarantee { background: rgba(20,12,42,0.78); padding: 16px 18px; }
.guarantee .num { font-family: var(--mono); font-size: 11px; color: var(--regime); letter-spacing: 0.1em; transition: color 2.5s ease; }
.guarantee .name { font-family: 'MuseoModerno', var(--mono); font-size: 15px; color: var(--crest); margin: 5px 0 6px; }
.guarantee .why { font-family: var(--mono); font-size: 12px; font-weight: 300; color: var(--mid-purple); line-height: 1.5; }

/* ─── interleaved diagrams (drawn in map.js, CSP-safe) ───────────────── */
.diagram { margin: 22px 0 6px; }

/* the daily-loop ring (signature motion) */
.loop-ring { display: flex; justify-content: center; }
.loop-ring .ring-svg { width: min(330px, 100%); height: auto; overflow: visible; }
.ring-svg .arc { fill: none; stroke: rgba(200,190,224,0.45); stroke-width: 1.6; }
.ring-svg .arc-open { fill: none; stroke: var(--regime); stroke-width: 1.6; stroke-dasharray: 3 5; opacity: 0.85; transition: stroke 2.5s ease; }
.ring-svg .comet { fill: var(--crest); filter: drop-shadow(0 0 5px var(--regime)); }
.ring-svg .ring-node circle { fill: rgba(20,12,42,0.82); stroke: rgba(200,190,224,0.4); stroke-width: 1; }
.ring-svg .ring-node .rn { fill: var(--regime); font-family: 'MuseoModerno', var(--mono); font-size: 15px; text-anchor: middle; dominant-baseline: central; transition: fill 2.5s ease; }
.ring-svg .ring-node .rl { fill: var(--mid-purple); font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-anchor: middle; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .ring-svg .comet { display: none; } }

/* maturity arc — live counts under each stage */
.stage .ct { display: block; margin-top: 8px; font-family: 'MuseoModerno', var(--mono); font-size: 19px; color: var(--foam); }
.stage:nth-child(4) .ct { color: var(--regime); transition: color 2.5s ease; }

/* graveyard tally */
.graveyard-tally { border: 1px solid rgba(200,190,224,0.12); border-radius: 12px; padding: 16px 18px; background: rgba(20,12,42,0.42); }
.gv-head { font-family: var(--mono); font-size: 12px; color: var(--foam); letter-spacing: 0.04em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.gv-row { display: grid; grid-template-columns: minmax(140px, 1.1fr) 2fr auto; align-items: center; gap: 12px; margin: 7px 0; }
.gv-k { font-family: var(--mono); font-size: 11.5px; font-weight: 300; color: var(--mid-purple); }
.gv-bar { height: 6px; border-radius: 4px; background: rgba(200,190,224,0.10); overflow: hidden; }
.gv-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(107,94,126,0.9), var(--mid-purple)); }
.gv-n { font-family: var(--mono); font-size: 13px; color: var(--foam); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .gv-row { grid-template-columns: 1fr auto; } .gv-bar { display: none; } }

/* ─── footer ─────────────────────────────────────────────────────────── */
.foot { position: relative; z-index: 1; width: min(1180px, 92vw); margin: 0 auto; padding: 36px 0 64px; border-top: 1px solid rgba(200,190,224,0.12); }
.foot .row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: baseline; }
.foot a { font-family: var(--mono); font-size: 13px; color: var(--foam); text-decoration: none; letter-spacing: 0.04em; }
.foot a:hover { color: var(--crest); }
.foot .note { font-family: var(--mono); font-size: 11px; font-weight: 300; color: var(--mid-purple); margin-top: 18px; line-height: 1.6; max-width: 70ch; }

/* a small "today" tie-in chip in the header, mirrors the landing accent */
.today-chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mid-purple); text-decoration: none; pointer-events: all; display: inline-flex; align-items: center; gap: 7px; }
.today-chip .rdot { width: 7px; height: 7px; border-radius: 50%; background: var(--regime); transition: background 2.5s ease; box-shadow: 0 0 8px var(--regime); }
.today-chip:hover { color: var(--foam); }

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scrollcue::after { animation: none; }
}

@media (max-width: 600px) {
  .graph-stage { height: 58vh; }
  .graph-legend { font-size: 9.5px; gap: 4px 10px; max-width: 64%; }
  .graph-hint { display: none; }
}