/* ==========================================================================
   Exis site styles (rebuild). Base elements, layout, the section pager and
   its scroll affordances, and the Home sections. Tokens live in tokens.css.
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-wash), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 0.9rem; background: var(--panel-02); color: var(--n-90);
  font-family: var(--font-mono); font-size: var(--fs-label); text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { width: min(1120px, 90vw); margin: 0 auto; }

.label {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--n-50);
  margin: 0 0 1.1rem;
}
.label--signal { color: var(--nominal); }

/* --------------------------------------------------------------------------
   Buttons (v4 r2). Iris is the action colour again: the primary is a filled
   Iris button with --iris-ink text, the header CTA an Iris outline. The
   secondary stays quiet, on a raised panel with a clear edge.
   -------------------------------------------------------------------------- */
:root { --cta: var(--brand); --cta-ink: var(--iris-ink); --cta-hover: var(--brand-soft); }

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.15rem; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-button);
  letter-spacing: var(--ls-button); text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--line-3); color: var(--n-90); background: var(--panel-02);
  transition: transform var(--dur-base) var(--ease-snap), border-color var(--dur-base), background var(--dur-base);
}
.btn:hover { transform: translateY(-2px); border-color: var(--lilac); }
.btn .arw { transition: transform var(--dur-base) var(--ease-snap); }
.btn:hover .arw { transform: translateX(3px); }
.btn--primary { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); font-weight: 600; }
.btn--primary:hover { border-color: var(--cta-hover); background: var(--cta-hover); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: var(--blur-hud); -webkit-backdrop-filter: var(--blur-hud);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.logo__word { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; font-size: 0.95rem; }
/* (r3) The L3 lockup (Tally Slab A as the E of "Exis"). 28 px of artwork gives a 21.5 px cap
   height. width: auto keeps the file's own ratio, so the L1 lockup is a one-file swap. The
   artwork has 75 units (2 px) of side bearing, taken back on the left so the E sits on the grid. */
.logo__lockup { display: block; height: 28px; width: auto; margin-left: -2px; }
.nav__links { display: flex; gap: 1.6rem; align-items: center; }
.nav__links a {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--n-50);
}
.nav__links a:hover { color: var(--n-90); }
.nav__links .nav__cta {
  color: var(--cta); padding: 0.5rem 0.95rem; border: 1px solid var(--cta); border-radius: var(--radius-pill);
  line-height: 1; transition: background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base);
}
.nav__links .nav__cta:hover { color: var(--cta-ink); background: var(--cta); }
.nav__links .nav__cta[aria-current="page"] { color: var(--cta-ink); background: var(--cta); }

/* --------------------------------------------------------------------------
   Pager. Two modes, chosen in pager.js:
   - "pager": fine pointer, wide screen, motion allowed. Full-screen sections
     move as a stack; scroll builds tension before it advances.
   - "flow": phones, touch, reduced motion. Native scrolling with soft snap.
   Content is always real HTML in the document, so it reads without JS.
   -------------------------------------------------------------------------- */
.mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* The operating-layer illustration: fixed behind every page, placed per section by operating-layer.js */
.layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.sections { position: relative; z-index: 1; }
.section {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 96px 0 96px;
}

html[data-mode="flow"] { scroll-snap-type: y proximity; }
html[data-mode="flow"] .section { scroll-snap-align: start; }

html[data-mode="pager"] body { overflow: hidden; }
html[data-mode="pager"] .view { position: fixed; inset: 0; overflow: hidden; z-index: 1; }
html[data-mode="pager"] .sections { height: 100%; will-change: transform; transition: transform var(--snap-dur) var(--snap-ease); }
:root {
  --pg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* The snap between sections. LOCK_MS in pager.js matches --snap-dur. */
  --snap-dur: 650ms; --snap-ease: cubic-bezier(0.22, 1, 0.36, 1); /* quint out */
  /* The frame: the space between the header and the peek, less a clear gap on each side.
     pager.js measures --frame-top and --frame-bottom; these are the fallbacks. */
  --frame-top: 68px; --frame-bottom: 70px; --frame-gap: 24px;
}
/* Frame lock: every section centres its content in the frame. If the content is taller than the
   frame, pager.js sets --fit (0.82 to 1) on that section and the type and spacing tokens below
   compress: type by --fit, spacing by --fit squared, body text never under 0.86rem. This is real
   layout, not a transform, so story.js measures what is drawn. The pager never falls back to
   flow for height. */
html[data-mode="pager"] .section {
  height: var(--app-vh, 100vh); min-height: 0;
  padding: calc(var(--frame-top) + var(--frame-gap) - var(--optic, 0px)) 0 calc(var(--frame-bottom) + var(--frame-gap) + var(--optic, 0px));
}
html[data-mode="pager"] .section > .wrap { flex: none; }
/* No trailing margin counts toward the centred box */
html[data-mode="pager"] .section > .wrap > :first-child { margin-top: 0; }
html[data-mode="pager"] .section > .wrap > :last-child { margin-bottom: 0; }
/* In transit, content fades out before it reaches the header or the peek label. At rest the
   content sits at least --frame-gap inside these bands, so the mask never touches it. */
