/* ============================================================================
   hosystem v1 — the frozen Basis of Design as tokens + rules.
   Every value traces to design/basis-of-design.md; section tags cite it. Ported
   from the accepted design spike; the CDN body fonts are now self-hosted (§8).
   ========================================================================== */

/* ── §2 palette — three inks + paper, opacity ladder as resolved flats ─────── */
:root {
  --washi: #eef1ef;
  --sumi: #1f2123;
  --bero: #29618e;
  --gold: #a9832a;
  /* opacity-ladder resolved flats on washi (§2) */
  --sumi-70: #5d5f60;
  --sumi-40: #9b9e9d;
  --sumi-12: #d5d8d7;
  --bero-70: #648cab;
  --bero-40: #9fb7c8;
  --gold-40: #d2c5a0; /* superseded */
  --kachi: #040c13;   /* sumi × bero */
  --matsuba: #1b3117; /* bero × gold */

  /* ── §4 the step — the unit all motion is built from ── */
  --step-dur: 160ms;
  --step-ease: cubic-bezier(0.2, 0, 0, 1);
  --step-rise: 8px;
  --hold: 220ms;      /* hold between steps */
  --interval: 380ms;  /* constant sequence beat */
  --page-hold: 80ms;  /* §4 page transition: cut → 80 ms bare washi → one step */

  /* ── §9 the flip — 240 ms, symmetric halves, swap at 120 ms ── */
  --flip-dur: 240ms;

  /* ── §5 measure ── */
  --measure: 42rem;

  /* ── §14 the header — condensed band + deep-page crumb line. PROVISIONAL: tightened at
     judgment, exact paddings/heights land at the by-feel pass via ?tuners (§14). ── */
  --header-band: 40px;    /* condensed band height (§14) */
  --header-pad-x: 20px;   /* band padding 0 20px (§14) */
  --header-crumb: 24px;   /* deep-page crumb line height when revealed mid-page (§14) */
  --header-inner-max: 52rem;  /* §14 inner clamp 42→52rem (ledger 2026-07-07): the running head
                                 rides wider than the 42rem reading column so the name and the
                                 walk both fit. PROVISIONAL — land by feel via ?tuners. */
  --wordmark-size: 1.0625rem; /* §14 wordmark — sized to sit optically with the h20 koma against
                                 the 24px content band. PROVISIONAL — land by feel via ?tuners. */
}

/* ── §3 type — self-hosted faces (§8 no third-party requests) ──────────────── */
/* Source Serif 4 — 400 / 400 italic / 600 (§3) */
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/source-serif-4-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/source-serif-4-600.woff2") format("woff2");
}
/* Source Code Pro — 400 / 600 (§3) */
@font-face {
  font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/source-code-pro-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Code Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/source-code-pro-600.woff2") format("woff2");
}
/* piece-face subset (歩 と) prepended to the CJK stack for the faces only (§3) */
@font-face {
  font-family: "HoPiece"; font-weight: 400 700; font-display: swap;
  src: url("/fonts/piece-subset.woff2") format("woff2");
  unicode-range: U+6B69, U+3068; /* 歩, と */
}

:root {
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cjk: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --serif-cjk: "Source Serif 4", Georgia, var(--cjk);
}

/* ── base ──────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--serif);
  font-size: 1.0625rem;   /* §3 body */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: var(--measure); margin: 0 auto; padding: 2.5rem 1.25rem 0; } /* §5 measure 42rem */

/* ── §3 type scale ─────────────────────────────────────────────────────────── */
h1 { font-size: 1.75rem; line-height: 1.25; font-weight: 600; margin: 0 0 1rem; }
h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 600; margin: 2.5rem 0 1rem; } /* §5 rhythm */
h3 { font-size: 1.125rem; line-height: 1.4; font-weight: 600; margin: 1.5rem 0 0.5rem; }
p { margin: 0 0 1.25rem; }              /* §5 paragraphs 1.25rem */
ul, ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
li { margin: 0.25rem 0; }
code, kbd { font-family: var(--mono); font-size: 0.875em; background: none; }
/* §6 code/pre + tables degrade by panning internally — never push the page. Long mono
   lines and wide markdown tables scroll within their own box; the document never gains a
   horizontal scrollbar at any width. No frozen value governs this — it is the §6 rule
   "wrap, shrink, or pan internally" made real for narrow viewports. */
