/* ════════════════════════════════════════════════════════════════════════
   realityreach.com — the corporate site.

   One sheet, drawn like an engineering drawing: a grey micro-grid on white,
   two rails that run the full height of the page, hairlines between sections
   with a registration cross where they meet the rails, and L-cornered plates
   for every figure. Type and measures are CapWatch's (frontend-system tokens):
   Instrument Sans for the voice, DM Mono for the annotations. Nothing is set
   heavier than Medium 500.

   No external dependencies: fonts are self-hosted, nothing is fetched.
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --bg-2: #fafafa;
  --ink-1: #0a0a0a;
  --ink-2: #404040;
  --ink-3: #737373;
  --ink-4: #a3a3a3;
  --ink-5: #d4d4d4;
  --line: #e5e5e5;
  --line-strong: #d4d4d4;
  --grid: rgba(10, 10, 10, 0.045);
  --grid-major: rgba(10, 10, 10, 0.08);
  --cross: #a3a3a3;
  --corner: #0a0a0a;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* The sheet: rails sit --rail in from the viewport edge (until the sheet
     reaches its maximum), content sits --inset in from the rails. */
  /* Notched phones in landscape: the rails never sit inside the safe area. */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Sticky stages fill the large viewport (toolbars retracted) so no band
     opens at the screen's edge on scroll; their content stays within the
     small viewport, clear of the toolbars and the home indicator. */
  --toolbar: 0px;
  --stage-foot: max(var(--safe-bottom), var(--toolbar));
  --rail: max(10px, var(--safe-x));
  --inset: 14px;
  --sheet: 1360px;
  --header: 56px;
  --section: 96px;
  --gutter: 16px;
  --arm: 10px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* The grid tiles (8 px minor, 40 px major) and the registration crosses
     (every 160 px). Light and dark variants; data URIs cannot read tokens. */
  --grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' shape-rendering='crispEdges'%3E%3Cpath d='M8.5 0V40M16.5 0V40M24.5 0V40M32.5 0V40M0 8.5H40M0 16.5H40M0 24.5H40M0 32.5H40' stroke='%230a0a0a' stroke-opacity='.042'/%3E%3Cpath d='M.5 0V40M0 .5H40' stroke='%230a0a0a' stroke-opacity='.08'/%3E%3C/g%3E%3C/svg%3E");
  --grid-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M.5 0V4.5M.5 156V160M0 .5H4.5M156 .5H160' stroke='%230a0a0a' stroke-opacity='.24' fill='none' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

@supports (height: 100lvh) {
  :root { --toolbar: calc(100lvh - 100svh); }
}

@media (min-width: 640px) {
  :root {
    --rail: max(24px, var(--safe-x));
    --inset: 24px;
    --gutter: 24px;
    --section: 120px;
    --arm: 12px;
  }
}
@media (min-width: 1024px) {
  :root {
    --rail: max(40px, var(--safe-x));
    --inset: 40px;
    --header: 64px;
    --section: 160px;
  }
}

/* A dark band: the capwatch.in palette. Every component reads its tokens,
   so the same rails, crosses and corners work on black. */
.tone-dark {
  --bg: #000000;
  --bg-2: #0f0f0f;
  --ink-1: #fafafa;
  --ink-2: #d4d4d4;
  --ink-3: #a3a3a3;
  --ink-4: #737373;
  --ink-5: #3d3d3d;
  --line: #1f1f1f;
  --line-strong: #2e2e2e;
  --cross: #575757;
  --corner: #fafafa;
  --grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' shape-rendering='crispEdges'%3E%3Cpath d='M8.5 0V40M16.5 0V40M24.5 0V40M32.5 0V40M0 8.5H40M0 16.5H40M0 24.5H40M0 32.5H40' stroke='%23fafafa' stroke-opacity='.05'/%3E%3Cpath d='M.5 0V40M0 .5H40' stroke='%23fafafa' stroke-opacity='.1'/%3E%3C/g%3E%3C/svg%3E");
  --grid-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M.5 0V4.5M.5 156V160M0 .5H4.5M156 .5H160' stroke='%23fafafa' stroke-opacity='.35' fill='none' shape-rendering='crispEdges'/%3E%3C/svg%3E");
  background: var(--bg);
  color: var(--ink-1);
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote {
  margin: 0;
}
ol, ul {
  padding: 0;
  list-style: none;
}
h1, h2, h3, h4 {
  font-weight: 500;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
b, strong, th, dt {
  font-weight: 500;
}
img, svg, canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--ink-1);
  color: var(--bg);
}

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

