/* ==========================================================================
   LOVETOPUS.COM — editorial.css — THE BLACK-ON-WHITE EDITORIAL THEME (v1)
   --------------------------------------------------------------------------
   Owner pivot 2026-07-13: CONTENT-FIRST. Pure white paper, near-black ink.
   Beautiful through TYPOGRAPHY and RHYTHM alone — a fine-print magazine /
   manuscript. Hairline rules are the ONLY ornament. No fresco, no glows, no
   particles, no colored backgrounds anywhere. Content-critical images stay
   (the EmOcean map + its fog mechanic, character cutouts, the book cover) and
   render plainly — no halos, no drop-shadow glows.

   This is a STANDALONE theme: restyled pages load ONLY this file (they drop
   ocean.css / idea.css / world.css). It redefines every shared + page-specific
   component in black-on-white, and defines its own token set so the inline
   `--dot`/`--d`/`--x`/`--y` hooks and the ocean.js / idea.js / world.js
   behaviors keep working unchanged. Two button tiers are preserved
   FUNCTIONALLY (primary = solid ink, secondary = ink outline) — no orange.
   Films/scenes come later; this layer is content and looks only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Paper & ink */
  --paper:      #ffffff;
  --paper-2:    #faf9f7;   /* faintest warm off-white, for rare inset zones   */
  --ink:        #111214;   /* near-black display + body ink                   */
  --ink-soft:   #33363b;   /* secondary prose                                 */
  --ink-mute:   #6a6f76;   /* captions, meta, misted rows                     */
  --ink-faint:  #9aa0a6;   /* deepest-muted, disabled                         */
  --rule:       rgba(17, 18, 20, 0.14);  /* hairline                          */
  --rule-2:     rgba(17, 18, 20, 0.28);  /* stronger hairline / active        */

  /* Dots & markers reduce to ink in a monochrome system (the inline
     `--dot: var(--glow-*)` hooks resolve here; emotion is named in text). */
  --glow-joy: var(--ink); --glow-trust: var(--ink); --glow-fear: var(--ink);
  --glow-surprise: var(--ink); --glow-sadness: var(--ink); --glow-disgust: var(--ink);
  --glow-anger: var(--ink); --glow-anticipation: var(--ink);
  --feelstream: var(--ink);

  /* Focus ring */
  --focus: #1a5fb4;

  /* Typography — serif for display, sans for body (matches project canon) */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --display-xl: clamp(2.5rem, 5.2vw, 4.25rem);   /* 40 → 68px */
  --display-l:  clamp(2rem, 3.8vw, 3rem);        /* 32 → 48px */
  --h3:         1.5rem;                          /* 24px      */
  --lede:       1.3125rem;                       /* 21px      */
  --body:       1.125rem;                        /* 18px — article floor */
  --ui:         1rem;                            /* 16px      */
  --caption:    0.8125rem;                       /* 13px      */
  --label:      0.75rem;                         /* 12px small caps */
  --label-s:    0.6875rem;
  --track-label: 0.14em;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --s-11: 160px; --s-12: 224px;

  /* Motion */
  --ease-drift: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-ui: 200ms;

  /* Layout */
  --measure-long: 66ch;
  --measure-read: 60ch;
  --page-pad: clamp(20px, 5vw, 56px);
  --nav-h: 64px;
}

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  /* NO scroll-snap — content flows as an editorial document. */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--ui);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}
::selection { background: #111214; color: #fff; }

/* KILL the ocean chrome that HTML still ships (fresco substrate, veils,
   scrims, ambient canvas, feelstream, decorative mist, colored lips). The
   `!important` beats any inline display the shell JS sets on #ambient. */
.scene__bg, .scene__veil, .band__scene, .band__scrim,
.map-mist, .colophon__lip, .menu-overlay__thread,
#ambient, #feelstream, .thermocline--rule {
  display: none !important;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 300;
  padding: var(--s-3) var(--s-5);
  background: var(--ink); color: var(--paper);
  font-size: var(--label); letter-spacing: var(--track-label);
  text-transform: uppercase; text-decoration: none; border-radius: 2px;
}
.skip-link:focus { top: var(--s-3); }

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
.display-xl, .display-l, h1, h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.display-xl { font-size: var(--display-xl); line-height: 1.04; }
.display-l  { font-size: var(--display-l);  line-height: 1.1; }
.h3 { font-family: var(--font-serif); font-size: var(--h3); line-height: 1.2; font-weight: 600; }

