/* Mumford Advisory — Diagnostic Ledger v2
   Editorial serif display / modern sans body / mono annotations.
   Monochrome zinc palette on warm paper; one viridian accent, used sparingly.
   Metallic gradients appear ONLY inside the Pattern Object. */

:root{
  /* color */
  /* v4: page ivory tuned to the hero imagery, so scrolling out of the hero feels
     like staying in the same room rather than leaving it. */
  --paper:#F3F1ED; --ink:#191C1B; --zinc:#4E5955; --zinc-soft:#8A938F;
  /* Button hover: a tonal lift of --ink, keeping its grey-green undertone.
     A hue change on hover reads as a different element; a lift reads as the
     same element responding. */
  --ink-lift:#343A38;
  --line:rgba(25,28,27,.08); --line-strong:rgba(25,28,27,.16);
  --accent:#2E5B4F; --glass:rgba(255,255,255,.55);
  /* type */
  --serif:"Newsreader",Georgia,serif;
  --sans:"Inter",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* scale (1.333 display ratio) */
  --fs-0:.72rem; --fs-1:.86rem; --fs-2:1rem; --fs-3:1.125rem;
  /* Display sizes are viewport-driven with low floors. The old floors (2.4rem and
     2.7rem) never came down on a phone, so the hero headline set at ~43px into a
     350px column — about eight characters a line, seven lines deep, and the lede
     pushed off the screen. The vw term now does the work down to a small floor. */
  --fs-4:1.45rem; --fs-5:clamp(1.6rem,4.6vw,1.95rem);
  --fs-6:clamp(1.85rem,6vw,3.6rem); --fs-hero:clamp(2rem,7.4vw,4.4rem);
  /* space (4px base) */
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:1.5rem; --s5:2.5rem; --s6:4rem; --s7:6.5rem; --s8:8rem;
  --nav-h:76px; --measure:66ch;
  /* borders & shadow */
  --radius:2px;
  --shadow-quiet:0 1px 2px rgba(25,28,27,.04),0 8px 24px rgba(25,28,27,.05);

  /* v4 — luminous register. Ivory bands where the organism appears.
     The site is now one continuous light world: warm paper for reading,
     cooler ivory for the bands, so they read as a distinct surface without
     becoming a second visual universe. */
  --char:#EAE8E3; --char-2:#F5F4F1;   /* band surfaces (names kept: used widely) */
  --on-char:#191C1B; --on-char-2:#5A625E;
  --accent-char:#2E5B4F;              /* the resolution moment — matches site accent */
  --line-char:rgba(25,28,27,.12); --line-char-strong:rgba(25,28,27,.24);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--fs-3);line-height:1.7;padding-top:var(--nav-h);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}

/* faint drafting grid — softened in v4 so it reads as a whisper of measurement
   rather than graph paper, letting the pearlescent atmosphere carry the surface */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:96px 96px;opacity:.16}

/* Pearlescent atmosphere: broad, very low-opacity fields of light in the same
   pale cyan / lilac / champagne the hero film reflects. Fixed, so it behaves like
   ambient light in a room rather than decoration attached to the page. Sits below
   all content (z-index 0) and never carries meaning, so nothing is lost if it
   fails to render. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58vw 52vh at 84% 8%,  rgba(150,198,204,.20), transparent 68%),
    radial-gradient(52vw 46vh at 8%  48%, rgba(202,188,220,.16), transparent 70%),
    radial-gradient(60vw 44vh at 74% 82%, rgba(226,206,172,.18), transparent 68%),
    radial-gradient(40vw 38vh at 30% 96%, rgba(150,198,204,.12), transparent 72%)}

/* Wisp backdrop: the hero's own material, carried faintly through the page.
   Sits beneath the coloured light and beneath all content. --wisp is injected at
   build time only when the asset exists, so this rule is inert without it. */
.wisp-layer{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:var(--wisp,none);background-size:cover;background-position:center;
  opacity:.30;mix-blend-mode:multiply}
@media(max-width:860px){ .wisp-layer{opacity:.20} }

a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);
  text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px);position:relative;z-index:1}