[id] {
  scroll-margin-top: calc(var(--header) + var(--safe-top) + 8px);
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink-1);
  color: var(--bg);
  font: 500 12px/16px var(--mono);
  border-radius: 2px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 12px;
}

/* ── Type ───────────────────────────────────────────────────────────────── */
/* CapWatch's scale (frontend-system tokens › typography.web), weights capped
   at 500. One larger step, .t-hero, for the story's statements. */
.t-hero {
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -0.024em;
  font-weight: 460;
}
.t-display     { font-size: 48px; line-height: 60px; letter-spacing: -0.02em;  font-weight: 460; }
.t-title-large { font-size: 40px; line-height: 52px; letter-spacing: -0.02em;  font-weight: 460; }
.t-title-1     { font-size: 28px; line-height: 36px; letter-spacing: -0.015em; font-weight: 480; }
.t-title-2     { font-size: 24px; line-height: 32px; letter-spacing: -0.015em; font-weight: 500; }
.t-title-3     { font-size: 20px; line-height: 28px; letter-spacing: -0.01em;  font-weight: 400; }
.t-subtitle    { font-size: 16px; line-height: 24px; font-weight: 400; }
.t-body        { font-size: 15px; line-height: 23px; font-weight: 400; }
.t-small       { font-size: 14px; line-height: 20px; font-weight: 400; }
.t-caption     { font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 400; font-variant-numeric: tabular-nums; }
.t-caption-2   { font-family: var(--mono); font-size: 10px; line-height: 14px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.t-mono        { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.upper         { text-transform: uppercase; letter-spacing: 0.06em; }

.ink-1 { color: var(--ink-1); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.ink-4 { color: var(--ink-4); }

@media (min-width: 640px) {
  .t-hero { font-size: 40px; }
}
@media (min-width: 1024px) {
  .t-hero { font-size: clamp(44px, 3vw + 10px, 56px); line-height: 1.1; }
}

/* Responsive pairs used by section headings and statements. */
.t-h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.015em; font-weight: 480; }
.t-statement { font-size: 28px; line-height: 36px; letter-spacing: -0.016em; font-weight: 460; }
.t-lead { font-size: 16px; line-height: 24px; font-weight: 400; }
@media (min-width: 640px) {
  .t-h2 { font-size: 40px; line-height: 52px; letter-spacing: -0.02em; font-weight: 460; }
  .t-statement { font-size: 40px; line-height: 52px; letter-spacing: -0.02em; }
  .t-lead { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
}
@media (min-width: 1440px) {
  .t-statement { font-size: 48px; line-height: 60px; }
}

/* ── The sheet ──────────────────────────────────────────────────────────── */
/* .wrap is the content box between the rails. Every section uses it, so the
   rails drawn by .section::after line up with every column on the page. */
.wrap {
  width: min(100% - 2 * var(--rail), var(--sheet));
  margin-inline: auto;
  padding-inline: var(--inset);
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gutter);
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* A section: a hairline across the full width above it, the two rails down
   its full height, a registration cross where they meet, and the micro-grid
   on the sheet between the rails, faded toward the hairlines. */
.section {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.section::before,
.section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: max(var(--rail), (100% - var(--sheet)) / 2);
  right: max(var(--rail), (100% - var(--sheet)) / 2);
}
.section::before {
  z-index: -1;
  top: 0;
  bottom: 0;
  background-image: var(--grid-cross), var(--grid-tile);
  background-position: 0 0, 0 0;
  -webkit-mask-image: var(--grid-mask, linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent));
  mask-image: var(--grid-mask, linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent));
}
.section::after {
  z-index: 2;
  top: -6px;
  bottom: 0;
  margin-inline: -5px;
  background:
    /* rails */
    linear-gradient(var(--line), var(--line)) 5px 6px / 1px calc(100% - 6px) no-repeat,
    linear-gradient(var(--line), var(--line)) right 5px top 6px / 1px calc(100% - 6px) no-repeat,
    /* crosses where the hairline meets each rail */
    linear-gradient(var(--cross), var(--cross)) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--cross), var(--cross)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--cross), var(--cross)) right 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--cross), var(--cross)) right 0 top 5px / 11px 1px no-repeat;
}
.section--plain::before { display: none; }
.section--first { border-top: 0; }
.section--first::after { top: 0; background-size: 1px 100%, 1px 100%, 0 0, 0 0, 0 0, 0 0; background-position: 5px 0, right 5px top 0; }