.lede {
  font-size: var(--lede); line-height: 1.5; color: var(--ink-soft);
  font-weight: 400;
}
.body-text { font-size: var(--body); line-height: 1.62; color: var(--ink-soft); }
.body-text em, .lede em { font-style: italic; }
.body-text strong { color: var(--ink); font-weight: 600; }
.caption { font-size: var(--caption); line-height: 1.45; color: var(--ink-mute); }

.kicker {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-family: var(--font-sans);
  font-size: var(--label); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 600; color: var(--ink-mute);
}
.kicker__dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); /* dots reduce to ink */
}

.label {
  font-size: var(--label); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 600;
}

/* In-prose links: underlined ink (the manuscript ornament). */
.body-text a, .lede a, .evidence a, .rail a, .synthesis a, .chain-honesty a,
.rationale a, .manifest__text a, .plank__body a, .guide__aside a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--rule-2);
  transition: text-decoration-color var(--dur-ui) var(--ease-drift);
}
.body-text a:hover, .lede a:hover, .evidence a:hover, .rail a:hover,
.synthesis a:hover, .chain-honesty a:hover, .rationale a:hover,
.manifest__text a:hover, .plank__body a:hover, .guide__aside a:hover {
  text-decoration-color: var(--ink);
}

.link-tertiary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--ui); font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: var(--rule-2);
}
.link-tertiary:hover { text-decoration-color: var(--ink); }

/* Margin utilities used inline (mt-4/6/7) */
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

/* --------------------------------------------------------------------------
   3. BUTTONS — two tiers, preserved FUNCTIONALLY. No orange.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); text-align: center; cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--label); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 700;
  padding: 15px 30px; border-radius: 2px;
  text-decoration: none; border: 1px solid var(--ink);
  transition: background-color var(--dur-ui) var(--ease-drift),
              color var(--dur-ui) var(--ease-drift),
              border-color var(--dur-ui) var(--ease-drift);
  -webkit-tap-highlight-color: transparent;
}
/* PRIMARY — solid ink */
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: #000; border-color: #000; }
/* SECONDARY — ink outline, inverts on hover */
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.btn--wide { min-width: 15rem; }

/* nav mini-CTA */
.btn--nav {
  padding: 10px 18px; font-size: var(--label-s); letter-spacing: 0.1em;
}
/* ocean.js toggles .is-dimmed (its Law-4 orange-yield). There is no orange in
   this theme, so the money button stays visually stable (solid) site-wide. */
.btn--nav.is-dimmed { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
}
.center-axis .actions { justify-content: center; }

/* --------------------------------------------------------------------------
   4. NAV — clean white bar, black wordmark, hairline bottom border
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s-5);
  min-height: var(--nav-h);
  padding: var(--s-3) var(--page-pad);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: transform 280ms var(--ease-drift);
}
.nav--scrimmed { box-shadow: 0 1px 0 var(--rule); } /* stays crisp */
.nav--hidden { transform: translateY(-100%); }

.nav__brand { display: inline-flex; align-items: center; margin-right: auto; }
/* the shipped wordmark is a WHITE monochrome SVG → force it solid black */
.nav__brand .logo-img { height: 22px; width: auto; filter: brightness(0); }

