/* THE LEDGER (lab lane, 2026-09-06). The front door set as a page from a bound
   register of account. Loaded by the front door only, after vealth-next.css
   (which still owns the nav, the fonts and the house tokens).

   Operator brief, verbatim: "one page that zooms in and out like a cockpit, but
   simple to control ... sharpen but very readability and functional, and
   simple", and "white space i'm not a fan really unless truly institutional and
   elegant."

   So: an institution's book. NO BOXES ANYWHERE. Horizontal ruling only, in two
   weights: a 2px rule opens and closes a table, a hairline separates its rows.
   No vertical rules, no radius, no shadow, no glass, no card. The one filled
   shape on the whole page is the gold stamp on the packet, which is the one
   action.

   THE TYPE IS THE INSTRUMENT. The self-hosted Fraunces is a variable face with
   opsz 9-144 and wght 100-900, and it carries `rvrn`, so the letterforms really
   change with optical size the way metal type did. Figures are cut at opsz
   96-144 (thin hairlines, high contrast), text labels at opsz 12-16 (sturdy).
   Every label on this page is Fraunces ITALIC, which is the book's own device
   for a gloss: there is no tracked capital eyebrow anywhere, and no monospace
   outside machine identifiers.

   Figures are tabular lining numerals, right-aligned, so the digits stack into
   a hard vertical edge. That edge is the ledger.

   Every colour is a --lg-* token with a dark answer, so the toggle moves the
   whole book at once (check:theme-parity rule B). The rules that hide anything
   are scoped to html.vjs (set by the pre-paint snippet), so a visitor without
   scripting reads every layer as one continuous document and loses nothing. */

:root {
  --lg-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --lg-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lg-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* The page. Laid buff, deliberately greyer and deeper than the cream every
     generated page reaches for, so the ruling reads as ruling. */
  --lg-paper: #ece8dc;
  /* Iron gall: the brown-black an account book was actually written in. */
  --lg-ink: #1d1a13;
  --lg-ink-soft: rgba(29, 26, 19, 0.76);
  --lg-ink-faint: rgba(29, 26, 19, 0.66);
  --lg-rule: rgba(29, 26, 19, 0.22);
  --lg-rule-strong: rgba(29, 26, 19, 0.52);
  --lg-wash: rgba(29, 26, 19, 0.045);

  /* Every figure is one metal (house law). Two cuts: the lead figure carries a
     touch more light because its hairlines are thinner at opsz 144, and only
     ever appears at 44px and up, where 3:1 is the bar. The working figure is
     set one step darker so it clears 4.5:1 at 13px, which is where it is
     smallest (the folio's roman numerals). */
  --lg-fig: #895d12;
  --lg-fig-lead: #9c6c17;
  --lg-green: #2c5c3e;
  --lg-warn: #a04327;

  /* The ONE filled shape on the page. */
  --lg-stamp: #c9962f;
  --lg-stamp-ink: #1c1305;
  --lg-focus: #2f6f4a;

  /* Optical compensation. A gold hairline that reads on paper thins out on a
     dark ground, so the dark theme carries the same figures a little heavier.
     Same face, same optical size, corrected weight. */
  --lg-fig-w: 400;
  --lg-lead-w: 368;

  --lg-margin: 126px;
  --lg-gutter: 34px;
}

:root[data-theme="dark"] {
  --lg-paper: #0e120e;
  --lg-ink: #e9e3d2;
  --lg-ink-soft: rgba(233, 227, 210, 0.78);
  --lg-ink-faint: rgba(233, 227, 210, 0.56);
  --lg-rule: rgba(233, 227, 210, 0.20);
  --lg-rule-strong: rgba(233, 227, 210, 0.44);
  --lg-wash: rgba(233, 227, 210, 0.05);

  --lg-fig: #dbbb7c;
  --lg-fig-lead: #e6c98b;
  --lg-green: #8dc49d;
  --lg-warn: #e08163;

  --lg-stamp: #d3a44c;
  --lg-stamp-ink: #171104;
  --lg-focus: #94c69b;

  --lg-fig-w: 455;
  --lg-lead-w: 420;
}

/* The stamped nav and footer wear the book's own paper on this page, so the bar
   and the page are one material. Composed of --lg-* tokens, so both themes
   follow, and no literal colour is introduced here. */
:root {
  --nav-glass: var(--lg-paper);
  --nav-sheen: transparent;
  --rule: var(--lg-rule-strong);
  --band-a: var(--lg-paper);
}
/* Stated twice on purpose. vealth-next.css defines all four again under
   :root[data-theme="dark"], which outranks a plain :root no matter what order
   the sheets load in, so a light-only override left the dark nav wearing the
   house glass over the book's paper. */
:root[data-theme="dark"] {
  --nav-glass: var(--lg-paper);
  --nav-sheen: transparent;
  --rule: var(--lg-rule-strong);
  --band-a: var(--lg-paper);
}

/* ── The page ───────────────────────────────────────────────────────────── */

body.ck-body {
  background: var(--lg-paper);
  color: var(--lg-ink);
  font-family: var(--lg-sans);
}
body.ck-body::before, body.ck-body::after { display: none; content: none; }

main.wrap.ck { max-width: none; padding: 0; margin: 0; }
main.wrap.ck > section.ck-scene {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 40px) 34px;
  padding-left: calc(clamp(18px, 3vw, 40px) + var(--lg-margin) + var(--lg-gutter));
  border: 0;
  background: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
main.wrap.ck > section#thesis {
  min-height: calc(100svh - var(--nav-h, 89px));
  padding-top: 0;
}
html.vjs main.wrap.ck[data-alt="packet"] > section#thesis { min-height: 0; }

/* The house sheet gives every h2 a spectrum kick bar and a left inset. A book's
   heads are set flush and carry no bar. */
.ck h2 { padding-left: 0; position: static; }
.ck h2::before { content: none; display: none; }
/* The house sheet also hangs a 96x5 spectrum slab under every h1. The logo's
   spectrum still runs along the nav's bottom edge, which is where the palette
   law puts it; on a ruled page a gradient slab is the one shape that is
   neither a rule nor type, so it goes. */
.ck h1::after { content: none; display: none; }

.ck :focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 3px; }
/* A depth change lands focus on that depth's heading so a screen reader and a
   keyboard both arrive at the right place. A box drawn round a 42px heading
   reads as an error state, so the landing mark is a rule under it instead:
   just as visible, and it is the mark this page already speaks in. */
.ck [tabindex="-1"]:focus-visible { outline: none; box-shadow: 0 3px 0 -1px var(--lg-focus); }
.ck ::selection { background: var(--lg-stamp); color: var(--lg-stamp-ink); }

