/* ═══════════════════════════════════════════════════════════════════════
   [hidden] MEANS HIDDEN

   `display: grid` (or flex, or block) in a class rule beats the browser's
   default `[hidden] { display: none }`, because a stylesheet rule outranks the
   UA sheet. Set `el.hidden = true` on such an element and nothing happens: the
   attribute is there, the element is still on screen, and the bug is invisible
   in the DOM.

   This repository has now re-derived that four times and patched it per
   component each time — .forms-row, .forms-group, .chat-resume, .chat-chips —
   and the fourth was the Briefings signup, where a successful signup hid the
   form and the form stayed exactly where it was, beside its own confirmation.

   One rule, at the top, ends the class. The three per-component patches below
   are now redundant and harmless. `!important` is the canonical exception
   here: every modern reset does exactly this, for exactly this reason.
   ═══════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   The typeface

   The Sahvelo wordmark is a clean grotesque and is approved. Until now the
   stack named Inter and no font was loaded, so the mark resolved to system-ui
   and rendered as a different face on every operating system — which is the
   one thing a wordmark may not do.

   Inter is now self-hosted: one variable woff2, 48KB, latin subset, covering
   every weight the site uses. Self-hosted rather than linked, because a
   third-party request on every page is a dependency, a privacy question and a
   render-blocking round trip, and none of those are worth a font.

   Inter is licensed under the SIL Open Font License 1.1, which permits
   bundling and redistribution. The file is public/fonts/inter-latin.woff2.

   `font-display: swap` renders the fallback first and swaps. A face that
   arrives late is better than a headline that is not there at all — this is a
   product people read in the worst week of their lives, on whatever connection
   they have.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ═══════════════════════════════════════════════════════════════════════
   Legacy — one stylesheet, one system.

   This file replaced three overlapping ones. The original guide styles, a
   V1 homepage system and a V2 homepage system had accumulated on top of each
   other, each redefining `body`, `.hero`, `.site-footer` and `.trust-list`,
   and the winner depended on source order. The V1-only rules now live in
   v1-reference.css, loaded by the archived V1 page alone.

   Rules that have not changed and should not:
     1. No red. Anything that stops or warns is warm brown, never alarm.
     2. Whitespace is the primary design element.
     3. No animation beyond a short fade, and none at all under
        prefers-reduced-motion.
     4. No badges, counters, streaks, progress celebrations or "almost there".
     5. Tap targets ≥ 44px; option buttons ≥ 56px and full-width on mobile.

   The palette is unchanged — warm paper, chestnut accent — with two contrast
   corrections noted where they occur.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────── */
  /* THE PALETTE IS THE QUIET BROWN AND CREAM. Founder decision, 2026-09-10,
     on reviewing the reconstruction: the warm editorial direction approved
     2026-09-07 is the foundation; the redder chestnut tried in between is
     not approved, and no other palette is to be invented. See
     docs/SAHVELO-DESIGN-AUTHORITY.md.
     The direction it superseded was Direction D's green.
     Direction D moved off the chestnut axis because beige plus an invented
     name plus a serif read as European luxury provenance. That diagnosis was
     about the SERIF and the beige together; the answer taken here keeps the
     warmth and removes the serif instead — the wordmark and display face are
     a grotesque (Libre Franklin), so the warmth reads as paper rather than as
     a wine label.
     The deciding argument is that the identity and the interface can now share
     one palette instead of two that drift. The Overlap mark is two chestnut
     planes and the clearing between them; every surface below is paper, ink,
     rule or chestnut — the same four roles the mark itself is built from.
     Contrast re-derived rather than inherited (WCAG AA, 4.5:1 floor):
       ink       on paper       15.9:1
       ink-mute  on paper        5.51:1
       ink-mute  on paper-soft   5.10:1
       ink-mute  on accent-wash  4.84:1
       accent    on paper        8.07:1
     See docs/design/CLEARING-SYSTEM.md. */
  --paper: #fbfaf8;          /* Page — warm off-white, never pure #fff */
  --paper-soft: #f4f1ec;     /* Section wash */
  --paper-deep: #ebe6dd;     /* Quiet fills, table stripes */
  --surface: #fdfcfa;        /* Raised surface on a washed section. Plaster,
                                not stark white (founder refinement 2). */
  --ink: #221e19;            /* Primary text — warm dark, never #000 */
  --ink-soft: #4a4640;       /* Secondary text */
  --ink-mute: #6b6660;       /* Tertiary text. Verified AA against all four
                                surfaces this palette uses: 5.51 on paper,
                                5.10 on the wash, 4.84 on the accent wash,
                                5.10 on the atmospheric wash. */
  --rule: #ddd7cd;           /* Hairlines */
  --rule-strong: #c9c1b4;    /* Table and card borders */
  --rule-firm: #221e19;      /* The structural rule — a real edge, not a tint */
  --accent: #5b4a3a;         /* Chestnut — the mark's own colour. Semantic:
                                released, settled, verified. Never decorative. */
  --accent-deep: #3f3226;    /* Hover / pressed */
  --accent-wash: #f0ebe3;    /* Tinted background for accent surfaces */
  /* The atmospheric second, used only for air and orientation. It carries no
     state, never marks an action, and never appears on a rail. In the warm
     system it is a neutral taupe rather than a second hue: a brown brand with
     a slate-blue second reads as two brands sharing a page. */
  --air: #6b6660;
  --air-wash: #f4f1ec;
  --accent-hairline: rgba(91, 74, 58, 0.35);  /* The accent at a hairline's
                                weight, for an action link's underline. Tracks
                                --accent by hand; there is one copy and this is it. */
  --warn: #7d5f33;           /* "needs attention" — ochre, never red. Darkened from
                                #8a6a3a, which fell to 4.43:1 against the washed
                                section background it is most often used on. */
  --halt: #6e5443;           /* halt screens only */
  /* The one blue. Founder refinement 2 (2026-09-10): the muted blue of the
     artwork in the reference interiors, used the way that artwork is used
     in the room: one controlled moment. It marks the action that starts a
     conversation with Sahvelo and nothing else. Never a second brand
     colour; never scattered. White text on it is 7.2:1.
     Founder pass 3 (2026-09-10): the blue left the header, where it read
     as a brand colour, and is reserved for the Handbook's cover, where it
     reads as the artwork in the room. */
  --accent-blue: #3c5798;
  --accent-blue-deep: #30467d;

  /* ── Type ───────────────────────────────────────────────────────────────
     Two stacks, four roles. The stacks are what is installed; the roles are
     what each is for, and the roles are what the rest of this file uses.

     That split is the point. Sahvelo's typography reads as an editorial or
     legal publication beside a clean modern wordmark, and correcting that is a
     design decision Jordan and ChatGPT will make. When they do, it should be
     four token edits and not four hundred selector edits — so nothing below
     names a stack directly.

     The direction set on 2026-08-20: the wordmark is the anchor, the reading
     experience moves to the grotesque, and the serif becomes editorial
     emphasis rather than the default. Warm and considered, not sterile.
     ───────────────────────────────────────────────────────────────────── */

  /* The stacks */
  --serif: "Charter", "Iowan Old Style", "Source Serif 4", Georgia,
    "Times New Roman", serif;
  --sans: "Inter", "SF Pro Text", -apple-system, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* The roles. Change these, not the selectors. */
  --font-wordmark: var(--sans);  /* The mark. Approved; do not repoint. */
  --font-display: var(--serif);  /* Page headlines only — editorial emphasis. */
  --font-body: var(--sans);      /* Everything a reader reads at length. */
  --font-ui: var(--sans);        /* Product, navigation, controls, labels. */
  --font-code: var(--mono);      /* Citations and identifiers. */

  /* Headline tracking, in one place rather than on every heading. Charter at
     600 with −0.02em was set for a serif-dominant page; it stays with the
     serif so the display role keeps its own measure. */
  --track-display: -0.015em;
  --track-ui: 0;
  /* Direction D tracks the grotesque as well, which the previous direction did
     not. These are the only negative values the system may use, and they are
     named so that a rule can never invent its own — the invariant in
     src/typography.test.ts is what keeps that true. */
  --track-grotesque: -0.021em;  /* product page headlines set in the sans */
  --track-tight: -0.019em;      /* module and card titles */
  --track-flat: -0.004em;       /* navigation, buttons, dense UI */
  /* The wordmark has its own stack. The editorial serif is right for a
     headline and wrong for a company name — it read as a pottery or a wine
     label rather than a product. This is a restrained grotesque, named
     explicitly rather than left to system-ui, because a mark that resolves to
     a different face on every operating system is not a mark. */
  --wordmark: var(--font-wordmark);

  /* ── Rhythm ─────────────────────────────────────────────────────────── */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  /* R3 has no rounded corners. The rounding was doing the softening that
     hierarchy, spacing and restraint should be doing, and it made every module
     read as a card. Kept as tokens so a component can opt back in deliberately
     rather than by inheritance. */
  --radius: 0;
  --radius-lg: 0;
  /* One target size, everywhere something can be pressed. */
  --tap: 44px;

  /* ── Measure ────────────────────────────────────────────────────────── */
  /* 76rem, not 80. At an exactly-1280px viewport an 80rem wrap left only the
     1.5rem gutter on each side, so the page ran to the glass at the commonest
     laptop width. */
  --wrap-wide: 76rem;
  --wrap-narrow: 46rem;
  --rail-width: 16.5rem;
  --prose-measure: 44rem;

  /* ── Aliases kept so the guided-flow styles below resolve unchanged ─── */
  --bg: var(--paper);
  --line: var(--rule);
  --accent-soft: var(--accent-wash);
  --warn-soft: var(--paper-soft);
  --color-paper: var(--paper);
  --color-paper-soft: var(--paper-soft);
  --color-paper-deep: var(--paper-deep);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-ink-mute: var(--ink-mute);
  --color-rule: var(--rule);
  --color-accent: var(--accent);
  --color-link: var(--accent);
  --color-link-hover: var(--ink);
  --color-warn: var(--warn);
  --color-halt: var(--halt);
  --color-bg-subtle: var(--paper);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-border: var(--rule);
  /* Kept so the guided-flow rules below resolve unchanged. New rules should
     use the role tokens above; these two are the old names for the stacks. */
  --font-serif: var(--serif);
  --font-sans: var(--sans);
  --font-mono: var(--mono);
  --max-col: min(34rem, 100%);
  --max-handbook: min(42rem, 100%);

}
/* ═══════════════════════════════════════════════════════════════════════
   Reset and base
   ═══════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Sahvelo's prose is full of things with no space in them — statute
     citations, form numbers, department addresses. A 39-character state tax
     mailbox pushed past a 320px screen on the New Jersey page, and nothing in
     the stylesheet had an opinion about it.

     break-word rather than break-all or anywhere: an ordinary word still wraps
     at its space and only a run with no break opportunity in it is broken, so
     no sentence in the product changes shape. This is the baseline; it does
     not stop a table or a code block needing its own treatment. */
  overflow-wrap: break-word;
}
/* The page headline is where the serif earns its place: one editorial note at
   the top of a page, against a clean reading experience underneath. Structural
   headings are navigation, not emphasis, and belong to the UI role.

   R3 narrowed "page" to "editorial page". A serif masthead over an invented
   name is the luxury-provenance read this direction exists to remove, so the
   product surfaces — homepage, Handbook, state and glossary — speak in the
   grotesque, and the serif is kept for long-form guidance where it is doing a
   reading job rather than a branding one. Scoped by body class below. */
/* The homepage's editorial notes join this selector rather than declaring
   the role again: the name of each area at the head of its section, the
   numeral of a planning essential, and the Handbook's cover title and page
   headings, which are set in the book's own face. The
   rule that structural headings stay in the UI face is about SIZE, and these
   are the largest thing in their section, the headline of the thing a reader
   is looking at. The count of display uses is a ceiling that has to be argued
   past, and src/typography.test.ts holds it. */
h1,
.home-h2,
.home-seq-title,
.home-proof-n,
.home-story h3,
.home-sheet-title,
.hbk-cover-name,
.hbk-cal-n,
/* A Journal article's title, on the landing and in the homepage module. It is
   the editorial note on its row, which is what this role is for. Added to the
   one rule that grants the serif rather than declaring it again: the budget in
   src/typography.test.ts counts DECLARATIONS, so a second copy would read as
   the direction spreading even though it is the same role. */
.jr-row-title,
.jr-lead-title,
.journal-lead-title,
.lk-title,
.hbk-page-h {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
/* The product surfaces. Editorial pages (.page-topic) keep the serif h1. */
.page-handbook h1,
.page-state h1,
.page-glossary h1 {
  font-family: var(--font-ui);
  letter-spacing: var(--track-grotesque);
}
h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: var(--track-ui);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 var(--space-2); }
a { color: var(--accent); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0;
}
/* `tabindex="-1"` is never reached by keyboard. It is set by script on a
   heading so that focus — and therefore a screen reader's reading position —
   moves to the new content after a client render or an in-page jump. Chromium
   treats that programmatic focus as `:focus-visible`, which drew a heavy
   accent box around the H1 of every Handbook screen and around the target of
   every rail link. The focus move is the accessibility behaviour and is kept;
   the ring on it was an artefact. Anything a person can actually tab to is
   unaffected — the selector above still matches every positive tabindex. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { max-width: 100%; }
table { border-collapse: collapse; }
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 200;
}
.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--paper);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  text-decoration: none;
}
/* ═══════════════════════════════════════════════════════════════════════
   Layout containers
   ═══════════════════════════════════════════════════════════════════════ */

.wrap {
  width: 100%;
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.wrap-wide { max-width: var(--wrap-wide); }
.wrap-narrow { max-width: var(--wrap-narrow); }
main { display: block; }
/* ═══════════════════════════════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 248, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header-inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
/* ── The lockup ────────────────────────────────────────────────────────
   The Overlap mark and the name, set as one object rather than an icon
   dropped beside text. Three measurements do that work, and all three are
   derived from the wordmark rather than chosen:

   1. SIZE. The mark stands 1.06 × the wordmark's cap height. Inter's cap is
      0.727em, so the mark is 0.77em of the lockup's own font size. Matched to
      the cap rather than to the em box, because the em box includes an
      ascender and a descender the word does not visibly use, and a mark
      matched to it always looks small.
   2. ALIGNMENT. `align-items: center` with `line-height: 1` centres the mark
      on the CAP, not on the line box — with line-height 1 those two centres
      coincide in Inter, which is why the wordmark's line-height is not a
      loose convenience value.
   3. SPACING. 0.4em of the lockup's font size. Optical, not metric: the
      mark's right edge is a plane and the S's left edge is a curve, so equal
      metric spacing reads as too much.

   The mark takes the ink, not the accent. The accent means one thing in this
   product — released, settled, verified — and a permanent header ornament is
   none of those. A chestnut mark next to an ink word is also two colours
   where the reader should see one object.                                  */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  flex: none;
  font-size: 1.375rem;
}
.wordmark-text {
  font-family: var(--font-wordmark);
  /* A sans at the serif's size reads larger, so it comes down a step. Medium
     rather than semibold, and a hair of positive tracking: enough to look
     set rather than typed, well short of the spaced-out lifestyle-brand
     letterform this is moving away from. */
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}
.logo-mark {
  flex: none;
  height: 0.77em;
  width: auto;
  display: block;
}
.wordmark:hover { color: var(--accent); }
/* The footer signs off with the name alone. The lockup is the primary
   identity anchor and it lives in one place; a second one at the foot of
   every page is repetition, and repetition is not recognition. */
.wordmark-footer { font-size: 1.25rem; }
/* The panels hang from the nav, not from their own trigger. Hung from the
   trigger, the rightmost panel ran off the right edge of a 1280px window;
   right-aligned instead, it ran off the left. Anchored to the nav they all
   start at the same place, never overflow either edge, and the menu reads as
   one surface rather than three that move about. */
/* The nav is a row of two things: the content navigation, and the actions at
   its right end. Both are inside it so one piece of markup is the desktop row
   and the phone drawer (founder review, 2026-09-22). */
.primary-nav { flex: 1; position: relative; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}
.nav-item { position: static; flex: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 0;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--ink); background: var(--paper-soft); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-chevron {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
}
.nav-link[aria-expanded="true"] .nav-chevron { transform: translateY(1px) rotate(-135deg); }
/* One panel per world, holding the same editorial groups the world's index
   page uses. It is wide because it is a menu of ideas rather than a list of
   pages, and it is capped at 52rem because a menu that covers the article
   underneath it is an overlay, not a menu. */
.nav-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  width: max-content;
  max-width: min(52rem, calc(100vw - 3rem));
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px -18px rgba(34, 30, 25, 0.35);
  z-index: 120;
  /* After a Death carries seven groups. On a short laptop window the panel
     would run off the bottom of the screen with no way to reach the last of
     them. */
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-panel-inner { padding: 1.35rem 1.5rem 1.25rem; }
.nav-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(11rem, 1fr));
  gap: 1.35rem 2.25rem;
}
.nav-panel-all {
  margin: 1.1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.nav-panel-all a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--accent);
  text-decoration: none;
}
.nav-panel-all a::after { content: "\00a0\2192"; }
.nav-panel-all a:hover, .nav-panel-all a:focus-visible { text-decoration: underline; }
.nav-panel-blurb {
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
}
/* A group heading is a label, not a destination, except where it genuinely is
   one — the vehicle-transfer group. Both look the same; only one is a link. */
.nav-group-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.4rem;
  /* Two lines' worth whether the heading needs them or not, so the rule under
     every group sits on one line and the link lists start level across the
     row. Ragged group headings made a composed menu look assembled. */
  min-height: 2.4em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
a.nav-group-title:hover, a.nav-group-title:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
.nav-group-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 0 0 0.5rem;
}
.nav-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.05rem;
}
.nav-group-list a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav-group-list a:hover { color: var(--accent); text-decoration: underline; }
/* The one filled action in the header: Chat with Sahvelo, at the far right
   of the row on every page, in the accent's deep brown so it is the one
   thing in the chrome that is a colour. It is the last item of the nav
   list, which is also what puts it in the phone drawer as a row. */
.nav-item-chat { margin-left: auto; }
.header-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: var(--track-flat);
  color: var(--paper);
  background: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.header-cta:hover, .header-cta:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.header-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The About group inside the Tools & Resources menu. It is a lower register
   than the three chapters above it — About is how the product accounts for
   itself, not a fifth kind of guidance — so it takes a rule above it and the
   meta voice, and it is the last thing in the panel (founder review,
   2026-09-22, round 2, when About left the primary row). */
.nav-group-about {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-top: 0.35rem;
}
.nav-group-about .nav-group-title { color: var(--ink-mute); }
.nav-group-about .nav-group-list { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.nav-group-about .nav-group-list a { font-size: 0.875rem; color: var(--ink-mute); }
.nav-group-about .nav-group-list a:hover,
.nav-group-about .nav-group-list a:focus-visible { color: var(--accent); }
/* ── The account area ──────────────────────────────────────────────────
   Founder review, 2026-09-22. The account used to be reachable only by
   pressing a Handbook call to action, so a visitor could not find out that
   Sahvelo has accounts at all. It now stands at the right of the header row,
   after the one filled action, separated from it by a hairline so the two
   read as different kinds of thing rather than as a pair of buttons.

   WHY THERE IS NO SECOND FILLED BUTTON HERE. The header carries exactly one,
   and it is Chat with Sahvelo. "Create account" is the stronger of the two
   account actions and is drawn the way this product draws a thing to press:
   on the page ground, with a firm edge, filling toward the ink on reach
   (drawing rule 2). "Sign in" is a plain text control. Two brown fills in one
   header would make the account compete with the guidance somebody came for,
   and the row would stop being a masthead and start being a conversion bar. */
.nav-account {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding-left: 0.85rem;
  margin-left: 0.25rem;
  border-left: 1px solid var(--rule);
}
.nav-account-anon { display: flex; align-items: center; }
/* Doorways paused (content/site.json accountEntry.public = false): the area
   draws nothing signed out, divider included, and appears only once
   account-nav.js reports a live session. */
.nav-account[data-account-paused][data-account-state="anon"] { display: none; }
/* Log in: the one action in the header. A choice on the page ground with a
   firm edge (drawing rule 2) — the way this product draws a thing to press —
   and deliberately not a brown fill. The fill is reserved for an action
   inside a page that is the point of that page; a header that shouts about
   accounts is a conversion bar. */
.nav-account-login {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--track-flat);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-firm);
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-account-login:hover,
.nav-account-login:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav-account-login:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Signed in: one control carrying the reader's initial and first name, and a
   menu under it. Not an avatar image — Sahvelo holds no photograph and a grey
   circle with a letter in it is the honest version of one. */
.nav-account-user { display: flex; align-items: center; }
.nav-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.35rem 0.55rem 0.35rem 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav-account-toggle:hover,
.nav-account-toggle:focus-visible { color: var(--ink); background: var(--paper-soft); }
.nav-account-initial {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent-wash);
  border: 1px solid var(--accent-hairline);
  color: var(--accent-deep);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}
.nav-account-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 60;
  min-width: 15rem;
  padding: 0.85rem 0 0.35rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 18px 44px -28px rgba(34, 30, 25, 0.45);
}
.nav-account-menu-who {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0 1rem 0.6rem;
  overflow-wrap: anywhere;
}
.nav-account-menu-list { list-style: none; margin: 0; padding: 0; }
.nav-account-menu-list a,
.nav-account-signout-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-account-menu-list a:hover,
.nav-account-menu-list a:focus-visible,
.nav-account-signout-btn:hover,
.nav-account-signout-btn:focus-visible { color: var(--ink); background: var(--paper-soft); }
.nav-account-signout-btn { border-top: 1px solid var(--rule); margin-top: 0.35rem; }
.nav-account-signout-btn[disabled] { opacity: 0.5; cursor: default; }
/* Search, immediately after About: an icon and its word, drawn as a nav
   item, not as a field, so it cannot be mistaken for one. It opens the
   panel below the header row. */
.nav-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  min-height: 40px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav-search-toggle:hover, .nav-search-toggle:focus-visible { color: var(--ink); background: var(--paper-soft); }
.nav-search-toggle[aria-expanded="true"] { color: var(--ink); }
.nav-search-icon { flex: none; display: block; }
.site-search {
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
}
.site-search-inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 1rem 1.5rem 1.15rem;
}
.site-search-form { margin: 0; max-width: 46rem; }
.site-search-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.5rem;
}
.site-search-row { display: flex; gap: 0.6rem; align-items: stretch; }
/* Scoped, so `resize: none` actually holds. The search field is an .ask-input
   too, and .ask-input sets `resize: vertical` several hundred lines further
   down: same specificity, later in the file, so it won and the search box
   shipped with a drag grabber in its corner. */
.site-search .site-search-input { flex: 1 1 auto; height: 3.25rem; min-height: var(--tap); padding: 0.85rem 0.85rem; resize: none; }
.site-search-submit { flex: none; min-height: var(--tap); white-space: nowrap; background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.site-search-submit:hover, .site-search-submit:focus-visible { background: var(--accent); border-color: var(--accent); }
.site-search-close {
  flex: none;
  min-height: var(--tap);
  padding: 0 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule-firm);
  border-radius: 0;
  cursor: pointer;
}
.site-search-close:hover, .site-search-close:focus-visible { color: var(--ink); background: var(--paper); }
.site-search-hint { margin: 0.55rem 0 0; font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); }
.site-search .ask-results { margin-top: 0.75rem; max-height: min(60vh, 32rem); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 40rem) {
  .site-search-row { flex-wrap: wrap; }
  /* One short line; a question, not an essay. The generic phone rule gives
     every .ask-input seven rem for its two-line example sentence, which this
     placeholder does not need. */
  .site-search .site-search-input { flex-basis: 100%; min-height: var(--tap); height: 3.25rem; }
  .site-search-submit { flex: 1 1 auto; }
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  min-height: 44px;
}
.nav-toggle-bars {
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
/* Open, the same control closes, so it stops drawing the thing it opens.
   The middle bar goes, the outer two cross. Transitionless on purpose: this
   is a state, not an animation, and it has to be right in a screenshot. */
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
/* ═══════════════════════════════════════════════════════════════════════
   Buttons and links
   ═══════════════════════════════════════════════════════════════════════ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0;
  text-decoration: none;
  text-align: center;
}
/* One button in two weights: filled is the primary action, outlined is the
   same control where it must not compete. Neither is green — green carries
   meaning in this system and a button is not a state. */
.button-primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.button-primary:hover, .button-primary:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); }
.button-secondary { background: transparent; color: var(--ink); border: 1px solid var(--rule-firm); }
.button-secondary:hover, .button-secondary:focus-visible { background: var(--ink); color: var(--paper); }
.text-link {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Action links complete a task. Evidence links prove a claim. They look
   different on purpose: a reader who needs Form 82040 should never have to
   read a bibliography to find it. */
.action-link {
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-hairline);
}
.action-link:hover, .action-link:focus-visible { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
/* The link to the source under a claim, and one of the most-used controls on a
   state page — there are dozens per page. At 19px tall it cleared no target
   minimum on any device. */
.evidence-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-strong);
}
.evidence-link:hover, .evidence-link:focus-visible { color: var(--ink); border-bottom-style: solid; }
@media (max-width: 768px) { .evidence-link { min-height: 44px; } }
.ext-icon { margin-left: 0.25rem; opacity: 0.55; vertical-align: baseline; }
.cites { font-size: 0.6875rem; margin-left: 0.15rem; }
.cite {
  display: inline-block;
  min-width: 1.1em;
  padding: 0 0.2em;
  margin-left: 0.1em;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 0;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
}
.cite:hover { background: var(--accent); color: var(--paper); }
/* ═══════════════════════════════════════════════════════════════════════
   Breadcrumbs, page heads, shared type
   ═══════════════════════════════════════════════════════════════════════ */

.breadcrumbs { padding: 1.25rem 0 0; }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.breadcrumbs a { color: var(--ink-mute); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
}
.page-head { padding: 1.25rem 0 1.75rem; }
/* The specimen shows what an h1 looks like without being a second h1 — one
   page, one h1, and a preflight check that says so. The sample shares this
   rule rather than restating it, so the specimen cannot drift from the real
   thing it is a specimen of. */
.page-head h1,
.spec-h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.15vw, 2.375rem);
  line-height: 1.15;
  margin: 0 0 0.8rem;
}
.page-lede {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0;
}
.page-meta {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 1rem 0 0;
}
/* ── THE HANDBOOK'S ACCOUNT GATE ───────────────────────────────────────
   Founder decision, 2026-09-22: reading needs no account, building a Handbook
   does. The page ships with `hb-gate-pending` on <body> — the gate showing and
   the builder hidden — and public/account-nav.js lifts it once it knows who is
   reading, or if the deployment has no account system at all.

   It is drawn as a page, not as a modal over one. A dialog would say "you have
   been interrupted"; this is the page somebody has arrived at, and it says
   what the account is for before it asks for anything. */
.hb-gate { display: none; }
body.hb-gate-pending .hb-gate { display: block; }
body.hb-gate-pending .hb-gated { display: none; }
.hb-gate-inner {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) 1.5rem clamp(3rem, 2rem + 3vw, 5rem);
}
.hb-gate-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.9rem;
}
.hb-gate-heading {
  font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--accent-deep);
  text-wrap: balance;
  margin: 0 0 1.1rem;
}
.hb-gate-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hb-gate-lede {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
}
/* Three lines, each one a thing the account does. Marked with the accent's
   hairline rather than a bullet glyph, which is how this product marks a
   short list it wants read. */
.hb-gate-points { list-style: none; margin: 0 0 2rem; padding: 0; }
.hb-gate-points > li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}
.hb-gate-points > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 0.55rem;
  height: 1px;
  background: var(--accent);
}
.hb-gate-points > li:last-child { border-bottom: 1px solid var(--rule); }
.hb-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 0 0 1rem; }
/* The retry on the unavailable state is a button, not a link: it does
   something to this page rather than going somewhere. It takes the same
   drawing as the primary action beside it in the other state, because it is
   the primary action of the state it is in. */
button.hb-gate-create { font: inherit; cursor: pointer; }
/* The one filled action on this page, because here the account IS the point.
   The header's Chat with Sahvelo is still the one filled action in the CHROME;
   this is in the page. */
.hb-gate-create {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.4rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: var(--track-flat);
  color: var(--paper);
  background: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.hb-gate-create:hover, .hb-gate-create:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.hb-gate-create:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-gate-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.2rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hb-gate-signin:hover, .hb-gate-signin:focus-visible { color: var(--accent); }
.hb-gate-free,
.hb-gate-browse {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
}
/* Shown only when the browser refuses storage. Drawn as a caution rather
   than as chrome, because it is the one line on this screen that changes what
   the reader should expect to happen. */
.hb-gate-nostore {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--accent);
  background: var(--paper-sunk, #f3efe8);
}
.sb-save-blocked { color: var(--ink); border-left: 2px solid var(--accent); padding-left: .75rem; }
/* ── WHEN THE HOLD HAS GONE ──────────────────────────────────────────
   handbook-pending.js sets data-hb-resume on <html>: "restored" when a
   held plan came back, "missing" when the record for the id in the address
   is not there. Only "missing" shows this, and it takes the page: the gate
   and the builder both stand down, because the honest screen is one that
   says the answers are not here rather than one that quietly starts over. */
/* The WRAPPER carries the state, not a `hidden` attribute on the panel.
   This stylesheet's own first rule is `[hidden] { display: none !important }`
   — see [hidden] MEANS HIDDEN at the top, and the four times this repository
   re-derived the need for it — so nothing here can reveal a hidden element,
   correctly. Trying anyway shipped one build as a completely blank page, and
   the probe that caught it asks whether a reader can see the panel rather
   than what the element's own display computes to. */
:root[data-hb-resume="missing"] .hb-gate,
:root[data-hb-resume="missing"] .hb-gated { display: none; }
/* The panel is a sibling of the gate, outside .hb-gated. It has to be:
   body.hb-gate-pending hides that whole wrapper, and a reader whose hold
   expired keeps the class, because account-nav.js stands openHandbook down.
   A panel inside it drew nothing at all — a blank page, which is the one
   outcome worse than the empty questionnaire this replaces. */
.hb-resume-wrap { display: none; }
:root[data-hb-resume="missing"] .hb-resume-wrap { display: block; }
.hb-resume-lost { margin: clamp(2rem, 1rem + 4vw, 4rem) 0 3rem; max-width: 40rem; }
.hb-resume-lost h1 { margin: 0 0 .75rem; }
.hb-resume-lost .page-lede { margin: 0 0 1.5rem; }
/* The control is on its own line rather than at the end of the sentence.
   .hb-link carries a 44px target, which as an inline box inside a paragraph
   pushes the two lines of that paragraph apart — the target is right and the
   place for it was wrong. */
.hb-resume-backlead { margin: 0 0 .1rem; }
.hb-resume-back { margin: 0 0 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.hb-resume-start { margin: 0 0 1rem; color: var(--ink-soft); }
.sb-save-link-blocked { opacity: .45; pointer-events: none; }
.hb-gate-browse { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.hb-gate-browse a { color: var(--accent-deep); }
@media (max-width: 34rem) {
  .hb-gate-actions { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .hb-gate-create { justify-content: center; }
  .hb-gate-signin { text-align: center; }
}
/* ── TOOLS & RESOURCES: TWO THINGS FIRST, THEN THE REST ────────────────
   Six resources as six equal rows is a directory, and a directory says the
   editor had no view. The Handbook and the Glossary carry more weight
   because they are what most people actually need: one turns everything
   else into a plan, the other is the way in when you do not have the word. */
/* The find module sits in the narrow right column, so its own two-column
   layout has to stand down: at 560px the form and its aside squeezed each
   other until the textarea clipped its own placeholder mid-word, which is
   what the visual review caught. */
.tools-find { padding-top: clamp(0.5rem, 0.25rem + 1vw, 1.5rem); }
/* The compact band carries its own 3rem gutter and an auto margin, because
   everywhere else it sits directly in the page and has to inset itself. Here
   it sits in a column that is already inset, and `margin: 0` had taken away
   the auto that at least centred it — so the gutter became forty-eight pixels
   of nothing against its right edge, at every width. */
.tools-find .ask-module { margin: 0; width: 100%; max-width: none; }
.tools-find .ask-module.ask-module-compact .ask-module-inner { display: block; }
.tools-find .ask-side { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); max-width: none; }
/* The compact input is 4.5rem and its placeholder is two lines at this width,
   so it clipped its own example mid-word. Three lines of room, and the button
   drops under it rather than stealing half the field. */
/* The Tools page used to raise this field above the compact default and wrap
   its row. Both are now the shared behaviour: the base is 6.25rem and the row
   is a column, so a more specific copy here would only shrink the field back
   down and wrap a single-item line. Removed rather than restated. */
.tools-find .ask-submit { width: 100%; justify-content: center; }
.tools-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  list-style: none;
  margin: clamp(1.5rem, 1rem + 2vw, 3rem) 0 0;
  padding: clamp(2rem, 1.4rem + 1.6vw, 3rem) 0 0;
  border-top: 1px solid var(--rule-strong);
}
.tools-feature { position: relative; }
.tools-feature-kicker {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.tools-feature-title {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 0.6rem;
}
.tools-feature-title a { color: var(--ink); text-decoration: none; }
.tools-feature-title a::after { content: ""; position: absolute; inset: 0; }
.tools-feature-title a:hover, .tools-feature-title a:focus-visible { color: var(--accent); }
.tools-feature-title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tools-feature-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34rem;
}

/* About, at the foot: three doors drawn a register quieter than the chapters
   above them, because About is how the product accounts for itself rather
   than a fifth kind of guidance. */
.tools-about {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  padding: clamp(2rem, 1.4rem + 1.6vw, 3rem) 0 0;
  border-top: 1px solid var(--rule-strong);
  margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem);
}
.tools-about-head { align-self: start; }
.tools-about-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tools-about-list > li { border-top: 1px solid var(--rule); }
.tools-about-list > li:first-child { border-top: 0; }
.tools-about-list a { display: block; padding: 0.9rem 1rem 1rem; margin: 0 -1rem; text-decoration: none; transition: background-color 0.15s ease; }
.tools-about-list a:hover, .tools-about-list a:focus-visible { background: var(--paper-soft); }
.tools-about-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.tools-about-list a:hover .tools-about-title { color: var(--accent); }
.tools-about-body { display: block; font-family: var(--font-ui); font-size: 0.875rem; line-height: 1.55; color: var(--ink-mute); }
@media (max-width: 60rem) {
  .tools-features { grid-template-columns: minmax(0, 1fr); }
  .tools-about { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
}
@media (max-width: 34rem) {
  .tools-about-list a { margin: 0; padding-left: 0; padding-right: 0; }
  .tools-about-list a:hover, .tools-about-list a:focus-visible { background: transparent; }
}
/* ── THE PILLAR PAGES ──────────────────────────────────────────────────
   After a Death, Helping a Parent, Planning Ahead, Tools & Resources. Founder
   review, 2026-09-22: four things sit in the primary navigation, so four
   landing pages have to be worth arriving at, and they have to read as four
   chapters of one product rather than four sites.

   What is shared is the OPENING — the section's name set small above a
   display line, one sentence of what it is for, and the honest scale of it in
   its own units. What is not shared is everything under that, because the
   four jobs are genuinely different: three of them orient somebody inside a
   situation, and the fourth hands them an instrument.

   The masthead takes the page ground, not a band. No dark slab, no card, no
   box: a rule under it and air around it, which is how this product has drawn
   the top of a page since the editorial pass.                             */
.pillar-head { padding-top: 1.25rem; padding-bottom: 2rem; }
.pillar-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.9rem;
}
.pillar-head h1 {
  font-size: clamp(2.125rem, 1.6rem + 1.9vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--track-display);
  color: var(--accent-deep);
  max-width: 18ch;
  text-wrap: balance;
  margin: 0 0 1.1rem;
}
.pillar-lede { max-width: 42rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
/* The scale of the section, in its own units, computed at build time. Set as
   a quiet measured row rather than as statistics: three small numbers on the
   paper, divided by hairlines, at the size the rest of the meta voice uses. */
.pillar-meta {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.pillar-meta > li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.8rem 1.5rem 0 0;
  margin-right: 1.5rem;
  border-right: 1px solid var(--rule);
}
.pillar-meta > li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.pillar-meta-n {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1;
  color: var(--accent-deep);
}
.pillar-meta-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

/* The pillar first screen: the masthead and the page's own short answer side
   by side, the jump list under both. Before this the four pillars were a
   single left column inside a wide wrap, so a 1440px window carried a
   headline, a paragraph, and six hundred pixels of nothing beside them —
   while the homepage two feet above set its headline against the thing a
   reader can act on (founder review, 2026-09-22 round 2). */
.pillar-first {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  align-items: start;
  padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.pillar-first-solo { grid-template-columns: minmax(0, 1fr); }
/* ── WHERE START HERE SITS ────────────────────────────────────────────
   The document order is masthead → Start here → Short answer, because that
   is the order it should be READ in and a keyboard walks the document. At
   desktop the left column carries the first two and the right column carries
   the Short answer beside them, which is the ordinary reading of a
   two-column page — down the first column, then the second — so nothing is
   reordered against the document and the focus sequence matches the eye.
   Below the breakpoint the grid collapses and the three simply stack, in the
   same order, which is the whole point. */
.pillar-first-with-start > .pillar-first-copy { grid-column: 1; grid-row: 1; }
.pillar-first-with-start > .pillar-first-start { grid-column: 1; grid-row: 2; }
.pillar-first-with-start > .pillar-first-answer {
  grid-column: 2;
  grid-row: 1 / span 2;
  /* It STAYS beside the routes rather than leaving a column that ran out.
     The left column is the taller of the two — a masthead and three doors
     against four paragraphs — and the answer holding its place while Start
     here scrolls past is both the reason it is beside them and the thing
     that makes the composition read as a choice. */
  position: sticky;
  top: calc(var(--header-h, 4.5rem) + 1.5rem);
  align-self: start;
}
/* The jump list's own 4rem tail plus a section margin made a 96px dead zone
   between the last route in the list and the first route under Start here.
   One break, not two. */
.pillar-first-with-start > .pillar-first-copy .jump-to { margin-bottom: 0; }
.pillar-first-start { margin-top: 2.5rem; }
/* Three doors under a masthead, not three columns in half a page. */
.pillar-first-start .topic-cards-start { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 64rem) {
  .pillar-first-with-start > .pillar-first-copy,
  .pillar-first-with-start > .pillar-first-start,
  .pillar-first-with-start > .pillar-first-answer { grid-column: auto; grid-row: auto; position: static; }
  .pillar-first-start { margin-top: 2rem; }
  .pillar-first-start .topic-cards-start { grid-template-columns: minmax(0, 1fr); }
}
.pillar-first .pillar-head { padding-bottom: 1.25rem; }
/* The jump list belongs in the left column, under the lede. Outside it, the
   left column ended halfway up the short answer and left three hundred
   pixels of nothing between the paragraph and the first route. */
.pillar-first-copy .jump-to { margin-top: 0; }
.pillar-first-answer { padding-top: clamp(1.25rem, 0.5rem + 2vw, 3.25rem); }
.pillar-first-answer > :first-child { margin-top: 0; }
/* ── TOOLS' MASTHEAD ENDS WHERE IT ENDS ───────────────────────────────
   SUPERSEDED, and the reasoning kept because the measurement was right
   and the conclusion was not. The three world pages balance their first
   screen within forty pixels — 499 against 459, 507 against 481, 430
   against 413 — and Tools was 303 against 630, because its left column
   is a headline and three counts while its card carries the field, the
   guided path and the disclaimer. So the counts were pushed to the foot
   of the column with `margin-top: auto`, to bracket the masthead and
   give the card something to end level with.

   Looked at rather than measured, that traded three hundred pixels of
   ground under the lede for three hundred pixels of hole through the
   middle of it, and a rule with three numbers floating that far below
   the sentence they belong to reads as a page that failed to render.
   The unpushed version is not the defect it was taken for: After a
   Death leaves the same gap on the RIGHT, under a Short answer that
   ends while the left column runs on, and nobody reads that as a column
   that ran out. Tools is that relationship mirrored. The counts stay
   attached to the lede; the card is simply taller. */
@media (max-width: 64rem) {
  .pillar-first { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
  .pillar-first-answer { padding-top: 0; }
}
/* A chapter: the heading and its sentence on the left, the rows on the right,
   so the page reads as a table of contents with its reasoning beside it
   rather than as a stack of equal blocks. Below 60rem it becomes one column
   and the sentence sits under its heading, which is the same structure read
   downward. */
.pillar-chapters { margin: 0.5rem 0 0; }
.pillar-chapter {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  padding: clamp(2rem, 1.4rem + 1.6vw, 3rem) 0;
  border-top: 1px solid var(--rule-strong);
}
.pillar-chapter-head { align-self: start; position: sticky; top: 5.5rem; }
.pillar-chapter-heading {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  color: var(--accent-deep);
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
.pillar-chapter-note {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
}
/* A door is a row, not a card (drawing rule 3): a hairline above, the page
   ground, the heading IS the link, and the lift to paper on reach. */
.pillar-rows { list-style: none; margin: 0; padding: 0; }
.pillar-row {
  padding: 1.15rem 1rem 1.25rem;
  margin: 0 -1rem;
  border-top: 1px solid var(--rule);
  transition: background-color 0.15s ease;
}
.pillar-rows > li:first-child { border-top: 0; }
.pillar-row:hover, .pillar-row:focus-within { background: var(--paper-soft); }
/* The grotesque, not the serif. The display face appears once per page and
   that once is the headline (src/typography.test.ts counts it); a row title is
   a structural heading and takes the UI voice, which is what every other door
   on the site uses. */
.pillar-row-title {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.45rem;
}
/* The whole row is the target, not the words. `.topic-link` has done this
   since the depth pass and its anchors stand 44px; a 26px line of text is a
   door drawn at the size of a footnote. The anchor covers the row with a
   pseudo-element, which keeps the heading's typography and gives the press
   the area it needs. */
.pillar-row { position: relative; }
.pillar-row-title a { color: var(--ink); text-decoration: none; }
.pillar-row-title a::after { content: ""; position: absolute; inset: 0; }
.pillar-row-title a:hover, .pillar-row-title a:focus-visible { color: var(--accent); }
.pillar-row-title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The body text does NOT get its own stacking context. It was given one so
   that it stayed selectable, and that put it above the anchor's overlay and
   took the press back off most of the row — the exact defect the overlay was
   added to fix, reintroduced by the line meant to soften it. Every other door
   on this site (.topic-link, .world-door) makes the same trade: the row is
   one target, and the words in it are not separately selectable. */
.pillar-row-count {
  flex: none;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  border: 1px solid var(--rule);
  padding: 0.1rem 0.4rem;
}
.pillar-row-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46rem;
  margin: 0;
}
/* The rule above it is the page's rule, so it runs the page's width; the prose
   under it keeps the reading measure. A hairline that stops at 55% reads as a
   rendering fault, which is how this one was found. */
.pillar-research {
  max-width: none;
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  margin-top: 0;
}
.pillar-research > * { max-width: var(--prose-measure); }
@media (max-width: 60rem) {
  .pillar-chapter { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .pillar-chapter-head { position: static; }
  .pillar-head h1 { max-width: none; }
  .pillar-meta > li { padding-right: 1.1rem; margin-right: 1.1rem; }
}
@media (max-width: 34rem) {
  .pillar-meta { flex-direction: column; }
  .pillar-meta > li { border-right: 0; margin-right: 0; padding-right: 0; padding-top: 0.6rem; }
  .pillar-row { margin: 0; padding-left: 0; padding-right: 0; }
  .pillar-row:hover, .pillar-row:focus-within { background: transparent; }
}
/* Reduced from a 30px ceiling. A section heading has to outrank a group
   heading and stay under the H1; at 26px it does both, and the page reads as
   one hierarchy rather than a stack of announcements. */
.section-heading {
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.625rem);
  line-height: 1.25;
  margin: 0 0 0.6rem;
}
.section-lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 2rem;
}
.section-foot {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 1.5rem 0 0;
}
.section-intro {
  font-size: 0.9375rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 0 0 1.5rem;
}
.prose { max-width: var(--prose-measure); margin: 0 0 2.5rem; }
.prose h2 { font-size: 1.5rem; margin: 2.5rem 0 0.85rem; }
.prose h3 { font-size: 1.1875rem; margin: 1.75rem 0 0.6rem; }
.prose p { font-family: var(--font-body); line-height: 1.7; }
.prose ul, .prose ol { font-family: var(--font-body); line-height: 1.7; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.callout-block {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
  max-width: var(--prose-measure);
}
.callout-block h2 { margin-top: 0; }
/* ═══════════════════════════════════════════════════════════════════════
   Ask Legacy
   ═══════════════════════════════════════════════════════════════════════ */

.ask-module {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin: 0 0 var(--space-5);
}
/* No surface, no border, no 2.25rem of padding. Ask Legacy is one route to an
   answer; on the homepage it now reads at the same weight as the sections
   above it, and the input is a field rather than a canvas. */
/* The conversational way in, one band wide, at the foot of the page rather
   than the head of it. Washed rather than bordered: it is a place on the page,
   not an object floating on it. Both the gutter and the wrap ceiling are
   reduced by the gutter so its edges land on the content edge of the sections
   above. */
.ask-module-compact {
  background: var(--paper-soft);
  border: 0;
  border-radius: var(--radius-lg);
  width: calc(100% - 3rem);
  max-width: calc(var(--wrap-wide) - 3rem);
  margin: 0 auto var(--space-5);
  padding: 1.85rem 2rem 2rem;
}
/* The band is page-wide, so its contents use the band: the field on the left at
   a sane measure, and the question-by-question alternative on the right instead
   of a second sentence tucked into the hint. */
.ask-module-compact .ask-module-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas:
    "heading heading"
    "form    side"
    "legal   legal";
  column-gap: 3rem;
  padding: 0;
  align-items: start;
}
.ask-module-compact .ask-heading { grid-area: heading; }
.ask-module-compact .ask-form { grid-area: form; }
.ask-side { grid-area: side; }
.ask-side-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 0 0.35rem;
}
.ask-side-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 0.6rem;
}
.ask-side-link { margin: 0; font-family: var(--font-ui); font-size: 0.9375rem; }
.ask-side-link a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.ask-side-link a:hover, .ask-side-link a:focus-visible { border-bottom-color: var(--accent); }
@media (max-width: 880px) {
  .ask-module-compact .ask-module-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "form" "side" "legal";
  }
  .ask-side { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
  .ask-side-link a { min-height: 44px; }
}
.ask-module-compact .ask-heading {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  margin: 0 0 0.5rem;
}
.ask-module-compact .ask-input { background: var(--paper); }
.ask-module-compact .ask-submit { white-space: nowrap; }
/* Two lines' worth of leading plus its padding. A one-line field clipped the
   example sentence at every width narrow enough to wrap it. */
/* 100px, and the padding is the base field's rather than a tightened copy of
   it. At 4.5rem with 0.6rem of padding the box held about two lines, which is
   smaller than the example the placeholder asks the reader to imitate. */
.ask-input-compact { min-height: 6.25rem; resize: vertical; }
.ask-module-compact .ask-submit { min-height: 46px; }
.ask-module-compact .ask-hint { max-width: 34rem; }
.ask-module-compact .ask-hint a { color: var(--accent); }
/* One rule already opens this section; a second one under a two-line hint
   was fussier than the sentence it separated. */
.ask-module-compact .ask-legal { margin-top: 1.25rem; padding-top: 0; border-top: 0; max-width: 40rem; }
.ask-module-home {
  /* Matches the 1.5rem gutter .wrap gives every other section. Without the
     width the panel ran edge to edge on any viewport under 80rem while the
     hero above it stayed inset, and the two did not line up. */
  width: calc(100% - 3rem);
  max-width: var(--wrap-wide);
  margin: 0 auto var(--space-6);
}
.ask-module-inner {
  padding: 2.25rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas:
    "heading heading"
    "intro   intro"
    "context context"
    "form    alt"
    "starter alt"
    "legal   legal";
  column-gap: 2.5rem;
  align-items: start;
}
.ask-heading { grid-area: heading; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); margin: 0 0 0.5rem; }
.ask-intro {
  grid-area: intro;
  font-family: var(--font-body);
  color: var(--ink-soft);
  max-width: 46rem;
  margin: 0 0 1.25rem;
}
.ask-context { grid-area: context; }
.ask-form { grid-area: form; margin: 0; }
.ask-starters { grid-area: starter; }
.ask-alt { grid-area: alt; }
.ask-legal { grid-area: legal; }
/* What Legacy already knows, stated rather than asked again. */
.ask-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.ask-context-label {
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.6875rem;
  font-weight: 600;
  margin-right: 0.15rem;
}
.ask-chip-static {
  padding: 0.2rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  color: var(--ink-soft);
}
.ask-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
/* The compact module's label carries the sentence that used to be a separate
   intro paragraph, so it is set as prose, not as a form label. Declared after
   .ask-label because it overrides it. */
.ask-label.ask-label-lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.ask-input-row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
/* ── THE ASK BOX IS NOT A SEARCH FIELD ────────────────────────────────
   Side by side, "Ask Sahvelo" took nearly as much of the row as the field it
   sat beside, and the placeholder — a whole example sentence, "my father died
   in Florida and his car is still in his name" — wrapped mid-phrase in what
   was left. The control asked for one line and the label asked for a
   situation. A reader believes the box, not the label.

   So the field takes the column's full width and the action sits under it.
   That is the same arrangement the phone breakpoint has always used; this
   only stops the desktop from being the cramped one.

   The header's search row is deliberately NOT included. That one IS a search
   field, one line is the honest shape for it, and per the interaction
   grammar a control must look like what it does: two controls doing
   different jobs should not be drawn the same way. `:not(.site-search-row)`
   is the seam, and it is a real class on that row rather than a guess. */
.ask-input-row:not(.site-search-row) {
  flex-direction: column;
  align-items: stretch;
}
.ask-input-row:not(.site-search-row) .ask-submit { align-self: flex-end; }
.ask-input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  /* A field is a filled white well with an edge a person can see. --ink-mute
     on --surface is 5.7:1; the old --rule-strong edge was 1.7:1, below the
     3:1 a control boundary needs, and it was the only thing identifying the
     field. See docs/SAHVELO-DESIGN-AUTHORITY.md. */
  border: 1px solid var(--ink-mute);
  border-radius: 0;
  resize: vertical;
}
.ask-input::placeholder { color: var(--ink-mute); }
.ask-input:focus-visible { border-color: var(--accent); }
.ask-submit {
  flex: none;
  min-height: 48px;
  padding: 0 1.35rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
}
.ask-submit:hover, .ask-submit:focus-visible { background: var(--accent-deep); }
.ask-hint {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.6rem 0 0;
}
.ask-results { margin-top: 1.25rem; }
.ask-loading, .ask-empty {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 0;
}
.ask-answer {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
}
.ask-answer h3 { font-size: 1.125rem; margin: 0 0 0.6rem; }
.ask-answer p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0 0 0.6rem; }
.ask-answer p:last-child { margin-bottom: 0; }
.ask-answer-limit { border-left: 3px solid var(--warn); }
/* THE WAYS OUT OF A RECOVERY STATE. The three journeys, drawn like the
   result rows above them so a reader who found nothing is offered the same
   shape they were already reading. Used by the search no-match state and by
   the 404, which are the same problem on two surfaces. */
.ask-routes { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.ask-routes li { border-top: 1px solid var(--rule); }
.ask-routes a {
  display: block;
  padding: 0.7rem 0;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
}
.ask-routes a:hover, .ask-routes a:focus-visible { color: var(--accent); text-decoration: underline; }
/* "Search again" is a button, so it carries a button's default padding and
   sat indented from the routes above it. */
button.text-link { padding: 0; background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; cursor: pointer; }
.ask-matches { list-style: none; margin: 0; padding: 0; }
.ask-matches li { border-top: 1px solid var(--rule); }
.ask-matches li:first-child { border-top: 0; }
.ask-matches a {
  display: block;
  padding: 0.7rem 0;
  text-decoration: none;
  min-height: 44px;
}
.ask-match-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--ink);
}
.ask-matches a:hover .ask-match-title { color: var(--accent); text-decoration: underline; }
.ask-match-meta {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin-top: 0.1rem;
}
.ask-followup { font-size: 0.875rem; color: var(--ink-mute); }
.ask-next { margin: 1rem 0 0; }
.ask-starters { margin-top: 1.5rem; }
.ask-starters-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0 0 0.6rem;
}
.ask-starter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ask-starter {
  min-height: 44px;
  padding: 0.55rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  text-align: left;
}
.ask-starter:hover, .ask-starter:focus-visible { border-color: var(--accent); color: var(--accent); }
.ask-starter[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.ask-path-panel {
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.ask-path-lead { font-family: var(--font-body); margin: 0 0 0.75rem; color: var(--ink-soft); }
.ask-path-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.ask-path-list a {
  display: block;
  padding: 0.6rem 0;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--rule);
}
.ask-path-list li:first-child a { border-top: 0; }
.ask-path-list a:hover { color: var(--accent); text-decoration: underline; }
.ask-path-note { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); margin: 0 0 0.5rem; }
/* The second door. Same system, different interface. */
.ask-alt {
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.ask-alt-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
}
.ask-alt .button { width: 100%; }
.ask-alt-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.75rem 0 0;
}
.ask-legal {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
  /* Capped: across the full panel this ran to about 180 characters a line and
     dropped a single word onto the second. */
  max-width: 62rem;
  text-wrap: pretty;
  margin: 1.75rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.ask-legal a { color: var(--ink-soft); }
/* ═══════════════════════════════════════════════════════════════════════
   Homepage
   ═══════════════════════════════════════════════════════════════════════ */

/* The hero is a band, not a page opener: statement, promise, one action, and a
   hairline that closes it. 64px display type consumed the viewport; 52px keeps
   the headline the largest thing on the page while the button and the first
   door stay above the fold. */
/* The hero (founder pass 3, 2026-09-10): a two-column composition with the
   structural confidence of the original Legacy Handbook homepage. Left, the
   headline in the editorial serif with its paragraph directly beneath and
   the four ways to browse under that; right, the compact Guide entry in its
   recess. The proof band beneath closes the hero with a change of ground. */
.hero-home { padding: clamp(2.75rem, 2rem + 2.4vw, 4.75rem) 0 clamp(2.75rem, 2rem + 2.4vw, 4.75rem); }
.hero-home .wrap { padding-bottom: 0; border-bottom: 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas: "copy chat";
  column-gap: clamp(2.5rem, 1.5rem + 4vw, 6.5rem);
  row-gap: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  align-items: start;
}
/* The copy column is centred against the taller chat card. Founder review
   (2026-09-22) asked for the H1 a little higher in the hero: the half-rem
   top pad goes, and the block lifts by a rem against the optical centre.
   A refinement, not a recomposition — the grid, the measure and the
   centring are unchanged, and below 64rem the column stacks and neither
   value applies. */
/* ── WHERE THE HEADLINE SITS AGAINST THE CARD ─────────────────────────
   It was centred against the taller chat card, which put the H1 83px below
   the top of the card at 1440 and 116px below it at 1280 — lower, by a
   different amount at every width, so it read as sunk rather than placed.
   Jordan asked twice for it a little higher.

   Then it was top-aligned with a 2.25rem offset, described as half the
   card's inset so the headline would sit on the same line as the card's
   eyebrow. Measured rather than reasoned about, that offset did neither:
   the eyebrow's optical top is 209 at 1440 and the headline's was 185, so
   it was twenty-four pixels ABOVE the mark it was supposed to meet and
   thirty-three BELOW the card's edge — between two lines and on neither.

   It meets the card's edge now, which is the line a reader actually sees:
   the H1's optical top (box top plus half-leading plus the gap above a cap)
   lands within three pixels of the panel's top at 1440, 1280 and 1100. The
   offset is zero because the alignment is to the edge, and the numbers say
   zero is where the edge is.

   Superseded (founder decision, 2026-09-25). Aligning the H1 to the card's
   edge was right about the line a reader sees and wrong about the balance of
   the row: the copy column is much shorter than the card, so meeting the edge
   at the top left 263px of dead ground under the trust line at 1440, and the
   hero read top-heavy on the left against a card that ran on well below it.
   The headline now BEGINS slightly below the card's top edge — 60px, which
   halves the imbalance without closing it, because a copy column ending level
   with the card would be optical centring again, and centring is what the two
   reviews above rejected.

   Sixty and not more: it is enough to read as placement rather than drift,
   and it keeps the H1's cap above the card's eyebrow, so the headline still
   opens the row rather than answering it.

   Revised to 84px (founder review, 2026-09-25, second look at the deployed
   result). Sixty moved it but left the column still reading high against the
   card: 202.6px of ground under the trust line at 1440. Eighty-four takes
   that to 178.6px and puts the headline's optical top 81px below the card's
   edge. The ceiling on this number is the word CENTRED: the copy group is
   roughly 250px tall against a card near 830px, so the offset that would
   centre it is about 290px. At 84 the group still sits in the upper half of
   the card's height, which is what "top-oriented, not centred" means here,
   and the whitespace under it is the hero's air rather than a gap.

   It sits on the grid item, not on the type, so nothing inside the group moves
   relative to anything else — the H1, the paragraph and the trust line keep
   their own margins exactly. Below 64rem the column stacks and both
   breakpoints below reset it to zero, so there is nothing to undo on a
   phone. */
.hero-copy { grid-area: copy; display: block; max-width: 38rem; margin: 0; align-self: start; padding-block-start: 5.25rem; }
.hero-primary { grid-area: chat; min-width: 0; }
.hero-home h1 {
  font-size: clamp(2.625rem, 1.9rem + 2.5vw, 4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: var(--track-display);
  color: var(--accent-deep);
  max-width: 14ch;
  text-wrap: balance;
  /* Air under the display line. 1.25rem was the page's default for a heading,
     1.5rem was the first refinement, and 1.75rem is where the relationship
     settles: at 64px of headline the paragraph needs to be a beat away rather
     than a line away, and the trust line under it needs to be closer to the
     paragraph than the paragraph is to the headline, or the three read as
     three unrelated blocks (founder review 2026-09-22, rounds 1 and 2). */
  margin: 0 0 1.75rem;
}
.hero-lede {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 34rem;
  margin: 0;
}
/* The trust line (founder review round 1, 2026-09-17): one quiet sentence
   under the paragraph, in the meta voice the rest of the site uses for
   provenance. Not a card, not a badge row. Its link is the one door to the
   whole account of how Sahvelo works. */
.hero-trust {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 34rem;
  /* Subordinate to the paragraph and clearly a different register, which at
     13.6px it was not: it read as a fourth line of the paragraph set smaller. */
  margin: 1.1rem 0 0;
}
.hero-trust a { color: var(--accent-deep); }
/* The browse row left the hero (settling pass, 2026-09-10). */
@media (max-width: 64rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "chat"; row-gap: 1.75rem; }
  /* Stacked: nothing to be optically centred against, so the lift is off. */
  .hero-copy { margin-top: 0; padding-block-start: 0; }
  .hero-home h1 { max-width: 16ch; }
  .hero-lede { max-width: 40rem; }
}
@media (max-width: 36rem) {
  .hero-home { padding-top: 2rem; }
  .hero-home h1 { font-size: clamp(2.25rem, 1.5rem + 4.5vw, 2.75rem); max-width: none; margin-bottom: 1.25rem; }
}
/* Talking: one column, and the hero's own pieces fold as they always did. */
.chat-talking .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "chat"; }
/* The product moment. A warm tonal panel on the washed surface with one
   hairline — enough weight to balance a 52px headline across the row, and
   nothing in it that is not the offer, the action, or what the action costs
   the reader. */
.hero-offer {
  padding: 1.6rem 1.65rem 1.5rem;
  background: var(--paper-soft);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.hero-offer-heading {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: var(--track-ui);
  margin: 0 0 0.5rem;
}
.hero-offer-lede {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
.hero-offer-cta { margin: 0; }
.hero-offer-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0.9rem 0 0;
}
.hero-offer-alt { font-family: var(--font-ui); font-size: 0.875rem; margin: 0.85rem 0 0; }
.hero-offer-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.hero-offer-alt a:hover, .hero-offer-alt a:focus-visible { border-bottom-color: var(--accent); }
/* One filled button on the page, and this is it. The hairline in a darker
   chestnut and the single-pixel shadow are the whole of the "premium
   detailing": at this size anything more would read as a conversion banner. */
.button-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  padding: 0 1.6rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) { .button-hero { transition: none; } }
/* The arrow went with the shadow and the pill. A button is already a button. */
.button-hero:hover, .button-hero:focus-visible { background: var(--accent-deep); }
.button-hero-short { display: none; }
/* Below about 380px the panel is 244px wide inside its padding, and the full
   label breaks "Handbook" onto a second line beside the arrow. The panel
   heading directly above already says Legacy Handbook. */
@media (max-width: 380px) {
  .button-hero-long { display: none; }
  .button-hero-short { display: inline; }
}
/* Inside the offer panel the button spans it, because the panel is the frame
   the action belongs to. It is still 56px and still one button. */
.hero-offer .button-hero { width: 100%; justify-content: center; }
/* The action moved into the reading column (R3), so it needs the rhythm of the
   column rather than the panel's. */
.hero-cta { margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; }
.hero-copy .hero-offer-note { margin: 0.9rem 0 0; max-width: 46ch; }
/* R3: a frame around a real thing, not a tinted card. */
.hero-offer {
  background: var(--surface);
  border: 1px solid var(--rule-firm);
  border-radius: 0;
  box-shadow: none;
}
/* ═══════════════════════════════════════════════════════════════════════
   THE HOMEPAGE BELOW THE HERO (founder refinement 2, 2026-09-10)

   The art direction is a Jake Arnold interior translated into an editorial
   product: plaster and cream, bone and parchment, walnut and camel; almost
   no true black; shadows that are broad, soft and warm, in three places
   only; one restrained blue, on the one action that starts a conversation.
   Luxury comes from proportion, type, spacing and restraint. The page is a
   sequence of rooms in one house: each section has its own composition and
   its own ground, and none of them is a directory.

   Order: what Sahvelo helps with, After a Death, Helping a Parent, the
   Handbook, Planning Ahead, Briefings, Latest, the close.
   ═══════════════════════════════════════════════════════════════════════ */
.page-home .home-areas,
.page-home .home-world,
.page-home .home-briefings,
.page-home .home-handbook,
.page-home .home-latest,
.page-home .trust {
  padding-block: clamp(3.5rem, 2.6rem + 3vw, 6rem);
}
/* The rooms. Cream, then bone, then cream, and parchment for the close. */
.page-home .home-areas,
.page-home .home-world-parent,
.page-home .home-world-planning,
.page-home .home-latest { background: var(--paper-soft); }
.page-home .home-world-after,
.page-home .home-handbook,
.page-home .home-briefings { background: var(--paper); }
.page-home .trust { background: var(--paper-deep); }
.page-home .home-areas { padding-block: clamp(2.75rem, 2rem + 2.4vw, 4.5rem); }
/* One heading treatment for every room: the editorial serif, in the display
   selector at the top of this file, in deep umber rather than ink. */
.home-h2 {
  font-size: clamp(2rem, 1.5rem + 1.7vw, 3rem);
  line-height: 1.06;
  font-weight: 400;
  color: var(--accent-deep);
  margin: 0;
}
.page-home .eyebrow { color: var(--accent); margin-bottom: 0.8rem; }
.home-world-lede {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42rem;
  margin: 0.9rem 0 0;
  text-wrap: pretty;
}
.home-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
/* The doors inside a curated group: one or two, never a list of lists. */
.home-links { list-style: none; margin: 0; padding: 0; }
.home-links li { margin: 0; }
.home-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--accent-deep);
  text-decoration: none;
}
.home-links a::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: rotate(-45deg); flex: none; opacity: 0.7; transition: transform 0.15s ease; }
.home-links a:hover, .home-links a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.home-links a:hover::after { transform: translateX(3px) rotate(-45deg); }
/* The one quiet route out of a room. */
.home-foot { margin: clamp(2rem, 1.6rem + 1.4vw, 3rem) 0 0; }
.home-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-hairline);
}
.home-foot a::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: rotate(-45deg); flex: none; transition: transform 0.15s ease; }
.home-foot a:hover, .home-foot a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
.home-foot a:hover::after { transform: translateX(3px) rotate(-45deg); }
/* The split head: name left, lede right, on one baseline. */
.home-world-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  column-gap: clamp(2.5rem, 5vw, 6rem);
  align-items: end;
}
.home-world-head-split .home-world-lede { margin-top: 0; padding-bottom: 0.4rem; }
@media (max-width: 52rem) {
  .home-world-head-split { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; align-items: start; }
  .home-world-head-split .home-world-lede { margin-top: 0.25rem; padding-bottom: 0; }
}
/* The three shadows this page is allowed: the open carousel card, the
   Handbook's two images, and the story cards. Broad, soft, warm. */
.home-shadow-soft {
  box-shadow:
    0 1px 2px rgba(63, 50, 38, 0.05),
    0 10px 24px -12px rgba(63, 50, 38, 0.16),
    0 28px 48px -28px rgba(63, 50, 38, 0.26);
}

/* ── THE PROOF BAND ───────────────────────────────────────────────────────
   A decisive break beneath the hero: a rich dark brown ground, cream type,
   four numbers counted from the repository at build time. */
.page-home .home-proof {
  background: var(--accent-deep);
  color: var(--paper);
  padding-block: clamp(1.4rem, 1.1rem + 1.1vw, 2.2rem);
}
.home-proof-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-proof-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.25rem 1rem;
  border-left: 1px solid rgba(251, 250, 248, 0.18);
}
.home-proof-list li:first-child { border-left: 0; }
.home-proof-n {
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.875rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--paper);
  font-variant-numeric: lining-nums tabular-nums;
}
.home-proof-l {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(251, 250, 248, 0.78);
  max-width: 18ch;
  text-wrap: balance;
}
@media (max-width: 52rem) {
  .home-proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .home-proof-list li:nth-child(3) { border-left: 0; }
}

/* ── WHAT SAHVELO HELPS WITH ──────────────────────────────────────────────
   An orientation moment on the bone ground, centered: the sentence, then
   the three situations as one line of names with a hairline above. Short.
   The rhythm of the page (founder note, pass 3): hero left with the entry
   right; this room centered; After a Death left; Helping a Parent centered
   above its carousel; the Handbook with the object left and the copy
   right; Planning Ahead offset; Briefings beside its form; Latest centered
   above its cards; the close left. Alignment follows purpose. */
.page-home-a .home-areas-head { max-width: 46rem; margin-inline: auto; text-align: center; }
.page-home-a .home-areas-head .home-world-lede { margin-inline: auto; }
/* The three starting points sit centered in their thirds beneath it: the
   one centered composition, completed (final settling pass, 2026-09-10). */
.page-home-a .home-areas-list > li { text-align: center; }
.page-home-a .home-area-line { margin-inline: auto; }
.home-areas-head { max-width: 46rem; }
.home-areas-list {
  list-style: none;
  margin: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  border-top: 1px solid var(--rule-strong);
}
.home-areas-list > li { padding: 1.25rem 0 0.25rem; }
.home-area-name {
  display: block;
  font-family: var(--font-ui);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: var(--track-flat);
  color: var(--accent-deep);
  margin: 0 0 0.35rem;
}
.home-area-line {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30ch;
}
.home-areas-list a { display: block; color: inherit; text-decoration: none; min-height: var(--tap); }
.home-areas-list a:hover .home-area-name, .home-areas-list a:focus-visible .home-area-name { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 52rem) {
  .home-areas-list { grid-template-columns: minmax(0, 1fr); }
  .home-areas-list > li + li { border-top: 1px solid var(--rule); }
  .home-area-line { max-width: none; }
}

/* ── AFTER A DEATH ────────────────────────────────────────────────────────
   Highly curated. Start here is one contained moment: a recessed surface
   holding three columns divided by hairlines, each a real starting point
   with the page's own summary and a read line. Below, three themes with a
   line and one or two doors. Eight destinations in the whole room. */
.home-start { margin-top: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem); }
.home-start-head { display: flex; align-items: baseline; gap: 1rem 1.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.home-start-lede { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-mute); margin: 0; }
.home-gateways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}
.home-gateway {
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  box-shadow:
    0 1px 2px rgba(63, 50, 38, 0.05),
    0 10px 24px -12px rgba(63, 50, 38, 0.16),
    0 28px 48px -28px rgba(63, 50, 38, 0.26);
}
.home-gateway h3 {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.25;
  color: var(--accent-deep);
  margin: 0 0 0.6rem;
}
.home-gateway h3 a { color: inherit; text-decoration: none; }
.home-gateway h3 a::before { content: ""; position: absolute; inset: 0; }
.home-gateway p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.home-gateway-read {
  margin-top: auto !important;
  padding-top: 1.1rem;
  font-family: var(--font-ui) !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
  color: var(--accent) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.home-gateway-read::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; }
.home-gateway:hover { background: var(--paper); }
.home-gateway:hover h3 a, .home-gateway:focus-within h3 a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.home-gateway:hover .home-gateway-read::after { transform: translateX(3px) rotate(-45deg); }
.home-gateway:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.home-curated {
  display: block;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--rule-strong);
}
/* The themes as structured rows: name, line, doors. */
.home-curated-area {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr) minmax(0, 0.9fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.home-curated-area h3 {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--track-flat);
  color: var(--accent-deep);
  margin: 0;
}
.home-curated-line {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
@media (max-width: 52rem) {
  .home-gateways { grid-template-columns: minmax(0, 1fr); }
  .home-curated-area { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; padding: 1.25rem 0; }
  .home-curated-area:last-child { border-bottom: 0; }
  .home-curated-line { max-width: none; }
}

/* ── HELPING A PARENT ─────────────────────────────────────────────────────
   The head centered above the carousel (Version A), the introduction in
   one measure beneath the name. */
.page-home-a .home-world-parent .home-world-head-split { display: block; text-align: center; max-width: 46rem; margin-inline: auto; }
.page-home-a .home-world-parent .home-world-head-split .home-world-lede { margin: 1rem auto 0; padding-bottom: 0; max-width: 42rem; }
/* ── HELPING A PARENT ─────────────────────────────────────────────────────
   Five grouped cards on a scroll-snap track, on the bone ground. The open
   card stands forward on a soft shadow; the others sit back a step and the
   next one shows at the edge, so the reader can tell there is more before
   they touch anything. A count, a progress line and two buttons above;
   arrow keys on the track; swipe on a phone; no autoplay. */
.home-carousel { margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.home-carousel-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.25rem;
  margin: 0 0 1.25rem;
}
.home-carousel-count {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  min-width: 3.5rem;
}
.home-carousel-progress { height: 1px; background: var(--rule-strong); position: relative; }
.home-carousel-progress-fill { position: absolute; left: 0; top: -1px; height: 3px; background: var(--accent); width: 20%; transition: width 0.35s ease; }
.home-carousel-controls { display: flex; gap: 0.5rem; }
.home-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  color: var(--accent-deep);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.home-carousel-btn:hover, .home-carousel-btn:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.home-carousel-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-carousel-btn[disabled] { color: var(--rule-strong); border-color: var(--rule); background: transparent; cursor: default; }
.home-carousel-arrow { width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(-2px) rotate(-45deg); }
.home-carousel-arrow-prev { transform: translateX(2px) rotate(135deg); }
.home-cards {
  list-style: none;
  margin: 0 calc(-1 * clamp(1.125rem, 2vw, 1.5rem));
  padding: 1rem clamp(1.125rem, 2vw, 1.5rem) 2.5rem;
  display: flex;
  align-items: stretch;
  gap: clamp(1.25rem, 2vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1.125rem, 2vw, 1.5rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.home-cards::-webkit-scrollbar { display: none; }
.home-cards:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-card {
  flex: 0 0 auto;
  width: clamp(19rem, 40%, 30rem);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) clamp(1.5rem, 1.2rem + 1vw, 2rem);
  display: flex;
  flex-direction: column;
  opacity: 0.72;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.home-card.is-current {
  opacity: 1;
  transform: none;
  border-color: var(--rule-strong);
  box-shadow:
    0 1px 2px rgba(63, 50, 38, 0.05),
    0 14px 28px -14px rgba(63, 50, 38, 0.18),
    0 36px 60px -32px rgba(63, 50, 38, 0.3);
}
.home-card-art {
  width: 7.5rem;
  height: 5.5rem;
  color: var(--accent);
  margin: 0 0 1.5rem;
}
.home-art { width: 100%; height: 100%; display: block; }
.home-card-h {
  font-family: var(--font-ui);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.25;
  color: var(--accent-deep);
  margin: 0 0 0.6rem;
}
.home-card-line {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}
.home-card .home-links { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rule); }
@media (max-width: 52rem) {
  .home-card { width: min(80vw, 22rem); padding: 1.5rem 1.4rem 1.35rem; }
  .home-card-art { width: 6rem; height: 4.5rem; margin-bottom: 1.1rem; }
  .home-card-h { font-size: 1.1875rem; }
  .home-card-line { font-size: 0.9375rem; }
  .home-carousel-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .home-cards { scroll-behavior: auto; }
  .home-card, .home-carousel-progress-fill { transition: none; }
}

/* ── THE SAHVELO HANDBOOK ─────────────────────────────────────────────────
   Copy in the narrow column; the object on a parchment stage in the wide
   one, the way a product is photographed on a table in warm light. */
.home-handbook-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  column-gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
/* Version A turns the room round: the object on the left, the copy on the
   right, so the page shifts its weight after two left-led rooms. */
.page-home-a .home-handbook-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.page-home-a .home-handbook-copy { order: 2; }
.page-home-a .home-handbook-visual { order: 1; }
.home-handbook-lead {
  font-family: var(--font-ui);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.35;
  color: var(--accent-deep);
  margin: 1.25rem 0 0;
  max-width: 24ch;
  text-wrap: balance;
}
.home-handbook-copy .home-world-lede { margin-top: 0.85rem; }
.home-handbook-action { margin: 1.75rem 0 0; }
.page-home .button-primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); padding-inline: 1.6rem; }
.page-home .button-primary:hover, .page-home .button-primary:focus-visible { background: var(--accent); border-color: var(--accent); }
.home-handbook-visual { min-width: 0; }
.hbk-stage {
  /* The floor. The clearing mark is two planes on a diagonal, which is one
     cell-pair of a checkerboard; repeated, it is a stone floor in two
     taupes a shade apart (founder pass 3, 2026-09-10). Noticed on the
     second look, never the first. The one place the motif is used. */
  /* Book cloth (settling pass, 2026-09-10). A warm tobacco ground with the
     faintest woven grain: two hairline weaves at a three-pixel pitch, one
     a breath lighter and one a breath darker than the cloth. Tactile,
     contemporary, never a photograph of fabric. The pattern module is
     parked. */
  background-color: #55442f;
  background-image:
    repeating-linear-gradient(0deg, rgba(251, 250, 248, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(20, 14, 8, 0.06) 0 1px, transparent 1px 3px);
  background-size: auto, auto;
  background-position: 0 0, 0 0;
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.75rem) clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem);
  border: 0;
}
.home-handbook-caption {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 1rem 0 0;
  max-width: 44rem;
}
@media (max-width: 60rem) {
  .home-handbook-grid, .page-home-a .home-handbook-grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; align-items: start; }
  /* Stacked, the words come first and the object follows. */
  .page-home-a .home-handbook-copy { order: 1; }
  .page-home-a .home-handbook-visual { order: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE HANDBOOK AS A DESIGNED PRODUCT

   Exactly two images: the cover and one interior spread, slightly overlaid,
   lifted off the stage by a real shadow. Drawn from a real plan by
   scripts/render-handbook-visual.mjs. Paper the colour of the page, a
   camel spine, the real lockup, and a sample a reader can take in from
   arm's length: four rows of time, three things to do, two links.
   ═══════════════════════════════════════════════════════════════════════ */
.hbk-stack {
  position: relative;
  padding: 1.25rem 0 1.5rem 0;
}
.hbk-stack .hbk-spread { margin-left: 29%; width: 71%; }
.hbk-stack .hbk-cover {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 33%;
  z-index: 2;
}
.hbk-stack .hbk-page-verso { padding-left: 7cqw; }
.hbk-shadow {
  /* On the cloth the shadow is the object's own darkness, soft and low. */
  box-shadow:
    0 1px 2px rgba(20, 14, 8, 0.25),
    0 14px 28px -12px rgba(20, 14, 8, 0.45),
    0 44px 72px -30px rgba(20, 14, 8, 0.55);
}

/* ── The cover ─────────────────────────────────────────────────────────
   The one blue. A bound board in the muted blue of the artwork in the
   reference rooms, cream type, a deeper blue spine, the real lockup at the
   head, the product's name in the serif, the situation in small capitals
   over one cream rule. Special, restrained, not a brand colour. */
.hbk-cover {
  position: relative;
  aspect-ratio: 5 / 7;
  background: var(--accent-blue);
  border: 1px solid var(--accent-blue-deep);
}
.hbk-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6.5%;
  background: linear-gradient(to right, var(--accent-blue-deep) 0, var(--accent-blue-deep) 55%, rgba(251, 250, 248, 0.08) 100%);
  z-index: 1;
}
.hbk-cover-board { z-index: 1; }
.hbk-cover-board {
  position: absolute;
  inset: 5% 7% 5% 12.5%;
  border: 1px solid rgba(251, 250, 248, 0.28);
  display: flex;
  flex-direction: column;
  padding: 10% 9% 9%;
  container-type: inline-size;
}
.hbk-cover-brand {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.4375rem, 5cqw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 250, 248, 0.88);
}
.hbk-cover-title { margin: auto 0; }
.hbk-cover-name {
  font-size: clamp(1.25rem, 19cqw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--paper);
  margin: 0 0 0.7em;
  text-wrap: balance;
}
.hbk-cover-sub {
  font-family: var(--font-ui);
  font-size: clamp(0.4375rem, 4.8cqw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 250, 248, 0.88);
  margin: 0;
  padding-top: 1em;
  border-top: 1px solid rgba(251, 250, 248, 0.55);
}
.hbk-cover-foot {
  font-family: var(--font-ui);
  font-size: clamp(0.4rem, 4cqw, 0.6875rem);
  color: rgba(251, 250, 248, 0.72);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.hbk-cover-dot { width: 3px; height: 3px; background: rgba(251, 250, 248, 0.8); margin: 0 0.6em; flex: none; }

/* ── The spread ──────────────────────────────────────────────────────── */
.hbk-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  aspect-ratio: 10 / 7.6;
  min-width: 0;
  container-type: inline-size;
}
.hbk-page {
  position: relative;
  padding: 4.8cqw 4.8cqw 6cqw;
  min-width: 0;
  overflow: hidden;
}
.hbk-page-verso { border-right: 1px solid var(--rule-strong); background: linear-gradient(to left, var(--paper-deep), var(--paper) 9%); }
.hbk-page-recto { background: linear-gradient(to right, var(--paper-deep), var(--paper) 9%); }
.hbk-running {
  font-family: var(--font-ui);
  font-size: 1.45cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 2.8cqw;
}
.hbk-page-h {
  font-size: 4cqw;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--accent-deep);
  margin: 0 0 1.4cqw;
}
.hbk-page-shape {
  font-family: var(--font-body);
  font-size: 1.95cqw;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 2.4cqw;
}
.hbk-page-sub {
  font-family: var(--font-ui);
  font-size: 1.4cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 3.2cqw 0 1.2cqw;
}
.hbk-timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--accent-deep); }
/* The calendar: four cells, two by two, each a stretch of time with how
   many things fall in it and the first of them. */
.hbk-cal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--accent-deep); }
.hbk-cal-cell { display: grid; gap: 0.5cqw; padding: 2cqw 2cqw 2.2cqw 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.hbk-cal-cell:nth-child(2n) { padding-left: 2cqw; border-left: 1px solid var(--rule); }
.hbk-cal-when { font-family: var(--font-ui); font-size: 1.35cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.hbk-cal-n { font-size: 4.2cqw; line-height: 1; letter-spacing: var(--track-display); color: var(--accent-deep); font-variant-numeric: lining-nums tabular-nums; }
.hbk-cal-unit { font-family: var(--font-ui); font-size: 1.4cqw; letter-spacing: 0.02em; color: var(--ink-mute); margin-left: 0.6cqw; }
.hbk-cal-first { font-family: var(--font-body); font-size: 1.75cqw; line-height: 1.35; color: var(--ink-soft); }
.hbk-running-state { float: right; color: var(--ink-mute); }
.hbk-tl-row {
  display: grid;
  grid-template-columns: minmax(0, 12.5cqw) minmax(0, 1fr);
  column-gap: 2cqw;
  padding: 2cqw 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.hbk-tl-when { font-family: var(--font-ui); font-size: 1.7cqw; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-deep); line-height: 1.3; }
.hbk-tl-body { display: grid; gap: 0.4cqw; min-width: 0; }
.hbk-tl-first { font-family: var(--font-body); font-size: 2.15cqw; line-height: 1.35; color: var(--ink); }
.hbk-tl-more { font-family: var(--font-ui); font-size: 1.5cqw; color: var(--ink-mute); }
.hbk-check { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--accent-deep); }
.hbk-check-row {
  display: grid;
  grid-template-columns: 2.6cqw minmax(0, 1fr);
  column-gap: 2cqw;
  padding: 2.1cqw 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.hbk-check-box { width: 2.6cqw; height: 2.6cqw; border: 1px solid var(--accent-deep); margin-top: 0.4cqw; }
.hbk-check-body { display: grid; gap: 0.35cqw; min-width: 0; }
.hbk-check-title { font-family: var(--font-body); font-size: 2.15cqw; line-height: 1.35; color: var(--ink); }
.hbk-links { list-style: none; margin: 0; padding: 0; }
.hbk-links li {
  font-family: var(--font-ui);
  font-size: 1.8cqw;
  line-height: 1.4;
  color: var(--accent-deep);
  padding: 1.2cqw 0 1.2cqw 2.6cqw;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.hbk-links li::before { content: ""; position: absolute; left: 0; top: 1.9cqw; width: 1.4cqw; height: 1.4cqw; border: 1px solid var(--accent); }
.hbk-folio {
  position: absolute;
  bottom: 2.4cqw;
  font-family: var(--font-ui);
  font-size: 1.5cqw;
  color: var(--ink-mute);
  margin: 0;
}
.hbk-page-verso .hbk-folio { left: 4.8cqw; }
.hbk-page-recto .hbk-folio { right: 4.8cqw; }
/* On a phone the cover stands first and the spread's pages stack. */
@media (max-width: 36rem) {
  .hbk-stage { padding: 1.5rem 1.125rem; }
  .hbk-stack { padding: 0; display: grid; row-gap: 1.5rem; }
  .hbk-stack .hbk-cover { position: relative; width: 62%; margin-left: 0; order: -1; }
  .hbk-stack .hbk-spread { margin-left: 0; width: 100%; aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); }
  .hbk-page, .hbk-stack .hbk-page-verso { padding: 1.25rem 1.2rem 2.4rem; }
  .hbk-page-verso { border-right: 0; border-bottom: 1px solid var(--rule); background: none; }
  .hbk-page-recto { background: none; }
  .hbk-running { font-size: 0.625rem; margin-bottom: 0.9rem; }
  .hbk-page-h { font-size: 1.375rem; margin-bottom: 0.5rem; }
  .hbk-page-shape, .hbk-tl-first, .hbk-check-title { font-size: 0.9375rem; }
  .hbk-page-sub, .hbk-tl-when, .hbk-tl-more, .hbk-folio, .hbk-links li { font-size: 0.75rem; }
  .hbk-cal-cell { padding: 0.75rem 0.75rem 0.85rem 0; gap: 0.2rem; }
  .hbk-cal-cell:nth-child(2n) { padding-left: 0.75rem; }
  .hbk-cal-when { font-size: 0.625rem; }
  .hbk-cal-n { font-size: 1.75rem; }
  .hbk-cal-unit { font-size: 0.6875rem; }
  .hbk-cal-first { font-size: 0.8125rem; }
  .hbk-links li { padding-left: 1.25rem; }
  .hbk-links li::before { top: 0.75rem; width: 0.625rem; height: 0.625rem; }
  .hbk-tl-row { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); column-gap: 0.75rem; padding: 0.65rem 0; }
  .hbk-check-row { grid-template-columns: 1rem minmax(0, 1fr); column-gap: 0.7rem; padding: 0.65rem 0; }
  .hbk-check-box { width: 1rem; height: 1rem; margin-top: 0.15rem; }
  .hbk-links li { padding: 0.5rem 0 0.5rem 1.25rem; }
  .hbk-folio { bottom: 0.75rem; }
  .hbk-page-verso .hbk-folio { left: 1.2rem; }
  .hbk-page-recto .hbk-folio { right: 1.2rem; }
}
@media print {
  .hbk-shadow { box-shadow: none; }
}

/* ── PLANNING AHEAD ───────────────────────────────────────────────────────
   The sequence, settled (2026-09-10): three territories on one baseline,
   numbered, read left to right, joined by one rule that runs the width of
   the row and ends in a small chevron. Different things to put in place,
   in the order that makes each easier. Directional, connected, and not a
   process diagram. */
.home-seq {
  list-style: none;
  margin: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem) 0 0;
  padding: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3vw, 3.5rem);
  position: relative;
}
.home-seq::before { content: ""; position: absolute; left: 0; right: 0.75rem; top: 0.875rem; border-top: 1px solid var(--rule-strong); }
.home-seq::after { content: ""; position: absolute; right: 0.55rem; top: calc(0.875rem - 0.25rem); width: 0.5rem; height: 0.5rem; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: rotate(-45deg); }
.home-seq-step { position: relative; display: flex; flex-direction: column; }
.home-seq-stage {
  position: absolute;
  top: -1.75rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding-right: 0.75rem;
  background: var(--paper-soft);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-seq-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--paper);
  background: var(--accent-deep);
}
.home-seq-title {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--track-display);
  color: var(--accent-deep);
  margin: 0.75rem 0 0.5rem;
  text-wrap: balance;
}
.home-seq-puts {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--track-flat);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 0.75rem;
  max-width: 30ch;
}
.home-seq-line {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
  max-width: 36ch;
  text-wrap: pretty;
}
@media (max-width: 52rem) {
  /* A clean vertical progression: the rule runs down the left through the
     numerals and ends in the same chevron. */
  .home-seq { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; padding: 0 0 0 3rem; }
  .home-seq::before { left: 0.875rem; right: auto; top: 0; bottom: 0.75rem; border-top: 0; border-left: 1px solid var(--rule-strong); }
  .home-seq::after { right: auto; left: calc(0.875rem - 0.25rem); top: auto; bottom: 0.55rem; transform: rotate(45deg); }
  .home-seq-stage { position: absolute; top: 0; left: -3rem; padding: 0 0 0.5rem; background: transparent; }
  .home-seq-stage .home-seq-n { background: var(--accent-deep); }
  .home-seq-stage-word { display: none; }
  .home-seq-title { margin-top: 0; }
  .home-seq-line, .home-seq-puts { max-width: none; }
}

/* ── SAHVELO BRIEFINGS ────────────────────────────────────────────────────
   A product explained beside the real control that turns it on, on the
   cream ground; the form stands on the surface. */
.home-briefings .briefings-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  column-gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.home-briefings .briefings-copy { max-width: 34rem; }
.briefings-points {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.briefings-points li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.briefings-points strong { color: var(--ink); font-weight: 600; }
.home-briefings .briefings-panel {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
}
.home-briefings .briefings-form { max-width: none; }
.home-briefings .briefings-submit { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.home-briefings .briefings-submit:hover, .home-briefings .briefings-submit:focus-visible { background: var(--accent); border-color: var(--accent); }
@media (max-width: 56rem) {
  .home-briefings .briefings-inner { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
}

/* ── LATEST FROM SAHVELO ──────────────────────────────────────────────────
   Three independent editorial cards on the bone ground, each on its own
   soft shadow: the area with the mark as a cue, a serif headline, the
   deck, the reviewed date and a read line. */
.home-latest-head { max-width: 46rem; }
.home-stories {
  list-style: none;
  margin: clamp(2rem, 1.6rem + 1.6vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}
.home-story {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 2px rgba(63, 50, 38, 0.05),
    0 10px 24px -12px rgba(63, 50, 38, 0.16),
    0 28px 48px -28px rgba(63, 50, 38, 0.26);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-story:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(63, 50, 38, 0.05),
    0 14px 30px -14px rgba(63, 50, 38, 0.2),
    0 36px 60px -30px rgba(63, 50, 38, 0.32);
}
.home-story-world {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-story-mark { height: 0.8rem; width: auto; display: block; }
.home-story h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: 1.18;
  color: var(--accent-deep);
  margin: 0 0 0.7rem;
  text-wrap: balance;
}
.home-story h3 a { color: inherit; text-decoration: none; }
.home-story h3 a::before { content: ""; position: absolute; inset: 0; }
.home-story:hover h3 a, .home-story:focus-within h3 a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--accent-hairline); }
.home-story:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-story-deck {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}
.home-story-foot {
  margin: auto 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.home-story-meta { color: var(--ink-mute); }
.home-story-read { color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 0.45rem; }
.home-story-read::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; }
.home-story:hover .home-story-read::after { transform: translateX(3px) rotate(-45deg); }
@media (max-width: 52rem) {
  .home-stories { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .home-story { transition: none; }
  .home-story:hover { transform: none; }
}

/* ── THE CLOSE ────────────────────────────────────────────────────────────
   Built around you: on the parchment ground, a heading and three stacked
   statements in the second person, separated by rules. No cards. */
.home-trust-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
.home-trust-grid[data-trust="open"] { grid-template-columns: minmax(0, 1fr); }
.home-trust-side { padding-top: 0.5rem; }
.home-trust-side-note { font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-mute); margin: 1rem 0 0; max-width: 40ch; }
/* CORPUS. Four real entries from the source registry as sheets of paper,
   stacked with a step, the kind and the jurisdiction in small capitals, the
   label in the serif, the date it was read. An abstraction of the record. */
.home-sheets { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.25rem; position: relative; }
.home-sheet {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 1.1rem 1.25rem 1rem;
  margin: 0 0 -1px calc(-1.25rem + var(--sheet-step, 0rem));
  box-shadow: 0 1px 2px rgba(63, 50, 38, 0.05), 0 12px 24px -14px rgba(63, 50, 38, 0.2);
}
.home-sheet:nth-child(1) { --sheet-step: 0rem; }
.home-sheet:nth-child(2) { --sheet-step: 0.75rem; }
.home-sheet:nth-child(3) { --sheet-step: 1.5rem; }
.home-sheet:nth-child(4) { --sheet-step: 2.25rem; }
.home-sheet-kind { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.home-sheet-dot { width: 3px; height: 3px; background: var(--accent); }
.home-sheet-title { font-size: 1.0625rem; font-weight: 400; line-height: 1.3; letter-spacing: var(--track-display); color: var(--ink); margin: 0 0 0.35rem; }
.home-sheet-meta { font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-mute); margin: 0; }
@media (max-width: 56rem) {
  .home-trust-grid { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
}

/* ── THE CLOSE ────────────────────────────────────────────────────────────
   One quiet invitation before the footer (settling pass, 2026-09-10): the
   hero's promise again, and the two ways in. Not a section; a handoff. */
.page-home .home-close { background: var(--paper); border-top: 1px solid var(--rule); padding-block: clamp(3rem, 2.4rem + 2.4vw, 5rem); }
.home-close-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 6rem); align-items: center; }
.home-close-copy .home-world-lede { max-width: 34rem; }
.home-close-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: flex-end; }
.page-home .home-close .button-secondary { color: var(--accent-deep); border-color: var(--rule-firm); }
.page-home .home-close .button-secondary:hover, .page-home .home-close .button-secondary:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
@media (max-width: 56rem) {
  .home-close-inner { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .home-close-actions { justify-content: flex-start; }
}
@media (max-width: 36rem) {
  .home-close-actions .button { width: 100%; }
}
.home-trust-head { max-width: 40rem; margin: 0 0 clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
.home-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 56rem;
  border-top: 1px solid var(--accent-deep);
}
.home-trust-row {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--rule-strong);
}
.home-trust-row h3 {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.3;
  color: var(--accent-deep);
  margin: 0;
  text-wrap: balance;
}
.home-trust-row p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
.page-home .trust .section-foot { margin-top: 1.5rem; }
@media (max-width: 44rem) {
  .home-trust-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; padding: 1.25rem 0 1.35rem; }
}


/* Print: nothing on this page is a ground, so nothing needs hiding but the
   controls that cannot work on paper. */
@media print {
  .home-handbook-action, .home-briefings, .home-carousel-bar { display: none; }
  .home-cards { display: grid; overflow: visible; }
  .home-card { opacity: 1; transform: none; }
  .home-map-panel[hidden] { display: grid; }
}
.topic-title a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.topic-title a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.state-cards {
  /* 18rem rather than 15rem: at 72rem the old floor gave four columns, so six
     states landed as 4 + 2 with two empty cells. Three columns divide the six
     evenly and give the route list a wider measure. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Deliberately lighter than a door. This is evidence that the product has
   real coverage, not a decision the reader has to make. */
.state-card {
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.state-card:hover { border-color: var(--rule-strong); }
.state-card h3 { font-size: 1.0625rem; margin: 0 0 0.35rem; }
.state-card h3 a { color: var(--ink); text-decoration: none; }
.state-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.state-card-routes {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}
/* Pinned to the foot of the card so the reviewed dates line up across a row
   instead of floating at whatever height the route list happens to end. */
.state-card-meta { font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-mute); margin: auto 0 0; padding-top: 0.5rem; }
/* Five items, composed rather than wrapped. A six-column track lets the first
   three take two columns each and the last two take three each: both rows run
   flush from the left edge to the right, and the second row reads as a
   deliberate wider pair instead of the leftovers of a four-column grid. Five
   equal columns was the other option and was rejected — it puts the body copy
   at about 26 characters a line. */
.trust-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-list > li { grid-column: span 2; }
.trust-list > li:nth-child(n + 4) { grid-column: span 3; }
.trust-list h3 {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--accent-wash);
}
.trust-list p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }
/* The reference shelf, as rows. It was two outlined, filled, rounded
   rectangles, each carrying its destination twice. Two items do not need
   furniture to be told apart from each other; a rule does it, and a rule is
   what the rest of this product already uses for a set of ways in. */
.tool-rows { list-style: none; margin: 0 0 2.5rem; padding: 0; border-top: 1px solid var(--rule); }
.tool-row { padding: 1.35rem 0; border-bottom: 1px solid var(--rule); }
.tool-row h2 {
  font-family: var(--font-ui);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: var(--track-tight);
  margin: 0 0 0.4rem;
}
.tool-row h2 a { color: var(--ink); text-decoration: none; }
.tool-row h2 a:hover, .tool-row h2 a:focus-visible { color: var(--accent); }
.tool-row p { font-family: var(--font-body); color: var(--ink-soft); margin: 0; max-width: var(--prose-measure); }
.topic-panel {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.topic-panel h3 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.topic-panel h3 a { color: var(--ink); text-decoration: none; }
.topic-panel h3 a:hover { color: var(--accent); }
/* Six states as rows. Pills read as filters over something else on the page;
   these are the one topic Legacy publishes state by state, and a row can carry
   the date the state was last checked, which a pill cannot. */
.state-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.state-row { border-bottom: 1px solid var(--rule); }
.state-row a {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0;
  text-decoration: none;
  color: inherit;
}
.state-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.state-row-name { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
.state-row a:hover .state-row-name,
.state-row a:focus-visible .state-row-name { color: var(--accent); text-decoration: underline; }
.state-row-meta { font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-mute); white-space: nowrap; }
/* The routes are the substance — six states, each with its own set of legal
   routes, is the whole claim the homepage makes. They stay, as a second line
   under the state, which is a third of the height six bordered cards took. */
.state-row-routes {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 0.15rem;
}
.state-rows-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .state-rows, .state-rows-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (max-width: 640px) {
  .state-rows, .state-rows-detail { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}
.future-topics { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.future-topic { padding-left: 1rem; border-left: 2px solid var(--rule); }
.future-topic h3 { font-size: 1.0625rem; margin: 0 0 0.35rem; }
.future-topic p { font-size: 0.9375rem; color: var(--ink-mute); margin: 0; }
.noscript-panel { padding: 3rem 1.5rem; }
/* ═══════════════════════════════════════════════════════════════════════
   State page — head, grid, rail
   ═══════════════════════════════════════════════════════════════════════ */

.state-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 3rem;
  align-items: start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}
.state-head-meta { padding-top: 0.4rem; }
.state-switcher {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 1.25rem;
}
.state-switcher > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  min-height: 48px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
}
.state-switcher > summary::-webkit-details-marker { display: none; }
.state-switcher > summary::after {
  content: "";
  margin-left: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.6px solid var(--ink-mute);
  border-bottom: 1.6px solid var(--ink-mute);
  transform: translateY(-2px) rotate(45deg);
}
.state-switcher[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.state-switcher-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.state-switcher-current { font-weight: 600; color: var(--ink); }
.state-switcher-panel { padding: 0 1rem 1rem; border-top: 1px solid var(--rule); }
.state-switcher-intro { font-size: 0.8125rem; color: var(--ink-mute); margin: 0.75rem 0 0.5rem; }
.state-switcher-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.state-switcher-list a {
  display: block;
  padding: 0.55rem 0;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--rule);
}
.state-switcher-list li:first-child a { border-top: 0; }
.state-switcher-list a:hover { text-decoration: underline; }
.state-switcher-note { font-size: 0.8125rem; color: var(--ink-mute); margin: 0; }
.page-facts { margin: 0; font-family: var(--font-ui); font-size: 0.8125rem; }
.page-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
}
.page-facts dt { color: var(--ink-mute); }
.page-facts dd { margin: 0; color: var(--ink); text-align: right; }
/* ── The article grid ─────────────────────────────────────────────────────
   One grid for the whole page. It replaced two: the head was a
   content-plus-far-right-metadata grid and the article below it a
   left-rail-plus-content grid, so the page changed composition halfway down
   and nothing on the right lined up with anything on the left.

   68rem, not the 76rem the index pages use. The reading column wants 44rem and
   the support column 19rem; at 76rem the two would either drift apart or the
   prose would run to a measure nobody can read. A narrower page here is the
   composition, not a smaller version of the same one. */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  column-gap: 3.5rem;
  max-width: 68rem;
  padding-bottom: var(--space-6);
  align-items: start;
}
.article-grid > .breadcrumbs { grid-column: 1 / -1; }
.article-head, .article-lead, .article-body { grid-column: 1; min-width: 0; }
.article-head { padding: 1.25rem 0 1.5rem; }
.article-head h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.15vw, 2.375rem);
  line-height: 1.15;
  margin: 0 0 0.8rem;
}
/* Row 2 alongside the head, so the scope and the date sit level with the
   title they describe rather than floating in the corner of the page. */
.article-meta { grid-column: 2; grid-row: 2; padding-top: 1.6rem; }
.article-lead { padding-bottom: 0.5rem; }
/* Beside the article, not beside the head: it holds what a reader wants while
   reading, which is where they are and what to do next. */
.article-aside {
  grid-column: 2;
  grid-row: 3 / span 2;
  align-self: start;
  position: sticky;
  top: 5.5rem;
  /* Same defect as .page-rail, and here there was no bound at all: the New
     Jersey inheritance-tax rail came to 972px and Wills and Trusts to 909px
     against a 900px window, so the last entries of the contents list and the
     foot of the Handbook panel could not be reached at 1280px or 1440px. A
     sticky column taller than the viewport hides its own bottom. */
  max-height: calc(100vh - 5.5rem - var(--space-4));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
/* Borderless in the support column. The rail's own box plus the Handbook
   panel's box made two competing containers stacked in a 19rem column; here the
   rail is a labelled list and the panel is the only object. */
.article-aside .contents-rail {
  margin-bottom: 1.75rem;
  border: 0;
  border-radius: 0;
  background: none;
}
.article-aside .contents-rail > summary { padding-left: 0; padding-right: 0; }
.article-aside .rail-body { padding-left: 0; padding-right: 0; }
.article-aside .rail-group a { padding-left: 0; padding-right: 0; }
@media (max-width: 1023px) {
  /* One column. The DOM order is already the reading order — title, scope and
     sources, short answer, article, and the Handbook offer at the end, where a
     reader who has just read the answer might want it. */
  .article-grid { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
  .article-head, .article-lead, .article-body, .article-meta, .article-aside {
    grid-column: 1;
    grid-row: auto;
  }
  /* Stacked in one column it is an ordinary block in the flow, so the sticky
     cap comes off with the stickiness — a capped scrolling box inside a
     scrolling page is worse than a long list. */
  .article-aside { position: static; top: auto; max-height: none; overflow-y: visible; }
  .article-meta { padding-top: 0; margin-bottom: 1.75rem; }
  /* The jump-to list at the top of the article already answers "where in this
     page is my question". A second table of contents under it is the same
     device twice. */
  .article-aside .contents-rail { display: none; }
}
/* The state header closes with a 1px rule and .page-grid began at exactly the
   same y — measured, not guessed: header bottom 434.97, grid top 434.97, first
   section padding-top 0, h2 margin-top 0. So "The paths this state offers" was
   sitting on the divider with nothing between them, and the rail box beside it
   did the same.

   The space belongs to the transition rather than to the heading, so it is set
   once here and not on the h2: every state page and every section that follows
   a rule gets the same rhythm, and no page needs its own number. --space-4 is
   the scale's step for a major transition, which is what a rule under a page
   header is. */
.page-grid {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}
/* The rail is sticky, and on a long state guide it was taller than the screen.
   A sticky element that overflows the viewport does not scroll: it is pinned,
   so everything past the fold is unreachable — on the fifty-state guides that
   meant the last third of "On this page" could be seen and never clicked, and
   scrolling over the rail moved the article instead.

   The list is bounded directly rather than through the flex chain, and that is
   not a stylistic preference. .contents-rail is a <details>, and Chromium wraps
   a details element's content in an anonymous box, so a <nav> inside one is not
   a flex item of it: setting display:flex on the details shrank the details to
   311px and left the nav rendering at its full 1049px inside it. Measured, and
   the reason the first attempt looked right and did nothing.

   The subtraction is the sticky offset, the breathing room below, and the
   summary row that sits above the list.

   overflow-y: auto rather than scroll, so no bar appears unless one is needed,
   and no overscroll-behavior, deliberately: containing the scroll would mean
   reaching the end of the list stops the page moving, which is the
   nested-scroll trap this is meant to avoid. Chaining to the page is what
   people expect. Focus scrolls a link into view on its own, so keyboard
   operation needs nothing extra. */
.page-rail { position: sticky; top: 5.5rem; }
/* The bound above is on the LIST, and the list is not the whole rail: the
   Handbook panel sits below it and was never in the subtraction. So the rail
   came to 1,056px against a 900px window, stuck at 5.5rem, and the bottom
   231px of it — which is the end of the Handbook panel — could not be scrolled
   to at 1280px or 1440px. Measured on the California guide.

   Bounding the rail itself is what makes everything in it reachable. The inner
   list then gives up its own max-height, because two nested scrollers in a
   19rem column is the trap the note above is about: one scroller, on the
   element that actually overflows. */
.page-rail {
  max-height: calc(100vh - 5.5rem - var(--space-4));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.page-rail > .contents-rail > .rail-body {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.page-rail > .contents-rail > .rail-body::-webkit-scrollbar { width: 8px; }
.page-rail > .contents-rail > .rail-body::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 0;
  border: 2px solid transparent;
  background-clip: content-box;
}
.page-rail > .contents-rail > .rail-body::-webkit-scrollbar-track { background: transparent; }
.page-rail .handbook-cta { margin-top: 1.5rem; }
.page-content { min-width: 0; }
/* On this page. The previous version was a flat list of links that did not
   look like links; whether an item was clickable was a guess. */
.contents-rail {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-soft);
  padding: 0.35rem 0.25rem;
}
.contents-rail > summary {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}
.contents-rail > summary::-webkit-details-marker { display: none; }
.contents-rail > summary::after {
  content: "";
  margin-left: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.6px solid var(--ink-mute);
  border-bottom: 1.6px solid var(--ink-mute);
  transform: translateY(-2px) rotate(45deg);
}
.contents-rail[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.rail-heading {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.rail-body { padding: 0 0.35rem 0.5rem; }
.rail-group + .rail-group { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--rule); }
.rail-group-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0.55rem 0.35rem;
}
.rail-group ul { list-style: none; margin: 0; padding: 0; }
.rail-group a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.55rem;
  min-height: 40px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 0;
  border-left: 2px solid transparent;
}
.rail-group a:hover, .rail-group a:focus-visible {
  color: var(--accent);
  background: var(--surface);
}
.rail-group a.is-current {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--accent);
  background: var(--surface);
}
.rail-link-text { flex: 1; }
.rail-chevron {
  flex: none;
  width: 0.35rem;
  height: 0.35rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.45;
}
.rail-group a:hover .rail-chevron { opacity: 1; }
/* Where a jump lands, briefly. */
.jump-target { animation: jump-flash 1.4s ease-out; }
@keyframes jump-flash {
  0% { background-color: var(--accent-wash); }
  100% { background-color: transparent; }
}
/* ═══════════════════════════════════════════════════════════════════════
   State page — content blocks
   ═══════════════════════════════════════════════════════════════════════ */

.section-block { padding: 0 0 var(--space-5); }
.section-block > h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.section-block h3 { font-size: 1.1875rem; margin: 1.75rem 0 0.6rem; }
.section-block h4 { font-size: 1.0625rem; margin: 0 0 0.35rem; }
.prose-section { padding: 0 0 var(--space-4); max-width: 100%; }
.prose-section > h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.prose-section h3 { font-size: 1.125rem; margin: 1.75rem 0 0.5rem; }
.prose-section h4 { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
.prose-section p,
.prose-section ul,
.prose-section ol {
  font-family: var(--font-body);
  line-height: 1.7;
  max-width: var(--prose-measure);
}
.prose-section ul, .prose-section ol { padding-left: 1.25rem; }
.prose-section li { margin-bottom: 0.45rem; }
.callout {
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--warn);
  background: var(--paper-soft);
  border-radius: 0;
  max-width: var(--prose-measure);
}
.callout.tone-note { border-left-color: var(--accent); }
/* Route scope. Route-specific guidance that looks identical to universal
   guidance is the single most misleading thing a static state page can do. */
.applies-to {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin: 0.5rem 0;
}
.applies-to-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.route-tag {
  padding: 0.15rem 0.5rem;
  background: var(--accent-wash);
  color: var(--accent);
  border-radius: 0;
  font-weight: 500;
}
.applies-to-all { color: var(--ink-mute); font-style: italic; }
/* Records: documents, official links, filing options, after-you-file. */
.record-list { list-style: none; margin: 0; padding: 0; }
.record-item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.record-list > .record-item:first-child { border-top: 0; padding-top: 0.5rem; }
.record-list-compact .record-item { padding: 0.85rem 0; }
.record-title { font-family: var(--font-ui); font-size: 1.0625rem; margin: 0 0 0.3rem; }
.record-desc { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); margin: 0 0 0.4rem; max-width: var(--prose-measure); }
.record-action { margin: 0.5rem 0 0; }
.record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin: 0.35rem 0 0;
}
.record-group-heading {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 1.75rem 0 0.5rem;
}
.record-group-heading:first-of-type { margin-top: 0.5rem; }
.kind-badge {
  padding: 0.1rem 0.45rem;
  background: var(--paper-deep);
  border-radius: 0;
  color: var(--ink-soft);
}
.record-host { font-family: var(--font-code); font-size: 0.6875rem; opacity: 0.8; }
.doc-cond {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--warn);
  margin-bottom: 0.3rem;
}
.mini-facts { margin: 0.5rem 0 0; font-family: var(--font-ui); font-size: 0.8125rem; }
.mini-facts > div { display: flex; gap: 0.75rem; padding: 0.3rem 0; }
.mini-facts dt { color: var(--ink-mute); min-width: 7rem; flex: none; }
.mini-facts dd { margin: 0; color: var(--ink-soft); }
/* Timeline */
.timeline-route { margin: 0 0 2.5rem; }
.timeline-route h3 { margin-top: 0; }
.timeline-summary { font-family: var(--font-body); color: var(--ink-soft); max-width: var(--prose-measure); }
.timeline-steps { list-style: none; margin: 1.25rem 0 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--rule); }
.timeline-step { position: relative; padding: 0 0 1.5rem; }
.timeline-step::before {
  content: "";
  position: absolute;
  left: -1.94rem;
  top: 0.45rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 50%;
}
.step-timing {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.2rem;
}
.step-action { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); max-width: var(--prose-measure); margin: 0 0 0.5rem; }
.step-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.step-action-link { font-family: var(--font-ui); font-size: 0.9375rem; }
.step-evidence { font-family: var(--font-ui); font-size: 0.8125rem; }
.step-wait { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); margin: 0.4rem 0 0; }
/* Tables
   The state branch table is as wide as the states it compares. At thirteen it
   is about 1800px, which is wider than the 680px prose column will ever be, and
   it will only grow. It scrolls inside this container rather than widening the
   page.

   A note for whoever measures this next, because the obvious probe lies:
   document.documentElement.scrollWidth INCLUDES the content of a scroll
   container, so it reports ~1900 on a page that does not scroll at all. Check
   document.body.scrollWidth, or scroll the window and read window.scrollX. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table, .data-table {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.comparison-table th, .comparison-table td,
.data-table th, .data-table td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.comparison-table thead th, .data-table thead th {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper-soft);
  white-space: nowrap;
}
.comparison-table tbody th, .data-table tbody th {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 11rem;
}
.comparison-table tbody tr:last-child td,
.comparison-table tbody tr:last-child th,
.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th { border-bottom: 0; }
.cell-citation { font-size: 0.8125rem; color: var(--ink-mute); }
.cost-unknown { color: var(--ink-mute); font-style: italic; }
/* ── comparison ───────────────────────────────────────────────────────────
   Two or three routes compared on the dimensions that decide between them.
   Built on .data-table on purpose: that class already carries the mobile
   treatment this needs, where every row becomes a card headed by the
   dimension with each option labelled inside it, so the reader compares
   within one dimension at a time instead of scrolling a wide table sideways.
   No second design language for the same job, and nothing here encodes
   meaning by color. */
.comparison-block { margin: 1.5rem 0; }
.comparison-lede {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
  max-width: 46rem;
}
/* An option's title is a sentence — "Left to them outright, then sheltered" —
   and the shared header rule forbids wrapping, which would push a comparison
   to twice the width of the page. */
.comparison-table thead th {
  white-space: normal;
  text-transform: none;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  vertical-align: bottom;
}
.comparison-table thead th:first-child { color: var(--ink-mute); }
.comparison-option-note {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin-top: 0.2rem;
}
/* A dimension an option does not reach says so. A blank cell reads as "no",
   which is the quiet way a comparison lies. */
.cell-unrecorded { color: var(--ink-mute); font-style: italic; }
@media print {
  /* The comparison is one of the things people print and take to a meeting,
     so it must not be cut in half by a page break. */
  .comparison-block { break-inside: avoid; }
  .comparison-block .table-scroll { overflow: visible; }
}
/* Questions and situations */
.qa-list { list-style: none; margin: 0; padding: 0; }
.qa-item { padding: 1.35rem 0; border-top: 1px solid var(--rule); }
.qa-list > .qa-item:first-child { border-top: 0; padding-top: 0.5rem; }
.qa-item h3 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.qa-item p, .qa-answer { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.65; color: var(--ink-soft); max-width: var(--prose-measure); }
.qa-note { color: var(--warn); }
/* Glossary */
.glossary-disclosure {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.glossary-disclosure > summary {
  padding: 0.9rem 1.1rem;
  min-height: 48px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.glossary-defs { margin: 0; padding: 0 1.1rem 1.1rem; }
.glossary-item { padding: 0.85rem 0; border-top: 1px solid var(--rule); }
.glossary-item dt { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.glossary-item dd { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); max-width: var(--prose-measure); }
.glossary-cite { display: block; font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-mute); margin-top: 0.3rem; }
.glossary-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}
.glossary-index a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 0;
  text-decoration: none;
}
.glossary-index a:hover { background: var(--accent); color: var(--paper); }
.glossary-entry { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.glossary-term { font-size: 1.25rem; margin: 0 0 0.75rem; }
.glossary-def { padding: 0.6rem 0 0; }
.glossary-def-state {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.25rem;
}
.glossary-def-text { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); max-width: var(--prose-measure); margin: 0 0 0.3rem; }
.glossary-def-source { font-family: var(--font-ui); font-size: 0.8125rem; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.glossary-def-cite { color: var(--ink-mute); }
/* Sources */
.sources .source-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.source-item {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}
.source-list > .source-item:first-child { border-top: 0; padding-top: 0.5rem; }
.source-num {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  background: var(--paper-soft);
  border-radius: 0;
}
.source-body { min-width: 0; }
.source-title { font-family: var(--font-ui); font-size: 0.9375rem; margin: 0 0 0.2rem; }
.source-desc { font-family: var(--font-body); font-size: 0.875rem; color: var(--ink-mute); margin: 0 0 0.3rem; max-width: var(--prose-measure); }
.source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin: 0;
}
.source-host { font-family: var(--font-code); }
.source-status.pending {
  padding: 0.05rem 0.4rem;
  background: var(--paper-soft);
  border: 1px solid var(--warn);
  border-radius: 0;
  color: var(--warn);
}
.repeat-cta { padding: var(--space-3) 0 var(--space-5); }
.page-endnote {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
}
/* ═══════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
  padding: var(--space-5) 0 var(--space-3);
}
.site-footer-inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 3rem;
}
.footer-brand .wordmark-footer { color: var(--ink); }
.footer-line {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 0.75rem 0 0;
  max-width: 24rem;
}
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.footer-heading {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.15rem; }
.footer-col a {
  display: inline-block;
  padding: 0.45rem 0;
  min-height: 40px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-col a:hover { color: var(--accent); text-decoration: underline; }

/* The official accounts.
   The glyphs take the footer's own ink and the accent on hover, the same two
   colours every other link in this footer uses. The platforms' brand colours
   are deliberately not used: four saturated logos in a warm grey footer would
   be the loudest thing on a page whose whole argument is restraint, and the
   only place in the product where a colour means "somebody else".

   Two boxes, on purpose. The one you SEE is 30px, which keeps the focus ring
   tight around the glyph rather than loose around the whole target. The one
   you TAP is the 44px ::after,
   which takes no space in the layout and so cannot push that edge around. The
   14px gap is chosen so the pitch is exactly 44px: the touch targets tile
   edge to edge without overlapping, so a thumb near a boundary cannot open
   the wrong account. */
.footer-social {
  list-style: none;
  margin: 1rem 0 0 -6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.footer-social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--ink-mute);
  text-decoration: none;
}
/* The touch target. Invisible, larger than the glyph, and outside the flow. */
.footer-social-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.footer-social-icon { display: block; }
/* Hover is a colour shift and nothing else. The tinted box this used to draw
   put a lozenge behind one icon and none behind the others, which read as a
   fifth treatment in a row whose point is that there is only one. The focus
   ring comes from the stylesheet's global `a:focus-visible` rule, so a
   keyboard still gets a hard, visible target. */
.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--accent);
}

/* The count beside "Browse guidance by state". It replaced fifty footer links
   with one, and the number is what stops the single link reading as a
   placeholder — a reader who cannot see how much is behind it does not click. */
.footer-count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  vertical-align: 0.08em;
}
.footer-col a:hover .footer-count { border-color: var(--accent); color: var(--accent); }
.site-footer-legal {
  max-width: var(--wrap-wide);
  margin: var(--space-4) auto 0;
  padding: 1.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.site-footer-legal p {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 52rem;
}
.footer-fine { margin: 0; }
/* ═══════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  /* One column: the rail is an ordinary collapsed <details> in the flow, so
     every constraint the sticky version needs has to come back off. A capped
     height here would produce a scrollable box inside a scrolling page, which
     is the one thing worse than a long list. */
  /* One column: the rail is an ordinary collapsed <details> in the flow, so the
     cap comes off. A capped, scrolling box inside a scrolling page is the one
     thing worse than a long list. */
  .page-rail { position: static; max-height: none; overflow-y: visible; }
  .page-rail > .contents-rail > .rail-body { max-height: none; overflow-y: visible; }
  /* Answer first. In two columns the Handbook module sits beside the article,
     which is an offer next to the answer. Stacked, .page-rail comes before
     .page-content in source order, so the same module became the second thing
     on the page — a personalised-guidance CTA in front of the answer the reader
     came for, measured at 2% down the document on a 390px viewport.

     Hiding it here loses nothing: the state pages already carry the same offer
     after the content, at about 83%, where it reads as a next step instead of a
     toll gate. The contents list stays at the top, because a collapsed table of
     contents is navigation rather than a pitch. */
  .page-rail .handbook-cta { display: none; }
  .state-head { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .state-head-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .state-switcher { margin-bottom: 0; }
}
/* Where the header becomes a drawer. The number is MEASURED after every
   change to what the row holds, never inherited: it has been 880, then 1024
   when the CTA arrived, then 1280 when the account area did. The
   simplification of 2026-09-22 round 2 took three things back out — About,
   Chat with Sahvelo, and one of the two account controls — so it was measured
   again from scratch rather than kept at 1280 because the last version needed
   that. The value below is what the row actually fits at, with every label at
   full size and no compensating compression anywhere. The layout grids below
   are a separate question and stay at 880. */
@media (max-width: 1023.98px) {
  .site-header-inner { flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1.25rem; }
  .nav-toggle { display: inline-flex; }
  /* Below this width the nav is a touch drawer, so the CTA beside it is a
     touch target and owes the 44px minimum. */
  /* In the drawer, Search is a row like the others and Chat with Sahvelo
     is the one filled row at the foot of the menu: a clear action, a full
     touch target, never hidden. */
  .nav-item-search .nav-search-toggle { width: 100%; justify-content: flex-start; padding: 0.85rem 0.5rem; min-height: 48px; font-size: 1rem; border-top: 1px solid var(--rule); }
  .nav-item-chat { margin: 0.75rem 0 0.25rem; }
  .header-cta { display: flex; width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
  .primary-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
    padding-bottom: 0.5rem;
  }
  body.nav-open .primary-nav { display: block; }
  /* The open drawer scrolls within the viewport. The header is sticky, so a
     drawer taller than the screen used to hide whatever fell below the fold
     (the About group, the Journal plate's picture) with no way to reach it. */
  body.nav-open .primary-nav { max-height: calc(100dvh - 5.5rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  /* In the drawer the account is the last block, under the one filled row,
     with a rule above it: the same two controls, stacked and at full touch
     size, never a collapsed icon. A phone is where somebody is most likely
     to be signing back in to a Handbook they started on a laptop. */
  .nav-account {
    display: block;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 0.9rem 0 0;
    margin: 0.9rem 0 0;
    position: static;
  }
  .nav-account-anon { display: block; }
  .nav-account-login { display: flex; width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
  .nav-account-user { display: block; }
  .nav-account-toggle { width: 100%; justify-content: flex-start; padding: 0.7rem 0.5rem; min-height: 48px; font-size: 1rem; }
  .nav-account-menu {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 0.5rem;
  }
  .nav-account-menu-who { margin-left: 0; }
  .nav-account-menu-list a,
  .nav-account-signout-btn { padding: 0.8rem 0.5rem; min-height: 48px; font-size: 1rem; }
  /* FULL WIDTH, BECAUSE THE RULE IS THE LINK'S OWN BORDER.
     The link is inline-flex on desktop, where it sits in a row. Left inline in
     the drawer it shrinks to its text, so the border-top below became a
     separator as wide as the words above it: seven rules of 127, 152, 146,
     155, 61, 354 and 354px in a 354px menu, which reads as a rendering fault
     on the first screen of the phone navigation. */
  .nav-link {
    display: flex;
    padding: 0.85rem 0.5rem;
    min-height: 48px;
    font-size: 1rem;
    border-top: 1px solid var(--rule);
  }
  /* Every panel used to be simply open in the drawer, on the reasoning that a
     disclosure inside a disclosure is one interaction too many on a phone.
     With the corpus grouped that produced a 1,896px menu on an 844px screen —
     three worlds' worth of links stacked in one scroll. The worlds are
     disclosures again; the panel's own "View all N topics" link is how you
     reach the world page. */
  .nav-panel {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav-panel-inner { padding: 0 0 0.75rem 0.5rem; }
  .nav-panel-blurb { display: none; }
  .nav-groups { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .nav-group-title { min-height: 0; }
  .nav-group-note { display: none; }
  .nav-group-list { grid-template-columns: 1fr; }
  .nav-group-list a { padding: 0.6rem 0; min-height: 44px; }
  .nav-panel-all a { min-height: 44px; }
}
@media (max-width: 900px) {
  /* Two columns, and the fifth spans both rather than sitting alone. */
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-list > li,
  .trust-list > li:nth-child(n + 4) { grid-column: span 1; }
  .trust-list > li:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .trust-list { grid-template-columns: minmax(0, 1fr); }
  .trust-list > li:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  /* Stacked: the lift belongs to the two-column optical centre only. */
  .hero-copy { max-width: 40rem; padding-top: 0; margin-top: 0; }
  .hero-offer { max-width: 34rem; }
  /* Stacked, the panel should not become the screen. Tighter padding, and a
     button that fits its label on one line at 320px rather than breaking
     "Handbook" onto a second row beside a floating arrow. */
  .hero-offer { padding: 1.25rem 1.25rem 1.15rem; }
  .hero-offer-lede { margin-bottom: 1rem; }
  .hero-offer .button-hero { font-size: 1rem; padding: 0 1.1rem; gap: 0.5rem; }
  .worlds-grid { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .world-blurb { max-width: 34rem; }
  .ask-module-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "intro" "context" "form" "starter" "alt" "legal";
    padding: 1.75rem 1.25rem;
  }
  .ask-alt { margin-top: 1.75rem; }
  .site-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .footer-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .prose ul li a, .prose-list a, .future-topic a { display: inline-block; padding: 0.35rem 0; min-height: 40px; }
  .footer-col a { min-height: 44px; }
  .glossary-def-source a { display: inline-flex; align-items: center; min-height: 40px; }
  .wrap { padding: 0 1.125rem; }
  .site-header-inner { padding: 0.7rem 1.125rem; }
  /* The lockup steps as one object: the mark is sized from this. */
  .wordmark { font-size: 1.3125rem; }
  /* Was 37px tall on a 390px viewport — under the 44px minimum, and it is the
     one action competing with the menu button for the same corner. */
  .header-cta { padding: 0.45rem 0.8rem; font-size: 0.875rem; min-height: 44px; display: inline-flex; align-items: center; }
  .header-cta-long { display: none; }
  .header-cta-short { display: inline; }
  .hero-home { padding: 2.25rem 0 1.5rem; }
  .state-head-meta { grid-template-columns: minmax(0, 1fr); }
  .ask-input-row { flex-direction: column; }
  /* rows="2" leaves the example sentence clipped mid-line at this width. */
  /* Stacked, both controls are full width. The width is not redundant with
     the stretch a column flex gives them: a textarea carries the intrinsic
     width of its cols attribute into the flex line, and on the Tools page,
     where the row also wraps, that made the field seven pixels wider than the
     card it sits in at 390. */
  .ask-input { min-height: 7rem; width: 100%; }
  .ask-submit { width: 100%; min-height: 52px; }
  .ask-starter-list-wide { flex-direction: column; }
  .ask-starter-list-wide .ask-starter { width: 100%; text-align: center; }
  /* Tables become records. A six-column comparison cannot be scanned in a
     375px viewport, and a horizontal scrollbar hides half the answer. */
  .comparison-table, .data-table { border: 0; display: block; }
  .comparison-table thead, .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .comparison-table tbody, .data-table tbody { display: block; }
  .comparison-table tr, .data-table tr {
    display: block;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .comparison-table tbody th, .data-table tbody th {
    display: block;
    padding: 0.85rem 1rem;
    background: var(--paper-soft);
    border-bottom: 1px solid var(--rule);
    min-width: 0;
  }
  .comparison-table td, .data-table td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.6rem 1rem;
  }
  .comparison-table td::before, .data-table td::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .mini-facts > div { flex-direction: column; gap: 0.1rem; }
  .footer-nav { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}
@media (max-width: 640px) {
  /* The shared record layout puts the label in an 8.5rem column beside the
     value, which is right for a state matrix — short label, short value. A
     comparison has the opposite shape: the label is a route name that wraps
     to two lines and the value is a sentence, so side by side leaves the
     sentence in a column barely wide enough to read. Stack them. */
  .comparison-table td {
    display: block;
    padding: 0.7rem 1rem 0.85rem;
  }
  .comparison-table td::before {
    display: block;
    margin-bottom: 0.3rem;
  }
}
/* The header held one row down to 360px and wrapped below it, which pushed
   "Ask Legacy" onto a second line and doubled the header to 122px on the
   smallest screens. The fix is horizontal only — gutters, gaps and the side
   padding inside the two controls. Every touch target keeps its 44px height
   and stays far wider than 44px, so nothing is traded for the single row. */
@media (max-width: 359px) {
  /* The clamp floor is tuned for 390; at 320 it breaks "Get free personalized
     guidance" after two words, and rows="2" clips the example again. */
  .ask-heading { font-size: 1.25rem; }
  .ask-input { min-height: 9rem; }
  .site-header-inner { padding: 0.7rem 0.75rem; gap: 0.4375rem; }
  .nav-toggle { padding-left: 0.6rem; padding-right: 0.6rem; }
  /* Below about 360px the row genuinely cannot hold wordmark, menu and action
     at 44px each, so it wraps — and the action right-aligns under the menu
     button rather than orphaning itself at the left margin. */
  .header-cta { padding-left: 0.7rem; padding-right: 0.7rem; margin-left: auto; }
  .wordmark { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  /* .handbook-cta is an invitation to start something interactive. On paper it
     is a paragraph asking the reader to go and use a website, which is the one
     thing a person holding a printout has already declined to do. The ask
     module beside it was hidden here from the start; this one was missed
     because it sits outside .page-rail on topic pages. */
  .site-header, .page-rail, .ask-module, .repeat-cta, .handbook-cta, .site-footer { display: none; }
  .page-grid { display: block; }
  /* A trail back to a page nobody printed. It costs a line at the top of the
     first sheet and tells a reader holding paper nothing at all. */
  .breadcrumbs { display: none; }
  /* The page's own washed ground is a screen surface. Printed, it is a grey
     panel inside the paper's margins — ink spent on nothing, on every sheet. */
  html, body { background: #fff; }
  /* A wide comparison table survives on screen because it scrolls sideways
     inside its own container. Paper does not scroll: the state branch table
     was 1,826px wide on a 1,024px sheet, so seven of its columns printed off
     the edge of the page and the reader lost them without being told.
     Found by the R3 print check, 2026-08-30.

     Fixed layout and wrapping cells make it fit the measure instead. It is
     denser than the screen version and it is all there, which is the right
     trade for a document somebody carries to a counter. */
  .table-scroll { overflow: visible; }
  table.data-table {
    width: 100%;
    table-layout: fixed;
    font-size: 7.5pt;
    line-height: 1.3;
  }
  table.data-table th,
  table.data-table td {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    padding: 0.25rem 0.4rem 0.25rem 0;
  }
  table.data-table tr { break-inside: avoid; }
}
/* ─────────────────────────────────────────────────────────────────────
   THE GUIDED FLOW — /decide
   ─────────────────────────────────────────────────────────────────────
   Sixteen class names in src/client.tsx had no rule anywhere in this
   stylesheet, and seven of them were the FIRST SCREEN of the guided flow:
   the state chooser rendered as fifty bare buttons in a browser-default
   bulleted list, under a serif headline, on a page with no navigation. It
   was not a styling gap on a minor surface — it was the one surface a
   reader reaches from the homepage field with JavaScript off, and it looked
   like a prototype.

   It takes the Handbook's own language, because it is the same act: the
   product asking a question and the reader answering it. Nothing new is
   invented here. `.hb-q` sets the question, `.hb-option` draws the answer,
   and the flow stops being a third product.
   ───────────────────────────────────────────────────────────────────── */

.choose-state { padding-block: var(--space-4); }
.choose-state-h1 {
  font-family: var(--font-ui);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.choose-state-lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-3);
}
/* Fifty answers is not fifty rows. Columns keep the whole set on one screen,
   which is what makes it scannable rather than a scroll; the flow follows
   document order, so reading order and tab order are unchanged. */
.choose-state-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 34rem) { .choose-state-list { columns: 2; column-gap: 2rem; } }
@media (min-width: 60rem) { .choose-state-list { columns: 3; } }
.choose-state-list li { break-inside: avoid; }
.choose-state-button {
  display: block;
  width: 100%;
  min-height: var(--tap);
  text-align: left;
  padding: 0.65rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}
.choose-state-button:hover, .choose-state-button:focus-visible { color: var(--accent); }
.choose-state-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 0;
}

/* The remaining orphans, all of them inside the flow's own screens. */
.submission-method { font-weight: 500; color: var(--ink); }
.submission-instructions {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
  max-width: var(--prose-measure);
}
.after-happens {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
  max-width: var(--prose-measure);
}
.source-summary { color: var(--ink-soft); }
.error-text { color: var(--halt); font-family: var(--font-ui); font-size: 0.9375rem; }
.facts-details { margin: var(--space-3) 0 0; }
/* Wide content scrolls inside its own box; the page body never does. */
.facts-table-wrap { overflow-x: auto; }
.facts-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.facts-table th, .facts-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.facts-table th { color: var(--ink-mute); font-weight: 500; }


/* ═══════════════════════════════════════════════════════════════════════
   The guided flow (SPA)

   /decide, /handbook/:id and /debug are rendered by React from the same
   canonical model as the pages above. These rules are carried forward from
   the original guide styles — the option buttons, the halt treatment and the
   handbook layout were designed against the same rules at the top of this
   file and did not need redoing. They resolve against the aliases in :root.
   ═══════════════════════════════════════════════════════════════════════ */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-header {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
/* The lockup is the lockup. This block used to re-specify the wordmark's
   face, size, weight and tracking, which made the guided flow's identity a
   near-copy of the site's instead of the same object — and once the mark
   joined the lockup, a local font-size here would have detuned the one
   measurement the mark is set against. It inherits, and it carries the mark. */
.app-header .wordmark { font-size: 1.25rem; }
.app-header .wordmark:hover,
.app-header .wordmark:focus-visible {
  text-decoration: none;
}
.app-main {
  flex: 1;
  padding: var(--space-3);
}
.app-footer {
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.875rem;
  text-align: center;
  max-width: var(--max-handbook);
  margin: 0 auto;
}
/* ───────────────────────────────────────────────────────────────────────
   Landing page
   ───────────────────────────────────────────────────────────────────── */
.landing {
  max-width: var(--max-handbook);
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 5rem) 0;
}
/* H1 — unmistakable page topic */
.landing h1 {
  font-family: var(--font-ui);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4) 0;
  color: var(--ink);
}
/* H2 — major question/topic. Visually unmistakable. */
.landing h2 {
  font-family: var(--font-ui);
  font-size: clamp(1.875rem, 4vw, 2.375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-ui);
  margin: var(--space-6) 0 var(--space-3) 0;
  color: var(--ink);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
/* H3 — subsection within the H2 topic */
.landing h3 {
  font-family: var(--font-ui);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--track-ui);
  margin: var(--space-5) 0 var(--space-2) 0;
  color: var(--ink);
}
/* Body — comfortable reading */
.landing p {
  margin: 0 0 var(--space-3) 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
}
/* Body <strong> — emphasis only, NEVER visually competitive with H2/H3 */
.landing p strong,
.landing li strong {
  font-weight: 600;
  color: var(--ink);
}
.landing .at-a-glance h2 {
  /* Override: this is an eyebrow, not a section heading */
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.landing .lede {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.landing .cta-row {
  margin: var(--space-4) 0;
}
.cta {
  display: inline-block;
  background: var(--ink);
  color: var(--surface);
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  text-decoration: none;
  min-height: 48px;
  transition: opacity 120ms ease;
}
.cta:hover,
.cta:focus-visible {
  opacity: 0.92;
  text-decoration: none;
}
.landing .closing-note {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.9375rem;
}
.landing .prototype-note {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: 0.875rem;
}
/* ─────────────────────────────────────────────────────────────────────
   Landing — hero, at-a-glance, comprehensive sections
   (the reusable Legacy search template starts here)
   ───────────────────────────────────────────────────────────────────── */

.landing .hero {
  margin-bottom: var(--space-5);
}
.landing .hero .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2) 0;
}
.landing .hero .lede {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: var(--space-4);
}
.landing .hero-meta {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: var(--space-3);
}
/* At a glance: anchor-linked summary cards, immediately below hero */

.landing .at-a-glance {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5) 0;
}
.landing .at-a-glance-label {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-weight: 600;
  margin: 0 0 var(--space-3) 0;
}
.landing .at-a-glance ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.landing .at-a-glance li {
  border-top: 1px solid var(--line);
  padding: var(--space-3) 0;
}
.landing .at-a-glance li:first-child {
  border-top: 0;
}
.landing .at-a-glance a {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.landing .at-a-glance a:hover,
.landing .at-a-glance a:focus-visible {
  color: var(--accent);
}
.landing .at-a-glance .glance-title {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.35;
  margin-bottom: var(--space-1);
  color: var(--ink);
}
.landing .at-a-glance .glance-desc {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
/* Anchored targets clear the sticky header. Without this the site's own
   primary CTA — "Ask Legacy", href="#ask" on the homepage and "/#ask"
   everywhere else — scrolled the panel to y=0, putting its heading 73px
   underneath the header on every viewport. */
main [id] { scroll-margin-top: 5.5rem; }
/* Comprehensive sections — anchored, with scroll offset */

.landing section[id] {
  scroll-margin-top: 6rem;
  margin-top: var(--space-5);
}
.landing section[id]:first-of-type {
  margin-top: 0;
}
.landing ul {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-3) 0;
}
.landing ul li {
  margin-bottom: var(--space-1);
}
.landing .note {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  border-left: 3px solid var(--line);
  padding-left: var(--space-2);
  margin: var(--space-2) 0 var(--space-3) 0;
}
/* Visuals section: reserved space, no decorative images */

.landing .visuals ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0;
}
.landing .visuals li {
  border-left: 2px solid var(--line);
  padding: 0 var(--space-2) var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.landing .visuals li:last-child {
  margin-bottom: 0;
}
.landing .visuals strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
/* Second CTA: centered, with breathing room above and below */

.landing .cta-row-second {
  text-align: center;
  margin: var(--space-6) 0;
}
/* Sources section: cited list with status indicators */

.landing .sources ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 var(--space-3) 0;
}
.landing .sources li {
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) 0;
  margin: 0;
}
.landing .sources li:last-child {
  border-bottom: 0;
}
.landing .source-status {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.0625rem 0.5rem;
  margin-left: var(--space-1);
  vertical-align: middle;
}
.landing .source-status.pending {
  border-color: var(--warn);
  color: var(--warn);
}
.landing .last-reviewed {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
/* Landing footer */

.landing-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.landing-footer .closing-note,
.landing-footer .prototype-note {
  font-size: 0.875rem;
  color: var(--ink-muted);
}
/* ─────────────────────────────────────────────────────────────────────
   Conversation screen
   ───────────────────────────────────────────────────────────────────── */

.conversation {
  max-width: var(--max-col);
  margin: 0 auto;
  padding-top: clamp(2rem, 18vh, 8rem);
  padding-bottom: var(--space-5);
}
.progress {
  color: var(--ink-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
}
/* The question is the page. It is an <h1> because it is the heading of the
   screen a reader is on — a flow that renders h2s under no h1 leaves anyone
   navigating by heading level standing under nothing. Every property that
   differs between h1 and h2 is set here, so the level carries meaning and no
   appearance. */
.question {
  font-family: var(--font-ui);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 var(--space-2) 0;
}
.question-note {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin: 0 0 var(--space-4) 0;
  line-height: 1.6;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: var(--space-3);
}
.option {
  width: 100%;
  min-height: 56px;
  padding: 0.875rem 1rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  font-size: 1.0625rem;
  transition: opacity 120ms ease, border-color 120ms ease;
  display: flex;
  align-items: center;
}
.option:hover,
.option:focus-visible {
  border-color: var(--ink);
  outline: none;
}
.option:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.option-muted {
  color: var(--ink-muted);
}
.option-quiet {
  color: var(--ink-muted);
  background: transparent;
  border-style: dashed;
  border-color: var(--line);
}
.option-quiet:hover,
.option-quiet:focus-visible {
  color: var(--ink);
  border-color: var(--ink-muted);
}
.back {
  display: inline-block;
  color: var(--ink-muted);
  background: none;
  border: 0;
  font-size: 0.9375rem;
  padding: 0.5rem 0;
  margin-top: var(--space-2);
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.back:hover,
.back:focus-visible {
  color: var(--ink);
  text-decoration-thickness: 2px;
}
/* ───────────────────────────────────────────────────────────────────────
   Help panel (inline beneath the question)
   ───────────────────────────────────────────────────────────────────── */

.help-panel {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.help-panel .help-title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.125rem;
  margin: 0 0 var(--space-2) 0;
  color: var(--ink);
}
.help-panel .help-where-label {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin: 0 0 var(--space-1) 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.help-panel ul {
  margin: 0 0 var(--space-2) 0;
  padding-left: 1.25rem;
  color: var(--ink);
}
.help-panel ul li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.help-panel .help-then {
  color: var(--ink);
  margin: 0 0 var(--space-2) 0;
}
.help-panel .help-dismiss {
  margin-top: var(--space-2);
}
/* ───────────────────────────────────────────────────────────────────────
   Handbook
   ───────────────────────────────────────────────────────────────────── */

.handbook {
  max-width: var(--max-handbook);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) 0 var(--space-5);
}
.handbook .breadcrumb {
  color: var(--ink-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-3);
}
.handbook .handoff-line {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.9375rem;
}
.handbook .recommended {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--track-ui);
  color: var(--ink);
  margin: 0 0 var(--space-4) 0;
}
.handbook section {
  margin-top: var(--space-4);
}
.handbook h2 {
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--track-ui);
  margin: 0 0 var(--space-3) 0;
  color: var(--ink);
}
.handbook h3 {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin: var(--space-3) 0 var(--space-1) 0;
  color: var(--ink);
}
.handbook p {
  margin: 0 0 var(--space-2) 0;
}
.handbook ul {
  margin: 0 0 var(--space-2) 0;
  padding-left: 1.25rem;
}
.handbook ul li {
  margin-bottom: 0.5rem;
}
.handbook .what-told {
  list-style: none;
  padding-left: 0;
}
.handbook .what-told li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.5rem;
}
.handbook .what-told li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 500;
}
.handbook .what-told li.negated::before {
  content: "✗";
  color: var(--warn);
}
.callout {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout.tone-warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.callout.tone-note {
  border-left-color: var(--ink-muted);
  background: var(--bg);
}
.handbook .sources {
  list-style: none;
  padding-left: 0;
}
.handbook .sources li {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  color: var(--ink);
}
.handbook .sources .source-meta {
  color: var(--ink-muted);
  font-size: 0.8125rem;
}
.handbook .sources .source-pending {
  color: var(--warn);
  font-style: italic;
}
.handbook .restart {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.handbook .restart {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.handbook .restart-button {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  background: var(--ink);
  color: var(--surface);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  min-height: 48px;
  min-width: 240px;
  text-align: center;
  cursor: pointer;
  border: 0;
  transition: opacity 120ms ease;
}
.handbook .restart-button:hover,
.handbook .restart-button:focus-visible {
  opacity: 0.92;
}
.handbook .restart-button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.handbook .restart-button.secondary:hover,
.handbook .restart-button.secondary:focus-visible {
  border-color: var(--ink-muted);
  background: transparent;
  opacity: 1;
}
.handbook .handoff-line {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  font-size: 0.9375rem;
}
.handbook .not-legal-advice {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: 0.875rem;
  font-style: italic;
}
/* Guided handoff — visual emphasis on the next-action callout */
.handbook .next-action {
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--accent-soft);
  padding: var(--space-3);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 var(--space-3) 0;
}
.handbook .resource-description {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}
/* ───────────────────────────────────────────────────────────────────────
   Loading + error
   ───────────────────────────────────────────────────────────────────── */

.loading {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin-top: var(--space-2);
  min-height: 1.5rem;
}
.error-panel {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--warn-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.error-panel .retry {
  margin-top: var(--space-2);
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  min-height: 44px;
}
/* ───────────────────────────────────────────────────────────────────────
   Debug screen
   ───────────────────────────────────────────────────────────────────── */

.debug {
  max-width: var(--max-handbook);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) 0 var(--space-5);
}
.debug h1 {
  font-family: var(--font-ui);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  margin: 0 0 var(--space-1) 0;
}
.debug .debug-intro {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin: 0 0 var(--space-3) 0;
}
.debug .persona-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.debug .persona-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.debug .persona-name {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 0.25rem 0;
}
.debug .persona-scenario {
  color: var(--ink);
  font-size: 0.9375rem;
  margin: 0 0 var(--space-2) 0;
}
.debug .persona-expected {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}
.debug .persona-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.debug .persona-buttons button {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  min-height: 44px;
}
.debug .persona-buttons button:hover,
.debug .persona-buttons button:focus-visible {
  background: var(--accent);
  color: var(--surface);
}
.debug .debug-section {
  margin-top: var(--space-4);
}
.debug .debug-section h2 {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-2) 0;
}
.debug details summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.9375rem;
  padding: 0.5rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.debug table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-top: var(--space-2);
}
.debug th,
.debug td {
  text-align: left;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.debug th {
  font-weight: 500;
  color: var(--ink-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.debug .status-pending {
  color: var(--warn);
}
.debug .status-verified {
  color: var(--accent);
}
/* ───────────────────────────────────────────────────────────────────────
   Utilities
   ───────────────────────────────────────────────────────────────────── */
.skip-to-content {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}
.skip-to-content:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--bg);
  text-decoration: underline;
  z-index: 1000;
  border-radius: var(--radius, 10px);
}
/* Accessibility — universal focus style per spec §11 */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* MUST FIX #1 (Governor Product/UX review 2026-08-09) — personalization
   preface. Renders above the stateExperience sections in HandbookTerminal
   body to tell the user that content below is route-filtered. */
.handbook-personalization-note {
  background: var(--accent-soft);
  border: 1px solid var(--line, #ddd7cd);
  border-radius: var(--radius, 10px);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2.5rem 0;
  font-size: 0.95rem;
  color: var(--ink, #221e19);
  line-height: 1.6;
}
.handbook-personalization-note p { margin: 0; }
.handbook-personalization-note button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.handbook-personalization-note button:hover,
.handbook-personalization-note button:focus-visible {
  color: var(--ink, #221e19);
}
/* MUST FIX #2 (Governor Product/UX review 2026-08-09) — humane timing.
   Short label above, plain-English explanation below in ink-soft.
   Rendered by relativeTimingLabel() in client.tsx HandbookTerminal. */
.step-timing {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
}
.timing-short {
  font-weight: 600;
  color: var(--ink, #221e19);
  letter-spacing: 0.01em;
}
.timing-humane {
  color: var(--ink-muted, #6b6660);
  font-size: 0.875rem;
  line-height: 1.5;
}
/* ── stateExperience surfaces inside the guided flow ──────────────────────
   These render in the personalised handbook only. They are scoped to .app
   because the generated pages now use their own names for several of the
   same ideas (.timeline-step, .action-link), and an unscoped copy of these
   rules would quietly restyle them. */

/* stateExperience component classes — public guide + personalized Handbook.
   Each surface uses the existing palette tokens (paper / ink / line / accent)
   to preserve editorial cohesion with the baseline. */

/* Before you start — orientation facts checklist */
.before-you-start { margin: 2.5rem 0; }
.app .before-you-start h2 {
  font-family: var(--font-ui);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--ink, #221e19);
}
.app .bys-intro {
  font-family: var(--font-body);
  color: var(--ink, #221e19);
  margin-bottom: 1.25rem;
}
.bys-facts { list-style: decimal; padding-left: 1.5rem; margin: 0; }
.bys-fact { margin: 1rem 0; }
.app .bys-fact h3 {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.375rem 0;
}
.bys-why { color: var(--ink, #221e19); margin: 0 0 0.25rem 0; }
.bys-how { color: var(--ink-muted, #6b6660); margin: 0; font-size: 0.9375rem; }
/* Routes (scanning summary) — small list of route cards */
.routes { margin: 2.5rem 0; }
.app .routes h2 {
  font-family: var(--font-ui);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--ink, #221e19);
}
.route-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.app .route-card {
  border: 1px solid var(--line, #ddd7cd);
  border-radius: var(--radius, 10px);
  padding: 1rem 1.25rem;
  background: var(--bg, #fbfaf8);
}
.app .route-card h3 {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.375rem 0;
}
.route-applies-when { color: var(--ink, #221e19); margin: 0 0 0.5rem 0; }
.route-meta { color: var(--ink-muted, #6b6660); font-size: 0.875rem; margin: 0; }
/* Timeline — chronological steps with vertical-line visual per spec §7.3 */
.timeline { margin: 2.5rem 0; }
.app .timeline h2 {
  font-family: var(--font-ui);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 600;
  margin: 0 0 1.25rem 0;
  color: var(--ink, #221e19);
}
.app .timeline-route {
  margin: 0 0 2rem 0;
  padding-left: 1.75rem;
  border-left: 2px solid var(--line, #ddd7cd);
  position: relative;
}
.app .timeline-route h3 {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
.app .timeline-route::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg, #fbfaf8);
}
.timeline-summary { color: var(--ink-muted, #6b6660); margin: 0 0 1rem 0; }
.timeline-steps { list-style: decimal; padding-left: 1.5rem; margin: 0; }
.timeline-step { margin: 1.25rem 0; }
.step-action { color: var(--ink, #221e19); margin: 0.375rem 0; }
.app .step-form, .app .step-link, .app .step-wait {
  font-size: 0.875rem;
  color: var(--ink-muted, #6b6660);
  margin: 0.25rem 0;
}
.app .step-form a, .app .step-link a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.app .step-form a:hover, .app .step-form a:focus-visible,
.app .step-link a:hover, .app .step-link a:focus-visible {
  color: var(--ink, #221e19);
}
/* Documents and forms — compact list with authoritative link + last-verified */
.app .documents, .app .actions, .app .costs, .app .submission, .app .after-you-file, .app .edge-cases, .app .faq {
  margin: 2.5rem 0;
}
.app .documents h2, .app .actions h2, .app .costs h2, .app .submission h2, .app .after-you-file h2,
.app .edge-cases h2, .app .faq h2 {
  font-family: var(--font-ui);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--ink, #221e19);
}
.app .document-list, .app .action-list, .app .cost-list, .app .submission-list, .app .after-list,
.edge-list, .faq-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.app .document, .app .action-link, .app .cost, .app .submission, .app .after-you-file,
.app .edge-case, .app .faq-entry {
  border: 1px solid var(--line, #ddd7cd);
  border-radius: var(--radius, 10px);
  padding: 0.875rem 1.125rem;
  background: var(--bg, #fbfaf8);
}
.app .document a, .app .action-link a, .app .cost a, .app .edge-resource a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.app .document a:hover, .app .document a:focus-visible,
.app .action-link a:hover, .app .action-link a:focus-visible,
.app .cost a:hover, .app .cost a:focus-visible,
.app .edge-resource a:hover, .app .edge-resource a:focus-visible {
  color: var(--ink, #221e19);
}
.app .doc-desc, .app .doc-verified, .app .action-destination, .app .action-kind, .app .action-priority,
.app .cost-amount, .app .cost-notes, .app .cost-verified, .app .submission-destination,
.app .submission-wait, .app .after-wait, .app .after-receive, .app .edge-applies-when,
.app .edge-what-to-do, .app .edge-professional {
  font-size: 0.9375rem;
  color: var(--ink-muted, #6b6660);
  margin: 0.25rem 0 0 0;
}
.app .doc-cond, .app .doc-cond-always, .app .doc-cond-on-answer, .app .doc-cond-on-fact-applies {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted, #6b6660);
  margin-left: 0.5rem;
}
.after-check a { color: var(--accent); }
.app .faq-entry h3 {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
.faq-answer { color: var(--ink, #221e19); }
/* Second personalization CTA (stateExperience.ctaSecondary) */
.cta-secondary { margin: 2.5rem 0 1.5rem 0; text-align: center; }
.app .cta-button.secondary {
  display: inline-block;
  background: var(--bg, #fbfaf8);
  color: var(--ink, #221e19);
  border: 1px solid var(--ink, #221e19);
  border-radius: var(--radius, 10px);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9375rem;
  min-height: 44px;
}
.app .cta-button.secondary:hover,
.app .cta-button.secondary:focus-visible {
  background: var(--ink, #221e19);
  color: var(--bg, #fbfaf8);
}
/* ─────────────────────────────────────────────────────────────────────────
   PHASE 5C — Responsive (≤640px single column; timeline collapses to
   left-edge border per spec §7.3 mobile note; tap targets ≥44px).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app .before-you-start, .app .routes, .app .timeline, .app .documents, .app .actions, .app .costs,
  .app .submission, .app .after-you-file, .app .edge-cases, .app .faq, .app .cta-secondary {
    margin: 1.75rem 0;
  }
  .app .timeline-route {
    padding-left: 1.25rem;
  }
  .app .timeline-route::before {
    left: -5px;
    width: 10px;
    height: 10px;
  }
  .app .document, .app .action-link, .app .cost, .app .submission, .app .after-you-file,
  .app .edge-case, .app .faq-entry, .app .route-card {
    padding: 1rem;
  }
  .app .handbook-personalization-note {
    padding: 0.875rem 1rem;
    margin: 1.25rem 0 2rem 0;
  }
  .app .cta-button.secondary {
    display: block;
    width: 100%;
  }
}
/* ─────────────────────────────────────────────────────────────────────────
   PHASE — Founder Option A: halt-handling visual distinction.
   Per trust constraint: "clearly distinguish general verified state
   guidance from personalized guidance". Three classes:
   - .halt-why-stopped — explains why personalization stopped (warm tone)
   - .personalized-note — flags the personalized handoff section
   - .statewide-note — flags the general state-level guidance section
   ───────────────────────────────────────────────────────────────────────── */

.app .halt-why-stopped {
  background: var(--accent-soft);
  border: 1px solid var(--line, #ddd7cd);
  border-left: 3px solid var(--warn, #7a6a4f);
  border-radius: var(--radius, 10px);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2rem 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink, #221e19);
}
.app .halt-why-stopped h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.625rem 0;
}
.halt-why-stopped p { margin: 0 0 0.5rem 0; }
.halt-why-stopped p:last-child { margin-bottom: 0; }
.halt-why-stopped strong { font-weight: 600; }
.halt-why-stopped-reason { color: var(--ink-muted, #6b6660); font-size: 0.875rem; }
.app .personalized-note {
  color: var(--ink-muted, #6b6660);
  font-size: 0.875rem;
  font-style: italic;
  margin: 0 0 1rem 0;
}
.app .statewide-note {
  background: var(--accent-soft);
  border: 1px dashed var(--ink-mute, #7a766e);
  border-radius: var(--radius, 10px);
  padding: 1.25rem 1.5rem;
  margin: 2.5rem 0;
}
.app .statewide-note h2 {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.625rem 0;
  color: var(--ink, #221e19);
}
.app .statewide-note-intro {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink, #221e19);
  margin: 0 0 1rem 0;
  font-style: italic;
}
.app .statewide-note .before-you-start,
.app .statewide-note .faq,
.app .statewide-note .cta-secondary {
  background: transparent;
  border: none;
  padding: 0;
  margin: 1.25rem 0;
}
.app .statewide-note .before-you-start h2,
.app .statewide-note .faq h2 {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}
/* Mobile — slightly tighter padding for the state-wide note on small screens. */
@media (max-width: 640px) {
  .app .halt-why-stopped,
  .app .statewide-note {
    padding: 0.875rem 1rem;
    margin: 1.25rem 0 1.75rem 0;
  }
}
/* D: :focus-visible outline on halt panel interactive elements (keyboard a11y) */
.app .is-halt a:focus-visible,
.app .is-halt button:focus-visible {
  outline: 2px solid var(--color-accent, #5b4a3a);
  outline-offset: 2px;
  border-radius: 0;
}
.app .is-halt .breadcrumb:focus-visible,
.app .is-halt .restart-button:focus-visible {
  outline: 2px solid var(--color-halt, #6e5443);
}
/* F: make the "Path halted" breadcrumb visually more prominent */
.app .handbook.is-halt .breadcrumb {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-halt, #6e5443);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-rule, #d8d4cc);
  margin-bottom: 1.5rem;
  display: block;
}
.app .handbook.is-halt .breadcrumb:focus-visible {
  outline: 2px solid var(--color-halt, #6e5443);
  outline-offset: 2px;
}
/* ─────────────────────────────────────────────────────────────────────
   HOMEPAGE v2 — premium editorial direction
   Authored wq-homepage-001 per paste-1786316283554-7a888c09.txt.
   Walnut palette · Charter/Source Serif · hairline borders · 56rem desktop.
   ───────────────────────────────────────────────────────────────────── */


/* ── Tap targets ──────────────────────────────────────────────────────────
   Headings that are links, and links that are the call to action, are things
   people aim a thumb at. The inline-link exemption in WCAG 2.5.8 does not
   make a 20px target usable. */
.state-card h3 a,
.tool-card h2 a,
.topic-panel h3 a,
.topic-title a,
.text-link,
.step-links a,
.record-action a,
.ask-path-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
/* The door titles sit in a borderless column where a 40px box around a 20px
   line would open a visible gap under the status label. 28px clears the WCAG
   2.5.8 pointer minimum; the phone rule below takes them to 44. */
.world-door h3 a { display: inline-flex; align-items: center; min-height: 28px; }
.page-facts dd a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 768px) { .page-facts dd a { min-height: 44px; } }
@media (max-width: 880px) {
  .world-door h3 a,
  .state-card h3 a,
  .tool-card h2 a,
  .topic-panel h3 a,
  .topic-title a,
  .text-link,
  .step-links a,
  .record-action a { min-height: 44px; }
}
/* Document, form and source titles are the action on their sections; they get
   a real target even though each one is a single line of text. Links inside
   running prose keep the WCAG 2.5.8 inline exemption — padding them out would
   space the sentences apart for everyone to help no one. */
.record-title a,
.glossary-def-source a,
.source-title a,
.prose-list a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
@media (max-width: 880px) {
  .record-title a,
  .glossary-def-source a,
  .source-title a,
  .prose-list a { min-height: 44px; }
}
/* Action links inside table cells are the point of the cell, not part of a
   sentence, so they get a target rather than the inline exemption.
   Two kinds of link in a cell ARE part of a sentence and must keep it: the
   glossary autolink and the citation marker. `inline-flex` makes a link an
   atomic inline box that cannot wrap and forces breaks around itself, so in a
   narrow comparison column "a motor vehicle agency will retitle a car" broke
   into three lines with a gap around every linked phrase. The rule two blocks
   above already states the principle this one was contradicting: links inside
   running prose keep the WCAG 2.5.8 inline exemption, because padding them out
   spaces the sentence apart for everyone to help no one. */
.data-table td a:not(.gloss-link):not(.cite),
.comparison-table td a:not(.gloss-link):not(.cite) { display: inline-flex; align-items: center; min-height: 40px; }
@media (max-width: 880px) {
  .data-table td a:not(.gloss-link):not(.cite),
  .comparison-table td a:not(.gloss-link):not(.cite) { min-height: 44px; }
}
/* ── The guided flow's context bar ────────────────────────────────────────
   What Legacy already knows, carried in from the page the reader came from,
   and aligned to the same column as the answer below it. */
.app-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  max-width: var(--max-handbook);
  margin: 1.75rem auto 0;
  padding: 0 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.app-context-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 0.15rem;
}
.app-context-chip {
  padding: 0.2rem 0.6rem;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink-soft);
}
/* The app header aligns to the same column as the answer beneath it, and
   carries the same mark and wordmark as every generated page — a reader who
   clicked "Guide me step by step" should not arrive somewhere that looks like
   a different product. */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: var(--max-handbook);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  background: transparent;
  border-bottom: 1px solid var(--rule);
}
.app-header .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  color: var(--ink);
  text-decoration: none;
}
.app-header .wordmark-text {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}
.app-header-nav { display: flex; gap: 1rem; }
.app-header-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.app-header-link:hover,
.app-header-link:focus-visible { color: var(--accent); text-decoration: underline; }
.app-footer {
  max-width: var(--max-handbook);
  margin: var(--space-5) auto 0;
  padding: 1.5rem 1.5rem 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
  text-align: left;
}
.app-footer p { margin: 0 0 0.5rem; }
.app-footer p:last-child { margin-bottom: 0; }
.app-context { margin-bottom: 1.5rem; }
.app-main > .conversation,
.app-main > .handbook { margin-top: 0; }
/* ═══════════════════════════════════════════════════════════════════════
   Corpus patterns

   Four additions, each because a content shape could not be represented
   honestly without it. Everything else on a topic page — the head, the rail,
   the record lists, the tables, the sources register, the guidance module —
   is the same system the state guides use, unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

/* Authority: where the answer comes from. Stated in the page head, because
   "does this depend on where I live" is the first thing a reader needs and the
   thing every generic article leaves them to guess. */
/* ── The Handbook call to action, level 3 ─────────────────────────────────
   Level 1 is the panel in the homepage hero; level 2 is the button in the
   header, on every page. This is the contextual one, and it is deliberately
   the quietest of the three: a tonal panel opened by a chestnut rule, a label
   smaller than the body text beside it, one line, one button. A reader on a
   guidance page came for the guidance. */
.handbook-cta {
  background: var(--paper-soft);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.1rem 1.15rem 1.25rem;
}
.handbook-cta-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.4rem;
}
.handbook-cta-line {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.handbook-cta-action { margin: 0; }
.button-handbook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 46px;
  padding: 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  text-align: center;
}
.button-handbook:hover, .button-handbook:focus-visible { background: var(--accent-deep); }
/* The band variant, for the index pages: same family, laid out across the
   column instead of down a rail. */
.handbook-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2.5rem;
  padding: 1.35rem 1.5rem 1.4rem;
  border-radius: var(--radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: var(--space-5);
}
.handbook-cta-band .handbook-cta-label { grid-column: 1; }
.handbook-cta-band .handbook-cta-line {
  grid-column: 1;
  grid-row: 2;
  font-size: 1rem;
  max-width: 40rem;
  margin: 0;
}
.handbook-cta-band .handbook-cta-action { grid-column: 2; grid-row: 1 / span 2; }
.handbook-cta-band .button-handbook { width: auto; min-height: 50px; padding: 0 1.4rem; }
@media (max-width: 640px) {
  .handbook-cta-band {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .handbook-cta-band .handbook-cta-line { margin-bottom: 0.9rem; }
  .handbook-cta-band .handbook-cta-action { grid-column: 1; grid-row: auto; }
  .handbook-cta-band .button-handbook { width: 100%; }
}
.authority-badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 0;
}
.authority-badge.authority-federal,
.authority-badge.authority-universal { color: var(--accent); background: var(--accent-wash); }
/* ── Sequence ─────────────────────────────────────────────────────────────
   A sequence has time windows, not step numbers, and some steps are
   irreversible or time-limited. An ordered list loses the only information
   that matters. */
.phases { display: grid; gap: 2.5rem; }
.phase { padding: 0; }
.phase-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}
.phase-head h3 { font-size: 1.1875rem; margin: 0; }
.phase-window {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.phase-note { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-mute); max-width: var(--prose-measure); }
.step-list { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--rule); }
.step-list-plain { border-left: 0; padding-left: 0; }
.step { position: relative; padding: 0 0 1.75rem; }
.step-list > .step::before {
  content: "";
  position: absolute;
  left: -1.94rem;
  top: 0.5rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 50%;
}
/* A step that cannot be undone gets a filled marker. It is the only visual
   weight on the page that means "slow down". */
.step-list > .step-irreversible::before { background: var(--warn); border-color: var(--warn); }
.step h4 { font-size: 1.0625rem; margin: 0 0 0.4rem; }
.step-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; }
.flag {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: 0;
}
.flag-time { color: var(--accent); background: var(--accent-wash); }
.flag-irreversible { color: var(--warn); background: var(--paper-soft); border: 1px solid var(--warn); }
.flag-optional { color: var(--ink-mute); background: var(--paper-soft); }
.step-body { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); max-width: var(--prose-measure); }
.step-body p { margin: 0 0 0.5rem; }
.step-detail {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 0.5rem 0;
  padding-left: 1.1rem;
}
.step-detail li { margin-bottom: 0.35rem; }
.step-requires, .step-why {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.5rem 0 0;
  max-width: var(--prose-measure);
}
.step-why { border-left: 2px solid var(--rule); padding-left: 0.7rem; }
/* ── Search strategies ────────────────────────────────────────────────────
   Ordered by cost against likelihood. Each one has to say what population it
   covers and what it will miss, or it is just a link. */
.strategy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.strategy { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.35rem 1.4rem; background: var(--surface); }
.strategy-order {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rule-strong);
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.strategy h3 { font-size: 1.125rem; margin: 0 0 0.4rem; }
.strategy-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.6rem; }
.strategy-effort, .strategy-cost {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.5rem;
  border-radius: 0;
  background: var(--paper-soft);
  color: var(--ink-mute);
}
.strategy-effort-low { color: var(--accent); }
.strategy-effort-high { color: var(--warn); }
.strategy-covers, .strategy-limits, .strategy-how {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 0.5rem;
}
.strategy-covers-label, .strategy-limits-label, .mini-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 0.4rem;
}
.strategy-limits { color: var(--ink-mute); }
/* ── Inventory ────────────────────────────────────────────────────────────
   Items carry the cross-topic edge: what each document unlocks is a real
   reference into another topic, not prose. */
.inventory-group + .inventory-group { margin-top: 2rem; }
.inventory-group > h3 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
}
.inventory-list { list-style: none; margin: 0; padding: 0; }
.inventory-item { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.inventory-list > .inventory-item:first-child { border-top: 0; padding-top: 0.35rem; }
.inventory-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; }
.inventory-head h4 { font-size: 1.0625rem; margin: 0; }
.crit {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: 0;
  background: var(--paper-soft);
  color: var(--ink-mute);
}
.crit-critical { color: var(--warn); border: 1px solid var(--warn); }
.inventory-what { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); max-width: var(--prose-measure); margin: 0 0 0.4rem; }
.inventory-where, .inventory-unlocks, .inventory-missing {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 0 0 0.25rem;
}
.inventory-unlocks a { color: var(--accent); }
/* ── The state branch ─────────────────────────────────────────────────────
   The universal body stays universal; states attach at named points. A topic
   that covers ONE state still renders its points as a two-column table; a
   topic that covers several renders them as answers, below. */
.branch-table th[scope="row"] { min-width: 12rem; }
.branch-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 0 0 0.9rem;
}
/* Inside the single-state table the note is still a line under a row header. */
.branch-table .branch-note { display: block; font-size: 0.75rem; margin: 0.2rem 0 0; }
.branch-table .is-reader-state {
  background: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
}
.branch-table thead th.is-reader-state { color: var(--accent-deep); }

/* ── The state branch, as answers rather than as a grid ───────────────────
   The multi-state branch used to be a table with a column per state. The
   cells are paragraphs, not values, so thirteen columns inside a 736px
   reading column gave each answer about 126px of measure and stood some rows
   two thousand pixels tall. See the note in scripts/render-topic-page.mjs.

   What replaced it is the composition this stylesheet already uses
   everywhere else: a question, then the answers under it, separated by a
   hairline, each at a measure a person can read. The state is a LABEL and
   the answer is the content, so they do not carry the same weight.
   ──────────────────────────────────────────────────────────────────────── */
/* The one control in the section. Injected by public/site.js, never rendered
   into the page: the hoisting it drives is client-side, so a select in the
   HTML would be a promise a scriptless page could not keep. It is a field-
   shaped thing that is chosen from, and it is drawn like every other field
   in this product rather than like a button or a link. */
.branch-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 0 0 var(--space-3);
}
.branch-picker-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.branch-picker-select {
  min-height: 44px;
  padding: 0 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-mute);
  border-radius: var(--radius);
  max-width: 100%;
}
.branch-picker-select:focus-visible { border-color: var(--accent); }
@media (max-width: 32rem) {
  .branch-picker { display: grid; }
  .branch-picker-select { width: 100%; }
}
@media print { .branch-picker { display: none; } }
.branch-points { display: grid; }
.branch-point { padding-top: var(--space-3); }
.branch-point + .branch-point { margin-top: var(--space-3); border-top: 1px solid var(--rule); }
.section-block .branch-point-label {
  font-size: 1.1875rem;
  letter-spacing: var(--track-tight);
  margin: 0 0 0.5rem;
}
/* The disclosure that holds the answers. Same mechanism and same chevron as
   the Handbook's areas, because it is doing the same job: naming what is
   inside and how much of it, and opening in place. */
.branch-disclosure { border-top: 1px solid var(--rule); }
.branch-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  padding: 0.55rem 0.25rem 0.55rem 0;
  cursor: pointer;
  list-style: none;
}
.branch-disclosure > summary::-webkit-details-marker { display: none; }
.branch-disclosure > summary::after {
  content: "";
  order: 3;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.6px solid var(--ink-mute);
  border-bottom: 1.6px solid var(--ink-mute);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.branch-disclosure[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .branch-disclosure > summary::after { transition: none; } }
.branch-summary-label {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.branch-disclosure > summary:hover .branch-summary-label { color: var(--accent); }
.branch-disclosure[open] > summary { border-bottom: 1px solid var(--rule); }
.branch-answers { list-style: none; margin: 0; padding: 0; display: grid; }
/* The reader's own answer, hoisted out of the disclosure by site.js. It is
   not in a list of thirteen any more, so it does not wear a divider. */
.branch-answers-mine { margin-bottom: 0.4rem; }
.branch-answers-mine .branch-answer { border-top: 0; }
.branch-answer {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.branch-answer:first-child { border-top: 0; }
.branch-state {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.3rem;
}
.branch-value {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: var(--prose-measure);
}
.branch-value > :first-child { margin-top: 0; }
.branch-value > :last-child { margin-bottom: 0; }
/* Wide enough for the label to sit beside the answer rather than above it.
   The answer keeps the reading measure either way. */
@media (min-width: 52rem) {
  .branch-answer {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    column-gap: var(--space-2);
    align-items: baseline;
  }
  .branch-state { margin-bottom: 0; padding-top: 0.15rem; }
}
/* The answer the reader asked for, when they arrived with ?state=, from
   their Handbook plan, or from a state guide. public/site.js hoists it to the
   top of every question and marks it here. Foregrounded, never filtered: the
   comparison is the point, and somebody who came for one state usually wants
   to know whether the neighbours agree. Nothing is removed from the page. */
.branch-answer.is-reader-state {
  background: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--accent);
  border-top-color: transparent;
  padding-inline: var(--space-2);
  margin-bottom: 0.35rem;
}
.branch-answer.is-reader-state + .branch-answer { border-top-color: var(--rule); }
.branch-answer.is-reader-state .branch-state { color: var(--accent-deep); }
@media (min-width: 52rem) {
  .branch-answer.is-reader-state { grid-template-columns: minmax(0, calc(9rem - var(--space-2))) minmax(0, 1fr); }
}
/* Print: every answer open and on the page, none marked. */
@media print {
  .branch-disclosure > summary { display: none; }
  .branch-disclosure:not([open]) > .branch-answers { display: grid; }
  .branch-answer.is-reader-state { background: none; box-shadow: none; }
  .branch-table .is-reader-state { background: none; box-shadow: none; }
}
/* ── The judgment seam ────────────────────────────────────────────────────
   Where Legacy is reasoning rather than citing, it says so in the page rather
   than in the tone. */
.judgment-disclosure {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  background: var(--paper-soft);
  border-left: 2px solid var(--rule-strong);
  padding: 0.8rem 1rem;
  border-radius: 0;
  max-width: var(--prose-measure);
  margin: 0 0 1.75rem;
}
.judgment-points { display: grid; gap: 1.5rem; }
.judgment-point { padding-left: 1rem; border-left: 2px solid var(--accent-wash); }
.judgment-point h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; }
.judgment-point > div { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); max-width: var(--prose-measure); }
.judgment-instead { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); margin: 0.5rem 0 0; }
/* ── Relations: the knowledge graph, rendered ─────────────────────────────
   needs / produces are real edges in the data. This is not a related-articles
   strip. */
.rel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem; }
.rel-group h3 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.35rem;
}
.rel-note { font-size: 0.8125rem; color: var(--ink-mute); margin: 0 0 0.6rem; }
.rel-group ul { list-style: none; margin: 0; padding: 0; }
.rel-group li { padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.rel-group li:first-child { border-top: 0; }
.rel-group a { display: inline-flex; align-items: center; min-height: 32px; font-family: var(--font-body); font-size: 1rem; color: var(--ink); text-decoration: none; }
.rel-group a:hover { color: var(--accent); text-decoration: underline; }
.rel-why { display: block; font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-mute); }
/* ── The decisive variable ────────────────────────────────────────────────
   One fact reorganises the whole answer. Stating it before the procedure is
   the difference between following three steps and reading twelve. */
.decisive { margin: 0 0 2.5rem; }
.decisive h3 { font-size: 1.1875rem; margin: 0 0 0.4rem; }
.decisive-table th[scope="row"] { min-width: 11rem; }
.procedure { margin: 0 0 2rem; }
.procedure > h3, .ask-for > h3 { font-size: 1.1875rem; margin: 0 0 0.6rem; }
.plain-list { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); max-width: var(--prose-measure); padding-left: 1.2rem; }
.plain-list li { margin-bottom: 0.5rem; }
/* ── Topic cards on the world hubs ────────────────────────────────────────*/
.topic-cards { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 0 2rem; }
/* A door, not a card (visual reconstruction, 2026-09-10): the same hairline
   and lift the topic-link rows under it use, so a hub does not open with three
   boxes above a list of rows that are the same kind of thing. */
.topic-card { padding: 1.1rem 0 1.25rem; background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; display: flex; flex-direction: column; transition: background 120ms linear; }
@media (prefers-reduced-motion: reduce) { .topic-card { transition: none; } }
.topic-card:hover, .topic-card:focus-within { background: var(--surface); }
.topic-card h3 { font-size: 1.1875rem; margin: 0 0 0.4rem; }
.topic-card h3 a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.topic-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.topic-card-summary { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); margin: 0 0 1rem; }
/* margin-top:auto pins the badge row to the foot of the card. Without it the
   meta sat directly under a summary of whatever length, so within one row of
   three cards the badges sat at three different heights and the space left
   over collected unevenly at the bottom. align-items centres the pill against
   the "N sources" and "Reviewed" text, which sat on a higher baseline. */
.topic-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font-family: var(--font-ui); font-size: 0.6875rem; color: var(--ink-mute); margin: auto 0 0; }
.authority-chip { padding: 0.1rem 0.45rem; background: var(--accent-wash); color: var(--accent); border-radius: 0; }
/* ── Grouped topic links ──────────────────────────────────────────────────
   The index pages lead with a small set of cards and then drop to rows. A
   card earns its border when there are three of them and the choice matters;
   at thirty-four it stops separating anything. Rows carry the same title and
   summary at a third of the height, and the group heading does the work. */
.start-here { margin-bottom: var(--space-5); }
.topic-cards-start { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); margin-bottom: 0; }
.topic-groups { margin-bottom: var(--space-5); }
.topic-group { margin-top: var(--space-4); }
.topic-group:first-of-type { margin-top: var(--space-3); }
.topic-group-heading {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
/* Two explicit columns rather than auto-fit. auto-fit with a 24rem floor gave
   one column at 768 — which made the tablet index nearly 6000px — and three at
   1440, which is too many for a title over a summary. */
.topic-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
}
.topic-link { border-bottom: 1px solid var(--rule); }
.topic-link a {
  display: block;
  padding: 0.85rem 0.25rem 0.9rem 0;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
.topic-link a:hover .topic-link-title,
.topic-link a:focus-visible .topic-link-title { color: var(--accent); text-decoration: underline; }
.topic-link-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.topic-link-summary {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-mute);
}
/* ── The Legacy Handbook entry ────────────────────────────────────────────
   The standing principle this page exists to serve: the product should make a
   large process feel smaller. So one question at a time, everything else
   closed, and a measure narrow enough that the page cannot become a list of
   forty things a person did not know they had to do. */
.hb-wrap { max-width: 50rem; padding-bottom: var(--space-6); }
.hb-head { max-width: 40rem; }
.hb-step-heading {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.hb-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  max-width: 40rem;
  margin: 1.5rem 0 0;
}
.hb-note a { color: var(--accent); }
/* The one thing on the page that narrows by asking rather than by grouping. */
.hb-flow {
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--paper-soft);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: var(--space-4);
}
.hb-flow-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.35rem;
}
.hb-flow-title { font-size: 1.3125rem; margin: 0 0 0.5rem; }
.hb-flow-blurb {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44rem;
  margin: 0 0 1.1rem;
}
.hb-flow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; margin: 0; }
.hb-flow-actions .button-handbook { width: auto; min-height: 50px; padding: 0 1.4rem; }
.hb-flow-alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.hb-flow-alt:hover, .hb-flow-alt:focus-visible { border-bottom-color: var(--accent); }
/* Closed by default. Opening one is the narrowing. */
.hb-groups { display: grid; gap: 0.5rem; }
.hb-group { border-bottom: 1px solid var(--rule); }
.hb-group > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 52px;
  padding: 0.6rem 0.25rem 0.6rem 0;
  cursor: pointer;
  list-style: none;
}
.hb-group > summary::-webkit-details-marker { display: none; }
.hb-group > summary::after {
  content: "";
  order: 3;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.6px solid var(--ink-mute);
  border-bottom: 1.6px solid var(--ink-mute);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.hb-group[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.hb-group-heading { flex: 1; font-family: var(--font-ui); font-size: 1.125rem; font-weight: 600; }
.hb-group > summary:hover .hb-group-heading { color: var(--accent); }
.hb-group-count { font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.hb-group-body { padding: 0 0 1.1rem; }
.hb-group-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 42rem;
  margin: 0 0 0.5rem;
}
.hb-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.hb-links li { border-top: 1px solid var(--rule); }
.hb-links a { display: block; min-height: 44px; padding: 0.6rem 0; text-decoration: none; color: inherit; }
.hb-link-title { display: block; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.hb-links a:hover .hb-link-title, .hb-links a:focus-visible .hb-link-title { color: var(--accent); text-decoration: underline; }
.hb-link-summary { display: block; font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.45; color: var(--ink-mute); }
@media (max-width: 760px) {
  .hb-links { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}
@media (max-width: 640px) {
  .hb-flow { padding: 1.25rem 1.15rem 1.3rem; }
  .hb-flow-actions .button-handbook { width: 100%; }
}
/* ── The jurisdiction index ───────────────────────────────────────────────
   Fifty-one entries, of which six are links. Naming the ones Legacy has not
   published is the point: a reader whose title was issued in Ohio learns that
   in a glance instead of by failing to find it, and the shape of the coverage
   is visible to everyone. */
.jx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  column-gap: 2.5rem;
}
.jx { border-bottom: 1px solid var(--rule); }
.jx > a,
.jx > .jx-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.5rem 0;
  text-decoration: none;
  color: inherit;
}
.jx-name { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.jx-status {
  flex: none;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  white-space: nowrap;
}
.jx-published a:hover .jx-name,
.jx-published a:focus-visible .jx-name { color: var(--accent); text-decoration: underline; }
/* Not a link, and it should not look like one that is broken. */
.jx-pending { opacity: 0.72; }
.jx-pending .jx-name { font-weight: 400; color: var(--ink-soft); }
@media (max-width: 640px) {
  .jx-list { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}
/* ── The life-stage index ─────────────────────────────────────────────────
   A rail beside the groups, once there are enough groups that a reader cannot
   see the shape of the list without scrolling it. Five names and five counts
   is what makes thirty-one rows feel finite. */
.index-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  column-gap: 3.5rem;
  align-items: start;
}
.index-layout-plain { grid-template-columns: minmax(0, 1fr); }
.index-rail { position: sticky; top: 5.5rem; }
.index-rail-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.index-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.index-rail a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 40px;
  padding: 0.4rem 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.index-rail a:hover, .index-rail a:focus-visible { color: var(--accent); }
.index-rail-count { font-size: 0.75rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.topic-group-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 42rem;
  margin: 0 0 0.65rem;
}
/* Titles only. These are the topics that apply completely to the families they
   happen to and not at all to anyone else; a summary each would have added two
   thousand pixels of phone scroll to say "probably not you". */
.topic-more { margin-bottom: var(--space-5); }
/* Pages a reader here needs that are published under another life stage.
   Set apart from the world's own groups on purpose: it is a crossing, not a
   section, and reading as one would make the index look longer than it is. */
.topic-cross {
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.topic-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.5rem;
}
.topic-more-list li { border-bottom: 1px solid var(--rule); }
.topic-more-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}
.topic-more-list a:hover, .topic-more-list a:focus-visible { color: var(--accent); text-decoration: underline; }
/* Readiness, on the page and not only on the homepage door. Quiet, and not a
   warning label: the pages here are published and checked, and the area they
   sit in is not finished. Both of those are true at once. */
.page-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.65rem;
  max-width: 46rem;
  margin: 1rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-mute);
}
.status-pill {
  flex: none;
  padding: 0.15rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 0;
}
@media (max-width: 1023px) {
  .index-layout { grid-template-columns: minmax(0, 1fr); }
  /* Above the groups it becomes a compact index of what is below, which is the
     same job in a different shape. */
  .index-rail { position: static; margin-bottom: 1.75rem; }
  .index-rail ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (max-width: 900px) {
  .topic-more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (max-width: 640px) {
  .index-rail ol { grid-template-columns: minmax(0, 1fr); }
  .topic-more-list { grid-template-columns: minmax(0, 1fr); }
}
/* Six chosen pages on the homepage, at the density of the index they came
   from, so the homepage shows judgement rather than inventory. */
.topic-links-picks { margin-bottom: var(--space-4); }
/* These live here rather than in the Responsive section above, because the
   base rules for this component are declared below that section and would
   otherwise win on source order. */

/* Three start-here cards in a two-column grid left one stranded. The third
   takes the full width instead, which reads as composed rather than left over. */
@media (max-width: 1024px) and (min-width: 641px) {
  .topic-cards-start { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-cards-start > li:nth-child(3) { grid-column: span 2; }
}
/* Two columns of title-over-summary at phone width gave each column about
   155px: titles broke over three lines and summaries ran four words wide. */
@media (max-width: 760px) {
  .topic-links { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}
@media (max-width: 640px) {
  /* Thirty-four rows on a phone: tighter leading and padding here is the
     difference between a list and a slog. */
  .topic-link a { padding: 0.7rem 0 0.75rem; }
  .topic-link-title { font-size: 1rem; }
  .topic-link-summary { font-size: 0.8125rem; line-height: 1.45; }
  .topic-group { margin-top: var(--space-3); }
}
@media (max-width: 640px) {
  .strategy { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .strategy-order { font-size: 1.125rem; }
  .step-list { padding-left: 1.1rem; }
  .step-list > .step::before { left: -1.55rem; }
  .rel-groups { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
/* ═══════════════════════════════════════════════════════════════════════
   PAGE BLOCKS — flow, timeline, compare, checklist, detail, page table
   ───────────────────────────────────────────────────────────────────────
   Built for the New Jersey inheritance-tax page, which has four overlapping
   questions a reader has to hold at once. Prose could not teach that as fast
   as a shape could.

   Each block renders semantic HTML first — a flow is an ordered list, a
   comparison is a table, a timeline is an ordered list — and everything below
   is presentation over that. Nothing here hides content from a screen reader,
   and no factual content lives in an image.

   Tokens only. No new colours; the palette is the one the rest of the site
   already uses.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Flow: a numbered sequence the reader is meant to hold in their head ── */
.flow { margin: var(--space-3) 0; max-width: var(--prose-measure); }
.flow-title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.85rem;
}
.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: flowstep;
  border-left: 2px solid var(--rule);
}
.flow-step {
  counter-increment: flowstep;
  position: relative;
  margin: 0;
  padding: 0 0 1.35rem 1.6rem;
}
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before {
  content: counter(flowstep);
  position: absolute;
  left: -0.85rem;
  top: 0.05rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-step-label {
  display: block;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.flow-step-detail {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.flow-foot {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
/* Route flow — the same machine, used for "which form", where each step is a
   destination rather than a question. */
.flow-routes .flow-steps { border-left-color: var(--rule-strong); }
.flow-routes .flow-step::before {
  background: var(--paper);
  color: var(--accent);
  border: 2px solid var(--accent);
  font-size: 0.75rem;
}
/* ── Timeline: horizontal on desktop, vertical on mobile ───────────────── */
.timeline { margin: var(--space-3) 0; }
/* A RAIL BY DEFAULT, A ROW ONLY WHEN IT FITS (visual reconstruction, 2026-09-10).
   The timeline was always a row of columns at desktop width. Six items inside
   a 736px reading column gave each one about 120px, so "Decide who is handling
   the arrangements, and get prices in writing" wrapped to one or two words a
   line beside a paragraph doing the same: the cramped block on the After a
   Death landing page. The row is right for three or four items and wrong for
   more, and the count is in the markup, so the stylesheet reads it: up to
   four items run across at width, five or more run down a rail at the
   reading measure, which is the same composition the state timeline uses. */
.timeline-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: row;
  gap: 0;
  border-left: 2px solid var(--rule);
  max-width: var(--prose-measure);
}
.timeline-item {
  position: relative;
  padding: 0 0 1.3rem 1.35rem;
  margin: 0;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: -0.42rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--rule-strong);
}
.timeline-item-key::before {
  background: var(--warn);
  width: 0.9rem;
  height: 0.9rem;
  top: 0.15rem;
  left: -0.52rem;
}
@media (min-width: 901px) {
  .timeline-items:not(:has(> :nth-child(5))) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border-left: none;
    border-top: 2px solid var(--rule);
    max-width: none;
  }
  .timeline-items:not(:has(> :nth-child(5))) .timeline-item { padding: 1.4rem 1rem 0 0; }
  .timeline-items:not(:has(> :nth-child(5))) .timeline-item::before { top: -0.42rem; left: 0; }
  .timeline-items:not(:has(> :nth-child(5))) .timeline-item-key::before { top: -0.52rem; left: -0.1rem; }
}
.timeline-marker {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.3rem;
}
.timeline-item-key .timeline-marker { color: var(--warn); }
.timeline-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.timeline-detail {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
/* ── Compare: two things a reader reasonably conflates ─────────────────── */
.compare {
  margin: var(--space-3) 0;
  display: grid;
  gap: 0.9rem;
  max-width: var(--prose-measure);
}
.compare-pair {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-soft);
  padding: 0.95rem 1.1rem;
}
.compare-line {
  margin: 0 0 0.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.compare-side {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.compare-vs {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.1rem 0.5rem;
  background: var(--paper);
}
.compare-note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
/* ── Checklist ─────────────────────────────────────────────────────────── */
.checklist {
  margin: var(--space-3) 0;
  max-width: var(--prose-measure);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  background: var(--surface);
}
.checklist-title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
}
.checklist-items { list-style: none; margin: 0; padding: 0; }
.checklist-items li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  line-height: 1.55;
}
.checklist-items li:last-child { margin-bottom: 0; }
.checklist-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.85rem;
  height: 0.85rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper);
}
/* ── Detail: progressive disclosure for the qualification a lawyer wants
      and a grieving reader does not need in the primary line ───────────── */
.detail-block {
  margin: var(--space-2) 0;
  max-width: var(--prose-measure);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.2rem 0;
}
.detail-block > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 0 0.7rem 1.4rem;
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}
.detail-block > summary::-webkit-details-marker { display: none; }
.detail-block > summary::before {
  content: "+";
  position: absolute;
  left: 0.1rem;
  top: 0.62rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-mute);
}
.detail-block[open] > summary::before { content: "\2212"; }
.detail-block > summary:hover { color: var(--accent-deep); }
.detail-block > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.detail-body { padding: 0 0 0.9rem 1.4rem; }
.detail-body > *:first-child { margin-top: 0; }
.detail-body > *:last-child { margin-bottom: 0; }
.detail-body p, .detail-body li { font-size: 0.9375rem; }
/* ── Page table: a data table with a visible caption ───────────────────── */
.page-table { margin-top: 0.4rem; }
.page-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 0.6rem;
}
.page-table tbody th { font-weight: 600; }
@media (max-width: 640px) {
  .flow-step { padding-left: 1.4rem; }
  .flow-step-label { font-size: 1rem; }
  .compare-line { gap: 0.35rem; }
  .checklist { padding: 1rem; }
  .detail-body { padding-left: 1rem; }
}
/* A two-column table does not need the card treatment on a phone — stacking it
   turns four words into four cards. `compact` keeps it a table all the way down. */
@media (max-width: 700px) {
  .page-table caption { display: block; width: 100%; }
  .data-table.page-table-compact { display: table; width: 100%; }
  .data-table.page-table-compact thead { position: static; width: auto; height: auto; clip: auto; }
  .data-table.page-table-compact thead th { display: table-cell; padding: 0.5rem 0.6rem; }
  .data-table.page-table-compact tbody tr { display: table-row; border: none; border-radius: 0; margin: 0; }
  .data-table.page-table-compact tbody th,
  .data-table.page-table-compact td {
    display: table-cell;
    padding: 0.6rem;
    background: transparent;
    border-bottom: 1px solid var(--rule);
  }
  .data-table.page-table-compact td::before { content: none; }
}
/* The stacked-table cell is a grid of [label, value]. Everything the cell
   contains has to be inside one wrapper, or inline emphasis becomes a grid
   item of its own and escapes the value column. */
.page-table td > .cell-body { display: block; min-width: 0; }
/* Ask Legacy, placed inside the article rather than ahead of it.
   A topic sets `askAfter` to name the section it should follow. On the New
   Jersey page it follows the beneficiary orientation, so the reader has the
   context to ask a good question before being handed an input box. The rules
   above and below mark it as an interlude in the article rather than a stray
   card in the middle of it. */
.guidance-inline {
  margin: var(--space-4) 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--rule);
}
.guidance-inline .ask-module { margin: 0; }
/* The content column is narrower than the old full-width band, so the two-line
   placeholder wraps to three and was being clipped. Enough height for it; the
   field still grows. */
.guidance-inline .ask-input { min-height: 6.25rem; }
@media (max-width: 640px) {
  .guidance-inline { margin: var(--space-3) 0; }
}
/* ─────────────────────────────────────────────────────────────────────
   Short Answer + Jump To — Flagship Experience Blueprint V2.

   Two components, both content rather than decoration. The short answer is
   the 50–100 words a hurried reader, a search snippet and a retrieval system
   all need to be able to lift whole. The jump menu maps *situations* the
   reader recognises ("I found a copy, not the original"), not the internal
   taxonomy the contents rail already carries.

   Both sit inside the page head, above the fold on a phone, because the
   defect they fix is a reader having to scroll past a metadata wall to reach
   the answer. No new palette, no new type scale — existing tokens only.
   ───────────────────────────────────────────────────────────────────── */

/* The short answer is the clearing, at layout scale. It was a tinted box with
   a rail on one side — the right idea, drawn as a component. The construction
   is now the identity's own, so the article page and the mark are the same
   object rather than a logo applied to a template.

   The room is paper on paper, which means what the reader sees is the two
   planes and the space they leave. That is the point: the clearing is the
   ground showing through, not a panel. */
/* The short answer is `.held`: the identity system's one-plane relative.
   It was a tinted box with a rounded outer corner — the right idea, drawn as
   a generic component. It is now the same construction the mark is built
   from, at the scale a passage of prose actually has.

   Why not the full two-plane clearing, which was tried here first: in that
   grid the offset between the planes IS their thickness, so at body-copy
   weight the two L-shapes close into a rectangle and the block reads as a
   card with a drop shadow. A clearing is a section device. A short answer is
   a passage, and it takes the passage-scale member of the family. */
.short-answer {
  margin: 1.75rem 0 0;
  max-width: var(--prose-measure);
}
.short-answer h2 {
  margin-bottom: 0.55rem;
}
.short-answer p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.short-answer p:last-child { margin-bottom: 0; }
/* The source the answer turns on, named where the claim is made rather than
   only in the register at the foot of the page. It inherits nothing from the
   answer's own type: it is a citation, and it should read as one. */
.short-answer .held-source {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 0.8rem;
  max-width: var(--prose-measure);
}
/* The external-link arrow belongs to the link and must not be what wraps. */
.short-answer .held-source a { text-underline-offset: 0.18em; }
/* The reader's own questions, as a way into the page. Distinct from the
   contents rail: that lists the page's structure, this lists the situation the
   reader is in.

   The bottom margin is doing real work. At 1.25rem top and nothing below, the
   first article heading sat about fourteen pixels under the last item and read
   as part of the navigation rather than the start of the article. */
.jump-to {
  /* --space-4 below was still leaving the next article heading reading as the
     module's last row rather than as the start of the article. This is a
     section boundary, so it takes the scale's section step. */
  margin: 1.5rem 0 var(--space-5);
  max-width: var(--prose-measure);
}
.jump-to > summary {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0.35rem 0;
  list-style: none;
}
.jump-to > summary::-webkit-details-marker { display: none; }
.jump-to > summary::after {
  content: "";
  display: inline-block;
  width: 0.42rem; height: 0.42rem;
  margin-left: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}
.jump-to[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* Columns, not a two-column grid. A grid pairs items into rows and gives both
   the height of the taller one, so a one-line question beside a two-line
   question got a box with a hole under the text. CSS columns let each item be
   its own height and flow down one column then the next — and because the flow
   follows document order, reading order and tab order are unchanged. Nothing
   here is masonry: there is no measurement and no script. */
.jump-to ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
/* A little more air between the outlined rows. At 0.4rem a column of six read
   as one ruled block rather than as six separate ways in. */
.jump-to li { margin: 0; break-inside: avoid; }
/* Ruled rows, not outlined boxes.
   These are LINKS. They were drawn as filled, rounded, bordered rectangles —
   which is how this product draws a CHOICE, the thing a reader presses to tell
   Sahvelo something. Two behaviours cannot share one shape: that rule is in
   the interaction grammar and it is there because an escape drawn like a field
   once cost a real reader a real mistake.
   A ruled list is what the rest of the product already uses for a set of ways
   in — the contents rail, the Handbook spine, the resource list. This joins
   them instead of inventing a ninth treatment. */
.jump-to a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}
.jump-to a::after {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 0.36rem;
  height: 0.36rem;
  border-right: 1.5px solid var(--rule-strong);
  border-bottom: 1.5px solid var(--rule-strong);
  transform: rotate(-45deg);
}
.jump-to a:hover, .jump-to a:focus-visible { color: var(--accent); }
.jump-to a:hover::after, .jump-to a:focus-visible::after {
  border-color: var(--accent);
}
@media (min-width: 46rem) {
  .jump-to ul { columns: 2; column-gap: 1rem; }
}
/* The one control on a topic page that a thumb has to find before reading
   anything, and it was 29px tall on every phone width from 320 to 820 — the
   11px uppercase label plus 0.35rem of padding, and nothing else.
   The fix is the target, not the type. Making the label bigger would have
   turned an eyebrow into a heading and changed what the module is; giving the
   same eyebrow a 44px box costs one line of vertical space and leaves the page
   looking as it did. Follows the .evidence-link precedent above.
   Desktop keeps 29px, which clears the WCAG 2.5.8 pointer minimum. */
@media (max-width: 820px) {
  .jump-to > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   Glossary — hub and concept pages

   The hub is a set of cards rather than a wall of definitions, because a
   glossary is something people scan for one word and then leave. Restraint
   over decoration: a rule, a term, a sentence. No icons, no chips, no colour
   coding — the words are the interface.
   ═══════════════════════════════════════════════════════════════════════ */

.gloss-search { margin: 0 0 1.75rem; }
.gloss-search-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.5rem;
}
.gloss-search-input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.85rem 1rem;
  min-height: 48px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}
.gloss-search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.gloss-search-status {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.5rem 0 0;
  min-height: 1.2em;
}
.gloss-az { margin: 0 0 2rem; }
.gloss-az ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.gloss-az a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.gloss-az a:hover, .gloss-az a:focus-visible { color: var(--accent); border-color: var(--accent); }
.gloss-group { margin: 0 0 2rem; }
.gloss-group-letter {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
/* Rows, not boxes (visual reconstruction, 2026-09-10). Three hundred and
   fifty-seven terms in three hundred and fifty-seven white rectangles was the
   most cardified surface on the site and 31,808px tall. A term is a row: a
   hairline above, the page ground, the lift to paper on reach, which is how
   every other list of doors on this site is drawn. */
.gloss-cards { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.gloss-card > a {
  display: block;
  padding: 0.7rem 0.25rem 0.8rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background 120ms linear;
}
@media (prefers-reduced-motion: reduce) { .gloss-card > a { transition: none; } }
.gloss-card > a:hover, .gloss-card > a:focus-visible { background: var(--surface); }
.gloss-card > a:hover .gloss-card-term, .gloss-card > a:focus-visible .gloss-card-term {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.gloss-card-term {
  display: block;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.gloss-card-short {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.gloss-card-meta {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin-top: 0.4rem;
}
/* Terms that belong to one state. Set apart deliberately: the point of the
   section is that these are NOT general concepts, so they must not look like
   the cards above them. */
.gloss-local-wrap { margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.gloss-local-wrap > h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.gloss-local-lede {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 1.5rem;
}
.gloss-local + .gloss-local { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.gloss-local h3 { font-size: 0.9375rem; margin: 0 0 0.3rem; }
.gloss-local-terms {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0;
}
/* Concept page */
.gloss-page .page-head { margin-bottom: var(--space-3); }
.gloss-page .page-head + .gloss-section { margin-top: 0; }
.gloss-aka {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0.6rem 0 0;
}
.gloss-section { margin: 0 0 var(--space-4); }
.gloss-when { margin: 0.5rem 0 1.25rem; padding-left: 1.15rem; }
.gloss-example > p { margin: 0; }
.gloss-example-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.35rem !important;
}
.gloss-when li { margin: 0 0 0.4rem; }
.gloss-state-intro {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 1.25rem;
}
.gloss-state + .gloss-state { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.gloss-state-name { font-size: 1rem; margin: 0 0 0.5rem; }
.gloss-state-def + .gloss-state-def { margin-top: 0.85rem; }
.gloss-state-term {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.25rem;
}
.gloss-state-source {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.gloss-cite { color: var(--ink-mute); }
.gloss-related, .gloss-guidance { list-style: none; margin: 0; padding: 0; }
.gloss-related li + li, .gloss-guidance li + li { margin-top: 0.5rem; }
.gloss-related a {
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.gloss-related a:hover, .gloss-related a:focus-visible { border-color: var(--accent); }
.gloss-rel-term { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.gloss-rel-short { display: block; font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.15rem; }
.gloss-guidance a { font-family: var(--font-ui); font-size: 0.9375rem; }
@media (min-width: 46rem) {
  .gloss-cards { columns: 2; column-gap: 1rem; }
  .gloss-card { break-inside: avoid; }
  .gloss-card + .gloss-card { margin-top: 0; }
  .gloss-card { margin-bottom: 0.5rem; }
}
/* ─────────────────────────────────────────────────────────────────────
   Glossary links — the first use of a term on a page

   These are inserted at build time by scripts/glossary-autolink.mjs, once per
   term per page. They must read as an offer rather than an instruction: a
   reader who already knows what probate is should be able to read straight
   past, and a reader who does not should be able to see that the word is
   explained somewhere. So the word keeps the body colour and takes a dotted
   underline that only becomes a solid, accented link on hover or keyboard
   focus. A blue link here would make the sentence look like a citation.
   ───────────────────────────────────────────────────────────────────── */
a.gloss-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-strong);
  padding-bottom: 0.05em;
}
a.gloss-link:hover,
a.gloss-link:focus-visible {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
}
@media (prefers-contrast: more) {
  a.gloss-link { border-bottom-style: solid; }
}
/* ─────────────────────────────────────────────────────────────────────
   Commercial placement

   The design brief is unusual and worth stating, because the obvious
   treatment is wrong. This must not look like an ad unit — no colour
   block, no button, no contrast against the page. It is an aside inside
   an editorial page, and the thing it most needs to communicate is that
   the paragraph above it ("when you don't need this") is not fine print.

   So: the same paper as the page, a single hairline, and the
   don't-need-this block given MORE visual weight than the options — a
   rule of its own and a heading, where the options are a plain list.
   A reader who reads only the heavy part of this card has read the part
   that protects them.
   ───────────────────────────────────────────────────────────────────── */
.placement {
  max-width: var(--prose-measure);
  margin: var(--space-4, 2.5rem) 0;
  padding: 1.25rem 1.35rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper);
}
.placement-heading {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.placement-lede {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}
/* Given more weight than the options, deliberately. */
.placement-not-needed {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0;
  padding: 0.85rem 1.05rem;
  margin: 0 0 1.1rem;
}
.placement-not-needed h3 {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
  color: var(--accent-deep);
}
.placement-not-needed p { margin: 0 0 0.5rem; }
.placement-not-needed p:last-child { margin-bottom: 0; }
.placement-free { color: var(--ink-soft); }
.placement-options {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.placement-option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.6rem;
}
.placement-link {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
}
.placement-host {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
}
.placement-what {
  flex-basis: 100%;
  margin: 0.1rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.placement-disclosure {
  margin: 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-mute);
}
@media (max-width: 40rem) {
  .placement { padding: 1rem 1rem 0.9rem; }
}
/* ─────────────────────────────────────────────────────────────────────
   Reroute — the way out of an out-of-state halt.

   Deliberately styled like the state picker at the start of the flow
   rather than like an error recovery: the reader has not made a
   mistake, they have answered a question, and the answer has a next
   step. Sits above the explanation of why this state's law does not
   apply, because the explanation is the part they do not need.
   ───────────────────────────────────────────────────────────────────── */
.reroute {
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-4, 2.5rem);
  padding: 1.25rem 1.35rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper-soft);
}
.reroute-h {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
}
.reroute-lede { margin: 0 0 1rem; color: var(--ink-soft); }
.reroute-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.45rem;
}
.reroute-button {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
}
.reroute-button:hover { border-color: var(--accent); background: var(--accent-wash); }
.reroute-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reroute-note {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-mute);
}
@media (max-width: 40rem) {
  .reroute { padding: 1rem; }
  .reroute-list { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
}
/* ═══════════════════════════════════════════════════════════════════════
   The Handbook questionnaire (/handbook/plan/)

   Rendered by public/handbook.js from content/handbook-questions.json, not by
   React — the plan page is a static document with a small walker on it, so it
   costs nothing on a phone in a hospital car park.

   Two things here are deliberate rather than stylistic. One question fills the
   screen, because a reader answering questions about a death should be looking
   at one thing. And the print rules are a first-class surface, not a
   concession: the plan's most likely destination is a printer, a fridge door,
   or an email to the sibling who is actually doing the filing.
   ═══════════════════════════════════════════════════════════════════════ */

.hb-plan {
  max-width: var(--max-handbook);
  /* Left-aligned, not centred: centring the measure inside the wider wrap put
     the breadcrumb at one margin and the question 40px inside it, and moved
     the reading column sideways between step one and step two of one flow. */
  margin: 0;
  padding: clamp(1.5rem, 5vh, 3.5rem) 0 var(--space-5);
}
.hb-step,
.hb-result {
  animation: hb-in 180ms ease-out;
}
@keyframes hb-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-step,
  .hb-result { animation: none; }
}
.hb-progress {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--space-2);
}
.hb-q {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  font-weight: 500;
}
/* No focus ring on the Handbook headings, and this rule is where it used to
   be. It was written to match the global focus style on the assumption that
   `:focus-visible` would not fire on a heading focused by script. It does:
   Chromium treats programmatic focus as visible focus when the last
   interaction was a keypress, which after a click on "Continue" it is. The
   result was a heavy accent box around the H1 of every question screen and
   every plan — the most prominent thing on the page, on every screen of the
   product, saying nothing. The exclusion at the top of this file now applies
   instead. See `[tabindex="-1"]:focus`. */
.hb-q-note {
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
  max-width: var(--prose-measure);
}
/* ── Options ────────────────────────────────────────────────────────── */

.hb-options {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.hb-option {
  display: block;
  position: relative;
  width: 100%;
  min-height: 56px;
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 1.5rem);
  /* Pressed, not typed into. See the note on .chat-starter. */
  background: transparent;
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}
/* THE MARKER, WHICH IS THE WHOLE POINT.
   SAHVELO-INTERACTION-GRAMMAR.md: a CHOICE carries a leading ring, because a
   ring is a thing no text input has, so a choice can never read as a field.
   Without it these three were bordered rectangles of left-aligned text on
   paper, which is exactly the shape that cost a real reader a real mistake,
   and they are the first control anybody meets in the Handbook. */
.hb-option::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: calc(var(--space-2) + 0.3em);
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.hb-option:hover,
.hb-option:focus-visible {
  background: var(--paper-deep);
  border-color: var(--accent);
}
.hb-option:hover::before,
.hb-option:focus-visible::before {
  border-color: var(--accent);
  background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .hb-option::before { transition: none; }
}
.hb-option-label { display: block; }
/* The entrance's options are anchors rather than buttons, because each one is
   also a URL a reader can bookmark, send, or reach with Back. Same component,
   same behaviour, so it takes the same drawing — the alternative is a front
   door in a language the rest of the flow does not speak. */
a.hb-option { text-decoration: none; }
a.hb-option .hb-option-label { font-weight: 500; }
.hb-option-status {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  vertical-align: 0.12em;
}
/* The page and its first question are two things, and at similar weight they
   read as two headlines arguing. A rule and a step of space says which is the
   page and which is the thing to do, without inventing a second heading
   level or a progress label the entrance cannot honestly fill in. */
.hb-entry {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.hb-entry .hb-q { margin-bottom: var(--space-3); }

/* The escape. Options are accelerators in this product, never required
   syntax, and the Handbook's first question was the one question in it with
   three options and no way past them. Free text outranks options, so the way
   past is the surface where free text is the whole interaction. */
.hb-escape {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: var(--space-3) 0 var(--space-2);
}
.hb-escape a { color: var(--accent); }
/* The three reading routes, gathered onto one line. They were a link inside
   each option — three doors inside three doors, on the screen whose only job
   is to start. Every route still exists; none of them is competing with the
   answer any more. */
.hb-browse {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 var(--space-3);
}
.hb-browse a { color: var(--ink-soft); text-underline-offset: 3px; }
.hb-browse a:hover, .hb-browse a:focus-visible { color: var(--accent); }
.hb-browse-sep { padding: 0 0.5rem; color: var(--ink-mute); }
.hb-option-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-mute);
}
/* ── Multi-select ───────────────────────────────────────────────────── */

.hb-multi {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.hb-check {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  /* A checkbox row is pressed too, so it wears the choice edge. The checkbox
     inside it is what says the choice can be held rather than taken. */
  background: transparent;
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  cursor: pointer;
}
.hb-check:hover,
.hb-check:focus-within {
  background: var(--paper-deep);
}
.hb-check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
  flex: none;
}
.hb-check-body { font-family: var(--font-ui); }
.hb-check-label { display: block; color: var(--ink); }
.hb-check-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-mute);
}
.hb-primary {
  /* An <a> is inline, so min-height and vertical padding did nothing to it
     and the label escaped a two-pixel bar. It happened to look right
     everywhere else only because everywhere else it is a <button>. The same
     defect as .hb-link's, and the same fix: the element type stops deciding
     the shape of the control. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  justify-self: start;
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 1rem;
  cursor: pointer;
}
.hb-primary:hover,
.hb-primary:focus-visible { background: var(--accent-deep); }
.hb-state-select {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-mute);
  border-radius: var(--radius);
}
/* ── More than one state ────────────────────────────────────────────── */
/* One person can own a house in two states, and each house follows the state
   it sits in. So this question collects a LIST. The picker adds to the list,
   the list is the answer, and the two are drawn differently because they do
   different things: choosing a state is not finishing the question. */

.hb-states {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.hb-states .hb-state-select { margin-bottom: 0; }
.hb-secondary {
  justify-self: start;
  min-height: 48px;
  padding: 0 var(--space-3);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 1rem;
  cursor: pointer;
}
.hb-secondary:hover,
.hb-secondary:focus-visible {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.hb-states-chosen {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-sunk, var(--surface));
}
.hb-states-list {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.hb-states-item {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-ui);
}
.hb-states-name { color: var(--ink); }
.hb-states-none {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
}

/* ── Navigation and asides ──────────────────────────────────────────── */

.hb-nav,
.hb-result-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.hb-result-nav {
  margin-top: var(--space-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}
.hb-link {
  /* A button centres its label in its box and an anchor does not, so "Print"
     and "Change my answers" — the same class, the same 44px target, side by
     side in one row — had their underlines nine pixels apart. Centred
     explicitly, so the element type stops deciding where the text sits. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hb-link:hover,
.hb-link:focus-visible { color: var(--ink); }
.hb-note,
.hb-disclaimer {
  font-size: 0.875rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin-top: var(--space-3);
}
.hb-disclaimer,
/* The shell's copy, below #hb-root — the one a reader sees on every screen of
   the flow, and the only one on the plan. It had no rule of its own and so
   printed at full body size, larger than anything else at the foot of the
   sheet. */
.hb-plan-disclaimer {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin-top: var(--space-3);
}
/* ── The plan ───────────────────────────────────────────────────────── */

/* The clearing at PRODUCT scale. The layout-scale clearing holds the one
   statement a screen has to make; this one holds what Sahvelo has actually
   concluded — the state it narrowed to, the size of the plan, and how much of
   it cannot wait. Every number in the room is counted from the plan that was
   just built, so the room cannot describe a product that is not there.

   Wider planes than the guide's, because this room holds an artifact rather
   than a transcript and there is nothing below it competing for the width. */
.clearing-plan {
  --clearing-lead: clamp(0.75rem, 2vw, 1.5rem);
  --clearing-trail: clamp(0.5rem, 1.4vw, 1rem);
  --clearing-rise: clamp(1rem, 2.6vw, 2rem);
  --clearing-fall: clamp(0.75rem, 2vw, 1.5rem);
}
.clearing-plan .clearing-room {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  justify-content: flex-start;
}
.clearing-plan h1 { margin-top: 0; }
/* The printed sheet gets the plan, not the furniture. */
@media print {
  .clearing-plan { display: block; }
  .clearing-plan .clearing-plane { display: none; }
  .clearing-plan .clearing-room { padding: 0; }
}

.hb-result-state,
.hb-result-built {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 0;
}
/* Only shown when the plan is more than two days old, which is the whole
   point of it: the reader is being told where they are, not congratulated. */
.hb-result-return {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: var(--space-2) 0 0;
}
/* ── Keeping the plan ────────────────────────────────────────────────
   Nothing is stored, so the address is the plan. This is the block that
   says so, at the end, where somebody has one worth keeping. */
.hb-keep p {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-2);
}
.hb-keep-copy {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.hb-keep-copy:hover { border-color: var(--ink-mute); }
.hb-keep-url {
  word-break: break-all;
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin-top: var(--space-2) !important;
}
.hb-result section { margin-top: var(--space-4); }
.hb-result h2 {
  font-family: var(--font-ui);
  font-size: 1.3125rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
/* ── At a glance ─────────────────────────────────────────────────────
   The shape of the plan, before its contents: how much there is and how
   much of it is urgent. Four numbers, read in one pass. */
.hb-glance-lede {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: var(--space-2) 0 0;
}
.hb-glance {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--rule);
}
.hb-glance li { display: flex; align-items: baseline; gap: 0.4rem; }
.hb-glance-n {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
/* The first bucket, and only the first, carries the accent. Four numbers in
   the same colour and the same size is a dashboard: it says every bucket is
   as interesting as the others, when the product's whole argument is that a
   handful of these genuinely cannot wait. The homepage spine makes the same
   distinction for the same reason, and the accent means one thing. */
.hb-glance li.is-now .hb-glance-n { color: var(--accent); font-size: 1.75rem; }
.hb-glance li.is-now .hb-glance-label { color: var(--ink); }
.hb-glance-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* ── What to gather ───────────────────────────────────────────────────
   Between the shape of the plan and the plan itself, because gathering is
   one trip and the alternative is four. It is a list of documents, so it
   is drawn as a list of documents: no numbers, no accent, nothing that
   competes with the four glance figures above it. The rule that keeps it
   short lives in public/handbook.js — a document appears here only if more
   than one action asks for it. */
.hb-gather {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.hb-gather-lede {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-3);
}
.hb-gather-list { list-style: none; margin: 0; padding: 0; }
.hb-gather-list li {
  padding: 0.5rem 0 0.5rem 1rem;
  border-top: 1px solid var(--rule);
  position: relative;
}
.hb-gather-list li:first-child { border-top: 0; }
.hb-gather-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.4rem;
  height: 1px;
  background: var(--rule-strong);
}
.hb-gather-doc {
  display: block;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
}
.hb-gather-for {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin-top: 0.15rem;
}
.hb-summary-hint {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 var(--space-2);
}
/* The record of what the plan was built from, folded. It sits below the plan
   now, so the fold is not hiding anything the reader came for — it is keeping
   twenty-five rows of their own answers from standing between them and the
   first thing to do. It opens itself when something is unanswered. */
.hb-summary-fold > summary {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
}
.hb-summary-fold > summary::-webkit-details-marker { display: none; }
.hb-summary-fold > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--ink-mute);
  border-bottom: 1.5px solid var(--ink-mute);
  transform: rotate(-45deg);
}
.hb-summary-fold[open] > summary::before { transform: rotate(45deg); }
.hb-summary-fold > summary:hover, .hb-summary-fold > summary:focus-visible { color: var(--ink); }
.hb-summary-fold[open] > summary { border-bottom-color: transparent; }
.hb-summary-count { font-variant-numeric: tabular-nums; }
.hb-summary-list {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.hb-summary-list dt {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  padding-top: var(--space-2);
}
.hb-summary-list dd {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.hb-summary-value { flex: 1 1 auto; }
.hb-summary-skipped .hb-summary-value { color: var(--ink-mute); font-style: italic; }
/* One way back into each answer. A link rather than a button visually,
   because it is navigation — but it is a button, because it changes state
   rather than going somewhere. */
.hb-summary-edit {
  flex: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.hb-summary-edit:hover { color: var(--accent-deep); }
/* A 21px-tall text button is a fine target for a mouse and a poor one for a
   thumb. On touch widths the hit area grows without the label growing with
   it: padding makes the box, the negative margin keeps the row's rhythm.

   The breakpoint was 40rem, which is a phone and stops short of a tablet: the
   one control that gets a reader back into an answer they mis-tapped was
   49×21px at 768px and 820px, on the only surface in the product where going
   back is the whole point. Widened to 52rem, and paired with pointer: coarse
   so that a large touch device gets the target at any width — which is the
   actual condition, width having only ever been a proxy for it. */
@media (max-width: 52rem), (pointer: coarse) {
  .hb-summary-edit {
    padding: 0.55rem 0.25rem;
    margin: -0.55rem -0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
.hb-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
/* ── THE STANDING RAIL (Direction D, R3) ─────────────────────────────────
   Every action carries a rail at its left edge and the ink in the rail is the
   whole vocabulary. It is built on the states this runtime actually computes —
   `priority`, and whether `__blockedBy` put a `.hb-action-requires` line on the
   card — and on nothing else.

     solid accent    ready now      nothing is holding it
     dashed accent   next           released in order, once the ones above are
     neutral rail    held / later   something must happen first, and it is named

   The ink is --accent, the chestnut. This legend said "green" long after the
   green system was gone, which is the exact thing SAHVELO-DESIGN-AUTHORITY.md
   warns about: a comment describing a superseded palette reads as authority
   and is a bug.

   THERE IS DELIBERATELY NO DONE STATE HERE. The prototype has one; the
   Handbook runtime has no completion model, and inventing one in CSS would
   mean styling a state no data can produce. It is tracked as blocked in
   docs/design/R3-IMPLEMENTATION.md and is the next thing to build.

   Colour is never the only signal: the standing is also the pill's words, and
   a held action names its blocker in a sentence. */
.hb-action {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-2);
}
.hb-action-now { border-left-color: var(--accent); }
.hb-action-now .hb-action-pill { color: var(--accent); font-weight: 600; }
/* Next: the same ink, not yet solid. The dash says the order is known, not
   that something is wrong — which is the distinction between next and held. */
.hb-action-soon { border-left-color: var(--accent); border-left-style: dashed; }
.hb-action-can-wait, .hb-action-not-yet { border-left-color: var(--rule-strong); }
/* Held. An action that names a prerequisite is waiting, whatever its bucket. */
.hb-action:has(.hb-action-requires) {
  border-left-color: var(--rule-strong);
  border-left-style: solid;
}
.hb-action:has(.hb-action-requires) .hb-action-pill { color: var(--ink-mute); font-weight: 500; }
.hb-action-pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.4rem;
}
.hb-action-title {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.hb-action-why {
  margin: 0;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
}
.hb-action-who,
.hb-action-object,
.hb-action-state,
.hb-action-guide {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: var(--space-1) 0 0;
}
/* The state note stopped being a badge and became a sentence — what differs
   where the reader lives, or an honest statement that Sahvelo has not read
   their state. A sentence set in italic at 14px is hard work, so it is set
   upright against a rule instead: the one part of an action that is about
   the reader rather than about everybody. */
.hb-action-state {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-2);
  color: var(--ink-soft);
  max-width: var(--prose-measure);
}
.hb-action-state .mini-label { color: var(--accent); }
/* Not read. Same shape, no accent — the absence should not look like an
   answer, and should not look like a warning either. */
.hb-action-state-unread {
  border-left-color: var(--rule-strong);
  color: var(--ink-mute);
}
.hb-action-state-unread .mini-label { color: var(--ink-mute); }

/* ── The local step, where Sahvelo has one ───────────────────────────────
   Deliberately not a card inside a card. An execution block is a continuation
   of the action it belongs to, so it borrows the action's own measure, type
   and spacing and adds one rule down the left to say "this part is about
   where you are". Three tones, and the difference between them is the only
   thing a reader needs to read off the styling:

     say    the accent rule the rest of the plan uses for a settled fact
     point  no accent — an absence must not look like an answer, and must
            not look like a warning either (the same decision .hb-action-state
            made above, for the same reason)
     gap    as point, and it carries one sentence

   No badge, no shield, no checkmark. Evidence quality is carried by which
   sentences are present, not by an icon that would have to be trusted. */
.hb-exec {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--space-2);
  margin: var(--space-2) 0 0;
}
.hb-exec-say { border-left-color: var(--accent); }
.hb-exec-h {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--space-1);
}
.hb-exec p { margin: 0 0 var(--space-1); }
.hb-exec p:last-child { margin-bottom: 0; }
.hb-exec-k { color: var(--ink-mute); font-weight: 600; }
.hb-exec-office { color: var(--ink); }
.hb-exec-note,
.hb-exec-via,
.hb-exec-checked { color: var(--ink-mute); }
.hb-exec-say { color: var(--ink-soft); }
.hb-exec-bring { margin: 0 0 var(--space-1); padding-left: 1.1em; }
.hb-exec-bring li { margin: 0; }
/* The actions read as a line of links rather than a row of buttons: six equal
   buttons at phone width is the overflow this product has already fixed once,
   and the execution block is a continuation rather than a call to action. */
.hb-exec-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.hb-exec-action { overflow-wrap: anywhere; }
.hb-exec-src-mark { color: var(--ink-mute); font-weight: 600; }
.hb-exec-source { overflow-wrap: anywhere; }
.hb-exec-select { font-family: var(--font-ui); font-size: 0.9375rem; max-width: 100%; }
.hb-exec-label { display: block; margin-bottom: var(--space-1); color: var(--ink); }
/* A report control is a quiet aside, not a call to action: somebody who came
   to order a death certificate is not here to do quality assurance. */
.hb-exec-reportbtn {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0;
  cursor: pointer;
}
.hb-exec-dialog { max-width: 28rem; font-family: var(--font-ui); }
.hb-exec-reason { display: block; margin: var(--space-1) 0; }
/* Send and Cancel are drawn as what they are: one commits, one leaves. They
   must not be mistakable for each other — the rule this product wrote after
   an escape control read as an empty text box. */
.hb-exec-dialog-actions { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-2) 0 0; }
.hb-exec-send {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius-s, 4px);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}
.hb-exec-cancel {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--ink-mute);
  text-decoration: underline;
  cursor: pointer;
}
.hb-exec-thanks { font-size: 0.8125rem; color: var(--ink-mute); }
.hb-bucket { margin-top: var(--space-3); }
/* Direct child, deliberately. `.hb-bucket h3` also matched .hb-action-title —
   an h3 inside the bucket's own list — at higher specificity than the rule
   meant for it, so every action title in the plan rendered as a 13px muted
   uppercase label instead of a 17px title. The same bug was in
   .hb-priority-group below. Nothing in the suite could see it, because both
   rules were valid and the markup was right. */
.hb-bucket > h3 {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.25rem;
}
.hb-bucket-note {
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 var(--space-2);
}
.hb-resource-list,
.hb-glossary-list { margin: 0; }
.hb-resource-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.hb-glossary-list dt { font-weight: 500; margin-top: var(--space-2); }
.hb-glossary-list dd {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
}
.hb-empty {
  color: var(--ink-soft);
  max-width: var(--prose-measure);
}
/* ═══════════════════════════════════════════════════════════════════════
   THE STANDING BRIEF

   The result page used to be the questionnaire printed onto a web page: the
   reader's own answers read back at the top, then six equally-weighted runs of
   cards. Everything on it was true and none of it was arranged, so the work of
   assembling the situation was left with the person least able to do it.

   This is an editorial document, and the rules below are the ones that make it
   read as one rather than as a report:

   · ONE THING IS BIGGEST. The situation sentences are set at display size and
     nothing else on the front sheet competes with them. A reader who does not
     recognise their own situation in two seconds will not read the rest.
   · A SECTION IS A LABEL, A RULE, AND CONTENT. Headings are small and quiet;
     the hairline above them does the separating. Hierarchy comes from space
     and sequence rather than from size, colour or boxes.
   · NOTHING IS A CARD UNLESS IT IS ACTED ON. What matters now is cards,
     because each one is a thing to do. What is holding things up is a list,
     because eleven steps waiting on one appointment is one fact rather than
     eleven.
   · COLOUR CARRIES ONE MEANING. The green means settled or established. The
     ochre means needs attention. There is no red anywhere: a person who has
     not yet been appointed has not failed at anything.
   · THE FRONT SHEET ENDS. The reference layer starts behind a rule and, on
     paper, behind a page break, so page one stays page one however long the
     plan behind it runs.
   ═══════════════════════════════════════════════════════════════════════ */

.sb {
  max-width: 46rem;
  margin: 0 auto;
  padding-bottom: var(--space-5);
}

/* ── Masthead ────────────────────────────────────────────────────────── */

.sb-masthead { margin-bottom: var(--space-4); }
.sb-mast-rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--rule-firm);
  font-family: var(--font-ui);
}
.sb-wordmark {
  font-family: var(--font-wordmark);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--track-flat);
  color: var(--ink);
}
.sb-mast-meta {
  font-size: 0.75rem;
  color: var(--ink-mute);
  letter-spacing: var(--track-flat);
}
.sb-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  margin: var(--space-3) 0 var(--space-1);
  color: var(--ink);
}
.sb-standfirst {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 34rem;
  margin: 0;
}

/* ── The block rhythm ────────────────────────────────────────────────── */

.sb-block {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}
.sb-h {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--space-2);
}
.sb-lede {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-2);
}

/* ── The opening ─────────────────────────────────────────────────────── */
/* No heading. A heading over three sentences about the reader's own life
   would be the document explaining itself before saying anything. */

.sb-situation {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--space-4);
}
.sb-situation-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: var(--track-display);
  color: var(--ink);
  max-width: 32rem;
  margin: 0;
  text-wrap: pretty;
}

/* ── What matters now ────────────────────────────────────────────────── */
/* The lead cards. Heavier than the reference cards behind them, and the only
   place on the front sheet where the accent appears on a rail. */

.sb-actions-lead { margin-top: var(--space-2); }
.hb-action-lead {
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  padding: 0 0 0 var(--space-2);
  background: transparent;
  margin-bottom: var(--space-3);
}
.hb-action-lead .hb-action-title {
  font-size: 1.125rem;
  line-height: 1.25;
}
/* The urgency pill goes. Five cards under a heading that says "What matters
   now", each stamped DO THIS FIRST, is the same word five times and it is
   already in the heading. The rail and the position carry it. */
.hb-action-lead > .hb-action-pill { display: none; }
/* The reason, tightened. On the front sheet these paragraphs are the bulk of
   the page, and at reading size five of them push everything else below a
   second screen — which defeats the one job page one has. */
.hb-action-lead .hb-action-why {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ── Compact lists ───────────────────────────────────────────────────── */
/* Used where the SHAPE of a group is the information. Rows, not boxes. */

.sb-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
}
.sb-line:last-child { border-bottom: 0; }
.sb-line-title {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}
.sb-line-note {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  text-align: right;
  flex: none;
  max-width: 45%;
}

/* ── Where you stand ─────────────────────────────────────────────────── */

.sb-standing-status { margin: 0 0 var(--space-1); }
.sb-status-mark {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1875rem 0.5rem;
  border: 1px solid currentColor;
  color: var(--ink-mute);
}
/* The green means established. Nothing else on this page may use it to mean
   anything else, and nothing here is ever red. */
.sb-status-confirmed { color: var(--accent); }
.sb-status-pending,
.sb-status-named { color: var(--warn); }
.sb-standing-line {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-2);
}
.sb-standing-proof,
.sb-standing-holding {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-1);
}
.sb-proof-have { color: var(--accent); }
.sb-proof-not { color: var(--warn); }
.sb-standing-scope {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-2);
  border-left: 1px solid var(--rule-strong);
}

/* ── What is still open ──────────────────────────────────────────────── */
/* An unknown is information, not a defect. Set as a question, with what it
   decides underneath it, and a way to answer it on the spot. */

.sb-open-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-open-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-2);
  align-items: baseline;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--rule);
}
.sb-open-item:last-child { border-bottom: 0; }
.sb-open-q {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}
.sb-open-decides {
  grid-column: 1;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-mute);
  margin-top: 0.125rem;
}
.sb-open-answer {
  grid-row: 1;
  grid-column: 2;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 0 0.0625rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--accent);
  cursor: pointer;
}
.sb-open-answer:hover,
.sb-open-answer:focus-visible { border-bottom-color: var(--accent); }
.sb-more {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: var(--space-2) 0 0;
}

/* ── What applies where ──────────────────────────────────────────────── */
/* A ledger, not a table: the thing on the left, the state hard right, so a
   reader scanning down the right edge sees the states as a column and can
   tell at a glance that they are not all the same. */

.sb-places-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
}
.sb-places-list dt,
.sb-places-list dd {
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  margin: 0;
}
.sb-places-list dt { color: var(--ink-soft); }
.sb-places-list dd { text-align: right; color: var(--ink); }
.sb-place-state { font-weight: 500; }
.sb-place-assumed,
.sb-place-note {
  font-size: 0.75rem;
  color: var(--ink-mute);
  font-weight: 400;
}
.sb-place-unknown .sb-place-state { color: var(--ink-mute); font-weight: 400; }

/* ── The divider ─────────────────────────────────────────────────────── */
/* The front sheet ends here, visibly. Everything after it is reference. */

.sb-divider {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 2px solid var(--rule-firm);
}
.sb-divider-h {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-1);
}
.sb-divider-lede {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 0;
}

/* Reference sections reuse the plan's own heading scale, one step quieter than
   the front sheet's. */
.sb-block > h2:not(.sb-h) {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

/* ── The source mark ─────────────────────────────────────────────────── */
/* Present only where Sahvelo has read and quoted the primary source. Absence
   is not marked: the document states the true proportion once, in the source
   section, rather than stamping two hundred cards with a disclaimer. */

.hb-action-sourced {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: 0.0625rem;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.0625rem 0.25rem;
}

/* ── The claim mark ──────────────────────────────────────────────────── */
/* Which SENTENCE is sourced, rather than which step. A thin rule under the
   supported words and one small word at the end of them.

   Deliberately NOT the boxed pill above. The two say different things — the
   pill covers a whole step, this covers exactly the words it sits under — and
   two marks that mean different things may not look the same. The rule is the
   informative half: it says where the support starts and stops, which is the
   one thing a badge beside a title can never say. */

/* DOTTED AND MUTED, BECAUSE SOLID AND GREEN IS A LINK.
   The first version drew this rule in the accent, solid, one pixel — which is
   exactly how every link on the page is drawn, and the vehicle card has two of
   them. Found by rendering: a sentence a reader would try to click, sitting
   between "Read Ohio's rules" and "Vehicle title transfer, by state" and
   looking like both. An annotation may not wear a control's clothes.
   Dotted, in the tertiary ink, at an offset that clears the descenders. It
   reads as something marked rather than something to press, it survives at
   phone width, and it prints. */

.hb-claim {
  text-decoration: underline dotted var(--ink-mute);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.hb-claim-mark {
  margin-left: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  vertical-align: 0.09em;
}

/* In the appendix: the sentences one source was read for. */

.hb-source-for {
  display: block;
  margin-top: 0.375rem;
}

.hb-source-claims {
  margin: 0.125rem 0 0;
  padding-left: 1rem;
  list-style: none;
}

.hb-source-claims li {
  position: relative;
  margin-bottom: 0.125rem;
  color: var(--ink-mute);
}

.hb-source-claims li::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.5em;
  width: 0.375rem;
  border-top: 1px solid var(--line);
}

/* ── Controls ────────────────────────────────────────────────────────── */

.sb-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}
/* THE ONE THAT DISCARDS THE PLAN IS NOT DRAWN LIKE THE THREE THAT DO NOT.
   "Download my Handbook", "Print" and "Change my answers" keep the work.
   "Start again" empties every answer, and there is no account to restore it
   from. It shipped identical to "Print": 15px, --accent, underlined, 44px.
   Now it takes its own flex line below a rule, and it arms before it fires
   (handbook.js). SAHVELO-INTERACTION-GRAMMAR.md is the reason. */
.sb-controls .sb-control-over {
  flex-basis: 100%;
  width: 100%;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  text-align: left;
  color: var(--ink-mute);
}
.sb-controls .sb-control-over:hover,
.sb-controls .sb-control-over:focus-visible { color: var(--ink); }
.sb-controls .sb-control-over[data-armed] { color: var(--warn); font-weight: 600; }
/* PRINT ONLY. This is the printed page's footer — "sahvelo.com · General
   information, not legal advice." — and a printout needs it because it has no
   address bar and no site footer. On screen it was the THIRD disclaimer in one
   viewport: this line, the plan's own .hb-plan-disclaimer about 150px above
   it, and the site footer's below. A warning that fires three times in one
   screen is wallpaper, and then the one that matters is invisible too. */
.sb-foot {
  display: none;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin-top: var(--space-3);
}

/* ── The door to a saved plan ────────────────────────────────────────── */
/* Two things, and they are different jobs. The CONTEXT is drawn at the top
   of every screen when this Handbook belongs to a plan somebody has saved:
   it names what is happening and carries the way back, because a person who
   came here to change one answer used to land on a bare question under the
   site's header with nothing to tell them where they were. The DOOR is the
   save control at the foot of the finished plan.
   A control must look like what it does: the door is a pressed thing, the
   way back is a link, and neither is drawn like the other. */

.hb-plan-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-3);
  padding: 0.75rem var(--space-2);
  background: var(--paper-soft);
  border-left: 2px solid var(--rule);
}
.hb-plan-context-line {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.hb-plan-context-back {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  /* A real tap target on a phone without becoming a second button. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent-deep);
}

.sb-save {
  max-width: var(--prose-measure);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-2);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.sb-save-h {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 var(--space-1);
}
.sb-save-p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}
/* The class is shared with the questionnaire's own button, which is a
   <button>; as an <a> it needs the box drawn explicitly or the padding
   applies to an inline run of text and the height does nothing. */
.sb-save-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.sb-save-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: var(--space-2) 0 0;
}
.sb-save-note-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent-deep);
}

@media (max-width: 40em) {
  /* One column on a phone, and the door is full width: a centred label in a
     box the thumb cannot miss. */
  .hb-plan-context { flex-direction: column; gap: 0; }
  .sb-save-link { display: flex; width: 100%; }
}
.sb-pro-foot {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}
.sb-pro-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 1fr;
  gap: 0;
}
.sb-pro-list dt,
.sb-pro-list dd {
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  margin: 0;
}
.sb-pro-list dt { color: var(--ink-mute); padding-right: var(--space-2); }
.sb-pro-list dd { color: var(--ink); }

/* ── Narrow screens ──────────────────────────────────────────────────── */
/* The document is a single column already, so the mobile work is about
   measure, the two-column ledgers, and rows that were laid out on the
   assumption of room to the right. */

@media (max-width: 40rem) {
  .sb { max-width: none; }
  .sb-situation-text { max-width: none; }
  .sb-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }
  .sb-line-note { text-align: left; max-width: none; }
  .sb-pro-list { grid-template-columns: 1fr; }
  .sb-pro-list dt { border-bottom: 0; padding-bottom: 0; }
  .sb-pro-list dd { padding-top: 0.125rem; }
  .sb-controls { gap: var(--space-1) var(--space-2); }
}

/* ── Print ──────────────────────────────────────────────────────────── */

.hb-print-head,
.hb-print-foot,
.sb-running { display: none; }
@media (max-width: 40rem) {
  .hb-plan { padding-top: var(--space-3); }
  .hb-nav,
  .hb-result-nav { gap: var(--space-2); flex-direction: column; align-items: flex-start; }
  .hb-action { padding: var(--space-2); }
}
@media print {
  /* ═══════════════════════════════════════════════════════════════════
     THE STANDING BRIEF, ON PAPER

     Print is not a fallback here. The central idea of the product is that a
     person can hand this to somebody and say "this is where things stand", and
     most of the time they will hand over paper — at a bank counter, across a
     kitchen table, to an attorney with ten minutes.

     Three rules do most of the work:

     · THE FRONT SHEET IS ONE SHEET. Everything above the reference divider is
       sized to fit a single side, and the divider takes a hard page break so a
       forty-item plan behind it cannot push page one onto page two.
     · NOTHING IS TORN. A card, a ledger row and a status block each move whole.
       Half an instruction at the foot of a sheet is how a step gets missed.
     · A LOOSE SHEET SAYS WHAT IT IS. A running line repeats in the top margin
       of every page, because these sheets end up in a pile with four other
       pieces of paper.
     ═══════════════════════════════════════════════════════════════════ */

  /* Letter, because this product is United States only. The margins are set
     for a home printer's unprintable edge rather than for a press. */
  @page {
    size: letter;
    margin: 16mm 14mm 14mm 14mm;
  }

  .sb { max-width: none; padding: 0; }
  .sb-controls,
  .sb-open-answer,
  .hb-summary-edit,
  .hb-summary-hint { display: none !important; }

  /* NO RUNNING HEADER, AND THAT IS A DECISION.

     A repeated identity line in the page margin is the right idea for a
     document that gets split up and put down on a table. The only way to draw
     one from CSS is a fixed element offset into the margin, and Chrome places
     that inconsistently across page breaks — it landed on top of the first
     line of page three. A line that sometimes prints through the content is
     worse than no line, so the identity stays in the masthead, and the print
     dialogue's own header carries the rest. If this is worth having, it wants
     a real paged-media renderer rather than a hack that mostly works. */

  .sb-masthead { margin-bottom: 6mm; }
  .sb-mast-rule { border-bottom: 1pt solid #000; padding-bottom: 1mm; }
  .sb-wordmark { font-size: 10pt; }
  .sb-mast-meta { font-size: 8pt; color: #444; }
  .sb-title { font-size: 24pt; margin: 4mm 0 2mm; }
  .sb-standfirst { font-size: 9pt; color: #444; max-width: none; }

  .sb-situation { margin-top: 5mm; }
  .sb-situation-text {
    font-size: 15pt;
    line-height: 1.3;
    max-width: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .sb-block {
    margin-top: 5mm;
    padding-top: 2mm;
    border-top: 0.5pt solid #ccc;
  }
  .sb-h { font-size: 7.5pt; color: #555; margin-bottom: 2mm; }
  .sb-lede { font-size: 9pt; color: #333; max-width: none; }

  .hb-action-lead {
    border-left: 2pt solid #000;
    padding-left: 3mm;
    margin-bottom: 3mm;
  }
  .hb-action-lead .hb-action-title { font-size: 11.5pt; }

  /* A row moves whole, and a list of rows may break between them. */
  .sb-line,
  .sb-open-item,
  .sb-places-list dt,
  .sb-places-list dd { break-inside: avoid; page-break-inside: avoid; }
  .sb-line { padding: 1mm 0; border-bottom: 0.5pt solid #ddd; }
  .sb-line-title { font-size: 9.5pt; }
  .sb-line-note { font-size: 7.5pt; color: #555; }
  .sb-open-q { font-size: 9.5pt; }
  .sb-open-decides { font-size: 7.5pt; color: #555; }
  .sb-open-item { grid-template-columns: 1fr; padding: 1mm 0; border-bottom: 0.5pt solid #ddd; }

  /* Where you stand moves whole: a status and the sentence qualifying it are
     useless on separate sheets, and this block is the one a professional reads
     first. */
  .sb-standing { break-inside: avoid; page-break-inside: avoid; }
  .sb-status-mark { font-size: 7.5pt; border: 0.75pt solid currentColor; padding: 0.5mm 1.5mm; }
  .sb-standing-line { font-size: 10pt; max-width: none; }
  .sb-standing-proof,
  .sb-standing-holding { font-size: 8.5pt; max-width: none; }
  .sb-standing-scope { font-size: 8pt; color: #555; max-width: none; border-left: 0.5pt solid #bbb; }

  .sb-places-list dt,
  .sb-places-list dd { font-size: 9pt; padding: 1mm 0; border-bottom: 0.5pt solid #ddd; }
  .sb-place-assumed, .sb-place-note { font-size: 7.5pt; color: #555; }

  /* THE FRONT SHEET ENDS HERE.

     Without this the reference layer runs straight on from the front sheet and
     the document has no first page — just forty items with a summary on top,
     which is what it was before this pass. */
  .sb-divider {
    break-before: page;
    page-break-before: always;
    margin-top: 0;
    padding-top: 0;
    border-top: 1.5pt solid #000;
  }
  .sb-divider-h { font-size: 10pt; }
  .sb-divider-lede { font-size: 8.5pt; color: #555; max-width: none; }

  .sb-block > h2:not(.sb-h) { font-size: 12pt; }
  .sb-block > h2,
  .sb-h,
  .sb-divider-h { break-after: avoid; page-break-after: avoid; }

  /* The mark prints as a rule-bordered word rather than as green, because a
     home printer is grayscale often enough that colour cannot carry meaning. */
  .hb-action-sourced { color: #000; border-color: #666; font-size: 6.5pt; }
  .hb-claim { text-decoration-color: #666; }
  .hb-claim-mark { color: #333; font-size: 5.5pt; }
  .hb-source-claims li { color: #333; }

  .sb-pro-list dt, .sb-pro-list dd { font-size: 8.5pt; padding: 0.8mm 0; border-bottom: 0.5pt solid #ddd; }
  .sb-pro-list { grid-template-columns: minmax(38%, 1fr) 1fr; }
  .sb-pro-foot { font-size: 8pt; color: #444; max-width: none; }
  .sb-foot { display: block; font-size: 7.5pt; color: #555; }

  /* Everything that is a control on screen is noise on paper. */
  .hb-nav,
  .hb-result-nav,
  .hb-progress,
  .hb-summary-hint,
  .hb-summary-edit,
  /* The keep block is a button and a URL: a control on screen, and on paper
     an instruction to click something that is not there. The printed sheet
     carries the build date in its own header instead. */
  .hb-keep,
  .hb-note { display: none !important; }
  /* The count strip survives print — it is the one thing on the sheet that
     says how much of this is urgent — but the accent colour does not. */
  .hb-glance {
    gap: 1.4rem;
    border-top: 1pt solid #999;
    padding-top: 0.4rem;
    margin-top: 0.6rem;
  }
  .hb-glance-n { color: #000; font-size: 14pt; }
  .hb-glance-label { font-size: 8pt; }
  .hb-glance-lede { font-size: 10.5pt; }
  /* The strip, not the section under it: the readback runs to twenty
     questions and cannot fit on a page, so asking it not to break costs a
     blank page one and breaks it anyway. */
  .hb-glance { break-inside: avoid; page-break-inside: avoid; }
  .hb-plan { max-width: none; padding: 0; }
  .hb-result section { margin-top: 1.1rem; }
  .hb-print-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1pt solid #000;
    padding-bottom: 0.3rem;
    margin-bottom: 1rem;
    font-family: var(--font-ui);
  }
  .hb-print-title { font-size: 11pt; letter-spacing: 0.04em; }
  .hb-print-meta { font-size: 9pt; }
  .hb-print-foot {
    display: block;
    margin-top: 1.5rem;
    padding-top: 0.3rem;
    border-top: 1pt solid #999;
    font-family: var(--font-ui);
    font-size: 8pt;
  }
  /* The readback, compacted.
     On screen it is a generous list somebody scans and edits. On paper it was
     twenty questions over two and a half sheets before a single instruction —
     a reader holding the plan does not need their own answers set at reading
     size, they need them present so the sheet can be checked against the
     situation it was built for. Two columns, tight, and the question above its
     answer rather than beside it. */
  .hb-summary-list {
    column-count: 2;
    column-gap: 1.4rem;
    font-size: 9pt;
  }
  .hb-summary-list dt {
    padding-top: 0.35rem;
    font-size: 7.5pt;
    break-after: avoid;
    page-break-after: avoid;
  }
  .hb-summary-list dd {
    margin: 0 0 0.35rem;
    padding-bottom: 0.35rem;
    break-inside: avoid;
    page-break-inside: avoid;
    display: block;
  }
  /* The personalised glossary ran to five sheets at reading size and reading
     measure — a dictionary appended to a plan. It is a reference somebody
     checks a word in, not a chapter, so on paper it is set in two columns at
     8.5pt. The definitions are unchanged; only the setting is. */
  .hb-glossary-list {
    column-count: 2;
    column-gap: 1.4rem;
    font-size: 8.5pt;
  }
  .hb-glossary-list dt { margin-top: 0.3rem; break-after: avoid; page-break-after: avoid; }
  .hb-glossary-list dd { margin: 0; break-inside: avoid; page-break-inside: avoid; }
  .hb-resource-list { column-count: 2; column-gap: 1.4rem; font-size: 9pt; }
  .hb-resource-list li { break-inside: avoid; page-break-inside: avoid; }
  .hb-result h1 { font-size: 20pt; }
  .hb-result h2 { font-size: 13pt; }
  .hb-action-title { font-size: 11pt; }
  /* An item must not be split across a page break: half an instruction at the
     foot of a sheet is how a step gets missed. */
  .hb-action { break-inside: avoid; page-break-inside: avoid; }
  .hb-bucket { break-inside: auto; page-break-inside: auto; }
  /* The blocks inside a card, for the case the card itself cannot cover. A
     card avoids breaking, so on today's eight fixture plans none of these is
     ever torn — measured, not assumed. But an action taller than a sheet MUST
     break somewhere, and then the browser is free to break in the middle of a
     Have-ready list or between a state note's first and second line. These say
     where not to: a four-item list of what to bring and a one-paragraph state
     qualification are each small enough to move whole, and each is useless in
     halves. Nothing is asked of the resource list as a block, only of its
     items, for the same reason .hb-bucket is left alone above. */
  .hb-action-docs,
  .hb-action-doclist,
  .hb-action-state,
  .hb-action-object,
  .hb-action-who,
  .hb-exec,
  .hb-action-requires { break-inside: avoid; page-break-inside: avoid; }
  /* THE BLOCK PRINTS, AND THE CONTROLS DO NOT.
     Print is the surface this product got wrong once: a fee the screen had
     refused to state was still under "Cost" on the page somebody carried to a
     counter. The rule now is trust parity — whatever the screen withholds,
     the sheet withholds, which is guaranteed upstream because the withheld
     value is not in the payload at all. What is removed here is only what
     paper cannot use: a county picker and a report button. */
  .hb-exec { border-left: 1pt solid #000; color: #000; }
  .hb-exec-report,
  .hb-exec-select,
  .hb-exec-label,
  .hb-exec-ask { display: none !important; }
  /* What to gather is the page somebody tears off and takes with them, so it
     must not be split across a fold. */
  .hb-gather { break-inside: avoid; page-break-inside: avoid; }
  .hb-gather-lede { font-size: 10pt; }
  .hb-gather-doc { font-size: 10.5pt; }
  .hb-gather-for { font-size: 9pt; }
  /* A heading must not be the last thing on a sheet. h2 was covered and h3
     was not, which is where the plan actually strands them: "Order certified
     copies of the death certificate" printed at the foot of a page with the
     instruction overleaf. An action title is a heading for this purpose too. */
  .hb-result h2,
  .hb-result h3,
  .hb-action-title,
  .hb-bucket > h3,
  .hb-priority-group > h3 { break-after: avoid; page-break-after: avoid; }
  .hb-action {
    border: 0;
    border-left: 2pt solid #000;
    border-radius: 0;
    padding: 0 0 0 0.6rem;
    margin-bottom: 0.5rem;
  }
  .hb-action-can-wait { border-left-color: #999; }
  /* A link is unreachable on paper, so it is printed as its address.
     The rule used to prefix every one with "sahvelo.com", which is right for
     the Sahvelo pages a plan links to and wrong for the official ones it also
     links to — the FTC's Funeral Rule page printed as
     "(sahvelo.comhttps://consumer.ftc.gov/…)", which is not an address
     anybody can type. An absolute URL prints as itself; a root-relative one
     gets the host it is relative to. */
  .hb-resource-list a::after,
  .hb-action-guide a::after {
    content: " (sahvelo.com" attr(href) ")";
    font-size: 8pt;
  }
  .hb-resource-list a[href^="http"]::after,
  .hb-action-guide a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
  .hb-glossary-list dt a::after { content: ""; }
}
@page { margin: 16mm 14mm; }
/* ═══════════════════════════════════════════════════════════════════════
   Typography specimen (/design-typography.html) — internal review only

   A page that shows the type system rather than using it. Every rule here is
   layout for the specimen; none of it changes how the site renders. It exists
   because heading, body and product typography cannot be judged from eight
   screenshots taken on eight different pages.
   ═══════════════════════════════════════════════════════════════════════ */

.spec-rows { margin-top: var(--space-5); }
.spec-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 56rem) {
  .spec-row { grid-template-columns: 13rem 1fr; gap: var(--space-4); align-items: baseline; }
}
.spec-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink);
  margin: 0;
}
.spec-note {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin-top: 0.2rem;
}
.spec-sample > * { margin: 0; }
.spec-wordmark {
  font-family: var(--font-wordmark);
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.spec-body { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--ink); }
.spec-control { font-family: var(--font-ui); font-size: 1rem; color: var(--ink); }
.spec-meta { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); }
.spec-mono { font-family: var(--font-code); font-size: 0.8125rem; color: var(--ink-soft); }
.page-spec table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.page-spec table th,
.page-spec table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.page-spec table code { font-size: 0.8125rem; }

/* ── The Handbook plan's new parts ─────────────────────────────────────────
   Prerequisites, documents, official resources and the "not yet" section.
   Each is quiet on screen and survives print, because the plan's most likely
   destination is a kitchen table.
   ───────────────────────────────────────────────────────────────────────── */

.hb-action-requires,
.hb-action-resources {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: var(--space-1) 0 0;
}

.hb-action-requires { color: var(--ink-soft); }

.hb-action-docs {
  margin-top: var(--space-1);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
}

.hb-action-doclist {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.hb-action-doclist li { padding-left: 0.9rem; position: relative; }
.hb-action-doclist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.35rem;
  height: 1px;
  background: var(--rule-strong);
}

/* An external destination says so. A reader clicking away from a page that
   told them something should know they have. */
.hb-external::after {
  content: "\2197";
  font-size: 0.8em;
  margin-left: 0.15em;
  color: var(--ink-mute);
}

/* "Not yet" is an answer, not a leftover, so it reads as a section rather
   than as the bottom of a list. */
.hb-notyet {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}

.hb-notyet-lede {
  font-size: 0.9375rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-2);
}

.hb-action-not-yet { border-left-color: var(--rule); background: var(--paper-soft); }

@media print {
  .hb-action-requires,
  .hb-action-docs,
  .hb-action-resources { font-size: 8.5pt; }
  .hb-action-doclist { margin-top: 0.15rem; }
  .hb-notyet { break-inside: avoid; page-break-inside: avoid; }
  /* On paper an arrow means nothing; the address is printed instead by the
     rule that already prints every link's href. */
  .hb-external::after { content: ""; }
  .hb-action-resources a::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    word-break: break-all;
  }
}

.hb-priority-group { margin-top: var(--space-3); }
.hb-priority-group:first-of-type { margin-top: var(--space-2); }
.hb-priority-group > h3 {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--space-1);
}
/* NOT break-inside: avoid. A group with eleven actions in it cannot avoid a
   break, so the browser pushes the whole group to a fresh page and breaks it
   there anyway — costing a blank page and gaining nothing. The unit that must
   not split is the action, and that rule is on .hb-action. */
@media print { .hb-priority-group > h3 { break-after: avoid; page-break-after: avoid; } }

/* ═══════════════════════════════════════════════════════════════════════
   The named forms index (/tools/forms/)

   A reader arriving here has a form number and nothing else. So the number is
   the first thing on every row, in the one place the eye can scan down.
   ═══════════════════════════════════════════════════════════════════════ */

.forms-count,
.forms-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
}

.forms-count { margin: var(--space-3) 0 var(--space-4); }
.forms-note {
  margin-top: var(--space-5);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-2);
}

.forms-group { margin-bottom: var(--space-4); }

.forms-group h2 {
  font-size: 1.125rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.forms-group-guide {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 400;
}

.forms-list { list-style: none; margin: 0; padding: 0; }

/* `display: grid` beats the browser's default `[hidden] { display: none }`,
   so a filtered-out row stayed on screen while the count said it had gone.
   Any rule that sets display on a filterable element owes this one. */
.forms-row[hidden],
.forms-group[hidden] { display: none; }

.forms-row {
  display: grid;
  gap: 0.15rem 0.9rem;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 44rem) {
  .forms-row { grid-template-columns: 9rem 1fr 12rem; align-items: baseline; }
}

.forms-number {
  font-family: var(--font-code);
  font-size: 0.9375rem;
  color: var(--ink);
}

.forms-what {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.forms-link { font-family: var(--font-ui); font-size: 0.8125rem; }

.forms-official::after {
  content: "\2197";
  font-size: 0.85em;
  margin-left: 0.15em;
  color: var(--ink-mute);
}

/* Where the binding is by proximity rather than by the URL naming the form,
   the page says which it is. A qualified link is worth more than a confident
   wrong one. */
.forms-caveat {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-mute);
}

.forms-nolink { color: var(--ink-mute); font-style: italic; }

/* ── Comparison tables on concept pages ───────────────────────────────────
   The clearest thing a page about two easily-confused ideas can carry. Wide
   content scrolls inside its own container so the page body never does.
   ───────────────────────────────────────────────────────────────────────── */

.gloss-compare-scroll {
  overflow-x: auto;
  margin: var(--space-2) 0;
  -webkit-overflow-scrolling: touch;
}

.gloss-compare {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}

.gloss-compare th,
.gloss-compare td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.gloss-compare thead th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--rule-strong);
}

.gloss-compare tbody th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  padding-right: 1.2rem;
}

.gloss-compare tbody td { color: var(--ink-soft); }
.gloss-compare tbody tr:last-child th,
.gloss-compare tbody tr:last-child td { border-bottom: 0; }

.gloss-compare-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
}

@media print {
  .gloss-compare-scroll { overflow: visible; }
  .gloss-compare { min-width: 0; font-size: 9pt; break-inside: avoid; }
}

/* ── Where to go from a concept page ─────────────────────────────────────
   A page that only links to other concept pages is a dictionary. A reader who
   has just understood a word should be able to act on it, so every concept
   page ends pointing back into the product.
   ───────────────────────────────────────────────────────────────────────── */

.gloss-next {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

.gloss-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 46rem) {
  .gloss-next-list { grid-template-columns: repeat(2, 1fr); }
}

.gloss-next-list a {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.gloss-next-list a:hover,
.gloss-next-list a:focus-visible { border-color: var(--rule-strong); border-left-color: var(--accent); }

.gloss-next-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

.gloss-next-list a:hover .gloss-next-label { color: var(--accent); }

.gloss-next-note {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

@media print { .gloss-next { display: none; } }

/* ── Sequences on concept pages ───────────────────────────────────────────
   The other shape a concept can take. A comparison answers "which of these
   two is mine"; a sequence answers "what happens, and in what order" — which
   is the question a reader has about probate, about a claim period, and about
   anything with a clock on it. Each step says what starts it, because a step
   with no trigger is a bullet point wearing a timeline's clothes.
   ───────────────────────────────────────────────────────────────────────── */

.gloss-seq {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0 0 0 1.35rem;
  border-left: 1px solid var(--rule);
}

.gloss-seq-step {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0 0 var(--space-2) 0;
}

.gloss-seq-step:last-child { padding-bottom: 0; }

.gloss-seq-step::before {
  content: "";
  position: absolute;
  left: -1.72rem;
  top: 0.45rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--rule-strong);
}

.gloss-seq-when {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.gloss-seq-what {
  font-family: var(--font-body);
  color: var(--ink);
}

.gloss-seq-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

@media print {
  .gloss-seq-step { break-inside: avoid; }
}

/* ── Official sources on concept pages ────────────────────────────────────
   Where one authority governs, the page says which and links it. Most
   concepts have no single one — "executor" is fifty probate codes — and those
   pages carry no such section rather than a section with a secondary source
   under a heading that says official.
   ───────────────────────────────────────────────────────────────────────── */

.gloss-sources-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
}

.gloss-sources {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.gloss-sources > li {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}

.gloss-source-note {
  display: block;
  color: var(--ink-mute);
  font-size: 0.875rem;
}

@media print {
  .gloss-sources a::after { content: " (" attr(href) ")"; font-size: 8pt; }
}


/* ─────────────────────────────────────────────────────────────────────
   GUIDANCE — the homepage entry, and the mode it opens into
   ─────────────────────────────────────────────────────────────────────
   Nothing here is a chat interface. No bubbles, no alternating alignment,
   no avatars, no bottom-right anything, no sparkle of any kind. The
   transcript is a document: the question is set in the display face with a
   short rule over it, the answer is a set of labelled groups at the reading
   measure, and the sequence runs down the page in the order it happened.

   Two colors carry meaning and they are the two this system already has.
   The signature green marks what is released and ready — the rail on the
   first group of actions, and the question Sahvelo asks back, because
   asking is the product working. The atmospheric blue means orientation,
   which is what "what would change this" is. A refusal takes neither: it
   is not an error, and coloring it like one would be the product
   apologizing for the thing it is proudest of.

   The one structural idea: INFORMATION ABOVE, INPUT BELOW. The composer is
   anchored at the foot of the viewport for the whole conversation, at every
   width, so the reader never hunts for the way to say the next thing.
   ───────────────────────────────────────────────────────────────────── */

/* ── The entry, in the hero ─────────────────────────────────────────── */

/* ── The clearing, as the guidance surface ───────────────────────────
   The prompt and the exchange are the SAME clearing. Not a compact card
   that is replaced by a transcript: one construction, holding two amounts
   of content.

   THE PLANES ARE ANCHORED AND THE ROOM IS NOT. The grid's outer columns
   never change between the two states, so the two chestnut edges stay
   exactly where the reader last saw them. The middle cell is `auto`. A
   transcript is taller than a prompt, so the room between the planes opens
   — because that is what a grid does, not because anything measured it.

   The planes are EDGES here rather than fields. The mark's own planes are
   wider than the slot between them, which is right for a symbol and wrong
   for a surface that has to hold a conversation. What carries over is the
   construction: two planes, offset on both axes, content in the
   intersection. The aspect ratio does not carry over and never did.

   There is one transition and it is on the rows, so what moves is the
   amount of room. Under reduced motion there is none, and the surface is
   already correct without it.                                            */

/* The guide's geometry is declared once, because two elements depend on it:
   the clearing, and the composer that is fixed outside the clearing and has
   to line up with the room inside it. A composer whose input starts on a
   different line than the transcript is the surface admitting it is two
   things stuck together. */
:root {
  --guide-lead: clamp(0.625rem, 1.6vw, 1.25rem);
  --guide-trail: clamp(0.5rem, 1.2vw, 0.9375rem);
  --guide-pad: clamp(1.15rem, 2.6vw, 2.1rem);
  /* The room plus its planes. Wider than a reading measure, because the room
     holds groups and lists as well as prose, and narrower than the page,
     because a transcript that spans a desktop is not a document. */
  --guide-canvas: 60rem;
}

.clearing-guide {
  --clearing-lead: var(--guide-lead);
  --clearing-trail: var(--guide-trail);
  --clearing-rise: clamp(1rem, 2.4vw, 1.75rem);
  --clearing-fall: clamp(0.75rem, 2vw, 1.375rem);
  max-width: var(--guide-canvas);
  /* The statement above it already carries the space between them. */
  margin-top: 0;
  transition: grid-template-rows 380ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .clearing-guide { transition: none; }
}
/* Top-aligned rather than centred. A centred room is right for one statement
   and wrong for a transcript: it would push the first turn down the screen
   every time a second turn arrived. */
.clearing-guide .clearing-room {
  justify-content: flex-start;
  padding: var(--guide-pad);
}
.clearing-guide .chat-entry { margin: 0; max-width: none; }
/* COMPACT, ELEGANT, QUIET (founder review, 2026-09-10). The two chestnut
   planes around the entry read as a heavy frame and made the field the
   loudest thing on the first screen. On the homepage the entry stands on the
   paper: the planes are not drawn and the room has no padding of its own.
   The grid, the room and the transcript behaviour are unchanged, so a
   conversation still opens in place. */
.page-home .clearing-guide {
  --clearing-lead: 0;
  --clearing-trail: 0;
  --clearing-rise: 0;
  --clearing-fall: 0;
}
.page-home .clearing-guide .clearing-plane { display: none; }
.page-home .clearing-guide .clearing-room { padding: 0; background: transparent; }

/* Open. The columns are untouched — that is the load-bearing property of the
   whole system, and a clearing whose planes slide sideways when you talk to
   it is an animation rather than a construction. Only the rows change. */
.chat-talking .clearing-guide {
  --clearing-rise: clamp(1.5rem, 3.4vw, 2.75rem);
  --clearing-fall: clamp(1rem, 2.4vw, 1.875rem);
}
/* The statement becomes a label when the conversation opens, so the space it
   was holding goes back to the room. */
.chat-talking .hero-copy { margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }
/* The browse column stands down with the rest of the page, so the row it was
   in stops reserving its width and the clearing takes the canvas. */
.chat-talking .hero-grid { grid-template-columns: minmax(0, 1fr); }

/* The composer sits outside the clearing and reads as part of it: same
   canvas, same inset, so the input starts exactly where the transcript does. */
.chat-talking .chat-composer .chat-form,
.chat-talking .chat-strip-row {
  max-width: var(--guide-canvas);
  padding-left: calc(var(--guide-lead) + var(--guide-pad));
  padding-right: calc(var(--guide-trail) + var(--guide-pad));
}

/* On a phone the transcript IS the section, and two chestnut rails down the
   sides of it cost reading width to say something the reader already knows.
   The lead goes to nothing and the room takes the page gutter, so the
   construction survives as a band above and a band below with one edge
   offset — and the answer gets the screen. This is the same rule the system
   states elsewhere: the clearing is for the one thing that matters, and in a
   live conversation the one thing that matters is the answer. */
/* On a phone the room's own padding competes with the field inside it: the
   prompt wrapped to a second line inside a one-line control. The construction
   is worth less than the field being readable, so the room gives the width
   back. */
@media (max-width: 48rem) {
  .clearing-guide { --guide-pad: 0.85rem; --guide-lead: 0.5rem; --guide-trail: 0.375rem; }
  /* And the field is two lines tall at rest, because the prompt is longer than
     one line of a 390px screen and half a sentence in a control is worse than
     a taller control. It also happens to say the true thing about what goes
     in here: a situation, not a search term. */
  .clearing-guide .chat-input { min-height: calc(var(--tap) + 2.7rem); }
}
@media (max-width: 48rem) {
  /* ON A PHONE, INSIDE A LIVE CONVERSATION, THE CLEARING IS NOT DRAWN.
     Not thinned. Not reduced to one rail. Absent.

     The first attempt kept a lead of zero and a trail of 6px, on the theory
     that the construction should survive in some reduced form. On a real
     390px screen that rail ran flush against the answer's own text and sat
     immediately beside the accent rail of an action group — two different
     meanings drawn the same way, which the interaction grammar forbids. It
     cost reading width and comprehension to say something the reader already
     knew.

     The device is still there at rest, where the room is small and it is the
     brand moment. It stands down the moment the room has work to do. An
     identity system that cannot be absent has stopped being about anything. */
  .chat-talking .clearing-guide {
    --clearing-lead: 0px;
    --clearing-trail: 0px;
  }
  .chat-talking .clearing-guide .clearing-plane { display: none; }
  .chat-talking .clearing-guide .clearing-room { padding-inline: 0; }
  .chat-talking .chat-composer .chat-form,
  .chat-talking .chat-strip-row { padding-left: 0; padding-right: 0; }
}


.chat-entry {
  margin: clamp(2rem, 1.4rem + 2.4vw, 3rem) 0 0;
  max-width: 44rem;
}
.chat-entry-heading {
  font-family: var(--font-ui);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: var(--track-flat);
  color: var(--ink);
  margin: 0 0 0.85rem;
}
/* What this is, said once above the question: Sahvelo's Guide, a
   conversation. The eyebrow is the site's own label voice. */
.chat-entry-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.45rem;
}
/* The entry, as a conversation (founder pass 4, 2026-09-10). The recess is
   the hero's second column: a shallow field of bone with the clearing
   mark's two corners just outside it. Inside stands one white surface that
   is unmistakably a conversation: Sahvelo speaks first, a field three
   lines deep waits for the reader, and the one action sits at its foot.
   Two examples on a desktop, none on a phone. Not a form, not a search
   box, not a widget. */
.page-home .hero-primary {
  position: relative;
  background: var(--paper-soft);
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  margin: 0.75rem 0 0 0.75rem;
}
.page-home .hero-primary::before,
.page-home .hero-primary::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 44%;
  height: 52%;
  border: 1px solid var(--accent-hairline);
}
.page-home .hero-primary::before { top: -0.75rem; left: -0.75rem; border-right: 0; border-bottom: 0; }
.page-home .hero-primary::after { bottom: -0.75rem; right: -0.75rem; border-left: 0; border-top: 0; }
.chat-talking .hero-primary { background: transparent; padding: 0; margin: 0; }
.chat-talking .hero-primary::before, .chat-talking .hero-primary::after { display: none; }
.page-home .chat-entry {
  position: relative;
  margin: 0;
  max-width: none;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1rem, 0.8rem + 0.8vw, 1.35rem);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
}
.chat-talking .chat-entry { background: transparent; border: 0; padding: 0; margin: 0; }
.page-home .chat-entry-eyebrow { color: var(--accent); margin-bottom: 0.45rem; display: flex; align-items: center; gap: 0.5rem; }
.chat-entry-mark { width: 0.85rem; height: auto; color: var(--accent); flex: none; }
.page-home .chat-entry-heading { color: var(--accent-deep); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); margin-bottom: 1rem; }
/* Sahvelo's first line: the mark, then the sentence, set the way a turn in
   the transcript is set, so the field beneath reads as the reply's place. */
.chat-opening {
  display: block;
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.chat-talking .chat-opening { display: none; }
.page-home .chat-input-row { border: 0; background: transparent; flex-direction: column; gap: 0.75rem; }
.page-home .chat-input-row:focus-within { outline: none; }
.page-home .chat-input {
  min-height: 6.25rem;
  padding: 0.85rem 1rem;
  font-size: 1.0625rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  transition: border-color 0.15s ease;
}
.page-home .chat-input:focus { border-color: var(--accent-deep); outline: 2px solid var(--accent); outline-offset: 2px; }
.page-home .chat-submit {
  align-self: flex-end;
  border: 0;
  border-left: 0;
  border-top: 0;
  width: auto;
  min-height: var(--tap);
  padding-inline: 1.35rem 1.15rem;
  background: var(--accent-deep);
}
/* The moment disclosure (founder review round 1, 2026-09-17): one quiet line
   under the field, at the moment the reader is about to rely on the answer.
   It was hidden on the homepage since the convergence pass; the trust line in
   the hero now carries the source promise, so this line carries only what is
   true of the conversation itself, and links to the rest. Meta size, ink-mute,
   no rule above it: it belongs to the field, not to the card. */
.page-home .chat-entry-note { font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-mute); max-width: 52ch; margin: 0.7rem 0 0; }
.page-home .chat-entry-note a { color: var(--accent-deep); }
.page-home .chat-starters { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.page-home .chat-starters-label { margin: 0 0.25rem 0 0; }
.page-home .chat-starters-list { display: contents; }
.page-home .chat-starters-list li { margin: 0; }
.page-home .chat-starter { border: 1px solid var(--rule); background: transparent; color: var(--ink-mute); font-size: 0.8125rem; padding: 0.35rem 0.65rem; min-height: 2.125rem; border-radius: 0; }
.page-home .chat-starter:hover, .page-home .chat-starter:focus-visible { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }
@media (max-width: 36rem) {
  .page-home .hero-primary { padding: 0.75rem; margin: 0.5rem 0.5rem 0; }
  .page-home .chat-entry { padding: 1.1rem 1rem 1rem; margin: 0; }
  /* Three examples on a phone too, as quiet as they can be. */
  .page-home .chat-starters { gap: 0.4rem 0.5rem; }
  .page-home .chat-starters-label { flex-basis: 100%; }
  .page-home .chat-input { min-height: 5.5rem; }
  .page-home .chat-submit { align-self: stretch; width: 100%; }
  .page-home .hero-primary::before { top: -0.5rem; left: -0.5rem; }
  .page-home .hero-primary::after { bottom: -0.5rem; right: -0.5rem; }
  /* Field above button. The placeholder is a sentence and it is never cut:
     the field holds two lines of it, and the button takes the full width
     beneath as a comfortable target (the button's rule sits with the base
     .chat-submit rule below). */
  .page-home .chat-input-row { flex-direction: column; }
  .page-home .chat-input-row .chat-input { min-height: 4.75rem; padding: 0.85rem 0.95rem; }
}
.page-home .chat-input { padding: 0.8rem 1rem; min-height: var(--tap); }
.page-home .chat-entry-note { font-size: 0.8125rem; max-width: 52ch; }
.page-home .chat-starters { margin-top: 1rem; }
/* One field. There is no button beside it saying what the technology is:
   the reader describes a situation and gets guidance, and labelling that
   "chat" is the product being proud of the wrong thing. */
.chat-input-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule-firm);
  background: var(--surface);
}
.chat-input-row:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  /* 16px exactly. Anything smaller and iOS zooms the page on focus, which
     on a phone throws the reader out of the layout they were reading. */
  font-size: 1.0625rem;
  line-height: 1.5;
  padding: 1.05rem 1.15rem;
  min-height: calc(var(--tap) + 1rem);
  resize: none;
  overflow-y: auto;
  max-height: 40vh;
}
.chat-input:focus { outline: none; }
.chat-input::placeholder { color: var(--ink-mute); }
/* The submit is an arrow, not a word. It carries a real label for anyone
   who cannot see it; on screen it is the smallest thing that can be a
   44px target, because the Enter key is what most people will use. */
.chat-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--rule-firm);
  background: var(--ink);
  color: var(--paper);
  padding-inline: clamp(0.9rem, 0.5rem + 1.2vw, 1.35rem);
  min-height: var(--tap);
  min-width: var(--tap);
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.15s ease;
}
.chat-submit:hover, .chat-submit:focus-visible { background: var(--accent-deep); }
.chat-submit[disabled] { background: var(--ink-mute); cursor: default; }
/* On the homepage the one filled action is the accent's deep brown. */
.page-home .chat-submit { background: var(--accent-deep); border-left-color: var(--accent-deep); }
.page-home .chat-input-row:focus-within { outline-color: var(--accent); }
.page-home .chat-submit:hover, .page-home .chat-submit:focus-visible { background: var(--accent); }
@media (max-width: 36rem) {
  .page-home .chat-submit { border-left: 0; border-top: 1px solid var(--rule-firm); width: 100%; min-height: max(var(--tap), 48px); }
}
@media (prefers-reduced-motion: reduce) { .chat-submit { transition: none; } }
.chat-submit-label { font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.chat-submit-label + .chat-submit-mark { margin-left: 0.55rem; width: 0.9rem; height: 0.9rem; }
.chat-submit-mark {
  width: 1.125rem;
  height: 1.125rem;
  background: currentColor;
  /* A plain arrow. Not a paper plane, not a sparkle, not a robot. */
  clip-path: polygon(0 42%, 62% 42%, 42% 14%, 56% 2%, 100% 50%, 56% 98%, 42% 86%, 62% 58%, 0 58%);
}

.chat-entry-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0.85rem 0 0;
  max-width: 58ch;
}

/* Starters. Not a menu of features — four things a person actually types,
   each with a different answer shape behind it, so the first thing they
   try tells them the truth about the product. */
.chat-starters { margin: 1.35rem 0 0; }
.chat-starters-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-mute);
  margin: 0 0 0.6rem;
}
.chat-starters-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* A CHOICE IS PRESSED. IT IS NOT A FIELD.
   ─────────────────────────────────────────────────────────────────────────
   These were drawn `background: var(--surface); border: 1px solid
   var(--rule-strong)`, which is, to the pixel, how .ask-input and every
   other text field on this site was drawn. A white well with a soft grey
   edge is the universal sign for "type in me", and it was carrying four
   different jobs: the ask field, the state select, the chat starters and
   every Handbook option. That is the third non-negotiable, and it is a rule
   because breaking it once already cost a real reader a real mistake.

     a field   → white fill, a boundary you can see   ("put something here")
     a choice  → page ground, a firm edge             ("press me")

   Reaching for a choice fills it toward the ink rather than tinting it,
   which is the direction .button-secondary inverts in, one step short. */
.chat-starter, .chat-option {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-firm);
  border-radius: 0;
  padding: 0.6rem 0.85rem;
  min-height: var(--tap);
  cursor: pointer;
}
.chat-starter:hover, .chat-starter:focus-visible,
.chat-option:hover, .chat-option:focus-visible { background: var(--paper-deep); color: var(--ink); }

/* ── The second way in ──────────────────────────────────────────────── */

/* Deliberately not the equal of the first. A line of links, no panel and
   no button: a reader who would rather look around can, and a reader who
   would rather describe their situation is not made to choose between two
   things that look equally important. */
.hero-browse {
  margin: 0;
  padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  border-top: 1px solid var(--rule);
  max-width: 52rem;
}
.hero-browse-heading {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--track-flat);
  color: var(--ink);
  margin: 0;
}
.hero-browse-lede {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0.3rem 0 0.9rem;
}
.hero-browse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
}
.hero-browse-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hero-browse-list a:hover, .hero-browse-list a:focus-visible { border-bottom-color: var(--accent); }

/* ── The hero compresses; it does not disappear ─────────────────────── */

/* The reader keeps their sense of place, which is the entire reason this
   is not a modal and not a separate app. The headline becomes a label, the
   rest of the page stands down, and Start over puts all of it back. */
.chat-talking .hero-home { padding-bottom: 0; }
.chat-talking .hero-home .wrap { padding-bottom: 0; border-bottom: 0; }
.chat-talking .hero-home h1 {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--track-flat);
  color: var(--ink-mute);
  max-width: none;
  margin: 0;
}
.chat-talking .hero-lede,
.chat-talking .hero-browse,
.chat-talking .chat-entry-note,
.chat-talking .chat-starters,
.chat-talking .chat-entry-heading,
.chat-talking .worlds,
.chat-talking .live-topics,
.chat-talking .trust,
.chat-talking .briefings-signup,
.chat-talking .home-areas,
.chat-talking .home-world,
.chat-talking .home-latest,
.chat-talking .home-handbook { display: none; }
.chat-talking .chat-entry { margin: 0; max-width: none; }
/* Room for the anchored composer, so the footer's last line is readable
   rather than permanently behind it. */
.chat-talking { padding-bottom: 10rem; }

/* ── The strip above the composer ───────────────────────────────────── */

/* It lives above the input rather than in a bar under the navigation for one
   reason: a bar at the top scrolls away and takes the jurisdiction with it.
   Which state an answer is for is the most load-bearing fact about it on
   this site, and it belongs where the reader is looking when they type. */
.chat-where-state {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: var(--track-flat);
}
.chat-where-state::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.8125rem;
  background: var(--accent);
  margin-right: 0.4rem;
  vertical-align: -1px;
}
.chat-restart {
  /* On the doors' own line, not centered against the sentence under them. */
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0 0 1px;
  min-height: var(--tap);
  margin-left: auto;
  cursor: pointer;
}
.chat-restart:hover, .chat-restart:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* ── The two doors out of the conversation ──────────────────────────
   Drawn exactly like "Start over", because they are the same KIND of thing:
   a quiet way out that is always there and never asks twice. The moment one
   of them is given a button's weight it becomes a conversion CTA competing
   with the answer, which is the thing Part 13 of the brief forbids. They sit
   left of "Start over" and wrap onto their own line on a phone. */
.chat-offer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.2rem 1rem;
  min-width: 0;
  max-width: 100%;
}
/* ── THE SENTENCE BELONGS TO ONE DOOR ───────────────────────────────
   "Turn this conversation into a practical plan you can save and use"
   describes the Handbook. It was appended after BOTH links and spanned the
   row, so it read as a caption for the pair and appeared to describe
   "Browse the guidance", which does nothing of the sort.
   The Handbook link and its sentence are now one element, the sentence
   directly under its own link at the link's own width; Browse sits beside
   them as the separate action it is. Neither gains a button's weight: they
   are still two quiet doors, which is what the block above this one is for. */
.chat-offer-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}
/* THE SENTENCE IS NO LONGER A ROW, SO IT MUST NOT BE LAID OUT LIKE ONE.
   `.chat-offer-why` carries `flex: 1 0 100%` and `contain: inline-size`,
   both correct while it spanned the offer row: containment took its length
   out of that row's intrinsic width so it wrapped at the doors' width
   instead of setting it.
   Inside this column both are actively wrong, and production said so before
   a reader did — the element measured 1117px tall, the sentence wrapping at
   roughly one character per line, because containment left it resolving
   against no inline size at all. The basis would also be a HEIGHT here.
   So: no containment, no row basis, and a real measure for the sentence to
   wrap inside. */
.chat-offer-primary .chat-offer-why {
  contain: none;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  max-width: 34ch;
}
.chat-offer-primary { max-width: 34ch; }
.chat-offer a {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 0 1px;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.chat-offer a:hover, .chat-offer a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
/* THE WAY OUT IS NOT DRAWN LIKE THE WAY ON.
   "Build my personalized handbook" and "Browse the guidance" are doors.
   "Start chat over" discards the conversation, which no account can restore.
   All three shipped at 15px, --ink-mute, underlined, 44px tall: identical to
   the pixel. SAHVELO-INTERACTION-GRAMMAR.md exists because an escape drawn
   like something else cost a real reader a real mistake, so the destructive
   one gets its own line, below a rule, and is quieter than the doors above
   it. It also arms before it fires — see chat.js. */
.chat-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; max-width: 100%; }

/* ── THE ONE ACTION ROW UNDER THE FIELD ─────────────────────────────
   Founder decision, 2026-09-25, and it supersedes the placement above while
   keeping the rule that produced it.

   The composer is fixed to the foot of the viewport for the whole
   conversation, so every row it carries is a row taken from the answer
   somebody is reading. It carried "Start chat over" on a line of its own up
   beside the chips, and "Send" on another line under the field: two
   controls, two rows, empty ground between them, and 386px of an 800px
   laptop viewport gone before a word of the answer.

   They do the same job — what you do when you have finished typing — so they
   share one row directly under the field, the escape at the left and the
   primary action at the right.

   WHAT DOES NOT CHANGE IS WHY THE ESCAPE WAS SEPARATED IN THE FIRST PLACE.
   "Start chat over" discards a conversation no account can restore. It stays
   a quiet underlined text control at 13px against a filled Send, it keeps its
   44px target, and it still ARMS BEFORE IT FIRES (chat.js). Sharing a row is
   not being drawn the same: the two are still told apart at a glance, which
   is all SAHVELO-INTERACTION-GRAMMAR.md ever asked for. */
.chat-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.55rem;
}
/* Out of .chat-controls, so the full-width rule that gave it its own line no
   longer reaches it. Stated anyway: this row is the one place it must not
   claim the whole line. */
.chat-form-actions .chat-restart {
  flex: 0 1 auto;
  width: auto;
  margin: 0;
  align-self: center;
}
.chat-form-actions .chat-submit { flex: 0 0 auto; margin-left: auto; }
/* The container keeps wrapping its doors as it always did — making it a
   column collapsed .chat-offer to min-content and set the sentence beside it
   one character per line at 390px. The break comes from the restart taking a
   whole flex line instead, which also makes the rule span the block rather
   than being a line as wide as its own words. */
.chat-controls .chat-restart {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  text-align: left;
  color: var(--ink-mute);
}
.chat-controls .chat-restart:hover,
.chat-controls .chat-restart:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
/* Armed: it has been pressed once and is now stating what the next press
   does. Still no fill and no button weight — this is a warning, not a CTA. */
.chat-restart[data-armed] { color: var(--warn); text-decoration-color: currentColor; font-weight: 600; }

/* ── The transcript ─────────────────────────────────────────────────── */

/* Enough room that a two-line answer does not leave the composer sitting
   directly under it with a screen of footer behind. */
.chat-conversation { padding: 0; }
/* Enough room that a two-line answer does not leave the site footer sitting
   between the conversation and the composer. A footer arriving mid-thought
   reads as the page having ended. */
.chat-talking .chat-conversation { min-height: calc(100dvh - 24rem); }
/* A comfortable reading canvas, not a narrow column floating in a wide
   window. The prose inside keeps its own measure; the groups use the room. */
.chat-thread { max-width: 54rem; padding-block: clamp(0.5rem, 1vw, 1rem) 0; }

.chat-turn { padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) 0; border-top: 1px solid var(--rule); }
.chat-thread > .chat-turn:first-child { border-top: 0; }

/* What the reader said, in the editorial face — the one place on this
   surface the serif is used, because the question is what the turn is
   about. The short rule above it does an avatar's job without pretending
   to be a person. */
.chat-said {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  line-height: 1.38;
  letter-spacing: var(--track-display);
  color: var(--ink);
  max-width: 34ch;
}
.chat-said::before {
  content: "";
  display: block;
  width: 1.625rem;
  border-top: 2px solid var(--rule-firm);
  margin-bottom: 0.9rem;
}
.chat-said p { margin: 0; }

.chat-turn-context {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.6rem 0 0;
}
.chat-turn-context-page { color: var(--ink-soft); }

.chat-pending {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 1.25rem 0 0;
}

.chat-reply { margin: 1.35rem 0 0; }
.chat-prose {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 40rem;
}
.chat-prose p { margin: 0; }
.chat-prose p + p { margin-top: 0.85rem; }

/* ── The question Sahvelo asks back ─────────────────────────────────── */

/* On the green, because asking is the product working rather than the
   product failing. The "why" line under it is the whole difference between
   a system working something out and a form processing you. */
.chat-reply > .chat-block + .chat-ask { margin-top: 1.5rem; }
.chat-ask-q {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.chat-ask-why {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
  max-width: 52ch;
}
.chat-ask-options { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── The groups ─────────────────────────────────────────────────────── */

.chat-block { margin: 1.75rem 0 0; max-width: 44rem; }
.chat-reply > .chat-block:first-child { margin-top: 0; }
.chat-block-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-mute);
  margin: 0 0 0.65rem;
}

/* The standing rail, saying here what it says in the Handbook: the first
   group is ready now, and what follows is released in order. */
.chat-steps-list { list-style: none; margin: 0; padding: 0; }
.chat-steps-list > li {
  position: relative;
  border-top: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  padding: 0.85rem 0 0.85rem var(--space-2);
}
.chat-step-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: var(--track-flat);
  color: var(--ink);
  text-decoration: none;
}
a.chat-step-title { border-bottom: 1px solid var(--rule-strong); display: inline; }
a.chat-step-title:hover, a.chat-step-title:focus-visible { border-bottom-color: var(--accent); }
/* The row is the target, not the underlined words: the anchor's own box is
   a line of text and the row it names is more than three times that. */
.chat-steps-list > li a.chat-step-title::after { content: ""; position: absolute; inset: 0; }
.chat-step-timing {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin-top: 0.2rem;
}
.chat-step-revealed { animation: none; }

.chat-more:hover, .chat-more:focus-visible { border-bottom-color: var(--accent); }
.chat-more-rest { margin: 0.85rem 0 0; font-family: var(--font-ui); font-size: 0.875rem; }

/* What would change this. On the atmospheric blue, which means orientation
   everywhere else in this system — because that is what it is. This is the
   section a search engine cannot produce: it requires knowing what was
   assumed in order to say what would break it. */
.chat-block-changes {
  padding: 1rem 1.15rem;
  background: var(--air-wash);
  border-left: 3px solid var(--air);
}
.chat-block-changes .chat-block-label { color: var(--air); }
.chat-block-changes .chat-prose {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.chat-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.chat-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.chat-link:hover, .chat-link:focus-visible { border-bottom-color: var(--accent); }

.chat-note {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 1.5rem 0 0;
  padding: 0.95rem 1.15rem;
  max-width: 44rem;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border-left: 3px solid var(--ink-mute);
}
.chat-note p { margin: 0; }
.chat-note-action { margin-top: 0.6rem; }
.chat-note-link { color: var(--accent); }

/* The detour, in its place in the sequence. */
.chat-turn-visit { padding-block: 1rem; }
.chat-visit { font-family: var(--font-ui); font-size: 0.875rem; color: var(--ink-mute); margin: 0; }
.chat-visit-link { color: var(--ink-soft); }

/* Local review diagnostics. public/chat.js renders these on a loopback or
   a Codespaces host and nowhere else. */
.chat-diag {
  margin: 1.5rem 0 0;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--rule-strong);
}
.chat-diag b { font-weight: 400; color: var(--ink-soft); }
.chat-diag-flag { color: var(--warn); }

/* ── The composer: INPUT BELOW ──────────────────────────────────────── */

/* Anchored at the foot of the viewport for the whole conversation, at
   every width. It was in the flow on desktop and sticky on phones, which
   meant the reader hunted for it at exactly the moment they knew what they
   wanted to say next. It is not the floating widget this design refuses:
   it exists only in guidance mode, it spans the page rather than hovering
   in a corner, and it is the composer of the document the reader is in. */
.chat-composer { max-width: none; }
.chat-talking .chat-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding-block: 0.85rem calc(0.85rem + env(safe-area-inset-bottom));
}
/* The composer aligns with the transcript, not with the viewport.
   Overriding .wrap-wide's own max-width here re-centred the whole strip, so
   the input sat in the middle of the page while the conversation above it
   started at the left margin. The wrap keeps its width; the form inside takes
   the reading canvas. */
.chat-composer .chat-form,
.chat-talking .chat-composer .chat-form { margin: 0; }

.chat-context-page { color: var(--accent); }
.chat-context-drop {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0 0 1px;
  cursor: pointer;
}
.chat-context-drop:hover, .chat-context-drop:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* ── The way back, in the header ────────────────────────────────────── */

.chat-resume {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  letter-spacing: var(--track-flat);
  color: var(--accent);
  text-decoration: none;
  min-height: var(--tap);
}
.chat-resume[hidden] { display: none; }
.chat-resume-mark { width: 3px; height: 0.9375rem; background: var(--accent); flex: 0 0 auto; }
.chat-resume-long, .chat-resume-short { white-space: nowrap; }
.chat-resume-short { display: none; }
.chat-resume:hover .chat-resume-long,
.chat-resume:focus-visible .chat-resume-long { border-bottom: 1px solid var(--accent); }

/* ── Narrow ─────────────────────────────────────────────────────────── */

@media (max-width: 46.25rem) {
  .chat-entry { margin-top: 1.75rem; }
  .chat-thread, .chat-composer .chat-form, .chat-strip, .chat-strip-row { max-width: none; }
  .chat-block, .chat-ask, .chat-prose, .chat-ack, .chat-note { max-width: none; }
  .chat-said { max-width: none; }
  .chat-starters-list { display: grid; gap: 0.45rem; }
  .chat-starter { width: 100%; }
  .chat-ask-options { display: grid; }
  .chat-option { width: 100%; }
  .hero-browse-list { display: grid; gap: 0; }
  /* The short label, not no label. A green bar with nothing to say what it
     is reads as decoration; the header already solves this for the Handbook
     action with a long form and a short one, so this uses the same device.
     order 2 puts it between the Menu button and the Handbook action rather
     than on a row of its own. */
  .chat-resume-long { display: none; }
  .chat-resume-short { display: inline; }
  .chat-resume { order: 2; }
  .chat-talking { padding-bottom: 11rem; }
}

@media print {
  .chat-entry, .chat-composer, .chat-strip, .chat-resume, .chat-diag, .hero-browse, .clearing-guide { display: none; }
}

/* ── The homepage hero at width ─────────────────────────────────────── */

/* The first pass put a 44rem column in a 76rem wrap and left the other half
   of a 1440px screen empty, which is exactly the "narrow article floating in
   a huge browser window" this product should not be. The canvas is used: the
   entry takes the reading column, and the way in for somebody who would
   rather browse takes the space beside it instead of being buried below. */
.hero-primary { min-width: 0; }
.chat-entry { max-width: none; }
/* The hero's browse row is drawn with the hero (founder pass 3); the
   stacked-list treatment that lived here is gone. */

@media (max-width: 64rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .hero-browse { padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); border-top: 1px solid var(--rule); }
}



/* ── What Sahvelo has: the chips ─────────────────────────────────────── */

/* Not decoration. Each one is a fact the reader STATED or CONFIRMED, each can
   be corrected, and an inferred fact never appears here — showing a guess as
   something Sahvelo knows would spend exactly the trust this treatment is for.
   They sit above the input because that is where the reader is looking when
   they decide what to say next. */
.chat-chips { margin: 0 0 0.7rem; }
.chat-chips[hidden] { display: none; }
.chat-chips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem 0.3rem 0.55rem;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.chat-chip-label { white-space: nowrap; }
.chat-chip-label::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.75rem;
  background: var(--accent);
  margin-right: 0.45rem;
  vertical-align: -1px;
}
.chat-chip-guide .chat-chip-label::before { background: var(--air); }
.chat-chip-change {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-chip-change:hover, .chat-chip-change:focus-visible { color: var(--ink); }

/* ── The choice module ───────────────────────────────────────────────── */

/* The most prominent thing on the screen while it is the thing that matters,
   and nothing once it is answered. On the green, because Sahvelo asking is
   the product working rather than failing. */
.chat-choice {
  margin: 1.25rem 0 0;
  padding: 1.35rem 1.5rem;
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  max-width: 44rem;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity 0.28s ease,
              padding 0.42s cubic-bezier(0.2, 0.7, 0.3, 1),
              margin 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.chat-choice-q {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.45;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin: 0;
}
.chat-choice-why {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.55rem 0 0;
  max-width: 56ch;
}
.chat-choice-options { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chat-choice-escape {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.85rem 0 0;
}

/* Resolved. The card that has been answered collapses rather than sitting
   above the next one — a conversation that accumulates dead UI gets harder to
   read exactly as it gets more useful. */
.chat-choice-resolved {
  max-height: 0;
  opacity: 0;
  padding-block: 0;
  margin-block: 0;
  border-left-color: transparent;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .chat-choice { transition: none; }
  .chat-choice-resolved { display: none; }
}

/* ── The resume card on the homepage ─────────────────────────────────── */

/* Home is Home. A conversation in sessionStorage is offered, never restored:
   a reader who pressed Home to get out and was put straight back where they
   were reads that as the product being broken. */
.chat-resume-card {
  margin: 1.1rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--paper-soft);
  border-left: 3px solid var(--accent);
  max-width: 44rem;
}
.chat-resume-card[hidden] { display: none; }
.chat-resume-card-heading {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--track-flat);
  margin: 0;
}
.chat-resume-card-lede {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0.25rem 0 0.8rem;
}
.chat-resume-card-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.chat-resume-go {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0 1.1rem;
  min-height: var(--tap);
  cursor: pointer;
}
.chat-resume-go:hover, .chat-resume-go:focus-visible { background: var(--accent-deep); }
.chat-resume-drop {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0 0 1px;
  min-height: var(--tap);
  cursor: pointer;
}
.chat-resume-drop:hover, .chat-resume-drop:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Turn treatments by kind ─────────────────────────────────────────── */

.chat-switched {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--accent);
  margin: 0 0 0.85rem;
  letter-spacing: var(--track-flat);
}
.chat-reply-boundary .chat-prose,
.chat-reply-refusal .chat-prose {
  padding: 1rem 1.15rem;
  background: var(--paper-soft);
  border-left: 3px solid var(--ink-mute);
  color: var(--ink-soft);
  font-size: 1rem;
}
/* On the chips row, at the far end. It is a real control and a rare one, so
   it sits with the other things Sahvelo knows rather than beside the input
   where it could be pressed by mistake. */
.chat-controls { margin: 0; }
.chat-strip-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* The transcript's measure, not the wrap's: "Start over" sat 336px right
     of the field it belongs to because the measure rules named .chat-strip,
     which nothing renders. */
  max-width: 54rem;
  margin: 0 0 0.7rem;
}
.chat-strip-row .chat-chips { margin: 0; flex: 1 1 auto; min-width: 0; }
/* `flex: 0 0 auto` here was correct while the controls were the two words
   "Start over". With the two doors beside them the row could no longer fit,
   and a non-shrinking item in a flex row does not wrap — it overflows. It
   pushed "Start over" off a 390px screen and printed the chips summary
   through the offer. */
.chat-strip-row { flex-wrap: wrap; }
.chat-strip-row .chat-controls { flex: 0 1 auto; min-width: 0; }
.chat-note-body { font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.chat-note-body p { margin: 0; }
.chat-note-action { margin: 0.6rem 0 0; }
.chat-block-actions .chat-steps-list > li { border-left-color: var(--accent); }
.chat-block-actions .chat-steps-list > li + li { border-left-style: dashed; }

/* ─────────────────────────────────────────────────────────────────────
   THE WIDE CANVAS
   ─────────────────────────────────────────────────────────────────────
   A guide page at 1440 was a 68rem composition centred in a 90rem window,
   which reads as a narrow article floating in a large browser rather than
   as part of a product. The fix is NOT a wider paragraph: 44rem is the
   reading measure and stretching it to 800px would make the page worse
   while making it look busier.

   So the columns keep their measures and the SPACE between them absorbs
   the extra width. The prose stays at 46rem, the support rail grows to
   21rem where it has real content to hold, and the two move apart until
   the composition spans the canvas. Below 90rem nothing changes — the
   existing 68rem composition is right for a laptop and this is not a
   redesign of it.
   ───────────────────────────────────────────────────────────────────── */

@media (min-width: 90rem) {
  :root {
    /* 76rem was chosen so a 1280px viewport keeps its gutter. That reason
       does not apply here — this rule cannot fire below 1440px. */
    --wrap-wide: 82rem;
    --prose-measure: 46rem;
  }
  .article-grid {
    max-width: 76rem;
    grid-template-columns: minmax(0, 46rem) 21rem;
    justify-content: space-between;
    column-gap: clamp(3.5rem, 3vw, 5.5rem);
  }
  /* The conversation gets the same treatment: a wider canvas, and prose
     that still stops where prose should stop. */
  .chat-thread,
  .chat-composer .chat-form,
  .chat-strip,
  .chat-strip-row { max-width: 58rem; }
  .chat-block, .chat-ask { max-width: 46rem; }
  .chat-prose, .chat-ack { max-width: 42rem; }
}

/* A second step, so a 1600px monitor is not treated as a 1440px one. */
@media (min-width: 100rem) {
  :root { --wrap-wide: 88rem; }
  .article-grid { max-width: 82rem; }
  .chat-thread, .chat-composer .chat-form, .chat-strip, .chat-strip-row { max-width: 62rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GUIDANCE AS AN APPLICATION MODE
   ═══════════════════════════════════════════════════════════════════════

   The viewport review found the website and the conversation colliding in
   the one place it matters most. With an answer on screen, the marketing
   footer rendered BETWEEN the answer and the composer — "Sahvelo / AFTER A
   DEATH / Where to start / How we verify" — and the reader's own line sat
   clipped behind the sticky header.

   A guidance canvas a site footer interrupts is not a canvas. So while a
   conversation is live, the canvas owns the space between the header and the
   composer, and the site stands down without going away. Start over puts all
   of it back.                                                                */

/* The footer belongs to the website, and the website is not what is on
   screen right now. */
html.chat-mode .site-footer,
html.chat-mode .footer,
html.chat-mode footer[role="contentinfo"],
html.chat-mode .home-handbook,
html.chat-mode .trust { display: none; }

/* Full height, honestly. `100vh` is wrong on a phone the moment the URL bar
   moves; `100dvh` is what the reader can actually see. */
html.chat-mode, html.chat-mode body { min-height: 100dvh; }
html.chat-mode body {
  display: flex;
  flex-direction: column;
  /* The composer is fixed. This is the room it needs, plus whatever the
     device reserves for a home indicator.
     MEASURED, NOT GUESSED. The bar is a chips line, the ways out and the
     field, and how many lines each of those takes depends on the viewport and
     on what Sahvelo knows. 11rem was right for one line of controls; adding
     the second door pushed the bar to 219px on a 390px screen against 144px
     of reserved room, and 75px of the last answer sat behind it with no way
     to scroll it clear. public/chat.js measures the real height into
     --composer-h; the rem value is the fallback for the moment before the
     script runs and for anyone without it. */
  padding-bottom: calc(var(--composer-h, 11rem) + 1.5rem + env(safe-area-inset-bottom, 0px));
}
html.chat-mode main { flex: 1 0 auto; }

/* The turn the reader just took must not arrive under the header.
   `scroll-margin-top` is the whole fix, and it has to know the header's real
   height rather than a number somebody guessed. */
html.chat-mode { scroll-padding-top: var(--header-h, 4.5rem); }
.chat-turn { scroll-margin-top: calc(var(--header-h, 4.5rem) + 1rem); }

/* No dead gap under a short turn: the thread grows to fill the canvas rather
   than leaving the composer stranded halfway up an empty screen. */
html.chat-mode .chat-thread { min-height: 40vh; }

/* ── The context strip ─────────────────────────────────────────────────
   Desktop shows the individual chips; a phone gets one line and an Edit.
   Three chips plus the composer took roughly 40% of a 390px screen and
   truncated the answer mid-sentence, which inverts the entire premise —
   the answer is meant to be the largest thing on the screen.             */

.chat-chips-summary {
  display: none;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink-mute);
}
.chat-chips-summary-text {
  font-size: 0.8125rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-chips-summary-action {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 40rem) {
  .chat-chips-summary { display: flex; }
  .chat-chips .chat-chips-list { display: none; }
  .chat-chips.chat-chips-open .chat-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: 0.35rem;
  }
  .chat-chips.chat-chips-open .chat-chips-summary-text { white-space: normal; }
  /* On a phone the chips get their line and the ways out get theirs. Three
     things competing for 390px is how "Start over" ended up off screen.
     Every one of these needs min-width: 0 as well: a flex item's default
     min-width is its content, so a long chip summary or a personalized
     handbook label runs off the side of the screen rather than shrinking. */
  .chat-strip-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .chat-strip-row .chat-chips,
  .chat-strip-row .chat-controls { min-width: 0; max-width: 100%; }
  .chat-chips-summary-text { flex: 1 1 auto; min-width: 0; }
  .chat-controls { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 1rem; row-gap: 0.35rem; }
  .chat-offer { display: contents; }
  /* `margin-left: auto` is what holds "Start over" against the right edge of
     a desktop row. In a wrapping column it pushed it onto a third line of its
     own, so the ways out cost three lines of a screen whose whole premise is
     that the answer stays the largest thing on it. */
  .chat-restart { margin-left: 0; }
  .chat-offer a, .chat-restart { min-height: 2.25rem; }
  /* A phone keeps the answer above the fold. */
  html.chat-mode body { padding-bottom: calc(var(--composer-h, 9rem) + 1.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ── Adaptive modules ──────────────────────────────────────────────────
   The unresolved question dominates; everything already settled recedes.
   That is the "one step ahead" feeling in CSS: as Sahvelo learns more, the
   screen gets quieter rather than busier.                                */

.chat-choice {
  transition: opacity 220ms ease, transform 220ms ease, background-color 220ms ease;
}
.chat-choice-q {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.3;
}
.chat-choice-resolved {
  opacity: 0.42;
  background: transparent;
  border-left-color: var(--rule, #ddd);
}
.chat-choice-resolved .chat-choice-why,
.chat-choice-resolved .chat-choice-escape,
.chat-choice-resolved .chat-choice-options { display: none; }
.chat-choice-resolved .chat-choice-q { font-size: 0.9375rem; font-family: var(--font-ui); }

/* Options read as a set of routes, not as a row of form buttons. Two columns
   on a wide screen only when there are enough of them to make a grid mean
   something; a phone stays linear because a phone always should. */
@media (min-width: 52rem) {
  .chat-choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .chat-choice-options .chat-option { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-choice { transition: none; }
}

/* ── "Why we say this" ─────────────────────────────────────────────────
   A bibliography is not provenance. The explanation carries the weight and
   the citations sit under it, one layer down, for the reader who wants them. */

.chat-block-sources { margin-top: 1.5rem; }
.chat-sources-why {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.5rem;
  max-width: 42rem;
}
.chat-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chat-sources-list a {
  font-size: 0.8125rem;
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-sources-list a:hover { color: var(--accent); }

/* The one line that says which action is which. It sits between the field and
   the escape, in the order it describes them, and it grows no control of its
   own: the escape it names is emphasized, not repeated as a second button. */
.chat-ask-note em { font-style: normal; text-decoration: underline; text-underline-offset: 2px; }
/* It introduces the controls, so it sits closer to them than to the "why". */
.chat-ask-howto { margin: 0.9rem 0 0.5rem; }

/* A control that has done its work stops looking like one that has not. The
   `busy` guard already dropped the second click; silently, which reads as
   broken rather than busy. */
.chat-ask button[disabled],
.chat-ask input[disabled] { opacity: 0.5; cursor: default; }

/* ── The answer shapes ────────────────────────────────────────────────
   Six jobs, six rhythms. The rule the whole of this obeys: NOT EVERY
   SEMANTIC UNIT IS A BORDERED BOX. Card soup is the same failure as
   wall-of-text wearing a nicer suit, and a screen where the reason, the
   answer, the warning and the next step are four identical rectangles has
   told the reader nothing about which is which. Weight, measure and space
   do the work here. Exactly one of these draws a border, and it is the one
   that is genuinely a separate object. */

/* WHY THIS APPLIES TO YOU.
   Attached to the paragraph above it, not separated from it: a hairline on
   the inside edge, the body face at a step down, and no ground of its own.
   It reads as the same voice continuing, which is what it is. */
.chat-because {
  margin-top: 0.85rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40rem;
}
.chat-because p { margin: 0; }
.chat-because p + p { margin-top: 0.6rem; }

/* THE THING THEY ARE ABOUT TO HIT.
   Last and quiet. A hairline above it rather than around it: it closes the
   turn rather than opening a new one. */
.chat-next {
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40rem;
}
.chat-next p { margin: 0; }

/* WHAT TO HAVE WITH YOU.
   Objects to collect, so it is drawn as a checklist — the one place in a
   turn where a box is right, because each item is a thing you either have
   or do not. Distinct at a glance from the action rail beside it. */
.chat-prepare-list { list-style: none; margin: 0; padding: 0; }
.chat-prepare-list > li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.6rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}
.chat-prepare-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 1.5px solid var(--ink-mute);
  border-radius: 2px;
}

/* AN ASSUMPTION SAHVELO MADE, SHOWN WHERE IT CAN BE CORRECTED.
   Quieter than a stated fact and marked, because the two are different kinds
   of thing and a reader deciding whether to correct one has to be able to
   tell which they are looking at. */
.chat-chip-assumed { border-style: dashed; }
.chat-chip-assumed .chat-chip-label { color: var(--ink-soft); }

/* TAKING THIS TO SOMEBODY ELSE.
   ─────────────────────────────────────────────────────────────────
   The one bordered object in a turn, and the only one that earns a border:
   a reader is going to carry it into a room, and on a phone that means
   reading it off the screen while somebody waits. So it is set to be read
   aloud — the reason in body face, the questions as questions, the facts
   they have already given in a quiet line underneath.

   It is not card soup. There is at most one of these in a conversation, it
   fires only when the reader said they are going to see somebody or Sahvelo
   reached a boundary it cannot cross, and it replaces the "consult a
   professional" sentence rather than sitting next to it. */
.chat-block-handoff {
  border: 1px solid var(--rule-firm);
  border-radius: 3px;
  padding: clamp(1rem, 0.8rem + 0.7vw, 1.4rem);
  margin-block-start: 1.35rem;
  background: var(--paper);
  max-width: 40rem;
}
.chat-handoff-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.chat-handoff-why {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.chat-handoff-heading {
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.chat-handoff-ask {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.chat-handoff-ask > li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}
/* A quotation mark rather than a bullet: these are sentences to say, not
   items to tick. */
.chat-handoff-ask > li::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0.25rem;
  color: var(--ink-mute);
  font-size: 1.05rem;
  line-height: 1;
}
.chat-handoff-known {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.chat-handoff-escalate {
  margin: 0;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.chat-block-handoff > *:last-child { margin-bottom: 0; }

@media (max-width: 40rem) {
  .chat-block-handoff { padding: 1rem 0.9rem; }
}

/* THE CITATION THAT BACKS THE OPENING CLAIM.
   It is a different object from the three below it and it is drawn as one:
   full ink, and a marker saying this is the one the answer stands on. */
.chat-source-lead > a { color: var(--ink); }
.chat-source-lead { position: relative; }
.chat-source-lead::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 0.62em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--accent);
}

/* A DEFINITION IS SHORT AND IT LOOKS SHORT.
   Narrower measure, and no room made for furniture it does not have. The
   point of the shape is that a reader can tell what kind of answer they got
   before reading a word of it. */
.chat-shape-definition .chat-prose { max-width: 34rem; font-size: 1.09375rem; }
.chat-shape-definition .chat-block { margin-top: 1.1rem; }

/* AN ORIENTATION TURN'S STEPS ARE THE ANSWER, so they carry the weight
   normally given to the paragraph above them. */
.chat-shape-orient .chat-block-actions .chat-steps-list > li { font-size: 1rem; }

/* A DIRECT ANSWER LEADS WITH THE ANSWER. One step down in measure and one
   up in size: the first sentence is the product of the whole system, and it
   should not have to compete with a list underneath it. */
.chat-shape-direct .chat-prose { font-size: 1.125rem; max-width: 38rem; }

/* ── The Handbook, at its proper weight for this phase ─────────────────
   It keeps its pages and its place in Tools & Resources. It stops being the
   loudest control on a page it is not the point of. */
.handbook-cta-quiet {
  border: 0;
  background: none;
  padding: 0;
  margin: 2rem 0 0;
}
.handbook-cta-quiet .handbook-cta-line {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 42rem;
}
.handbook-cta-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* A resolved choice settles into a line rather than vanishing.
   Collapsing to zero height left the transcript with holes in it: the reader's
   own sentence, then nothing, because Sahvelo's reply had been answered and
   deleted. What stays is the question and what it settled, at the weight of a
   caption. */
.chat-choice-settled {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.chat-choice-settled-q { color: var(--ink-mute); }
.chat-choice-settled-a { color: var(--ink); font-weight: 600; }
.chat-choice-resolved .chat-choice-q,
.chat-choice-resolved .chat-choice-why,
.chat-choice-resolved .chat-choice-escape,
.chat-choice-resolved .chat-choice-options { display: none; }
.chat-choice-resolved {
  opacity: 0.55;
  overflow: hidden;
  padding-block: 0.35rem;
}
.chat-choice-resolved:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   THE ASK MODULE — one question, three shapes, no ambiguity
   ═══════════════════════════════════════════════════════════════════════

   The rule, written down because breaking it cost a real reader a real
   mistake: INTERACTIVE ELEMENTS WITH DIFFERENT BEHAVIOUR MUST NOT LOOK THE
   SAME.

   A jurisdiction question used to render zero options and one escape button
   reading "I'm not sure" — a bordered rectangle on a wash, which is what an
   empty text field looks like. Jordan clicked it. There was no field in the
   card at all.

     FIELD    a box, a caret, a placeholder, a send control
     CHOICE   a chip with a leading marker; pressable, not typeable
     ESCAPE   underlined text after the word "or"; no border, no background

   See docs/SAHVELO-INTERACTION-GRAMMAR.md.                                  */

.chat-ask {
  margin: 1.5rem 0 0;
  padding: 1.5rem 1.65rem 1.4rem;
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  max-width: 44rem;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity 0.28s ease,
              padding 0.42s cubic-bezier(0.2, 0.7, 0.3, 1),
              margin 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* THE QUESTION IS THE LARGEST THING ON THE SCREEN.
   It is what the reader is being asked to deal with, and it should not have
   to compete with the answer above it for attention. */
.chat-ask-q {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* Why it is being asked. Present because a question whose point is invisible
   reads as an obstacle, and a question whose point is stated reads as help. */
.chat-ask-why {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
  max-width: 58ch;
}

/* ── CHOICE ───────────────────────────────────────────────────────────
   A chip you press. The leading marker is the whole point: it is a thing no
   text input has, so a choice can never be mistaken for a field even at a
   glance, even in peripheral vision, even by somebody who is not really
   looking because their father died on Tuesday. */
.chat-ask-options {
  margin: 1.15rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chat-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-align: left;
  color: var(--ink);
  /* A choice, drawn like every other choice: page ground, a firm edge, no
     radius. It was a white well with a soft edge, which is a field. */
  background: transparent;
  border: 1px solid var(--rule-firm);
  border-radius: 0;
  padding: 0.6rem 0.9rem 0.6rem 0.7rem;
  min-height: var(--tap);
  cursor: pointer;
  transition: background-color 140ms ease;
}
.chat-pick-mark {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--rule-firm);
  border-radius: 50%;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.chat-pick:hover, .chat-pick:focus-visible { background: var(--paper-deep); }
.chat-pick:hover .chat-pick-mark, .chat-pick:focus-visible .chat-pick-mark {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── FIELD ────────────────────────────────────────────────────────────
   Inside the card, where the question is. Sending somebody to the composer
   at the foot of the page is asking them to answer a question in another
   room. */
.chat-ask-field { margin: 1.15rem 0 0; }
.chat-ask-field-row {
  display: flex;
  align-items: stretch;
  max-width: 26rem;
  background: var(--paper, #fff);
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.chat-ask-field-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.chat-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0.7rem 0.85rem;
  min-height: var(--tap);
}
.chat-ask-input:focus { outline: none; }
.chat-ask-input::placeholder { color: var(--ink-mute); }
.chat-ask-send {
  flex: none;
  width: 2.85rem;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 0;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.chat-ask-send:hover, .chat-ask-send:focus-visible { background: var(--accent); }
.chat-ask-send-mark {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--paper, #fff);
  /* A right-pointing arrow drawn in CSS: no icon font, no SVG sprite, no
     library for one glyph. */
  clip-path: polygon(0 42%, 62% 42%, 62% 22%, 100% 50%, 62% 78%, 62% 58%, 0 58%);
}
.chat-ask-hint {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0.5rem 0 0;
}

/* ── ESCAPE ───────────────────────────────────────────────────────────
   Underlined text after the word "or". Not a box, not on the option row, not
   the same weight as anything above it. A way out should look like a way out. */
.chat-ask-out {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.chat-ask-or { color: var(--ink-mute); }
.chat-ask-escape {
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  min-height: 0;
}
.chat-ask-escape:hover, .chat-ask-escape:focus-visible {
  color: var(--accent);
  text-decoration-thickness: 2px;
}
.chat-ask-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.85rem 0 0;
}

/* ── RESOLVED ─────────────────────────────────────────────────────────
   It recedes to one line; it does not vanish. Collapsing to nothing left the
   transcript with holes: the reader's own sentence, then blank space. */
.chat-ask-settled {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: baseline;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.chat-ask-settled-q { color: var(--ink-mute); }
.chat-ask-settled-a { color: var(--ink); font-weight: 600; }
.chat-ask-resolved {
  opacity: 0.5;
  padding-block: 0.4rem;
  border-left-color: var(--rule);
  background: transparent;
  pointer-events: none;
}
.chat-ask-resolved:hover { opacity: 0.8; }
.chat-ask-resolved .chat-ask-q,
.chat-ask-resolved .chat-ask-why,
.chat-ask-resolved .chat-ask-out,
.chat-ask-resolved .chat-ask-note,
.chat-ask-resolved .chat-ask-field,
.chat-ask-resolved .chat-ask-options { display: none; }

@media (prefers-reduced-motion: reduce) {
  .chat-ask, .chat-pick { transition: none; }
}

/* Wide screens can lay options out in two columns once there are enough of
   them to make a grid mean something. A phone stays linear, because a phone
   always should. */
@media (min-width: 52rem) {
  .chat-ask-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-ask-options .chat-pick { width: 100%; }
}
@media (max-width: 40rem) {
  .chat-ask { padding: 1.2rem 1.1rem 1.1rem; }
  .chat-ask-options { display: flex; flex-direction: column; }
  .chat-pick { width: 100%; }
  .chat-ask-field-row { max-width: none; }
}

/* The composer, when a question owns its own field.
   Two text inputs of equal weight on one screen is the affordance bug this
   pass exists to remove, in a new shape. The composer stays — free text always
   outranks the offered options — and stops competing. */
.chat-composer-secondary .chat-form { max-width: 34rem; }
.chat-composer-secondary .chat-input {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.chat-composer-secondary .chat-input-row {
  border-color: var(--rule-strong);
  box-shadow: none;
}
.chat-composer-secondary .chat-input-row:focus-within { border-color: var(--accent); }
.chat-composer-secondary .chat-submit { background: var(--ink-mute); }
.chat-composer-secondary .chat-submit:hover,
.chat-composer-secondary .chat-submit:focus-visible { background: var(--ink); }

/* THE SECTION SAHVELO WAS TALKING ABOUT.
 *
 * A reader arriving from a chat link at /page/#section lands on a heading with
 * no sign which of fifteen sections was meant. This says it quietly and then
 * stops: a tint and a rule down the left edge, both on the accent already used
 * for every other "Sahvelo is speaking" surface. No border flash, no shadow,
 * no scale, nothing that reads as an advertisement.
 *
 * scroll-margin-top lives here rather than in JavaScript because the sticky
 * header's height is a layout fact, and scroll maths in a script is the
 * version of this that breaks when the header changes. */
[id].is-chat-target,
section[id]:target {
  scroll-margin-top: calc(var(--header-h, 4rem) + 1.5rem);
}
.is-chat-target {
  background: var(--accent-wash);
  box-shadow: inset 3px 0 0 0 var(--accent);
  border-radius: var(--radius, 4px);
  padding-inline: 1rem;
  margin-inline: -1rem;
  transition: background 320ms ease-out, box-shadow 320ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .is-chat-target { transition: none; }
}

/* ENDING A CONVERSATION IS A DECISION, SO IT HAS A CONTROL.
 *
 * Session continuity is only acceptable if the reader can end it. This is an
 * ESCAPE by the interaction grammar's definition — underlined text, no border,
 * no background, never a box — because it must not read as either of the other
 * two shapes. It is quiet: nothing here is dangerous enough to shout, and a
 * red button beside a bereavement page would be absurd. */
.chat-session { display: inline-flex; align-items: center; gap: 0.75rem; }
.chat-session[hidden] { display: none; }
.chat-exit {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--step--1, 0.8125rem);
  color: var(--ink-soft, #5b6560);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.chat-exit:hover { color: var(--ink); }
.chat-exit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* ON A PHONE IT MOVES INTO THE MENU RATHER THAN DISAPPEARING.
 *
 * The header is a wrapping flex row. At 390px the wordmark and the menu button
 * take 171px of it, so adding a 162px session group pushed the whole thing
 * onto a second line and the header grew from 67px to 123px — which then fed
 * the sticky-header offset and left a void above the section a reader had just
 * been sent to. Measured, not guessed.
 *
 * A reader who cannot end a session on the device they are holding does not
 * really have the control, so it is not hidden: it moves to the primary nav,
 * which is where secondary actions already live on a phone. */
@media (max-width: 40rem) {
  .chat-exit { display: none; }
  .nav-list .chat-exit { display: inline; }
}
.nav-exit-item { display: none; }
@media (max-width: 40rem) { .nav-exit-item.is-active { display: list-item; } }

/* ═══════════════════════════════════════════════════════════════════════
   THE CLEARING
   ═══════════════════════════════════════════════════════════════════════

   The identity's own construction, at layout scale.

   The Overlap mark is two chestnut planes that cross, and the clearing they
   make between them. This is that, built so the reader's content is what
   sits in the clearing. It is the brand's one claim — Sahvelo makes room for
   what matters — expressed as a mechanism rather than as a sentence.

   THE LOAD-BEARING PROPERTY: the planes are anchored and the room is not.
   The clearing is a grid cell sized by `auto`, so it grows and shrinks to fit
   what it holds. Nothing is animated and nothing is measured in script. A
   longer heading makes a taller clearing because that is what a grid does.
   That is the whole interaction principle, already true of the static case.

   Construction logic is fixed; proportion follows content. The mark's own
   clearing is a 4:11 slot, which is right for a symbol and wrong for a
   headline, so at layout scale the planes take whatever aspect the content
   needs. What never changes: two equal planes, offset on both axes, content
   in the intersection, and nothing in the clearing that Sahvelo cannot
   account for.

   WHERE IT MAY NOT GO. This is a section-level device for the one thing that
   matters on a screen. It is not a card, not a container, and not a wrapper
   for a list. If a screen has two of these, one of them is decoration. For
   content that needs the family without the full device — a verified claim
   inside running prose, a decision, a "what matters now" — use `.held`
   below, which is one plane rather than two.
   ─────────────────────────────────────────────────────────────────────── */

.clearing {
  display: grid;
  /* Lead and trail are how far the second plane is offset from the first.
     Unequal by default, because the mark's offset is unequal on both axes and
     a symmetrical composition reads as a frame rather than as two things
     meeting. */
  grid-template-columns:
    var(--clearing-lead, clamp(1.5rem, 9vw, 7rem))
    minmax(0, 1fr)
    var(--clearing-trail, clamp(1.25rem, 7vw, 5.5rem));
  grid-template-rows:
    var(--clearing-rise, clamp(1.75rem, 5vw, 4rem))
    auto
    var(--clearing-fall, clamp(1.5rem, 4vw, 3.25rem));
  isolation: isolate;
}

/* The two planes. Anchored, stable, never moved by content. */
.clearing-plane {
  background: var(--accent);
  z-index: 0;
}
.clearing-plane-a { grid-area: 1 / 1 / 3 / 3; }
.clearing-plane-b { grid-area: 2 / 2 / 4 / 4; }

/* The room. This is the only part that responds to content. */
.clearing-room {
  grid-area: 2 / 2 / 3 / 3;
  z-index: 1;
  background: var(--paper);
  padding: clamp(1.4rem, 3.2vw, 2.9rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Reversed: the planes become paper and the room becomes chestnut. For a
   section that already sits on a washed ground, where two chestnut planes
   would be the third heavy element on the screen. */
.clearing-reversed .clearing-plane { background: var(--paper); }
.clearing-reversed .clearing-room {
  background: var(--accent);
  color: var(--paper);
}
.clearing-reversed .clearing-room :is(h1, h2, h3, p, a) { color: inherit; }

/* Full-bleed: the planes run off the section edge so the composition is a
   layout rather than a picture of the logo. This is the default for a hero
   or a section opener; a contained clearing reads as an enlarged mark, which
   is the one thing the device must not do. */
.clearing-bleed { margin-inline: calc(-1 * var(--clearing-bleed-gutter, 4vw)); }

/* Type inside the room. The clearing holds one statement, so the first child
   carries the weight and anything after it is quiet. */
.clearing-room > :first-child { margin-top: 0; }
.clearing-room > :last-child { margin-bottom: 0; }
.clearing-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.85rem;
}
.clearing-reversed .clearing-eyebrow { color: var(--paper-deep); }
.clearing-statement {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: var(--track-grotesque);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.clearing-reversed .clearing-statement { color: var(--paper); }
.clearing-note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 46ch;
}
.clearing-reversed .clearing-note { color: var(--paper-deep); }

/* ── .held — the quiet relative ────────────────────────────────────────
   One plane, not two. For the things that need to read as Sahvelo holding
   something without staging a whole section: a verified claim inside prose,
   a decision the reader has to make, the one thing that matters this week.

   It is a rail, not a box. No border on three sides, no fill behind the
   text, no icon. The plane is the evidence that something is being held;
   the text is the thing held. */
.held {
  border-left: 4px solid var(--accent);
  padding: 0.15rem 0 0.15rem clamp(0.9rem, 2vw, 1.35rem);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.held-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.5rem;
}
.held-source {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0.6rem 0 0;
}
.held-source a { color: var(--accent); }
/* SEVERAL SOURCES, ONE PER ROW.
   A short answer that rests on four state statutes used to print the first
   one under the words "Verified at", which read as though that statute
   verified the whole passage. Now every bound source is named, each on its
   own row so none of them can be read as covering the others, and the line
   above says which states they are — the scope a reader cannot get from a
   statute number. */
.held-source-lead { margin-bottom: 0.15rem; }
.held-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
}
.held-sources li { margin: 0.12rem 0; }
.held-sources a { color: var(--accent); }
.held-open .held-sources a { color: var(--warn); }
/* One flowing line. The comma before it is glued to the end of the source
   label and the date travels as one unbreakable phrase, so nothing can arrive
   alone at the start of a wrapped line. */
.held-checked { color: var(--ink-mute); white-space: nowrap; }
.held-open .held-source a { color: var(--warn); }

/* A held block whose claim is NOT yet verified says so in the rail itself,
   because "Sahvelo says so and stops" is a promise the ink has to keep and
   not only the copy. Ochre, never red: this is a limit, not an error. */
.held-open { border-left-color: var(--warn); }
.held-open .held-label { color: var(--warn); }

/* ── Community pages ──────────────────────────────────────────────────
   A state-law page addressed to a place. It borrows the topic page's
   vocabulary deliberately — same rules, same citation markers, same
   sources block — because it is the same kind of claim being made, and a
   second visual language would suggest it is a different kind. */
.community { max-width: var(--prose-measure-wide, 46rem); }
.cm-head { padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule-firm); }
.cm-lede {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
}
.cm-angle, .cm-topic, .cm-siblings, .cm-honest, .cm-state, .cm-next { margin-top: var(--space-4); }
.cm-topic h2, .cm-angle h2, .cm-siblings h2, .cm-honest h2, .cm-state h2, .cm-next h2 {
  font-family: var(--font-ui);
  font-size: 1.3125rem;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}
.cm-point { padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
.cm-point h3 {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.35rem;
}
.cm-point p { margin: 0; }
.cm-more { margin-top: var(--space-2); font-family: var(--font-ui); font-size: 0.9375rem; }
.cm-siblings ul, .cm-state ul, .community-index ul { list-style: none; margin: 0; padding: 0; }
.cm-next ul { list-style: none; margin: 0; padding: 0; }
.cm-next li { padding: 0.5rem 0; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.cm-siblings li, .cm-state li { padding: 0.35rem 0; border-top: 1px solid var(--rule); }
/* A community Sahvelo knows about and does not publish a page for. It is named
   because a reader searching for the place they live in found nothing at all
   before this, and the reason is set quietly so the list still reads as a list
   of places rather than a list of apologies. */
.cm-nopage { display: block; font-size: 0.82rem; color: var(--ink-soft); }
/* The honest absence, drawn as a note rather than a warning. It is not a
   caveat on the answers above it; it is the boundary of what was claimed. */
.cm-honest {
  padding: var(--space-3);
  background: var(--paper-soft);
  border-left: 2px solid var(--rule-strong);
}
.cm-honest h2 { font-size: 1rem; }
.cm-honest p { margin: 0; color: var(--ink-soft); }
/* ── Worksheet ────────────────────────────────────────────────────────────
   A count the reader does against their own situation. The rows are the
   published rule and read as a list with the script blocked; the fields and
   the total are the enhancement, revealed by site.js.

   Restrained on purpose. This is a page about ordering documents four days
   after a death, not a calculator app: no card, no accent panel, no icon. It
   is the list that was already here, with a number beside each line. */
.worksheet { margin: 1.25rem 0; }
.ws-rows { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ws-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.ws-row:last-child { border-bottom: 0; }
.ws-row-label { flex: 1 1 auto; }
.ws-row-note {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin-top: 0.15rem;
}
.ws-row-field { flex: 0 0 auto; }
.ws-row-field[hidden] { display: none; }
.ws-input {
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  width: 4.25rem;
  padding: 0.35rem 0.5rem;
  text-align: right;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
}
.ws-input:hover { border-color: var(--accent); }
.ws-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ws-result { margin-top: 1rem; }
.ws-result[hidden] { display: none; }
.ws-total {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 0 0 0.5rem;
}
.ws-total.is-answered {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.ws-assumption,
.ws-privacy {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.5rem 0 0;
  max-width: 44rem;
}
.ws-reset {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  min-height: 40px;
  cursor: pointer;
  margin-top: 0.5rem;
}
.ws-reset:hover { border-color: var(--accent); color: var(--accent-deep); }
.ws-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The `window` variant asks ONE question, so its field is a labelled row of
   its own above the list rather than a small box at the end of a line. The
   label is visible: with a single control carrying the whole interaction, a
   visually-hidden label would leave a bare month box under a heading, which
   is the control-legibility failure the interaction grammar names. */
.ws-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0.75rem 0 0;
}
.ws-ask[hidden] { display: none; }
.ws-ask-label { font-family: var(--font-ui); font-size: 0.9375rem; color: var(--ink); }
.ws-input-month { width: auto; min-width: 11rem; text-align: left; min-height: 40px; }
/* The computed months sit where the count's field sits, so the two variants
   read as one block kind. Right-aligned, because they are the answer to the
   line they sit on. */
.ws-span-value {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.ws-span-value[hidden] { display: none; }
@media (max-width: 480px) {
  /* The label is a phrase and the field is small; side by side survives to
     480px and then the label has too little room to read. */
  .ws-row { flex-wrap: wrap; gap: 0.35rem; }
  .ws-row-field { flex-basis: 100%; }
  .ws-input { width: 100%; text-align: left; min-height: 44px; }
  .ws-input-month { width: 100%; }
  /* A computed month reads as the answer to the line above it, so on a narrow
     screen it goes under the label rather than fighting it for the row. */
  .ws-span-value { flex-basis: 100%; text-align: left; }
}
@media print {
  /* Somebody printing this is taking the list to a desk. The rule prints;
     the controls do not, and neither does a total nobody can recompute on
     paper. A computed month DOES print: unlike a running total it is the
     thing the reader came for, and it is on the page once it exists. */
  .ws-row-field, .ws-reset, .ws-privacy, .ws-ask { display: none !important; }
  .ws-total:not(.is-answered) { display: none; }
  .worksheet { break-inside: avoid; }
}
/* ═══════════════════════════════════════════════════════════════════════
   THE HANDBOOK DOCUMENT (V1)

   The Standing Brief became the whole Handbook: one document in the order
   the V1 specification gives it, drawn from one composed object that the
   PDF writes too. The rules above still govern the rhythm — a section is a
   label, a rule and content; nothing is a card unless it is acted on. What
   follows is only what the new sections need: the kinds of time, the
   numbered sources, the write-in lines that exist for paper, the documents
   list, the professional page, and the download control.
   ═══════════════════════════════════════════════════════════════════════ */

.hb-core-intro {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-3);
}

/* A sub-heading inside a block: the same quiet label, one step smaller. */
.sb-h-sub {
  font-size: 0.7rem;
  margin-top: var(--space-3);
}
.sb-places { margin-top: var(--space-3); }
.sb-spine-lede { border-top: 0; padding-top: 0; margin-top: var(--space-3); }

/* THE ONE FIXED DATE is said in words before the date, so it cannot be
   mistaken for a band heading. Same ink as everything else: a date is not
   bad news. */
.hb-time {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Which sources a card rests on: small numbers, linked to the list at the
   back. Data, not decoration, so they read as numbers. */
.hb-action-sources {
  display: inline-flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: 0.2em;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--ink-mute);
}
.hb-source-num {
  display: inline-block;
  min-width: 1.125rem;
  line-height: 1.4;
  padding: 0 0.3rem;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}
.hb-source-num:hover,
.hb-source-num:focus-visible { border-color: var(--ink); }

/* A term explained where it is first used. */
.hb-action-terms { margin-top: var(--space-1); }
.hb-action-termlist {
  margin: 0.25rem 0 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
}
.hb-action-termlist dt { font-weight: 500; }
.hb-action-termlist dd { margin: 0 0 0.375rem; color: var(--ink-soft); }

/* Write-in lines. On screen they are a list; on paper each has room beside
   it. The line is drawn, never typed, so it cannot be mistaken for a field. */
.sb-writein-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-writein {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.sb-writein:last-child { border-bottom: 0; }
.sb-writein-text { flex: 1 1 auto; }
.sb-writein-line { display: none; }
.sb-sheet-part { margin-top: var(--space-2); }

/* Documents and details to have ready. */
.sb-doc-group { margin-top: var(--space-2); }
.sb-doc-group-h {
  margin: 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule-firm);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}
.sb-doc-group-h .sb-doc-for { font-size: inherit; color: var(--ink); font-weight: 600; }
.sb-doc-more {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.sb-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-doc {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.sb-doc:last-child { border-bottom: 0; }
.sb-doc-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-2);
  font-family: var(--font-body);
}
.sb-doc-text { font-size: 0.9375rem; color: var(--ink); }
.sb-doc-note {
  margin: 0.125rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.sb-doc-for-line { margin: 0.25rem 0 0; line-height: 1.5; }
.sb-doc-for {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  text-decoration: none;
}
.sb-doc-for:hover,
.sb-doc-for:focus-visible { color: var(--ink); text-decoration: underline; }
/* The press that names the rest of the steps. Drawn as a small bordered
   control, never as one more link in the run, so a reader can tell it
   opens something rather than going somewhere. */
.sb-doc-more {
  min-height: 28px;
  padding: 0 0.625rem;
  background: none;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  cursor: pointer;
  vertical-align: baseline;
}
.sb-doc-more:hover,
.sb-doc-more:focus-visible { color: var(--ink); border-color: var(--ink); }
.sb-doc-for-rest[hidden] { display: none; }
.sb-doc-exists {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.sb-doc-where { display: none; }

/* What still needs to be known: the label says what an answer would do. */
.sb-open-decides .mini-label { margin-right: 0.25rem; }

/* The professional page. */
.sb-pro-kinds {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-pro-kind {
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.sb-pro-kind:last-child { border-bottom: 0; }
.sb-pro-kind-label { font-weight: 500; display: block; }
.sb-pro-kind-why { color: var(--ink-soft); display: block; }
.sb-pro-part { margin-top: var(--space-2); }
.sb-pro-share,
.sb-pro-note {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
  margin: var(--space-2) 0 0;
}
.sb-pro-summary {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  background: var(--surface);
}
.sb-pro-summary-head .sb-wordmark { display: block; }
.sb-pro-title {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin: var(--space-1) 0 0.25rem;
  color: var(--ink);
}
.sb-pro-summary .sb-block:first-of-type { border-top: 0; }
.sb-pro-summary .sb-situation-text { font-size: 1.125rem; }

/* What this rests on: numbered, once. */
.sb-evidence-unsupported {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-2);
}
ol.hb-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.hb-source {
  position: relative;
  padding: 0.4375rem 0 0.4375rem 2rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.hb-source:last-child { border-bottom: 0; }
.hb-source-n {
  position: absolute;
  left: 0;
  top: 0.55rem;
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-align: center;
  color: var(--ink);
}
.sb-evidence-links,
.sb-evidence-pages { margin-top: var(--space-2); }

/* The download control leads the controls; the status line beside it says
   what is happening, in words, for a reader and for a screen reader. */
.sb-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  width: 100%;
}
.sb-download-status {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
}
.sb-control-download:disabled { opacity: 0.6; cursor: progress; }
.sb-keeping-check {
  font-size: 0.875rem;
  color: var(--ink-mute);
}
.hb-result-return { color: var(--ink-mute); }

@media (max-width: 40rem) {
  .sb-pro-summary { padding: var(--space-2); }
  .hb-source { padding-left: 1.75rem; }
}

@media print {
  /* Write-in room appears only on paper. The line is a rule to write on,
     drawn long enough to hold a sentence. */
  .sb-writein-line {
    display: block;
    flex: 1 1 40%;
    min-width: 30mm;
    border-bottom: 0.5pt solid #777;
    height: 1em;
  }
  .sb-writein { break-inside: avoid; page-break-inside: avoid; }
  .sb-doc-where {
    display: flex;
    align-items: baseline;
    gap: 3mm;
    margin-top: 1mm;
    font-family: var(--font-ui);
    font-size: 8pt;
    color: #555;
  }
  .sb-doc { break-inside: avoid; page-break-inside: avoid; }
  .sb-doc-group-h { break-after: avoid; page-break-after: avoid; }
  .sb-doc-for { color: #555; }
  .sb-doc-for::after { content: ""; }
  .sb-doc-more { border: 0; padding: 0; color: #555; }
  .hb-source-num,
  .hb-source-n,
  .hb-time { color: #000; border-color: #666; }
  .hb-source-num { text-decoration: none; }
  .hb-action-sources { color: #444; }
  .sb-pro-summary {
    break-before: page;
    page-break-before: always;
    border: 0;
    padding: 0;
    background: none;
  }
  .sb-pro-kind,
  .hb-source { break-inside: avoid; page-break-inside: avoid; }
  .sb-download,
  .sb-control-download,
  .sb-control-print,
  .hb-summary { display: none !important; }
  .sb-keeping-check { color: #444; }
}

/* ─────────────────────────────────────────────────────────────────────
   SAHVELO BRIEFINGS: the homepage signup, and the Journal cards.

   Both are drawn in the language that is already here. The signup reuses
   .ask-input and .ask-submit exactly, so the field and the button are the same
   controls as everywhere else on the site rather than a second form system;
   the Journal cards reuse the .world-door idea, a top hairline over a
   transparent panel that fills on hover, because that is what a card is in
   this design and a bordered box would be a second card language.

   No fills, no rounded corners, no badges, no shadows, no color per world. */

/* ─────────────────────────────────────────────────────────────────────
   Last-Mile execution card (.lm-*).
   The hierarchy is: what to do · where and how · one filled action, the rest
   as links · what to bring and know · source and date. Tokens only; every
   control is one of the three shapes in docs/SAHVELO-INTERACTION-GRAMMAR.md.
   The card is a RESULT, not a door, so it sits on the page ground with a
   hairline above and below rather than a bordered box.
   ───────────────────────────────────────────────────────────────────── */
.lm-card { border-top: 1px solid var(--rule-firm); border-bottom: 1px solid var(--rule); padding: 1.5rem 0 1.25rem; margin: 1.5rem 0; max-width: var(--prose-measure); }
.lm-card + .lm-card { border-top: 0; }
.lm-head { display: grid; gap: 0.35rem; margin: 0 0 1rem; }
.lm-title { font-family: var(--font-ui); font-weight: 600; font-size: 1.375rem; line-height: 1.25; margin: 0; color: var(--accent-deep); }
.lm-authority { font-family: var(--font-ui); font-size: 1rem; color: var(--ink); margin: 0; }
.lm-status { margin: 0.15rem 0 0; font-family: var(--font-ui); font-size: 0.8125rem; letter-spacing: var(--track-flat, 0); }
.lm-status-mark { display: inline-block; padding: 0.15rem 0; border-bottom: 1px solid currentColor; }
.lm-tone-settled { color: var(--air); }
.lm-tone-caution { color: var(--warn); }
.lm-tone-halt { color: var(--halt); }
.lm-tone-known { color: var(--ink-soft); }
.lm-tone-unknown { color: var(--warn); }
.lm-why { font-family: var(--font-ui); font-size: 0.9375rem; color: var(--ink-mute); margin: 0.35rem 0 0; }
.lm-confirm, .lm-fallback { font-family: var(--font-ui); font-size: 0.9375rem; color: var(--warn); margin: 0.35rem 0 0; }
.lm-where { display: grid; gap: 0.25rem; margin: 0 0 1rem; padding-left: 1rem; border-left: 2px solid var(--rule-strong); }
.lm-office { font-family: var(--font-ui); font-weight: 600; font-size: 1.0625rem; margin: 0; color: var(--ink); }
.lm-address { font-size: 1.0625rem; line-height: 1.45; margin: 0; }
.lm-hours, .lm-phone, .lm-appointment, .lm-channel, .lm-eligibility { font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.5; margin: 0; color: var(--ink-soft); }
.lm-appointment { color: var(--ink); font-weight: 500; }
.lm-k { font-family: var(--font-ui); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-right: 0.35rem; }
.lm-k-block { display: block; margin: 0.75rem 0 0.35rem; }
.lm-note { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); }
.lm-unknown { color: var(--warn); }
.lm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0.25rem 0 0.5rem; }
.lm-primary { min-height: var(--tap); }
.lm-link { min-height: var(--tap); display: inline-flex; align-items: center; }
.lm-card .action-link { display: inline-flex; align-items: center; min-height: 28px; }
@media (max-width: 40rem) { .lm-card .action-link { min-height: var(--tap); } }
.lm-provider { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); margin: 0 0 0.75rem; }
.lm-alternatives, .lm-rules, .lm-sources, .lm-trace { margin: 0.75rem 0; font-family: var(--font-ui); }
.lm-alternatives > summary, .lm-rules > summary, .lm-sources > summary, .lm-trace > summary { cursor: pointer; font-size: 0.9375rem; color: var(--accent); min-height: var(--tap); padding: 0.6rem 0; box-sizing: border-box; }
.lm-alternatives > summary:focus-visible, .lm-rules > summary:focus-visible, .lm-sources > summary:focus-visible, .lm-trace > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-count { color: var(--ink-mute); margin-left: 0.35rem; }
.lm-alt-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.85rem; }
.lm-alt-list > li { padding-left: 1rem; border-left: 2px solid var(--rule); display: grid; gap: 0.2rem; }
.lm-section { margin: 1rem 0 0; }
.lm-h { font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.35rem; color: var(--ink); }
.lm-check-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.lm-check-group > legend { padding: 0; }
.lm-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.lm-check-item { display: flex; align-items: flex-start; gap: 0.6rem; font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.45; cursor: pointer; min-height: 2rem; }
.lm-check-box { margin: 0.25rem 0 0; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--accent-deep); }
.lm-check-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-why { color: var(--ink-mute); }
.lm-check-item .lm-why { display: block; font-size: 0.8125rem; }
.lm-list { padding-left: 1.1rem; margin: 0; font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.5; display: grid; gap: 0.3rem; }
.lm-fee-label { color: var(--ink-soft); }
.lm-fee { font-weight: 600; color: var(--ink); }
.lm-steps { padding-left: 1.25rem; margin: 0; font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.5; display: grid; gap: 0.3rem; }
.lm-then { font-family: var(--font-ui); font-size: 0.9375rem; color: var(--ink-soft); margin: 0.4rem 0 0; }
.lm-date { color: var(--ink); }
.lm-timing-recommended-timing .lm-k, .lm-timing-sequence-only .lm-k { color: var(--air); }
.lm-timing-statutory-deadline .lm-k, .lm-timing-agency-deadline .lm-k { color: var(--ink); }
.lm-boundaries { margin: 0.85rem 0 0; }
.lm-boundary { font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.5; color: var(--halt); margin: 0 0 0.35rem; padding-left: 1rem; border-left: 2px solid var(--halt); }
.lm-foot { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--rule); display: grid; gap: 0.35rem; }
.lm-status-sentence { font-family: var(--font-ui); font-size: 0.875rem; color: var(--ink-soft); margin: 0; }
.lm-source-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.35rem; font-size: 0.875rem; }
.lm-source-fields { color: var(--ink-mute); text-transform: lowercase; margin-right: 0.35rem; }
.lm-source-when { color: var(--ink-mute); }
.lm-report { margin: 0.35rem 0 0; }
.lm-text-action { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-family: var(--font-ui); font-size: 0.875rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--tap); }
.lm-text-action:hover, .lm-text-action:focus-visible { color: var(--ink); }
.lm-text-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lm-text-action[disabled] { color: var(--ink-mute); text-decoration: none; cursor: default; }
.lm-missing-say { font-size: 1.0625rem; line-height: 1.5; margin: 0 0 0.5rem; }
/* Inline links inside the card (a phone number in the where block, a form, a
   source) are tap targets too: the same floor the evidence link keeps. */
.lm-card a:not(.button):not(.action-link) { display: inline-block; min-height: 28px; padding: 0.2rem 0; }
@media (max-width: 40rem) { .lm-card a:not(.button):not(.action-link) { min-height: var(--tap); padding: 0.55rem 0; } }

/* The mismatch dialog: same drawing as the content-gap dialog. */
.lm-dialog { border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); padding: 1.5rem; max-width: min(34rem, calc(100vw - 2rem)); width: 100%; border-radius: 0; }
.lm-dialog::backdrop { background: rgba(43, 34, 24, 0.42); }
.lm-dialog-form { display: grid; gap: 0.9rem; }
.lm-dialog-title { font-family: var(--font-ui); font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin: 0; }
.lm-dialog-lede { font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-mute); margin: -0.35rem 0 0; }
.lm-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lm-reasons { border: 0; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.lm-reasons > legend { padding: 0; }
.lm-reason { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.4; min-height: var(--tap); cursor: pointer; border: 1px solid var(--rule-firm); padding: 0 0.75rem; background: transparent; }
.lm-reason:hover, .lm-reason:focus-within { background: var(--paper-deep); }
.lm-reason input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lm-reason-mark { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 1px solid var(--rule-firm); flex: none; }
.lm-reason input:checked + .lm-reason-mark { background: var(--accent-deep); border-color: var(--accent-deep); }
.lm-reason input:focus-visible + .lm-reason-mark { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-dialog-label { font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 500; }
.lm-field { font: inherit; font-family: var(--font-ui); font-size: 0.9375rem; color: var(--ink); background: var(--surface); border: 1px solid var(--ink-mute); border-radius: 0; padding: 0.6rem 0.7rem; width: 100%; box-sizing: border-box; resize: vertical; }
.lm-field:focus, .lm-field:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-dialog-error { font-family: var(--font-ui); font-size: 0.875rem; color: var(--halt); margin: 0; }
.lm-dialog-actions { display: flex; align-items: center; gap: 1.25rem; margin: 0.25rem 0 0; }
.lm-dialog-done { font-family: var(--font-ui); font-size: 0.9375rem; margin: 0; }

/* The review route. */
.lm-review .lm-toc ol { font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.6; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
.lm-scn { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule-strong); }
.lm-scn-head h2 { margin: 0.25rem 0 0.35rem; }
.lm-scn-situation { font-size: 1.0625rem; line-height: 1.5; margin: 0; }
.lm-scn-also { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; margin: 1.5rem 0 0; }
.lm-trace-list { font-family: var(--font-ui); font-size: 0.875rem; display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0.5rem 0 0; }
.lm-trace-list dt { color: var(--ink-mute); }
.lm-trace-list dd { margin: 0; }
.lm-routing { font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.5; display: grid; gap: 0.5rem; padding-left: 1.1rem; }
.lm-route-resolved { color: var(--air); }
.lm-route-confirm, .lm-route-ambiguous, .lm-route-needs-more { color: var(--warn); }
.lm-matrix-wrap { overflow-x: auto; margin: 0.75rem 0; max-width: 100%; min-width: 0; }
.lm-matrix-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-scn { min-width: 0; }
.lm-review code, .lm-trace-list dd, .lm-source-list li, .lm-routing li, .lm-channel, .lm-address { overflow-wrap: anywhere; }
.lm-matrix { border-collapse: collapse; font-family: var(--font-ui); font-size: 0.8125rem; }
.lm-matrix caption { text-align: left; caption-side: top; font-size: 0.875rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.lm-matrix th, .lm-matrix td { border: 1px solid var(--rule); padding: 0.3rem 0.4rem; text-align: center; }
.lm-matrix th[scope=row] { text-align: left; white-space: nowrap; }
.lm-matrix-h { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.lm-cell-v { background: var(--air-wash); color: var(--ink); font-weight: 600; }
.lm-cell-p { color: var(--ink-soft); }
.lm-cell-s { color: var(--air); }
.lm-cell-r { color: var(--warn); font-weight: 600; }
.lm-cell-m { color: var(--halt); }
.lm-grade { display: inline-block; min-width: 1.5em; text-align: center; font-family: var(--font-ui); font-weight: 600; border-bottom: 2px solid currentColor; }
.lm-grade-A { color: var(--air); }
.lm-grade-B { color: var(--ink); }
.lm-grade-C { color: var(--ink-soft); }
.lm-grade-D { color: var(--ink-mute); }
.lm-grade-E { color: var(--warn); }
.lm-grade-F { color: var(--warn); }
.lm-grade-G { color: var(--halt); }
.lm-grade-none { color: var(--ink-mute); }
td.lm-grade-A { background: var(--air-wash); font-weight: 600; }
td.lm-grade-G, td.lm-grade-F, td.lm-grade-E { font-weight: 600; }
.lm-conflict { font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.5; color: var(--warn); margin: 0.35rem 0; padding-left: 1rem; border-left: 2px solid var(--warn); }
.lm-known { font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); margin: 0.35rem 0; }
.lm-table td, .lm-table th { overflow-wrap: anywhere; }
.lm-table .lm-note, .lm-list .lm-note { overflow-wrap: anywhere; word-break: break-word; }
.lm-review .lm-list li { overflow-wrap: anywhere; }
.lm-access, .lm-volatile { margin-top: 0.35rem; }
.lm-prereq .lm-list { margin-top: 0.25rem; }
.lm-table { border-collapse: collapse; font-family: var(--font-ui); font-size: 0.875rem; width: 100%; margin: 0.75rem 0; }
.lm-table th, .lm-table td { border-bottom: 1px solid var(--rule); padding: 0.4rem 0.5rem; text-align: left; vertical-align: top; }
.lm-table th[scope=col] { color: var(--ink-mute); font-weight: 500; }
@media (max-width: 40rem) {
  .lm-actions { flex-direction: column; align-items: stretch; }
  .lm-primary { width: 100%; justify-content: center; }
  .lm-review .lm-toc ol { columns: 1; }
  .lm-trace-list { grid-template-columns: 1fr; }
}
@media print {
  .lm-actions, .lm-provider, .lm-report, .lm-text-action, .lm-alternatives > summary { display: none; }
  .lm-alternatives { display: block; }
  .lm-alternatives > .lm-alt-list { display: grid; }
}

.briefings-signup {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--rule);
}
.briefings-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.briefings-copy { max-width: 32rem; }
/* ONE CELL FOR BOTH. The form and its confirmation are siblings inside this
   panel, so the confirmation appears exactly where the form was rather than
   wrapping to a new grid row beside it. Before this, .briefings-done was a
   third child of the two-column .briefings-inner and landed under the copy. */
.briefings-panel { min-width: 0; }
.briefings-form { display: grid; gap: var(--space-3); max-width: 34rem; }
.briefings-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
  padding: 0;
}
.briefings-row { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; }
.briefings-email { flex: 1 1 16rem; min-height: 48px; }
.briefings-submit { flex: none; }
.briefings-fieldset { border: 0; padding: 0; margin: 0; }

/* Choices are pressed, and a field is typed into: the two must never look the
   same. These read as controls with a hairline and a hit area, not as inputs. */
.briefings-worlds, .briefings-cadence { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.briefings-check, .briefings-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-firm);
  cursor: pointer;
}
.briefings-check:hover, .briefings-radio:hover,
.briefings-check:focus-within, .briefings-radio:focus-within { background: var(--paper-deep); }
.briefings-check input, .briefings-radio input {
  width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; margin: 0;
}
/* Chosen. The accent is the colour that means settled, so a held choice wears
   its wash; the edge stays firm, because a chosen thing can be pressed again. */
.briefings-check:has(input:checked), .briefings-radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.briefings-note, .briefings-fine {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0.55rem 0 0;
  max-width: 34rem;
}
/* The consent control is the one thing here that must never be mistaken for
   decoration, so it gets the width of the form and a hairline above it. */
.briefings-consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}
.briefings-consent input {
  width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; accent-color: var(--accent); flex: none;
}
.briefings-error {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--warn-ink, #7d5f33);
  border-left: 3px solid var(--warn, #7d5f33);
  padding-left: 0.75rem;
  margin: 0;
}
/* The success state replaces the form in place. No redirect, no modal, no
   upsell: the person did the thing, and the page says so. */
.briefings-done { max-width: 34rem; }
.briefings-done-heading {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  margin: 0 0 0.5rem;
}
.briefings-done-detail, .briefings-done-note {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}
.briefings-done-note { color: var(--ink-mute); }
.briefings-done-action { margin: 0.75rem 0 0; font-family: var(--font-ui); font-size: 0.9375rem; }

@media (max-width: 60rem) {
  .briefings-inner { grid-template-columns: minmax(0, 1fr); }
}

/* The three Journal cards. Same construction as .world-door: a hairline over a
   transparent panel, filling on hover. Three columns at width, one below. */
.journal-home {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--rule);
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(2px, 0.4vw, 6px);
  margin-top: clamp(1.4rem, 2.6vw, 2.1rem);
}
.journal-card {
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1rem, 1.6vw, 1.35rem) clamp(1.4rem, 2.2vw, 1.75rem);
  border-top: 1px solid var(--rule-strong);
  background: transparent;
  display: flex;
  flex-direction: column;
  transition: background 120ms linear;
}
.journal-card:hover, .journal-card:focus-within { background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .journal-card { transition: none; } }
.journal-card-world {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.6rem;
}
.journal-card-heading {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.28;
  letter-spacing: var(--track-tight);
  margin: 0 0 0.55rem;
}
.journal-card-heading a { color: inherit; text-decoration: none; }
.journal-card-heading a:hover, .journal-card-heading a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.journal-card-dek {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  flex: 1;
}
.journal-card-read { margin: 0; font-family: var(--font-ui); font-size: 0.9375rem; }
.journal-card-read a { color: var(--accent); text-decoration: none; }
.journal-card:hover .journal-card-read a { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 52rem) {
  .journal-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* The preference center. Same controls as the homepage module. */
.briefings-prefs { margin-top: var(--space-4); max-width: 38rem; }
.briefings-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--space-3) 0 0; }
.briefings-secondary {
  min-height: 44px;
  padding: 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
}
.briefings-secondary:hover, .briefings-secondary:focus-visible { border-color: var(--ink); }
/* Leaving is not a punishment and is not drawn as one: same size, same weight,
   same hit area as everything beside it. */
.briefings-stop-all { color: var(--ink-soft); }
.briefings-leaving { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.briefings-saved { font-family: var(--font-ui); font-size: 0.9375rem; color: var(--accent); margin: var(--space-2) 0 0; }
/* ─────────────────────────────────────────────────────────────────────
   The plan over time, and the work already behind the reader

   RESTRAINT IS THE DESIGN.

   There is no confetti here, no streak, no badge and no colour that
   congratulates. A person using this has usually just lost somebody or is
   watching a parent decline, and a productivity celebration in that moment is
   an insult dressed as encouragement. What completion does instead is what
   crossing a line out in a good notebook does: the line quietens, it stays
   legible, and the page gets shorter.

   Completion is never carried by colour or strikethrough alone. The checkbox
   holds the state, the label says the word, and the styling is the third
   signal. See §19 of the brief and the accessibility tests.
   ───────────────────────────────────────────────────────────────────── */

.hb-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--line);
}
.hb-done-box {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.hb-done-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  /* A target a thumb finds without aiming. The label is the extension of the
     box, so the pressable area is the height of a finger rather than the size
     of the glyph — 2.75rem is the 44px this product holds itself to. */
  padding: 0.5rem 0.5rem 0.5rem 0;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.hb-done-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A finished card recedes. It does not vanish: "did I already do that?" is the
   question a disappearing checklist creates, and it costs more than the space
   the card takes up. */
.hb-action.is-done { opacity: 0.55; }
.hb-action.is-done .hb-action-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.hb-action.is-done .hb-done-label { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .hb-action { transition: opacity 160ms ease; }
}

.sb-handled-count {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
}
.sb-handled-list { list-style: none; margin: 0; padding: 0; }
.sb-handled-row {
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.sb-handled-row:last-child { border-bottom: 0; }
.sb-handled-mark { color: var(--accent); font-size: 0.875rem; }
.sb-handled-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.sb-handled-title { font-family: var(--font-body); font-size: 1rem; color: var(--ink-mute); }
.sb-handled-state {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.sb-handled-note {
  flex-basis: 100%;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.125rem 0 0;
}

/* When, said as a window rather than as a due date. */
.sb-when {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0.25rem 0 0.75rem;
}
.sb-schedule-honesty {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin: 0 0 1.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--line);
}
/* Work whose place is decided by other work reads differently from work with a
   window, because it is a different kind of claim. */
.sb-seg-dependency > .sb-h, .sb-seg-flexible > .sb-h { color: var(--ink-mute); }

.sb-viewswitch { display: inline-flex; gap: 0.25rem; align-items: center; }
.sb-viewswitch-btn.is-current {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}

@media print {
  /* A printed plan is a record, not a control surface. The checkbox becomes a
     box somebody can tick with a pen, and the switch between views has no
     meaning on paper. */
  .sb-viewswitch { display: none; }
  .hb-done-label { display: none; }
  .hb-action.is-done { opacity: 1; }
}

/* The one sentence that says what the dates below are and are not. It is a
   statement about the whole schedule, so it sits on its own rather than
   trailing the section above it. */
.sb-honesty { padding-top: 0.25rem; }
.sb-honesty .sb-schedule-honesty { margin-bottom: 0; }

/* One line per thing, in the view that answers "when".
   ─────────────────────────────────────────────────────────────────────
   THE WORDS ARE THE LABEL, SO THE WHOLE LINE IS THE CONTROL.

   A checkbox is 20px because that is what a checkbox looks like, and 20px is
   not a thing a thumb finds while standing in a hospital corridor. Making the
   title the label solves both problems at once: the visible control stays the
   right size, the pressable area is the whole row, and a box can never appear
   with nothing beside it to say what it is for. */
.sb-rows { list-style: none; margin: 0; padding: 0; }
.sb-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.sb-row:last-child { border-bottom: 0; }
.sb-row > .hb-done-box {
  flex-shrink: 0;
  /* Optically aligned to the first line of the label rather than to the box
     model, which sits it a little high beside serif text. */
  margin: 0.9375rem 0 0;
}
.sb-row-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  flex: 1;
  cursor: pointer;
  /* The tap target, and the reason it is big enough. */
  min-height: 2.75rem;
  padding: 0.6875rem 0;
}
.sb-row-title { font-family: var(--font-body); font-size: 1rem; line-height: 1.45; }
.sb-row-object, .sb-row-state {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sb-row-object { color: var(--ink-mute); }
.sb-row-state { color: var(--accent); }
.sb-row.is-done .sb-row-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.sb-row.is-done { opacity: 0.55; }
.sb-row > .hb-done-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media print {
  .sb-row > .hb-done-box { border: 1px solid var(--ink); }
}


/* A date fixed by a rule.
   ─────────────────────────────────────────────────────────────────────
   IT IS NOT BAD NEWS AND IT IS NOT DRAWN LIKE BAD NEWS.

   No red, no warning triangle, no alarm. A deadline a reader learns three
   months early is the good outcome, and colouring it like a failure would make
   the one date in this product they can act on the one they least want to look
   at. What separates it from a suggested window is the words and the
   derivation underneath — a fixed date says what fixed it. */
.hb-deadline {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0 0.625rem 0.75rem;
  border-left: 2px solid var(--accent);
}
.hb-deadline-when {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.4;
}
.hb-deadline-when .mini-label { color: var(--accent); }

/* The derivation. Closed by default, because most readers want the date and
   not the arithmetic — and open to anyone who wants to check it, because a
   date nobody can check is a date nobody should rely on. */
.hb-deadline-why { margin-top: 0.5rem; }
.hb-deadline-why > summary {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
.hb-deadline-why > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-deadline-chain {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.hb-deadline-chain dt { color: var(--ink-mute); }
.hb-deadline-chain dd { margin: 0; }
.hb-deadline-note {
  margin: 0 0 0.375rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.hb-deadline-source { margin: 0; font-family: var(--font-ui); font-size: 0.8125rem; }

/* In the schedule, the fixed date sits where a suggested window would, and
   reads as the different kind of claim it is. */
.sb-when-fixed { color: var(--ink); }
.sb-when-fixed .mini-label { color: var(--accent); }
.sb-seg-deadline > .sb-h { color: var(--ink); }

@media print {
  /* On paper the derivation is not a control, so it is simply there. */
  .hb-deadline-why[open] > summary, .hb-deadline-why > summary { list-style: none; }
  .hb-deadline-why > * { display: block !important; }
}

/* ── The content gap: "Tell us what's missing" ─────────────────────
   A content needs radar, not a feedback inbox. The entry is a text control
   drawn like "Start chat over" (a quiet way out, never a button with a
   button's weight); the form is a native dialog in the site's own field
   vocabulary. Pre-Handbook pass, 2026-09-17. */
.gap-link {
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 0 1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.gap-link:hover, .gap-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.gap-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gap-link-about { font-size: 0.9375rem; color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.footer-gap { margin: 0 0 0.6rem; }
.chat-gap-ask { font-family: var(--font-ui); font-size: 0.875rem; color: var(--ink-mute); margin: 0.9rem 0 0; }
.chat-gap-ask .gap-link { font-size: 0.875rem; min-height: 0; }

.gap-dialog {
  width: min(34rem, calc(100% - 2rem));
  max-width: none;
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.gap-dialog::backdrop { background: rgba(43, 34, 24, 0.42); }
.gap-title { font-family: var(--font-ui); font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.85rem; color: var(--ink); }
.gap-chat-note { font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-mute); margin: -0.35rem 0 0.9rem; }
.gap-form { display: grid; gap: 0.9rem; }
.gap-field { display: grid; gap: 0.35rem; }
.gap-label { font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.gap-text, .gap-email {
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.gap-text { resize: vertical; min-height: 5.25rem; }
.gap-text:focus, .gap-email:focus { border-color: var(--accent-deep); outline: 2px solid var(--accent); outline-offset: 2px; }
.gap-count { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); margin: 0; }
.gap-count.gap-count-over { color: var(--halt); }
.gap-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gap-check { display: flex; align-items: flex-start; gap: 0.6rem; font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.gap-check input { margin: 0.2rem 0 0; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--accent-deep); }
.gap-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gap-note { font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-mute); margin: 0; }
.gap-error { font-family: var(--font-ui); font-size: 0.875rem; color: var(--halt); margin: 0; }
.gap-actions { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 0; }
.gap-submit {
  font: inherit; font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 500;
  background: var(--accent-deep); color: var(--paper); border: 1px solid var(--accent-deep);
  padding: 0.6rem 1.15rem; border-radius: 0; cursor: pointer; min-height: var(--tap);
}
.gap-submit[disabled] { opacity: 0.6; cursor: default; }
.gap-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gap-cancel {
  font: inherit; font-family: var(--font-ui); font-size: 0.9375rem; color: var(--ink-soft);
  background: none; border: 0; border-bottom: 1px solid var(--rule-strong); padding: 0 0 1px; cursor: pointer; min-height: var(--tap);
}
.gap-cancel:hover, .gap-cancel:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.gap-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gap-done p { font-family: var(--font-ui); color: var(--ink-soft); margin: 0 0 0.9rem; }
.gap-plain { padding: 3rem 1rem; }

/* The Handbook door's sentence: one line under the doors, full width, in
   the meta voice, so the door explains itself where it appears. */
.chat-offer-why {
  /* Under the doors, never beside them and never pushing "Start chat over"
     off its row. A 44ch cap let the sentence fit BESIDE the doors and read as
     a fourth control; without the cap its length became the row's own width
     and "Start chat over" dropped a line. Inline-size containment takes the
     sentence out of the row's intrinsic width entirely, so it is laid out at
     the doors' width and wraps there. */
  contain: inline-size;
  flex: 1 0 100%;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0;
}
.chat-offer-handbook { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

/* THE 404's TWO WAYS ON, side by side: search (quiet) and the conversation
   (primary). Same pair the search no-match state offers, so the two recovery
   surfaces read as one idea. */
.nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: var(--space-3); }

/* ══ THE SAHVELO JOURNAL ════════════════════════════════════════════
   Rebuilt 2026-09-28 as a publication surface, after Jordan read the second
   article on the live site. The reading page had one width (a 34em column in
   a 46rem wrap), mechanical spacing, and a decision flow drawn as a numbered
   list with "Go to question 3" links. This is the editorial shell it needed:

     THREE WIDTHS, ON PURPOSE.
       prose   46rem   what is read, at a measure that does not wrap every clause
       wide    the content column   a table, the decision flow: scanned, not read
       full    the whole canvas     the cover and the state finder: the page's objects

     A RAIL, ONLY WHERE THERE IS ROOM. At 74rem and up the jump list and the
     filing sit beside the prose and stay with the reader; below that they fold
     inline under the cover, once. Never a second navigation on a phone.

     SPACE IS SEMANTIC. Tight where things belong together (title, deck, meta;
     a heading and its first paragraph); a real pause before a conceptual
     change (an h2) and around the page's feature modules. Never a token for
     its own sake.

   The values are this site's own tokens. Nothing here introduces a colour,
   a face or a tracking value; the serif reaches the Journal's titles through
   the one shared display selector at the top of this file. */

.jr-article, .jr-index {
  --jr-prose: 46rem;
  --jr-rail: 14rem;
  --jr-gap: 3rem;
}

/* ── Eyebrow, shared ── */
.jr-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.jr-eyebrow a { color: var(--accent); text-decoration: none; }
.jr-eyebrow a:hover, .jr-eyebrow a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ── The filing: journey, then topics. Words a reader can use; each topic is
   a door to the guidance it names. ── */
.jr-filing { display: flex; flex-wrap: wrap; gap: 0.4rem 0.4rem; margin: 0; }
.jr-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--rule);
  background: transparent;
}
.jr-tag-journey { color: var(--accent); border-color: var(--accent); }
a.jr-tag:hover, a.jr-tag:focus-visible { color: var(--accent); border-color: var(--accent); }

/* ── The article head ──
   Title, deck, then one line of metadata and one of provenance on a hairline.
   The head is the width of the canvas but the words stop at a measure. */
.jr-head { padding: 0.5rem 0 0; }
.jr-head h1 {
  font-size: clamp(2.125rem, 1.35rem + 2.2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: var(--track-display);
  margin: 0 0 0.85rem;
  max-width: 24ch;
}
.jr-deck {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 36em;
  margin: 0 0 1.1rem;
}
.jr-meta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.5rem;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--rule);
  max-width: var(--jr-prose);
}
.jr-meta, .jr-row-date {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin: 0;
}
.jr-verify {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
}
.jr-verify a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.jr-verify a:hover, .jr-verify a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ── The cover ──
   Full canvas, 2:1, under the metadata: the page opens on the photograph after
   the reader knows what they are opening. Sized by the img's own width and
   height so nothing shifts when it arrives; the focal point decides the crop. */
.jr-cover { margin: 1.5rem 0 0; }
.jr-cover-pic { display: block; }
.jr-cover-pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--paper-deep);
}
/* On a wide canvas the cover is a band across the page, not a masthead: at
   1440 it stands about 540px tall and the first paragraph is one scroll away. */
@media (min-width: 64rem) { .jr-cover-pic img { aspect-ratio: 21 / 9; } }
.jr-cover-credit {
  margin: 0.45rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-mute);
  text-align: right;
}
.jr-cover-credit a { color: var(--ink-mute); text-decoration: none; }
.jr-cover-credit a:hover, .jr-cover-credit a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.jr-cover-caption { color: var(--ink-soft); }
.jr-cover-caption + .jr-cover-who::before { content: "\00b7\00a0"; }

/* ── The layout: rail + body ── */
.jr-layout { margin: 1.75rem 0 0; }
.jr-rail { margin: 0 0 1.5rem; }
.jr-rail .jr-filing { margin: 1rem 0 0; }

/* ── On this page ──
   Inline under the cover on a narrow screen; in the rail, sticky, at width.
   One node in either case: a screen reader meets it once. */
.jr-contents {
  padding: 0.9rem 1.1rem 1rem;
  background: var(--paper-soft);
  border-left: 2px solid var(--accent);
  max-width: var(--jr-prose);
}
.jr-contents-h {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.jr-contents-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.25rem;
}
.jr-contents-list li { margin: 0; }
.jr-contents-list a {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  padding: 0.2rem 0;
}
.jr-contents-list a:hover,
.jr-contents-list a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ── The prose ──
   The measure belongs to the prose, not the container, so a module can take
   the column or the canvas without a negative margin. 18px at 1.6, which at
   46rem is about seventy-five characters a line: wide enough that a clause
   is not broken on every line, narrow enough to find the next line. */
.jr-body { max-width: none; min-width: 0; }
.jr-body > p,
.jr-body > h2,
.jr-body > h3,
.jr-body > ul,
.jr-body > ol,
.jr-body > .jr-note { max-width: var(--jr-prose); }
.jr-body p {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.05rem;
}
.jr-body > p:first-child {
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--ink);
}
/* A heading is a pause before a new idea: room above it, its first paragraph
   held close beneath. */
.jr-body h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin: 2.5rem 0 0.65rem;
  scroll-margin-top: 5rem;
}
.jr-body h2 + p { margin-top: 0; }
.jr-body ul { margin: 0 0 1.1rem 1.15rem; padding: 0; }
.jr-body li { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 0.45rem; }
.jr-body a { color: var(--accent); }
.jr-note {
  border-left: 2px solid var(--rule-strong);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-mute);
}
.jr-back {
  margin: 2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}
.jr-back a { color: var(--accent); text-decoration: none; }
.jr-back a:hover, .jr-back a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ── Wide and full modules ── */
.jr-wide { max-width: none; }
.jr-full { max-width: none; }

/* ── The state finder ──
   The page's one structural object: the door from a national answer to the
   state's own procedure. Full canvas. Paper on paper, one chestnut rule, the
   mark once. */
.jr-feature {
  margin: 2.25rem 0;
  background: var(--paper-soft);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
}
.jr-feature-inner {
  padding: 1.6rem 1.75rem 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 3rem;
}
.jr-feature-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.jr-feature-mark { width: 0.7rem; height: 0.805rem; flex: none; margin-top: 0.12rem; color: var(--accent); }
.jr-feature-h {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin: 0 0 0.6rem;
  max-width: 24em;
}
.jr-feature-text {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  max-width: 38em;
}
.jr-feature-offers {
  display: grid;
  gap: 1rem 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  margin: 0 0 1.4rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
}
.jr-feature-offer-label {
  margin: 0 0 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.jr-feature-offer-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-mute);
}
/* THE CONTROL LOOKS LIKE WHAT IT DOES. A choice with a committing press beside
   it: the select carries a border and a caret, the button is filled. Nothing
   here can be mistaken for a text input. */
.jr-feature-find { margin: 0 0 0.9rem; }
.jr-feature-find-label {
  display: block;
  margin: 0 0 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.jr-feature-find-row { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 34rem; }
.jr-feature-find-select {
  flex: 1 1 13rem;
  min-width: 0;
  min-height: 2.875rem;
  padding: 0.55rem 2.25rem 0.55rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b4a3a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.jr-feature-find-go {
  flex: 0 0 auto;
  min-height: 2.875rem;
  padding: 0.55rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
}
.jr-feature-find-go:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.jr-feature-cta {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
}
.jr-feature-cta a {
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  padding: 0.6rem 0;
}
.jr-feature-cta a:hover,
.jr-feature-cta a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.jr-feature-foot {
  margin: 0.1rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* ── The decision table ──
   Two columns across the content column: a fact, and what it decides. The
   first column is the label and stays narrow; the second carries the sentence. */
.jr-table-wrap { margin: 1.75rem 0 2rem; }
.jr-table { width: 100%; border-collapse: collapse; }
.jr-table-caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
  padding: 0 0 0.7rem;
}
.jr-table thead th {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0 1.5rem 0.5rem 0;
  border-bottom: 1px solid var(--rule-firm);
}
.jr-table thead th:last-child { padding-right: 0; }
.jr-table tbody th,
.jr-table tbody td {
  vertical-align: top;
  padding: 0.8rem 1.5rem 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}
.jr-table tbody td:last-child { padding-right: 0; }
.jr-table tbody th {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  width: 28%;
}
.jr-table tbody td { color: var(--ink-soft); }
/* Three columns: one question, two answers side by side. The question stays
   narrow; the two answers share the rest evenly and carry the program name
   as their column head, which on a phone becomes the label above each. */
.jr-table-3 tbody th { width: 22%; }
.jr-table-3 tbody td { width: 39%; }
.jr-table-3 tbody td + td { padding-left: 0.25rem; }

/* ── The decision flow ──
   ONE RAIL. A question sits on it, numbered. An answer that ends the decision
   branches sideways into an outcome, joined to the question by a hairline. An
   answer that continues stays on the rail as a small label with a chevron, and
   the next question is the next thing down. The last outcome closes the rail
   with the ink. No "go to" links, no arrows drawn as arrows, no cards.

   Rebuilt 2026-09-28 after founder review of the first version, which was a
   numbered list with hand-off links and standalone "No" blocks. */
.jr-flow {
  margin: 2.5rem 0 2.75rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule-firm);
  scroll-margin-top: 5rem;
}
.jr-flow-head { max-width: var(--jr-prose); margin: 0 0 1.75rem; }
.jr-flow-h {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.jr-flow-intro {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
}
.jr-flow-rail {
  list-style: none;
  margin: 0;
  padding: 0.125rem 0 1.25rem 2.5rem;
  position: relative;
}
/* The rail itself, and the square that closes it. */
.jr-flow-rail::before {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 0.25rem;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}
.jr-flow-rail::after {
  content: "";
  position: absolute;
  left: 0.375rem;
  bottom: -0.0625rem;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--ink);
}
.jr-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 2.75rem;
  row-gap: 0.9rem;
  margin: 0 0 1.9rem;
}
.jr-flow-step:last-child { margin-bottom: 0; }
/* The number sits ON the rail, in the accent, paper text. */
.jr-flow-n {
  position: absolute;
  left: -2.5rem;
  top: 0.05rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
}
.jr-flow-question {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.jr-flow-q { min-width: 0; display: block; }
.jr-flow-outs { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.jr-flow-out {
  position: relative;
  background: var(--paper-soft);
  border-left: 2px solid var(--rule-strong);
  padding: 0.8rem 1.1rem 0.9rem;
  margin: 0 0 0.75rem;
}
.jr-flow-out:last-child { margin-bottom: 0; }
/* The sideways branch: a hairline from the question's column into the outcome. */
.jr-flow-out::before {
  content: "";
  position: absolute;
  left: -2.75rem;
  width: 2.75rem;
  top: 1.05rem;
  height: 1px;
  background: var(--rule-strong);
}
.jr-flow-out--end { border-left-color: var(--ink); }
.jr-flow-out--end::before { background: var(--ink); }
.jr-flow-answer {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent);
}
.jr-flow-out--end .jr-flow-answer { color: var(--ink); }
.jr-flow-if { font-weight: 400; font-style: italic; color: var(--ink-mute); }
.jr-flow-then {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* The continuation: a label on the rail, and a chevron drawn on the rail
   itself pointing at the next question. */
.jr-flow-on {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  margin: 0;
  align-self: end;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.jr-flow-on .jr-flow-answer { display: inline; font-size: inherit; margin: 0; }
.jr-flow-on::before {
  content: "";
  position: absolute;
  left: -2.1875rem;
  top: 0.15rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--paper);
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.jr-flow-on-arrow {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.45rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-0.1rem) rotate(45deg);
}
.jr-flow-step:target .jr-flow-question { color: var(--accent); }
.jr-flow-notes {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
  max-width: var(--jr-prose);
}
.jr-flow-notes li {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  position: relative;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-mute);
}
.jr-flow-notes li:last-child { margin-bottom: 0; }
.jr-flow-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 1px;
  background: var(--accent);
}

/* ── Why Sahvelo says this ──
   The sources, in two columns where there is room: thirty-odd entries in one
   column were four and a half thousand pixels of page. */
.jr-sources {
  margin: 2.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule-firm);
}
.jr-sources-h {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.jr-sources-intro {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 1.1rem;
  max-width: 40em;
}
.jr-sources-list { list-style: none; margin: 0; padding: 0; }
.jr-source {
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  break-inside: avoid;
}
.jr-source-what {
  margin: 0 0 0.2rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.jr-source-where {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-mute);
  overflow-wrap: break-word;
}
.jr-source-where a { color: var(--accent); }
.jr-source-when { color: var(--ink-mute); white-space: nowrap; }

/* ── The landing ──
   A publication, not a list: the newest piece led by its cover, then the rest
   as rows a reader can scan. No filter chrome until there is something to
   filter. */
.jr-index-head {
  padding: 0.5rem 0 1.5rem;
  margin: 0 0 2rem;
  border-bottom: 1px solid var(--rule);
}
.jr-index-head h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  margin: 0 0 0.75rem;
}
.jr-index-lede {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0;
}
.jr-standard {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 40em;
  margin: 0.75rem 0 0;
}
.jr-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2.75rem; align-items: end; }
.jr-lead-art { display: block; }
.jr-lead-art img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; background: var(--paper-deep); }
/* The Journal's own picture: the landing hero, between the masthead and the
   newest piece. The same frame as an article cover (2:1, 21:9 on a wide
   screen, 3:2 on a phone), the focal point kept by object-position, the
   credit small beneath. No overlay and no words on the picture. */
/* The focal point of a Journal picture arrives as two classes in
   five-percent steps (jr-ox-60 jr-oy-55) rather than an inline style, which
   the Content-Security-Policy refuses. The derived crops already keep the
   subject in frame; this steers the re-crop a wider or narrower frame makes. */
.jr-cover-pic img, .rj-rich-art img, .jr-hero-pic img, .nav-group-art img { object-position: var(--jr-ox, 50%) var(--jr-oy, 50%); }
.jr-ox-0 { --jr-ox: 0%; }
.jr-ox-5 { --jr-ox: 5%; }
.jr-ox-10 { --jr-ox: 10%; }
.jr-ox-15 { --jr-ox: 15%; }
.jr-ox-20 { --jr-ox: 20%; }
.jr-ox-25 { --jr-ox: 25%; }
.jr-ox-30 { --jr-ox: 30%; }
.jr-ox-35 { --jr-ox: 35%; }
.jr-ox-40 { --jr-ox: 40%; }
.jr-ox-45 { --jr-ox: 45%; }
.jr-ox-50 { --jr-ox: 50%; }
.jr-ox-55 { --jr-ox: 55%; }
.jr-ox-60 { --jr-ox: 60%; }
.jr-ox-65 { --jr-ox: 65%; }
.jr-ox-70 { --jr-ox: 70%; }
.jr-ox-75 { --jr-ox: 75%; }
.jr-ox-80 { --jr-ox: 80%; }
.jr-ox-85 { --jr-ox: 85%; }
.jr-ox-90 { --jr-ox: 90%; }
.jr-ox-95 { --jr-ox: 95%; }
.jr-ox-100 { --jr-ox: 100%; }
.jr-oy-0 { --jr-oy: 0%; }
.jr-oy-5 { --jr-oy: 5%; }
.jr-oy-10 { --jr-oy: 10%; }
.jr-oy-15 { --jr-oy: 15%; }
.jr-oy-20 { --jr-oy: 20%; }
.jr-oy-25 { --jr-oy: 25%; }
.jr-oy-30 { --jr-oy: 30%; }
.jr-oy-35 { --jr-oy: 35%; }
.jr-oy-40 { --jr-oy: 40%; }
.jr-oy-45 { --jr-oy: 45%; }
.jr-oy-50 { --jr-oy: 50%; }
.jr-oy-55 { --jr-oy: 55%; }
.jr-oy-60 { --jr-oy: 60%; }
.jr-oy-65 { --jr-oy: 65%; }
.jr-oy-70 { --jr-oy: 70%; }
.jr-oy-75 { --jr-oy: 75%; }
.jr-oy-80 { --jr-oy: 80%; }
.jr-oy-85 { --jr-oy: 85%; }
.jr-oy-90 { --jr-oy: 90%; }
.jr-oy-95 { --jr-oy: 95%; }
.jr-oy-100 { --jr-oy: 100%; }
/* ── The Journal's hero ──
   The illustration is the masthead. On a wide screen it shows whole, 16:9,
   and the breadcrumb, eyebrow, title, lede and standard sit on the open sky in
   its upper left, in white, on nothing: the sky's own blue carries white text
   at 5.4:1. Below 64rem the copy comes first, on that same blue, and the
   picture follows, cropped around its focal point so the man and the books
   stay in frame and the words never sit on them. */
.jr-hero {
  position: relative;
  margin: 0 0 2.75rem;
  background: #117395;
  color: #fff;
  overflow: hidden;
}
.jr-hero-pic { display: block; }
.jr-hero-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.jr-hero-copy { padding: 1rem 1.5rem 1.75rem; }
.jr-hero .breadcrumbs { padding: 0; margin: 0 0 1.5rem; }
.jr-hero .breadcrumbs, .jr-hero .breadcrumbs a, .jr-hero .breadcrumbs li { color: rgba(255, 255, 255, 0.82); }
.jr-hero .breadcrumbs a:hover, .jr-hero .breadcrumbs a:focus-visible { color: #fff; }
.jr-hero .breadcrumbs li + li::before { opacity: 0.6; }
.jr-hero .jr-index-head { padding: 0; margin: 0; border: 0; }
.jr-hero .jr-eyebrow, .jr-hero .jr-eyebrow a { color: rgba(255, 255, 255, 0.85); }
.jr-hero .jr-index-head h1 { color: #fff; }
.jr-hero .jr-index-lede { color: rgba(255, 255, 255, 0.94); max-width: 30em; }
.jr-hero .jr-standard { color: rgba(255, 255, 255, 0.8); max-width: 34em; }
.jr-hero a:focus-visible { outline-color: #fff; }
@media (min-width: 64rem) {
  /* The words sit on the open sky in the upper left, moved a little to the
     right of the frame's edge and held above the clouds: the title is sized
     to take one line at every width, the lede is tighter, and the block ends
     within the top half of the picture, so nothing sits behind the type but
     blue. src/journal-brand.test.ts samples the picture under the copy. */
  .jr-hero-copy {
    position: absolute;
    top: 0;
    left: 5%;
    width: 46%;
    padding: 1.25rem 1.5rem 1.5rem 1.75rem;
  }
  .jr-hero .breadcrumbs { margin-bottom: 1rem; }
  .jr-hero .jr-eyebrow { margin-bottom: 0.45rem; }
  .jr-hero .jr-index-head h1 { font-size: clamp(2.125rem, 3.5vw, 3.375rem); margin-bottom: 0.6rem; white-space: nowrap; }
  .jr-hero .jr-index-lede { font-size: clamp(1.0625rem, 0.85rem + 0.45vw, 1.25rem); line-height: 1.4; max-width: 30em; }
  .jr-hero .jr-standard { margin-top: 0.6rem; line-height: 1.5; max-width: 36em; }
}
/* Between 64 and 80rem the sky is not tall enough for the whole masthead at
   16:9, so the frame grows to 3:2 (the focal point keeps the man and the
   books; a little of the paper trail leaves at the right) and the title takes
   one line, which keeps the words above the clouds and clear of the figure. */
@media (min-width: 64rem) and (max-width: 79.999rem) {
  .jr-hero-pic img { aspect-ratio: 3 / 2; }
}
@media (max-width: 63.999rem) {
  /* The words first, on the sky's own blue; the picture after them. */
  .jr-hero { display: flex; flex-direction: column; }
  .jr-hero-copy { order: -1; }
  .jr-hero-pic img { aspect-ratio: auto; height: 60vw; }
}
@media (max-width: 40rem) {
  .jr-hero-copy { padding: 0.75rem 1.25rem 1.5rem; }
  .jr-hero-pic img { height: 78vw; }
}
.jr-lead-body { min-width: 0; }
.jr-lead-eyebrow {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0 0 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.jr-lead-latest { color: var(--accent); font-weight: 600; letter-spacing: 0.09em; }
.jr-lead-title {
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  margin: 0 0 0.75rem;
}
.jr-lead-title a, .jr-row-title a { color: var(--ink); text-decoration: none; }
.jr-lead-title a:hover, .jr-lead-title a:focus-visible,
.jr-row-title a:hover, .jr-row-title a:focus-visible { color: var(--accent); }
.jr-lead-deck {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
  max-width: 34em;
}
.jr-lead .jr-filing { margin: 0 0 1rem; }
.jr-lead-cta { margin: 0; font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600; }
.jr-lead-cta a { color: var(--accent); text-decoration: none; display: inline-block; padding: 0.6rem 0; }
.jr-lead-cta a:hover, .jr-lead-cta a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.jr-more { margin: 2.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--rule-firm); }
.jr-more-h {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.jr-list { list-style: none; margin: 0; padding: 0; }
.jr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule);
}
.jr-row:first-child { border-top: 0; }
.jr-row-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-deep); }
.jr-row-body { min-width: 0; }
.jr-row-title {
  font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: var(--track-display);
  margin: 0.3rem 0 0;
}
.jr-row-deck {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40em;
  margin: 0.4rem 0 0;
}
.jr-row .jr-filing { margin: 0.75rem 0 0; }

/* ── Related from the Journal, on a canonical page ──
   The light line is the default. The rich feature is for the one page an
   article materially deepens. Both open in a new tab, on purpose (see
   scripts/journal-related.mjs), and say so to a screen reader. */
.rj-light {
  margin: 1.5rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: var(--prose-measure);
}
.rj-light a { color: var(--accent); text-decoration: none; }
.rj-light a:hover, .rj-light a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.rj-light cite { font-style: italic; }
.rj-rich {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.75rem;
  margin: 2rem 0 2.5rem;
  padding: 1.1rem 0 1.35rem;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
}
.rj-rich-art { display: block; }
.rj-rich-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-deep); }
.rj-rich-body { min-width: 0; }
.rj-eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.rj-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: var(--track-display);
}
.rj-title a { color: var(--ink); text-decoration: none; }
.rj-title a:hover, .rj-title a:focus-visible { color: var(--accent); }
.rj-why {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 40em;
}
.rj-cta { margin: 0; font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600; }
.rj-cta a { color: var(--accent); text-decoration: none; display: inline-block; padding: 0.5rem 0; }
.rj-cta a:hover, .rj-cta a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.rj-cta-arrow { margin-left: 0.3rem; }

/* ── The Journal in the Tools & Resources menu ──
   Not one more link in a column: a content plate at the foot of the panel,
   with the publication's name, what it is for, and the way in. In the phone
   drawer it is the same plate, full width. */
.nav-group-content {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--paper-soft);
  border-top: 2px solid var(--accent);
}
.nav-group-content .nav-group-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.nav-group-content .nav-group-title {
  display: inline-block;
  min-height: 0;
  margin: 0 0 0.3rem;
  padding: 0;
  border: 0;
  text-transform: none;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--ink);
}
.nav-group-content .nav-group-note {
  display: block;
  margin: 0 0 0.6rem;
  max-width: 40em;
}
.nav-group-content .nav-group-list { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.nav-group-content .nav-group-list a { font-weight: 600; color: var(--accent); }
.nav-group-content .nav-group-latest {
  margin: 0.4rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.nav-group-content .nav-group-latest a { color: var(--ink-soft); }
/* The plate's preview: the Journal's own picture at about a third of the
   plate, to the right of the words on a wide screen, and after them at full
   width in the drawer. Without a picture the plate is exactly what it was. */
.nav-group-content.has-art { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: 1.5rem; align-items: stretch; }
.nav-plate-body { min-width: 0; }
.nav-group-art { display: block; min-width: 0; }
.nav-group-art img { display: block; width: 100%; height: 100%; min-height: 9rem; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-deep); }
@media (max-width: 60rem) {
  .nav-group-content.has-art { display: block; }
  .nav-group-art { margin-top: 1rem; }
  .nav-group-art img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
}

/* ── The homepage module ──
   The newest article with its cover beside it where it has one; the rest as
   a short list. Never a card grid. */
.journal-home-head { margin: 0 0 1.5rem; }
.journal-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.25rem; align-items: center; max-width: 60rem; }
.journal-lead-art { display: block; }
.journal-lead-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-deep); }
.journal-lead-body { min-width: 0; }
.journal-lead-date {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin: 0;
}
.journal-lead-title {
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.18;
  letter-spacing: var(--track-display);
  margin: 0.4rem 0 0;
}
.journal-lead-title a { color: var(--ink); text-decoration: none; }
.journal-lead-title a:hover, .journal-lead-title a:focus-visible { color: var(--accent); }
.journal-lead-deck {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}
.journal-more { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.journal-more li { padding: 0.65rem 0; border-top: 1px solid var(--rule); }
.journal-more a { font-family: var(--font-body); font-size: 1.0625rem; color: var(--ink); text-decoration: none; }
.journal-more a:hover, .journal-more a:focus-visible { color: var(--accent); }
.journal-home-all { margin: 1rem 0 0; font-family: var(--font-ui); font-size: 0.9375rem; }
.journal-home-all a {
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.75rem 0.5rem 0.75rem 0;
}
.journal-home-all a:hover, .journal-home-all a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ── Width breakpoints ── */
@media (min-width: 40rem) {
  .jr-row.has-cover { grid-template-columns: minmax(0, 1fr) 13rem; }
  .jr-row.has-cover .jr-row-art { order: 2; }
  .rj-rich { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .journal-lead.has-cover { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
  .jr-feature-inner { padding: 1.75rem 2rem 1.9rem; }
}
@media (min-width: 60rem) {
  .jr-sources-list { columns: 2; column-gap: 3rem; }
  .jr-source:first-child { border-top: 1px solid var(--rule); }
  .jr-lead.has-cover { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .jr-lead-body { padding-bottom: 0.25rem; }
}
/* The rail: only where a 46rem measure and a 14rem rail both fit with room. */
@media (min-width: 74rem) {
  .jr-layout {
    display: grid;
    grid-template-columns: var(--jr-rail) minmax(0, 1fr);
    column-gap: var(--jr-gap);
    align-items: start;
  }
  .jr-rail {
    position: sticky;
    top: 5rem;
    margin: 0;
  }
  .jr-rail .jr-contents { padding: 0 0 0 0.9rem; background: transparent; border-left: 2px solid var(--accent); max-width: none; }
  .jr-rail .jr-contents-list { display: block; }
  .jr-rail .jr-contents-list li { margin: 0; }
  .jr-rail .jr-contents-list a { display: block; padding: 0.3rem 0; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft); }
  .jr-rail .jr-contents-list a:hover, .jr-rail .jr-contents-list a:focus-visible { color: var(--accent); }
  .jr-rail .jr-filing { margin: 1.25rem 0 0 0.9rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
  /* A full module inside the body takes the content column; the rail stays
     beside it. Only the cover, which sits above the layout, runs the canvas.
     (The first draft pulled the state finder under the rail with a negative
     margin, and the sticky rail sat on top of it.) */
  .jr-feature-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: end; }
  .jr-feature-inner .jr-feature-eyebrow,
  .jr-feature-inner .jr-feature-h,
  .jr-feature-inner .jr-feature-text { grid-column: 1; }
  .jr-feature-inner .jr-feature-offers { grid-column: 1 / -1; }
  .jr-feature-inner .jr-feature-find { grid-column: 1 / -1; }
  .jr-feature-inner .jr-feature-cta { grid-column: 1; }
  .jr-feature-inner .jr-feature-foot { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
  .jr-cover-pic img { aspect-ratio: 3 / 2; }
  .jr-cover-credit { text-align: left; }
  .jr-flow-rail { padding-left: 2.1rem; }
  .jr-flow-rail::before { left: 0.5625rem; }
  .jr-flow-rail::after { left: 0.25rem; }
  .jr-flow-step { grid-template-columns: minmax(0, 1fr); row-gap: 0.7rem; margin-bottom: 1.6rem; }
  .jr-flow-n { left: -2.1rem; }
  .jr-flow-outs { grid-column: 1; grid-row: 2; }
  .jr-flow-on { grid-column: 1; grid-row: 3; }
  .jr-flow-on::before { left: -1.8rem; }
  /* On a phone the outcome hangs beneath its question with an elbow from the
     rail rather than a line from the side. */
  .jr-flow-out { margin-left: 0.25rem; }
  .jr-flow-out::before { left: -1.55rem; width: 1.3rem; top: 1rem; }
  .jr-flow-question { font-size: 1.0625rem; }
  .jr-body p, .jr-body li { font-size: 1.0625rem; }
  .jr-body > p:first-child { font-size: 1.1875rem; }
  .jr-body h2 { font-size: 1.4375rem; margin-top: 2.1rem; }
}
@media (max-width: 34rem) {
  .jr-feature-inner { padding: 1.4rem 1.15rem 1.5rem; }
  .jr-feature-find-select,
  .jr-feature-find-go { flex: 1 1 100%; }
  /* THE TABLE STACKS RATHER THAN SCROLLS. A two-column table at 320px is
     either sideways scrolling or four-character words; this keeps the pairing
     by putting the column name above each value. */
  .jr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jr-table tbody tr { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
  .jr-table tbody tr:first-child { padding-top: 0; }
  .jr-table tbody th,
  .jr-table tbody td { display: block; width: auto; padding: 0; border: 0; }
  .jr-table tbody td { margin-top: 0.3rem; }
  .jr-table-3 tbody td { width: auto; }
  .jr-table-3 tbody td + td { padding-left: 0; margin-top: 0.55rem; }
  .jr-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-family: var(--font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .jr-contents-list { gap: 0.15rem 1.1rem; }
  .jr-head h1 { max-width: none; }
}
@media print {
  .jr-rail { position: static; }
  .jr-flow-out, .jr-contents, .jr-feature { background: transparent; }
  .jr-cover-pic img { aspect-ratio: auto; }
}

/* ── /links/: the address in a social profile ──
   Mobile first, because that is where it is opened. One column, rows a thumb
   can hit, the newest article given more room, and the places to start under
   it. The palette and type are the site's; nothing here is a widget. */
.page-links .lk { padding-bottom: 3.5rem; }
.lk-head { padding: 0.25rem 0 1.5rem; border-bottom: 1px solid var(--rule); margin: 0 0 1.75rem; }
.lk-head h1 { margin: 0.25rem 0 0; }
.lk-lede { margin: 0.75rem 0 0; color: var(--ink-soft); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; max-width: 34em; }
.lk-section { margin: 0 0 2.25rem; }
.lk-h { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; }
.lk-list { list-style: none; margin: 0; padding: 0; }
.lk-item { border-top: 1px solid var(--rule); }
.lk-item:last-child { border-bottom: 1px solid var(--rule); }
.lk-item a { display: block; padding: 0.95rem 0; min-height: 2.75rem; color: var(--ink); text-decoration: none; }
.lk-item a:hover .lk-title, .lk-item a:focus-visible .lk-title,
.lk-item a:hover .lk-label, .lk-item a:focus-visible .lk-label { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.lk-kicker { display: block; font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-mute); margin: 0 0 0.3rem; }
.lk-kicker b { color: var(--accent); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; }
.lk-dot { margin: 0 0.4em; }
.lk-title { display: block; font-size: 1.125rem; line-height: 1.3; }
.lk-item-latest a { padding: 1.1rem 0 1.25rem; }
.lk-item-latest .lk-title { font-size: 1.5rem; line-height: 1.15; }
.lk-deck { display: block; margin: 0.5rem 0 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
/* The pictures. A Journal row with a cover carries it inside its one link:
   the newest at the page's full width above its words, 3:2 so it does not
   push the title below a phone's fold, the rest as a 4:3 thumbnail beside
   the words. The focal classes keep the subject in frame when the CSS
   re-crops the drawn card. */
.lk-art { display: block; }
.lk-art .jr-cover-pic { display: block; }
.lk-art img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--paper-deep); }
.lk-item-latest.has-art .lk-art { margin: 0 0 0.9rem; }
.lk-item-latest.has-art .lk-art img { aspect-ratio: 3 / 2; }
.lk-journal .lk-item.has-art:not(.lk-item-latest) a { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: 1rem; align-items: center; }
.lk-journal .lk-item.has-art:not(.lk-item-latest) .lk-art { order: 2; width: 6rem; }
.lk-journal .lk-item.has-art:not(.lk-item-latest) .lk-art img { aspect-ratio: 4 / 3; }
.lk-body { display: block; min-width: 0; }
.lk-go a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lk-label { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; }
.lk-go a::after { content: "\2192"; color: var(--ink-mute); flex: none; }
@media (min-width: 40rem) {
  .lk-item-latest .lk-title { font-size: 1.75rem; }
  .lk-title { font-size: 1.25rem; }
}