.nav__links { display: flex; align-items: center; gap: var(--s-6); }
.nav__link {
  position: relative;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; padding: var(--s-2) 0;
  transition: color var(--dur-ui) var(--ease-drift);
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--ink);
}
.nav__cta { flex: none; }

.nav__menu-btn {
  display: none;
  font-family: var(--font-sans); font-size: var(--label);
  letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700;
  color: var(--ink); background: transparent; border: 1px solid var(--ink);
  padding: 9px 16px; border-radius: 2px; cursor: pointer;
}

@media (max-width: 880px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu-btn { display: inline-flex; margin-left: auto; }
}

/* --------------------------------------------------------------------------
   5. MOBILE MENU OVERLAY — white, serif ink links, hairline dividers
   -------------------------------------------------------------------------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  padding: var(--s-5) var(--page-pad) var(--s-7);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms var(--ease-drift), visibility 220ms;
  overflow-y: auto;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-overlay__top { display: flex; align-items: center; justify-content: space-between; }
.menu-overlay__top .logo-img { height: 22px; filter: brightness(0); }
.menu-overlay__close {
  font-family: var(--font-sans); font-size: var(--label);
  letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700;
  color: var(--ink); background: transparent; border: 1px solid var(--ink);
  padding: 9px 16px; border-radius: 2px; cursor: pointer;
}
.menu-overlay__links {
  list-style: none; margin: var(--s-7) 0 0; padding: 0;
  display: flex; flex-direction: column;
}
.menu-overlay__links li { border-top: 1px solid var(--rule); }
.menu-overlay__links li:last-child { border-bottom: 1px solid var(--rule); }
.menu-overlay__link {
  display: block; padding: var(--s-5) 0;
  font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.menu-overlay__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.menu-overlay__secondary {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-5);
}
.menu-overlay__secondary a {
  font-size: var(--ui); color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--rule-2);
}
.menu-overlay__cta { margin-top: auto; padding-top: var(--s-7); }
.menu-overlay__cta .btn { width: 100%; }

/* --------------------------------------------------------------------------
   6. THE OCEAN WRAPPER / SCENE — now a flowing editorial document
   -------------------------------------------------------------------------- */
.ocean { position: relative; background: var(--paper); }

main { position: relative; background: var(--paper); }

.scene {
  position: relative;
  padding: clamp(56px, 8vh, 104px) var(--page-pad);
}
/* hairline rules between scenes are the ONLY structural ornament */
.scene + .scene { border-top: 1px solid var(--rule); }

.stage__inner { position: relative; width: 100%; max-width: 1080px; margin-inline: auto; }

.center-axis {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 720px; margin-inline: auto;
}
.center-axis--wide { max-width: 860px; }
.center-axis > .kicker { justify-content: center; }
.center-axis .display-xl, .center-axis .display-l { max-width: 20ch; margin-inline: auto; }
.center-axis .lede { max-width: 52ch; margin-inline: auto; }
.center-axis .body-text { max-width: var(--measure-read); margin-inline: auto; }

/* --------------------------------------------------------------------------
   7. ENTRANCE VOCABULARY — CONTENT-FIRST: content is NEVER hidden.
   Only pages with a reveal engine (idea.js / world.js add `.scene.in`) get a
   gentle fade-in; every other page (method, world hubs/leaves, books, blog,
   generated leaves) carries NO reveal engine, so a hidden-by-default `.enter`
   state would strand their content invisible. So the hidden state is applied
   ONLY inside a scene that is NOT yet revealed AND on a page whose engine is
   present — signalled by the root `.has-reveal` class the engines add. Absent
   that class, `.enter` is a no-op and everything shows immediately.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js.has-reveal .scene:not(.in) .enter,
  html.js.has-reveal .colophon:not(.in) .enter { opacity: 0; transform: translateY(10px); }
  html.js.has-reveal .scene.in .enter,
  html.js.has-reveal .colophon.in .enter {
    opacity: 1; transform: none;
    transition: opacity 480ms var(--ease-drift), transform 480ms var(--ease-drift);
    transition-delay: min(var(--d, 0ms), 900ms);
  }
}

/* --------------------------------------------------------------------------
   8. /idea — MANIFEST, EVIDENCE, CREED ACCORDION, FORMULA, RATIONALE, CLOSE
   -------------------------------------------------------------------------- */