/* ── The marginal heads ─────────────────────────────────────────────────────
   A book glosses its blocks in the margin, set in italic, ranged right against
   the measure. This replaces the tracked capital eyebrow entirely: there is not
   one on this page. Below 1180px the margin folds away and the same gloss
   becomes a run-in head. */

[data-mh] { position: relative; }
[data-mh]::before {
  content: attr(data-mh);
  position: absolute;
  top: 3px;
  left: calc(-1 * (var(--lg-margin) + var(--lg-gutter)));
  width: var(--lg-margin);
  grid-column: 1 / -1;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.32;
  font-variation-settings: "opsz" 14, "wght" 500;
  color: var(--lg-ink-faint);
  text-align: right;
  pointer-events: none;
}

/* ── The running head: a folio line, at every depth ──────────────────────────
   The volume at the left, the four depths at the right with their numerals. The
   depth you are at is gold; the ones you have passed are links back; the ones
   below you are faint and inert. It never moves and never disappears, so where
   you are and how to return are one object. */

.ck-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 26px;
  margin-left: calc(-1 * (var(--lg-margin) + var(--lg-gutter)));
  padding: 12px 0 9px;
  border-bottom: 1px solid var(--lg-rule-strong);
}
.lg-folio-id {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.lg-folio-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  flex: none;
}
.lg-folio-id b {
  font-family: var(--lg-serif);
  font-size: 21px;
  font-weight: 500;
  font-variation-settings: "opsz" 30, "wght" 560;
  letter-spacing: 0.005em;
  color: var(--lg-ink);
}
.lg-folio-id span {
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15px;
  font-variation-settings: "opsz" 15, "wght" 460;
  color: var(--lg-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-trail {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ck-trail li { display: flex; min-width: 0; }
.ck-trail button, .ck-trail > li > span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: none;
  font-family: var(--lg-sans);
  font-size: 15px;
  font-weight: 450;
  color: var(--lg-ink-faint);
  cursor: pointer;
  text-decoration: none;
  min-width: 0;
}
.ck-trail > li > span { cursor: default; }
.ck-trail [data-label] {
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The numeral is the altimeter. Roman, because four depths are a real sequence
   and a book numbers a sequence. */
.ck-trail i {
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 13.5px;
  font-variation-settings: "opsz" 13, "wght" 500;
  color: var(--lg-ink-faint);
  flex: none;
}
/* Passed: a link back, ruled underneath. */
.ck-crumbs .ck-trail li:not([hidden]):not([aria-current]) button [data-label] {
  color: var(--lg-ink-soft);
  box-shadow: inset 0 -1px 0 0 var(--lg-rule-strong);
}
.ck-crumbs .ck-trail li:not([hidden]):not([aria-current]) button:hover [data-label] {
  color: var(--lg-ink);
  box-shadow: inset 0 -1px 0 0 var(--lg-ink);
}
/* Where you are. */
.ck-trail li[aria-current] button, .ck-trail li[aria-current] > span { color: var(--lg-ink); font-weight: 560; }
.ck-trail li[aria-current] i { color: var(--lg-fig); }
/* Below you, not yet reached. */
.ck-trail li[hidden] { display: flex; }
.ck-trail li[hidden] button, .ck-trail li[hidden] > span { color: var(--lg-ink-faint); opacity: 0.42; pointer-events: none; }
.ck-trail li[hidden] [data-label] { box-shadow: none; }

.ck-out {
  order: 2;
  flex: none;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--lg-ink-soft);
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 16px;
  font-variation-settings: "opsz" 16, "wght" 520;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 0 var(--lg-fig);
}
.ck-out::before { content: "\2039\00a0"; }
.ck-out:hover { color: var(--lg-ink); }
.lg-me {
  margin: 0;
  min-width: 0;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15px;
  font-variation-settings: "opsz" 15, "wght" 460;
  color: var(--lg-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-me a { color: var(--lg-ink); font-style: normal; font-family: var(--lg-mono); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lg-rule-strong); }
.lg-since { margin: 0; flex: 1 1 100%; font-family: var(--lg-serif); font-style: italic; font-size: 14.5px; font-variation-settings: "opsz" 15, "wght" 460; color: var(--lg-fig); }
.lg-near-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }
.lg-near-ask > span { font-family: var(--lg-sans); font-size: 15px; line-height: 1.4; color: var(--lg-ink-soft); max-width: 60ch; }
.lg-near-ask .lg-near-note { flex: 1 1 100%; font-family: var(--lg-serif); font-style: italic; color: var(--lg-ink-faint); }
.lg-near-forget { margin-left: 18px; min-height: 44px; padding: 0; border: 0; background: none; font-family: var(--lg-sans); font-size: 14px; color: var(--lg-ink-faint); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ck-near .ck-row .s { color: var(--lg-fig); font-family: var(--lg-serif); font-style: italic; }
.lg-near-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-bottom: 8px; border-bottom: 2px solid var(--lg-rule-strong); }
.lg-near-h { margin: 0; font-family: var(--lg-serif); font-weight: 500; font-size: 28px; line-height: 1.1; font-variation-settings: "opsz" 40, "wght" 520; color: var(--lg-ink); }
.lg-near-n { margin: 0; font-family: var(--lg-serif); font-style: italic; font-size: 16px; color: var(--lg-ink-soft); }
.lg-near-n b { font-style: normal; font-weight: 500; font-size: 22px; color: var(--lg-fig); font-variant-numeric: tabular-nums; }
.ck-near .ck-rows { margin-top: 0; }
@media (min-width: 761px) { html.vjs .ck.lg-near-on[data-alt="world"] .ck-acts { position: static; box-shadow: none; } }
.ck-keys {
  order: 1;
  flex: none;
  margin: 0;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--lg-ink-faint);
  white-space: nowrap;
}
html.vjs .ck[data-alt="world"] .ck-out,
html.vjs .ck[data-alt="world"] .ck-keys { display: none; }

/* Every small label on this page. Italic gloss, never a capital eyebrow. */
.ck-k, .ck .eyebrow {
  margin: 0 0 5px;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 14.5px;
  font-variation-settings: "opsz" 14, "wght" 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lg-ink-faint);
}

/* ── Depth i: the world. Statement of position, then the register ─────────── */

.ck-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 0 clamp(32px, 5vw, 72px);
  align-items: start;
  padding: 14px 0 0;
}
.ck-id { min-width: 0; }
.ck h1 {
  margin: 0;
  font-family: var(--lg-serif);
  font-size: clamp(30px, 3vw, 41px);
  line-height: 1.06;
  font-weight: 500;
  font-variation-settings: "opsz" 72, "wght" 470;
  letter-spacing: -0.012em;
  color: var(--lg-ink);
  max-width: 15ch;
  text-wrap: balance;
}
.ck .lede {
  margin: 15px 0 0;
  font-family: var(--lg-sans);
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--lg-ink-soft);
  max-width: 46ch;
}