html[data-mode="pager"] .view {
  -webkit-mask-image: linear-gradient(transparent 0, #000 var(--frame-top), #000 calc(100% - var(--frame-bottom)), transparent 100%);
          mask-image: linear-gradient(transparent 0, #000 var(--frame-top), #000 calc(100% - var(--frame-bottom)), transparent 100%);
}
/* Screen reader announcement of each move */
.pager-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-mode="pager"] .section { --fit2: calc(var(--fit, 1) * var(--fit, 1)); --title-gap: calc(2.4rem * var(--fit2)); }
html[data-mode="pager"] .hero h1 { font-size: calc(clamp(2.7rem, 6.2vw, 5.4rem) * var(--fit, 1)); }
html[data-mode="pager"] .hero__sub { margin-top: calc(1.9rem * var(--fit2)); font-size: max(1rem, calc(clamp(1.08rem, 1.6vw, 1.3rem) * var(--fit, 1))); }
html[data-mode="pager"] .hero__act { margin-top: calc(2.3rem * var(--fit2)); }
html[data-mode="pager"] .status { margin-top: calc(3.2rem * var(--fit2)); }
html[data-mode="pager"] .title { font-size: calc(clamp(2rem, 4.4vw, 3.4rem) * var(--fit, 1)); }
html[data-mode="pager"] .approach__why { font-size: max(0.92rem, calc(var(--fs-lead) * var(--fit, 1))); }
html[data-mode="pager"] .principles li { padding: calc(1.15rem * var(--fit2)) 0; }
html[data-mode="pager"] .principles h3 { font-size: max(1rem, calc(1.18rem * var(--fit, 1))); }
html[data-mode="pager"] .principles p { font-size: max(0.86rem, calc(0.96rem * var(--fit, 1))); }
html[data-mode="pager"] .areas li { padding: calc(1.05rem * var(--fit2)) 0; }
html[data-mode="pager"] .areas h3 { font-size: max(1rem, calc(1.22rem * var(--fit, 1))); }
html[data-mode="pager"] .areas p { font-size: max(0.86rem, calc(0.96rem * var(--fit, 1))); }
html[data-mode="pager"] .more { margin-top: calc(1.8rem * var(--fit2)); }
html[data-mode="pager"] .split { gap: calc(4rem * var(--fit2)); }
html[data-mode="pager"] .split h2 { font-size: calc(clamp(1.7rem, 3vw, 2.4rem) * var(--fit, 1)); margin-bottom: calc(1.2rem * var(--fit2)); }
html[data-mode="pager"] .start h2 { font-size: calc(clamp(2.4rem, 5.6vw, 4.4rem) * var(--fit, 1)); margin-bottom: calc(2.4rem * var(--fit2)); }
html[data-mode="pager"] .path { padding: calc(1.6rem * var(--fit2)); }
html[data-mode="pager"] .footer { margin-top: calc(3rem * var(--fit2)); }
/* Keep content clear of the labelled rail */
@media (min-width: 1101px) { html[data-mode="pager"] .section .wrap { width: min(1040px, 100vw - 384px); } }
/* 1024 to 1100 wide: rail labels hide, so the content keeps clear of the rail dots */
@media (max-width: 1100px) { html[data-mode="pager"] .section .wrap { width: min(90vw, 100vw - 128px); } }
/* Short pager screens (laptops): tie the vertical rhythm to height so Approach fits */
@media (max-height: 900px) {
  html[data-mode="pager"] .section { --title-gap: calc(clamp(1.2rem, 3vh, 2.4rem) * var(--fit2)); }
  html[data-mode="pager"] .label { margin-bottom: clamp(0.7rem, 1.4vh, 1.1rem); }
  html[data-mode="pager"] .title { font-size: calc(clamp(2rem, min(4.4vw, 6.2vh), 3.4rem) * var(--fit, 1)); }
  html[data-mode="pager"] .approach__why { font-size: max(0.92rem, calc(1rem * var(--fit, 1))); }
  html[data-mode="pager"] .principles { column-gap: 2.25rem; }
  html[data-mode="pager"] .principles li { padding: calc(clamp(0.55rem, 1.2vh, 1.15rem) * var(--fit2)) 0; }
  html[data-mode="pager"] .principles p { line-height: 1.45; }
  html[data-mode="pager"] .areas li { padding: calc(clamp(0.7rem, 1.4vh, 1.05rem) * var(--fit2)) 0; }
  html[data-mode="pager"] .start h2 { margin-bottom: calc(clamp(1.4rem, 3.2vh, 2.4rem) * var(--fit2)); }
}

/* Entrance animation for the active section (pager mode only) */
/* One motion per snap: opacity only, no rise, starting 45 percent into the snap */
html[data-mode="pager"] .anim { opacity: 0; transition: opacity 240ms linear; }
html[data-mode="pager"] .section[data-active="true"] .anim { opacity: 1; transition-delay: calc(var(--snap-dur) * 0.45); }

/* ---- Section rail: labelled, clickable, shows where you are ---- */
.rail {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 25;
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.rail button {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-coord); letter-spacing: var(--ls-coord);
  text-transform: uppercase; color: var(--n-50);
  transition: color var(--dur-base);
}
.rail button .no { color: var(--n-50); }
.rail button i {
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--n-40); flex: none;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-snap);
}
.rail button:hover { color: var(--n-70); }
.rail button:hover i { border-color: var(--n-70); transform: scale(1.2); }
.rail button[aria-current="true"] { color: var(--n-90); }
.rail button[aria-current="true"] .no { color: var(--nominal); }
.rail button[aria-current="true"] i { background: var(--nominal); border-color: var(--nominal); box-shadow: 0 0 9px var(--nominal-dim); }

