/* Written by tools/pages.mjs from the solved palette. Do not edit. */
:root{
  --ground:#fdf2d6; --band:#f1dca9; --band-soft:#f6e9c9;
  --surface:#fefbf3; --raised:#fffefa; --line:#cfc09c; --deep:#2d200e;
  --ink:#261f0f; --ink-muted:#4c4536; --ink-faint:#666053;
  --accent:#683b09; --accent-alt:#0a496f;
  --on-deep:#e5e0d1; --on-deep-muted:#a49f92; --accent-on-deep:#d17d1d;
  --good:#126f2e; --warn:#925010; --bad:#af3431;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:18px; --rl:26px;
  --shadow:0 1px 2px rgba(60,42,10,.05), 0 8px 24px rgba(60,42,10,.06);
  --shadow-lg:0 2px 6px rgba(60,42,10,.07), 0 24px 60px rgba(60,42,10,.13);
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.62 var(--sans);letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.022em;line-height:1.08}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* SCROLL REVEAL, SCOPED TO .js. Unscoped, 40 elements start at opacity 0 and
   the whole page is invisible to anyone without JavaScript. The class is set
   by an inline script before any stylesheet loads. */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].seen{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto}

/* ---------- nav ---------- */
.bar{position:fixed;inset:14px 0 auto;z-index:60;pointer-events:none}
.bar-in{max-width:var(--wrap);margin:0 auto;padding:0 16px;display:flex;justify-content:center}
.bar-pill{pointer-events:auto;display:flex;align-items:center;gap:6px;
  background:color-mix(in oklab,var(--raised) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);
  border:1px solid color-mix(in oklab,var(--line) 46%,transparent);
  border-radius:999px;padding:7px 8px 7px 16px;box-shadow:var(--shadow);max-width:100%}
.bar-mark{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--serif);
  font-size:20px;letter-spacing:-.02em;padding-right:10px;white-space:nowrap}
.bar-mark svg{width:20px;height:20px;flex:none}
.bar-nav{display:flex;gap:2px}
.bar-nav a{text-decoration:none;color:var(--ink-muted);font-size:14.5px;padding:8px 12px;border-radius:999px;
  white-space:nowrap;transition:background .18s,color .18s}
.bar-nav a:hover{background:color-mix(in oklab,var(--band) 70%,transparent);color:var(--ink)}
.bar-nav a[aria-current]{color:var(--ink);background:color-mix(in oklab,var(--band) 82%,transparent)}
/* THE CTA IS ONE CLASS AND .bar-nav a IS TWO. A sibling shipped its primary
   call to action as dark-on-dark at 1.3:1 because of exactly this, so the
   selector here is as specific as the rule it has to beat. */
.bar-x{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;color:var(--ink-muted);
  transition:background .18s,color .18s;flex:none;margin-right:2px}
.bar-x svg{width:15px;height:15px}
.bar-x:hover{background:color-mix(in oklab,var(--band) 70%,transparent);color:var(--ink)}
.bar .bar-cta{background:var(--deep);color:var(--on-deep);padding:9px 17px;border-radius:999px;
  font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .18s,opacity .18s}
.bar .bar-cta:hover{transform:translateY(-1px);opacity:.93}
/* THE MOBILE MENU IS NOT DECORATION. Collapsing .bar-nav with nothing behind
   it left every page but the front one reachable only from the footer, which
   is a navigation failure that no contrast check, overflow check or file check
   can see — the page is perfect and you cannot get anywhere. */
.bar-more{display:none;pointer-events:auto;background:none;border:0;cursor:pointer;padding:9px 12px;
  border-radius:999px;color:var(--ink);line-height:0}
.bar-more svg{width:20px;height:20px}
.bar-more:hover{background:color-mix(in oklab,var(--band) 70%,transparent)}
.bar-menu{position:absolute;inset:calc(100% + 10px) 16px auto auto;width:min(280px,calc(100vw - 32px));
  pointer-events:auto;background:var(--raised);border:1px solid color-mix(in oklab,var(--line) 52%,transparent);
  border-radius:20px;box-shadow:var(--shadow-lg);padding:8px;display:grid;gap:2px}
.bar-menu a{text-decoration:none;color:var(--ink);font-size:16px;padding:12px 14px;border-radius:12px}
.bar-menu a:hover,.bar-menu a[aria-current]{background:var(--band)}
@media (max-width:940px){.bar-nav{display:none}.bar-more{display:block}}
@media (min-width:941px){.bar-menu{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:14px 26px;
  font:500 16px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,opacity .18s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--deep);color:var(--on-deep);box-shadow:0 6px 20px rgba(45,32,14,.24)}