/* The standing of the book: one lead figure with its gloss, then four
   subsidiary figures in a money column, each on its own rule. */
.ck-gauges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 34px);
  margin: 0;
}
.ck-gauges > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--lg-rule);
}
.ck-gauges dt {
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15px;
  font-variation-settings: "opsz" 15, "wght" 480;
  color: var(--lg-ink-soft);
}
.ck-gauges dd {
  margin: 0;
  font-family: var(--lg-serif);
  font-size: 24px;
  line-height: 1;
  font-variation-settings: "opsz" 96, "wght" var(--lg-fig-w);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lg-fig);
  text-align: right;
}
/* The lead. Cut at opsz 144, where Fraunces goes properly thin in the
   hairlines: the one giant figure the page is built around. */
.ck-gauges > div:first-child {
  display: block;
  grid-column: 1 / -1;
  padding: 0 0 13px;
  border-bottom: 2px solid var(--lg-rule-strong);
  text-align: right;
}
.ck-gauges > div:first-child dd {
  font-size: clamp(52px, 6.1vw, 92px);
  line-height: 0.88;
  font-variation-settings: "opsz" 144, "wght" var(--lg-lead-w);
  letter-spacing: -0.018em;
  color: var(--lg-fig-lead);
}
.ck-gauges > div:first-child dt {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--lg-ink-soft);
}

/* The find line: a ruled form field, the way a book rules a blank to be filled
   in. No box, no fill. */
.ck-find {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  margin: 0;
  padding: 0 4px 0 14px;
  border: 0;
  border-bottom: 1px solid var(--lg-rule-strong);
  border-radius: 0;
  background: var(--lg-wash);
  overflow: visible;
}
.ck-find input {
  min-height: 50px;
  width: 100%;
  min-width: 0;
  padding: 0 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lg-ink);
  font-family: var(--lg-sans);
  font-size: 18px;
}
.ck-find input::placeholder {
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--lg-ink-faint);
  opacity: 1;
}
.ck-find input:focus-visible { outline-offset: 0; }
.ck-find-go {
  min-height: 50px;
  padding: 0 2px 0 20px;
  border: 0;
  background: none;
  color: var(--lg-ink);
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 17px;
  font-variation-settings: "opsz" 17, "wght" 560;
  cursor: pointer;
}
.ck-find-go:hover { color: var(--lg-fig); }

/* THE REGISTER. Every kind of open work, ruled edge to edge, its count in the
   money column. Multi-column so the eye reads DOWN a column, as it does in a
   book, not across. */
.lg-reg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding-bottom: 9px;
}
.ck-field-k {
  margin: 0;
  font-family: var(--lg-sans);
  font-size: 15.5px;
  color: var(--lg-ink-soft);
}
.ck-field-wrap { min-width: 0; }
.ck-field {
  columns: 2;
  column-gap: clamp(32px, 4.6vw, 68px);
  border-top: 2px solid var(--lg-rule-strong);
  border-bottom: 2px solid var(--lg-rule-strong);
}
@media (min-width: 1200px) { .ck-field { columns: 3; column-gap: clamp(28px, 3.4vw, 52px); } }
.ck-field--all { columns: 3; }
@media (max-width: 1080px) { .ck-field--all { columns: 2; } }

.ck-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 20px;
  width: 100%;
  min-height: 38px;
  padding: 8px 0 7px;
  text-align: left;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--lg-fig) var(--lg-meter, 0%), var(--lg-rule) var(--lg-meter, 0%));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  color: var(--lg-ink);
  font: inherit;
  cursor: pointer;
  break-inside: avoid;
}
.ck-tile span {
  font-family: var(--lg-sans);
  font-size: 16px;
  line-height: 1.3;
  color: var(--lg-ink);
  overflow-wrap: anywhere;
}
.ck-tile b {
  font-family: var(--lg-serif);
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  font-variation-settings: "opsz" 96, "wght" var(--lg-fig-w);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lg-fig);
  letter-spacing: -0.006em;
}
.ck-tile:hover, .ck-tile:focus-visible { background-image: linear-gradient(90deg, var(--lg-ink) var(--lg-meter, 0%), var(--lg-ink) var(--lg-meter, 0%)); }
.ck-tile:hover span { text-decoration: underline; text-underline-offset: 4px; }
.ck-field--all .ck-tile { min-height: 42px; padding: 10px 0 9px; }
.ck-field--all .ck-tile b { font-size: 22px; }
.ck-field--all .ck-tile span { font-size: 15px; }
.ck-tile--more { grid-template-columns: 1fr; }
.ck-tile--more b { font-size: 15.5px; font-variation-settings: "opsz" 16, "wght" 520; color: var(--lg-ink); font-style: italic; }
.ck-tile--more span { font-size: 14px; color: var(--lg-ink-faint); }
.ck-field-note {
  margin: 0;
  padding: 13px 0;
  font-family: var(--lg-sans);
  font-size: 15px;
  color: var(--lg-ink-faint);
}
.ck-field-all { margin: 0; }
.ck-all {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lg-ink);
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 16.5px;
  font-variation-settings: "opsz" 17, "wght" 520;
  cursor: pointer;
}
.ck-all b {
  font-style: normal;
  font-size: 21px;
  font-weight: 400;
  font-variation-settings: "opsz" 72, "wght" var(--lg-fig-w);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lg-fig);
}
.ck-all:hover { color: var(--lg-fig); }

/* ── Depth ii and iii: every kind, then one kind's entries ───────────────── */

.ck-kind-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 28px;
  align-items: baseline;
  padding: 22px 0 12px;
}
.ck-kind-h {
  margin: 0;
  font-family: var(--lg-serif);
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 1.05;
  font-weight: 500;
  font-variation-settings: "opsz" 72, "wght" 470;
  letter-spacing: -0.012em;
  color: var(--lg-ink);
  max-width: 22ch;
  text-wrap: balance;
}
.ck-kind-n { margin: 0; text-align: right; white-space: nowrap; }
.ck-kind-n b {
  font-family: var(--lg-serif);
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.92;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "wght" var(--lg-lead-w);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.016em;
  color: var(--lg-fig-lead);
}
.ck-kind-n span {
  display: block;
  margin-top: 7px;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--lg-ink-soft);
}