/* ---- Next-section peek: says what is below and fills with scroll tension ---- */
.peek {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 25;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.45rem;
  background: none; border: 0; cursor: pointer; padding: 0.4rem 0.6rem;
  font-family: var(--font-mono); font-size: var(--fs-coord); letter-spacing: var(--ls-coord);
  text-transform: uppercase; color: var(--n-50);
  transition: opacity var(--dur-slow), color var(--dur-base);
}
.peek:hover { color: var(--n-90); }
.peek__row { display: inline-flex; gap: 0.6rem; align-items: center; }
.peek__name { color: var(--n-90); }
.peek__arw { animation: bob 2.2s ease-in-out infinite; }
.peek__bar { width: 120px; height: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; }
.peek__bar i { display: block; height: 100%; background: var(--nominal); transform: scaleX(0); transform-origin: left; transition: transform 120ms linear; }
.peek[hidden] { display: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---- First-visit hint ---- */
.hint {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 26;
  padding: 0.55rem 0.85rem; border: 1px solid var(--line-2); border-radius: var(--radius-xs);
  background: rgba(10, 11, 12, 0.85); backdrop-filter: var(--blur-hud); -webkit-backdrop-filter: var(--blur-hud);
  font-family: var(--font-mono); font-size: var(--fs-coord); letter-spacing: var(--ls-coord);
  text-transform: uppercase; color: var(--n-70); white-space: nowrap;
  transition: opacity 0.6s var(--pg-ease), transform 0.6s var(--pg-ease);
}
.hint[data-gone="true"] { opacity: 0; transform: translate(-50%, 6px); pointer-events: none; }
.hint kbd { font-family: inherit; color: var(--nominal); }

/* First-visit hint takes the peek's slot while it shows */
html[data-mode="pager"] .hint { bottom: 18px; }
html[data-mode="pager"] body:has(.hint:not([data-gone="true"])) .peek { opacity: 0; pointer-events: none; }

html[data-mode="flow"] .rail,
html[data-mode="flow"] .peek,
html[data-mode="flow"] .hint { display: none; }

/* --------------------------------------------------------------------------
   Focus areas preview
   -------------------------------------------------------------------------- */
.areas { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.areas li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.2rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.areas h3 { font-size: 1.22rem; letter-spacing: -0.02em; }
.areas p { color: var(--n-50); font-size: 0.96rem; }
.areas p b { font-weight: 500; color: var(--n-70); }
.more { margin-top: 1.8rem; }

/* --------------------------------------------------------------------------
   Perspective + How Exis works
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: start; }
.split h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 1.2rem; }
.split p { color: var(--n-70); font-size: 1.05rem; max-width: 46ch; }
.split .more { margin-top: 1.6rem; }
.soon { display: inline-flex; gap: 0.5rem; align-items: center; color: var(--nominal); }
.soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--nominal); }

/* --------------------------------------------------------------------------
   Start (closing band) + footer
   -------------------------------------------------------------------------- */
.start { flex-direction: column; justify-content: center; align-items: stretch; }
.start h2 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); letter-spacing: -0.035em; margin: 0 0 2.4rem; }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.path { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--fill-hud); }
.path h3 { font-size: 1.35rem; margin: 0 0 0.6rem; }
.path p { color: var(--n-70); margin: 0 0 1.4rem; max-width: 40ch; }
.footer {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 2.2rem 1.6rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-coord); letter-spacing: var(--ls-coord);
  text-transform: uppercase; color: var(--n-50);
}
.footer a { color: var(--n-50); text-decoration: none; }
.footer a:hover { color: var(--n-90); }
.footer nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .rail button span { display: none; }
}
@media (max-width: 820px) {
  .wrap { width: min(100% - 40px, 560px); }
  .nav .wrap { height: 60px; }
  .nav__links a:not(.nav__cta):not(.nav__home) { display: none; }
  .nav__links { gap: 1rem; }
  .nav__links .nav__cta { padding: 0.45rem 0.75rem; letter-spacing: 0.06em; }
  .section { padding: 84px 0 64px; }
  .split, .paths { grid-template-columns: 1fr; }
  .split { gap: 2.6rem; }
  .areas li { grid-template-columns: 2rem 1fr; }
  .areas li p { grid-column: 2; }
}

/* ==========================================================================
   Inner pages (Focus Areas, Perspective, Contact, 404). Normal document
   flow; the pager is Home only.
   ========================================================================== */
.page main { position: relative; z-index: 1; padding: 148px 0 96px; }
.page-head { max-width: 760px; margin-bottom: 3.6rem; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; }
.page-head .lead { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--n-70); max-width: 56ch; }
.nav__links a[aria-current="page"] { color: var(--n-90); }

/* Focus Areas */
.area-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.area { display: grid; grid-template-columns: 2.4rem minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 1.4rem 2rem; padding: 2.2rem 0; border-top: 1px solid var(--line); }
.area .no { font-family: var(--font-mono); font-size: var(--fs-coord); letter-spacing: 0.08em; color: var(--n-50); padding-top: 0.5rem; }
.area h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.025em; }
.area .q { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.4; color: var(--n-90); margin-bottom: 0.9rem; }
.area .q span { display: block; margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: var(--fs-coord); letter-spacing: var(--ls-coord); text-transform: uppercase; color: var(--nominal); }
.area p { color: var(--n-50); max-width: 60ch; }
.close { margin-top: 3.4rem; display: flex; gap: 1.2rem 2rem; align-items: center; flex-wrap: wrap; }
.close p { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; letter-spacing: -0.02em; }

/* Perspective (coming soon) and 404 */
.soon-panel { max-width: 640px; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--fill-hud); }
.soon-panel p { color: var(--n-70); margin-bottom: 1.4rem; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 3rem; align-items: start; }
.form { padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--fill-hud); }
.form fieldset { border: 0; margin: 0 0 1.6rem; padding: 0; }
.form legend, .form label { display: block; margin-bottom: 0.55rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--n-50); }
.form .opt { color: var(--n-50); text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.intents { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.intent { position: relative; }
.intent input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.intent span {
  display: block; padding: 0.95rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--n-70);
  transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}
.intent span small { display: block; margin-top: 0.2rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--n-50); font-weight: 400; }
.intent input:checked + span { border-color: var(--nominal); background: var(--nominal-dim); color: var(--n-90); }
.intent input:focus-visible + span { outline: 2px solid var(--nominal); outline-offset: 2px; }
.field { margin-bottom: 1.2rem; }
.field input, .field textarea {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--line-2); border-radius: var(--radius-xs);
  background: var(--panel-00); color: var(--n-90); font: inherit; font-size: 1rem;
  transition: border-color var(--dur-base);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--nominal); }