/* S0 · Mission/Vision manifest */
.manifest {
  margin: var(--s-7) auto 0; max-width: 60ch; text-align: left;
  border-top: 1px solid var(--rule);
}
.manifest__row {
  display: grid; grid-template-columns: 8rem 1fr; gap: var(--s-5);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--rule);
}
.manifest__label {
  font-size: var(--label); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 700; color: var(--ink-mute);
  padding-top: 0.25em;
}
.manifest__text { font-size: var(--body); line-height: 1.6; color: var(--ink-soft); }

.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-2);
  margin-top: var(--s-8);
  font-size: var(--label); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 600; color: var(--ink-mute);
  text-decoration: none;
}
.scroll-cue:hover { color: var(--ink); }
.scroll-cue__arrow { font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue__arrow { animation: cue-bob 2.4s ease-in-out infinite; }
}
@keyframes cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* S1 · evidence lines */
.evidence {
  list-style: none; margin: var(--s-7) auto 0; padding: 0;
  max-width: var(--measure-read); text-align: left;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.evidence li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--ui); line-height: 1.6; color: var(--ink-soft);
}
.evidence li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 1px; background: var(--ink);
}

/* S2 · quotable takeaway */
.takeaway, .synthesis {
  font-family: var(--font-serif);
}
.takeaway {
  margin: var(--s-7) auto 0; max-width: 40ch;
  font-size: var(--h3); line-height: 1.32; font-style: italic; color: var(--ink);
  padding-top: var(--s-6); border-top: 1px solid var(--rule);
}

/* S3 · the creed accordion */
.creed { list-style: none; margin: var(--s-7) auto 0; padding: 0; max-width: 64ch; text-align: left; }
.plank { border-top: 1px solid var(--rule); }
.plank:last-child { border-bottom: 1px solid var(--rule); }
.plank__head { margin: 0; }
.plank__toggle {
  width: 100%; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0; background: transparent; border: 0; cursor: pointer;
  text-align: left; color: var(--ink); font: inherit;
}
.plank__title {
  flex: 1; font-family: var(--font-serif); font-size: 1.25rem;
  line-height: 1.3; font-weight: 600;
}
.plank__icon {
  flex: none; position: relative; width: 16px; height: 16px; margin-top: 0.25em;
}
.plank__icon::before, .plank__icon::after {
  content: ""; position: absolute; background: var(--ink);
  transition: transform var(--dur-ui) var(--ease-drift), opacity var(--dur-ui);
}
.plank__icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.plank__icon::after  { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }
.plank.is-open .plank__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.plank__toggle:hover .plank__title { text-decoration: underline; text-underline-offset: 3px; }

.plank__panel { overflow: hidden; max-height: 0; transition: max-height 340ms var(--ease-drift); }
.plank.is-open .plank__panel { max-height: 40rem; }
/* NO-JS PARITY: without html.js the accordion is fully expanded (nothing lost) */
html:not(.js) .plank__panel { max-height: none; }
html:not(.js) .plank__icon::after { display: none; }
.plank__body {
  padding: 0 0 var(--s-6) calc(16px + var(--s-4));
  font-size: var(--body); line-height: 1.62; color: var(--ink-soft);
}

/* S4 · the formula (map + compass) + rationale rail */
.formula {
  display: flex; align-items: center; gap: var(--s-6);
  margin: var(--s-7) auto 0; max-width: 60ch; text-align: left;
}
.formula__art { flex: none; width: clamp(84px, 22vw, 132px); }
.formula__art img { width: 100%; height: auto; } /* plain — no glow */
.formula__line { font-family: var(--font-serif); font-size: var(--lede); line-height: 1.4; color: var(--ink); }
.formula__line strong { font-weight: 600; }