pre { overflow-x: auto; }
table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
/* Inline code carries long unbreakable tokens (file paths like
   Sources/SharibakoCLI/Support/DashboardIngestPrompt.swift, env keys, identifiers). Without
   this they set the line's min-content wider than a narrow phone, forcing the mobile layout
   viewport to expand (a horizontal-scroll failure). `anywhere` lets such a token wrap at any
   glyph only when it would otherwise overflow, and — unlike break-word — it feeds the wrap into
   intrinsic sizing so the paragraph never forces the page wide. Prose stays intact; `pre` is
   unaffected (white-space:pre governs there, and pre pans). §6 "wrap, shrink" made real. */
:not(pre) > code { overflow-wrap: anywhere; }
.caption { font-size: 0.8125rem; line-height: 1.5; color: var(--sumi-70); }
a { color: var(--bero); }
hr { border: 0; border-top: 1px solid var(--sumi-12); margin: 2rem 0; }

/* CJK faces — piece characters resolve HoPiece first, then plain mincho stack */
.cjk, .koma text { font-family: var(--serif-cjk); }

/* ── §3 registers ──────────────────────────────────────────────────────────── */
.register-discursive { font-family: var(--serif); color: var(--sumi); }
.register-procedural {                                   /* mono, §5 left rule */
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  border-left: 2px solid var(--sumi-40);
  padding-left: 1rem;
}
.register-procedural code { font-size: 0.875em; }
.register-emergent {                                     /* serif italic bero, left rule */
  font-family: var(--serif);
  font-style: italic;
  color: var(--bero);
  border-left: 2px solid var(--bero-40);
  padding-left: 1rem;
}
.register + .register { margin-top: 1.5rem; }            /* §5 blocks 1.5rem */

/* ── §3 marked term (resting look only) ────────────────────────────────────── */
.term {
  font: inherit; color: var(--sumi); background: none; border: 0; padding: 0;
  cursor: help;
  text-decoration: underline dotted 1px;
  text-decoration-color: var(--bero-70);
  text-underline-offset: 0.2em;
  position: relative; /* anchor the invisible ≥24 px hit area below */
}
/* Invisible pointer target: an absolutely-positioned overlay gives the inline term a
   ≥24 px-tall hit area (touch/pointer accessibility) WITHOUT altering the §3 resting box —
   it takes no layout space and paints nothing. Rendering at rest is pixel-identical. */
.term::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  min-height: 24px;
}
.term:focus-visible { outline: 2px solid var(--bero); outline-offset: 2px; }
.term[aria-expanded="true"] { text-decoration-style: solid; } /* §7 open: dotted → solid */
.term.met { text-decoration-color: var(--sumi-40); }          /* §7 met: recession by opacity */

/* ── §14 the header (variant D′, single-element — 2026-07-07 amendment) ──────────
   ONE header. Sticky, so it rests in its natural slot at the top (in flow — the slot is
   reserved, nothing reflows) and the SAME element docks at the top mid-page. header.js toggles
   `.gone`: departed = the §4 step (8 px rise + fade), present = at rest / docked. z-index 5
   (the §7 card stays 10). prefers-reduced-motion: present/absent 0 ms. */
