/* The site-wide finish (owner's direction, 11 September 2026).

   "Keep the cleaner ivory, deep navy and richer teal. Carry the new style through the header and
   menu, with more readable navigation and less widely spaced uppercase text."

   Every page carries its own inline styles, written over several passes; this file is loaded after
   them on every page, so the header, the menu, the labels and the buttons are defined once. Each
   selector starts with `html body` so it outranks the page's own rule for the same element without
   !important, and it only restyles: what shows or hides at which width stays with each page.

   Monospace is kept for timestamps and source references only (`.ts`). Everything that used to be a
   spaced, uppercase monospace label is now sentence case in the site's sans face. */

:root {
  --ink: #07172a;
  --paper: #fbfaf6;
  --teal: #1b7a71;
  --teal-deep: #13615a;
  --teal-light: #74c7bc;
  /* One teal, and one value for it. This used to say the brand files kept their own point color;
     they carried the older, greyer teal, the buttons carried this one, and the two met in the header
     bar on every page. The mark's point is this value too since 12 September 2026 (the pass is
     scripts/one-teal.mjs; the constant is in scripts/build-brand.mjs). Teal is the action color --
     buttons, links, the focus ring -- plus the point in the mark and the cleared gate in the hero's
     legend, both of which scripts/one-teal.mjs names and gives its reasons for. */
  --wash: rgba(27, 122, 113, 0.12);
  /* ── three teals, not two (the owner's correction, 12 September 2026 evening) ────
     scripts/one-teal.mjs, the same day, read "one teal, rationed" as two categories -- action,
     and everything else -- and deleted the second job teal was doing on this site: signing the
     brand's own name. The owner's correction, and the fuller measurement, is in this file's own
     header comment (scripts/identity-teal.mjs). Three categories, not two:
       1. ACTION -- --teal below. Buttons, links, the focus ring, the cleared gate. Unchanged.
       2. IDENTITY -- the two tokens just below. The mark's tittle and dot, the H1's full stops,
          the eyebrow square, a prose link's hover state, the text-selection highlight. Never a
          button, never a link's rest state -- a different value from action on purpose, so the
          brand signing its name is never mistaken for something to click.
       3. GROUND -- the hero's own radial gradient. Not a use of teal: atmosphere, exempt. */
  --teal-ident: #3f716e;
  --teal-ident-rgb: 63, 113, 110;
  --teal-ident-pale: #8fc4bf;
  /* ── one teal, rationed (the owner, 12 September 2026) ────────────────────
     Teal is the action color: buttons, links, the selected state of a link, the
     form caret and the focus ring that marks whichever control has focus. What
     used to borrow it -- eyebrows, folios, status labels, numerals, bullets,
     date lines, the hero's full stops -- is ink, quieted.
     THE OWNER ASKED FOR INK AT 40% for eyebrows and rules. Measured on ivory
     #fbfaf6 that composites to #999fa4 and reads 2.55:1, under the 4.5:1 floor
     for text. So label TEXT is ink at 62% (#646d78, 5.02:1 on #fbfaf6, 4.86:1
     on #f2f0e9) and only the marks and hairlines, which carry no words, take
     the 40%. */
  --label: rgba(7, 23, 42, 0.62);
  --mark: rgba(7, 23, 42, 0.4);
  /* THE THREE MOVES, one scale: the client-facing meaning carries the color,
     and each move keeps its word and a second device that is not color (a fill,
     a solid rule, a dashed rule). The owner's values, measured on every ground
     they are actually put on: Respond 4.77:1 on ivory #fbfaf6, 4.98:1 on white,
     4.77:1 as a fill under paper text; Prepare 4.69:1 and 4.90:1; Monitor
     6.81:1 and 7.11:1. None of the three is set as text on #f2f0e9, where
     Respond reads 4.37:1 and Prepare 4.29:1 -- the tags there carry a white
     fill of their own. */
  --mv-respond: #b4532b;
  --mv-prepare: #8a6d1f;
  --mv-monitor: #4a5a68;
  /* ON NAVY the owner's three fail. Against #0e2b3d -- the ground sampled from
     the painted pixel behind the hero's move labels, the section's two radial
     gradients included -- Respond reads 2.94:1, Prepare 3.00:1 and Monitor
     2.06:1: under the text floor, and two of them under 3:1. Each is lightened
     along its own hue (HSL hue and saturation held) until it clears 4.5:1 with
     margin: 4.82:1, 4.82:1 and 4.81:1. */
  --mv-respond-navy: #d77c56;
  --mv-prepare-navy: #b48f29;
  --mv-monitor-navy: #8396a7;
  /* one header height on every page (the inner pages were 72px, the home page 58px) */
  --hdr: 58px;
}
@media (max-width: 720px) {
  :root { --hdr: 54px; }
}