.field input[aria-invalid="true"] { border-color: var(--caution); }
.field .err { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--caution); }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-foot { display: flex; gap: 1rem 1.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.form-foot .privacy { font-size: 0.88rem; color: var(--n-50); }
.form button[disabled] { opacity: 0.6; cursor: progress; }
.form-status { margin-top: 1.2rem; font-size: 0.95rem; color: var(--n-70); }
.form-status[data-kind="error"] { color: var(--caution); }
.form-status a { color: var(--n-90); }
.sent { padding: 2rem; border: 1px solid var(--nominal); border-radius: var(--radius); background: var(--nominal-dim); }
.sent h2 { font-size: 1.6rem; margin-bottom: 0.7rem; }
.sent p { color: var(--n-70); }
.aside h2 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.aside p { color: var(--n-50); margin-bottom: 1.3rem; }
.aside + .aside { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }

.page .footer { margin-top: 5rem; }

@media (max-width: 820px) {
  .page main { padding: 112px 0 72px; }
  .page-head { margin-bottom: 2.4rem; }
  .area { grid-template-columns: 2rem 1fr; gap: 0.8rem 1rem; padding: 1.7rem 0; }
  .area > div { grid-column: 2; }
  .contact, .fields-2 { grid-template-columns: 1fr; }
  .contact { gap: 2.4rem; }
  .form { padding: 1.4rem; }
  .intents { grid-template-columns: 1fr; }
}
.aside p a { color: var(--n-90); }
.split .more { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.form .intent { margin: 0; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; color: inherit; }

/* --------------------------------------------------------------------------
   Logo mark "Profile" (brand-v2): a survey stake through three soil
   horizons of unequal depth. Iris only; mint is reserved for signal.
   -------------------------------------------------------------------------- */
:root { --mark-a: var(--brand); }
.mark__a { fill: var(--mark-a); }

/* Review fixes: section focus, visible input focus, reduced motion */
.section:focus, .view:focus { outline: none; }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 3px var(--nominal-dim); }
.field input, .field textarea { border-color: var(--line-3); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arw, .peek__arw, .rail button i, .nav__links .nav__cta { transition: none !important; animation: none !important; }
  .btn:hover, .btn:hover .arw { transform: none; }
}


/* Long-form text (privacy) */
.prose { max-width: 720px; }
.prose h2 { font-size: 1.3rem; margin: 2.4rem 0 0.8rem; }
.prose p, .prose li { color: var(--n-70); line-height: 1.65; }
.prose p + p { margin-top: 0.9rem; }
.prose ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }
.prose a { color: var(--n-90); }
.prose b { color: var(--n-90); font-weight: 600; }
.ph { color: var(--caution); }
.form-foot .privacy a { color: var(--n-70); }


/* Pause control (brand-v2, WCAG 2.2.2) */
/* (v4 r2) It sits just under the animating graphic, in a [data-pause-slot] the page provides
   (Home: under the hero roots). With no slot, site.js parks it at the taproot foot. */
.motion-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 6px 10px 6px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: rgba(5, 5, 5, 0.72); color: var(--n-70); font: 500 var(--fs-coord)/1 var(--font-mono); letter-spacing: var(--ls-coord); text-transform: uppercase; cursor: pointer; transition: color var(--dur-base), border-color var(--dur-base); }
.motion-toggle svg { width: 12px; height: 12px; flex: none; }
.motion-toggle:hover { color: var(--text-strong); border-color: var(--line-3); }
.motion-toggle[aria-pressed="true"] { color: var(--nominal); border-color: var(--nominal); }
.pause-slot { display: flex; justify-content: center; min-height: 26px; }
.pause-slot:empty { min-height: 0; }
.motion-toggle--foot { position: fixed; z-index: 30; bottom: 18px; left: max(12px, calc(var(--ledger-margin, 140px) / 2)); transform: translateX(-50%); }


/* ==========================================================================
   Home v4: Ledger of the Field (concept 3). Owner: Home.
   The taproot margin and the root-to-rule motion belong to the ledger
   engine (ledger.css, ledger.js). This block sets the ledger grid, the
   entry rules, the three figures (Fig. 1 Intro, Fig. 4 Perspective,
   Fig. 5 Start) and the folio rail. It overrides the shared pager
   sizing rules above by specificity (.home), so the pager block stays
   untouched. Iris appears only in moving answer pulses here.
   ========================================================================== */
:root {
  --ledger-margin: clamp(120px, 14vw, 210px); /* the fixed taproot margin; ledger.css may override */
  --ledger-gap: 72px;                          /* margin rule to text */
  --ledger-rail: 230px;                        /* folio rail reserve on the right */
  --ledger-max: 920px;
  --rule-1: rgba(255, 255, 255, 0.24);
  --rule-2: rgba(255, 255, 255, 0.12);
}
.home .section { --fit2: calc(var(--fit, 1) * var(--fit, 1)); --fig-w: calc(clamp(260px, 27vw, 380px) * var(--fit, 1)); }

/* ---- The ledger column ---- */
html[data-mode="pager"] .home .section > .wrap.ledger {
  width: min(var(--ledger-max), 100vw - var(--ledger-margin) - var(--ledger-gap) - var(--ledger-rail));
  margin-left: calc(var(--ledger-margin) + var(--ledger-gap) + max(0px, (100vw - var(--ledger-margin) - var(--ledger-gap) - var(--ledger-rail) - var(--ledger-max)) / 2));
  margin-right: 0;
}
@media (max-width: 1100px) { :root { --ledger-gap: 56px; --ledger-rail: 72px; } }