.ck-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--lg-rule-strong);
  border-bottom: 2px solid var(--lg-rule-strong);
}
.ck-rows li { display: block; }
.ck-row {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) 96px 150px;
  gap: 4px 26px;
  align-items: baseline;
  width: 100%;
  min-height: 56px;
  padding: 14px 0 13px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--lg-rule);
  border-radius: 0;
  background: none;
  color: var(--lg-ink);
  font: inherit;
  cursor: pointer;
}
.ck-row:hover { border-bottom-color: var(--lg-ink); }
.ck-row:hover .t { text-decoration: underline; text-underline-offset: 4px; }
.ck-row .t { grid-column: 1; grid-row: 1; font-family: var(--lg-sans); font-size: 16.5px; line-height: 1.32; }
.ck-row .p { grid-column: 2; grid-row: 1; font-family: var(--lg-sans); font-size: 14.5px; line-height: 1.35; color: var(--lg-ink-soft); }
.ck-row .s {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--lg-ink-faint);
  white-space: nowrap;
}
.ck-row .m {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  font-family: var(--lg-serif);
  font-size: 17px;
  font-variation-settings: "opsz" 40, "wght" calc(var(--lg-fig-w) + 40);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lg-fig);
  white-space: nowrap;
  text-align: right;
}
.ck-rows-note {
  margin: 0;
  padding: 14px 0;
  font-family: var(--lg-sans);
  font-size: 15px;
  color: var(--lg-ink-faint);
}
.ck-more { margin: 0; }
.ck-more-b {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lg-ink);
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 16.5px;
  font-variation-settings: "opsz" 17, "wght" 520;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 0 var(--lg-fig);
}
.ck-more-b:hover { color: var(--lg-fig); }

/* ── Depth iv: the entry, set as a printed certificate ───────────────────── */

/* The sequence a packet moves through, laid along a rule with the position it
   actually stands at set in gold. Lowercase: a running argument, not a label. */
.ck-flow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--lg-rule);
}
.ck-flow li {
  position: relative;
  padding: 0 0 9px;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15px;
  font-variation-settings: "opsz" 15, "wght" 480;
  text-transform: lowercase;
  color: var(--lg-ink-faint);
}
.ck-flow li[aria-current] { color: var(--lg-fig); }
.ck-flow li[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--lg-fig);
}

.ck-acts {
  display: grid;
  grid-template-columns: minmax(178px, 0.58fr) minmax(0, 2.1fr) minmax(178px, 0.58fr);
  gap: 20px 30px;
  align-items: start;
  padding-top: 20px;
  border-top: 2px solid var(--lg-rule-strong);
}
.ck-acts > .ck-flow { grid-column: 1 / -1; margin-bottom: 4px; }

/* VOTE and FUND, set as versal section heads on a rule. Not eyebrows: they are
   the names of the acts, at reading size, in ink. */
.ck-act .move-word {
  margin: 0 0 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lg-rule);
  font-family: var(--lg-serif);
  font-size: 25px;
  line-height: 1;
  font-weight: 500;
  font-variation-settings: "opsz" 48, "wght" 520;
  letter-spacing: 0.03em;
  color: var(--lg-ink);
}
.ck-act p {
  margin: 0 0 9px;
  font-family: var(--lg-sans);
  font-size: 14px;
  line-height: 1.52;
  color: var(--lg-ink-soft);
  max-width: 34ch;
}
.ck-act .move-live { color: var(--lg-ink-soft); }
.ck-act .move-live b {
  font-family: var(--lg-serif);
  font-size: 26px;
  font-variation-settings: "opsz" 96, "wght" var(--lg-fig-w);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lg-fig);
  margin-right: 3px;
}
.ck-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--lg-ink);
  font-family: var(--lg-sans);
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 0 var(--lg-fig);
}
.ck-switch:hover { box-shadow: inset 0 -2px 0 0 var(--lg-ink); }
.ck-switch[disabled] { opacity: 0.42; cursor: default; box-shadow: inset 0 -1px 0 0 var(--lg-rule); }
.ck-act .action-quiet {
  display: block;
  width: fit-content;
  margin-top: 11px;
  font-family: var(--lg-sans);
  font-size: 14px;
  color: var(--lg-ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--lg-rule-strong);
}
.ck-act .action-quiet:hover { color: var(--lg-ink); text-decoration-color: var(--lg-ink); }
.ck-act--fund { text-align: right; }
.ck-act--fund p { margin-left: auto; }
.ck-packet-votes {
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--lg-ink-faint);
}
.ck-packet-votes:empty { display: none; }

/* THE CERTIFICATE. Instrument name and serial at the head with the seal at the
   right, the subject in large type, then the particulars, ruled. Opened and
   closed by a 2px rule, and nothing else: no border, no radius, no fill. */
.ck .wf-plate {
  display: block;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--lg-rule-strong);
  border-bottom: 2px solid var(--lg-rule-strong);
  border-radius: 0;
  background: none;
  box-shadow: none;
  position: relative;
}
.ck .wf-plate[data-state="pending"] { opacity: 0.7; }
.ck .wf-plate-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px 18px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--lg-rule);
}
.ck .wf-plate-k {
  margin: 0;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15px;
  font-variation-settings: "opsz" 15, "wght" 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lg-ink-soft);
  white-space: nowrap;
}
.ck .wf-plate-id {
  margin: 0;
  min-width: 0;
  font-family: var(--lg-mono);
  font-size: 11.5px;
  color: var(--lg-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck .wf-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15.5px;
  font-variation-settings: "opsz" 16, "wght" 520;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--lg-ink);
  white-space: nowrap;
}
.ck .wf-shape {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px dashed var(--lg-ink-faint);
  box-sizing: border-box;
  flex: none;
}
.ck .wf-shape[data-shape="solid"] { border-style: solid; border-color: var(--lg-green); background: var(--lg-green); }
.ck .wf-shape[data-shape="double"] { border-style: double; border-width: 3px; border-color: var(--lg-fig); }
.ck .wf-shape[data-shape="return"] { border-style: dotted; border-color: var(--lg-warn); }
.ck .wf-state--open .wf-shape { border-color: var(--lg-green); }
.ck .wf-state--rejected { color: var(--lg-warn); }
.ck .wf-doport { display: inline-flex; align-items: center; gap: 15px; }
.ck .wf-doport .wf-port-word {
  font-family: var(--lg-serif);
  font-size: 25px;
  line-height: 1;
  font-weight: 500;
  font-variation-settings: "opsz" 48, "wght" 520;
  letter-spacing: 0.03em;
  color: var(--lg-ink);
}
/* THE STAMP. The one filled shape on the page, sharp cornered, the way a seal
   is struck on a certificate. */