/* ---------- navigation: fixed, translucent, numbered ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:var(--s5);height:100%}
.brand{font-family:var(--serif);font-size:1.35rem;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
nav.main{display:flex;gap:clamp(.9rem,2.2vw,1.9rem);align-items:center;margin-left:auto;flex-wrap:wrap}
/* Mono labels are uniformly UPPERCASE across the site. Mixed lowercase nav and
   uppercase section markers read as an inconsistency rather than a system.
   Tracking is opened up because caps need more letter-spacing to stay legible. */
nav.main a{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.11em;
  color:var(--zinc);text-decoration:none;text-transform:uppercase}
nav.main a .n{color:var(--zinc-soft);margin-right:.35em}
nav.main a:hover{color:var(--ink)}
nav.main a.btn,.btn{font-family:var(--sans);font-size:var(--fs-1);font-weight:600;letter-spacing:.02em;
  background:var(--ink);color:var(--paper);padding:.68rem 1.25rem;border-radius:var(--radius);
  text-decoration:none;display:inline-block;border:1px solid var(--ink);cursor:pointer;
  transition:background .2s,color .2s}
.btn:hover,nav.main a.btn:hover{background:var(--ink-lift);border-color:var(--ink-lift);
  color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink);
  background:color-mix(in srgb,var(--ink) 7%,transparent)}

/* ---------- typography ---------- */
main{padding:var(--s6) 0 var(--s7)}
article{max-width:var(--measure)}
h1{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;
  font-size:var(--fs-6);line-height:1.08;margin-bottom:var(--s4);text-wrap:balance}
h1 em,h1 i{font-style:italic}
h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;font-size:var(--fs-5);
  line-height:1.2;margin:var(--s6) 0 var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
h2:first-child{margin-top:0;border-top:none;padding-top:0}
h3{font-family:var(--sans);font-weight:600;font-size:var(--fs-3);margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s3);color:var(--ink)}
/* The opening statement of a page, set larger. Tied to the h1 rather than to
   "first paragraph in the article" — otherwise it lands on whichever paragraph
   happens to come first, including one buried inside a later section.
   The second selector handles pages whose h1 is followed by a meta line. */
article > h1 + p:not(.meta),
article > h1 + p.meta + p{font-size:var(--fs-4);line-height:1.55;color:var(--zinc);font-weight:400;
  max-width:52ch}
/* small mono line directly under a page title, e.g. "last updated" */
p.meta{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.11em;
  text-transform:uppercase;color:var(--zinc-soft);margin-top:calc(-1 * var(--s2))}
p.meta em{font-style:normal}
ul,ol{margin:0 0 var(--s4) 1.3rem}
li{margin:.55rem 0}
li::marker{color:var(--zinc-soft)}
strong{font-weight:600}
blockquote{font-family:var(--serif);font-size:var(--fs-4);font-style:italic;color:var(--zinc);
  border-left:1px solid var(--line-strong);padding:.3rem 0 .3rem var(--s4);margin:var(--s5) 0}
hr{border:none;border-top:1px solid var(--line);margin:var(--s6) 0}

/* ledger eyebrow */
/* The entry marker IS the section divider, so the heading sits tight beneath it.
   Previously this used a negative bottom margin against the h2's own top margin,
   which collapsed to roughly 160px of air between sections — too loose, and hard
   to reason about. Explicit values instead: 64px above the marker, 8px below it. */
.entry{display:block;font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.14em;
  text-transform:uppercase;color:var(--zinc);margin:var(--s6) 0 var(--s2)}
.entry + h2{border-top:none;padding-top:0;margin-top:0}
.entry::before{content:"";display:inline-block;width:2rem;height:1px;background:var(--line-strong);
  vertical-align:middle;margin-right:.7rem}
/* evidence annotation chip */
.evi{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;
  color:var(--zinc);border:1px solid var(--line-strong);border-radius:var(--radius);padding:.15rem .5rem}

/* tables */
table{border-collapse:collapse;margin:var(--s4) 0;font-size:var(--fs-1);width:100%}
th,td{border-bottom:1px solid var(--line);padding:.6rem .75rem;text-align:left}
th{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;
  color:var(--zinc);font-weight:500}

