/* ============================================================
   WHOISKRYS.COM  /  v1
   A single stylesheet. Everything is driven by the CSS variables
   in the :root block below, so the whole visual system can be
   re-tuned from one place.

   CONTENTS
   01  DESIGN TOKENS
   02  RESET + BASE
   03  TYPE PRIMITIVES
   04  CHROME  (skip link, progress, thread rail, nav)
   05  SECTION SHELL
   06  BUTTONS + STATE CHIPS
   07  SECTION 1  OPENING
   08  SECTION 2  WHO IS KRYS
   09  SECTION 3  THE THREAD
   10  SECTION 4  HOW I GOT HERE
   11  SECTION 5  RATE
   12  PAPER ZONE  (sections 6 + 7)
   13  SECTION 8  NOW
   14  SECTION 9  DIFFERENT MAPS
   15  SECTION 10 KRYS DID IT
   16  SECTION 11 NEXT
   17  SECTION 12 DOORS
   18  SECTION 13 CONNECT + FOOTER
   19  REVEAL + REDUCED MOTION
   20  PASS 1  LIVING SYSTEMS  (motion as a layer)
   ============================================================ */


/* ============================================================
   01  DESIGN TOKENS
   ============================================================ */
:root {
  /* -- palette ------------------------------------------------ */
  --ink:        #0B0C0A;
  --ink-2:      #101209;
  --ink-3:      #191C15;
  --red:        #E25E4A;   /* distress; the broken loop */
  --paper:      #F2EFE6;
  --paper-2:    #E6E2D5;
  --lime:       #C9FF3D;
  --lime-deep:  #4F6B00;
  --violet:     #A594FF;
  --violet-deep:#5B49B8;
  --blue:       #5CC8F5;
  --blue-deep:  #12688F;

  /* -- semantic (dark is the default world) ------------------- */
  --bg:         var(--ink);
  --bg-raise:   var(--ink-2);
  --fg:         #EDEAE0;
  --fg-dim:     #9C9E92;
  --fg-faint:   #7E8176;
  --line:       rgba(237,234,224,0.13);
  --line-strong:rgba(237,234,224,0.28);
  --accent:     var(--lime);
  --accent-fg:  var(--lime);
  --accent-2:   var(--violet);
  --accent-2-fg:var(--violet);
  --select-bg:  var(--lime);
  --select-fg:  var(--ink);

  /* -- type --------------------------------------------------- */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-identity:  clamp(3.4rem, 15.5vw, 12.5rem);
  --fs-hero:      clamp(2.3rem, 8.2vw, 6.6rem);
  --fs-h2:        clamp(1.85rem, 5vw, 3.9rem);
  --fs-statement: clamp(1.75rem, 5.2vw, 4rem);
  --fs-lede:      clamp(1.18rem, 2.1vw, 1.6rem);
  --fs-body:      clamp(1.0625rem, 1.15vw, 1.2rem);
  --fs-small:     0.9rem;
  --fs-mono:      0.6875rem;

  /* -- space -------------------------------------------------- */
  --gut:      clamp(1.25rem, 5vw, 5.5rem);
  --rail-w:   72px;
  --sect-y:   clamp(5.5rem, 13vh, 11rem);
  --maxw:     1180px;

  /* -- motion ------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.7s;
}


/* ============================================================
   02  RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg { max-width: 100%; }
em { font-style: italic; }

::selection { background: var(--select-bg); color: var(--select-fg); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================
   03  TYPE PRIMITIVES
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.eyebrow__idx {
  color: var(--accent-fg);
  border: 1px solid var(--line-strong);
  padding: 0.35em 0.55em 0.3em;
  line-height: 1;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 20ch;
  text-wrap: balance;
}
.h2--wide { max-width: 26ch; }
.h2--stack { max-width: 14ch; }

.p {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--fg-dim);
  max-width: 58ch;
  margin-top: 1.15em;
}
.p--lead { color: var(--fg); font-size: var(--fs-lede); line-height: 1.4; }
.p--wide { max-width: 66ch; margin-top: 1.6em; }
.p em { color: var(--fg); }

.accent { color: var(--accent-fg); }

.pullout {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--fg);
  max-width: 30ch;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--accent);
  text-wrap: balance;
}
/* pullout--big is used once, for the closing stanza in section 11, so it
   carries its own internal hierarchy rather than a single type size. The
   lime rule from .pullout runs down the whole stanza. */
.pullout--big { max-width: none; font-size: inherit; font-weight: inherit; }
.pullout__lead {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 18ch;
  text-wrap: balance;
}
/* every line is its own block, so the line breaks are written and not wrapped */
.pullout__vision,
.pullout__reflect,
.pullout__gps { display: grid; gap: 0.1em; max-width: 62ch; }
.pullout__vision {
  margin-top: 1.15em;
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.pullout__reflect {
  margin-top: 1.6em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--fg-dim);
}
.pullout__gps {
  margin-top: 1.6em;
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-statement);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 17ch;
  text-wrap: balance;
}
.statement__tail {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--fg-dim);
  max-width: 40ch;
  margin-top: 1.2em;
  padding-left: clamp(0.9rem, 2vw, 1.5rem);
  border-left: 1px solid var(--accent);
}

.stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}


/* ============================================================
   04  CHROME
   ============================================================ */
.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: 200;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8em 1.2em;
}
.skip-link:focus { top: 1rem; }

/* scroll progress hairline */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.12s linear;
}