.revealed-header {
  position: sticky; top: 0; z-index: 5; background: var(--washi);
  transition: opacity var(--step-dur) var(--step-ease), transform var(--step-dur) var(--step-ease);
}
.revealed-header.gone { opacity: 0; transform: translateY(-8px); pointer-events: none; } /* §4 step */
.rh-inner {
  max-width: var(--header-inner-max); margin: 0 auto;  /* §14 clamp 52rem (ledger 2026-07-07);
                                                          the reading column stays 42rem */
  height: var(--header-band); padding: 0 var(--header-pad-x);
  display: flex; align-items: center; gap: 18px;                   /* §14 door gap 18 px */
  overflow-x: auto; scrollbar-width: none;  /* pan-capable, never document scroll (below) */
}
.rh-inner::-webkit-scrollbar { display: none; }
/* §14 home link: koma + wordmark in one anchor, one hit target. Extra air to its right
   (14px on top of the 18px inner gap = 32px) sets the serif name apart from the mono door
   row — name and nav read as two things: the wordmark is the site speaking its own name,
   not a seventh door. */
.rh-brand { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; text-decoration: none; min-height: 24px; }
.rh-brand .koma { display: block; }
/* the wordmark — the site's name, lowercase, quiet serif beside the koma (§3 serif 600,
   §2 sumi 1.00). No gold, no new inks. */
.rh-wordmark { font-family: var(--serif); font-weight: 600; font-size: var(--wordmark-size); line-height: 1; color: var(--sumi); }
/* §12 touch affordance — on the wordmark TEXT only; the koma never gets an underline */
.rh-brand:hover .rh-wordmark, .rh-brand:focus-visible .rh-wordmark { text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; }
.rh-brand:focus-visible { outline: 1px solid var(--sumi); outline-offset: 2px; }
.rh-doors { display: flex; gap: 18px; font-family: var(--mono); font-weight: 400; font-size: 0.8125rem; line-height: 1; }
/* min-height:24px gives each door a ≥24px touch target inside the 40px band; inline-flex centres
   the 0.8125rem/1 text so the frozen type, gap, and band height are visually unchanged — only the
   invisible hit area grows (no background per §14). */
.rh-doors a { color: var(--sumi-70); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }             /* never sumi@.40; no gold */
.rh-doors a[aria-current="page"] { color: var(--sumi); }                  /* current sumi 1.00 */
.rh-doors a:hover, .rh-doors a:focus-visible { text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; } /* §12 touch */
.rh-doors a:focus-visible { outline: 1px solid var(--sumi); outline-offset: 2px; }
/* the walk miniature — rides right of the doors. §8 inks, a pointer only, no gold. */
.rh-mini { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; }
.rh-mini svg { display: block; }
.rh-steps { color: var(--sumi-40); }
/* the client path — right-aligned, set apart, never a door ink state */
.rh-engage { margin-left: auto; font-family: var(--mono); font-size: 0.8125rem; color: var(--sumi-70); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.rh-engage[aria-current="page"] { color: var(--sumi); }
.rh-engage:hover, .rh-engage:focus-visible { text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; }
.rh-engage:focus-visible { outline: 1px solid var(--sumi); outline-offset: 2px; }
/* the condensed crumb line — deep pages only, shown when revealed mid-page (§12 grammar) */
.rh-crumb {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--header-pad-x);
  height: var(--header-crumb); display: flex; align-items: center;
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5;
  white-space: nowrap; overflow: hidden;
}
.rh-crumb[hidden] { display: none; }
.rh-crumb .crumb-seg { color: var(--sumi-70); }
.rh-crumb a.crumb-seg { color: var(--sumi-70); text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; }
.rh-crumb .crumb-current { color: var(--sumi); text-decoration: none; }
.rh-crumb .crumb-sep { color: var(--sumi-40); }
.rh-rule { border-top: 1px solid var(--sumi-12); }                        /* §14 hairline boundary at base */
/* ── §14 narrow degradation (ledger 2026-07-07, order mandated): the wordmark hides FIRST,
   then the miniature's step-count text drops (nodes stay). The doors never crush or wrap:
   .rh-inner is pan-capable (above), so in the rare remainder — viewports below the doors'
   own min-content (642px), or a many-digit step count at a boundary width — the row pans
   within the header and the document NEVER scrolls sideways. Cutoffs measured against real
   min-content widths (full row 777px; w/o wordmark ~678px, + count-length headroom). ── */