/* breadcrumbs */
.crumbs{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.11em;
  text-transform:uppercase;color:var(--zinc-soft);margin-bottom:var(--s5)}
.crumbs a{color:var(--zinc);text-decoration:none}
.crumbs a:hover{color:var(--accent)}

/* placeholder visibility (pre-launch only) */
.ph{background:rgba(46,91,79,.08);border:1px dashed var(--accent);padding:.1em .3em;
  font-family:var(--mono);font-size:.82em;color:var(--accent)}

/* ---------- hero + Pattern Object ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);
  align-items:center;max-width:none;margin-bottom:var(--s6)}
.hero-copy h1{font-size:var(--fs-hero);max-width:16ch}
.hero-copy .lede{font-size:var(--fs-4);line-height:1.5;color:var(--zinc);max-width:44ch}
.hero-note{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.08em;color:var(--zinc);
  margin:var(--s4) 0 0}
.hero-actions{margin-top:var(--s4);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

/* The Pattern Object (five metallic planes) was retired in v4. The hero film now
   carries the chaos-to-clarity moment, and dark metallic planes contradicted the
   ivory register. Styles removed rather than left dormant. */

/* ---------- glass panels / cards / calculator ---------- */
.calc,.panel{background:color-mix(in srgb,#fff 62%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-quiet);
  padding:var(--s5);margin:var(--s5) 0}
.calc h2{margin-top:0;border:none;padding-top:0;font-size:var(--fs-4)}
.calc label{display:block;font-size:var(--fs-1);font-weight:600;margin:var(--s3) 0 var(--s1)}
.calc .hint{font-weight:400;color:var(--zinc);font-size:var(--fs-0);font-family:var(--sans);letter-spacing:0;text-transform:none}
.calc input{font-family:var(--mono);font-size:var(--fs-2);padding:.55rem .65rem;
  border:1px solid var(--line-strong);border-radius:var(--radius);width:9rem;background:#fff;color:var(--ink)}
.calc input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.calc .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 var(--s5)}
.calc-result{margin-top:var(--s4);border-top:1px solid var(--line-strong);padding-top:var(--s3)}
.calc-result .big{font-family:var(--mono);font-size:1.9rem;color:var(--ink);display:block;margin:.25rem 0;font-weight:500}
.calc-result .math{font-family:var(--mono);font-size:var(--fs-0);color:var(--zinc);
  white-space:pre-wrap;background:rgba(25,28,27,.035);padding:var(--s3);margin-top:var(--s3);
  border-radius:var(--radius);border:1px solid var(--line)}
.calc-intro{font-size:var(--fs-1);color:var(--zinc);max-width:60ch;margin:0 0 var(--s2)}

/* Arithmetic in prose (blog posts). Deliberately the same treatment as the
   calculator's working panel above: every figure on this site shows its sum,
   and it should look the same wherever it appears. */
pre{font-family:var(--mono);font-size:var(--fs-0);color:var(--zinc);
  white-space:pre-wrap;background:rgba(25,28,27,.035);padding:var(--s3);
  margin:var(--s3) 0;border-radius:var(--radius);border:1px solid var(--line);
  max-width:60ch;overflow-x:auto}
pre code{font-family:inherit;font-size:inherit;color:inherit;background:none;padding:0}
:not(pre) > code{font-family:var(--mono);font-size:.92em;
  background:rgba(25,28,27,.045);padding:.1em .3em;border-radius:3px}
.calc-label{font-family:var(--mono);font-size:var(--fs-0);color:var(--zinc);
  letter-spacing:.1em;text-transform:uppercase}
/* Headcount restatement of the result. Sits between the dollar figure and the
   working, because "2.4 people" is the unit the decision is actually made in. */
.fte{font-family:var(--serif);font-size:var(--fs-3);font-style:italic;color:var(--ink);
  max-width:52ch;margin:var(--s2) 0 0;line-height:1.5}

/* ---------- field tooltips ----------
   <details>, not a hover popover: keyboard-operable, screen-reader-announced,
   and it survives with JavaScript disabled. It also stays open while the reader
   is typing the number it explains, which a hover tooltip cannot do. */
.calc .tip{border:none;margin:var(--s2) 0 0;padding:0;max-width:52ch}
.calc .tip:last-of-type{border-bottom:none}
.calc .tip>summary{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.09em;
  text-transform:uppercase;font-weight:500;color:var(--zinc);display:inline-flex;
  align-items:center;gap:.45rem;justify-content:flex-start;padding:.15rem 0;
  border-bottom:1px dotted var(--line-strong);width:auto}
.calc .tip>summary:hover{color:var(--accent)}
.calc .tip>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.calc .tip>summary::after{content:"?";font-family:var(--mono);font-size:.7rem;line-height:1;
  color:var(--paper);background:var(--zinc-soft);border-radius:50%;
  width:1.05em;height:1.05em;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto}
.calc .tip[open]>summary::after{content:"\2013";background:var(--accent)}
.calc .tip[open]>summary{color:var(--ink)}
.calc .tip p{font-size:var(--fs-1);color:var(--zinc);margin:var(--s2) 0 0;line-height:1.55}
.calc .tip p strong{color:var(--ink)}
.calc .tip>*:not(summary){padding-left:var(--s3);border-left:2px solid var(--line-strong);
  margin-left:.15rem}

/* ---------- post-result triage ----------
   Three self-selected outcomes. Two of them lead away from us on purpose: a reader
   who is told when not to buy has a reason to believe the time they are told to. */
.triage-lede{font-size:var(--fs-2);color:var(--zinc);max-width:58ch}
/* Stacked, not columned. The prose measure is 66ch — three columns inside it would
   be ~200px each, which is too narrow for a hundred words of reasoning. Stacking
   also matches the content: the three cards ascend in commitment. */
.triage{display:grid;grid-template-columns:1fr;
  gap:var(--s4);margin:var(--s5) 0 var(--s6);align-items:stretch}
.tcard{background:color-mix(in srgb,#fff 62%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-quiet);
  padding:var(--s4);display:flex;flex-direction:column}
.tcard .tnum{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.16em;
  text-transform:uppercase;color:var(--zinc-soft);display:block;margin-bottom:var(--s2)}
.tcard h3{font-family:var(--serif);font-size:var(--fs-3);font-weight:400;line-height:1.3;
  margin:0 0 var(--s2);border:none;padding:0}
.tcard p{font-size:var(--fs-1);color:var(--zinc);line-height:1.55;margin:0 0 var(--s3)}
.tcard .tgo{margin:auto 0 0;padding-top:var(--s2)}
.tcard .tgo a:not(.btn){font-family:var(--sans);font-weight:600;font-size:var(--fs-1)}
.tcard .tnote{font-size:var(--fs-0);color:var(--zinc-soft);margin:var(--s2) 0 0;line-height:1.5}
.tcard-lead{border-left:3px solid var(--accent);padding-left:calc(var(--s4) - 2px)}
.tcard-lead .tnum{color:var(--accent)}

/* ---------- founding-engagement note ----------
   True scarcity, stated once per page and never counted down. */
.founding{font-size:var(--fs-1);color:var(--zinc);border-left:2px solid var(--accent);
  padding:.1rem 0 .1rem var(--s3);margin:var(--s4) 0;max-width:56ch;line-height:1.55}
.founding strong{color:var(--ink)}

/* ---------- proof callout ----------
   Answers "who are you and why should I believe you" before the reader has to ask. */
.proof-callout{background:color-mix(in srgb,#fff 55%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;
  padding:var(--s4) var(--s4) var(--s4) var(--s5);margin:var(--s6) 0;max-width:62ch}
.proof-callout p{margin:0 0 var(--s2);font-size:var(--fs-2);line-height:1.55}
.proof-callout p:last-child{margin-bottom:0}
.proof-callout strong{color:var(--ink)}
.proof-callout .pc-label{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.16em;
  text-transform:uppercase;color:var(--zinc-soft);display:block;margin-bottom:var(--s2)}

/* ---------- what happens next (above the contact form) ----------
   People submit forms when they can picture the next five days. Numbered, short,
   and set large enough to be read by someone who is skimming. */
.nextsteps{margin:var(--s5) 0}
.nextsteps ol{list-style:none;counter-reset:ns;margin:var(--s3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--s4) var(--s5)}
.nextsteps li{counter-increment:ns;position:relative;padding-top:var(--s4);
  border-top:1px solid var(--line-strong);font-size:var(--fs-1);color:var(--zinc);line-height:1.55}
.nextsteps li::before{content:counter(ns,decimal-leading-zero);position:absolute;top:.55rem;left:0;
  font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.14em;color:var(--zinc-soft)}
.nextsteps li strong{display:block;font-family:var(--sans);font-size:var(--fs-2);
  color:var(--ink);margin-bottom:.35rem;line-height:1.35}

/* forms */
input[type=email],input[type=text],textarea{font-family:var(--sans);font-size:var(--fs-2);
  padding:.6rem .7rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;width:100%;max-width:26rem}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* founder portrait */
.portrait{float:right;width:min(230px,38%);margin:0 0 var(--s4) var(--s5);}
.portrait img{width:100%;height:auto;display:block;border-radius:var(--radius);
  box-shadow:var(--shadow-quiet)}
@media(max-width:640px){
  .portrait{float:none;width:min(220px,60%);margin:0 0 var(--s4)}
}

/* fit-conversation form */
.fitform label{display:block;font-size:var(--fs-1);font-weight:600;margin:var(--s3) 0 var(--s1)}
.fitform .hint{display:block;font-weight:400;color:var(--zinc);font-size:var(--fs-0);margin-top:2px}
.fitform .frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 var(--s5)}
.fitform input[type=text],.fitform input[type=email],.fitform select,.fitform textarea{
  width:100%;max-width:none;font-family:var(--sans);font-size:var(--fs-2);
  padding:.6rem .7rem;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:#fff;color:var(--ink)}
.fitform select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--zinc) 50%),
  linear-gradient(135deg,var(--zinc) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.fitform textarea{resize:vertical;min-height:7rem}
.fitform :focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.fitform [disabled]{opacity:.55;cursor:not-allowed}
.fitform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-actions{margin:var(--s4) 0 var(--s2)}
.form-actions .btn{font-size:var(--fs-2)}
.form-note{font-family:var(--mono);font-size:var(--fs-0);color:var(--zinc);letter-spacing:.11em;
  text-transform:uppercase;margin:0}
/* inline confirmation shown after a background submit */
.form-success{background:color-mix(in srgb,#fff 62%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:6px;box-shadow:var(--shadow-quiet);padding:var(--s5);margin:var(--s5) 0}
.form-success h2{margin-top:0;border:none;padding-top:0;font-size:var(--fs-4)}
.form-success p:last-child{margin-bottom:0}
.form-success:focus{outline:2px solid var(--accent);outline-offset:4px}
.form-error{font-size:var(--fs-1);color:#8A2B12;background:rgba(196,62,28,.07);
  border-left:2px solid #C43E1C;padding:var(--s3) var(--s4);border-radius:var(--radius);
  margin:var(--s3) 0 0}

.form-warning{font-size:var(--fs-1);color:var(--ink);background:rgba(46,91,79,.06);
  border-left:2px solid var(--accent);padding:var(--s3) var(--s4);border-radius:var(--radius);
  margin:var(--s4) 0 0}

/* FAQ */
details{border-top:1px solid var(--line);padding:var(--s3) 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{font-family:var(--sans);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-family:var(--mono);color:var(--zinc-soft)}
details[open] summary::after{content:"–"}

/* CTA band */
.cta-band{background:var(--ink);color:var(--paper);margin-top:var(--s8);position:relative;z-index:1}
.cta-band .wrap{padding:var(--s6) clamp(20px,4vw,40px);display:flex;gap:var(--s4);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band p{margin:0;font-family:var(--serif);font-size:var(--fs-4);font-style:italic;max-width:46ch;color:var(--paper)}
.cta-band .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-band .btn:hover{background:transparent;color:var(--paper)}

/* footer */
footer.site{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s5);font-size:var(--fs-1);position:relative;z-index:1}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s5);margin-bottom:var(--s5)}
/* Footer column labels are h2, not h4: they sit inside the footer landmark with no
   intervening h2/h3, so h4 produced a heading-level jump on every page. Level fixed,
   appearance unchanged — the global h2 rule is reset here. */
.fcols h2{font-family:var(--mono);font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.14em;
  color:var(--zinc-soft);margin:0 0 var(--s2);padding-top:0;border-top:none;
  font-weight:500;line-height:1.4}
.fcols ul{list-style:none;margin:0}
.fcols li{margin:.4rem 0}
.fcols a{color:var(--zinc);text-decoration:none}
.fcols a:hover{color:var(--accent)}
/* Footer meta stays sentence case — it is a sentence, not a label, and setting a
   full paragraph in caps hurts readability badly. */
.fmeta{color:var(--zinc);font-size:var(--fs-0);border-top:1px solid var(--line);padding-top:var(--s4);
  font-family:var(--mono);letter-spacing:.02em;line-height:1.9}

/* ============================================================
   v3 — CHROME BANDS
   Full-bleed charcoal sections. Max three per page (docs/09 §4).
   Every band is legible on --char alone if its asset fails to load.
   ============================================================ */
main.has-hero{padding-top:0}
.band{position:relative;z-index:1;background:var(--char);color:var(--on-char);
  overflow:hidden;padding:var(--s7) 0;margin:var(--s7) 0}
.band:first-child{margin-top:0}
.band > .wrap{position:relative;z-index:3}
.band-inner{max-width:var(--measure)}

/* media layer + scrim: text never sits on an unscrimmed image */
.band-media{position:absolute;inset:0;z-index:0;background:var(--char)}
/* Crop: the source frames hold their subject right-of-centre with empty charcoal
   to the left. A low object-position shows more of that empty left side, pushing
   the subject clear of the copy column instead of underneath it. */
.band-media img,.band-media video{width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;display:block}
/* Scrim holds full opacity across the copy column, then clears completely so the
   subject is never veiled. Tuned against the rendered page, not by arithmetic. */
.band-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,var(--char) 0%,var(--char) 38%,
    color-mix(in srgb,var(--char) 88%,transparent) 52%,
    color-mix(in srgb,var(--char) 35%,transparent) 72%,transparent 90%)}
.band-scrim::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,color-mix(in srgb,var(--char) 40%,transparent) 0%,
    transparent 20%,transparent 82%,color-mix(in srgb,var(--char) 40%,transparent) 100%)}