.pad {
  padding-block: var(--section);
}
.pad--follow {
  padding-top: calc(var(--section) * 0.6);
}

/* L-corner brackets: four crisp 1 px arms over a hairline frame. Put .corners
   on any positioned box; the brackets sit exactly on its border. */
.corners {
  position: relative;
}
.corners::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 1;
  --c: var(--corner);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--arm) 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) top right / var(--arm) 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) bottom left / var(--arm) 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) bottom right / var(--arm) 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--arm);
  background-repeat: no-repeat;
}
.frame {
  border: 1px solid var(--line);
}

/* Paper knock-out. Copy never sits on a grid line or a registration cross:
   every block of text clears the sheet beneath it, with a feathered edge so
   the grid fades out around the words instead of stopping at a box. The grid
   lives in the margins and the empty fields; the rails and the section
   crosses (drawn above, z 2) are never cleared. */
:where(.captions, .story__foot, .head, .feature__text, .contact__text, .principles, .index,
  .index__caption, .eyebrow, .doc__aside, .doc__body, .footer__grid, .footer__base, .lost__copy, .donut__legend, .donut__note, .feature__label) {
  position: relative;
}
:where(.captions, .story__foot, .head, .feature__text, .contact__text, .principles, .index,
  .index__caption, .eyebrow, .doc__aside, .doc__body, .footer__grid, .footer__base, .lost__copy, .donut__legend, .donut__note, .feature__label)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -12px;
  background: var(--bg);
  box-shadow: 0 0 36px 22px var(--bg);
  border-radius: 28px;
  pointer-events: none;
}

/* Eyebrow: a zone letter in a box, then the section's name. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-3);
}
.zone {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 4px;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font: 400 10px/1 var(--mono);
}

/* An arrow link: text, then a short rule that extends on hover. */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-1);
}
.arrow::after {
  content: "";
  width: 16px;
  height: 9px;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) left 50% / 100% 1px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h15M11 .5l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") right center / auto 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h15M11 .5l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") right center / auto 100% no-repeat;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.arrow:hover::after {
  transform: translateX(4px);
}
.arrow--out::after {
  width: 9px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M.5 8.5l8-8M2 .5h6.5V7' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M.5 8.5l8-8M2 .5h6.5V7' fill='none' stroke='%23000'/%3E%3C/svg%3E");
}
.arrow--out:hover::after {
  transform: translate(2px, -2px);
}

.u {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease);
  padding-bottom: 1px;
}
.u:hover {
  background-size: 100% 1px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: calc(var(--header) + var(--safe-top));
  padding-top: var(--safe-top);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.header[data-hidden] {
  transform: translateY(calc(-100% - 1px));
}
.header[data-solo] {
  transform: translateY(calc(-100% - 1px));
  opacity: 0;
}
.header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  margin-block: -8px;
  padding-block: 8px;
  color: var(--ink-1);
}
.brand svg {
  height: 26px;
  width: auto;
}
.brand .lockup {
  display: none;
}
@media (min-width: 640px) {
  .brand .mark { display: none; }
  .brand .lockup { display: block; height: 30px; }
}
@media (min-width: 1024px) {
  .brand .lockup { height: 32px; }
}
.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-3);
}
.nav a {
  position: relative;
  padding-block: 10px;
  transition: color 0.2s var(--ease);
}
.nav a:hover,
.nav a[aria-current="true"] {
  color: var(--ink-1);
}
.nav a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
}
@media (max-width: 359px) {
  .nav { gap: 11px; font-size: 12.5px; }
}
@media (min-width: 640px) {
  .nav { gap: 28px; font-size: 14px; }
}
.nav__index {
  display: none;
  margin-right: 6px;
  color: var(--ink-3);
  font: 400 10px/1 var(--mono);
}
@media (min-width: 1024px) {
  .nav__index { display: inline; }
}