/* ── header: one deep-navy bar on every page ─────────────────────────────── */
html body #hdr { background: var(--ink); border-bottom: 1px solid rgba(252, 251, 247, 0.1); box-shadow: none; }
/* THE HEADER'S NAVIGATION, sentence case (the owner, 12 September 2026, after a designer's second
   review: "go with sentence case nav" — which is what their own 11 September direction said, and
   what the reviewer asked for). The case went to the mock's capitals earlier the same day and back;
   both turns, and what did NOT come back with it, are in scripts/header-nav-case.mjs. The route-wide
   test asserts sentence case and no label shouting outside the hero. */
html body #hdr nav a,
html body #hdr .signin,
html body #hdr .menu { font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; color: rgba(252, 251, 247, 0.82); }
html body #hdr nav a:hover,
html body #hdr nav a.cur,
html body #hdr nav a[aria-current="page"] { color: #fff; }
html body #hdr nav a::after { bottom: -1px; height: 2px; background: var(--teal-light); }
/* sizes only: whether the Menu button shows at a given width stays with each page's own rule */
html body #hdr .signin,
html body #hdr .menu { height: 40px; line-height: 38px; padding: 0 14px; font-size: 14.5px; font-weight: 500; color: #fff; background: transparent; border: 1px solid rgba(252, 251, 247, 0.6); box-sizing: border-box; }
html body #hdr .signin { display: inline-block; }
html body #hdr .signin:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); text-decoration: none; }
html body #hdr .menu:hover,
html body #hdr .menu[aria-expanded="true"] { border-color: #fff; }
html body #hdr .signin span { text-transform: none; letter-spacing: 0; font: inherit; }
html body #hdr :focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
/* the header's tagline, restored beside the wordmark (the owner's correction, 12 September 2026
   evening: it moved into the hero that morning and left the header's left side looking empty --
   scripts/header-tagline-restore.mjs). Hidden below 1100px: measured, the nav's five links and the
   sign-in control need the bar down to 1020px before the tagline stops causing horizontal overflow
   (found by widening from 960px, this rule's first value, until scrollWidth stopped exceeding
   clientWidth on /about/); 1100px matches the width the hero's own two-column layout already treats
   as "wide enough" and leaves 80px of margin over the measured 1020px. Below it the phone menu
   covers the same ground the tagline would anyway. */
html body #hdr .hdrtag { display: none; }
@media (min-width: 1100px) {
  html body #hdr .hb { margin-right: 0; }
  /* 18px RENDERED, not 18px declared (13 September 2026). The margin has said 18px since this rule
     was written and the gap beside the wordmark measured 52, because #hdr is a flex row whose own
     `gap: clamp(14px, 3vw, 34px)` is added to it. The margin cancels that gap and then spends the
     18, in the header's own expression rather than in a number copied out of it, so the two cannot
     drift: measured 18.0px at 1440, 1366, 1280 and 1100. */
  html body #hdr .hdrtag { display: inline-block; margin-left: calc(18px - clamp(14px, 3vw, 34px)); margin-right: auto; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17px; line-height: 1.3; letter-spacing: 0; color: var(--teal-ident-pale); white-space: nowrap; }
}
/* The brand basics set the full lockup at 96px and above; the header drew it at 86px, and at 75px on
   a phone (found 11 September 2026). */