.btn-primary:hover{box-shadow:0 10px 30px rgba(45,32,14,.3)}
.btn-ghost{background:var(--raised);color:var(--ink);border-color:color-mix(in oklab,var(--line) 60%,transparent);
  box-shadow:var(--shadow)}
.btn-sm{padding:10px 18px;font-size:14.5px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(96vh,880px);display:flex;align-items:center;justify-content:center;
  padding:150px 20px 120px;overflow:hidden;isolation:isolate}
/* THE PHOTOGRAPH IS GRADED, AND THE GRADE IS A MEASUREMENT. Ungraded, the
   comb sits at mean luminance 193 against the reference page's 134 and reads
   as beige paper rather than as a photograph — the source is a high-key
   close-up of pale wax and it simply has no shadows of its own. Brightness
   and contrast here are the values that bring the photo region to the
   reference's tonal range with the blown share still under one per cent;
   tools/measure-image.mjs --region measures exactly that strip. */
.hero-photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 42%;
  filter:brightness(.80) contrast(1.12) saturate(1.18)}
/* The photograph is a real one and it is warm already; this is a scrim, not a
   colourist. It exists so the glass card clears AAA over any part of the
   frame, and its strength was set by measuring the composite rather than by
   looking at it. */
/* THE SCRIM WAS SET BY MEASURING THE COMPOSITE, TWICE, AND THE FIRST
   SETTING WAS WRONG IN THE DIRECTION NOBODY CHECKS. Built to be safe it
   reached mean luminance 223 with 10.2% of the frame blown to white, against
   the reference page's 159 and 0.4% — a photograph so veiled it read as beige
   paper, which is the same "internally consistent, wrong register" failure
   three sibling sites shipped. It is a scrim, not a colourist: enough to keep
   the glass card legible over any part of the frame and no more. */
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(115% 85% at 50% 44%, color-mix(in oklab,var(--ground) 6%,transparent) 0%, color-mix(in oklab,var(--ground) 26%,transparent) 62%, color-mix(in oklab,var(--ground) 52%,transparent) 100%),
    linear-gradient(to bottom, color-mix(in oklab,var(--ground) 42%,transparent) 0%, transparent 18%, transparent 68%, var(--ground) 100%)}
.hero-card{position:relative;width:min(820px,100%);text-align:center;border-radius:var(--rl);
  padding:56px 52px 48px;
  background:color-mix(in oklab,var(--raised) 70%,transparent);
  -webkit-backdrop-filter:saturate(1.35) blur(30px);backdrop-filter:saturate(1.35) blur(30px);
  border:1px solid color-mix(in oklab,var(--raised) 88%,transparent);
  box-shadow:var(--shadow-lg)}
.chip{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:7px 15px 7px 12px;
  background:color-mix(in oklab,var(--raised) 84%,transparent);border:1px solid color-mix(in oklab,var(--line) 50%,transparent);
  font-size:13.5px;color:var(--ink-muted);text-decoration:none}
.chip b{color:var(--ink);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--good) 20%,transparent)}
.hero h1{font-family:var(--serif);font-size:clamp(64px,11.5vw,124px);line-height:.93;
  letter-spacing:-.035em;margin:26px 0 20px}
