/* ==========================================================================
   KnowToYes homepage. Built on kty-tokens.css v1.1 and the Band layer.
   Design Standard v2.0, 2026-09-21. Approver: Charlie Yokley, AICP.
   ========================================================================== */
:root{
  --kty-blue-900:#021D2D; --kty-blue-800:#022C43; --kty-blue-700:#033A59;
  --kty-blue-600:#044970; --kty-blue-500:#056195; --kty-blue-400:#2374A2;
  --kty-blue-300:#8EB8CF; --kty-blue-200:#C8DCE8; --kty-blue-100:#E6EFF4;
  --kty-blue-050:#F5F9FB;
  --kty-green-core:#7ACF06; --kty-green-bright:#A0E114; --kty-green-text:#437203;
  --kty-ink:#131A21; --kty-slate:#55636E; --kty-line:#DCE3E9; --kty-cloud:#F2F5F8;
  --kty-white:#FFFFFF;
  --kty-approved:#437203; --kty-approved-fill:#EDF7DC;

  --kty-surface:#FFFFFF; --kty-surface-raised:#F5F9FB; --kty-surface-sunken:#F2F5F8;
  --kty-text:#131A21; --kty-text-secondary:#033A59; --kty-text-heading:#033A59;
  --kty-link:#044970; --kty-link-hover:#033A59;
  --kty-border:#DCE3E9; --kty-focus:#056195;
  --kty-band-bg:#022C43; --kty-band-number:#8EB8CF; --kty-band-title:#FFFFFF;
  --kty-rail-text:#033A59; --kty-rail-rule:#C8DCE8;

  --kty-font-display:"Archivo",Arial,sans-serif;
  --kty-font-ui:"Archivo",Arial,sans-serif;
  --kty-font-prose:"Source Serif 4",Georgia,serif;
  --kty-font-data:"IBM Plex Mono",Consolas,"Courier New",monospace;

  --kty-space-1:4px; --kty-space-2:8px; --kty-space-3:12px; --kty-space-4:16px;
  --kty-space-5:24px; --kty-space-6:32px; --kty-space-7:48px; --kty-space-8:64px;
  --kty-space-9:96px;
  --kty-radius-record:0; --kty-radius-ui:6px; --kty-radius-pill:999px;
  --kty-wdth-wide:118; --kty-wdth-mid:112; --kty-wdth-normal:100;
  --kty-transition:150ms ease;

  /* Fixed dark grounds (hero, CTA, footer, root node) keep their own text
     tokens. They are Blue 900 in both themes, so they must not follow the
     dark-mode flip of --kty-blue-100, which becomes a dark fill. */
  --kty-on-dark:#E6EFF4;
  --kty-on-dark-soft:#C8DCE8;
  --kty-header-height:76px;   /* Standard v2.0 s.9: 76px on desktop AND mobile */
  --kty-spine-screen:12px;
  --kty-band-height:66px;
  --kty-max:1200px; --kty-gutter:16px; --kty-measure:68ch;
  color-scheme:light;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --kty-surface:#021D2D; --kty-surface-raised:#022C43; --kty-surface-sunken:#011622;
  --kty-text:#E6EFF4; --kty-text-secondary:#C8DCE8; --kty-text-heading:#FFFFFF;
  --kty-link:#A0E114; --kty-link-hover:#7ACF06;
  --kty-border:#033A59; --kty-focus:#A0E114;
  --kty-band-bg:#033A59; --kty-band-number:#8EB8CF;
  --kty-rail-text:#C8DCE8; --kty-rail-rule:#033A59;
  --kty-blue-050:#022C43; --kty-blue-100:#02354F; --kty-line:#033A59;
  --kty-approved:#A0E114; --kty-approved-fill:#0B3A17;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--kty-surface); color:var(--kty-text);
  font-family:var(--kty-font-ui); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--kty-max);margin:0 auto;padding-inline:var(--kty-gutter)}