html body #hdr .hb img { width: 132px; height: 40px; }
@media (max-width: 720px) { html body #hdr .hb img { width: 108px; height: 32px; } }

/* the phone menu: the same navy, larger targets, readable links */
html body #hdr.open nav { background: var(--ink); border-bottom: 1px solid rgba(252, 251, 247, 0.12); padding: 4px var(--pad, 20px) 16px; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.5); }
html body #hdr.open nav a { padding: 13px 0; font-size: 17px; color: #fff; border-top: 1px solid rgba(252, 251, 247, 0.08); }
html body #hdr.open nav a:first-child { border-top: 0; }
html body #hdr.open nav a::after { display: none; }
@media (max-width: 720px) {
  html body #hdr .signin,
  html body #hdr .menu { padding: 0 12px; }
}

/* ── labels: sentence case, the sans face, almost no letter spacing ──────── */
html body .mono,
html body .folio,
html body .stamp,
html body .eyebrow,
html body .lab,
html body .role,
html body .pilotnote,
html body .fcount,
html body .dnum,
html body .num,
html body .qnum,
html body .prose h2:not(.sec-title),
html body figcaption span,
html body .plan > p.mono:first-child,
html body .shape > p.mono:first-child,
html body dt { font-family: var(--sans); font-weight: 500; letter-spacing: 0.005em; text-transform: none; }
html body .mono,
html body .folio,
html body .stamp,
html body .eyebrow,
html body .lab,
html body .role,
html body figcaption span { font-size: 14px; line-height: 1.5; }
html body main > section:first-child > p.mono:first-child,
html body .eyebrow,
html body .plan > p.mono:first-child,
html body .lab,
html body .folio { color: var(--label); }
html body .prose h2:not(.sec-title) { margin-top: 32px; font-size: 17px; line-height: 1.35; color: var(--ink); }
html body .pilotnote,
html body .fcount { font-size: 13.5px; font-weight: 400; line-height: 1.55; }
html body .dnum,
html body .num,
html body .qnum { font-size: 13px; font-variant-numeric: tabular-nums; }
html body dt { font-size: 13px; }
html body dd { font-family: var(--sans); letter-spacing: 0; }
html body label .mono { font-size: 15px; color: var(--ink); }
html body .dcap { font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: 0; }
html body .namenote { font-size: 13px; font-weight: 400; }
html body .fname,
html body #foot .fnote { font-weight: 400; font-size: 13px; }
/* page rules that are more specific than the ones above */
/* the founder page's own rules (eyebrow, role, record list) retired with the page on 12 September 2026; /about/ carries its rules itself */
html body .faqrow .qnum,
html body #demon .dnum { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
html body #demon .dcap { font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: 0; max-width: 36ch; }
html body #close .fcount { font-family: var(--sans); font-size: 13px; }
/* the ledger's rules retired with the ledger on 13 September 2026: the quiet day is drawn by the screening strip now (scripts/lib/screening-strip.mjs), which carries its own typography on both grounds */
html body #foot nav a { font-family: var(--sans); font-size: 14.5px; letter-spacing: 0; text-transform: none; }

/* timestamps and source references keep the monospace face, without capitals or spacing */
html body .ts,
html body .mono.ts { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; }

/* ── links that were set as small capitals ───────────────────────────────── */
html body .fnav a,
html body #foot .flinks a { font-family: var(--sans); font-size: 14.5px; letter-spacing: 0; text-transform: none; }
html body .back a,
html body .more a { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--teal-deep); }
html body .skip:focus { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; }