/* --- the thread rail (desktop) --- */
.rail {
  position: fixed;
  top: 0; left: 0;
  width: var(--rail-w);
  height: 100vh;
  z-index: 90;
  pointer-events: none;
  display: none;
}
.rail__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rail__track { stroke: rgba(237,234,224,0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rail__live {
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
/* script.js writes the live territory here */
.rail[data-accent], .progress[data-accent] { }
.rail.rail--onpaper .rail__track { stroke: rgba(20,22,15,0.18); }
.rail.rail--onpaper .rail__live { stroke: var(--lime-deep); }

.rail__nodes { position: absolute; inset: 0; }
.rail__node {
  position: absolute;
  left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px; margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid rgba(237,234,224,0.3);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.rail.rail--onpaper .rail__node { background: var(--paper); border-color: rgba(20,22,15,0.35); }
.rail__node.is-on { background: var(--accent); border-color: var(--accent); transform: scale(1.5); }
.rail.rail--onpaper .rail__node.is-on { background: var(--lime-deep); border-color: var(--lime-deep); }

.rail__head {
  position: absolute;
  left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px; margin-top: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 14px 2px color-mix(in srgb, var(--accent) 38%, transparent);
  opacity: 0;
}
.rail.is-live .rail__head { opacity: 1; animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 12px 2px color-mix(in srgb, var(--accent) 32%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 6%,  transparent), 0 0 22px 5px color-mix(in srgb, var(--accent) 48%, transparent); }
}

/* --- nav --- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gut);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.nav__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.nav__q { color: var(--accent); }

.nav__menu { display: flex; gap: clamp(0.9rem, 2vw, 2rem); }
.nav__menu a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-dim);
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.25s var(--ease);
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__menu a:hover, .nav__menu a.is-current { color: var(--fg); }
.nav__menu a.is-current::after, .nav__menu a:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  min-height: 44px;
}
.nav__toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav__toggle-bars i { display: block; width: 14px; height: 1px; background: var(--accent); transition: transform 0.3s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child { transform: translateY(2px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child { transform: translateY(-2px) rotate(-45deg); }


/* ============================================================
   05  SECTION SHELL
   ============================================================ */
.s {
  position: relative;
  padding: var(--sect-y) var(--gut);
  max-width: calc(var(--maxw) + var(--gut) * 2);
  margin: 0 auto;
}
.zone { position: relative; }

.zone--paper {
  --bg: var(--paper);
  --bg-raise: var(--paper-2);
  --fg: #14160E;
  --fg-dim: #4E5145;
  --fg-faint: #676A5E;
  --line: rgba(20,22,14,0.16);
  --line-strong: rgba(20,22,14,0.34);
  --accent-fg: var(--lime-deep);
  --accent-2-fg: var(--violet-deep);
  --select-bg: var(--ink);
  --select-fg: var(--lime);
  background: var(--paper);
  color: var(--fg);
}


/* ------------------------------------------------------------
   TERRITORY ACCENTS
   The site keeps one accent live at a time and changes it as the
   subject changes. Put data-accent on a section and everything
   inside it follows, because every component reads --accent and
   --accent-fg rather than a hard-coded colour.

     blue    operational, systems, career, organisational
     lime    building, commerce, momentum, participation
     violet  inner work, imagination, writing, consciousness

   Each territory also carries a distinct secondary so the two
   accent slots never collide. The thread rail picks up the live
   territory from script.js, so the signal changes tone a beat
   before the section does.
   ------------------------------------------------------------ */
[data-accent="lime"] {
  --accent: var(--lime);     --accent-fg: var(--lime);
  --accent-2: var(--violet); --accent-2-fg: var(--violet);
}
[data-accent="violet"] {
  --accent: var(--violet);   --accent-fg: var(--violet);
  --accent-2: var(--blue);   --accent-2-fg: var(--blue);
}
[data-accent="blue"] {
  --accent: var(--blue);     --accent-fg: var(--blue);
  --accent-2: var(--lime);   --accent-2-fg: var(--lime);
}
/* on paper the bright accents fail contrast as text, so the text
   slot drops to the deep variant while the mark slot stays bright */
.zone--paper [data-accent="lime"]   { --accent-fg: var(--lime-deep);   --accent-2-fg: var(--violet-deep); }
.zone--paper [data-accent="violet"] { --accent-fg: var(--violet-deep); --accent-2-fg: var(--blue-deep); }
.zone--paper [data-accent="blue"]   { --accent-fg: var(--blue-deep);   --accent-2-fg: var(--lime-deep); }

/* accent changes are eased so scrolling feels like one signal
   changing tone rather than sections snapping between themes */
.s, .rail__live, .rail__node, .progress span {
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease),
              background-color 0.6s var(--ease), stroke 0.6s var(--ease);
}


/* ============================================================
   06  BUTTONS + STATE CHIPS
   ============================================================ */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.cta-row--end { margin-top: clamp(2.5rem, 6vw, 4rem); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  /* .btn sits on both <a> and <button>, so the UA button background and
     text colour have to be cleared or the ghost variant renders as a
     default grey box */
  background: none;
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 1.5em;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn--primary { background: var(--accent); color: #0B0C0A; border-color: var(--accent); }
.btn--primary:hover { background: transparent; color: var(--accent-fg); }
.btn--ghost { color: var(--fg); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-fg); }
.btn__arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translateY(2px); }
.btn--ghost:hover .btn__arrow, .btn--primary:hover .btn__arrow { transform: translateX(3px); }
.btn--primary .btn__arrow { transform: none; }

.state {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.55em 0.9em;
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
}
.state--dev { border-color: var(--accent-2-fg); color: var(--accent-2-fg); margin-bottom: 1.75rem; }
.state--soft { border-style: dashed; margin-top: 1.5rem; }
.state--soon { border-color: var(--line-strong); color: var(--fg-faint); }


/* ============================================================
   07  SECTION 1  OPENING
   ============================================================ */
.s--open { padding-top: clamp(7rem, 18vh, 12rem); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }

.identity {
  font-size: var(--fs-identity);
  font-weight: 700;
  line-height: 0.83;
  letter-spacing: -0.055em;
  margin: 0;
}
.identity__line { display: block; }
.identity__line--2 { padding-left: 0.06em; color: var(--fg); }
/* THE SIGNATURE.
   The accent over the n is the mark, not the whole letter, and not a
   decorative period after the name. A single glyph cannot be two
   colours, so the letter is drawn twice: the base in the normal
   foreground, and a lime copy stacked exactly on top of it and clipped
   so that only the acute above the x-height shows through.
   --acute-cut is where the clip lands, measured from the top of the
   line box. Retune it if the font stack or the line-height changes. */
.identity__mark {
  position: relative;
  display: inline-block;
  color: var(--fg);
  --acute-cut: 0.19em;
}
.identity__mark::after {
  content: attr(data-glyph);
  position: absolute;
  inset: 0;
  color: var(--accent);
  clip-path: inset(0 0 calc(100% - var(--acute-cut)) 0);
  pointer-events: none;
}

.descriptor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
/* an arrow between each step, because this is a movement and not a list
   of titles. the last step is the one that starts it again. */
.descriptor span { padding-right: 1.1em; margin-right: 1.1em; position: relative; }
.descriptor span::after {
  content: "\2192";
  position: absolute;
  right: -0.35em;
  color: var(--fg-faint);
}
.descriptor .descriptor__last { padding-right: 0; margin-right: 0; color: var(--accent-fg); }
.descriptor .descriptor__last::after { content: none; }

.descriptor__coin {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  color: var(--fg-dim);
}
.descriptor__coin .term__word { color: var(--fg); }

.open__body { margin-top: clamp(2.75rem, 8vw, 5.5rem); }
.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  color: var(--fg-dim);
  max-width: 34ch;
}
.hero-q {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-top: 0.35em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero-q em { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--accent-fg); letter-spacing: -0.01em; }
.sub {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 54ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* the posture under the hero question: another, not better */
.posture {
  display: grid;
  gap: 0.1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 46ch;
}
.posture .accent { color: var(--accent-fg); }

.aside {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--fg-faint);
  max-width: 46ch;
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}


/* ============================================================
   COINED TERMS
   A word with a definition hiding under it. Dotted underline is the
   only cue; the card is a disclosure, not a tooltip, so it works the
   same for a mouse, a finger and a keyboard.

   MECHANICS. The word is a real <button> with aria-expanded, so a
   screen reader announces it as collapsed and expandable and reads the
   definition when it opens. On devices with a real pointer it also
   opens on hover, which is a bonus rather than the mechanism. script.js
   handles click, Escape, click-outside and the horizontal nudge that
   keeps the card inside the viewport.

   TO ADD A TERM. Wrap the word exactly like Questioneer in section 00
   and give the card a unique id. No CSS or JS changes are required.
   Waiting on their own sections: Sygnosai, ENIN, Invironment.
   ============================================================ */
.term { position: relative; display: inline-block; }
.term__word {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.3s var(--ease);
}
.term__word:hover, .term__word:focus-visible { color: var(--accent-fg); }
.term[data-open="true"] .term__word { color: var(--accent-fg); }

.term__card {
  /* display:none rather than visibility:hidden on purpose. An absolutely
     positioned card that is merely invisible still widens the document at
     narrow viewports, which is a horizontal scrollbar nobody asked for.
     It also means the collapsed definition is properly out of the
     accessibility tree. The cost is the card appears rather than fades,
     which suits a hidden layer better than a lazy dissolve anyway. */
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(calc(-50% + var(--nudge, 0px)));
  width: min(22rem, calc(100vw - 2.5rem));
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--bg-raise);
  border: 1px solid var(--accent);
  text-align: left;
}
.term[data-open="true"] .term__card { display: grid; }
@media (hover: hover) and (pointer: fine) {
  .term:hover .term__card, .term:focus-within .term__card { display: grid; }
}
.term__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.term__pron {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent-fg);
}
.term__def {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-dim);
  margin-top: 0.35rem;
}

/* ============================================================
   THE MAILING LIST
   LIVE, and it promises nothing on purpose. There is no newsletter
   and no schedule while the shop, the Academy and a live sweepstakes
   have the attention, so no copy here names a cadence or a format.
   Every one of these posts to the same Kit form; the hidden fields on
   each say where it stood and what was being asked for. script.js
   section 09 intercepts and answers in place. With no JavaScript the
   same form submits the ordinary way to the same endpoint, so the
   address still arrives.

   Three shapes, one component. Bare (.signup) sits under a column of
   text. A panel (.signup--panel) is the full block at the end of a
   page. Tight (.signup--tight) is the one on the back of a book cover.
   ============================================================ */
.signup {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  max-width: 34rem;
}
.signup__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.signup__row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.signup__input {
  flex: 1 1 15rem;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  min-height: 48px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s var(--ease);
}
.signup__input::placeholder { color: var(--fg-faint); }
.signup__input:focus-visible { outline: none; border-color: var(--accent); }
.signup__btn { flex: 0 0 auto; }
.signup__btn[disabled] { opacity: 0.55; cursor: progress; }
.signup__note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  max-width: 48ch;
  margin-top: 0.85rem;
}
.signup__status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--accent-2-fg);
  max-width: 46ch;
  margin-top: 0.9rem;
}
.signup__status:empty { display: none; }
.signup[data-state="error"] .signup__status { color: var(--red); }
.signup[data-state="done"]  .signup__status { color: var(--accent); }