.map-emblem { margin: var(--s-7) auto 0; text-align: center; }
.map-emblem img {
  width: clamp(140px, 30vw, 200px); height: auto; margin-inline: auto;
  border: 1px solid var(--rule); border-radius: 4px;
}
.map-emblem__cap { margin-top: var(--s-3); font-size: var(--caption); color: var(--ink-mute); font-style: italic; }

.rationale {
  margin: var(--s-8) auto 0; max-width: var(--measure-read); text-align: left;
  padding-top: var(--s-6); border-top: 1px solid var(--rule);
}
.rationale__lead { font-size: var(--ui); color: var(--ink-soft); margin-bottom: var(--s-5); }
.rail { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.rail li {
  position: relative; padding-left: var(--s-5);
  font-size: 0.9375rem; line-height: 1.58; color: var(--ink-mute);
}
.rail li::before {
  content: ""; position: absolute; left: 0; top: 0.66em; width: 6px; height: 1px; background: var(--ink-mute);
}
.synthesis { font-size: var(--body); line-height: 1.55; font-style: italic; color: var(--ink-soft); margin-bottom: var(--s-5); }
.chain-honesty { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-mute); }

/* S5 · invitation + book close */
.invite-capture { margin-top: var(--s-7); width: 100%; }
.book-close {
  display: flex; align-items: center; gap: var(--s-6);
  margin: var(--s-8) auto 0; max-width: 52ch; text-align: left;
  padding-top: var(--s-7); border-top: 1px solid var(--rule);
}
.book-close__cover {
  flex: none; width: clamp(120px, 24vw, 160px); height: auto;
  border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(17,18,20,0.12);
}
.book-close__line { font-family: var(--font-serif); font-size: var(--lede); line-height: 1.35; color: var(--ink); margin-bottom: var(--s-4); }
.book-close__caption { margin-top: var(--s-4); font-size: var(--caption); color: var(--ink-mute); font-style: italic; }

/* --------------------------------------------------------------------------
   9. /world — LIVING MAP, LEGEND, REALM INDEX, GUIDE, COMPASS
   -------------------------------------------------------------------------- */
.living-map { width: 100%; margin: var(--s-7) auto 0; max-width: 560px; }
.living-map__frame {
  position: relative; width: min(460px, 100%); aspect-ratio: 1/1; margin-inline: auto;
}
.living-map__base, .living-map .fog {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 4px;
}
/* the map is CONTENT — render it plainly: a hairline frame, no glow */
.living-map__base { object-fit: cover; border: 1px solid var(--rule); }
.living-map .fog { pointer-events: none; }
/* keep the functional fog mechanic (desaturated + tinted, clipped mask) */
.fog__img { filter: saturate(0.25) brightness(1.02) contrast(0.95); }

.hotspots { position: absolute; inset: 0; z-index: 2; }
.hotspot {
  position: absolute; left: var(--x); top: var(--y);
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  padding: 0; margin: 0; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
}
.hotspot__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
  transition: transform var(--dur-ui) var(--ease-drift);
}
.hotspot--fogged .hotspot__dot { border-color: var(--ink-mute); opacity: 0.7; }
.hotspot--charted .hotspot__dot { background: var(--ink); border-color: var(--ink); }
.hotspot:hover .hotspot__dot,
.hotspot:focus-visible .hotspot__dot,
.hotspot.is-active .hotspot__dot { transform: scale(1.4); }
.hotspot:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }

.legend {
  margin: var(--s-6) auto 0; max-width: 48ch; min-height: 3.2em;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: var(--ui); color: var(--ink-soft);
}
.legend__body { transition: opacity 220ms var(--ease-drift); }
.legend.is-swapping .legend__body { opacity: 0; }
.legend__hint { font-style: italic; color: var(--ink-mute); }
.legend__realm { font-family: var(--font-serif); font-size: var(--lede); font-weight: 600; color: var(--ink); }
.legend__state { font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; color: var(--ink-mute); }
.legend__coming { color: var(--ink-mute); }
.legend__sep { color: var(--ink-faint); margin-inline: 0.4ch; }
.legend__link {
  color: var(--ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--rule-2); white-space: nowrap;
}
.legend__link:hover { text-decoration-color: var(--ink); }

/* realm index — hairline rows, two columns on desktop */
.realms { margin-top: var(--s-7); width: 100%; max-width: 1000px; text-align: start; margin-inline: auto; }
.realms__list { list-style: none; margin: 0; padding: 0; column-gap: var(--s-8); }
@media (min-width: 860px) { .realms__list { columns: 2; } }
.realms__list > li { break-inside: avoid; }
.realm-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  min-height: 44px; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
}
.row__dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); align-self: center;
}
.realm-row.is-misted .row__dot { background: var(--paper); border: 1.5px solid var(--ink-mute); }
.realm-row__label {
  flex: 0 1 auto; font-size: var(--label); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.realm-row.is-misted .realm-row__label { color: var(--ink-mute); }
.realm-row__text {
  flex-basis: 100%; order: 3; padding-left: calc(6px + var(--s-4));
  font-size: var(--ui); line-height: 1.5; color: var(--ink-soft);
}
.realm-row.is-misted .realm-row__text { color: var(--ink-mute); }
.realm-row__state, .realm-row__action {
  margin-left: auto; flex: none; white-space: nowrap; font-size: var(--label);
}
.realm-row__state { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
a.realm-row .realm-row__action {
  letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2);
}
a.realm-row:hover .realm-row__action { text-decoration-color: var(--ink); }

@media (max-width: 600px) {
  .realm-row__state, .realm-row__action { margin-left: calc(6px + var(--s-4)); order: 4; }
}

/* W3 · the guide (Hugo) — plain, no light pool, no glow */
.guide__art {
  margin: var(--s-7) auto 0; height: clamp(240px, 40vh, 380px);
  display: flex; align-items: flex-end; justify-content: center;
}
.guide__art img { max-height: 100%; width: auto; object-fit: contain; }
.guide__aside {
  font-family: var(--font-serif); font-style: italic; max-width: 52ch;
  margin: var(--s-6) auto 0; font-size: var(--body); line-height: 1.55; color: var(--ink-soft);
}
.guide__word { font-style: italic; color: var(--ink); font-weight: 600; }

/* W4 · the compass close */
.compass__method { margin-top: var(--s-5); }
.compass__capture { margin-top: clamp(40px, 7vh, 80px); width: 100%; }
.compass__whisper { font-family: var(--font-serif); font-style: italic; font-size: var(--lede); line-height: 1.4; color: var(--ink-soft); margin-bottom: var(--s-3); }
.compass__be-first { font-size: var(--lede); line-height: 1.4; color: var(--ink); margin-bottom: var(--s-6); }
.compass__capture .capture { margin-inline: auto; text-align: start; }
.compass__capture .capture__controls { justify-content: center; }

/* shell/index generic rows (used by some scaffolds) */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  min-height: 44px; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.row__label { font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; color: var(--ink); }
.row__text { flex-basis: 100%; order: 3; padding-left: calc(6px + var(--s-4)); font-size: var(--ui); color: var(--ink-soft); }
.row__action { margin-left: auto; font-size: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); text-decoration: underline; text-underline-offset: 3px; }
.row.is-misted { color: var(--ink-mute); }
.row.is-misted .row__dot { background: var(--paper); border: 1.5px solid var(--ink-mute); }

/* --------------------------------------------------------------------------
   10. CAPTURE (newsletter) — hairline underline input, ink
   -------------------------------------------------------------------------- */