.home .label { margin: 0 0 calc(1rem * var(--fit2, 1)); color: var(--n-50); }
.home .title { font-size: calc(clamp(2rem, 3.6vw, 3.1rem) * var(--fit, 1)); letter-spacing: -0.03em; margin: 0; max-width: 22ch; }
html[data-mode="pager"] .home .title { font-size: calc(clamp(2rem, min(3.6vw, 5.4vh), 3.1rem) * var(--fit, 1)); margin: 0; }

/* Entry: the one ruled line per section that the root tip straightens into. It always ends
   in a hollow market node, so it reads as a route, not a divider. */
.entry { position: relative; height: 1px; background: var(--rule-1); margin: calc(1.3rem * var(--fit2, 1)) 0 calc(1.5rem * var(--fit2, 1)); }
.entry__mk { position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; border: 1px solid rgba(255, 255, 255, 0.42); background: var(--bg); }
/* The accountant's double rule: the total line (Intro only) */
.entry--double { height: 6px; background: none; border-top: 1px solid var(--rule-1); border-bottom: 1px solid var(--rule-2); }
.entry--double .entry__mk { top: -2px; }
.entry-text { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--n-70); line-height: 1.42;
  font-size: calc(clamp(1.12rem, 1.45vw, 1.34rem) * var(--fit, 1)); max-width: 46ch; margin-top: calc(1.1rem * var(--fit2, 1)); }
.entry-text__k { font: 500 var(--fs-coord)/1 var(--font-mono); font-style: normal; letter-spacing: var(--ls-coord); text-transform: uppercase; color: var(--nominal); vertical-align: 0.2em; margin-right: 0.3rem; }

/* Text links (mono, ink): the quiet action */
.textlink { display: inline-flex; gap: 0.5rem; align-items: center; padding-bottom: 5px; margin-right: 1.6rem; border-bottom: 1px solid var(--line-3);
  font: 400 var(--fs-button)/1.2 var(--font-mono); letter-spacing: var(--ls-button); text-transform: uppercase; color: var(--lilac); text-decoration: none; transition: border-color var(--dur-base); }
.textlink { border-bottom-color: rgba(138, 132, 255, 0.55); }
.textlink:hover { border-color: var(--lilac); }
.textlink .arw { transition: transform var(--dur-base) var(--ease-snap); }
.textlink:hover .arw { transform: translateX(3px); }

/* ---- Ledger rows (Approach, Focus) ---- */
.rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.rows > li { display: grid; column-gap: 1.6rem; align-items: baseline; padding: calc(0.95rem * var(--fit2, 1)) 0; border-top: 1px solid var(--line); }
.rows .no { position: relative; font: 400 var(--fs-coord)/1 var(--font-mono); letter-spacing: 0.08em; color: var(--n-50); font-variant-numeric: tabular-nums; }
/* the numeral column carries a short ruled tick, where a lateral would meet the row */
.rows .no::before { content: ""; display: inline-block; width: 10px; height: 1px; margin-right: 0.55rem; vertical-align: 0.3em; background: var(--line-3); }
.rows h3 { font-size: max(1rem, calc(1.06rem * var(--fit, 1))); letter-spacing: -0.015em; line-height: 1.3; }
.rows p { color: var(--n-50); font-size: max(0.9rem, calc(0.97rem * var(--fit, 1))); line-height: 1.5; }

.rows--approach > li { grid-template-columns: 3.2rem minmax(0, 15.5rem) minmax(0, 1fr); }
@media (max-width: 1100px), (max-height: 760px) { .rows--approach > li { grid-template-columns: 2.9rem minmax(0, 11rem) minmax(0, 1fr); column-gap: 1.2rem; } }
.rows--approach p { max-width: 72ch; line-height: 1.45; }
#approach .title { max-width: none; }

/* (r2) Approach rows: a size up, and one key word per title in lilac */
.rows--approach h3 { font-size: max(1.08rem, calc(1.24rem * var(--fit, 1))); letter-spacing: -0.02em; }
.rows--approach p { font-size: max(0.92rem, calc(1.01rem * var(--fit, 1))); }
.rows--approach .no { color: var(--n-70); }

/* (r2) Focus: a large mint icon column, larger area names, quieter questions */
.cols, .rows--focus > li { display: grid; grid-template-columns: 3rem calc(48px * var(--fit, 1)) minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 1.4rem; }
.rows--focus > li { align-items: center; }
.cols { padding-bottom: calc(0.6rem * var(--fit2, 1)); font: 400 var(--fs-coord)/1 var(--font-mono); letter-spacing: var(--ls-coord); text-transform: uppercase; color: var(--n-50); }
.cols span:nth-child(4) { color: var(--nominal); }
.rows--focus .fi { display: block; width: calc(48px * var(--fit, 1)); height: calc(48px * var(--fit, 1)); color: var(--nominal); }
.rows--focus .fi svg { display: block; width: 100%; height: 100%; }
.rows--focus h3 { font-size: max(1.12rem, calc(1.42rem * var(--fit, 1))); letter-spacing: -0.022em; line-height: 1.2; }
.rows--focus p { color: var(--n-70); font-size: max(0.9rem, calc(0.97rem * var(--fit, 1))); }
.rows--focus .q { display: block; }
@media (min-width: 821px) { .rows--focus .q::first-letter { text-transform: uppercase; } }
.rows--focus p b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home .more { margin-top: calc(1.6rem * var(--fit2, 1)); }

/* ---- Figures: shared ---- */
.fig { margin: 0; }
/* (r2) No visible figure captions: every figure keeps its accessible name in aria-label. */
.fig figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fig4, .fig5__knot { display: block; overflow: visible; }
/* --fig-fs is set by site.js so labels render at 11.5 px or more whatever the figure's scale */
.fig4 text { font: 400 var(--fig-fs, 12px) var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--n-50); }
.fig4 text.on { fill: var(--n-90); }
.node { fill: var(--nominal); }
.halo { fill: none; stroke: var(--nominal); stroke-width: 1; opacity: 0.45; }
/* The answer pulse: a short Iris dash that runs once on entry, then is gone. Never at rest. */
.pulse { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.07 2; stroke-dashoffset: 0.07; opacity: 0; }
.fig5 .pulse { vector-effect: non-scaling-stroke; }