/* Once it has landed there is nothing left to type. The row folds away
   and the answer stands on its own. */
.signup[data-state="done"] .signup__row,
.signup[data-state="done"] .signup__note { display: none; }
.signup[data-state="done"] .signup__status { font-size: 0.82rem; margin-top: 1rem; }

/* the panel: the end-of-page version, given its own ground */
.signup--panel {
  max-width: 44rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  background: var(--bg-raise);
}
.signup--panel .signup__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0.6rem 0 0.75rem;
}
.signup--panel .signup__lede {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 44ch;
}
/* tight: inside a container-query box (a book back), so it stays small */
.signup--tight {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  max-width: none;
}
.signup--tight .signup__label { font-size: 0.62rem; letter-spacing: 0.14em; }
.signup--tight .signup__row { margin-top: 0.6rem; gap: 0.45rem; }
.signup--tight .signup__input { padding: 0.6rem 0.7rem; min-height: 40px; font-size: 0.85rem; flex: 1 1 9rem; }
.signup--tight .signup__status { font-size: 0.64rem; margin-top: 0.6rem; }

@media (max-width: 480px) {
  .signup__row { flex-direction: column; align-items: stretch; }
  /* stacked, the main axis is vertical, so the basis has to stop being a
     height or the field grows into a 15rem box */
  .signup__input { flex: 0 0 auto; width: 100%; }
  .signup__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   08  SECTION 2  WHO IS KRYS
   ============================================================ */
.krys__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.p--beats { display: flex; flex-direction: column; gap: 0.15em; font-family: var(--font-display); font-weight: 500; color: var(--fg); }

/* --- the imagination exchange ---
   Two voices. The dismissal is quiet and small, the answer is loud and
   large, and the jump between the two sizes is the whole rhetorical
   move. If these are ever set at the same size the passage dies. */
.exchange {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 46ch;
}
.exchange__said {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-faint);
}
.exchange__said em { font-style: italic; color: var(--fg-dim); }
.exchange__back {
  margin-top: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.22rem, 2.7vw, 1.95rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}

/* --- same geometry, stated six times ---
   Three columns so that the repeated word "within" stacks into a single
   vertical spine. The reader sees the pattern before reading the words,
   which is the point of the passage. Rows are display:contents so the
   columns align across the whole stanza rather than per line. Below the
   breakpoint it all collapses back to ordinary sentences. */
.within {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  column-gap: 0.55ch;
  row-gap: 0.12em;
  max-width: none;
  margin-top: 1.5em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.within__row { display: contents; }
.within__a { text-align: right; }
.within__op { color: var(--fg-faint); font-weight: 400; font-style: italic; }

@media (max-width: 640px) {
  .within { display: block; }
  .within__row { display: block; }
  .within__a { text-align: left; }
  .within__op { padding: 0 0.42ch; }
}

/* --- the closing question ---
   Set apart from the paragraph above it because the section exits on a
   question and hands straight over to the section about questions. */
.p--close { margin-top: clamp(1.9rem, 4.5vw, 3rem); }

/* --- identity reference: three portraits, one aligned face ---
   Uncaptioned on purpose. The alt text carries the meaning for anyone who
   cannot see them; the layout carries it for everyone who can. This is
   the static layout (no JS, or reduced motion): the architect large, the
   alchemist and the invironment side by side beneath. With JS and full
   motion, the rules in section 20 fold all three into one breathing
   frame. */
.portraits { position: relative; margin: 0; display: grid; gap: 0.6rem; }
.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.portraits__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}


/* ============================================================
   09  SECTIONS 2 + 3  THE JOURNEY
   One story across two sections. Shared components live here: the
   subhead, the two-column mapping ladder, the reflex list and the
   major commissioning statement.
   ============================================================ */

/* general a11y utility, kept available for any visually hidden label */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.subhead {
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: clamp(3rem, 7vw, 5rem);
}
.subhead--flush { margin-top: 0; }

/* the turning lines: same rule as .pullout, a little more room to run */
.pullout--turn { max-width: 34ch; }

/* --- the mapping ladder: a commissioning term on the left, what it
       means in a person on the right --- */
.ladder { margin-top: clamp(2rem, 5vw, 3.25rem); }
.ladder__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-strong);
}
.ladder__head span:last-child { color: var(--accent-fg); }
.ladder__list { margin: 0; }
.ladder__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: clamp(0.9rem, 2vw, 1.15rem) 0;
  border-bottom: 1px solid var(--line);
}
.ladder__row dt {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}
.ladder__row dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.45;
  color: var(--fg-dim);
}
.ladder__row--gap { margin-top: 1.6rem; border-top: 1px solid var(--line-strong); }
/* firmware is the row the whole metaphor turns on */
.ladder__row[data-pivot="true"] dt { color: var(--accent-fg); }
.ladder__row[data-pivot="true"] dd { color: var(--fg); }

/* --- the reflex, as instructions --- */
.payoff { margin-top: clamp(2.25rem, 5vw, 3.25rem); display: grid; gap: 0.1rem; }
.payoff li {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--fg);
  max-width: 44ch;
  padding: 0.55rem 0 0.55rem 1.6rem;
}
.payoff li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.2em;
  width: 0.75rem; height: 1px;
  background: var(--accent);
}
.payoff li:last-child { color: var(--accent-fg); }
/* the question under each instruction: the moment the method turned inward */
.payoff__q {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.8em;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--fg-dim);
  margin-top: 0.15em;
}
.payoff li:last-child .payoff__q { color: var(--fg-dim); }

/* --- attribution, said plainly and kept small --- */
.credit {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--fg-faint);
  max-width: 52ch;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line-strong);
}

/* --- MAJOR VISUAL STATEMENT --- */
.commission {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--accent);
}
.commission__line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.042em;
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}
.commission__line em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-fg);
  letter-spacing: -0.015em;
}
.commission__aside {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  max-width: 46ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}


/* ============================================================
   10  THE DEEPER-STORY DOORWAY
   A door that admits it is not built yet. When there is somewhere to
   go, .deeper__title becomes a link and the .state chip goes away.
   ============================================================ */
.deeper {
  margin-top: clamp(3rem, 8vw, 5.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line-strong);
  max-width: 62ch;
}
.deeper__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.deeper__title {
  font-size: clamp(1.6rem, 4.2vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-top: 0.7rem;
  color: var(--accent-fg);
}
.deeper__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--fg);
  margin-top: 0.6rem;
}
.deeper__teaser {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--fg-dim);
  margin-top: 1.15em;
}
.deeper--book { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 720px) { .deeper--book { grid-template-columns: 150px minmax(0, 1fr); gap: 2.25rem; } }
.deeper__cover { display: block; width: 150px; max-width: 40vw; text-decoration: none; }
.deeper__cover .cover--card { width: 100%; --lean: 0deg; margin: 0; transition: transform .45s var(--ease); }
.deeper__cover:hover .cover--card, .deeper__cover:focus-visible .cover--card { transform: translateY(-5px) rotate(-1deg); }
.deeper__title a { color: inherit; text-decoration: none; }
.deeper__title a:hover { color: var(--accent-fg); }
.deeper__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.deeper__go { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-fg); text-decoration: none; border-bottom: 1px solid transparent; }
.deeper__go:hover, .deeper__go:focus-visible { border-bottom-color: var(--accent); }
.deeper .state { margin-top: 1.75rem; }


/* ============================================================
   11  SECTION 4  RATE
   ============================================================ */
.rate__head { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
.rate__word {
  font-size: clamp(3.5rem, 15vw, 11rem);
  letter-spacing: -0.06em;
  line-height: 0.8;
  max-width: none;
}

.rate__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
}
.step {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: background 0.4s var(--ease);
}
.step:hover { background: var(--bg-raise); }
.step__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-fg);
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
}
.step__title { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; }
.step__practice {
  margin-top: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-fg);
}
.step__practice span { color: var(--fg-faint); margin-right: 0.5em; }
.step__primary { font-family: var(--font-serif); color: var(--fg-dim); margin-top: 0.6em; line-height: 1.55; font-size: 0.98rem; }

/* --- the question underneath ---
   The affordance is a real button, so it works with a keyboard, a screen
   reader and a thumb. On a device with a real pointer the card also opens
   on hover and on focus, which makes it feel like a reveal rather than a
   widget. Collapsed the question is visibility:hidden, so it leaves the
   accessibility tree with the button reporting aria-expanded="false". */