/* Every band EXCEPT the video hero carries a pale pearlescent still on pale
   ivory — inherently low contrast. The hero's scrim, tuned against a
   high-contrast video, erased those stills completely: present in the DOM,
   invisible on screen. The distinction is video vs still, not hero vs interior. */
.band:not(:has(.band-film)) .band-scrim{background:
  linear-gradient(90deg,var(--char) 0%,var(--char) 40%,
    color-mix(in srgb,var(--char) 92%,transparent) 52%,
    color-mix(in srgb,var(--char) 55%,transparent) 66%,
    color-mix(in srgb,var(--char) 10%,transparent) 80%,transparent 90%)}
.band:not(:has(.band-film)) .band-scrim::after{background:none}

/* hero variant */
.band-hero{margin:0 0 var(--s7);min-height:min(78vh,780px);
  display:flex;align-items:center;padding:var(--s7) 0}

/* Interior-page heroes: same construction, shorter. The homepage earns a full
   screen because it carries the film; interior pages should open with weight but
   get the reader to the argument faster. */
.band-hero:not(:has(.band-film)){min-height:min(56vh,560px)}

/* Blend the hero into the page below it, so leaving the hero feels like moving
   through one continuous space rather than crossing an edge. Sits above the
   media but below the copy. */
.band-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:24vh;z-index:2;pointer-events:none;background:
  linear-gradient(180deg,transparent 0%,
    color-mix(in srgb,var(--paper) 55%,transparent) 55%,var(--paper) 100%)}