.capture { max-width: 44ch; }
.capture--compact { max-width: none; }
.capture__promise { font-size: var(--body); color: var(--ink); margin-bottom: var(--s-4); }
.capture__promise--sm { font-size: var(--ui); }
.capture__label { display: block; font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; color: var(--ink-mute); margin-bottom: var(--s-2); }
.capture__controls { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; }
.capture__field {
  flex: 1 1 12rem; min-width: 0;
  font: inherit; font-size: var(--ui); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--ink);
  padding: 10px 2px; border-radius: 0;
}
.capture__field::placeholder { color: var(--ink-faint); }
.capture__field:focus-visible { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1.5px 0 var(--focus); }
.capture__controls .btn { flex: none; }
.capture__error { min-height: 1.2em; margin-top: var(--s-2); font-size: var(--caption); color: #b3261e; }
.capture__error.is-visible { display: block; }
.capture__privacy { margin-top: var(--s-3); font-size: var(--caption); color: var(--ink-mute); }
.capture__success { display: none; }
.capture.is-success .capture__form { display: none; }
.capture.is-success .capture__success { display: block; }
.capture__bubble { display: none; }
.capture__confirm { font-size: var(--body); color: var(--ink); }

/* --------------------------------------------------------------------------
   11. COLOPHON FOOTER — white, hairline top border, ink
   -------------------------------------------------------------------------- */
.colophon {
  position: relative; background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 0 var(--page-pad) var(--s-8);
}
.colophon__inner { max-width: 1080px; margin-inline: auto; padding-top: var(--s-9); }
.colophon__grid { display: grid; grid-template-columns: 3fr 2fr 2fr 2fr 3fr; gap: var(--s-8) var(--s-7); }
.colophon__wordmark img { height: 22px; width: auto; filter: brightness(0); margin-bottom: var(--s-5); }
.colophon__motto { font-family: var(--font-serif); font-style: italic; font-size: var(--lede); line-height: 1.4; color: var(--ink); max-width: 26ch; margin-bottom: var(--s-4); }
.colophon__note { color: var(--ink-mute); }
.colophon__byline { margin-top: var(--s-5); font-size: var(--caption); }
.colophon__byline a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }
.colophon__byline a:hover { text-decoration-color: var(--ink); }
.colophon__head { margin-bottom: var(--s-5); color: var(--ink-mute); }
.colophon__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.colophon__col a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: var(--ui); color: var(--ink-soft); text-decoration: none;
  transition: color var(--dur-ui) var(--ease-drift);
}
.colophon__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.colophon__col a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.colophon__crewline, .colophon__crew .colophon__crewline { font-family: var(--font-serif); font-style: italic; font-size: var(--lede); line-height: 1.4; color: var(--ink); margin-bottom: var(--s-5); max-width: 24ch; }
.colophon__crewlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2);
}
.colophon__crewlink:hover { text-decoration-color: var(--ink); }
.colophon__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule);
  font-size: var(--caption); color: var(--ink-mute);
}
.colophon__legal a { color: inherit; text-decoration: none; }
.colophon__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.colophon__legal-sep { color: var(--ink-faint); }
.colophon__map { display: none; } /* shell mini-map artifact — omit in BW */

/* --------------------------------------------------------------------------
   12. COMING-SOON STUB + 404 (shared caught-state)
   -------------------------------------------------------------------------- */
.soon { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; background: var(--paper); }
.soon__inner { max-width: 640px; margin-inline: auto; padding: clamp(72px, 12vh, 128px) var(--page-pad); text-align: center; }
.soon__kicker { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; color: var(--ink-mute); }
.soon h1 { font-family: var(--font-serif); font-size: var(--display-l); line-height: 1.1; font-weight: 600; color: var(--ink); }
.soon p { font-size: var(--lede); line-height: 1.5; color: var(--ink-soft); margin: var(--s-6) auto 0; max-width: 46ch; }
.soon .actions { justify-content: center; margin-top: var(--s-7); }