.step { display: flex; flex-direction: column; }
.step__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 1.25rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  transition: color 0.35s var(--ease);
}
.step__more-mark {
  position: relative;
  width: 9px; height: 9px;
  flex: none;
}
.step__more-mark::before,
.step__more-mark::after {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 9px; height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.step__more-mark::after { transform: rotate(90deg); }
.step:hover .step__more, .step:focus-within .step__more { color: var(--accent-fg); }
.step__q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.45;
  color: var(--fg);
  border-left: 1px solid var(--accent);
  padding-left: 0.9rem;
  margin-top: 1rem;
  /* collapsed */
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  transform: translateY(-4px);
  transition: opacity 0.45s var(--ease), max-height 0.45s var(--ease),
              transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.step[data-open="true"] .step__q {
  visibility: visible;
  opacity: 1;
  max-height: 16rem;
  transform: none;
  transition-delay: 0s;
}
.step[data-open="true"] .step__more-mark::after { transform: rotate(0deg); }

/* pointer devices get the reveal on hover and on keyboard focus as well */
@media (hover: hover) and (pointer: fine) {
  .step:hover .step__q,
  .step:focus-within .step__q {
    visibility: visible;
    opacity: 1;
    max-height: 16rem;
    transform: none;
    transition-delay: 0s;
  }
  .step:hover .step__more-mark::after,
  .step:focus-within .step__more-mark::after { transform: rotate(0deg); }
}

/* the gloss is two short paragraphs now, because the reframe needs two
   moves: what RATE is not, and where it starts */
.rate__gloss { margin-top: 0; display: grid; gap: 0.9rem; }
.rate__gloss .p { margin-top: 0; max-width: 52ch; }

/* --- the chain: each step is only available because of the one before --- */
.chain {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 0.1rem;
  counter-reset: chain;
}
.chain li {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 52ch;
  padding: 0.7rem 0 0.7rem 1.6rem;
}
.chain li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35em;
  width: 0.75rem; height: 1px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}
.chain__a { color: var(--fg); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.chain li:last-child .chain__a { color: var(--accent-fg); }

/* --- THE MECHANISM ---
   Deliberately the same drawing as the concept loops in section 11, one
   node wider. If that component changes, change this with it: the
   sameness is the argument. */
.mech { margin-top: clamp(3rem, 7vw, 5rem); }
/* .loop is declared later in the file with max-width:480px, so this needs
   the extra specificity to win regardless of source order. 660px matches
   the viewBox width, which renders the labels at their designed size
   instead of shrinking them. */
.mech .loop--five { max-width: 660px; }
.mech .loop { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.mech-m { display: none; }
.mech__p { max-width: 58ch; }
.chain__note { font-family: var(--font-serif); font-style: italic; color: var(--fg-faint); font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.55; max-width: 56ch; margin-top: 1rem; }
.mech__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--fg); max-width: 34ch; margin-top: 1.6rem; padding-left: 1.2rem; border-left: 2px solid var(--accent); }
.mech__hard {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--fg);
  max-width: 36ch;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--accent);
  text-wrap: balance;
}

/* --- the door to the animated model --- */
.mech__door {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mech__door a {
  color: var(--accent-fg);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: 0.2em;
  transition: border-color 0.3s var(--ease);
}
.mech__door a:hover, .mech__door a:focus-visible { border-bottom-color: var(--accent); }
.mech__door .keep { text-transform: none; }   /* unRUT and nuRATE keep their casing */

/* --- life is life: the unnumbered interlude that closes the paper zone --- */
.s--life { padding-top: clamp(3rem, 8vw, 5.5rem); }
.s--life .pullout { max-width: 34ch; }
/* --- the handoff into Human Sustainability --- */
.bridge {
  display: grid;
  gap: 0.35rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 54ch;
}
.bridge em { color: var(--fg); font-style: italic; }
.bridge .accent { color: var(--accent-fg); }

/* under the breakpoint the five SVG labels stop being readable, so the
   drawing steps aside and the same five steps are listed instead */
@media (max-width: 640px) {
  .mech .loop--five { display: none; }
  .mech-m {
    display: grid;
    gap: 0.1rem;
    margin-top: clamp(1.5rem, 3vw, 2rem);
  }
  .mech-m li {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg);
    padding: 0.6rem 0 0.6rem 1.5rem;
  }
  .mech-m li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.15em;
    width: 0.7rem; height: 1px;
    background: var(--accent);
  }
  .mech-m li:last-child { color: var(--accent-fg); }
}


/* ============================================================
   12  PAPER ZONE  (sections 6 + 7)
   ============================================================ */
.zone--paper::before,
.zone--paper::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
}

.concepts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.concept {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}
.concept__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-fg);
}
.concept h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 0.9rem;
  line-height: 1.05;
}
.concept__expand {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  margin-top: 0.5rem;
}
.concept__expand span { color: var(--accent-fg); }
.concept__expand--soft { color: var(--fg-dim); margin-top: 0.15rem; letter-spacing: 0.1em; }
.concept p:last-child {
  font-family: var(--font-serif);
  color: var(--fg-dim);
  line-height: 1.55;
  margin-top: 0.9rem;
  font-size: 0.98rem;
}

.whatifs { margin-top: clamp(2.25rem, 5vw, 3.5rem); display: grid; gap: 0; }
.whatifs li {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  line-height: 1.4;
  color: var(--fg);
  max-width: 52ch;
  padding: clamp(1rem, 2.5vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.whatifs li:first-child { border-top: 1px solid var(--line); }
.whatifs li span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2-fg);
  display: block;
  margin-bottom: 0.5rem;
}

/* --- signature moment: the soil panel --- */
.soil {
  margin-top: clamp(3rem, 8vw, 5.5rem);
  background: var(--ink);
  color: #EDEAE0;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.soil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
  pointer-events: none;
}
.soil__quote {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 4.3vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.038em;
  margin: 0;
  text-wrap: balance;
}
.soil__quote em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
/* --- the sequestration pair: the same cycle drawn twice --- */
.cycles { display: block; width: 100%; height: auto; margin-top: clamp(2rem, 4.5vw, 3.25rem); }
.cycles__title {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 2.6px;
  fill: rgba(237,234,224,0.62);
}
.cycles__step {
  font-family: var(--font-serif);
  font-size: 19px;
  fill: #EDEAE0;
}
.cycles__foot {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  fill: rgba(237,234,224,0.55);
}
.cycles__spine { stroke: rgba(237,234,224,0.22); stroke-width: 1; }
.cycles__divide { stroke: rgba(237,234,224,0.14); stroke-width: 1; stroke-dasharray: 3 6; }
.cycles__title--end, .cycles__step--end, .cycles__foot--end { text-anchor: end; }
.cycles__same {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 4px;
  fill: rgba(237,234,224,0.4);
  text-anchor: middle;
}
.cycles__return-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 2.6px;
  text-anchor: middle;
}
/* soil runs lime, the organisation runs blue: same shape, different territory */
.cycles__col--soil .cycles__node { fill: var(--lime); }
.cycles__col--soil .cycles__arrow { fill: rgba(201,255,61,0.75); }
.cycles__col--soil .cycles__return { fill: none; stroke: rgba(201,255,61,0.5); stroke-width: 1; }
.cycles__col--soil .cycles__return-label { fill: var(--lime); }
.cycles__col--org .cycles__node { fill: var(--blue); }
.cycles__col--org .cycles__arrow { fill: rgba(92,200,245,0.75); }
.cycles__col--org .cycles__return { fill: none; stroke: rgba(92,200,245,0.5); stroke-width: 1; }
.cycles__col--org .cycles__return-label { fill: var(--blue); }
.cycles__node--held { stroke: currentColor; }
.cycles__col--soil .cycles__node--held { filter: drop-shadow(0 0 7px rgba(201,255,61,0.55)); }
.cycles__col--org  .cycles__node--held { filter: drop-shadow(0 0 7px rgba(92,200,245,0.55)); }