/* ── Theatre: the story ─────────────────────────────────────────────────── */
.theatre {
  --chapters: 3;
  /* About 0.9 of a screen per chapter: every step of it moves something (owner, 2026-10-06). */
  height: calc((var(--chapters) + 0.7) * 100svh);
  border-top: 0;
}
.theatre::before {
  display: none;
}
.theatre::after {
  top: 0;
  background-size: 1px 100%, 1px 100%, 0 0, 0 0, 0 0, 0 0;
  background-position: 5px 0, right 5px top 0;
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}
/* The stage's own sheet: the grid follows the stage, so it never scrolls out
   from under the plate. */
.stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 max(var(--rail), (100% - var(--sheet)) / 2);
  background-image: var(--grid-cross), var(--grid-tile);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 62% 55%, #000 30%, transparent 92%);
  mask-image: radial-gradient(ellipse 85% 75% at 62% 55%, #000 30%, transparent 92%);
}
.stage .wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: calc(var(--header) + var(--safe-top) + 16px);
  padding-bottom: calc(16px + var(--stage-foot));
}

/* The plate: a drawing sheet with L-corners and annotations. */
.plate {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--line);
  background: var(--bg);
}
.plate .ascii {
  /* The annotations own a band at the top and bottom of the sheet; the
     drawing lives between them and never runs under a note. */
  position: absolute;
  inset: 30px 0;
  width: 100%;
  height: calc(100% - 60px);
}
@media (min-width: 640px) {
  .plate .ascii { inset: 38px 0; height: calc(100% - 76px); }
}
.plate__notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px;
  color: var(--ink-3);
}
.plate__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.plate__row [data-readout="figure"] {
  color: var(--ink-2);
}
.scale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scale i {
  display: block;
  width: 48px;
  height: 5px;
  border: 1px solid currentColor;
  border-top: 0;
  background: linear-gradient(currentColor, currentColor) 50% 100% / 1px 3px no-repeat;
}
@media (min-width: 640px) {
  .plate__notes { padding: 14px 16px; }
  .scale i { width: 64px; }
}

/* Captions: every chapter in the same grid cell, so the column is as tall as
   the longest one and nothing jumps when they change. */
.story {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.captions {
  display: grid;
}
.captions > li {
  grid-area: 1 / 1;
  align-self: end;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  /* Leaving: out in 0.16 s. Arriving: in after 0.18 s. Two headlines are
     never on screen together. */
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
  pointer-events: none;
}
.captions > li[data-active],
.theatre:not([data-chapter-active]) .captions > li[data-chapter="0"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.32s var(--ease) 0.18s, transform 0.5s var(--ease-out) 0.18s;
}
.chapter__index {
  display: block;
  white-space: nowrap;
  margin-bottom: 14px;
  color: var(--ink-3);
}
.chapter__index b {
  font-weight: 400;
  color: var(--ink-1);
}
.chapter__lead {
  margin-top: 12px;
  max-width: 44ch;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 22px;
}
.captions h1,
.captions .t-hero {
  max-width: 17ch;
}
/* The last chapter resolves the story into the one action. */
.chapter__action {
  margin-top: 20px;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-1);
}
@media (min-width: 640px) {
  .chapter__lead { font-size: 18px; line-height: 26px; margin-top: 16px; }
  .chapter__action { margin-top: 28px; font-size: 18px; line-height: 26px; }
}

.ticks {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ticks li {
  width: 20px;
  height: 1px;
  background: var(--ink-5);
  transition: width 0.5s var(--ease), background-color 0.3s var(--ease);
}
.ticks li[data-active],
.theatre:not([data-chapter-active]) .ticks li[data-tick="0"] {
  width: 40px;
  background: var(--ink-1);
}
.story__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
  transition: opacity 0.4s var(--ease);
}
.cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 18px;
  overflow: hidden;
  background: var(--ink-5);
}
.cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-1);
  transform: translateY(-100%);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
.theatre[data-chapter-active]:not([data-chapter-active="0"]) .cue {
  opacity: 0;
}

/* Short phone heights: the plate keeps at least a third of the screen. */
@media (max-height: 640px) and (max-width: 639px) {
  .t-hero { font-size: 26px; }
  .chapter__lead { font-size: 14px; line-height: 20px; margin-top: 8px; }
  .chapter__action { margin-top: 12px; font-size: 15px; }
  .chapter__index { margin-bottom: 8px; }
  .stage .wrap { gap: 12px; padding-top: calc(var(--header) + var(--safe-top) + 12px); }
}