/* --------------------------------------------------------------------------
   13. SCAFFOLD PRIMITIVES — breadcrumb, three-exits, hub/leaf shared bits
   -------------------------------------------------------------------------- */
.breadcrumb { font-size: var(--caption); color: var(--ink-mute); margin-bottom: var(--s-5); }
.breadcrumb a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule-2); }
.breadcrumb a:hover { text-decoration-color: var(--ink); }
.breadcrumb__sep { margin-inline: var(--s-2); color: var(--ink-faint); }

.exits {
  display: grid; gap: var(--s-6); margin-top: var(--s-8);
  padding-top: var(--s-7); border-top: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  text-align: left;
}
.exit__label { font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; color: var(--ink-mute); margin-bottom: var(--s-2); }
.exit a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); font-size: var(--ui); }
.exit a:hover { text-decoration-color: var(--ink); }

.prose { max-width: var(--measure-read); margin-inline: auto; text-align: left; }
.prose > * + * { margin-top: var(--s-5); }
.lorem { color: var(--ink-faint); font-style: italic; }

/* leaf FAQ / section headings */
.section-h { font-family: var(--font-serif); font-size: var(--h3); font-weight: 600; color: var(--ink); margin-top: var(--s-8); }
.faq dt { font-weight: 600; color: var(--ink); margin-top: var(--s-5); }
.faq dd { margin: var(--s-2) 0 0; color: var(--ink-soft); }

/* ---- problem-leaf article primitives (generated by gen_catalog.py) ---- */
.leaf { max-width: var(--measure-read); margin-inline: auto; text-align: left; }
.leaf .lede { margin-top: var(--s-4); font-style: italic; }
.leaf .body-text { margin-top: var(--s-5); }
.leaf .body-text strong { color: var(--ink); }
/* numbered "what helps" moves */
.moves { margin: var(--s-5) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s-4); }
.moves > li { padding-left: var(--s-2); font-size: var(--body); line-height: 1.6; color: var(--ink-soft); }
.moves > li::marker { color: var(--ink); font-weight: 700; }
.moves strong { color: var(--ink); }
/* canonical callout blocks (Seahorse Breathing, evidence line, water-safety gate) */
.callout {
  margin: var(--s-6) 0 0; padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--ink); background: var(--paper-2);
  font-size: var(--ui); line-height: 1.6; color: var(--ink-soft);
}
.callout strong { color: var(--ink); }
.callout--gate { border-left-width: 4px; }
.callout__label { display: block; font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; color: var(--ink); margin-bottom: var(--s-2); }
/* the non-advice footer line every leaf carries */
.leaf-note { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--caption); color: var(--ink-mute); font-style: italic; }
/* hub: emotion groups + status pills */
.catalog-group { margin-top: var(--s-8); }
.catalog-group__h { font-family: var(--font-serif); font-size: var(--h3); font-weight: 600; color: var(--ink); padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--ink); }
.status-live { color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--label); }
.status-coming { color: var(--ink-mute); font-size: var(--label); letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__crew { grid-column: 1 / -1; order: -1; }
  .colophon__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .living-map__frame { width: 100%; }
  .formula { flex-direction: column; align-items: flex-start; }
  .book-close { flex-direction: column; align-items: flex-start; }
  .manifest__row { grid-template-columns: 1fr; gap: var(--s-2); }
  /* display type must never overflow the narrow viewport */
  .display-xl { font-size: clamp(2rem, 8.5vw, 2.75rem); }
  .display-l  { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .center-axis .display-xl, .center-axis .display-l { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION & NO-JS — complete, static, fully-informative page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .enter,
  html.js .scene.in .enter,
  html.js .colophon .enter {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .scroll-cue__arrow { animation: none !important; }
}