/* mobile: the same comparison as a ladder */
.cycles-m { display: none; margin-top: 2rem; }
.cycles-m__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(237,234,224,0.28);
}
.cycles-m__head span:first-child { color: var(--lime); }
.cycles-m__head span:last-child { color: var(--blue); }
.cycles-m__list { margin: 0; }
.cycles-m__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(237,234,224,0.13);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.4;
}
.cycles-m__row dt { color: rgba(237,234,224,0.9); }
.cycles-m__row dd { margin: 0; color: rgba(237,234,224,0.9); }
.cycles-m__row--return dt { color: var(--lime); }
.cycles-m__row--return dd { color: var(--blue); }



/* ============================================================
   13  SECTION 8  NOW
   ============================================================ */
.now__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
}
.now__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
}
.now-card {
  position: relative;
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: background 0.4s var(--ease);
}
.now-card:hover { background: var(--bg-raise); }
.now-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.6s var(--ease);
}
.now-card.is-in::before { width: 46px; }

.now-card__state {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  align-self: flex-start;
  padding: 0.45em 0.75em;
  margin-bottom: 0.75rem;
}
.now-card__state::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: none;
}
/* state vocabulary */
.now-card[data-state="operating"] .now-card__state { background: var(--accent); color: var(--ink); }
.now-card[data-state="operating"] .now-card__state::before { background: var(--ink); animation: blip 2.4s ease-in-out infinite; }
.now-card[data-state="building"] .now-card__state { border: 1px solid var(--accent); color: var(--accent-fg); }
.now-card[data-state="building"] .now-card__state::before { background: var(--accent); }
.now-card[data-state="testing"] .now-card__state { border: 1px solid var(--violet); color: var(--violet); }
.now-card[data-state="testing"] .now-card__state::before { background: var(--violet); }
.now-card[data-state="experimenting"] .now-card__state { border: 1px dashed var(--violet); color: var(--violet); }
.now-card[data-state="experimenting"] .now-card__state::before { background: transparent; box-shadow: inset 0 0 0 1px var(--violet); }
.now-card[data-state="evolving"] .now-card__state { border: 1px solid var(--line-strong); color: var(--fg); }
.now-card[data-state="evolving"] .now-card__state::before { background: var(--fg-dim); }
.now-card[data-state="writing"] .now-card__state {
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: none;
}
.now-card[data-state="writing"] .now-card__state::before { background: var(--fg-faint); }
@keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.now-card__title {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.now-card[data-state="writing"] .now-card__title { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.now-card__sub { font-family: var(--font-serif); font-style: italic; color: var(--accent-fg); }
.now-card__body { font-family: var(--font-serif); color: var(--fg-dim); line-height: 1.6; font-size: 0.99rem; }
.now-card__q {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg);
  line-height: 1.5;
  padding-left: 0.9rem;
  border-left: 1px solid var(--violet);
}
.now-card__link, .now-card__nolink {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 1.5rem;
}
.now-card__link { color: var(--accent-fg); text-decoration: none; border-bottom: 1px solid transparent; align-self: flex-start; }
.now-card__link:hover { border-bottom-color: var(--accent); }
.now-card__link--internal { color: var(--accent-2-fg); }
.now-card__link--internal:hover { border-bottom-color: var(--accent-2); }
.now-card__nolink { color: var(--fg-faint); }


/* ============================================================
   14  SECTION 8  DIFFERENT MAPS. SAME SOIL.
   ============================================================ */
/* ---- the three loops ----
   Geometry, not illustration. Three columns: the rows, the loop, the soil
   contours. data-state="signal" on .loops runs the response: the broken
   loop breaks further, the flat loop's net zero node glows and an award
   ring appears, the rising loop lights its four nodes in sequence and
   the soil lifts. */
.loops { margin-top: clamp(2rem, 4vw, 3rem); }
.loops__head { text-align: center; }
.loops__title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--fg); }
.loops__sub { font-family: var(--font-serif); font-style: italic; color: var(--fg-faint); font-size: 0.95rem; margin-top: 0.4rem; }
.loops__grid { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 2rem; }
@media (min-width: 820px) { .loops__grid { grid-template-columns: repeat(3, 1fr); } }
.plot { background: var(--ink); padding: clamp(1.2rem, 2.5vw, 2rem) clamp(0.6rem, 1.5vw, 1.2rem); text-align: center; margin: 0; }
.plot__n { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--fg-faint); }
.plot__name { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.4rem; color: var(--fg); }
.plot__kind { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--lc); margin-top: 0.4rem; }
.plot__svg { display: block; width: 100%; height: auto; margin-top: 0.6rem; }
.plot__svg .t { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--fg-dim); }
.plot__svg .t--red { fill: var(--red); } .plot__svg .t--blue { fill: var(--blue); } .plot__svg .t--lime { fill: var(--lime); }
.plot__svg .note { font-family: var(--font-serif); font-style: italic; font-size: 10.5px; fill: var(--fg-faint); }
.plot__cap { font-family: var(--font-serif); font-style: italic; font-size: 0.88rem; color: var(--fg-faint); line-height: 1.5; min-height: 3.2em; }
.plot__cap span { color: var(--fg-dim); }
.plot__cap--signal { display: none; color: var(--fg-dim); }
.loops[data-state="signal"] .plot__cap--rest { display: none; }
.loops[data-state="signal"] .plot__cap--signal { display: block; }
.plot__verdict { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lc); margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-weight: 700; }
.plot__verdict span { display: block; color: var(--fg-faint); font-weight: 400; margin-bottom: 0.3rem; }
.loops__foot { display: grid; gap: 1.2rem; justify-items: center; margin-top: 1.6rem; text-align: center; }
.loops__btn { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); background: none; border: 1px solid var(--line-strong); padding: 0.6rem 1rem; cursor: pointer; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); }
.loops__btn:hover, .loops__btn:focus-visible { border-color: var(--lime); color: var(--lime); }
.loops__btn[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.loops__line { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: var(--fg-faint); max-width: 60ch; }

/* motion in the figure */
.plot__svg .burst, .plot__svg .award { opacity: 0; }
.plot__svg .arc, .plot__svg .gap, .plot__svg .drop, .plot__svg .crack, .plot__svg .halo, .plot__svg .node, .plot__svg .lift, .plot__svg .c { transition: all 0.9s var(--ease); }
.plot__svg .spiral { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* the signal: broken breaks further */
.loops[data-state="signal"] .plot--broken .gap { stroke-dasharray: 2 7; transform: translate(4px, 4px); }
.loops[data-state="signal"] .plot--broken .drop { transform: translate(6px, 10px); }
.loops[data-state="signal"] .plot--broken .crack { transform: scaleY(1.5); transform-origin: 50% 318px; }
.loops[data-state="signal"] .plot--broken .c1 { transform: translateY(6px); } .loops[data-state="signal"] .plot--broken .c2 { transform: translateY(9px); } .loops[data-state="signal"] .plot--broken .c3 { transform: translateY(12px); }
.loops[data-state="signal"] .plot--broken .burst { animation: burst 1.4s var(--ease) 1 forwards; }
@keyframes burst { 0% { opacity: .9; r: 5; } 100% { opacity: 0; r: 34; } }
/* flat holds, glows, gets a ring */
.loops[data-state="signal"] .plot--flat .halo { opacity: .34; r: 20; }
.loops[data-state="signal"] .plot--flat .node { r: 5.2; }
.loops[data-state="signal"] .plot--flat .award { opacity: .8; animation: spin 14s linear infinite; transform-origin: 200px 118px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* rising lights in sequence and lifts the soil */
.loops[data-state="signal"] .plot--rising .spiral { animation: draw 2.2s var(--ease) forwards; stroke-dashoffset: 1; }
.loops[data-state="signal"] .plot--rising .node--1 { animation: light 0.8s var(--ease) 0.1s both; }
.loops[data-state="signal"] .plot--rising .node--2 { animation: light 0.8s var(--ease) 0.7s both; }
.loops[data-state="signal"] .plot--rising .node--3 { animation: light 0.8s var(--ease) 1.3s both; }
.loops[data-state="signal"] .plot--rising .node--4 { animation: light 0.8s var(--ease) 1.9s both; }
.loops[data-state="signal"] .plot--rising .halo--1 { animation: glow 0.8s var(--ease) 0.1s both; }
.loops[data-state="signal"] .plot--rising .halo--2 { animation: glow 0.8s var(--ease) 0.7s both; }
.loops[data-state="signal"] .plot--rising .halo--3 { animation: glow 0.8s var(--ease) 1.3s both; }
.loops[data-state="signal"] .plot--rising .halo--4 { animation: glow 0.8s var(--ease) 1.9s both; }
.loops[data-state="signal"] .plot--rising .lift { transform: translateY(-7px); transition-delay: 2.2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes light { 0% { r: 4; } 50% { r: 7; } 100% { r: 5; } }
@keyframes glow { 0% { opacity: .18; r: 11; } 50% { opacity: .5; r: 22; } 100% { opacity: .3; r: 16; } }
@media (prefers-reduced-motion: reduce) {
  .plot__svg * { transition: none !important; animation: none !important; }
  .loops[data-state="signal"] .plot--rising .spiral { stroke-dashoffset: 0; }
  .loops[data-state="signal"] .plot--flat .award, .loops[data-state="signal"] .plot--broken .burst { opacity: .6; }
}

/* the nine principles */
.nine { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1.5rem; }
.nine__head { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg); }
.nine__list { list-style: none; counter-reset: nine; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .nine__list--grid { grid-template-columns: repeat(3, 1fr); } }
.nine__list li { counter-increment: nine; background: var(--bg); padding: 1.2rem 1.25rem 1.4rem; font-family: var(--font-serif); font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.5; color: var(--fg-dim); }
.nine__list li::before { content: counter(nine, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 0.7rem; }
.nine__list li b { display: block; color: var(--fg); font-family: var(--font-display); font-weight: 700; font-size: 1.15em; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.nine__verdicts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; }
@media (min-width: 720px) { .nine__verdicts { grid-template-columns: repeat(3, 1fr); } }
.nine__v { background: var(--bg); padding: 1.1rem 1.2rem 1.3rem; }
.nine__v dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lc); }
.nine__v dd { font-family: var(--font-serif); font-size: 0.96rem; line-height: 1.5; color: var(--fg-dim); margin: 0.5rem 0 0; }

/* ============================================================
   15  SECTION 10  KRYS DID IT
   ============================================================ */
.archive__panel {
  border: 1px solid var(--line-strong);
  padding: clamp(2rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
/* the cosmic panel art. Remove the figure from index.html and the panel
   quietly returns to one column. */
.archive__art { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.archive__art img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
}
.archive__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-fg);
}
.archive__title {
  font-size: clamp(2.4rem, 9vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  margin-top: 1rem;
}
.archive__title span { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-fg); letter-spacing: -0.02em; }
.archive__body {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 52ch;
  margin-top: 1.5rem;
}
.archive__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; position: relative; }
.archive__ig {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-2-fg);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.archive__ig:hover { border-bottom-color: var(--accent-2); }

/* --- the shelf: the same ten covers as library.html, small and leaning ---
   The cover component below is copied from library.html on purpose (that
   page is self-contained). Change both or they drift. --- */
.shelf {
  display: block;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.shelf__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; }
.shelf__kicker { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-faint); }
.shelf__count { font-family: var(--font-serif); font-style: italic; color: var(--fg-dim); }
.shelf__row {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-top: 1.5rem;
  padding: 0.5rem 0.75rem 0;
  border-bottom: 3px solid var(--line-strong);      /* the shelf plank */
  overflow-x: auto;
  scrollbar-width: none;
}
.shelf__row::-webkit-scrollbar { display: none; }
.shelf__row .cover--mini {
  flex: 0 0 auto;
  width: clamp(72px, 9vw, 104px);
  margin-right: -6px;
  transform-origin: bottom center;
  transform: rotate(var(--lean, 0deg));
}
.shelf__row .cover--mini:nth-child(2n)  { --lean: -2.4deg; }
.shelf__row .cover--mini:nth-child(3n)  { --lean: 1.6deg; }
.shelf__row .cover--mini:nth-child(5n)  { --lean: -1deg; }
.shelf__row .cover--mini:nth-child(7n)  { --lean: 3deg; }
.shelf:hover .cover--mini { transform: rotate(var(--lean, 0deg)) translateY(-3px); }
.shelf__go {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: 0.2em;
  transition: border-color 0.3s var(--ease);
}
.shelf:hover .shelf__go, .shelf:focus-visible .shelf__go { border-bottom-color: var(--accent); }

