/* 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 ledger uses the same measured mark colours as the rest of the house. */
:root {
  --lg-paper: #efe5cb;
  --lg-ink: #16251a;
  --lg-ink-soft: #4d5a3d;
  --lg-ink-faint: #4d5a3d;
  --lg-rule: rgba(22,37,26,.24);
  --lg-rule-strong: rgba(22,37,26,.52);
  --lg-wash: rgba(22,37,26,.06);
  --lg-fig: #654706;
  --lg-fig-lead: #654706;
  --lg-green: #315b3e;
  --lg-warn: #7d3e2f;
  --lg-stamp: #be9b4b;
  --lg-stamp-ink: #16251a;
  --lg-focus: #496841;
}
:root[data-theme="dark"] {
  --lg-paper: #081417;
  --lg-ink: #f9eacb;
  --lg-ink-soft: #c8c09e;
  --lg-ink-faint: #b5ae92;
  --lg-rule: rgba(249,234,203,.28);
  --lg-rule-strong: rgba(249,234,203,.52);
  --lg-wash: rgba(249,234,203,.08);
  --lg-fig: #dfc883;
  --lg-fig-lead: #dfc883;
  --lg-green: #98bd9f;
  --lg-warn: #f1ab83;
  --lg-stamp: #dfc883;
  --lg-stamp-ink: #081417;
  --lg-focus: #98bd9f;
}

/* 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; }
/* The front door's depths are states of one page, so its passed depths are
   buttons. An operating surface's way back is another URL, so its passed depth
   is a real ANCHOR, and it wears exactly the same cut. Folded here from four
   sheets on 2026-09-06 (board, forms, verify, me each carried this identical
   eleven-declaration block). The anchor's COLOUR is deliberately left to the
   surface: each operating page paints its own links, and those rules outrank
   this one. */
.ck-trail button, .ck-trail a, .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 [aria-current] button[disabled] { cursor: default; opacity: 1; }
.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. The rule is the register's; the ink
   of an anchor's label belongs to the surface, which is why only the button
   takes a colour here. */
.ck-crumbs .ck-trail li:not([hidden]):not([aria-current]) button [data-label],
.ck-crumbs .ck-trail li:not([hidden]):not([aria-current]) a [data-label] {
  box-shadow: inset 0 -1px 0 0 var(--lg-rule-strong);
}
.ck-crumbs .ck-trail li:not([hidden]):not([aria-current]) button [data-label] {
  color: var(--lg-ink-soft);
}
.ck-crumbs .ck-trail li:not([hidden]):not([aria-current]) button:hover [data-label],
.ck-crumbs .ck-trail li:not([hidden]):not([aria-current]) a: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] a, .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] a, .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;
}
.ck-start {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-top: 24px;
}
.ck-start-label {
  flex: 1 0 100%;
  margin: 0 0 2px;
  font-family: var(--lg-serif);
  font-size: 15px;
  font-style: italic;
  font-variation-settings: "opsz" 15, "wght" 500;
  color: var(--lg-ink-soft);
}
.ck-start a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--lg-rule-strong);
  background: var(--lg-wash);
  color: var(--lg-ink);
  font-family: var(--lg-sans);
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
}
.ck-start a:hover,
.ck-start a:focus-visible {
  border-color: var(--lg-fig);
  background: var(--lg-stamp);
  color: var(--lg-stamp-ink);
}
.ck-start .ck-start-primary {
  border-color: var(--lg-fig);
  box-shadow: inset 0 -3px 0 0 var(--lg-fig);
}
.ck-start .ck-start-primary span {
  font-size: 18px;
  line-height: 1;
}

/* 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(175px, .38fr) 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-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 16px;
}
.ck-find-heading label {
  font-family: var(--lg-serif);
  font-size: 17px;
  font-style: italic;
  font-variation-settings: "opsz" 17, "wght" 560;
  color: var(--lg-ink);
}
.ck-find-heading span {
  margin-top: 2px;
  font-family: var(--lg-sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--lg-ink-faint);
}
.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: normal;
  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 10px 0 20px;
  border: 0;
  border-left: 1px solid var(--lg-rule);
  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); }
.ck-find-go span { margin-left: 5px; font-size: 18px; line-height: 1; }

/* 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 {
  /* The count is a fact beside the kind, not the largest thing on the row (operator 2026-09-08: a bunch of numbers). */
  font: 600 15.5px/1.3 'Inter', system-ui, sans-serif;
  color: var(--muted);
  letter-spacing: 0;
}
.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: 15.5px; }
.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);
}
/* The note answers under the find line it belongs to. The world is a flex
   column with .ck-top at order 1 and .ck-find at order 2, so a note left at
   order 0 rose above the title (live, 2026-09-08). */