.hero-lede{font-size:clamp(17px,2vw,19.5px);line-height:1.58;color:var(--ink-muted);
  max-width:57ch;margin:0 auto 30px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.pills{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 14px;font-size:13.5px;
  background:color-mix(in oklab,var(--raised) 76%,transparent);color:var(--ink-muted);
  border:1px solid color-mix(in oklab,var(--line) 44%,transparent)}
.pill svg{width:14px;height:14px;opacity:.72;flex:none}
@media (max-width:640px){.hero-card{padding:38px 24px 34px}.hero{padding:130px 14px 90px}}

/* ---------- the floating readout ---------- */
.float{margin:-92px auto 0;position:relative;z-index:5;width:min(560px,calc(100% - 32px))}
.card{background:var(--raised);border:1px solid color-mix(in oklab,var(--line) 52%,transparent);
  border-radius:var(--rl);box-shadow:var(--shadow-lg)}
.card-hd{display:flex;align-items:center;gap:12px;padding:20px 24px 16px}
.card-ic{width:38px;height:38px;border-radius:11px;background:var(--band);display:grid;place-items:center;flex:none}
.card-ic svg{width:19px;height:19px}
.card-hd h4{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.card-hd p{font-size:13.5px;color:var(--ink-faint);margin:2px 0 0}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 24px;border-top:1px solid color-mix(in oklab,var(--line) 34%,transparent)}
.row dt{font-size:14px;color:var(--ink-muted)}
.row dd{margin:0;font:500 14.5px/1 var(--mono);letter-spacing:-.02em}
.row dd.big{font:400 22px/1 var(--serif)}

/* ---------- ticker ---------- */
.ticker{background:var(--band-soft);border-block:1px solid color-mix(in oklab,var(--line) 34%,transparent)}
.ticker-in{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;padding:19px 24px;font-size:14.5px;color:var(--ink-muted)}
.ticker-in b{color:var(--ink);font-weight:600}
.ticker-in span{display:inline-flex;align-items:center;gap:8px}

/* ---------- bands ---------- */
.band{padding:104px 0}
.band-tint{background:var(--band)}
.band-soft{background:var(--band-soft)}
/* A DARK BAND MUST OVERRIDE EVERY INK TOKEN IT INHERITS. A sibling shipped
   three nodes on one at 1.2, 1.4 and 1.9:1 because setting 'color' on the
   band leaves the lede, the buttons and the accent still carrying
   light-surface values. */
.band-deep{background:var(--deep);color:var(--on-deep)}
.band-deep .eyebrow{color:var(--accent-on-deep)}
.band-deep .lede,.band-deep .row dt,.band-deep p{color:var(--on-deep-muted)}
.band-deep h2 em{color:var(--accent-on-deep)}
/* SPECIFICITY, NOT ORDER. '.band-deep h2 em' and 'h2.display em' are both
   (0,1,2), so the one written later in this file wins — and the accent rule
   is written later, which shipped the deep band's italic clause as
   #683b09 on #2d200e at 1.67:1 while every file check passed over it. The
   markup was correct; only the computed style was wrong. This selector is
   deliberately more specific than the rule it has to beat. */
.band-deep h2.display em{color:var(--accent-on-deep)}
.band-deep .card,.band-deep .panel,.band-deep .stat{
  background:color-mix(in oklab,var(--on-deep) 8%,transparent);
  border-color:color-mix(in oklab,var(--on-deep) 18%,transparent);color:var(--on-deep)}
.band-deep .stat b,.band-deep .panel h3{color:var(--on-deep)}
.band-deep .stat span,.band-deep .panel p,.band-deep .marks li{color:var(--on-deep-muted)}
.band-deep .panel .num{color:var(--accent-on-deep)}
.band-deep .btn-ghost{background:color-mix(in oklab,var(--on-deep) 12%,transparent);color:var(--on-deep);
  border-color:color-mix(in oklab,var(--on-deep) 26%,transparent)}
.band-deep a{color:var(--accent-on-deep)}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  margin:0 0 20px;text-align:center}
h2.display{font-family:var(--serif);font-size:clamp(34px,5.4vw,58px);line-height:1.04;letter-spacing:-.028em;
  text-align:center;max-width:17ch;margin:0 auto}
h2.display em{font-style:italic;color:var(--accent)}
.lede{text-align:center;color:var(--ink-muted);max-width:60ch;margin:22px auto 0;font-size:17.5px}

/* ---------- grids ---------- */
.grid{display:grid;gap:18px;margin-top:56px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid color-mix(in oklab,var(--line) 40%,transparent);
  border-radius:var(--rl);padding:28px 26px;min-width:0}
.panel h3{font-family:var(--serif);font-size:22px;margin:0 0 12px;letter-spacing:-.02em}
.panel p{color:var(--ink-muted);font-size:15.5px;line-height:1.6}
.panel .num{font:600 12px/1 var(--mono);letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid color-mix(in oklab,var(--line) 40%,transparent);
  border-radius:var(--rl);padding:32px 22px;text-align:center;min-width:0}
.stat b{display:block;font:400 clamp(30px,4.2vw,44px)/1 var(--serif);letter-spacing:-.03em;margin-bottom:10px}
.stat span{font-size:14px;color:var(--ink-muted);line-height:1.5;display:block}