/* ---- a cover: full-bleed colour, a drawn motif, real book proportions.
   Sized by its container (cqw), so the same markup works at 300px on
   the library page and 96px on the main-page shelf. ---- */
.cover {
  --cbg: #101209; --cfg: #EDEAE0; --cdim: rgba(237,234,224,.6);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  container-type: inline-size;
  background: var(--cbg);
  color: var(--cfg);
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
  box-shadow:
    inset 6px 0 10px -6px rgba(0,0,0,.7),       /* the spine crease */
    inset -1px 0 0 rgba(255,255,255,.06),
    0 18px 30px -18px rgba(0,0,0,.9);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1);
}
.cover::after {                                  /* paper sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 28%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}
.cover__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover__title, .cover__sub, .cover__author { position: absolute; left: 9cqw; right: 8cqw; z-index: 1; }
.cover__title {
  top: 9cqw;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 11.5cqw; line-height: .98; letter-spacing: -.035em;
}
.cover__sub {
  top: 9cqw; margin-top: 0; transform: translateY(calc(11.5cqw * 0.98 * 2.6 + 4cqw));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-style: italic;
  font-size: 5.2cqw; line-height: 1.25; color: var(--cdim);
}
.cover__author {
  bottom: 7cqw;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 4.2cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--cdim);
}
.cover--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }





/* ============================================================
   16  SECTION 11  NEXT
   ============================================================ */
.vectors { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.vec { border-bottom: 1px solid var(--line); }
.vec__d { }
.vec__sum {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1.75rem;
  align-items: baseline;
  gap: 0.5rem;
  padding: clamp(1rem, 2.4vw, 1.5rem) 0;
  cursor: pointer;
  list-style: none;
  transition: padding-left 0.35s var(--ease);
}
.vec__sum::-webkit-details-marker { display: none; }
.vec__sum:hover { padding-left: 0.6rem; }
.vec__line {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  line-height: 1.45;
  color: var(--fg);
  max-width: 54ch;
}
.vec__line a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.vec__line a:hover { color: var(--accent-fg); }
.vec__arrow { color: var(--fg-faint); font-family: var(--font-mono); transition: color 0.35s var(--ease), transform 0.35s var(--ease); display: inline-block; }
.vec__sum:hover .vec__arrow { color: var(--accent-fg); transform: translateX(4px); }
/* the open/close cue is a plus that becomes a minus */
.vec__cue { position: relative; justify-self: end; align-self: center; width: 11px; height: 11px; }
.vec__cue::before, .vec__cue::after {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 11px; height: 1px;
  background: var(--fg-faint);
  transition: transform 0.4s var(--ease), background 0.35s var(--ease);
}
.vec__cue::after { transform: rotate(90deg); }
.vec__sum:hover .vec__cue::before, .vec__sum:hover .vec__cue::after { background: var(--accent); }
.vec__d[open] .vec__cue::after { transform: rotate(0deg); }
.vec__d[open] .vec__arrow { color: var(--accent-fg); }

.vec__body {
  padding: 0 0 clamp(1.75rem, 4vw, 2.75rem) 2.75rem;
  max-width: 66ch;
}
.vec__p {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.6;
  color: var(--fg-dim);
}
.vec__why {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--accent);
  max-width: 46ch;
}
.vec__link { margin-top: 1.25rem; }
.vec__link a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-fg);
  border-bottom: 1px solid transparent;
}
.vec__link a:hover { border-bottom-color: var(--accent); }

/* --- the shared loop motif ---
   The same drawing appears in the sequestration pair and again here,
   relabelled per domain. That repetition is the point: the argument is
   that these are the same geometry wearing different words. */
.loop { display: block; width: 100%; max-width: 480px; height: auto; margin-bottom: 1.5rem; }
.loop__spine { stroke: var(--line-strong); stroke-width: 1; }
.loop__arrow { fill: var(--accent); }
.loop__node { fill: var(--accent); }
.loop__return { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; }
.loop__label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.6px;
  fill: var(--fg-dim);
  text-anchor: middle;
}
.loop__return-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  fill: var(--fg-faint);
  text-anchor: middle;
}

/* --- glossary --- */
.gloss { margin-top: 1.5rem; display: grid; gap: 0.1rem; }
.gloss__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.gloss__row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-fg);
}
.gloss__row dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.99rem;
  line-height: 1.5;
  color: var(--fg-dim);
}