/* Side by side whenever the screen is wide enough and not portrait. */
@media (min-width: 640px) and (min-aspect-ratio: 6/5) {
  .stage .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--gutter);
    padding-top: calc(var(--header) + var(--safe-top) + 32px);
    padding-bottom: calc(32px + var(--stage-foot));
  }
  .story {
    grid-column: 1 / span 5;
    grid-row: 1;
    align-self: stretch;
    justify-content: center;
    gap: 40px;
    padding-right: 8px;
  }
  .captions > li { align-self: center; }
  .stage .plate {
    grid-column: 6 / span 7;
    grid-row: 1;
    align-self: center;
    height: 100%;
    max-height: 860px;
  }
  .story__foot {
    position: absolute;
    left: var(--inset);
    bottom: calc(32px + var(--stage-foot));
    width: calc((100% - 2 * var(--inset)) * 5 / 12);
  }
  .story { position: static; }
  .stage .wrap { position: relative; }
}
@media (min-width: 640px) and (min-aspect-ratio: 6/5) and (max-width: 1023px) {
  .t-hero { font-size: 32px; }
  .chapter__lead { font-size: 15px; line-height: 22px; }
  .stage .wrap { padding-top: calc(var(--header) + var(--safe-top) + 20px); padding-bottom: calc(20px + var(--stage-foot)); }
  .story__foot { bottom: calc(20px + var(--stage-foot)); }
}
@media (min-width: 640px) and (min-aspect-ratio: 6/5) and (max-height: 520px) {
  .t-hero { font-size: 26px; }
  .chapter__lead { display: none; }
  .chapter__action { margin-top: 12px; }
  .story__foot { display: none; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 6/5) {
  .story { grid-column: 1 / span 5; }
  .stage .plate { grid-column: 6 / span 7; }
}

/* ── Practice ───────────────────────────────────────────────────────────── */
.head {
  display: grid;
  gap: 20px;
  margin-bottom: 48px;
}
.head .t-h2 {
  max-width: 20ch;
}
.head .t-lead {
  max-width: 46ch;
  color: var(--ink-3);
}
@media (min-width: 1024px) {
  .head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
    margin-bottom: 72px;
  }
  .head .eyebrow { grid-column: 1 / -1; }
  .head .t-h2 { grid-column: 1 / span 7; }
  .head .t-lead { grid-column: 8 / span 5; justify-self: start; }
}

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--bg);
}
.band > * + * {
  border-top: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band > * + * { border-top: 0; border-left: 1px solid var(--line); }
}
.discipline {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding: 24px 20px 28px;
}
@media (min-width: 640px) {
  .discipline {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 32px 32px 36px;
    column-gap: 32px;
  }
  .discipline__glyph { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (min-width: 1024px) {
  .discipline {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 420px;
    padding: 32px 32px 36px;
  }
  .discipline__glyph { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; }
}
.discipline__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--ink-3);
}
.discipline__glyph {
  margin: 0;
  font: 400 11px/13px var(--mono);
  color: var(--ink-4);
  white-space: pre;
  letter-spacing: 0;
  user-select: none;
}
@media (min-width: 1024px) {
  .discipline__glyph { font-size: 12px; line-height: 14px; }
}
.discipline h3 {
  margin-bottom: 10px;
}
.discipline p {
  max-width: 34ch;
  color: var(--ink-3);
}

/* ── Work ───────────────────────────────────────────────────────────────── */
.work-head {
  padding-bottom: 0;
}
.work-head .head {
  margin-bottom: 0;
  padding-bottom: calc(var(--section) * 0.75);
}

/* The CapWatch feature: the capwatch.in world, full viewport, dark. The
   header steps away while it is on screen (no corporate mark beside the
   CapWatch mark). The art is capwatch.in's own hero, the capital donut. */
.feature {
  min-height: 100svh;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  --grid-mask: radial-gradient(ellipse 70% 80% at 72% 50%, #000 20%, transparent 80%);
  /* capwatch.in's chart palette on dark (frontend-system web globals). */
  --chart-cyan: #a6ebf7;
  --chart-blue: #60a5fa;
  --chart-violet: #a78bfa;
  --chart-ice: #dcf5fc;
  --chart-slate: #94a3b8;
  --chart-neutral: #9ca3af;
}
.feature .wrap {
  width: min(100% - 2 * var(--rail), var(--sheet));
}
.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  padding-block: 88px;
  align-items: center;
}
@media (min-width: 1024px) {
  .feature__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-block: 120px;
  }
  .feature__text { grid-column: 1 / span 6; grid-row: 1; }
  .feature__art { grid-column: 7 / span 6; grid-row: 1; }
}
/* The lockup: the mark, CapWatch, the category line, in capwatch.in's own
   proportions (every measure a share of the mark height H), kept quiet. */