/* Sticky hero stage: the band pins while the reader scrolls the extra height,
   so the column resolves in view rather than after it has scrolled away.
   Desktop only — on small screens a pinned hero eats the whole screen. */
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  .hero-stage{height:220vh;position:relative}
  .hero-stage .band-hero{position:sticky;top:0;height:100vh;min-height:0;margin:0}
}
.band-hero .band-inner{max-width:min(58ch,100%)}
.band-hero h1{font-size:var(--fs-hero);max-width:17ch;margin-bottom:var(--s4)}
.band-hero .lede{font-size:var(--fs-4);line-height:1.5;max-width:46ch}

/* resolution + method variants: negative space increases down the page (brand/01 §7) */
.band-resolution{text-align:left}
.band-resolution .band-inner{max-width:54ch}
.band-method .band-inner{max-width:64ch}

/* typography inside bands */
.band h1,.band h2,.band h3,.band strong{color:var(--on-char)}
.band h2{border-top:none;padding-top:0;margin-top:0}
.band h3{margin-top:var(--s5)}
.band p,.band li{color:var(--on-char-2)}
.band li::marker{color:var(--accent-char)}
.band a:not(.btn){color:var(--on-char);text-decoration-color:var(--line-char-strong)}
.band a:not(.btn):hover{color:var(--accent-char);text-decoration-color:var(--accent-char)}
.band :focus-visible{outline-color:var(--accent-char)}