/* ============================================================
   17  SECTION 12  DOORS
   ============================================================ */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
}
.door {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: background 0.4s var(--ease);
}
.door::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease), width 0.35s var(--ease);
}
.door:hover { background: var(--bg-raise); }
.door:hover::before { transform: scaleY(1); width: 3px; }
.door[data-open="false"]::before { background: var(--fg-faint); }
.door__n {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.door__title {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 0.75rem;
}
.door__who { font-family: var(--font-serif); color: var(--fg-dim); line-height: 1.55; font-size: 0.99rem; }
.door__link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-fg);
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.5rem;
  border-bottom: 1px solid transparent;
}
.door__link:hover { border-bottom-color: var(--accent); }
.door__link--internal { color: var(--accent-2-fg); }
.door__link--internal:hover { border-bottom-color: var(--accent-2); }
.door__note, .door__closed {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 0.75rem;
}
.door__closed { margin-top: auto; padding-top: 1.5rem; }


/* ============================================================
   18  SECTION 13  CONNECT + FOOTER
   ============================================================ */
.connect__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
.statement--dark {
  border-top: 1px solid var(--accent);
  padding-top: 1.5rem;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  max-width: 16ch;
}

.foot {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 8vw, 6rem) var(--gut) clamp(2rem, 5vw, 3.5rem);
  max-width: calc(var(--maxw) + var(--gut) * 2);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.foot__ask {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
}
.foot__ans {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--accent-fg);
  margin-top: 0.4rem;
}
.foot__krys {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.foot__legal {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}


/* ============================================================
   19  REVEAL + RESPONSIVE + REDUCED MOTION
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- tablet ---- */
@media (min-width: 720px) {
  .krys__grid { grid-template-columns: 1.55fr 1fr; }
  .rate__head { grid-template-columns: 1fr 1fr; }
  .connect__grid { grid-template-columns: 1.3fr 1fr; }
  .foot { grid-template-columns: 1fr auto; align-items: end; }
  .foot__q { grid-row: 1; }
  .foot__krys { grid-column: 1 / -1; }
  .now__grid { grid-template-columns: repeat(2, 1fr); }
  .now-card[data-size="full"] { grid-column: span 2; }
  .gloss__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
  .ladder__head,
  .ladder__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 2rem; align-items: baseline; }
}

/* ---- NOW: six column system, rows always add up to six ---- */
@media (min-width: 900px) {
  .archive__panel {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
  .archive__art { margin: 0; }
  .now__grid { grid-template-columns: repeat(6, 1fr); }
  .now-card { grid-column: span 2; }
  .now-card[data-size="lg"] { grid-column: span 4; }
  .now-card[data-size="full"] { grid-column: span 6; }
  .now-card[data-size="lg"] .now-card__body,
  .now-card[data-size="full"] .now-card__body { max-width: 62ch; }
  .now-card[data-size="full"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 0.75rem;
    align-items: start;
  }
  .now-card[data-size="full"] .now-card__state { grid-column: 1 / -1; justify-self: start; }
  .now-card[data-size="full"] .now-card__title { grid-column: 1; }
  .now-card[data-size="full"] .now-card__body { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .now-card[data-size="full"] .now-card__nolink { grid-column: 1; padding-top: 0.25rem; }
}

/* ---- desktop: the thread rail appears ---- */
@media (min-width: 1080px) {
  .rail { display: block; }
  body { padding-left: var(--rail-w); }
  .zone--paper { margin-left: calc(var(--rail-w) * -1); padding-left: var(--rail-w); }
  .nav { padding-left: calc(var(--rail-w) + 1rem); }
  .progress { left: 0; }
}

/* ---- mobile nav ---- */
@media (max-width: 719px) {
  .nav { flex-wrap: wrap; }
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
  }
  .nav__menu.is-open { max-height: 60vh; margin-top: 0.75rem; }
  .nav__menu a {
    padding: 0.95rem 0;
    border-top: 1px solid var(--line);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav__menu a::after { display: none; }
  .vec__body { padding-left: 0; }
  .vec__sum { grid-template-columns: 1.5rem 1fr 1.25rem; }
  .now__grid { grid-template-columns: 1fr; }
  .now-card[data-size="lg"], .now-card[data-size="full"] { grid-column: auto; }
  .descriptor span { padding-right: 0.8em; margin-right: 0.8em; }
  .descriptor { gap: 0.35rem 0; }
  .cycles { display: none; }
  .cycles-m { display: block; }
}

/* ---- large screens: a touch more air ---- */
@media (min-width: 1400px) {
  :root { --maxw: 1240px; }
}

/* ---- reduced motion: everything still works, nothing moves ---- */

/* ============================================================
   20  PASS 1  LIVING SYSTEMS
   Motion added as a layer. Every rule in here is either gated
   behind .js, driven by a class JS applies, or neutralized by the
   reduced-motion block at the end of the file. The no-JS page and
   the reduced-motion page are the previous, still design.
   ============================================================ */

/* --- the breathing portrait: three worlds, one face ---
   JS folds the three portraits into a single frame and slowly cycles
   data-world on the figure: architect, alchemist, invironment, about
   eight seconds each with a long dissolve. The face is aligned across
   all three images, so only the world appears to change. Hover pauses
   the cycle (presence pauses time); a click or tap advances it.

   The architect is the base layer and stays opaque; the other two fade
   over it. Without JS (or with reduced motion) none of these classes
   appear and the static three-portrait layout in section 08 stands. */
.js .portraits--worlds {
  display: block;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line-strong);
}
.js .portraits--worlds .portraits__pair { display: contents; }
.js .portraits--worlds .portrait { border: 0; }
.js .portraits--worlds .portrait--alchemist,
.js .portraits--worlds .portrait--invironment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.45, 0.05, 0.3, 1);
}
.js .portraits--worlds[data-world="alchemist"] .portrait--alchemist { opacity: 1; }
.js .portraits--worlds[data-world="invironment"] .portrait--invironment { opacity: 1; }

/* --- the living sequestration model ---
   All elements below are injected by script.js section 11. The svg sits
   on the dark soil panel, so these colors are light-on-ink. Red enters
   the palette here and only here: it is the color of distress being
   carried, and it exists to be seen leaving. */