.feature__lockup {
  --h: 34px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 0.24);
  font-weight: 500;
}
@media (min-width: 640px) { .feature__lockup { --h: 36px; } }
@media (min-width: 1024px) { .feature__lockup { --h: 40px; } }
.feature__mark {
  width: var(--h);
  height: var(--h);
  flex: none;
}
.feature__lockup-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.feature__wordmark {
  font-size: calc(var(--h) * 0.55);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-1);
}
.feature__category {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  font-weight: 400;
  white-space: nowrap;
  color: var(--ink-3);
}
.feature__identity {
  margin-top: 24px;
  max-width: 46ch;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 24px;
}
@media (min-width: 640px) {
  .feature__identity { font-size: 18px; line-height: 27px; }
}
.feature__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.badge {
  display: inline-flex;
  border-radius: 7px;
  transition: opacity 0.2s var(--ease);
}
.badge:hover {
  opacity: 0.8;
}
.badge img {
  height: 44px;
  width: auto;
}
.feature__meta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  color: var(--ink-3);
}
.feature__meta .arrow {
  color: var(--ink-1);
  font-size: 15px;
}
.feature__art {
  position: relative;
  display: grid;
  place-items: center;
  order: -1;
}
@media (min-width: 1024px) {
  .feature__art { order: 0; }
}
/* The capital donut (assets/js/donut.js): the glass behind, the ring, the hole
   as the readout, the legend under it. */
.donut {
  width: 100%;
  max-width: 560px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.donut__window {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 640px) {
  .donut__window { width: min(100%, 460px); }
}
@media (min-width: 1024px) {
  .donut__window { width: min(100%, 500px); }
}
.donut__glass,
.donut__ring {
  position: absolute;
  display: block;
}
.donut__glass {
  inset: 0;
  width: 100%;
  height: 100%;
}
.donut__ring {
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  overflow: visible;
}
.donut__slice {
  cursor: pointer;
  transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1), opacity 420ms ease;
}
.donut__slice[data-dim] {
  opacity: 0.42;
}
.donut__hole {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.donut__readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 42%;
}
.donut__value {
  font: 500 24px/28px var(--mono);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}