.ck .wf-act {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: var(--lg-stamp);
  color: var(--lg-stamp-ink);
  font-family: var(--lg-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-decoration: none;
  white-space: nowrap;
}
.ck .wf-act:hover { filter: brightness(1.06); }
.ck .wf-plate-sub {
  margin: 0;
  padding: 11px 0 0;
  font-family: var(--lg-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lg-ink-soft);
  max-width: 70ch;
}
.ck .wf-plate-task {
  margin: 0;
  padding: 15px 0 20px;
  font-family: var(--lg-serif);
  font-size: clamp(25px, 2.7vw, 37px);
  line-height: 1.1;
  font-weight: 500;
  font-variation-settings: "opsz" 60, "wght" 460;
  letter-spacing: -0.011em;
  color: var(--lg-ink);
  max-width: 26ch;
  text-wrap: balance;
}
.ck .wf-fields { margin: 0; display: grid; border-top: 1px solid var(--lg-rule); }
.ck .wf-fields > div {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lg-rule);
}
.ck .wf-fields > div:last-child { border-bottom: 0; padding-bottom: 15px; }
.ck .wf-fields dt {
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  font-variation-settings: "opsz" 15, "wght" 480;
  letter-spacing: 0;
  color: var(--lg-ink-soft);
}
.ck .wf-fields dd {
  margin: 0;
  font-family: var(--lg-sans);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--lg-ink);
  max-width: 62ch;
  overflow-wrap: anywhere;
}
.ck .wf-note {
  display: block;
  margin-top: 5px;
  font-family: var(--lg-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--lg-ink-faint);
}
.ck .wf-plate noscript p { margin: 0; padding: 12px 0; font-family: var(--lg-sans); font-size: 14.5px; color: var(--lg-ink-soft); }
.ck .wf-twin { margin: 0; padding: 0 0 12px; font-family: var(--lg-sans); font-size: 13.5px; color: var(--lg-ink-faint); }
.ck .wf-twin a { color: var(--lg-ink-soft); }
.ck-act-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 4px;
  font-family: var(--lg-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lg-ink-soft);
  max-width: 82ch;
}
.ck-act-note:empty { display: none; }
.ck-act-note a { color: var(--lg-ink); }
.ck-act-note.is-ok { color: var(--lg-green); }

/* ── The method: the book's body, and its marginalia ─────────────────────── */

.ck-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 306px);
  gap: 22px clamp(34px, 4.6vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--lg-rule);
}
.ck-sheet-main { min-width: 0; }
/* Paragraphs are separated by a first-line indent, not by a blank line. That is
   how a printed page sets continuous prose, and it is the single clearest line
   between a book and a blog. */
.ck-sheet-text p {
  margin: 0;
  font-family: var(--lg-sans);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--lg-ink-soft);
  max-width: 66ch;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.ck-sheet-text p + p { text-indent: 1.7em; }
.ck-sheet-list { margin-top: 16px; }
.ck-sheet-list ol { margin: 0; padding-left: 24px; }
.ck-sheet-list li {
  margin: 0 0 7px;
  padding-left: 4px;
  font-family: var(--lg-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--lg-ink-soft);
  max-width: 64ch;
}
.ck-sheet-list li::marker { color: var(--lg-fig); font-family: var(--lg-serif); }
.ck-sheet-side > p {
  margin: 0 0 15px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--lg-rule);
  font-family: var(--lg-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lg-ink);
  overflow-wrap: anywhere;
}
.ck-sheet-side > div > p { margin: 0 0 15px; padding-bottom: 13px; border-bottom: 1px solid var(--lg-rule); font-family: var(--lg-sans); font-size: 14.5px; line-height: 1.5; color: var(--lg-ink); }
.ck-sheet-side .ck-k { margin-bottom: 3px; }
.ck-sheet-side .action-quiet {
  font-family: var(--lg-sans);
  font-size: 14px;
  color: var(--lg-ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--lg-rule-strong);
}

/* The intake line, set as a footnote: a short separator rule, then the note. */
.ck .intake {
  position: relative;
  margin: 0;
  padding-top: 15px;
  font-family: var(--lg-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lg-ink-soft);
  max-width: 78ch;
}
.ck .intake::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 132px;
  height: 1px;
  background: var(--lg-rule-strong);
}
.ck .intake a { color: var(--lg-ink); text-decoration-color: var(--lg-rule-strong); text-underline-offset: 3px; }
.ck .intake .wf-port-word {
  font-family: var(--lg-serif);
  font-size: 15px;
  font-weight: 600;
  font-variation-settings: "opsz" 20, "wght" 600;
  letter-spacing: 0.04em;
}

/* ── The depths (scripting on) ──────────────────────────────────────────── */

html.vjs .ck[data-alt="world"] .ck-kind,
html.vjs .ck[data-alt="world"] .ck-kinds,
html.vjs .ck[data-alt="kind"] .ck-kinds,
html.vjs .ck[data-alt="packet"] .ck-kinds,
html.vjs .ck[data-alt="kinds"] .ck-top,
html.vjs .ck[data-alt="kinds"] .ck-field-wrap,
html.vjs .ck[data-alt="kinds"] .ck-near,
html.vjs .ck[data-alt="kinds"] .lg-near-ask,
html.vjs .ck[data-alt="kind"] .ck-near,
html.vjs .ck[data-alt="kind"] .lg-near-ask,
html.vjs .ck[data-alt="packet"] .ck-near,
html.vjs .ck[data-alt="packet"] .lg-near-ask,
html.vjs .ck[data-alt="kinds"] .ck-kind { display: none; }

html.vjs .ck[data-alt="world"] .wf-plate .wf-fields,
html.vjs .ck[data-alt="world"] .wf-plate .wf-plate-sub,
html.vjs .ck[data-alt="world"] .wf-plate .wf-twin,
html.vjs .ck[data-alt="world"] .wf-plate noscript,
html.vjs .ck[data-alt="kind"] .wf-plate .wf-fields,
html.vjs .ck[data-alt="kind"] .wf-plate .wf-plate-sub,
html.vjs .ck[data-alt="kind"] .wf-plate .wf-twin,
html.vjs .ck[data-alt="kind"] .wf-plate noscript,
html.vjs .ck[data-alt="kinds"] .wf-plate .wf-fields,
html.vjs .ck[data-alt="kinds"] .wf-plate .wf-plate-sub,
html.vjs .ck[data-alt="kinds"] .wf-plate .wf-twin,
html.vjs .ck[data-alt="kinds"] .wf-plate noscript { display: none; }
html.vjs .ck[data-alt="world"] .ck-act > p:not(.move-live),
html.vjs .ck[data-alt="kind"] .ck-act > p:not(.move-live),
html.vjs .ck[data-alt="kinds"] .ck-act > p:not(.move-live) { display: none; }
html.vjs .ck[data-alt="world"] .wf-plate-task,
html.vjs .ck[data-alt="kind"] .wf-plate-task,
html.vjs .ck[data-alt="kinds"] .wf-plate-task { font-size: 21px; padding: 13px 0 14px; max-width: 40ch; font-variation-settings: "opsz" 30, "wght" 480; }
html.vjs .ck[data-alt="world"] .wf-plate,
html.vjs .ck[data-alt="kind"] .wf-plate,
html.vjs .ck[data-alt="kinds"] .wf-plate { border-bottom-width: 1px; }