@media (max-width: 776px) {
  .rh-wordmark { display: none; }
  .rh-brand { margin-right: 0; }  /* the extra air rode with the name */
}
@media (max-width: 680px) {       /* near the old 42rem measure the count text yields */
  .rh-steps { display: none; }    /* the two walk nodes stay */
}
@media (prefers-reduced-motion: reduce) { .revealed-header { transition: none; } }

/* §14 scroll-margin-top = revealed height + 12 px on headings + crumb (+ the §13 depth blocks
   the card lands on). Held at band + crumb + 12 so an anchored jump clears the fixed header. */
h1, h2, h3, .crumb, .crumb-line, .depth-block {
  scroll-margin-top: calc(var(--header-band) + var(--header-crumb) + 12px);
}

/* ── front page onramp (site-authored, terse — §0/§2 vision) ───────────────── */
.onramp .lede { font-size: 1.375rem; line-height: 1.4; margin: 0 0 1.5rem; }
.claim { border-left: 2px solid var(--bero-40); padding-left: 1rem; font-style: italic; color: var(--bero); margin: 0 0 2rem; }
.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.9375rem; text-decoration: none; color: var(--sumi);
  border: 1px solid var(--sumi-40); padding: 0.5rem 0.875rem;
}
.cta:hover { border-color: var(--sumi); }
.cta .koma { display: block; }
.doors-three { display: grid; gap: 1.25rem; margin: 2.5rem 0; }
.door-card { border-top: 1px solid var(--sumi-12); padding-top: 0.75rem; }
.door-card h3 { margin: 0 0 0.25rem; }
.door-card p { margin: 0 0 0.5rem; }
/* front-page paths as chips — the CTA's grammar (border, padding, §5 link ink), scaled down */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 0.8125rem; text-decoration: none; color: var(--sumi);
  border: 1px solid var(--sumi-40); padding: 0.35rem 0.7rem;
}
.chip:hover, .chip:focus-visible { border-color: var(--sumi); }
.chip:focus-visible { outline: 1px solid var(--bero); outline-offset: 2px; }

/* ── index lists (Framework / Skills / Walk / Writing) — terse chrome (constraint #0);
      inks from §2 tokens, type from §3 tokens, rules 1px sumi@.12 (§2 ladder) ───────── */
/* /start/ — numbered first steps: a touch more separation for multi-line steps */
.steps { margin: 1.25rem 0; }
.steps li { margin: 0 0 0.75rem; }

.doc-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.doc-list li { border-top: 1px solid var(--sumi-12); padding: 0.6rem 0; margin: 0; }
.doc-list li:last-child { border-bottom: 1px solid var(--sumi-12); }
.doc-list a { text-decoration: none; color: var(--sumi); }
.doc-list a:hover { text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; }
.doc-list .meta { font-family: var(--mono); font-size: 0.75rem; color: var(--sumi-70); }
.skill { border-top: 1px solid var(--sumi-12); padding: 1rem 0; }
.skill:last-of-type { border-bottom: 1px solid var(--sumi-12); }
.skill h3 { margin: 0 0 0.35rem; font-family: var(--mono); font-size: 1rem; }
.skill p { margin: 0 0 0.5rem; }
.skill .anatomy { font-family: var(--mono); font-size: 0.75rem; color: var(--sumi-70); }
.tmpl-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.tmpl-list li { border-top: 1px solid var(--sumi-12); padding: 0.5rem 0; display: flex; justify-content: space-between; gap: 1rem; }
.tmpl-list li:last-child { border-bottom: 1px solid var(--sumi-12); }
.tmpl-list .dl { font-family: var(--mono); font-size: 0.8125rem; }