.band-eyebrow{display:block;font-family:var(--mono);font-size:var(--fs-0);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-char);margin-bottom:var(--s4)}
.band-note{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-char-2);margin:var(--s4) 0 0}
.band-actions{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

/* buttons on ivory bands — same ink-on-light logic as the rest of the site */
.band .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.band .btn:hover{background:var(--ink-lift);border-color:var(--ink-lift);color:var(--paper)}
.band .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-char-strong)}
.band .btn.ghost:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);
  color:var(--ink);border-color:var(--ink)}

/* scroll-scrubbed video: the playhead is driven by scroll position, so the
   structure genuinely moves rather than dissolving between stills. */
/* Hero film. Source is 16:9 and the band is close to 16:9, so cropping is
   minimal and the approved composition survives, pull-back included. */
.band-film{position:absolute;inset:0}
.band-film video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block}
.band-film .film-static{display:none;position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover;object-position:50% 50%}

/* scroll-morph sequence: frames stacked and cross-faded by scroll position.
   No JS → frame 1 stays opaque and the rest stay at opacity 0, so the band
   always shows the disordered state rather than nothing. */
.band-seq{position:absolute;inset:0}
.band-seq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 50%;transition:opacity .12s linear;will-change:opacity}

/* hero parallax — <=24px, transform only, no layout shift (docs/09 §5) */
.band-hero .band-media{will-change:transform;
  transform:translate3d(0,calc(var(--par,0) * 24px),0)}