html.vjs .ck[data-alt="kind"] .ck-top,
html.vjs .ck[data-alt="kind"] .ck-field-wrap,
html.vjs .ck[data-alt="packet"] .ck-top,
html.vjs .ck[data-alt="packet"] .ck-field-wrap,
html.vjs .ck[data-alt="packet"] .ck-find,
html.vjs .ck[data-alt="packet"] .ck-kind { display: none; }

html.vjs .ck[data-alt="packet"] .ck-acts {
  border-top: 0;
  padding-top: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px clamp(34px, 4.6vw, 64px);
}
html.vjs .ck[data-alt="packet"] .ck-acts > .ck-flow { grid-row: 1; }
html.vjs .ck[data-alt="packet"] .ck-acts > .wf-plate { grid-column: 1 / -1; grid-row: 2; }
html.vjs .ck[data-alt="packet"] .ck-acts > .ck-act--vote { grid-column: 1; grid-row: 3; }
html.vjs .ck[data-alt="packet"] .ck-acts > .ck-act--fund { grid-column: 2; grid-row: 3; text-align: left; }
html.vjs .ck[data-alt="packet"] .ck-acts > .ck-act--fund p { margin-left: 0; }
html.vjs .ck[data-alt="packet"] .ck-acts > .ck-act-note { grid-row: 4; }

/* The certificate opens out: the subject at the left, the particulars ruled at
   the right, both under the head band. Markup order is untouched, so this is
   also the reading order. */
html.vjs .ck[data-alt="packet"] .wf-plate {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr);
  column-gap: clamp(34px, 4.4vw, 66px);
  align-items: start;
}
html.vjs .ck[data-alt="packet"] .wf-plate-head,
html.vjs .ck[data-alt="packet"] .wf-plate-sub,
html.vjs .ck[data-alt="packet"] .wf-plate noscript,
html.vjs .ck[data-alt="packet"] .wf-twin { grid-column: 1 / -1; }
html.vjs .ck[data-alt="packet"] .wf-plate-task {
  grid-column: 1;
  padding: 18px 0 24px;
  max-width: none;
  font-size: clamp(27px, 3.2vw, 44px);
  font-variation-settings: "opsz" 72, "wght" 450;
}
html.vjs .ck[data-alt="packet"] .wf-fields { grid-column: 2; margin-top: 18px; }

/* At the world, the entry and its three acts are the foot of the page: ruled
   off above and held at the bottom of the viewport while the register scrolls
   behind them, in flow on a phone. */
@media (min-width: 761px) {
  html.vjs .ck[data-alt="world"] .ck-acts {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-bottom: 14px;
    background: var(--lg-paper);
  }
}

/* Motion answers a click and nothing else. */
html.vjs .ck[data-alt="world"] .ck-acts::before { content: none; }
html.vjs .ck[data-alt="world"] .ck-act .action-quiet { display: none; }
html.vjs .ck[data-alt="world"] .ck-act .move-word { font-size: 21px; margin-bottom: 9px; padding-bottom: 6px; }
html.vjs .ck[data-alt="world"] .ck-acts { gap: 14px 30px; padding-top: 16px; }

.ck-panel-in { animation: lg-turn 0.19s ease-out; }
@keyframes lg-turn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── The colophon: how to hand this book to an assistant ─────────────────── */

main.wrap.ck > section.ck-ai {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px clamp(34px, 4.6vw, 64px);
  align-items: start;
  padding-top: 30px;
  border-top: 2px solid var(--lg-rule-strong);
}
.ck-ai h2 {
  margin: 0 0 11px;
  font-family: var(--lg-serif);
  font-size: clamp(25px, 2.7vw, 35px);
  line-height: 1.1;
  font-weight: 500;
  font-variation-settings: "opsz" 60, "wght" 470;
  letter-spacing: -0.01em;
  color: var(--lg-ink);
  max-width: 18ch;
  text-wrap: balance;
}
.ck-ai .sub {
  margin: 0 0 12px;
  font-family: var(--lg-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lg-ink-soft);
  max-width: 44ch;
}
.ck-ai .ai-note {
  margin: 0;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lg-ink-faint);
}
.ck-ai .ai-note a { color: var(--lg-ink-soft); }
.ck .paste {
  padding: 13px 0 15px;
  border: 0;
  border-top: 1px solid var(--lg-rule-strong);
  border-bottom: 1px solid var(--lg-rule-strong);
  border-radius: 0;
  background: none;
}
.ck .p-head {
  margin: 0 0 9px;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 14.5px;
  font-variation-settings: "opsz" 14, "wght" 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lg-ink-soft);
}
/* The house sheet panels every <pre>. On a page with no boxes an extract is
   set the way a book sets one: indented on the measure, no frame. */
.ck .paste pre {
  margin: 0 0 13px;
  padding: 0 0 0 20px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--lg-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--lg-ink);
}
.ck .p-act { margin: 0; }
.ck .paste-copy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--lg-ink);
  font-family: var(--lg-sans);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 0 var(--lg-fig);
  text-align: left;
}
.ck .paste-copy:hover { box-shadow: inset 0 -2px 0 0 var(--lg-ink); }
.ck .honest {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--lg-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lg-ink-soft);
  max-width: 82ch;
}
.ck .ck-truth { grid-column: 1 / -1; }
.ck .ck-truth summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: var(--lg-serif);
  font-style: italic;
  font-size: 15px;
  font-variation-settings: "opsz" 15, "wght" 520;
  color: var(--lg-ink-soft);
  cursor: pointer;
  list-style: none;
}
.ck .ck-truth summary::before { content: "+"; display: inline-block; width: 14px; font-style: normal; font-weight: 600; color: var(--lg-fig); }
.ck .ck-truth[open] summary::before { content: "\2212"; }
.ck .ck-truth summary::-webkit-details-marker { display: none; }
.ck .boundary {
  margin: 2px 0 0;
  font-family: var(--lg-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--lg-ink-soft);
  max-width: 84ch;
}