@media (min-width: 640px) {
  .donut__value { font-size: 28px; line-height: 32px; }
}
.donut__label {
  margin-top: 4px;
  font: 400 12px/16px var(--mono);
  color: var(--ink-2);
}
.donut__share {
  margin-top: 2px;
  font: 400 12px/16px var(--mono);
  color: var(--ink-3);
}
.js .donut__readout[data-fade] {
  animation: donut-fade 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes donut-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.donut__legend {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  width: 100%;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
@media (min-width: 640px) {
  .donut__legend { display: grid; }
}
.donut__legend button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
}
.donut__legend button:focus-visible {
  outline: 1px solid var(--ink-3);
  outline-offset: 2px;
}
.donut__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--c);
  transition: box-shadow 300ms ease;
}
.donut__legend button[aria-pressed="true"] .donut__dot {
  box-shadow: 0 0 10px var(--c);
}
.donut__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  transition: color 300ms ease;
}
.donut__amount {
  flex: none;
  font: 400 12px/16px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  transition: color 300ms ease;
}
.donut__pct {
  flex: none;
  width: 36px;
  text-align: right;
  font: 400 12px/16px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.donut__legend button[aria-pressed="true"] .donut__name {
  color: var(--ink-1);
}
.donut__legend[data-quiet] button:not([aria-pressed="true"]) .donut__name,
.donut__legend[data-quiet] button:not([aria-pressed="true"]) .donut__amount {
  color: var(--ink-3);
}
.donut__note {
  margin-top: 16px;
  width: 100%;
  color: var(--ink-3);
}
.feature__label {
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) {
  .js .donut__readout[data-fade] { animation: none; }
  .donut__slice { transition: none; }
}

/* The index of work. */
.index {
  border-top: 1px solid var(--line);
}
.index__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.index__row > :nth-child(1) { grid-column: 1; }
.index__row > :nth-child(2) { grid-column: 1; color: var(--ink-2); }
.index__row > :nth-child(3) { grid-column: 2; grid-row: 1; color: var(--ink-2); text-align: right; }
.index__row > :nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
.index__name {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.index__name--muted {
  color: var(--ink-3);
  font-weight: 400;
}
.index__row--head {
  color: var(--ink-3);
  padding-block: 12px;
}
.index__row--head > * { color: var(--ink-3) !important; }
@media (max-width: 639px) {
  .index__row--head { display: none; }
}
@media (min-width: 640px) {
  .index__row {
    grid-template-columns: 3fr 4fr 3fr 2fr;
    padding-block: 24px;
  }
  .index__row > :nth-child(n) { grid-column: auto; grid-row: auto; text-align: left; }
  .index__row > :nth-child(4) { text-align: right; }
  .index__row--head { padding-block: 14px; }
}
.index__caption {
  margin-top: 16px;
  color: var(--ink-3);
}

/* ── Principles ─────────────────────────────────────────────────────────── */
.principles li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-block: 40px;
  border-top: 1px solid var(--line);
}
.principles li:first-child {
  border-top: 0;
  padding-top: 0;
}
.principles li:last-child {
  padding-bottom: 0;
}
.principles .t-statement {
  max-width: 22ch;
}
.principles p.quiet {
  max-width: 44ch;
  color: var(--ink-3);
}
@media (min-width: 640px) {
  .principles li {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-block: 56px;
  }
  .principles .num { grid-column: 1; padding-top: 14px; }
  .principles .t-statement,
  .principles p.quiet { grid-column: 2 / span 5; }
}
@media (min-width: 1024px) {
  .principles li {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-block: 64px;
    align-items: start;
  }
  .principles .num { grid-column: 1 / span 2; padding-top: 20px; }
  .principles .t-statement { grid-column: 3 / span 7; }
  .principles p.quiet { grid-column: 10 / span 3; padding-top: 14px; }
}

/* ── Company: the title block ───────────────────────────────────────────── */
.title-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 96px;
  padding: 14px 14px 16px;
  background: var(--bg);
}
.cell dt {
  font: 400 10px/14px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cell dd {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-1);
}
.cell dd.t-mono {
  font-size: 14px;
  line-height: 20px;
}
.cell--entity dd {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.cell--meta {
  min-height: 0;
  gap: 6px;
}
.cell--meta dd {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
}
.cell--mark {
  justify-content: center;
}
.cell--mark svg {
  width: 28px;
  height: auto;
  color: var(--ink-1);
}
.founders {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Placement. Phones: two columns. 640: four. 1024: six, entity block large. */
.c-entity, .c-dpiit, .c-office, .c-founders { grid-column: span 2; }
@media (min-width: 640px) {
  .title-block { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cell { padding: 16px 18px 18px; min-height: 112px; }
  .cell--meta { min-height: 0; }
  .cell--entity dd { font-size: 24px; line-height: 32px; }
  .c-entity, .c-office { grid-column: span 4; }
  .c-dpiit, .c-founders, .c-m5, .c-m6 { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .title-block { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cell--entity dd { font-size: 28px; line-height: 36px; letter-spacing: -0.015em; }
  .c-entity { grid-column: span 3; grid-row: span 2; }
  .c-hq { grid-column: span 2; }
  .c-dpiit, .c-m5, .c-m6 { grid-column: span 1; }
  .c-office, .c-founders { grid-column: span 3; }
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .contact {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .contact__text { grid-column: 1 / span 6; }
  .contact__plate { grid-column: 7 / span 6; }
}
.contact__text .t-h2 {
  margin-top: 24px;
  max-width: 22ch;
}
.contact__text .t-lead {
  margin-top: 20px;
  max-width: 40ch;
  color: var(--ink-3);
}
.contact__mail {
  display: inline-flex;
  margin-top: 40px;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
  word-break: break-word;
}
@media (min-width: 640px) {
  .contact__mail { font-size: 28px; line-height: 36px; letter-spacing: -0.015em; }
}
.contact__links {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  color: var(--ink-3);
}
.contact__plate .plate {
  aspect-ratio: 4 / 5;
  flex: none;
  width: 100%;
}
@media (min-width: 640px) {
  .contact__plate .plate { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
  .contact__plate .plate { aspect-ratio: 1 / 1; max-height: 620px; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  padding-block: 48px calc(40px + var(--safe-bottom));
}
.footer__grid {
  display: grid;
  gap: 32px;
}
.footer__brand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--ink-1);
}
.footer__brand svg {
  width: 28px;
  flex: none;
}
.footer__entity {
  max-width: 64ch;
  color: var(--ink-3);
  font: 400 12px/18px var(--mono);
}
.footer__entity span {
  color: var(--ink-1);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 14px;
  color: var(--ink-2);
}
.footer__base {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--ink-3);
}
@media (min-width: 1024px) {
  .footer { padding-block: 64px calc(40px + var(--safe-bottom)); }
  .footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .footer__brand { grid-column: 1 / span 8; }
  .footer__links { grid-column: 9 / span 4; justify-content: flex-end; }
}

/* ── Reveal ─────────────────────────────────────────────────────────────── */
/* Content settles in as it enters (site.js adds data-in). Without JS, or with
   reduced motion, everything is simply there. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal][data-in] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .captions > li { transition: opacity 0.12s linear; transform: none !important; }
  .captions > li[data-active] { transition: opacity 0.2s linear 0.14s; }
  .cue i::after { animation: none; transform: none; }
  .header { transition: none; }
}

/* ── Document pages (legal, 404) ────────────────────────────────────────── */
.doc {
  padding-top: calc(var(--header) + var(--safe-top) + 72px);
  padding-bottom: 120px;
}
.doc__grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .doc { padding-top: calc(var(--header) + var(--safe-top) + 112px); }
  .doc__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .doc__aside { grid-column: 1 / span 3; position: sticky; top: calc(var(--header) + var(--safe-top) + 40px); align-self: start; }
  .doc__body { grid-column: 5 / span 7; }
}
.doc h1 {
  margin-top: 20px;
}
.doc__aside ol {
  display: none;
}
@media (min-width: 1024px) {
  .doc__aside ol {
    display: grid;
    gap: 10px;
    margin-top: 40px;
    color: var(--ink-3);
    font-size: 14px;
  }
  .doc__aside ol a:hover { color: var(--ink-1); }
}
.doc__body section {
  padding-block: 36px;
  border-top: 1px solid var(--line);
}
.doc__body section:first-child {
  border-top: 0;
  padding-top: 0;
}
.doc__body h2 {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin-bottom: 16px;
}
.doc__body p,
.doc__body li {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 24px;
}
.doc__body p + p {
  margin-top: 14px;
}
.doc__body ul {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.doc__body ul li {
  padding-left: 18px;
  position: relative;
}
.doc__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--ink-4);
}
.doc__body a {
  color: var(--ink-1);
  background: linear-gradient(var(--ink-5), var(--ink-5)) 0 100% / 100% 1px no-repeat;
}
.doc__body a:hover {
  background-image: linear-gradient(var(--ink-1), var(--ink-1));
}
.kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  margin-top: 4px;
}
.kv > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.kv > div:first-child { border-top: 0; }
.kv dt {
  font: 400 10px/14px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kv dd {
  font-size: 15px;
  line-height: 22px;
}
@media (min-width: 640px) {
  .kv > div { grid-template-columns: 180px 1fr; gap: 16px; align-items: baseline; }
}

.lost {
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.lost__plate {
  margin-top: 48px;
  padding: 28px 24px;
  width: fit-content;
  max-width: 100%;
  flex: none;
}
.lost__plate pre {
  margin: 0;
  overflow-x: auto;
  font: 400 11px/13px var(--mono);
  color: var(--ink-3);
  white-space: pre;
}
@media (min-width: 640px) {
  .lost__plate pre { font-size: 14px; line-height: 16px; }
}

/* ── Without script ─────────────────────────────────────────────────────── */
/* No empty sheets: the story reads as three statements, the plates go. */
html:not(.js) .theatre { height: auto; }
html:not(.js) .theatre .stage { position: static; height: auto; overflow: visible; }
html:not(.js) .theatre .stage .wrap { display: block; height: auto; }
html:not(.js) .theatre .plate,
html:not(.js) .story__foot,
html:not(.js) .contact__plate { display: none; }
html:not(.js) .theatre .captions { display: grid; gap: 48px; }
html:not(.js) .theatre .captions > li { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; }