/* v3 — supporting components */
.boundary{border-left:2px solid var(--accent);background:rgba(46,91,79,.05);
  padding:var(--s4) var(--s4) var(--s4) var(--s5);margin:var(--s5) 0;border-radius:var(--radius)}
.boundary p:last-child{margin-bottom:0}
/* a plain callout band — no full-bleed treatment, just a marked-out warning */
.band-boundary{background:transparent;padding:0;margin:var(--s5) 0}
.band-boundary .band-inner{max-width:var(--measure);border-left:2px solid var(--accent);
  background:rgba(46,91,79,.06);padding:var(--s4) var(--s4) var(--s4) var(--s5);
  border-radius:var(--radius)}
.band-boundary p{color:var(--ink)}
.band-boundary p:last-child{margin-bottom:0}

/* mobile */
/* ---------- bands on a phone ----------
   On a wide screen the artwork is a full-bleed background with the copy laid over
   it. That construction fails on a phone: the sources are 16:9, the band is taller
   than it is wide, and object-fit:cover then shows a vertical slice about a third
   of the image across — the subject is simply cropped out of frame. It also forces
   a heavy scrim over the copy to keep it legible, which dims the artwork further.

   Below 860px the media stops being a background and becomes a banner: full width,
   its own 16:9 box, nothing cropped, no scrim needed. The copy sits beneath it on
   clean ivory where it reads at full contrast. */