/* ── The margin folds away; the glosses become run-in heads ──────────────── */

@media (max-width: 1180px) {
  :root { --lg-margin: 0px; --lg-gutter: 0px; }
  main.wrap.ck > section.ck-scene { padding-left: clamp(18px, 3vw, 40px); }
  .ck-crumbs { margin-left: 0; }
  [data-mh]::before {
    position: static;
    display: block;
    width: auto;
    margin: 0 0 7px;
    text-align: left;
  }
  .ck-top { grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); }
}

@media (max-width: 900px) {
  .ck-top { grid-template-columns: 1fr; gap: 26px; }
  .ck-gauges > div:first-child { text-align: left; }
  .ck-gauges dd { text-align: right; }
  .ck h1 { max-width: 20ch; }
  .ck-field { columns: 1; }
  .ck-field--all { columns: 1; }
  .ck-sheet { grid-template-columns: 1fr; }
  main.wrap.ck > section.ck-ai { grid-template-columns: 1fr; }
}

/* ── The phone is composed, not collapsed ───────────────────────────────── */

@media (max-width: 760px) {
  main.wrap.ck > section.ck-scene { gap: 20px; padding-bottom: 28px; }
  /* Two glosses say what the line under them already says. On a phone that is
     a wasted line each, so they go and the rest stay. */
  .ck-find::before, .ck-field-wrap::before { content: none; }
  .ck-crumbs { gap: 2px 16px; padding: 10px 0 7px; }
  .lg-folio-id span { display: none; }
  .lg-me { flex: 1 1 100%; font-size: 14px; }
  .lg-folio-id b { font-size: 19px; }
  .lg-folio-mark { width: 26px; height: 26px; }
  .ck-trail { order: 3; flex: 1 0 100%; gap: 0 15px; }
  .ck-out { order: 0; }
  .ck-trail button, .ck-trail > li > span { min-height: 44px; padding: 4px 0; font-size: 14px; gap: 6px; }
  .ck-trail [data-label] { max-width: 17ch; }
  .ck-trail i { font-size: 12.5px; }
  .ck-keys { display: none; }

  .ck-top { padding-top: 20px; }
  .ck h1 { font-size: 32px; max-width: 18ch; }
  .ck .lede { font-size: 16px; margin-top: 14px; }
  .ck-gauges > div:first-child dd { font-size: 62px; }
  .ck-gauges > div { padding: 8px 0; }

  .ck-find input { font-size: 17px; min-height: 50px; }
  .ck-find input::placeholder { font-size: 16px; }

  .lg-reg-head { gap: 4px 16px; }
  .ck-field-k { font-size: 15px; }
  .ck-tile { min-height: 44px; padding: 10px 0 9px; }
  .ck-tile b { font-size: 23px; }
  .ck-tile span { font-size: 15.5px; }

  .ck-kind-head { grid-template-columns: 1fr; gap: 12px; padding-top: 18px; }
  .ck-kind-n { text-align: left; }
  .ck-kind-n b { font-size: 52px; }
  /* On a phone the entry gets the whole measure and the money keeps its own
     right edge on the line below, so a long title sets in two lines instead of
     four. */
  .ck-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; padding: 12px 0; }
  .ck-row .t { grid-column: 1 / -1; grid-row: 1; }
  .ck-row .p { grid-column: 1; grid-row: 2; }
  .ck-row .m { grid-column: 2; grid-row: 2; }
  .ck-row .s { display: none; }

  .ck-acts { grid-template-columns: 1fr; gap: 20px; padding-top: 18px; }
  .ck-act--fund { text-align: left; }
  .ck-act--fund p { margin-left: 0; }
  .ck-act .move-word { font-size: 22px; }
  html.vjs .ck[data-alt="packet"] .ck-acts > .wf-plate { order: -1; }
  html.vjs .ck[data-alt="packet"] .ck-acts > .ck-flow { order: -2; }

  /* On a phone the certificate is one column: the subject, then its particulars,
     in reading order. The facing halves are a desk-width thing. */
  html.vjs .ck[data-alt="packet"] .wf-plate { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; column-gap: 0; }
  html.vjs .ck[data-alt="packet"] .wf-plate-task, html.vjs .ck[data-alt="packet"] .wf-fields { grid-column: 1 / -1; }
  html.vjs .ck[data-alt="packet"] .wf-plate-task { padding: 14px 0 12px; font-size: 27px; }
  html.vjs .ck[data-alt="packet"] .wf-fields { margin-top: 4px; }
  /* The thumb's Out pill floats over the foot of the page, so the page keeps a
     band clear beneath its last line. */
  html.vjs .ck:not([data-alt="world"]) > section.ck-scene { padding-bottom: 92px; }
  .ck .wf-plate-head { grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; }
  .ck .wf-state { grid-column: 1 / -1; justify-self: start; }
  .ck .wf-doport { grid-column: 1 / -1; justify-content: space-between; }
  .ck .wf-doport .wf-port-word { font-size: 22px; }
  .ck .wf-act { flex: 1; justify-content: center; }
  .ck .wf-plate-task { font-size: 26px; max-width: none; }
  .ck .wf-fields > div { grid-template-columns: 1fr; gap: 3px; }
  .ck .wf-fields dt { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-panel-in { animation: none; }
}

/* ── READING AND CLICKING FIRST (operator, 2026-09-06: "reading and clicking are
   the number one items so optimize those for humans"). One floor for every
   sentence a person reads on a surface that wears the register, and one
   response for every press. Measured before this block: 86 sentences under
   15px on the Board at 390, paragraphs 98 to 157 characters wide on Verify at
   1440. Labels, figures and machine ids keep their own sizes; sentences do not
   go below 15.5px, leading below 1.5, or a measure past 70ch. ────────────── */
/* The floor names every sentence class the reading audit found under 15px on
   the six operating surfaces. It never names a bare element: a floor that
   reaches p or dd lowers the gauges, the ledes and the record headings, and a
   floor may only raise. Add a class here when the audit finds it; never widen
   it to an element. */