.ck-find + .ck-field-note { order: 2; }
.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;
  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 > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px 9px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 0 var(--lg-rule-strong);
}
.ck-flow li > a:hover,
.ck-flow li > a:focus-visible {
  color: var(--lg-ink);
  text-decoration: underline;
  text-decoration-color: var(--lg-fig);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  box-shadow: inset 0 -2px 0 0 var(--lg-fig);
}
.ck-flow-note {
  grid-column: 1 / -1;
  margin: -9px 0 0;
  color: var(--lg-ink-soft);
  font-family: var(--lg-sans);
  font-size: 15px;
  line-height: 1.45;
}
.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 WORKFIELD RESET ─────────────────────────────────────────────────────
   Folded here on 2026-09-06 from vealth-ledger-board.css, -forms.css and
   -me.css, which each carried a copy of it.

   This register was written for the front door, which loads vealth-next.css
   and nothing else. Every OTHER surface that wears the register also loads
   vealth-workfield.css, and that sheet lays the packet out as a NAMED-AREA
   GRID: `.wf-plate-head` is `display: contents` and every part of the plate
   carries a `grid-area`. None of that is a colour or a face, so the rules
   below it never overrode it, and the certificate arrived with its whole
   identity band piled into one cell at the right.

   Struck off once, here. The front door is untouched by construction: it draws
   no named areas to clear, and its own packet-depth rules
   (`html.vjs .ck[data-alt="packet"] ...`) outrank these, so the opened-out
   certificate keeps its columns.

   WHAT IS NOT HERE, ON PURPOSE. The three surfaces did not undo the same
   amount, and the differences are real decisions, not drift: the Board ranges
   the serial hard right and keeps the DO port's own top margin because its
   certificate opens out across the measure, and Me reads the DO word aloud
   where the others keep it for the screen reader alone. Those stay in their
   own sheets. */
.ck .wf-plate { grid-template-areas: none; }
.ck .wf-plate > *,
.ck .wf-plate-head > * { grid-area: auto; }
/* A state is a word on a line, never a capsule: the plate's sheet gives the
   chip a face, and a ruled page has no faces. */
.ck .wf-plate .wf-state { align-self: center; background: none; }

/* The identity band ranged LEFT, which Post, Fund and Me all want: the serial
   reads as the head of a document, not as a right-hand corner mark. The Board
   is deliberately absent: its certificate opens out and keeps the serial on
   the same right edge as its money column. */
body.lg-forms .ck .wf-plate-id,
body.lg-worker .ck .wf-plate-id {
  justify-self: auto;
  text-align: left;
  max-width: none;
}
body.lg-forms .ck .wf-plate .wf-doport,
body.lg-worker .ck .wf-plate .wf-doport { margin: 0; }

/* 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;
  align-self: center;
  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;
  /* The particulars are the book's own gloss-and-value table. The plate's own
     sheet tracks these labels as capitals; on a ruled page there is no tracked
     capital anywhere. (Folded from three sheets, 2026-09-06.) */
  text-transform: none;
  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.

   Me wears the same shape unconditionally, because a page whose whole subject
   is one packet is always at this depth. (Folded from vealth-ledger-me.css,
   2026-09-06.) */
html.vjs .ck[data-alt="packet"] .wf-plate,
body.lg-worker .ck .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,
body.lg-worker .ck .wf-plate .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; }
}

/* A reference section is the back matter of the book. The plate's sheet gives
   it a top border and a large margin; on a ruled page the scene rule above it
   already does that job. (Folded from two sheets, 2026-09-06. The Board keeps
   its own, which opens the back matter on a 2px rule of its own.) */
.ck .wf-reference { margin: 0; padding-top: 0; border-top: 0; }

/* A fold is a rule and a mark, which is what a fold is. (Folded from two
   sheets, 2026-09-06; Me states its own, which carries no bottom edge.) */
.ck details.disclosure {
  border-top: 1px solid var(--lg-rule);
  border-bottom: 1px solid var(--lg-rule);
}

/* ── 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); }
}

/* Figures are information, not decoration. Keep the lead number calm and let
   the title and price carry the book's serif emphasis. */
.ck-gauges > div:first-child dd { font-size: clamp(34px, 4vw, 60px); }
.ck-gauges dd { font-size: 20px; }
.ck :focus-visible { outline-color: var(--lg-focus); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

@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-start { margin-top: 20px; }
  .ck-start a { flex: 1 1 8.5rem; }
  .ck-gauges > div:first-child dd { font-size: 62px; }
  .ck-gauges > div { padding: 8px 0; }

  .ck-find { grid-template-columns: minmax(0, 1fr) auto; padding-left: 12px; }
  .ck-find-heading { grid-column: 1 / -1; padding: 11px 0 4px; }
  .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: 15.5px; }
  .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; }
}