:focus-visible{outline:2px solid var(--kty-focus);outline-offset:2px}
img,svg{max-width:100%}
a{color:var(--kty-link)}
a:hover{color:var(--kty-link-hover)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:40;
  background:var(--kty-blue-800);
  border-left:var(--kty-spine-screen) solid var(--kty-green-core);
  min-height:var(--kty-header-height);
  display:flex;align-items:center;
}
.head-in{
  max-width:var(--kty-max);margin:0 auto;width:100%;
  padding-inline:var(--kty-gutter);
  display:flex;align-items:center;gap:var(--kty-space-6);
  flex-wrap:wrap;
}
.lockup{display:inline-flex;align-items:center;flex:0 0 auto}
/* 1/2 D clear space. D = the disc diameter = the full artwork height. */
.lockup svg{display:block;height:38px;width:216.9px;margin:19px}
.nav-d{margin-left:auto}
.site-nav{display:flex;align-items:center;gap:var(--kty-space-6);flex-wrap:wrap}
/* The standard fixes the header at 76px and the lockup at a 215px minimum, and
   asks for five nav items plus a button. Below ~880px those cannot coexist on
   one line, so the nav becomes a no-JS disclosure and the bar stays 76px. */
.nav-toggle{
  display:none;list-style:none;cursor:pointer;
  align-items:center;gap:var(--kty-space-2);min-height:44px;padding:0 var(--kty-space-4);
  font-family:var(--kty-font-ui);font-weight:600;font-size:16px;color:var(--kty-white);
  border:1px solid var(--kty-blue-300);border-radius:var(--kty-radius-ui);
}
.nav-toggle::-webkit-details-marker{display:none}
.nav-toggle{width:44px;padding:0;justify-content:center}
.nav-toggle .bars{display:block;width:20px;height:2px;background:currentColor;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.site-nav a{
  font-family:var(--kty-font-ui);font-size:17px;font-weight:600;
  color:var(--kty-white);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid transparent;transition:border-color var(--kty-transition);
}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--kty-green-core);color:var(--kty-white)}
.site-nav a.btn{border-bottom:1px solid transparent}
.site-nav a.btn-on-dark{color:var(--kty-blue-800)}
.site-nav a.btn-on-dark:hover{color:var(--kty-blue-800);border-bottom-color:transparent}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--kty-space-5);
  font-family:var(--kty-font-ui);font-size:16px;font-weight:600;
  border-radius:var(--kty-radius-ui);text-decoration:none;
  border:1px solid transparent;transition:background var(--kty-transition),border-color var(--kty-transition);
}
.btn-primary{background:var(--kty-blue-600);color:var(--kty-white)}
.btn-primary:hover{background:var(--kty-blue-700);color:var(--kty-white)}
.btn-secondary{background:var(--kty-white);color:var(--kty-blue-700);border-color:var(--kty-blue-700)}
.btn-secondary:hover{background:var(--kty-blue-050);color:var(--kty-blue-800)}
/* Dark-ground forms. Blue 500 on Blue 800 is 2.18:1 and fails the 3:1
   non-text boundary check, so the dark header and hero take these instead. */
.btn-on-dark{background:var(--kty-white);color:var(--kty-blue-800)}
.btn-on-dark:hover{background:var(--kty-on-dark);color:var(--kty-blue-800)}
.btn-on-dark-ghost{background:transparent;color:var(--kty-white);border-color:var(--kty-blue-300)}
.btn-on-dark-ghost:hover{background:rgba(255,255,255,.08);color:var(--kty-white)}

/* ---------- category rail, under the header ---------- */
.cat-rail{background:var(--kty-surface);border-bottom:1px solid var(--kty-rail-rule)}
.cat-rail .wrap{
  display:flex;flex-wrap:wrap;gap:var(--kty-space-2) var(--kty-space-5);
  align-items:baseline;justify-content:space-between;
  padding-block:10px;
}
.cat-rail p{margin:0;font-family:var(--kty-font-data);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--kty-rail-text)}
.cat-rail a{color:var(--kty-link)}

/* ---------- hero ---------- */
.hero{
  background:var(--kty-blue-900);
  border-left:var(--kty-spine-screen) solid var(--kty-green-core);
  color:var(--kty-on-dark);
  padding-block:var(--kty-space-9);
}
.overline{
  font-family:var(--kty-font-ui);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--kty-space-5);
  color:var(--kty-blue-300);
}
.hero h1{
  font-family:var(--kty-font-display);
  font-variation-settings:"wdth" var(--kty-wdth-wide);
  font-weight:700;font-size:clamp(32px,4.2vw,62px);line-height:1.06;
  letter-spacing:-.03em;color:var(--kty-white);
  margin:0 0 var(--kty-space-5);max-width:24ch;text-wrap:balance;
}
.hero .lede{
  font-family:var(--kty-font-prose);font-size:19px;line-height:1.7;
  max-width:var(--kty-measure);margin:0 0 var(--kty-space-6);color:var(--kty-on-dark);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--kty-space-3);margin-bottom:var(--kty-space-7)}