/* ── §5 documents — frontmatter as a typed ledger ──────────────────────────── */
.ledger { border: 1px solid var(--sumi-40); margin-bottom: 2.5rem; font-family: var(--mono); font-size: 0.875rem; }
.ledger-row { display: grid; grid-template-columns: 9rem 1fr; padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--sumi-12); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-key { color: var(--sumi-70); }
/* min-width:0 lets the 1fr value track shrink below its longest token, and overflow-wrap lets
   that token (e.g. a 32-char git SHA in the colophon ledger) break instead of forcing the grid —
   and the mobile viewport — wider than a phone. The frozen §5 `9rem + 1fr` tracks are untouched;
   this only governs how a long value degrades (§6 "wrap, shrink"). */
.ledger-val { color: var(--sumi); min-width: 0; overflow-wrap: anywhere; }
.ledger-val ul { margin: 0; padding-left: 1.1rem; }
.ledger-val li { margin: 0.1rem 0; }

/* §5 state mark — 12 px solid koma before the status value */
.state-mark { display: inline-block; margin-right: 0.5rem; vertical-align: -2px; line-height: 0; }
.state-mark .koma { display: block; }
.state-label { color: var(--sumi); } /* adjacent labels full sumi */

/* §5 chain links — solid underline = link (dotted = marked term) */
.chain-link { color: var(--sumi); text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; }
.chain-link.supersedes-marker { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }

/* §5 supersession reveal — facing panes inside a bordered extension of the header */
.supersession { border: 1px solid var(--sumi-40); border-top: 0; margin: -2.5rem 0 2.5rem; padding: 1rem 0.875rem; display: none; }
.supersession.open { display: block; }
.supersession-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 40rem) { .supersession-panes { grid-template-columns: 1fr; } } /* §5 stacks below 40rem */
.pane { font-size: 0.9375rem; }
.pane h4 { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.8125rem; }
.pane-fell { border-left: 2px solid var(--gold-40); padding-left: 0.875rem; color: var(--sumi-70); }
.pane-replaced { border-left: 2px solid var(--gold); padding-left: 0.875rem; color: var(--sumi); }

/* ── §6 diagrams — chain container ─────────────────────────────────────────── */
.chain-figure { margin: 2.5rem 0; text-align: center; container-type: inline-size; }
.chain-figure figcaption { margin-top: 0.75rem; }
/* §6 scale honesty: full by default; below a 480 px rendered column, swap to the
   header-scale chain (both are emitted as static SVGs — this only toggles visibility).
   The container query keys on the figure's own inline size = the reading column width. */
.chain-header-link { display: none; text-decoration: none; }
@container (max-width: 480px) {
  .chain-figure .chain-full { display: none; }
  .chain-figure .chain-header-link { display: inline-block; }
}
/* §6 chain nodes as doors — §12 door-link affordance carried on the label only; the
   diagram never restyles. Underline the node's title on hover/focus; focus-visible
   outlines the hit area. Node ink and geometry are untouched. */
.chain-node { cursor: pointer; text-decoration: none; }
.chain-node .chain-node-label { text-decoration: none; }
.chain-node:hover .chain-node-label,
.chain-node:focus-visible .chain-node-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bero-70);
}
.chain-node:focus { outline: none; }
.chain-node:focus-visible { outline: 1px solid var(--sumi); outline-offset: 2px; }

/* ── §7 definition-on-touch card ───────────────────────────────────────────── */
.defcard {
  position: absolute; z-index: 10;                 /* the page's only elevated layer */
  width: min(24rem, var(--col, 40rem) - 1rem);
  padding: 0.625rem 0.875rem;
  background: var(--washi); border: 1px solid var(--sumi-40); border-radius: 0; box-shadow: none;
}
.defcard .plain { font-family: var(--serif); font-size: 0.9375rem; line-height: 1.55; color: var(--sumi); margin: 0; }
.defcard .full { display: inline-block; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.8125rem; color: var(--bero); }