body.ck-body .wf-note,
body.ck-body .wf-twin,
body.ck-body .wf-plate-sub,
body.ck-body .wf-plate-sub span,
body.ck-body .wf-boundary,
body.ck-body .wf-receipt-sub,
body.ck-body .wf-gate-actor,
body.ck-body .wf-gate-actor span,
body.ck-body .op-figure span,
body.ck-body .wf-state-line,
body.ck-body .wf-checkline,
body.ck-body .wf-door-role,
body.ck-body .wf-ledger-v,
body.ck-body .wf-notclaims p,
body.ck-body .wf-notclaims li,
body.ck-body .wf-lane p,
body.ck-body .wf-record-what,
body.ck-body .pk-backing,
body.ck-body .lgf-note,
body.ck-body .lg-note,
body.ck-body .lg-gloss,
body.ck-body .lg-role,
body.ck-body .lg-hero-foot,
body.ck-body .lg-doc-in p,
body.ck-body .lg-sheet-side p,
body.ck-body .lg-worker details.disclosure p,
body.ck-body .class-note,
body.ck-body .op-help,
body.ck-body .op-sub,
body.ck-body .op-scale,
body.ck-body .op-ai,
body.ck-body .board-note,
body.ck-body .board-lead-cue,
body.ck-body .board-sub,
body.ck-body .intake,
body.ck-body .ai-note,
body.ck-body .p-head,
body.ck-body .honest,
body.ck-body .boundary,
body.ck-body .move-live,
body.ck-body .ck-sheet-side p,
body.ck-body .ck-sheet-main p,
body.ck-body .ck-sheet-list p,
body.ck-body .ck-k,
body.ck-body .aiband,
body.ck-body .aiband span,
body.ck-body .bpay,
body.ck-body .bwage,
body.ck-body .bsafety,
body.ck-body .bhow,
body.ck-body .bwine-note,
body.ck-body .bact-note,
body.ck-body .breceipt,
body.ck-body .bstart,
body.ck-body .bdraft,
body.ck-body .baccept-read,
body.ck-body .baccept-note,
body.ck-body .btf-help,
body.ck-body .btrain-note,
body.ck-body .btrain-honest,
body.ck-body .bfundpanel-body p,
body.ck-body .bstd-body p,
body.ck-body .btrain-body p,
body.ck-body .btrain-attach-body p,
body.ck-body .bagent-body p,
body.ck-body .bdetail p,
body.ck-body .bdetail li,
body.ck-body .bdetail span,
body.ck-body .craft-body p,
body.ck-body .craft-body li,
body.ck-body .tl-more-body p,
body.ck-body .tl-what,
body.ck-body .tl-real,
body.ck-body .tl-cue,
body.ck-body .tl-earn,
body.ck-body .regen-col p,
body.ck-body .dl-job,
body.ck-body .dl-job span,
body.ck-body .bgroup-head {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}
body.ck-body .bt { font-size: 16px !important; line-height: 1.35 !important; }
body.ck-body details > summary { line-height: 1.45 !important; }
body.ck-body .brow .bt { font-size: 16.5px !important; }
body.ck-body .dl-job { display: block; max-width: 62ch; }
body.ck-body .bdetail li, body.ck-body .bterms li, body.ck-body .craft-body li { max-width: 62ch; }
body.ck-body .wf-boundary a, body.ck-body .lgf-note a, body.ck-body .honest a, body.ck-body .boundary a, body.ck-body .intake a, body.ck-body .bdetail a, body.ck-body .wf-ledger-v a, body.ck-body .class-note a, body.ck-body .lg-note a, body.ck-body .aiband a { font-size: inherit !important; }
/* The measure: no sentence sets wider than 62 characters of Inter, about 78
   average characters. The folio line and the figure lines are not sentences. */
body.ck-body p:not(.lg-folio-id):not(.ck-kind-n):not(.lg-near-n):not(.ck-field-all), body.ck-body .wf-boundary, body.ck-body .wf-gate-actor, body.ck-body .op-scale, body.ck-body .op-ai, body.ck-body .wf-receipt-sub, body.ck-body .wf-ledger-v, body.ck-body .wf-lede, body.ck-body .boundary, body.ck-body .honest, body.ck-body .intake, body.ck-body .bsafety, body.ck-body .bhow, body.ck-body .bwine-note, body.ck-body .btrain-note, body.ck-body .bdetail p { max-width: 62ch !important; }
body.ck-body .aiband span { display: block; max-width: 62ch; }
body.ck-body .ck-row .t, body.ck-body .ck-row .p { font-size: 16px; line-height: 1.4; }
body.ck-body .ck-row .m { font-size: 16px; }
@media (max-width: 760px) {
  body.ck-body .wf-note, body.ck-body .wf-plate-sub, body.ck-body .wf-plate-sub span, body.ck-body .wf-boundary, body.ck-body .wf-ledger-v, body.ck-body .lgf-note, body.ck-body .lg-note, body.ck-body .class-note, body.ck-body .honest, body.ck-body .boundary, body.ck-body .intake, body.ck-body .bpay, body.ck-body .bwage, body.ck-body .bhow, body.ck-body .bwine-note, body.ck-body .btf-help, body.ck-body .bdetail p, body.ck-body .bdetail li, body.ck-body .bdetail span, body.ck-body .dl-job, body.ck-body .dl-job span { font-size: 16px !important; line-height: 1.55 !important; }
  body.ck-body .ck-row { min-height: 52px; padding-top: 12px; padding-bottom: 12px; }
  body.ck-body .ck-tile { min-height: 48px; }
}

/* Every press answers. A row, an entry, a switch, the seal: the surface moves
   under the finger and the row you are on is washed, so a tap is never a
   question. Reduced motion keeps the wash and drops the movement. */
body.ck-body .ck-row:hover, body.ck-body .ck-row:focus-visible { background: var(--lg-wash); }
body.ck-body .ck-row:active, body.ck-body .ck-tile:active, body.ck-body .ck-switch:active, body.ck-body .wf-act:active, body.ck-body .ck-out:active, body.ck-body .ck-all:active, body.ck-body .ck-trail button:active { transform: translateY(1px); }
body.ck-body .ck-row, body.ck-body .ck-tile, body.ck-body .ck-switch, body.ck-body .wf-act, body.ck-body .ck-out { transition: background-color 0.12s ease, transform 0.06s ease; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { body.ck-body .ck-row:active, body.ck-body .ck-tile:active, body.ck-body .ck-switch:active, body.ck-body .wf-act:active, body.ck-body .ck-out:active, body.ck-body .ck-all:active, body.ck-body .ck-trail button:active { transform: none; } }

/* The way back under the thumb: at any depth below the world, on a phone, Out
   floats at the bottom right and never scrolls away. */
.lg-out-float { display: none; }
@media (max-width: 760px) {
  html.vjs .ck:not([data-alt="world"]) .lg-out-float {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 14px;
    bottom: 16px;
    z-index: 40;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--lg-rule-strong);
    border-radius: 999px;
    background: var(--lg-paper);
    color: var(--lg-ink);
    font-family: var(--lg-sans);
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 24px -12px var(--lg-rule-strong);
    cursor: pointer;
  }
  .lg-out-float::before { content: "\2190"; margin-right: 8px; }
}