.hero-meta{
  font-family:var(--kty-font-data);font-size:14px;line-height:1.6;
  color:var(--kty-blue-300);margin:0;max-width:64ch;
}

/* ---------- section band and rail ---------- */
.band{
  background:var(--kty-band-bg);
  border-left:var(--kty-spine-screen) solid var(--kty-green-core);
  min-height:var(--kty-band-height);display:flex;align-items:center;
  border-radius:var(--kty-radius-record);
}
.band .wrap{display:flex;align-items:baseline;gap:var(--kty-space-4);padding-block:var(--kty-space-4)}
.band .num{
  font-family:var(--kty-font-display);font-weight:700;font-size:22px;
  color:var(--kty-band-number);font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.band h2{
  font-family:var(--kty-font-display);font-weight:700;font-size:22px;line-height:1.28;
  letter-spacing:-.015em;color:var(--kty-band-title);margin:0;
}
.rail{border-bottom:1px solid var(--kty-rail-rule)}
.rail .wrap{
  display:flex;flex-wrap:wrap;gap:var(--kty-space-2) var(--kty-space-5);
  align-items:baseline;justify-content:space-between;padding-block:10px;
}
.rail span{font-family:var(--kty-font-data);font-size:11px;color:var(--kty-rail-text);
  letter-spacing:.04em}
/* Must: 24px of clear space below a band before any content. */
section.body-sec{padding-block:var(--kty-space-5) var(--kty-space-9)}
section.body-sec > .wrap > *:first-child{margin-top:var(--kty-space-5)}

h3{
  font-family:var(--kty-font-display);font-weight:600;font-size:21px;line-height:1.35;
  color:var(--kty-text-heading);margin:var(--kty-space-7) 0 var(--kty-space-3);
}
p.prose{font-family:var(--kty-font-prose);font-size:19px;line-height:1.7;
  max-width:var(--kty-measure);margin:0 0 var(--kty-space-4)}
p.prose:last-child{margin-bottom:0}
.claim{
  font-family:var(--kty-font-display);font-weight:700;
  font-variation-settings:"wdth" var(--kty-wdth-mid);
  font-size:28px;line-height:1.28;letter-spacing:-.015em;
  color:var(--kty-text-heading);margin:0 0 var(--kty-space-5);max-width:26ch;text-wrap:balance;
}

/* ---------- table ---------- */
.tbl-scroll{overflow-x:auto;margin:var(--kty-space-5) 0 var(--kty-space-2)}
table{border-collapse:collapse;width:100%;min-width:680px;border-radius:var(--kty-radius-record)}
thead th{
  background:var(--kty-blue-800);color:var(--kty-white);
  font-family:var(--kty-font-ui);font-weight:600;font-size:14px;
  text-align:left;padding:var(--kty-space-3) var(--kty-space-4);
}
tbody td{
  font-family:var(--kty-font-ui);font-size:16px;color:var(--kty-text);
  padding:var(--kty-space-3) var(--kty-space-4);
  border-bottom:1px solid var(--kty-line);vertical-align:top;
}
tbody tr:nth-child(even) td{background:var(--kty-blue-100)}
tbody td:first-child{font-family:var(--kty-font-data);font-size:14px;color:var(--kty-text-secondary);white-space:nowrap}
.source{
  font-family:var(--kty-font-ui);font-size:14px;color:var(--kty-text-secondary);
  margin:var(--kty-space-2) 0 var(--kty-space-6);max-width:var(--kty-measure);
}
.source:last-child{margin-bottom:0}

/* ---------- stat tiles ---------- */
.stats{display:grid;gap:var(--kty-space-4);grid-template-columns:1fr;margin:var(--kty-space-6) 0 0}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--kty-blue-050);border:1px solid var(--kty-border);
  border-radius:var(--kty-radius-ui);padding:var(--kty-space-5)}