/* ── §12 breadcrumb — one line of short ids, top of the content column ───────── */
/* mono 400 0.8125rem/1.5 · never wraps (crumb.js collapses on overflow) · margin 0 0 1rem */
.crumb { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; margin: 0 0 1rem; white-space: nowrap; overflow: hidden; }
.crumb .crumb-seg { color: var(--sumi-70); }          /* ancestors sumi@.70 */
.crumb a.crumb-seg {                                   /* §5 link affordance — solid 1px bero@.70 */
  color: var(--sumi-70);
  text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em;
}
.crumb .crumb-current { color: var(--sumi); text-decoration: none; } /* where you stand — full ink, plain */
.crumb .crumb-sep { color: var(--sumi-40); }           /* spaced slash */
.crumb .crumb-ell { color: var(--sumi-40); }           /* collapsed middles — non-interactive */
.crumb a.crumb-seg:focus-visible { outline: 1px solid var(--sumi); outline-offset: 2px; }

/* ── §8 the trail — footer strip ───────────────────────────────────────────── */
.trail { margin-top: 4rem; border-top: 1px solid var(--sumi-12); padding: 12px 0 8px; }
.trail svg { display: block; max-width: 100%; height: auto; }
/* §12 trail doors navigate: cursor pointer + focus-visible 1px sumi outline offset 2px on
   the door hit area. The resting record look is untouched — no resting underline. */
.trail svg a { cursor: pointer; }
.trail svg a:focus-visible { outline: 1px solid var(--sumi); outline-offset: 2px; }

/* ── colophon rule / page footer ───────────────────────────────────────────── */
.colophon-rule { border-top: 1px solid var(--sumi-12); margin-top: 1rem; padding: 1rem 0 2.5rem; }

/* ── live arc tree (§6 live instances / §9 flip) ───────────────────────────── */
.arc { display: flex; gap: 1.5rem; align-items: flex-end; margin: 1.5rem 0; flex-wrap: wrap; }
.arc-node { text-align: center; font-family: var(--mono); font-size: 0.75rem; color: var(--sumi-70); }
.arc-node a { color: inherit; text-decoration: none; }
.arc-node .flip { display: inline-block; }
.arc-label { display: block; margin-top: 0.35rem; }

/* ── §9 the flip — 2D vertical squash, symmetric halves, swap at 120 ms ─────── */
.flip { position: relative; display: inline-block; }
.flip .face { position: absolute; inset: 0; transform-origin: 50% 50%; }
.flip .face-front { position: relative; }          /* front holds layout box */
.flip .face-promoted { transform: scaleY(0); }
.flip.flipping .face-front { animation: flip-front var(--flip-dur) forwards; }
.flip.flipping .face-promoted { animation: flip-promoted var(--flip-dur) forwards; }
.flip.promoted .face-front { transform: scaleY(0); }
.flip.promoted .face-promoted { transform: scaleY(1); }

@keyframes flip-front {
  0%   { transform: scaleY(1); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  50%  { transform: scaleY(0); }
  100% { transform: scaleY(0); }
}
@keyframes flip-promoted {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  100% { transform: scaleY(1); }
}

/* ── §4 the step — arrival utility; sequence stagger via --i ────────────────── */
.step { animation: step-in var(--step-dur) var(--step-ease) both; }
.seq > * { animation: step-in var(--step-dur) var(--step-ease) both; animation-delay: calc(var(--i, 0) * var(--interval)); }
@keyframes step-in {
  from { opacity: 0; transform: translateY(var(--step-rise)); }
  to   { opacity: 1; transform: translateY(0); }
}
/* card arrival = one §4 step (§7 timing amendment, propagation ledger) */
.defcard.arriving { animation: step-in var(--step-dur) var(--step-ease) both; }

/* ── prefers-reduced-motion — everything at 0 ms / instant swap (§4, §7, §9) ── */
@media (prefers-reduced-motion: reduce) {
  .step, .seq > *, .defcard.arriving { animation: none !important; }
  .flip.flipping .face-front { animation: none; transform: scaleY(0); }
  .flip.flipping .face-promoted { animation: none; transform: scaleY(1); }
}

/* ── glossary index ────────────────────────────────────────────────────────── */
.glossary dt { margin-top: 1.25rem; font-family: var(--mono); }
.glossary dt a { color: var(--sumi); text-decoration: none; }
.glossary dt a:hover, .glossary dt a:focus-visible { text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; }
.glossary dd { margin: 0.25rem 0 0; padding-left: 0; }
.glossary dd .plain { color: var(--sumi-70); font-style: italic; }

/* ── §13 the term node — one node per glossary term, GOLD APPEARS NOWHERE ─────── */
/* crumb line carries the §12 crumb + the inline branch-return (filled by branch.js) */
.crumb-line { display: flex; align-items: baseline; margin: 0 0 1rem; }
.crumb-line .crumb { margin: 0; min-width: 0; flex: 0 1 auto; }
.branch-slot { flex: 0 0 auto; }
.branch-slot[hidden] { display: none; }
.branch-return {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--bero); cursor: pointer;
  padding-left: 0.5rem; text-decoration: underline solid 1px;
  text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; white-space: nowrap;
}