/* checklists */
.marks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.marks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
  font-size:15.5px;line-height:1.55;color:var(--ink-muted);min-width:0}
.marks svg{width:16px;height:16px;margin-top:4px}
.marks .no svg{color:var(--bad)} .marks .yes svg{color:var(--good)}

/* prose */
.prose{font-size:17px;line-height:1.72;color:var(--ink-muted)}
.prose h3{font-family:var(--serif);font-size:26px;color:var(--ink);margin:44px 0 14px;letter-spacing:-.02em}
.prose h4{font-size:15px;font-weight:600;color:var(--ink);margin:30px 0 10px}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose code{font:500 14px var(--mono);background:var(--band);padding:2px 6px;border-radius:6px;color:var(--ink)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose ul{padding-left:20px;margin:0 0 1em}
.prose li{margin-bottom:.5em}

/* tables — wide content scrolls INSIDE its own container. A scroll container
   still has a non-zero min-content contribution, so the child needs an
   explicit min-width:0 or the page widens instead. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:460px}
th{text-align:left;font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);padding:0 14px 12px 0;white-space:nowrap}
td{padding:11px 14px 11px 0;border-top:1px solid color-mix(in oklab,var(--line) 34%,transparent);
  font-variant-numeric:tabular-nums}
td.n,th.n{text-align:right;font-family:var(--mono);font-size:13.5px}

/* photo bands */
.figure{border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
/* THE CAPTION SITS ON A PHOTOGRAPH AND THE GRADIENT WAS NOT ENOUGH. White on
   a fade-to-dark reads fine over the dark end and sat at 1.21:1 over the top
   of the fade, where the honey photo behind it is nearly white. The scrim now
   reaches full strength before the text starts, and the text itself sits in
   the opaque part. */
.figure figcaption{position:relative;padding:16px 24px 18px;font-size:13.5px;
  color:var(--on-deep);background-color:var(--deep)}
/* The fade above the caption is a separate layer, and that is not cosmetic.
   A gradient is not a resolvable background: tools/audit-live.mjs walks up for
   an opaque ancestor and finds the photograph, so white-on-gradient is
   reported at 1.21:1 whatever it really renders at. Putting the text on a
   flat colour makes the contrast a fact rather than a function of which part
   of the photo is underneath, AND makes it something the auditor can check. */
.figure figcaption::before{content:'';position:absolute;inset:auto 0 100%;height:70px;
  background:linear-gradient(transparent,var(--deep));pointer-events:none}
.figure figcaption code{background:color-mix(in oklab,var(--on-deep) 18%,transparent);color:var(--on-deep)}
.figure{display:flex;flex-direction:column}
.figure img{flex:1;min-height:0}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:56px}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr);gap:28px}}
.split h3{font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);letter-spacing:-.024em;margin:0 0 16px}

/* ---------- footer ---------- */
footer{background:var(--deep);color:var(--on-deep-muted);padding:70px 0 44px;font-size:14.5px}
footer a{color:var(--on-deep);text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;
  border-bottom:1px solid color-mix(in oklab,var(--on-deep) 16%,transparent)}
.foot-mark{font-family:var(--serif);font-size:26px;color:var(--on-deep);display:flex;align-items:center;gap:11px}
.foot-links{display:flex;gap:30px;flex-wrap:wrap}
.foot-bot{padding-top:26px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px}
.foot-bot p{max-width:62ch;color:color-mix(in oklab,var(--on-deep) 62%,var(--deep))}

/* ---------- app / gauge widgets ---------- */
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:13.5px;color:var(--ink-muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:12px 14px;border-radius:12px;font:400 15px var(--mono);
  border:1px solid color-mix(in oklab,var(--line) 60%,transparent);background:var(--raised);color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px}
.note{font-size:13.5px;color:var(--ink-faint);line-height:1.55}
.status{border-radius:12px;padding:12px 14px;font-size:14px;margin-top:14px;
  background:var(--band);border:1px solid color-mix(in oklab,var(--line) 44%,transparent)}
.status.err{background:color-mix(in oklab,var(--bad) 12%,var(--raised));border-color:color-mix(in oklab,var(--bad) 34%,transparent)}
.status.ok{background:color-mix(in oklab,var(--good) 11%,var(--raised));border-color:color-mix(in oklab,var(--good) 32%,transparent)}
.mono{font-family:var(--mono);font-size:13.5px;word-break:break-all}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--raised);padding:12px 18px;border-radius:12px}