/* ── buttons: sentence case, one primary color ──────────────────────────── */
html body .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; border-width: 1.5px; }
html body .btn-solid { color: #fff; background: var(--teal); border-color: var(--teal); }
html body .btn-solid:hover { color: #fff; background: var(--teal-deep); border-color: var(--teal-deep); }

/* ── fixes from the independent visual review, 11 September 2026 ─────────── */
html body #hdr { height: var(--hdr); }
html body #hdr nav a[aria-current="page"]::after { right: 0; }
/* "Client sign in" on every page and width, as the inner pages already had it */
html body #hdr .signin .lo { display: inline; }
html body #hdr .signin .sh { display: none; }
/* one footer: navy, paper lockup, readable links */
html body #foot { background: var(--ink); color: rgba(252, 251, 247, 0.78); border-top: 0; }
html body #foot a,
html body #foot .fnav a,
html body #foot .flinks a { color: rgba(252, 251, 247, 0.9); }
html body #foot a:hover { color: #fff; }
html body #foot .fname,
html body #foot .fnote,
html body #foot .fmark { color: rgba(252, 251, 247, 0.7); }
/* the dark band: its heading at full strength, spacing instead of rules */
html body #demon #demon-h { color: var(--paper); border-bottom: 0; }
html body #demon .demo li { border-left: 0; }
/* Trust: section headings sat on their rules */
html body .band,
html body .faqgrid { margin-top: 20px; }
/* fewer rules: sections are separated by space, not lines of four different widths */
html body section.wrap,
html body section.wrap-wide,
html body #close { border-top: 0; }
html body .faqrow { margin-left: 0; margin-right: 0; }
html body .band .cell,
html body #constitution .cbox { border-left: 0; }
/* the constitution's three-column rule was retired on 11 September 2026 (S10, scripts/use-the-width.mjs) */
/* form fields and their boundaries at 3:1 */
html body #close input,
html body #close textarea { border-bottom-color: rgba(7, 23, 42, 0.55); }
/* the request section's one-column rule was retired on 11 September 2026 (S10, scripts/use-the-width.mjs) */
@media (max-width: 720px) {
  html body #close button[type="submit"] { width: 100%; }
  html body #intro .herofoot { margin-top: 0; }
}
html body .herofoot .statusline { line-height: 1.45; text-wrap: pretty; }
/* the hero's two statements end on their own ink: the point belongs to the mark and the teal to the
   buttons, and a period was neither (12 September 2026, scripts/one-teal.mjs) */
html body #intro h1 .m span.dot { display: inline; color: currentColor; animation: none; }
/* the walkthrough left the page on 11 September 2026 (S9, scripts/morning-composition.mjs) */

/* ── controls on the home page's animations ──────────────────────────────── */
html[data-ident] body #replay,
html[data-ident] body #ident .identskip,
html[data-ident] body #ident .tag,
html body #replay { font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html body .plan .inclhead { font-size: 13.5px; color: var(--ink); }
/* ── the footer, the owner's text, left-aligned (11 September 2026) ──────── */
/* One column on every page: the lockup, then the owner's one line (the entity, its city and
   the descriptor; 12 September 2026, in place of two lines), then the link row. The site had three footers -- the home page's two columns with
   the links right-aligned, the inner pages' single centered row, and the 404/thanks pair's own
   shape -- and the owner asked for one, left-aligned. All the padding is on .fwrap, because
   404.html and /thanks/ put theirs on #foot. */
html body #foot { padding: 0; }
html body #foot .fwrap { display: block; max-width: 1080px; margin: 0 auto; padding: clamp(40px, 6vh, 72px) var(--pad); text-align: left; }
html body #foot .fwrap img { display: block; width: clamp(140px, 16vw, 188px); height: auto; margin: 0 0 18px; }
html body #foot .fname { display: block; margin: 0; max-width: 54ch; text-align: left; }
html body #foot .fname + .fname { margin-top: 5px; }
html body #foot .fnav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; justify-content: flex-start; text-transform: none; }


/* item 4 of the carried-forward review, 12 September 2026: 112px of empty paper above the page
   label, because a page clears the fixed bar and then paid a full opening on top of it. The
   first section opens against the bar. :first-child, so the home page's #morning is not read
   as a page's opening. */
html body main > section.wrap:first-child { padding-top: clamp(18px, 2.4vh, 28px); }

/* The footer's focus ring, 12 September 2026 (scripts/one-teal.mjs). Every page's own stylesheet
   sets :focus-visible to 2px var(--teal-deep), which is 6.97:1 on ivory and 2.48:1 on the navy
   footer -- under the 3:1 a focus ring owes its ground. The footer takes the header's ring, which
   measures 9.13:1 there. */
html body #foot :focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
/* ::selection gave up the teal with everything else that is not an action. Ink at 16% on the ivory
   pages (every page's own stylesheet carries that literal now); on the four navy grounds a paper
   wash, because an ink wash on navy cannot be seen. */
html body #intro ::selection,
html body #sample ::selection,
html body #demon ::selection,
html body #foot ::selection { background: rgba(251, 250, 246, 0.26); }

/* THE SMALLEST SCREENS. "CLIENT SIGN IN" set in capitals and tracked is about 10px wider than the
   sentence case it replaces, and the 11 September decision above keeps the label at full length on
   every page and width, so at 320px the bar ran 15px past the viewport (measured, on /trust/).
   The bar gives back its own padding rather than the site giving up the label: the copy and that
   decision stand, and the header fits from 320px up. */
@media (max-width: 360px) {
  html body #hdr { padding: 0 12px; gap: 10px; }
  html body #hdr .signin,
  html body #hdr .menu { padding: 0 10px; }
}