/* ---- f.01 Intro (v4 r2): copy on the left, the hero roots filling the right ----
   The double rule spans both columns, so the engine's entry line runs under the headline and
   on through the hero, where it can meet the figure's operating layer. */
html[data-mode="pager"] .home #intro > .wrap.ledger {
  width: min(1080px, 100vw - var(--ledger-margin) - var(--ledger-gap) - var(--ledger-rail));
  margin-left: calc(var(--ledger-margin) + var(--ledger-gap) + max(0px, (100vw - var(--ledger-margin) - var(--ledger-gap) - var(--ledger-rail) - 1080px) / 2));
}
.intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: calc(3rem * var(--fit, 1));
  grid-template-areas: "head fig" "rule fig" "body fig"; align-items: end; }
.intro__head { grid-area: head; padding-bottom: calc(1.3rem * var(--fit2, 1)); container-type: inline-size; }
.intro__rule { grid-area: rule; margin: 0; }
.intro__body { grid-area: body; align-self: start; padding-top: calc(1.1rem * var(--fit2, 1)); }
.intro__fig { grid-area: fig; align-self: stretch; display: flex; flex-direction: column; gap: calc(0.9rem * var(--fit2, 1)); min-width: 0; }
/* Narrower pager screens: the copy column takes more, so the label and status stay on one line */
@media (max-width: 1399px) and (min-width: 821px) { .intro { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); } }
/* contain: size, so the drawn figure never props the row open; the copy column sets the height */
.hero-roots { position: relative; flex: 1 1 auto; contain: size; min-height: calc(min(440px, 46vh) * var(--fit2, 1)); }
/* The sub sits close under the double rule: no inherited pager margin on top of the body padding */
html[data-mode] .home .hero__sub { margin-top: 0; }
/* H1 (r2): oversized; it takes the copy column's width (container units), capped by height */
.home .hero h1 { font-size: calc(clamp(2.8rem, 16.4cqi, 6rem) * var(--fit, 1)); line-height: 0.98; letter-spacing: -0.04em; max-width: none; text-wrap: wrap; }
html[data-mode="pager"] .home .hero h1 { font-size: calc(clamp(2.6rem, min(16.4cqi, 9.4vh), 6rem) * var(--fit, 1)); }
.home .hero__sub { margin: 0; font-size: max(1rem, calc(clamp(1.02rem, 1.3vw, 1.18rem) * var(--fit, 1))); line-height: 1.55; color: var(--n-70); max-width: 44ch; }
.home .hero__act { margin-top: calc(1.6rem * var(--fit2, 1)); display: flex; gap: 0.8rem; flex-wrap: wrap; }
.home .status { margin-top: calc(1.6rem * var(--fit2, 1)); display: flex; gap: 0.5rem 1.6rem; flex-wrap: wrap; font: 400 var(--fs-coord)/1.4 var(--font-mono); letter-spacing: var(--ls-coord); text-transform: uppercase; color: var(--n-50); }
.home .status span { display: inline-flex; gap: 0.5rem; align-items: center; }
.home .status i { width: 6px; height: 6px; border-radius: 50%; background: var(--nominal); }

/* Colour for contrast (r2): one key word per title. Iris on the hero, lilac elsewhere. */
.hl { color: var(--lilac); }
.home .hero h1 .hl { color: var(--brand); }

/* ---- f.04 Perspective (r2): how each piece is built. A claim stake on the record line, its
   roots to what it rests on, and a dashed line to an open station: what would change our mind. ---- */
#perspective { --fig-w: calc(clamp(280px, 31vw, 450px) * var(--fit, 1)); }
.persp { display: grid; grid-template-columns: minmax(0, 1fr) var(--fig-w); column-gap: calc(3.4rem * var(--fit, 1));
  grid-template-areas: "head up" "rule rule" "body lo"; align-items: end; }
.persp__head { grid-area: head; padding-bottom: calc(1.3rem * var(--fit2, 1)); }
.persp__head h2 { font-size: calc(clamp(1.9rem, 3vw, 2.6rem) * var(--fit, 1)); letter-spacing: -0.03em; max-width: 18ch; }
.persp__rule { grid-area: rule; margin: 0; }
.persp__body { grid-area: body; align-self: start; padding-top: calc(1.5rem * var(--fit2, 1)); }
.fig4--up { grid-area: up; width: 100%; height: auto; }
.fig4-lo { grid-area: lo; align-self: start; }
.fig4-lo .fig4 { width: 100%; height: auto; }
.home .soon { display: inline-block; margin-left: 0.7rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line-2); border-radius: var(--radius-pill); color: var(--n-70); letter-spacing: 0.12em; }
.home .soon::before { content: none; }
.persp .more { margin: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 0; }
.led { margin-top: calc(2.2rem * var(--fit2, 1)); padding-top: calc(1.4rem * var(--fit2, 1)); border-top: 1px solid var(--line); }
.led h3 { font-size: calc(1.5rem * var(--fit, 1)); letter-spacing: -0.02em; margin-bottom: calc(0.6rem * var(--fit2, 1)); }
.led p:not(.label) { color: var(--n-70); font-size: max(0.94rem, calc(1rem * var(--fit, 1))); line-height: 1.55; max-width: 54ch; }
.fig4 .stake { fill: var(--panel-01); stroke: var(--n-70); stroke-width: 1.5; }
.fig4 .node--iris { fill: var(--brand); }
.fig4 .test { fill: none; stroke: var(--lilac); stroke-width: 1.2; stroke-dasharray: 3 4; stroke-linecap: round; opacity: 0.85; }
.fig4 .station { fill: var(--bg); stroke: var(--lilac); stroke-width: 1.5; }
.fig4 .r { fill: none; stroke-linecap: round; }
.fig4 .r0 { stroke: rgba(201, 206, 210, 0.55); stroke-width: 1.4; }
.fig4 .r1 { stroke: rgba(201, 206, 210, 0.3); stroke-width: 1; }
.fig4 text.on { fill: var(--n-90); }