.cyc-guide { stroke: none; }
.cyc-dot {
  fill: rgba(237, 234, 224, 0.08);
  stroke: rgba(237, 234, 224, 0.45);
  stroke-width: 1;
  transition: fill 0.5s var(--ease), stroke 0.5s var(--ease);
}
.cycles__col--org .cyc-dot.is-holding { fill: rgba(226, 94, 74, 0.85); stroke: rgba(226, 94, 74, 0.9); }
.cycles__col--soil .cyc-dot.is-holding { fill: rgba(237, 234, 224, 0.7); stroke: rgba(237, 234, 224, 0.8); }
.cyc-dot.is-fed { fill: rgba(201, 255, 61, 0.8); stroke: var(--lime); }
.cyc-p--carbon { fill: rgba(237, 234, 224, 0.85); }
.cyc-p--distress { fill: #E25E4A; }
.cyc-p--return { fill: var(--lime); }
.cyc-grain {
  fill: rgba(237, 234, 224, 0);
  animation: grain-in 0.9s var(--ease) forwards;
}
.cycles__col--soil .cyc-grain { fill: rgba(201, 255, 61, 0.55); }
.cycles__col--org  .cyc-grain { fill: rgba(92, 200, 245, 0.6); }
.cyc-grain--going { animation: grain-out 0.9s var(--ease) forwards; }
@keyframes grain-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes grain-out { from { opacity: 1; } to { opacity: 0; } }

/* --- the mark in the footer ---
   Still: plasma pixels, each on its own breath (SVG, no JS needed).
   Alive: script.js section 15 mounts a canvas over it and the same
   pixels become a cloud of potential that organizes into the question.
   The canvas overflows the mark's box on purpose; the footer clips it. */
.foot { overflow: hidden; }
.foot__mark { position: relative; width: clamp(80px, 11vw, 120px); aspect-ratio: 8.2 / 12.73; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.foot__mark__svg { display: block; width: 100%; height: auto; }
.foot__mark .px { animation: plasma 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.foot__mark .px--stray { animation-duration: 5.2s; }
.foot__mark.is-live .foot__mark__svg { opacity: 0; }
.foot__mark.is-live .px { animation: none; }
.foot__cloud { position: absolute; display: block; pointer-events: none; }
.foot__mark.is-live { cursor: pointer; }
@keyframes plasma {
  0%, 100% { opacity: var(--o, 1); }
  50% { opacity: calc(var(--o, 1) * 0.45); }
}

/* --- the ORB ---
   The end of unRUT, living in the empty spaces of this page. Each orb is
   a square canvas drawn by script.js section 16, coloured by data-orb and
   by whether it sits on paper. It is placed absolutely in the empty
   right-hand space of its section and only exists on screens wide
   enough to have that space. Hover, focus or tap opens the three doors
   from its vertices. The nav orb is the small always-present one. */
.orb { position: absolute; width: var(--orb, 300px); height: var(--orb, 300px); display: none; z-index: 3; }
.orb__core { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.orb__core:focus-visible { outline: 1px solid var(--accent); outline-offset: 12px; }
.orb canvas { display: block; width: 100%; height: 100%; }
.orb__doors { position: absolute; inset: 0; pointer-events: none; }
.orb.is-open .orb__doors { pointer-events: auto; }
.orb__door {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: none;   /* unRUT and nuRATE keep their casing */
  color: var(--fg); text-decoration: none; white-space: nowrap;
  padding: 0.45rem 0.7rem; border: 1px solid var(--accent); background: var(--bg);
  opacity: 0; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); pointer-events: none;
}
.orb__door::before { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); left: -3px; top: 50%; transform: translateY(-50%); }
.orb__door--soon { color: var(--fg-faint); border-color: var(--line-strong); }
.orb__door--soon::before { background: var(--fg-faint); }
.orb__door small { font-size: 0.6em; letter-spacing: 0.18em; color: var(--fg-faint); margin-left: 0.4em; }
.orb__door:hover { color: var(--accent); }
.orb.is-open .orb__door { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
/* the doors fan out from the right-hand vertices of the sphere */
.orb.is-open .orb__door--1 { transform: translate(calc(-50% + var(--orb) * 0.24), calc(-50% - var(--orb) * 0.30)); }
.orb.is-open .orb__door--2 { transform: translate(calc(-50% + var(--orb) * 0.32), -50%); }
.orb.is-open .orb__door--3 { transform: translate(calc(-50% + var(--orb) * 0.24), calc(-50% + var(--orb) * 0.30)); }
.orb.is-open .orb__door--1, .orb.is-open .orb__door--2, .orb.is-open .orb__door--3 { transition-delay: 0.05s; }
.orb.is-open .orb__door--2 { transition-delay: 0.12s; }
.orb.is-open .orb__door--3 { transition-delay: 0.19s; }

/* placements: the empty right-hand space of each section, wide screens only */
@media (min-width: 1180px) {
  .orb--hero, .orb--story, .orb--rate, .orb--syg { display: block; }
  .orb--hero  { --orb: clamp(260px, 26vw, 380px); right: 5%;  top: 37%; }
  .orb--story { --orb: clamp(220px, 20vw, 300px); right: 8%;  top: 22%; }
  .orb--rate  { --orb: clamp(220px, 20vw, 300px); right: 6%;  top: 56%; }
  .orb--syg   { --orb: clamp(220px, 20vw, 300px); right: 6%;  top: 8%; }
}

/* the nav orb: small, always there on desktop, a dropdown of the doors */
.orb--nav { position: relative; display: none; --orb: 34px; width: var(--orb); height: var(--orb); margin-left: clamp(0.6rem, 1.5vw, 1.2rem); z-index: 120; }
.orb--nav .orb__doors { inset: auto; right: -0.5rem; top: 100%; padding: 0.6rem 0.5rem 0.5rem; width: max-content; display: grid; gap: 0.35rem; }   /* the padding is the bridge from the orb to the first door */
.orb--nav .orb__door { position: static; transform: translateY(-4px); }
.orb--nav.is-open .orb__door { transform: none; }
.orb--nav .orb__door::before { display: none; }
.nav__page { display: none; text-transform: none; }
@media (min-width: 720px) {
  .orb--nav { display: block; }
  .nav__menu { margin-left: auto; }
}
@media (max-width: 719px) {
  .nav__page { display: block; }
}

/* --- the interlude: unRUT, the short version --- */
.s--geo { padding-top: clamp(3rem, 8vw, 5.5rem); }
.geo { display: grid; gap: clamp(2rem, 5vw, 4rem); margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; align-items: center; }
@media (min-width: 900px) { .geo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.geo__text { display: grid; gap: 0.9rem; max-width: 62ch; }
.geo__line { font-family: var(--font-serif); font-size: clamp(1.02rem, 1.7vw, 1.28rem); line-height: 1.5; color: var(--fg-dim); margin: 0; padding-left: 1.1rem; border-left: 1px solid var(--line-strong); }
.geo__names { color: var(--fg); font-family: var(--font-display); font-weight: 600; }
.geo__solid { color: var(--accent-fg, var(--accent)); font-style: italic; }
.geo__doors { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 0.6rem; }
.geo__doors a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-fg, var(--accent)); text-decoration: none; border-bottom: 1px solid transparent; }
.geo__doors a:hover, .geo__doors a:focus-visible { border-bottom-color: var(--accent); }
.geo__doors .keep { text-transform: none; }
.geo__fig { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.geo__lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--fg-faint); }
.geo__lbl--red { fill: #E25E4A; } .geo__lbl--blue { fill: #5CC8F5; } .geo__lbl--lime { fill: #C9FF3D; }

/* --- the KRYS rotator ---
   Five expansions, five moods. The mood is on data-mood, the restart
   trigger is .is-live, both applied by script.js section 12. */
.foot__krys { transform-origin: left center; }
.foot__krys[data-mood="remind"].is-live   { animation: krys-blink 4.6s var(--ease) 1; }
.foot__krys[data-mood="regulate"].is-live { animation: krys-breathe 4.6s var(--ease) 1; }
.foot__krys[data-mood="refine"].is-live   { animation: krys-glimmer 4.6s var(--ease) 1; }
.foot__krys[data-mood="repeat"].is-live   { animation: krys-shake 4.6s var(--ease) 1; }
.foot__krys[data-mood="soul"].is-live     { animation: krys-glow 4.6s var(--ease) 1; }
@keyframes krys-blink {
  0%, 7%, 13%, 100% { opacity: 1; }
  10% { opacity: 0.15; }
}
@keyframes krys-breathe {
  0%, 100% { letter-spacing: normal; }
  40% { letter-spacing: 0.06em; }
}
@keyframes krys-glimmer {
  0%, 30%, 60%, 100% { color: var(--fg); }
  42% { color: var(--accent-fg); }
}
@keyframes krys-shake {
  0%, 12%, 100% { transform: translateX(0); }
  3% { transform: translateX(-3px); }
  6% { transform: translateX(3px); }
  9% { transform: translateX(-2px); }
}
@keyframes krys-glow {
  0%, 100% { text-shadow: none; }
  45% { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 65%, transparent); }
}

/* --- loop pulses --- */
.loop__pulse { fill: var(--accent-fg); }

/* --- the accent speaks: script.js section 14 drives --acute-alpha --- */
.identity__mark::after {
  opacity: var(--acute-alpha, 1);
  transition: opacity 0.09s linear;
}

/* --- the ladder lights row by row as it arrives --- */
.js .ladder.reveal .ladder__row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js .ladder.reveal.is-in .ladder__row { opacity: 1; transform: none; }
.js .ladder.reveal.is-in .ladder__row:nth-child(1) { transition-delay: 0.05s; }
.js .ladder.reveal.is-in .ladder__row:nth-child(2) { transition-delay: 0.16s; }
.js .ladder.reveal.is-in .ladder__row:nth-child(3) { transition-delay: 0.27s; }
.js .ladder.reveal.is-in .ladder__row:nth-child(4) { transition-delay: 0.38s; }
.js .ladder.reveal.is-in .ladder__row:nth-child(5) { transition-delay: 0.49s; }
.js .ladder.reveal.is-in .ladder__row:nth-child(6) { transition-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .ladder.reveal .ladder__row { opacity: 1; transform: none; }
  .rail__head { display: none; }
}

/* ---- print: a readable fallback ---- */
@media print {
  .rail, .nav, .progress, .skip-link { display: none; }
  body { background: #fff; color: #000; padding-left: 0; }
  .zone--paper { background: #fff; }
}