.stat b{
  display:block;font-family:var(--kty-font-display);font-weight:700;font-size:40px;
  line-height:1.1;color:var(--kty-blue-500);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
:root[data-theme="dark"] .stat b{color:var(--kty-green-bright)}

.stat span{
  display:block;margin-top:var(--kty-space-2);
  font-family:var(--kty-font-ui);font-weight:500;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--kty-text-secondary);
}

/* ---------- callout ---------- */
.callout{
  background:var(--kty-blue-100);border-left:3px solid var(--kty-blue-500);
  border-radius:var(--kty-radius-record);
  padding:var(--kty-space-4) var(--kty-space-5);margin:var(--kty-space-5) 0;
  max-width:72ch;
}
.callout p{margin:0 0 var(--kty-space-3);font-family:var(--kty-font-prose);font-size:19px;line-height:1.7}
.callout p:last-child{margin-bottom:0}
.attrib{font-family:var(--kty-font-ui)!important;font-size:14px!important;color:var(--kty-text-secondary)}

/* ---------- doors ---------- */
.doors{display:grid;gap:var(--kty-space-5);grid-template-columns:1fr;margin-top:var(--kty-space-6)}
@media(min-width:900px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{
  background:var(--kty-surface);border:1px solid var(--kty-border);
  border-radius:var(--kty-radius-ui);padding:var(--kty-space-5);
  display:flex;flex-direction:column;
}
.door .post{
  font-family:var(--kty-font-data);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kty-text-secondary);margin:0 0 var(--kty-space-3);
}
.door h3{margin:0 0 var(--kty-space-3);font-size:21px}
.door p{font-family:var(--kty-font-prose);font-size:17px;line-height:1.65;margin:0 0 var(--kty-space-4)}
.door a.door-link{
  margin-top:auto;font-family:var(--kty-font-ui);font-weight:600;font-size:16px;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
}
.door a.door-link:hover{text-decoration:underline}

/* ---------- pill ---------- */
.pill{
  display:inline-flex;align-items:center;gap:var(--kty-space-2);
  background:var(--kty-approved-fill);color:var(--kty-approved);
  border-radius:var(--kty-radius-pill);padding:4px 12px;
  font-family:var(--kty-font-ui);font-weight:600;font-size:14px;
}

/* ---------- CTA ---------- */
.cta{
  background:var(--kty-blue-800);
  border-left:var(--kty-spine-screen) solid var(--kty-green-core);
  color:var(--kty-on-dark);padding-block:var(--kty-space-9);
}
.cta h2{
  font-family:var(--kty-font-display);font-weight:700;
  font-variation-settings:"wdth" var(--kty-wdth-mid);
  font-size:clamp(28px,3.2vw,40px);line-height:1.12;letter-spacing:-.025em;
  color:var(--kty-white);margin:0 0 var(--kty-space-5);max-width:22ch;text-wrap:balance;
}
.cta p{font-family:var(--kty-font-prose);font-size:19px;line-height:1.7;
  max-width:var(--kty-measure);margin:0 0 var(--kty-space-4)}
.cta .hero-actions{margin-top:var(--kty-space-6);margin-bottom:0}

/* ---------- footer ---------- */
.site-foot{
  background:var(--kty-blue-900);
  border-left:var(--kty-spine-screen) solid var(--kty-green-core);
  color:var(--kty-blue-300);padding-block:var(--kty-space-8) var(--kty-space-6);
}
.foot-grid{display:grid;gap:var(--kty-space-6);grid-template-columns:1fr;margin-top:var(--kty-space-6)}
@media(min-width:820px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1.4fr}}
.site-foot h2.foot-h{
  font-family:var(--kty-font-ui);font-weight:600;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kty-blue-300);margin:0 0 var(--kty-space-3);
}
.site-foot p{margin:0 0 var(--kty-space-3);font-size:16px;color:var(--kty-on-dark);max-width:42ch}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:var(--kty-space-2)}
.site-foot a{color:var(--kty-on-dark);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-foot a:hover{color:var(--kty-green-bright);text-decoration:underline}
.coverage-line{
  font-family:var(--kty-font-ui);font-size:15px;color:var(--kty-blue-300)!important;
  border-top:1px solid var(--kty-blue-700);padding-top:var(--kty-space-3);margin-top:var(--kty-space-4)!important;
}
.foot-bar{
  border-top:1px solid var(--kty-blue-700);margin-top:var(--kty-space-7);
  padding-top:var(--kty-space-4);
  display:flex;flex-wrap:wrap;gap:var(--kty-space-2) var(--kty-space-5);
  align-items:center;justify-content:space-between;
  font-size:14px;
}
.foot-bar p{margin:0;color:var(--kty-blue-300)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--kty-space-5)}
.foot-links a{font-size:14px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--kty-space-4);top:var(--kty-space-4);z-index:100;background:var(--kty-white);color:var(--kty-blue-800);padding:0 var(--kty-space-4);border-radius:var(--kty-radius-ui);display:inline-flex;align-items:center;min-height:44px}