@media(max-width:860px){
  .band{padding:0 0 var(--s6);margin:var(--s6) 0}
  .band-hero{min-height:0;padding:0 0 var(--s6);display:block}
  .band-hero h1{max-width:none}
  .hero-stage{height:auto}

  .band-media,.band-film{position:relative;inset:auto;width:100%;
    aspect-ratio:16/9;height:auto;transform:none}
  .band-media img,.band-media video,.band-film video,.band-film .film-static,
  .band-seq img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 50%}
  /* No copy sits on the artwork any more, so nothing needs veiling. */
  .band-scrim,.band-scrim::after,.band-hero::after{display:none}
  .band > .wrap{padding-top:var(--s5)}
  .band-inner,.band-hero .band-inner{max-width:none}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  main{padding-top:var(--s5)}
  h2{margin-top:var(--s6)}
  .entry{margin-top:var(--s6)}
}
/* The header wraps to two rows well before 640px — brand + five numbered links +
   CTA stop fitting a little under the 1120px wrap. Below that the header must size
   to its content, or the second row clips out of the fixed 76px band.
   Raised from 900px when "worked example" was added to the nav: a fifth link moves
   the wrap point up, and the old value left a clipping window at 900–1080px. */
@media(max-width:1080px){
  header.site{height:auto;position:sticky}
  body{padding-top:0}
  header.site .wrap{flex-wrap:wrap;padding-top:.7rem;padding-bottom:.7rem;gap:var(--s3)}
  nav.main{gap:.8rem .9rem;margin-left:auto}
}
@media(max-width:640px){
  header.site .wrap{gap:var(--s2)}
  nav.main{gap:.7rem .8rem;width:100%;margin-left:0}
}

/* ---------- mobile menu ----------
   .js-nav is set by script only, and only under 860px. With scripting off the
   class never appears, the button stays hidden, and the nav renders in full —
   so no link is ever unreachable. */
.navtoggle{display:none}
@media(max-width:860px){
  .navtoggle{display:inline-flex;align-items:center;gap:.55rem;margin-left:auto;
    font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);background:transparent;
    border:1px solid var(--line-strong);border-radius:var(--radius);
    padding:.5rem .8rem;cursor:pointer;line-height:1}
  .navtoggle[hidden]{display:none}
  .navtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .navtoggle-bars{position:relative;width:14px;height:9px;flex:0 0 auto}
  .navtoggle-bars::before,.navtoggle-bars::after{content:"";position:absolute;left:0;
    width:100%;height:1.5px;background:var(--ink)}
  .navtoggle-bars::before{top:0}
  .navtoggle-bars::after{bottom:0}
  .navtoggle[aria-expanded="true"] .navtoggle-bars::before{top:4px;transform:rotate(45deg)}
  .navtoggle[aria-expanded="true"] .navtoggle-bars::after{bottom:3.5px;transform:rotate(-45deg)}

  html.js-nav nav.main{display:none}
  html.js-nav nav.main.open{display:flex;flex-direction:column;align-items:flex-start;
    width:100%;margin-left:0;gap:0;padding:var(--s3) 0 var(--s2);
    border-top:1px solid var(--line)}
  html.js-nav nav.main.open a{padding:.75rem 0;width:100%;font-size:var(--fs-1)}
  html.js-nav nav.main.open a.btn{width:auto;margin-top:var(--s3);padding:.7rem 1.1rem}
}

/* Wide tables (the findings register, the provider disclosures) are wider than a
   phone. Scrolling the table beats shrinking the text to illegibility. */
@media(max-width:860px){
  article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap;font-size:var(--fs-0)}
  article table th,article table td{padding:.5rem .6rem}
}
/* reduced motion: everything settles instantly; Pattern Object shows resolved state */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  /* v3: hero holds its poster frame, no parallax, no video playback.
     Morph sequence resolves to the FINAL frame — a reader who cannot see the
     animation should get the resolved structure, not the broken one. */
  .band-hero .band-media{transform:none!important}
  .band-seq img{opacity:0!important}
  .band-seq img:last-child{opacity:1!important}
  /* no motion: hold the resolved state as a still image */
  .band-film video{display:none!important}
  .band-film .film-static{display:block!important}
}