/* ---- f.05 Start: two cards and the nodule handshake ---- */
.home .start h2.title { font-size: calc(clamp(2.2rem, 4vw, 3.4rem) * var(--fit, 1)); }
.home .paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.home .path { padding: calc(1.5rem * var(--fit2, 1)) calc(1.6rem * var(--fit2, 1)); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel-00); }
.home .path h3 { font-size: calc(1.35rem * var(--fit, 1)); margin: 0 0 calc(0.5rem * var(--fit2, 1)); }
.home .path p { color: var(--n-70); margin: 0 0 calc(1.2rem * var(--fit2, 1)); max-width: 40ch; font-size: max(0.94rem, calc(1rem * var(--fit, 1))); }
.fig5 { position: relative; height: calc(84px * var(--fit2, 1)); }
.fig5__lines { position: absolute; left: 0; top: 0; width: 100%; height: calc(80px * var(--fit2, 1)); overflow: visible; }
.fig5 .ln { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fig5 .ln--mint { stroke: var(--nominal); opacity: 0.7; }
.fig5__knot { position: absolute; left: 50%; top: calc(62px * var(--fit2, 1)); width: 40px; height: 40px; transform: translate(-50%, -50%); }
.fig5 .curl { fill: none; stroke: var(--n-70); stroke-width: 1.4; stroke-linecap: round; opacity: 0.75; }
/* (r2) The contact block: pushed to the foot of the view, items set apart by ruled gaps, the
   address in lilac (r3: one row, no seed tag). */
html[data-mode="pager"] .home .start > .wrap { flex: 1 0 auto; display: flex; flex-direction: column; }
html[data-mode="pager"] .home .start > .wrap > .label { margin-top: auto; }
html[data-mode="pager"] .home .start .contact-block { margin-top: auto; }
.home .start .fig5 { margin-bottom: calc(1.6rem * var(--fit2, 1)); }
.home .footer.contact-block { padding-top: calc(1.3rem * var(--fit2, 1)); border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.contact-block__mail { color: var(--lilac) !important; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: none; padding-bottom: 3px; border-bottom: 1px solid rgba(201, 194, 255, 0.4); }
.contact-block__mail:hover { border-color: var(--lilac); }
.contact-block nav { gap: 0; }
.contact-block nav a { padding: 0.15rem 0.85rem; border-left: 1px solid var(--line-2); color: var(--n-70); }
.contact-block nav a:first-child { border-left: 0; padding-left: 0; }
.contact-block nav a:last-child { padding-right: 0; }

/* ---- Entrances: each figure moves once (under 3 s), then rests. The rest state is the
   default style, so reduced motion, the pause control and no JS all show the still. ---- */
@keyframes lg-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
@keyframes lg-in { from { opacity: 0; } }
@keyframes lg-pulse { 0% { opacity: 0; stroke-dashoffset: 0.07; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes lg-fit { from { transform: translate(40px, 18px); opacity: 0.35; } }
@media (prefers-reduced-motion: no-preference) {

  html:not([data-motion="paused"]) .section[data-active="true"] .fig4 .r { animation: lg-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig4 .r1 { animation-delay: 800ms; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig4 .node { animation: lg-in 400ms ease-out 1100ms both; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig4 .test { animation: lg-in 500ms linear 1300ms both; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig4 .pulse { animation: lg-pulse 900ms cubic-bezier(0.4, 0, 0.2, 1) 1500ms both; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig4 .station { animation: lg-in 400ms ease-out 2300ms both; }

  html:not([data-motion="paused"]) .section[data-active="true"] .fig5 .ln--mint { animation: lg-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig5 .ln:not(.ln--mint) { animation: lg-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) 600ms both; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig5 .pulse { animation: lg-pulse 900ms cubic-bezier(0.22, 1, 0.36, 1) 600ms both; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig5 .curl { animation: lg-draw 500ms ease-out 1500ms both; }
  html:not([data-motion="paused"]) .section[data-active="true"] .fig5 .node,
  html:not([data-motion="paused"]) .section[data-active="true"] .fig5 .halo { animation: lg-in 400ms ease-out 1900ms both; }
}

/* ---- Folio rail (ledger style): a ruled tick, the folio number, the name. The ticks share
   one left edge, so they align in a single column at every width. ---- */
.home .rail { right: 24px; gap: 0; align-items: stretch; }
.home .rail button { flex-direction: row-reverse; justify-content: flex-end; gap: 0.6rem; width: 100%; padding: 5px 0; color: var(--n-50); }
.home .rail button .no { order: 0; color: var(--n-50); }
.home .rail button .no::before { content: "f."; }
/* Ticks are the kit's folio-rail masks: assets/kit/elements/rail/rail-tick*.svg */
.home .rail button i { width: 24px; height: 12px; border: 0; border-radius: 0; background: var(--n-50); box-shadow: none; transition: background var(--dur-base);
  -webkit-mask: url(/assets/kit/elements/rail/rail-tick.svg) center / contain no-repeat; mask: url(/assets/kit/elements/rail/rail-tick.svg) center / contain no-repeat; }
.home .rail button:hover i { transform: none; background: var(--n-70); }
.home .rail button[aria-current="true"] { color: var(--n-90); }
.home .rail button[aria-current="true"] .no { color: var(--nominal); }
.home .rail button[aria-current="true"] i { background: var(--nominal); box-shadow: none; -webkit-mask-image: url(/assets/kit/elements/rail/rail-tick-current.svg); mask-image: url(/assets/kit/elements/rail/rail-tick-current.svg); }
@media (max-width: 1100px) { .home .rail { right: 18px; } .home .rail button { padding: 7px 0; } }

/* ---- Below the pager: tablets and phones (flow mode) ---- */
@media (max-width: 820px) {
  .home .wrap { width: min(100% - 48px, 560px); }
  .home .section { padding: 92px 0 56px; }
  .home .section:first-child { padding-top: 112px; }
  .intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rule" "body" "fig"; }
  .intro__fig { margin-top: 2.4rem; }
  .hero-roots { min-height: 340px; }
  .home .hero h1 { font-size: clamp(2.8rem, 14cqi, 4rem); }
  .persp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "up" "rule" "lo" "body"; }
  .fig4--up, .fig4-lo { max-width: 380px; }
  .persp__head { padding-bottom: 1.6rem; }
  .persp__body { padding-top: 0.6rem; }
  .rows--approach > li { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: 0.4rem; }
  .rows--approach p { grid-column: 2; }
  .cols { display: none; }
  .rows--focus > li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 0.4rem; column-gap: 1rem; }
  .rows--focus .no { display: none; }
  .rows--focus .fi { width: 40px; height: 40px; grid-row: 1 / span 2; align-self: start; }
  .rows--focus p { grid-column: 2; }
  .rows--focus p b { position: static; width: auto; height: auto; clip-path: none; white-space: normal; display: block; font: 400 var(--fs-coord)/1.6 var(--font-mono); letter-spacing: var(--ls-coord); text-transform: uppercase; color: var(--n-50); }
  .home .paths { grid-template-columns: 1fr; gap: 1rem; }
  .fig5 { display: none; }
  .home .footer { margin-top: 2.4rem; }
  .contact-block__id { flex-wrap: wrap; gap: 1rem 1.4rem; }
  .contact-block nav { gap: 0.7rem 1.4rem; }
  .contact-block nav a, .contact-block nav a:first-child { border-left: 0; padding: 0.15rem 0; }
}
/* 360 px: the logo and the nav keep clear space, and the CTA stays on one line */
@media (max-width: 400px) {
  .nav__links .nav__home { display: none; }
  .nav__links .nav__cta { white-space: nowrap; padding: 0.45rem 0.65rem; letter-spacing: 0.05em; }
  .logo { gap: 0.5rem; }
  .logo__lockup { height: 24px; }
  .home .wrap { width: calc(100% - 40px); }
}
.nav__links .nav__cta { white-space: nowrap; }
/* Room under an entry for the engine's ruled line (it sits up to 14 px under the ink) */
html .home .entry-gap.entry-gap { margin-bottom: calc(2.1rem * var(--fit2, 1)); }
/* Intro and Perspective: the entry is an empty spacer in the grid, and the engine runs its line
   through the spacer's middle (double in Intro). The figures reach into the spacer so Fig. 1's
   columns and risers and Fig. 4's split meet that line. Without JS the CSS rule is the fallback. */
.intro__rule, .persp__rule { position: relative; height: 16px; border: 0; background: none; }
.persp__rule { height: 12px; }
.intro__rule::before, .persp__rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule-1); }
.intro__rule::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 5px); height: 1px; background: var(--rule-2); }
.intro__rule .entry__mk, .persp__rule .entry__mk { top: calc(50% - 4px); }
.fig4--up { margin-bottom: -6px; }
.fig4-lo { margin-top: -6px; }
/* The engine draws the rule and the market node when it runs */
html.ledger-live .entry, html.ledger-live .entry::before, html.ledger-live .entry::after { background: none; border-color: transparent; }
html.ledger-live .entry::before, html.ledger-live .entry::after, html.ledger-live .entry__mk { display: none; }
/* Approach is the densest frame: on short pager screens the rows tighten and the Why line runs wider */
#approach .entry-text { max-width: 62ch; }
@media (max-height: 760px) {
  html[data-mode="pager"] .rows--approach > li { padding: calc(0.56rem * var(--fit2, 1)) 0; }
  html[data-mode="pager"] .rows--approach p { line-height: 1.38; }
}

/* ---- (r3) Jordan's round 2 PDF comments ----
   R2: no static line directly under an animated entry rule. The first ledger row loses its
   top border (Approach, Focus); the rows keep their dividers and the closing rule. */
.home [data-ledger-entry] ~ .rows > li:first-child,
.home [data-ledger-entry] ~ .cols + .rows > li:first-child { border-top: 0; }
/* R8: the two boxes (and their handshake figure) sit centred in the space between the entry
   rule and the contact row: equal free space above the boxes and below the figure. */
html[data-mode="pager"] .home .start .paths { margin-top: auto; }
/* R9: the contact row is one row: the address, then the links. No seed tag, no "Record". */
.home .footer.contact-block { justify-content: flex-start; gap: 0 2rem; flex-wrap: nowrap; }
.home .contact-block nav { flex-wrap: nowrap; padding-left: 2rem; border-left: 1px solid var(--line-2); }
.home .contact-block nav a { white-space: nowrap; }
@media (max-width: 1280px) {
  .home .footer.contact-block { gap: 0 1.4rem; }
  .home .contact-block nav { padding-left: 1.4rem; }
  .home .contact-block nav a { padding: 0.15rem 0.6rem; letter-spacing: 0.08em; }
}
@media (max-width: 820px) {
  .home .footer.contact-block { flex-wrap: wrap; gap: 1rem 0; }
  .home .contact-block nav { flex-wrap: wrap; padding-left: 0; border-left: 0; width: 100%; }
}