/* Dark mode: the page surface is already Blue 900 and raised is Blue 800, so a
   Blue 800 table header stops reading as a header. Step it to Blue 700, which
   is the same ramp, not an inversion. */
:root[data-theme="dark"] thead th{background:#033A59}


@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Measured, not guessed. Lockup 217px + 2x19 clear space = 255. Nav at a 32px
   gap is 661px, of which the button is 213. So the full bar needs 992px, the
   five links alone need 748px, and below that the bar cannot hold them at the
   76px height the standard fixes. Two steps, in that order. Samples joined the
   nav on 21 September 2026; the button step moved to 1059px, re-measured. */
@media(max-width:1059px){
  .head-in{gap:var(--kty-space-5)}
  .site-nav{gap:var(--kty-space-5)}
  .site-nav a.btn{display:none}
}
@media(max-width:747px){
  .nav-toggle{display:inline-flex}
  .head-in{gap:var(--kty-space-3)}
  .nav-d .site-nav{display:none}
  .nav-d[open] .site-nav a.btn{display:inline-flex}
  .nav-d[open] .site-nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;z-index:50;
    background:var(--kty-blue-800);
    border-top:1px solid var(--kty-blue-700);
    padding:var(--kty-space-2) var(--kty-gutter) var(--kty-space-5);
  }
  .nav-d[open] .site-nav a{font-size:18px;padding-block:var(--kty-space-2)}
  .nav-d[open] .site-nav a.btn{margin-top:var(--kty-space-4);justify-content:center}
}
@media(max-width:700px){
  .hero{padding-block:var(--kty-space-8)}
  .cat-rail .wrap{justify-content:flex-start}
}


/* ---------- site map additions ---------- */
.map-lede{font-family:var(--kty-font-prose);font-size:19px;line-height:1.7;max-width:var(--kty-measure);margin:0 0 var(--kty-space-5)}
.tier-label{
  font-family:var(--kty-font-data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--kty-text-secondary);margin:var(--kty-space-7) 0 var(--kty-space-3);
  padding-bottom:var(--kty-space-2);border-bottom:1px solid var(--kty-line);
}
.node{
  background:var(--kty-surface);border:1px solid var(--kty-border);
  border-radius:var(--kty-radius-ui);padding:var(--kty-space-4) var(--kty-space-5);
}
.node.root{background:var(--kty-blue-800);border-color:var(--kty-blue-800);color:var(--kty-on-dark);
  border-left:var(--kty-spine-screen) solid var(--kty-green-core);border-radius:0}