/* the depth dial — progressive disclosure control (§13) */
.dial { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.dial:focus-visible { outline: 1px solid var(--bero); outline-offset: 3px; }
.dial-cap { font-family: var(--mono); font-size: 0.75rem; color: var(--sumi-40); }
.dial-rail { display: inline-flex; align-items: center; }
.dial-tick {
  font-family: var(--mono); font-weight: 600; font-size: 0.8125rem; color: var(--sumi-40);
  min-width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
}
.dial-tick.reached { color: var(--sumi-70); }                    /* reached sumi@.70 */
.dial-tick.current { color: var(--sumi); box-shadow: inset 0 0 0 1px var(--sumi-40); } /* current 1.00 + 1px@.40 box */
.dial-tick + .dial-tick { margin-left: 1.25rem; position: relative; }   /* 1.25rem between ticks */
.dial-tick + .dial-tick::before { content: ""; position: absolute; left: -1.25rem; top: 50%; width: 1.25rem; height: 1px; background: var(--sumi-12); } /* line 1px sumi@.12 */
.dial-btn {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--bero);
  background: none; border: 0; padding: 0.2rem 0.1rem; min-height: 1.6rem; cursor: pointer;
  text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em;
}
.dial-btn:disabled { display: none; }                            /* at a bound → simply not shown */

/* depth blocks — 1 = plain cut lead, 2 & 3 = body; appended one §4 step at a time */
.depth-block { margin: 0 0 1rem; }
.depth-block[hidden] { display: none; }
.depth-tag { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--sumi-40); margin-bottom: 0.25rem; }
.depth-1 .depth-body { font-size: 1.1875rem; line-height: 1.55; }        /* plain cut lead (§13) */
.depth-2 .depth-body, .depth-3 .depth-body { font-size: 1.0625rem; line-height: 1.65; }
.depth-body p:last-child { margin-bottom: 0; }

/* typed relationship lists at the foot — the navigable layer (§13) */
.rels { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--sumi-12); }
.rel-group { margin-bottom: 1rem; }                              /* group gap 1rem */
.rel-group:last-child { margin-bottom: 0; }
.rel-label { display: block; font-family: var(--mono); font-weight: 600; font-size: 0.8125rem; color: var(--sumi-70); margin-bottom: 0.25rem; }
.rel-derived { font-weight: 400; color: var(--sumi-40); }        /* "(derived)" 400 sumi@.40 */
.rel-items { font-family: var(--serif); }                        /* entries serif; links = §5 chain-link */

/* the defining-documents citations line (§13) */
.cites { font-family: var(--mono); font-size: 0.8125rem; color: var(--sumi-70); margin-top: 1.25rem; }

/* ── practitioner identity — §3 type, quiet (item 3) ────────────────────────── */
.bio { font-size: 0.9375rem; line-height: 1.55; color: var(--sumi-70); }
.bio a { color: var(--sumi-70); text-decoration: underline solid 1px; text-decoration-color: var(--bero-70); text-underline-offset: 0.2em; }