.node.root .route,.node.root h3{color:var(--kty-white)}
.node.root p{color:var(--kty-on-dark)}
.route{
  font-family:var(--kty-font-data);font-size:14px;color:var(--kty-blue-500);
  margin:0 0 var(--kty-space-2);overflow-wrap:anywhere;
}
.node h3{font-size:18px;margin:0 0 var(--kty-space-2)}
.node p{font-family:var(--kty-font-prose);font-size:16px;line-height:1.6;margin:0 0 var(--kty-space-3);color:var(--kty-text)}
.node p:last-child{margin-bottom:0}
.kids{list-style:none;margin:var(--kty-space-3) 0 0;padding:0;border-top:1px solid var(--kty-line);padding-top:var(--kty-space-3)}
.kids li{font-family:var(--kty-font-ui);font-size:15px;color:var(--kty-text-secondary);margin-bottom:var(--kty-space-2)}
.kids li:last-child{margin-bottom:0}
.kids .k{font-family:var(--kty-font-data);font-size:13px;color:var(--kty-text-secondary)}
.branches{display:grid;gap:var(--kty-space-4);grid-template-columns:1fr;margin-top:var(--kty-space-4)}
@media(min-width:720px){.branches{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.branches{grid-template-columns:repeat(3,1fr)}}
.connector{height:var(--kty-space-5);border-left:1px solid var(--kty-blue-200);margin-left:var(--kty-space-5)}
.tag{
  display:inline-flex;align-items:center;border-radius:var(--kty-radius-pill);
  padding:3px 11px;font-family:var(--kty-font-ui);font-weight:600;font-size:13px;
  margin-bottom:var(--kty-space-3);
}
.t-live{background:var(--kty-approved-fill);color:var(--kty-approved)}
.t-draft{background:#FCF3E2;color:#8A5A00}
.t-none{background:var(--kty-cloud);color:var(--kty-slate)}
:root[data-theme="dark"] .t-draft{background:#3A2A08;color:#E8B23A}

:root[data-theme="dark"] .t-none{background:#022C43;color:#8EB8CF}

td .tag{margin-bottom:0}
.rule-list{margin:var(--kty-space-4) 0 0;padding:0;list-style:none;max-width:76ch}
.rule-list li{
  border-left:3px solid var(--kty-blue-500);background:var(--kty-blue-100);
  padding:var(--kty-space-3) var(--kty-space-4);margin-bottom:var(--kty-space-3);
  font-family:var(--kty-font-prose);font-size:17px;line-height:1.6;
}
.rule-list b{font-family:var(--kty-font-ui);font-weight:600;display:block;margin-bottom:4px;font-size:15px}

/* ==========================================================================
   Accessibility pass, 21 September 2026. Target: WCAG AAA (7:1 body, 4.5:1
   large) rather than the AA floor in section 4 of the standard. Every colour
   used here is a step already named in section 4; nothing new is introduced.
   ========================================================================== */

/* 1. Colour is never the only carrier. In-content links carry an underline,
      not just a hue, so they survive greyscale and colour blindness. */
p.prose a, .callout p a, .node p a, .site-foot p a, .cat-rail a, .map-lede a,
.rule-list a, .source a, td a { text-decoration: underline; text-underline-offset: 2px; }
.site-foot ul a { text-decoration: underline; text-underline-offset: 2px; }

/* 2. State pills: Green Text on its own fill is 5.19:1 and cannot reach AAA
      anywhere in this palette. The word and a 3px state bar carry the meaning,
      the label goes to Ink, and the state fill is kept. */
.tag{ color: var(--kty-ink); border-left: 3px solid currentColor; padding-left: 9px; }
.t-live{ background: var(--kty-approved-fill); border-left-color: #437203; color: var(--kty-ink); }
.t-draft{ background: #FCF3E2; border-left-color: #8A5A00; color: var(--kty-ink); }
.t-none{ background: var(--kty-cloud); border-left-color: var(--kty-slate); color: var(--kty-ink); }
:root[data-theme="dark"] .tag, :root[data-theme="dark"] .t-live,
:root[data-theme="dark"] .t-draft, :root[data-theme="dark"] .t-none{ color: var(--kty-on-dark); }


/* 3. Focus ring. Blue 500 on Blue 800 is 2.18:1, so the ring disappears on every
      dark section. Green Bright is 7.57:1 on Blue 700 and higher on Blue 800/900. */
.site-head :focus-visible, .hero :focus-visible, .cta :focus-visible,
.site-foot :focus-visible, .band :focus-visible, .node.root :focus-visible{
  outline: 3px solid var(--kty-green-bright); outline-offset: 2px;
}
:focus-visible{ outline-width: 3px; }

/* 4. Honour an explicit request for more contrast. */
@media (prefers-contrast: more){
  :root{
    --kty-text-secondary:#131A21; --kty-rail-text:#131A21;
    --kty-link:#033A59; --kty-link-hover:#021D2D; --kty-border:#55636E;
  }
  :root[data-theme="dark"], :root:not([data-theme="light"]){
    --kty-text-secondary:#FFFFFF; --kty-rail-text:#FFFFFF;
    --kty-link:#A0E114; --kty-border:#8EB8CF;
  }
  .node, .stat, .door, table, .callout{ border-width:2px }
  tbody td{ border-bottom-width:2px }
}

/* 5. Last two AAA shortfalls.
      .pill was Green Text on its own fill at 5.19:1, same ceiling as .tag: the
      word and a 3px state bar carry the state, the label goes to Ink.
      The CTA overline sat on Blue 800 at 6.86:1; Blue 200 on Blue 800 is 10.3:1.
      The hero overline stays Blue 300, which is 8.15:1 on Blue 900. */
.pill{ color: var(--kty-ink); border-left: 3px solid #437203; padding-left: 9px; }
:root[data-theme="dark"] .pill{ color: var(--kty-on-dark); border-left-color: var(--kty-green-bright); }

.cta .overline{ color: var(--kty-blue-200); }

/* Header nav, two renderings of the same links. A closed <details> hides its
   contents whatever the CSS says, so the links cannot live only inside it: wide
   screens get a plain row, narrow screens get the no-JS disclosure. */
.site-nav--bar{margin-left:auto}
.nav-d{display:none}
@media(max-width:747px){
  .site-nav--bar{display:none}
  .nav-d{display:block;margin-left:auto}
}

/* A card whose one link is marked .node-link is clickable across its whole face:
   the link's ::after stretches over the card. One link per card, so a screen
   reader still hears one named link, and nothing needs JavaScript. */
.node:has(.node-link){position:relative;transition:border-color var(--kty-transition)}
.node-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.node:has(.node-link):hover{border-color:var(--kty-blue-500)}
.node:has(.node-link:focus-visible){outline:2px solid var(--kty-focus);outline-offset:2px}

/* ==========================================================================
   Open sections, 21 September 2026. The navy band is kept for the one or two
   real turns on a page; the sections between them take a plain heading on an
   open ground. The green spine stays on the dark grounds only: header, hero,
   band, CTA and footer. The body is light whatever the device asks for.
   ========================================================================== */
section.body-sec{padding-block:var(--kty-space-8)}
section.body-sec > .wrap > *:first-child{margin-top:0}
.band + .rail + section.body-sec, .band + section.body-sec{padding-top:var(--kty-space-5)}
.band + .rail + section.body-sec > .wrap > *:first-child,
.band + section.body-sec > .wrap > *:first-child{margin-top:var(--kty-space-5)}
.body-sec--tint{background:var(--kty-blue-050)}
.sec-h{
  font-family:var(--kty-font-display);font-weight:700;
  font-variation-settings:"wdth" var(--kty-wdth-mid);
  font-size:clamp(26px,2.6vw,34px);line-height:1.18;letter-spacing:-.02em;
  color:var(--kty-text-heading);margin:0 0 var(--kty-space-5);max-width:30ch;text-wrap:balance;
}
.sec-kicker{
  font-family:var(--kty-font-data);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--kty-text-secondary);margin:0 0 var(--kty-space-3);
}

/* Where am I: a one-line trail under the header on every page but home. */
.crumbs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--kty-space-2)}
.crumbs li{font-family:var(--kty-font-data);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--kty-rail-text)}
.crumbs li + li::before{content:"/";margin-right:var(--kty-space-2);color:var(--kty-slate)}
.crumbs a{color:var(--kty-link);text-decoration:underline;text-underline-offset:2px}
.crumbs [aria-current="page"]{color:var(--kty-text);font-weight:600}

/* Door cards carry a whole-card link, like the report tiles. */
.door{position:relative;transition:border-color var(--kty-transition)}
.door a.door-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.door:hover{border-color:var(--kty-blue-500)}
.door:has(.door-link:focus-visible){outline:3px solid var(--kty-focus);outline-offset:2px}
.door .who{
  font-family:var(--kty-font-data);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kty-text-secondary);margin:0 0 var(--kty-space-3);
}

/* Sample cards: what the report answers, then the way in. */
.node .node-meta{font-family:var(--kty-font-data);font-size:13px;color:var(--kty-text-secondary);margin:0 0 var(--kty-space-3)}
.node .node-cta{font-family:var(--kty-font-ui);font-weight:600;font-size:16px;margin:var(--kty-space-4) 0 0}
.node .node-cta a{display:inline-flex;align-items:center;min-height:44px}

/* Headline beside the proof on wide screens. */
.split{display:grid;gap:var(--kty-space-6);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.split .callout{margin-top:0}

/* A band with no number still spans the page; flex would shrink and centre it. */
.band > .wrap{width:100%}