/*
 * Handoff stylesheet: single
 * Lifted verbatim from the built page "Single post - Mad Honey Poisoning.html".
 *
 * The handoff ships eight distinct stylesheets, not one. They conflict:
 * .authorbox is `grid 1fr 240px` in the single-post sheet and `flex` in the
 * base sheet, .crumb and .chero carry different spacing, and so on. Merging
 * them into one file cannot reproduce every layout, so each page is served
 * the sheet it was designed against.
 *
 * Do not edit. Regenerate from the handoff.
 */


/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root{
  --paper:#FBFAF7; --paper-2:#F1EFE9; --card:#FFFFFF;
  --ink:#16181A; --ink-2:#3E443F; --ink-3:#6B726C;
  --rule:#DEDAD1; --rule-2:#C4BFB4;

  --risk:#A4123F;  --risk-bg:#FBEEF2;  --risk-line:#E8C3D0;
  --evid:#14484F;  --evid-bg:#E9F1F1;  --evid-line:#B9D2D3;
  --legal:#6B4A17; --legal-bg:#F6EFE2; --legal-line:#DECBA8;

  --accent:#14484F; --on-accent:#FFFFFF; --on-solid:#FFFFFF;

  /* always dark surfaces. --ink is a TEXT token and inverts in dark mode, so
     it must never be used as a panel background. */
  --panel:#16181A; --on-panel:#FFFFFF; --on-panel-2:#D2D7D3; --on-panel-3:#AEB5B0;
  --accent-onpanel:#5EA9B3;

  --focus:#14484F; --disabled:#B7B2A8;

  --dis:"Archivo","Segoe UI Variable Display","Segoe UI Semibold",system-ui,-apple-system,sans-serif;
  --ui:"Archivo","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4","Palatino Linotype","Iowan Old Style",Palatino,Georgia,serif;
  --mono:"JetBrains Mono","Cascadia Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:44px; --r-pill:999px;
  --sh-pill:0 2px 10px rgba(22,24,26,.06), 0 12px 34px rgba(22,24,26,.08);
  --sh-card:0 1px 2px rgba(22,24,26,.05), 0 8px 24px rgba(22,24,26,.06);
  --container:1240px;
  --ph-fill:#4A4E48;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121517; --paper-2:#181C1E; --card:#1A1E20;
    --ink:#E7E9E6; --ink-2:#B2B9B5; --ink-3:#8B938E;
    --rule:#262B2D; --rule-2:#39403F;
    --risk:#F2617A;  --risk-bg:#2A1119;  --risk-line:#4E1F2C;
    --evid:#5EA9B3;  --evid-bg:#0E2427;  --evid-line:#1E4348;
    --legal:#C79A56; --legal-bg:#241C10; --legal-line:#463818;
    --accent:#5EA9B3; --on-accent:#08181A; --on-solid:#0E1416;
    --focus:#5EA9B3; --disabled:#4A5150;
    --sh-pill:0 2px 10px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.4);
    --sh-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#121517; --paper-2:#181C1E; --card:#1A1E20;
  --ink:#E7E9E6; --ink-2:#B2B9B5; --ink-3:#8B938E;
  --rule:#262B2D; --rule-2:#39403F;
  --risk:#F2617A;  --risk-bg:#2A1119;  --risk-line:#4E1F2C;
  --evid:#5EA9B3;  --evid-bg:#0E2427;  --evid-line:#1E4348;
  --legal:#C79A56; --legal-bg:#241C10; --legal-line:#463818;
  --accent:#5EA9B3; --on-accent:#08181A; --on-solid:#0E1416;
  --focus:#5EA9B3; --disabled:#4A5150;
  --sh-pill:0 2px 10px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.4);
  --sh-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-2);color:var(--ink);font:400 16px/1.65 var(--ui);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none !important}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--paper);
  font:600 13.5px/1 var(--ui);padding:14px 18px;border-radius:0 0 var(--r-sm) 0;text-decoration:none}
.skip:focus{left:0}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ICON CENTRING. The icon font ships its own line box; vertical-align fights
   flex and grid centring, so every glyph is a block with line-height 1 inside
   a place-items:center box. This is what was knocking the circles off centre. */
[class^="ri-"],[class*=" ri-"]{display:block;line-height:1;font-style:normal}
.icobox{display:grid;place-items:center}

/* ==========================================================================
   3 · TYPE
   ========================================================================== */
.h-mega{font:600 clamp(36px,5.4vw,66px)/1.08 var(--dis);letter-spacing:-.03em;margin:0;color:var(--ink)}
.h-sec{font:600 clamp(27px,3vw,40px)/1.15 var(--dis);letter-spacing:-.025em;margin:0;color:var(--ink)}
.h-card{font:600 clamp(20px,1.55vw,25px)/1.26 var(--dis);letter-spacing:-.016em;margin:0;display:block}
.accent{color:var(--accent)}
.sub{font:400 17px/1.62 var(--ui);color:var(--ink-2);margin:0}
.body{font:400 16.5px/1.72 var(--serif);color:var(--ink-2);margin:0 0 var(--s4);max-width:68ch}
.meta{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 var(--ui);color:var(--ink-2);white-space:nowrap}
.meta i{font-size:15px}
.metarow{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.lnk{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.lnk:hover{text-decoration-color:var(--risk)}

/* ==========================================================================
   4 · BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 14.5px/1 var(--ui);padding:15px 24px;min-height:50px;
  border:1px solid transparent;border-radius:var(--r-pill);text-decoration:none;cursor:pointer;
  transition:background .12s ease-out,border-color .12s ease-out,color .12s ease-out}
.btn i{font-size:17px}
.btn-a{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-a:hover{background:#0E353B}
:root[data-theme="dark"] .btn-a:hover{background:#7FBEC7}
.btn-p{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-p:hover{background:#000}
:root[data-theme="dark"] .btn-p:hover{background:#fff}
.btn-s{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-s:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-d{background:var(--risk);color:#fff;border-color:var(--risk)}
.btn-d:hover{background:#8B0F35}
:root[data-theme="dark"] .btn-d{color:#1A0710}
.btn-sm{padding:11px 17px;min-height:44px;font-size:13px}
.btn[disabled]{background:var(--disabled);border-color:var(--disabled);color:var(--paper);cursor:not-allowed}
.iconbtn{width:46px;height:46px;border-radius:var(--r-pill);display:grid;place-items:center;flex:none;
  border:1px solid var(--rule-2);background:var(--card);color:var(--ink);cursor:pointer;font-size:19px;padding:0}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn.solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.readmore{display:inline-flex;align-items:center;gap:11px;font:600 15px/1 var(--ui);
  color:var(--accent);text-decoration:none}
.readmore .circ{width:32px;height:32px;border-radius:var(--r-pill);background:var(--accent);
  color:var(--on-accent);display:grid;place-items:center;font-size:16px}
.readmore:hover{text-decoration:underline;text-underline-offset:4px}

.sqi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--ink);color:var(--paper);font-size:19px}
.sqi.risk{background:var(--risk);color:var(--on-solid)}
.sqi.evid{background:var(--evid);color:var(--on-solid)}
.sqi.legal{background:var(--legal);color:var(--on-solid)}
.sqi.sm{width:30px;height:30px;border-radius:9px;font-size:15px}
.sqi.lg{width:48px;height:48px;border-radius:14px;font-size:23px}

/* ==========================================================================
   5 · HEADER. Sits inside .wrap so its left edge matches the page gutter.
   ========================================================================== */
/* The pill floats OVER the page instead of sitting in its own band. In flow it
   reserved a strip of body background above the content, which read as a solid
   header bar of the wrong colour on every page. Fixed + pointer-events:none
   means the page ground runs continuously behind it. */
.hdrshell{position:fixed;top:0;left:0;right:0;z-index:100;padding:var(--s4) 0;pointer-events:none}
.hdr{pointer-events:auto;background:color-mix(in srgb,var(--card) 72%,transparent);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--rule);border-radius:var(--r-pill);
  box-shadow:var(--sh-pill);display:flex;align-items:center;gap:var(--s4);padding:11px 15px 11px 15px}
/* The brand lockup is ONE image, never rendered text. Swap this single
   placeholder for the real logo asset when the name is decided. */
.brand{display:flex;align-items:center;text-decoration:none;min-width:0;flex:0 1 auto;overflow:hidden}
/* scales proportionally inside both bounds, so a narrow header shrinks the
   logo instead of pushing the page sideways */
.brand img{height:auto;width:auto;max-height:48px;max-width:100%;display:block}
.mainnav{margin-left:auto;display:flex;align-items:center;gap:2px}
.mainnav > a,.dd > button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:500 15px/1 var(--ui);color:var(--ink-2);text-decoration:none;padding:14px 15px;
  border-radius:var(--r-pill);min-height:46px}
.dd > button i{font-size:15px}
.mainnav > a:hover,.dd > button:hover{color:var(--ink);background:var(--paper-2)}
.mainnav > a[aria-current="page"]{color:var(--ink);font-weight:600}
.dd{position:relative}
.dd > button[aria-expanded="true"]{color:var(--ink);background:var(--paper-2)}
.ddmenu{position:absolute;top:calc(100% + 10px);left:0;min-width:262px;z-index:20;display:none;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:var(--sh-pill);padding:10px}
.dd > button[aria-expanded="true"] + .ddmenu{display:block}
.ddmenu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  font:500 14.5px/1.3 var(--ui);color:var(--ink-2);text-decoration:none;min-height:46px}
.ddmenu a:hover{background:var(--paper-2);color:var(--ink)}
.tswitch{position:relative;width:76px;height:44px;flex:none;border-radius:var(--r-pill);
  background:var(--ink);border:1px solid var(--ink);cursor:pointer;color:var(--paper);padding:0}
.tswitch .knob{position:absolute;top:4px;left:4px;width:34px;height:34px;border-radius:var(--r-pill);
  background:var(--paper);transition:transform .16s ease-out}
.tswitch[aria-pressed="true"] .knob{transform:translateX(32px)}
.tswitch .ti{position:absolute;top:0;bottom:0;width:34px;display:grid;place-items:center;font-size:17px;right:5px}
.tswitch[aria-pressed="true"] .ti{right:auto;left:5px}
.burger{display:none}

/* ==========================================================================
   6 · HERO
   ========================================================================== */
/* Hero carries a photographic backdrop. Legibility comes from ONE flat scrim,
   never a gradient ramp. The backdrop does not change with the theme, so the
   hero copy is bound to the always-dark --on-panel tokens. */
.hero{position:relative;overflow:hidden;background:var(--panel);
  padding:var(--s9) 0 var(--s9);text-align:center}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero .bg::after{content:"";position:absolute;inset:0;background:rgba(12,14,15,.66)}
.hero > .wrap{position:relative;z-index:1}
.hero .h-mega{max-width:19ch;margin:0 auto var(--s5);color:var(--on-panel)}
.hero .sub{max-width:60ch;margin:0 auto var(--s7);font-size:18px;color:var(--on-panel-2)}
.hero .catrow a{color:var(--on-panel)}
.hero .catrow a:hover{color:var(--accent-onpanel)}
/* the neutral tile is near-black, which would disappear on a dark backdrop;
   the three signal tiles are solid fills and stay as they are */
.hero .sqi{background:rgba(255,255,255,.18);color:#FFFFFF}
.hero .sqi.risk{background:var(--risk);color:#FFFFFF}
.hero .sqi.evid{background:var(--evid);color:#FFFFFF}
.hero .sqi.legal{background:var(--legal);color:#FFFFFF}
.searchframe{max-width:840px;margin:0 auto;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-pill);padding:11px;box-shadow:var(--sh-pill)}
.searchinner{display:flex;align-items:center;gap:var(--s3);padding-left:8px}
.searchinner .sq{width:46px;height:46px;border-radius:13px;background:var(--paper-2);color:var(--ink-2);
  display:grid;place-items:center;flex:none;font-size:20px}
.searchinner input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:400 16.5px var(--ui);padding:15px 0}
.searchinner input::placeholder{color:var(--ink-3)}
.searchinner input:focus{outline:none}
.searchframe:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 16%,transparent)}
.catrow{display:flex;align-items:center;justify-content:center;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s7)}
.catrow a{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  font:600 16.5px/1 var(--ui);min-height:46px}
.catrow a:hover{color:var(--accent)}

/* ==========================================================================
   7 · PANEL + SECTION HEADS
   ========================================================================== */
.panel{background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s9) 0 var(--s8)}
.sechead{margin-bottom:var(--s6)}
.sechead .sub{max-width:56ch;margin-top:var(--s3)}
.sechead.row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}

/* ==========================================================================
   8 · CHIPS
   ========================================================================== */
.chip{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--ui);letter-spacing:.05em;
  text-transform:uppercase;padding:6px 15px 6px 6px;border-radius:var(--r-pill);
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--rule);text-decoration:none}
.chip .dot{width:24px;height:24px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--ink);color:var(--paper);flex:none;font-size:14px}
.chip.risk{background:var(--risk-bg);color:var(--risk);border-color:var(--risk-line)}
.chip.risk .dot{background:var(--risk);color:var(--on-solid)}
.chip.evid{background:var(--evid-bg);color:var(--evid);border-color:var(--evid-line)}
.chip.evid .dot{background:var(--evid);color:var(--on-solid)}
.chip.legal{background:var(--legal-bg);color:var(--legal);border-color:var(--legal-line)}
.chip.legal .dot{background:var(--legal);color:var(--on-solid)}
.chip.plain{padding:8px 15px}
a.chip:hover{border-color:var(--ink-3)}
.chip.onimg{background:#FFFFFF;color:#16181A;border-color:#FFFFFF}
.chip.onimg .dot{background:#16181A;color:#FFFFFF}
.chip.onimg.risk .dot{background:#A4123F}
.chip.onimg.evid .dot{background:#14484F}
.chip.onimg.legal .dot{background:#6B4A17}

/* ==========================================================================
   9 · IMAGE BLOCKS
   ========================================================================== */
.ph{position:relative;overflow:hidden;background:var(--ph-fill);border-radius:var(--r-md)}
.ph > img{width:100%;height:100%;object-fit:cover}
.ph.r16{aspect-ratio:16/9} .ph.r43{aspect-ratio:4/3} .ph.r11{aspect-ratio:1/1}
.cap{font:400 12.5px/1.55 var(--ui);color:var(--ink-2);padding-top:9px;margin:10px 0 0;border-top:1px solid var(--rule)}
.cap b{color:var(--ink)}

/* ==========================================================================
   10 · FEATURED CAROUSEL
   ========================================================================== */
.feature{display:grid;grid-template-columns:1fr 1.12fr;background:var(--panel);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card)}
.feature .inner{padding:var(--s7);display:flex;flex-direction:column;gap:var(--s4)}
.feature .toprow{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.feature .h-card{color:var(--on-panel);font-size:clamp(24px,2.3vw,34px)}
.feature p{font:400 16px/1.66 var(--serif);color:var(--on-panel-2);margin:0;max-width:48ch}
.feature .meta{color:var(--on-panel-3)}
.feature .readmore{color:var(--accent-onpanel)}
.feature .readmore .circ{background:var(--accent-onpanel);color:#08181A}
.feature .pic{position:relative;background:var(--ph-fill);min-height:360px}
.feature .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fslide{display:flex;flex-direction:column;gap:var(--s4)}
.feature .thumbs{display:flex;gap:var(--s3);margin-top:auto;padding-top:var(--s5)}
.fthumb{width:118px;height:80px;border-radius:var(--r-sm);border:2px solid rgba(255,255,255,.25);
  padding:0;background:var(--ph-fill);cursor:pointer;overflow:hidden;flex:none}
.fthumb img{width:100%;height:100%;object-fit:cover}
.fthumb[aria-selected="true"]{border-color:#FFFFFF}
.feature .controls{display:flex;align-items:center;gap:var(--s4)}
.feature .track{flex:1;max-width:280px;height:4px;background:rgba(255,255,255,.24);border-radius:var(--r-pill);overflow:hidden}
.feature .track b{display:block;height:100%;width:33.33%;background:#FFFFFF;transition:width .2s ease-out}
.feature .iconbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#FFFFFF}
.feature .iconbtn:hover{background:rgba(255,255,255,.22)}
.feature .iconbtn.solid{background:#FFFFFF;border-color:#FFFFFF;color:#16181A}

/* ==========================================================================
   11 · GRID + SIDEBAR
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 344px;gap:var(--s6);align-items:start}
.cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}

.post{position:relative;display:block;min-height:450px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ph-fill);text-decoration:none;color:#FFFFFF;box-shadow:var(--sh-card)}
.post > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post::after{content:"";position:absolute;inset:0;background:rgba(13,15,16,.66)}
.post .top{position:absolute;top:var(--s4);left:var(--s4);right:var(--s4);z-index:2;
  display:flex;gap:var(--s2);flex-wrap:wrap}
.post .foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;padding:var(--s5)}
.post .h-card{color:#FFFFFF;margin-bottom:var(--s3)}
.post p{display:block;font:400 14.5px/1.62 var(--ui);color:#DDE1DE;margin:0}
.post .divider{display:block;height:1px;background:rgba(255,255,255,.26);margin:var(--s4) 0 var(--s3)}
.post .metarow{justify-content:space-between}
.post .meta{color:#CBD1CC}
.post:hover .h-card{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

.rail{display:flex;flex-direction:column;gap:var(--s5);position:sticky;top:110px}
.railcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--sh-card)}
.railcard > h3{font:600 21px/1.2 var(--dis);letter-spacing:-.018em;margin:0 0 var(--s4);color:var(--ink)}
.pillwrap{display:flex;flex-wrap:wrap;gap:10px}
.trend{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);padding:var(--s4) 0;
  border-top:1px solid var(--rule);align-items:start}
.trend:first-of-type{border-top:0;padding-top:0}
.trend .ph{border-radius:12px}
.trend a{display:block;font:600 15px/1.38 var(--dis);color:var(--ink);text-decoration:none;margin-bottom:9px}
.trend a:hover{color:var(--accent)}

.authorcard{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-card)}
.authorcard .ph{border-radius:0}
.authorcard .in{padding:var(--s5)}
.authorcard .nm{display:flex;align-items:center;gap:11px;margin-bottom:var(--s3);flex-wrap:wrap}
.authorcard .nm b{font:600 20px/1 var(--dis);color:var(--on-panel)}
.authorcard p{font:400 14.5px/1.64 var(--ui);color:var(--on-panel-2);margin:0 0 var(--s4)}
.authorcard .dsc{font-size:13px;color:var(--on-panel-3)}
.socials{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.socials a{width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--on-panel);font-size:18px;text-decoration:none}
.socials a:hover{background:#FFFFFF;color:#16181A}
.socials .lbl{font:600 13px/1 var(--ui);color:var(--on-panel-3);margin-right:5px}

/* ==========================================================================
   12 · INFO CARDS
   Replaces the tinted-box-with-a-left-stripe pattern. These are real cards:
   card surface, icon badge, coloured heading, no wash of tint, no stripe.
   ========================================================================== */
.info{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh-card)}
.info .hd{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s4)}
.info h3{font:600 21px/1.24 var(--dis);letter-spacing:-.018em;margin:0;color:var(--ink)}
.info.risk h3{color:var(--risk)}
.info.evid h3{color:var(--evid)}
.info p{font:400 15.5px/1.72 var(--ui);color:var(--ink-2);margin:0 0 var(--s3);max-width:86ch}
.info p:last-child{margin-bottom:0}
.info .links{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5)}
/* the emergency card is the one place that keeps a tinted ground, because
   safety is required to out-rank every other block visually */
.info.alarm{background:var(--risk-bg);border-color:var(--risk-line)}
.info.alarm h3,.info.alarm .h-sec{color:var(--risk)}
.info.alarm .body{color:var(--ink-2)}

/* ==========================================================================
   13 · TABLE
   ========================================================================== */
.tblshell{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-card)}
.tblscroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font:400 14.5px/1.5 var(--ui)}
table.t th{text-align:left;font:600 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding:var(--s4) var(--s5);border-bottom:1.5px solid var(--rule-2);
  white-space:nowrap;background:var(--paper-2)}
table.t td{padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr:hover td{background:var(--paper-2)}
table.t td b{color:var(--ink)}
table.t td.date{font-family:var(--mono);font-size:13px;white-space:nowrap}

/* ==========================================================================
   14 · FAQ + FORMS
   ========================================================================== */
.faqlist{width:100%}
details.faq{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);
  margin-bottom:var(--s3);box-shadow:var(--sh-card)}
details.faq > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s4);padding:var(--s5);
  font:600 17.5px/1.36 var(--dis);color:var(--ink)}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary .pm{width:36px;height:36px;border-radius:var(--r-pill);border:1px solid var(--rule-2);
  display:grid;place-items:center;flex:none;color:var(--ink-2);font-size:17px}
details.faq[open] > summary .pm{background:var(--ink);border-color:var(--ink);color:var(--paper)}
details.faq .ans{padding:0 var(--s5) var(--s5)}
details.faq .ans p{font:400 15.5px/1.74 var(--serif);color:var(--ink-2);margin:0 0 var(--s3)}
details.faq .ans p:last-child{margin-bottom:0}
.fld label{display:block;font:600 13px/1 var(--ui);margin-bottom:9px;color:var(--ink)}
.inp{width:100%;padding:15px 18px;min-height:50px;background:var(--card);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:var(--r-pill);font:400 15.5px var(--ui)}
.inp::placeholder{color:var(--ink-3)}
.inp:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 16%,transparent)}
.nlpanel{background:var(--panel);border-radius:var(--r-lg);padding:var(--s7);
  display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s7);align-items:center}
.nlpanel h2{font:600 clamp(23px,2.1vw,31px)/1.26 var(--dis);letter-spacing:-.02em;color:var(--on-panel);margin:0}
.nlpanel .note{font:400 14px/1.66 var(--ui);color:var(--on-panel-2);margin:var(--s4) 0 0;max-width:52ch}
.nlpanel .fld label{color:var(--on-panel)}
.nlpanel .hint{font:400 12.5px/1.5 var(--ui);color:var(--on-panel-3);margin:10px 0 0}
.nlfield{display:flex;gap:var(--s3);align-items:center}
.nlfield .inp{flex:1;border-color:transparent}

/* ==========================================================================
   15 · FOOTER. align-content:start keeps every column on one baseline.
   ========================================================================== */
.ftr{background:var(--paper-2);padding:var(--s8) 0 var(--s5);margin-top:var(--s9);color:var(--ink-2)}
.ftr .cols{display:grid;grid-template-columns:1.8fr repeat(4,1fr);gap:var(--s6);
  align-items:start;margin-bottom:var(--s7)}
.ftr .col{min-width:0}
.ftr h4{font:600 16px/1.2 var(--dis);color:var(--accent);margin:0 0 var(--s3)}
.ftr a{display:block;padding:7px 0;font:400 14.5px/1.4 var(--ui);color:var(--ink-2);
  text-decoration:none;min-height:34px}
.ftr a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ftr .about p{font:400 14.5px/1.68 var(--ui);max-width:46ch;margin:0 0 var(--s5)}
.ftr .about .brand{margin-bottom:var(--s5)}
/* .ftr a sets display:block and wins on source order, which pushed the social
   glyphs to the top of their circles instead of the centre. Restate the grid. */
.ftr .socials a{display:grid;place-items:center;width:42px;height:42px;
  background:var(--card);border:1px solid var(--rule);color:var(--ink-2);
  min-height:42px;padding:0}
.ftr .socials a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ftr .base{border-top:1px solid var(--rule);padding-top:var(--s5);display:flex;
  justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font:400 13.5px/1.6 var(--ui);color:var(--ink-2)}
.ftr .base a{display:inline;padding:0;min-height:0}
.ftr .base .r{display:flex;gap:var(--s5);flex-wrap:wrap;align-items:center}
.themefoot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.themefoot .seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r-pill);
  overflow:hidden;background:var(--card)}
.themefoot button{background:none;border:0;cursor:pointer;color:var(--ink-2);
  font:600 12.5px/1 var(--ui);padding:12px 15px;min-height:44px}
.themefoot button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.stickybar{position:sticky;bottom:0;z-index:80;display:none;gap:var(--s2);padding:10px var(--s4);
  background:var(--card);border-top:1px solid var(--rule)}
.stickybar .btn{flex:1}

/* ==========================================================================
   16 · RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .grid4{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .rail{position:static}
  .feature{grid-template-columns:1fr}
  .feature .pic{order:-1;min-height:0;aspect-ratio:16/9}
  .ftr .cols{grid-template-columns:1fr 1fr 1fr}
  .ftr .about{grid-column:1 / -1;order:-1}
}
@media(max-width:900px){
  .mainnav{display:none}
  .burger{display:grid;margin-left:auto}
  .nlpanel{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6)}
}
@media(max-width:760px){
  .cardgrid,.grid4{grid-template-columns:1fr}
  .hero{padding:var(--s7) 0 var(--s8)}
  .panel{padding:var(--s7) 0;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .feature .inner{padding:var(--s5)}
  .fthumb{width:92px;height:64px}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .stickybar{display:flex}
  .catrow{gap:var(--s5)}
  .catrow a{font-size:15px}
  .searchinner{flex-wrap:wrap;padding:0}
  .searchinner .sq{display:none}
  .searchinner input{flex:1 1 100%;padding:12px 16px}
  .searchinner .btn{flex:1 1 100%}
  .post{min-height:400px;display:flex;flex-direction:column;justify-content:flex-end}
  .post .foot{position:static;padding:var(--s5);padding-top:var(--s8)}
  .info{padding:var(--s5)}
}
@media(max-width:520px){
  .hdr{padding:9px 11px;gap:var(--s2);flex-wrap:nowrap}
  .brand img{max-height:36px}
  .iconbtn.burger{width:42px;height:42px;font-size:17px}
  .tswitch{width:64px;height:38px}
  .tswitch .knob{width:30px;height:30px}
  .tswitch[aria-pressed="true"] .knob{transform:translateX(26px)}
  .tswitch .ti{width:30px}
  .h-mega{letter-spacing:-.024em}
  .wrap{padding:0 var(--s4)}
}
/* grid and flex children must be allowed to shrink, and the nowrap meta rows
   must be allowed to wrap, or they force a min-width that pushes a block wider
   than its own container. */
.cardgrid > *,.grid4 > *,.split > *{min-width:0}
@media(max-width:560px){
  .meta{white-space:normal}
  .post .metarow,.metarow{gap:var(--s3)}
}
@media(max-width:380px){
  .brand img{max-height:30px}
  .hdr{gap:6px;padding:8px 9px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ==========================================================================
   17 · SINGLE POST
   Two column article plus card rail, matching the reference single post.
   ========================================================================== */
.postwrap{background:var(--paper);padding:var(--s7) 0 var(--s8)}
.article{display:grid;grid-template-columns:1fr 344px;gap:var(--s6);align-items:start}
/* grid items refuse to shrink below min-content without this, which let the
   hero, share bar, prev/next and author box overflow the article column */
.article > *{min-width:0}
.sharebar,.pnnav,.authorbox,.posthero,.tagpills{min-width:0}
.prose > figure,.figpair,.tblshell{min-width:0;max-width:100%}
.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font:500 13px/1 var(--ui);
  color:var(--ink-2);margin:0 0 var(--s4)}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.crumb i{font-size:14px;color:var(--ink-3)}

.posthero{border-radius:var(--r-lg);overflow:hidden;background:var(--ph-fill);aspect-ratio:16/9;
  box-shadow:var(--sh-card)}
.posthero img{width:100%;height:100%;object-fit:cover}
.herocap{font:400 12.5px/1.55 var(--ui);color:var(--ink-2);margin:var(--s3) 0 0}
.herocap b{color:var(--ink)}

.pillmeta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s5) 0 var(--s5)}
.bypill{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-pill);padding:5px 16px 5px 5px;font:600 13.5px/1 var(--ui);color:var(--ink);
  text-decoration:none;box-shadow:var(--sh-card)}
.bypill img{width:30px;height:30px;border-radius:var(--r-pill);object-fit:cover;flex:none}
.catpill{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-pill);padding:5px 16px 5px 5px;font:600 13.5px/1 var(--ui);color:var(--ink);
  text-decoration:none;box-shadow:var(--sh-card)}
.catpill .dot{width:26px;height:26px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--risk);color:#FFFFFF;font-size:15px;flex:none}

.h1post{font:600 clamp(28px,3.3vw,44px)/1.14 var(--dis);letter-spacing:-.028em;margin:0 0 var(--s4);color:var(--ink)}
.postlead{font:400 clamp(17px,1.5vw,20px)/1.6 var(--ui);color:var(--ink-2);margin:0 0 var(--s5);max-width:70ch}
.byline{font:400 13.5px/1.7 var(--ui);color:var(--ink-2);margin:0}
.byline b{color:var(--ink)}
.hr{height:1px;background:var(--rule);border:0;margin:var(--s6) 0}

/* prose */
.prose{max-width:74ch}
.prose h2{font:600 clamp(23px,2.1vw,30px)/1.22 var(--dis);letter-spacing:-.02em;
  margin:var(--s7) 0 var(--s4);color:var(--ink);scroll-margin-top:110px}
.prose h3{font:600 19px/1.3 var(--dis);letter-spacing:-.012em;margin:var(--s6) 0 var(--s3);color:var(--ink)}
.prose p{font:400 17px/1.78 var(--serif);color:var(--ink);margin:0 0 var(--s4)}
.prose p.small{font-size:15.5px}
.prose ul{list-style:none;margin:0 0 var(--s5);padding:0}
.prose ul li{position:relative;padding-left:26px;font:400 16.5px/1.72 var(--serif);color:var(--ink);margin-bottom:11px}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;
  border-radius:var(--r-pill);background:var(--accent)}
.prose ol{margin:0 0 var(--s5);padding-left:24px}
.prose ol li{font:400 16.5px/1.72 var(--serif);color:var(--ink);margin-bottom:11px}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--risk)}
.prose > figure{margin:var(--s6) 0}
.prose > figure .ph{border-radius:var(--r-lg)}
.prose figcaption{font:400 12.5px/1.55 var(--ui);color:var(--ink-2);margin-top:10px}
.prose figcaption b{color:var(--ink)}

/* two up: narrow aside figure beside a wider one, as in the reference */
.figpair{display:grid;grid-template-columns:172px 1fr;gap:var(--s4);margin:var(--s6) 0;align-items:start}
.figpair .ph{border-radius:var(--r-md)}

.quote{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);margin:var(--s6) 0}
.quote p{font:italic 400 18px/1.66 var(--serif);color:var(--ink);margin:0}
.quote .who{display:block;text-align:right;font:600 14px/1 var(--ui);color:var(--ink-2);
  font-style:normal;margin-top:var(--s4)}

/* key takeaways */
.takeaway{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s5) var(--s6);margin:var(--s6) 0;box-shadow:var(--sh-card)}
.takeaway h3{font:600 11px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s4)}
.takeaway ul{margin:0;padding:0;list-style:none}
.takeaway li{position:relative;padding-left:28px;font:400 15.5px/1.68 var(--ui);color:var(--ink);margin-bottom:10px}
.takeaway li:last-child{margin-bottom:0}
.takeaway li i{position:absolute;left:0;top:3px;color:var(--evid);font-size:17px}

/* author box: flat surface, portrait right, no gradient */
.authorbox{display:grid;grid-template-columns:1fr 240px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin:var(--s7) 0 0}
.authorbox .in{padding:var(--s6)}
.authorbox .nm{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--s3)}
.authorbox .nm b{font:600 24px/1.1 var(--dis);letter-spacing:-.018em;color:var(--ink)}
.authorbox .rolepill{display:inline-flex;align-items:center;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-pill);padding:6px 14px;font:italic 500 13px/1 var(--ui);color:var(--accent)}
.authorbox p{font:400 15px/1.68 var(--ui);color:var(--ink-2);margin:0 0 var(--s4);max-width:56ch}
.authorbox .dsc{font-size:13.5px}
.authorbox .flw{font:italic 600 14px/1 var(--ui);color:var(--ink);margin:0 0 var(--s3)}
.authorbox .socials a{background:var(--card);border:1px solid var(--rule);color:var(--ink-2);width:40px;height:40px}
.authorbox .socials a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.authorbox .pic{background:var(--ph-fill);min-height:100%}
.authorbox .pic img{width:100%;height:100%;object-fit:cover}

/* tags */
.tagblock{margin:var(--s7) 0 0}
.tagblock h3{font:600 20px/1.2 var(--dis);letter-spacing:-.016em;margin:0 0 var(--s4);color:var(--ink)}
.tagpills{display:flex;flex-wrap:wrap;gap:11px}
.tagpills a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-pill);
  font:500 14.5px/1 var(--ui);color:var(--ink);text-decoration:none}
.tagpills a:hover{border-color:var(--ink)}

/* share bar */
.sharebar{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);margin:var(--s6) 0}
.sharebar .lbl{font:600 15.5px/1 var(--dis);color:var(--ink)}
.sharebar .set{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sharebar .set a{width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--card);border:1px solid var(--rule);color:var(--ink);font-size:18px;text-decoration:none}
.sharebar .set a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sharebar .copy{margin-left:auto}

/* prev and next */
.pnnav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin:var(--s6) 0 0}
.pncard{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s5);text-decoration:none;display:block;box-shadow:var(--sh-card)}
.pncard:hover{border-color:var(--ink-3)}
.pncard .hd{display:flex;align-items:center;gap:11px;margin-bottom:var(--s4)}
.pncard .hd .circ{width:34px;height:34px;border-radius:var(--r-pill);background:var(--accent);
  color:var(--on-accent);display:grid;place-items:center;font-size:17px;flex:none}
.pncard .hd span{font:600 14.5px/1 var(--ui);color:var(--accent)}
.pncard .row{display:grid;grid-template-columns:76px 1fr;gap:var(--s4);align-items:start}
.pncard .ph{border-radius:12px}
.pncard .ttl{display:block;font:600 15.5px/1.36 var(--dis);color:var(--ink);margin-bottom:9px}
.pncard.next{text-align:left}
.pncard.next .hd{justify-content:flex-start}

/* references */
.refs{margin:var(--s7) 0 0;border-top:1px solid var(--rule-2);padding-top:var(--s5)}
.refs h3{font:600 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s4)}
.refs ol{margin:0;padding-left:22px}
.refs li{font:400 13.5px/1.7 var(--ui);color:var(--ink-2);margin-bottom:11px}
.refs a{color:var(--evid)}

@media(max-width:1100px){
  .article{grid-template-columns:1fr}
  .article .rail{position:static}
}
@media(max-width:760px){
  .authorbox{grid-template-columns:1fr}
  .authorbox .pic{aspect-ratio:16/9;min-height:0;order:-1}
  .pnnav{grid-template-columns:1fr}
  .figpair{grid-template-columns:1fr}
  .sharebar .copy{margin-left:0;width:100%}
  .sharebar .copy .btn{width:100%}
  .prose{max-width:none}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr{background:var(--card)}
}

/* ==========================================================================
   HEADER OVERLAY OFFSET. Must live at the end of the sheet: every first-band
   rule below uses the `padding` shorthand, which would otherwise win on
   source order and wipe this out.
   ========================================================================== */
.hero,.abouthero,.teamhero,.phero,.chero,.abody,.postwrap{padding-top:134px}
/* catch-all: any first band in main clears the fixed header even if it
   uses a class not listed above */
main > section:first-child:not(.wrap),main > div:first-child:not(.wrap){padding-top:134px}
@media(max-width:520px){
  .hero,.abouthero,.teamhero,.phero,.chero,.abody,.postwrap{padding-top:104px}
  main > section:first-child:not(.wrap),main > div:first-child:not(.wrap){padding-top:104px}
}

/* ==========================================================================
   FINAL OVERRIDES. End of sheet so nothing can win on source order.
   ========================================================================== */

/* 1 · every hero kicker, crumb, heading, deck and stamp is centred */
.phero,.teamhero,.abouthero{text-align:center}
.phero > .wrap > *,.teamhero > .wrap > *,.abouthero > .wrap > *{text-align:center}
.phero .kick,.teamhero .kick{display:block;width:100%;text-align:center;margin-left:auto;margin-right:auto}
.phero h1,.teamhero h1,.abouthero h1,
.phero p,.teamhero p,.abouthero p,
.phero .stamp,.teamhero .stamp{text-align:center;margin-left:auto;margin-right:auto}
.phero .crumb,.teamhero .crumb,.abouthero .crumb{justify-content:center;text-align:center}

/* 2 · the footer's 96px gap must be visible, so it sits on the page ground
   rather than on a body colour identical to the footer's own */
body{background:var(--paper)}
.ftr{margin-top:var(--s9)}

/* 3 · backdrop filter on the header AND its dropdown panels */
.ddmenu{
  background:color-mix(in srgb,var(--card) 78%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
}

/* 4 · every floating container gets the same glass treatment */
.searchframe,.stickybar{
  background:color-mix(in srgb,var(--card) 72%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
}
.searchinner{background:transparent}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr,.ddmenu,.searchframe,.stickybar{background:var(--card)}
}

/* ==========================================================================
   GLASS, MOBILE NAV, MOTION.  End of sheet.
   ========================================================================== */

/* 1 · BACKDROP ROOT FIX
   An element that carries backdrop-filter becomes a backdrop root, so a
   descendant's own backdrop-filter samples that ancestor instead of the page.
   That is why the dropdown never blurred. The header's glass moves to a
   pseudo-element, leaving .hdr itself unfiltered so .ddmenu can sample the
   page behind it. */
.hdr{position:relative;isolation:isolate;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:padding .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease-out}
.hdr::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:color-mix(in srgb,var(--card) 84%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%)}

.ddmenu{
  display:block;visibility:hidden;opacity:0;transform:translateY(-8px) scale(.985);
  pointer-events:none;transform-origin:top center;
  background:color-mix(in srgb,var(--card) 76%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  transition:opacity .18s ease-out,transform .18s cubic-bezier(.2,.7,.2,1),visibility .18s}
.dd > button[aria-expanded="true"] + .ddmenu{
  visibility:visible;opacity:1;transform:none;pointer-events:auto}
.dd > button i{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.dd > button[aria-expanded="true"] i{transform:rotate(180deg)}

/* 2 · HEADER COMPACTS ON SCROLL */
.hdrshell.stuck .hdr{padding-top:7px;padding-bottom:7px;
  box-shadow:0 8px 30px rgba(22,24,26,.16)}
.hdrshell.stuck .brand img{max-height:38px}
.brand img{transition:max-height .22s cubic-bezier(.2,.7,.2,1)}

/* 3 · MOBILE NAV as a real glass panel, not inline styles */
@media(max-width:900px){
  .mainnav{
    position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:30;
    display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-left:0;
    padding:var(--s3);border:1px solid var(--rule);border-radius:26px;
    background:color-mix(in srgb,var(--card) 88%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    backdrop-filter:blur(22px) saturate(160%);
    box-shadow:var(--sh-pill);
    max-height:min(74vh,560px);overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .22s ease-out,transform .22s cubic-bezier(.2,.7,.2,1),visibility .22s}
  .mainnav.open{visibility:visible;opacity:1;transform:none;pointer-events:auto}
  .mainnav > a,.dd > button{width:100%;justify-content:space-between;
    padding:14px var(--s4);border-radius:16px;font-size:15.5px}
  .dd{width:100%}
  .ddmenu{position:static;min-width:0;margin:4px 0 6px;box-shadow:none;
    background:var(--paper-2);border-color:var(--rule);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    display:none;visibility:visible;opacity:1;transform:none;pointer-events:auto}
  .dd > button[aria-expanded="true"] + .ddmenu{display:block;animation:ddIn .2s ease-out}
  .burger i{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
  .burger[aria-expanded="true"] i{transform:rotate(90deg)}
}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 4 · SCROLL REVEAL, only once JS confirms it can undo it */
html.js [data-reveal]{opacity:0;transform:translateY(20px)}
html.js [data-reveal].in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}

/* 5 · IMAGE FADE IN, same guard */
html.js img:not(.ready){opacity:0}
html.js img.ready{opacity:1;transition:opacity .5s ease-out}

/* 6 · MICRO INTERACTIONS */
.post,.mcard,.tcard,.railcard,.statcard,.info,.pncard,.rulecard,.member,.idcard,.qcard,.bigcard{
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s ease-out,box-shadow .2s ease-out}
.post:hover,.pncard:hover,.railcard:hover,.qcard:hover{transform:translateY(-3px)}
.statcard:hover{transform:translateY(-2px)}
.btn{transition:background .16s ease-out,border-color .16s ease-out,color .16s ease-out,
  transform .12s cubic-bezier(.2,.7,.2,1),box-shadow .16s ease-out}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.iconbtn,.fthumb,.socials a,.sqi{transition:transform .18s cubic-bezier(.2,.7,.2,1),
  background .16s ease-out,border-color .16s ease-out,color .16s ease-out}
.iconbtn:hover,.socials a:hover{transform:translateY(-2px)}
.fthumb:hover{transform:scale(1.04)}
.chip{transition:border-color .16s ease-out,background .16s ease-out,transform .16s ease-out}
a.chip:hover,.tagpills a:hover{transform:translateY(-2px)}
details.faq{transition:border-color .18s ease-out,box-shadow .18s ease-out}
details.faq[open]{box-shadow:0 6px 22px rgba(22,24,26,.08)}
details.faq > summary .pm{transition:background .18s ease-out,color .18s ease-out,
  border-color .18s ease-out,transform .22s cubic-bezier(.2,.7,.2,1)}
details.faq[open] > summary .pm{transform:rotate(180deg)}
.lnk,.pnav a,.ftr a,.trend a{transition:color .16s ease-out,border-color .16s ease-out}

/* 7 · REDUCED MOTION wins over all of it */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal],html.js [data-reveal].in{opacity:1;transform:none;transition:none}
  html.js img:not(.ready){opacity:1}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .post:hover,.pncard:hover,.railcard:hover,.qcard:hover,.statcard:hover,
  .btn:hover,.btn:active,.iconbtn:hover,.socials a:hover,.fthumb:hover,
  a.chip:hover,.tagpills a:hover{transform:none}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr::before,.ddmenu,.searchframe,.stickybar{background:var(--card)}
  @media(max-width:900px){.mainnav{background:var(--card)}}
}

/* sticky safety bar: one per page, labels never wrap */
.stickybar{align-items:center}
.stickybar .btn{white-space:nowrap;flex:1 1 0;min-width:0;padding-inline:var(--s3);font-size:13px}
.stickybar .btn i{flex:none}
@media(max-width:380px){.stickybar .btn{font-size:12px;gap:6px}}

/* ==========================================================================
   DEFECT FIXES from review
   ========================================================================== */

/* 1 · chips were stretching to full card width: they sit in column flex
   containers, which stretch children on the cross axis by default */
.chip,.gradetag,.rolepill{align-self:flex-start}

/* 2 · the stamp line was monospace, so a full sentence rendered as code and
   centred badly. Mono is for data, not prose. */
.chero .stamp,.phero .stamp,.teamhero .stamp{
  font:400 13.5px/1.66 var(--ui);color:var(--ink-2);
  max-width:62ch;margin-left:auto;margin-right:auto;text-align:center}

/* 3 · solid signal fills read as neon on a dark ground. On dark they become
   tinted tiles with a coloured glyph instead of a saturated block. */
:root[data-theme="dark"] .sqi.risk{background:var(--risk-bg);color:var(--risk);
  box-shadow:inset 0 0 0 1px var(--risk-line)}
:root[data-theme="dark"] .sqi.evid{background:var(--evid-bg);color:var(--evid);
  box-shadow:inset 0 0 0 1px var(--evid-line)}
:root[data-theme="dark"] .sqi.legal{background:var(--legal-bg);color:var(--legal);
  box-shadow:inset 0 0 0 1px var(--legal-line)}
:root[data-theme="dark"] .chip.risk .dot{background:var(--risk);color:#1A0710}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sqi.risk{background:var(--risk-bg);color:var(--risk);
    box-shadow:inset 0 0 0 1px var(--risk-line)}
  :root:not([data-theme="light"]) .sqi.evid{background:var(--evid-bg);color:var(--evid);
    box-shadow:inset 0 0 0 1px var(--evid-line)}
  :root:not([data-theme="light"]) .sqi.legal{background:var(--legal-bg);color:var(--legal);
    box-shadow:inset 0 0 0 1px var(--legal-line)}
}

/* 4 · the danger button was a saturated pink slab on dark. Deepen it so it
   still out-ranks everything without glowing. */
:root[data-theme="dark"] .btn-d{background:#A8264B;color:#FFFFFF;border-color:#A8264B}
:root[data-theme="dark"] .btn-d:hover{background:#8B0F35}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-d{background:#A8264B;color:#FFFFFF;border-color:#A8264B}
  :root:not([data-theme="light"]) .btn-d:hover{background:#8B0F35}
}

/* 5 · card titles carried a hover underline that read as a permanent rule.
   Keep the affordance but only on real hover, and never on touch. */
@media (hover:hover){
  .ccard:hover h3,.cfeat:hover h2,.cwide:hover h2,.catcard:hover h2{
    text-decoration:underline;text-decoration-color:currentColor;
    text-decoration-thickness:1.5px;text-underline-offset:4px}
}
.ccard h3,.cfeat h2,.cwide h2,.catcard h2{text-decoration:none}

/* 6 · logo: one raster cannot serve both grounds, so ship two cuts and swap */
.brand .lg-dark{display:none}
:root[data-theme="dark"] .brand .lg-light{display:none}
:root[data-theme="dark"] .brand .lg-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .lg-light{display:none}
  :root:not([data-theme="light"]) .brand .lg-dark{display:block}
}

/* ==========================================================================
   ROUND 2 DEFECT FIXES
   ========================================================================== */

/* A · .chero was never added to the centring overrides, so the category
   kicker, deck and stamp were not centred with the rest of the hero */
.chero{text-align:center}
.chero > .wrap > *{text-align:center}
.chero .kick,.chero h1,.chero p,.chero .stamp{
  text-align:center;margin-left:auto;margin-right:auto}
.chero .kick{display:block;width:100%}
.chero .crumb{justify-content:center;text-align:center}

/* B · no underline on card titles at all, hover included */
.ccard h3,.cfeat h2,.cwide h2,.catcard h2,
.ccard:hover h3,.cfeat:hover h2,.cwide:hover h2,.catcard:hover h2{
  text-decoration:none}
@media (hover:hover){
  .ccard:hover h3,.cfeat:hover h2,.cwide:hover h2,.catcard:hover h2{text-decoration:none}
}
/* the hover affordance is the arrow moving, not a rule under the words */
.ccard:hover,.cfeat:hover,.cwide:hover,.catcard:hover{border-color:var(--ink-3)}

/* C · the arrow glyph was invisible: `.ccard .cta span` is more specific than
   `.arw.light`, so it painted the icon white on a white circle */
.ccard .cta > span.arw{color:inherit}
.ccard .cta > span.arw.light{color:#16181A}
.ccard .cta > span.arw:not(.light){color:var(--on-accent)}

/* D · sticky bar: content was wider than the pill, so the icon spilled out */
.stickybar{gap:var(--s2)}
.stickybar .btn{overflow:hidden;min-width:0;padding-inline:var(--s3)}
.stickybar .btn:first-child{flex:2 1 0}
.stickybar .btn:last-child{flex:1 1 0}
@media(max-width:420px){
  .stickybar .btn{font-size:12.5px;gap:6px}
  .stickybar .btn i{display:none}
}

/* ==========================================================================
   25 · ARTICLE VARIANTS  (§14 comparison, §14.2 guide, §15 science, §15.2 photo)
   ========================================================================== */

/* sticky TOC rail beside a single measured column */
.artsplit{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--s6);align-items:start}
.artsplit > *{min-width:0}
/* §15: three columns at 250 / fluid / 260 with a 48px gutter */
.scisplit{display:grid;grid-template-columns:250px minmax(0,1fr) 260px;gap:var(--s7);align-items:start}
.scisplit > *{min-width:0}

/* the article body shares the law entry's prose settings */
.artbody h2{font:600 clamp(23px,2.2vw,31px)/1.19 var(--dis);letter-spacing:-.024em;
  margin:var(--s8) 0 var(--s4);color:var(--ink);scroll-margin-top:150px}
.artbody h3{font:600 19.5px/1.3 var(--dis);letter-spacing:-.014em;margin:var(--s6) 0 var(--s3);color:var(--ink)}
.artbody p{font:400 16.5px/1.76 var(--serif);color:var(--ink-2);margin:0 0 var(--s4);max-width:70ch}
.artbody p b,.artbody p strong{color:var(--ink);font-weight:600}
.artbody > ul,.artbody > ol{margin:0 0 var(--s4);padding-left:22px;max-width:70ch}
.artbody > ul li,.artbody > ol li{font:400 16px/1.74 var(--serif);color:var(--ink-2);margin-bottom:10px}
.artbody figure{margin:var(--s7) 0}
.artbody .ph{display:block}

/* ---- §14 comparison table ----------------------------------------------
   A real <table>, never an image. Above 900px it is a conventional three
   column grid; below it, the same markup reflows to one card per dimension
   with a two-row mini-table inside — driven by data-label, so there is one
   source of truth rather than a duplicated mobile block. */
table.cmp{width:100%;border-collapse:collapse;font:400 14.5px/1.6 var(--ui)}
table.cmp th{text-align:left;font:600 11px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding:var(--s4) var(--s5);border-bottom:1.5px solid var(--rule-2);
  background:var(--paper-2);vertical-align:bottom}
table.cmp th:first-child{width:17%}
table.cmp td{padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule);
  color:var(--ink-2);vertical-align:top;width:41.5%}
table.cmp td:first-child{width:17%;color:var(--ink);font-weight:600;font-family:var(--ui)}
table.cmp tr:last-child td{border-bottom:0}
table.cmp tr:hover td{background:var(--paper-2)}
/* the mad-honey column is a hazard column, so it carries a hairline spine */
table.cmp td.hz,table.cmp th.hz{box-shadow:inset 2px 0 0 var(--risk-line)}
:root[data-theme="dark"] table.cmp td.hz,:root[data-theme="dark"] table.cmp th.hz{
  box-shadow:inset 2px 0 0 var(--risk-line)}

@media(max-width:900px){
  table.cmp,table.cmp tbody,table.cmp tr,table.cmp td{display:block;width:auto}
  table.cmp thead{display:none}
  table.cmp tr{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);
    margin-bottom:var(--s4);overflow:hidden}
  table.cmp tr:hover td{background:transparent}
  table.cmp td{border-bottom:1px solid var(--rule);padding:var(--s4)}
  table.cmp td:first-child{width:auto;background:var(--paper-2);
    font:600 12px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  table.cmp td:last-child{border-bottom:0}
  table.cmp td[data-label]::before{content:attr(data-label);display:block;
    font:600 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:7px}
  table.cmp td.hz[data-label]::before{color:var(--risk)}
  table.cmp td.hz{box-shadow:none;background:var(--risk-bg)}
}

/* verdict box — the "our reading" summary */
.verdict{background:var(--panel);border-radius:var(--r-lg);padding:var(--s7);margin:var(--s6) 0}
.verdict h3{font:600 11px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-onpanel);margin:0 0 var(--s5)}
.verdict ul{list-style:none;margin:0;padding:0}
.verdict li{position:relative;padding:0 0 var(--s4) 26px;font:400 16px/1.7 var(--ui);color:var(--on-panel)}
.verdict li:last-child{padding-bottom:0}
.verdict li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;
  border-radius:var(--r-pill);background:var(--accent-onpanel)}
.verdict li b{color:#FFFFFF}
.verdict a{color:var(--accent-onpanel)}

/* "who each one is for" pair */
.forwho{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin:var(--s5) 0}
.forwho > *{min-width:0}
.forwho .card2{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:var(--s3)}
.forwho .card2.risk{background:var(--risk-bg);border-color:var(--risk-line)}
.forwho .card2 h3{font:600 21px/1.24 var(--dis);letter-spacing:-.018em;margin:0;color:var(--ink)}
.forwho .card2 .who{font:600 14.5px/1.45 var(--ui);color:var(--accent);margin:0}
.forwho .card2.risk .who{color:var(--risk)}
.forwho .card2 p{font:400 15px/1.7 var(--ui);color:var(--ink-2);margin:0;max-width:none}
.forwho .notfor{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--rule);
  font:400 14px/1.6 var(--ui);color:var(--ink-2)}
.forwho .notfor b{color:var(--ink)}

/* ---- §14.2 guide ------------------------------------------------------- */
/* numbered steps. The number is generated, so the heading text stays clean
   for the TOC and for a screen reader. */
.steplist{counter-reset:gstep}
.artbody h2.step{counter-increment:gstep;display:flex;align-items:baseline;gap:var(--s4)}
.artbody h2.step::before{content:counter(gstep);flex:none;
  font:600 15px/1 var(--mono);color:var(--risk);
  background:var(--risk-bg);border:1px solid var(--risk-line);border-radius:var(--r-pill);
  width:42px;height:42px;display:grid;place-items:center;align-self:center}

/* the checklist is a real form; ticks persist in localStorage only */
.checklist{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh-card)}
.checklist fieldset{border:0;margin:0 0 var(--s5);padding:0}
.checklist fieldset:last-of-type{margin-bottom:var(--s5)}
.checklist legend{font:600 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:0;margin-bottom:var(--s3)}
.checklist label{display:flex;align-items:flex-start;gap:12px;padding:11px 0;
  border-top:1px solid var(--rule);font:400 15px/1.6 var(--ui);color:var(--ink-2);cursor:pointer}
.checklist label:hover{color:var(--ink)}
.checklist input[type=checkbox]{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--accent)}
.checklist input:checked + span{color:var(--ink-3);text-decoration:line-through}
.checklist .foot{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;
  padding-top:var(--s5);border-top:1px solid var(--rule-2)}
.checklist .saved{font:400 12.5px/1.5 var(--ui);color:var(--ink-3);margin:0}

/* annotated figure key */
.figkey{width:100%;border-collapse:collapse;font:400 14.5px/1.65 var(--ui);margin:var(--s4) 0 0}
.figkey th{text-align:left;font:600 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding:var(--s3) var(--s4);border-bottom:1.5px solid var(--rule-2);background:var(--paper-2)}
.figkey td{padding:var(--s4);border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
.figkey td:first-child{width:44px;text-align:center}
.figkey .keynum{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--paper);font:600 13px/1 var(--mono)}
.figkey td:nth-child(2){width:26%;color:var(--ink);font-weight:600}

/* red-flag list */
.flags{list-style:none;margin:0;padding:0}
.flags li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--risk-line);
  font:400 15px/1.68 var(--ui);color:var(--ink-2)}
.flags li:first-child{border-top:0}
/* CSS-drawn triangle rather than an icon-font codepoint: the marker must not
   depend on a webfont having loaded, and a guessed glyph renders as junk. */
.flags li::before{content:"";position:absolute;left:2px;top:19px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--risk)}
.flags li b{color:var(--ink)}

/* ---- §15 science / evidence -------------------------------------------- */
/* the evidence banner: one grade per claim, stated as a table on desktop and
   a stacked list on a phone */
.evbanner{background:var(--evid-bg);border:1px solid var(--evid-line);border-radius:var(--r-lg);
  padding:var(--s6);margin:0 0 var(--s6)}
.evbanner h2{font:600 11px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--evid);margin:0 0 var(--s5)}
.evrow{display:grid;grid-template-columns:1fr 168px;gap:var(--s4);align-items:center;
  padding:var(--s4) 0;border-top:1px solid var(--evid-line)}
.evrow:first-of-type{border-top:0;padding-top:0}
.evrow p{font:400 15px/1.65 var(--ui);color:var(--ink-2);margin:0;max-width:none}
.evrow p b{color:var(--ink)}
.grade{display:inline-flex;align-items:flex-start;gap:7px;font:500 12.5px/1.35 var(--ui);
  padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--rule);background:var(--card);color:var(--ink-2);white-space:normal}
.grade::before{content:"";width:9px;height:9px;border-radius:var(--r-pill);background:currentColor;flex:none}
.grade.strong{background:var(--evid-bg);color:var(--evid);border-color:var(--evid-line)}
.grade.moderate{background:var(--legal-bg);color:var(--legal);border-color:var(--legal-line)}
.grade.weak{background:var(--paper-2);color:var(--ink-2);border-color:var(--rule-2)}
.grade.none{background:var(--risk-bg);color:var(--risk);border-color:var(--risk-line)}

/* studies table stays a real table inside a visible horizontal scroller */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroller table{min-width:720px}
.scrollhint{font:400 12.5px/1.5 var(--ui);color:var(--ink-3);margin:var(--s3) 0 0}
@media(min-width:901px){.scrollhint{display:none}}

/* ---- §15.2 photo essay ------------------------------------------------- */
/* text sits in a 720px measure while frames break edge to edge */
.essay{max-width:720px;margin:0 auto}
.essay p{font:400 17.5px/1.82 var(--serif);color:var(--ink-2);margin:0 0 var(--s5)}
.essay p.open::first-letter{float:left;font:600 62px/.82 var(--dis);margin:6px 10px 0 0;color:var(--risk)}
.essay h2{font:600 clamp(23px,2.2vw,30px)/1.2 var(--dis);letter-spacing:-.022em;
  margin:var(--s8) 0 var(--s4);color:var(--ink);scroll-margin-top:150px}
.frame-wide{margin:var(--s8) 0}
.frame-wide .ph{display:block;border-radius:var(--r-lg)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s8) 0}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:var(--s8) 0}
.pair > *,.trio > *{min-width:0}
.pair .ph,.trio .ph{display:block;border-radius:var(--r-md)}
.pullquote{font:400 clamp(21px,2.2vw,29px)/1.42 var(--dis);letter-spacing:-.018em;
  color:var(--ink);margin:var(--s8) auto;max-width:24ch;text-align:center}
.pullquote cite{display:block;font:500 13.5px/1.5 var(--ui);color:var(--ink-3);
  margin-top:var(--s4);font-style:normal;letter-spacing:0}

/* ---- responsive -------------------------------------------------------- */
@media(max-width:1180px){
  .scisplit{grid-template-columns:250px minmax(0,1fr)}
  .scisplit > .scirail{grid-column:1 / -1}
  .scisplit > .scirail .rail{position:static;flex-direction:row;flex-wrap:wrap}
  .scisplit > .scirail .rail > *{flex:1 1 300px}
}
@media(max-width:1000px){
  .forwho{grid-template-columns:1fr}
}
@media(max-width:900px){
  .artsplit,.scisplit{grid-template-columns:1fr}
  .artsplit > .arttoc,.scisplit > .scitoc{order:-1}
  .artsplit .secttoc,.scisplit .secttoc{position:static}
  .evrow{grid-template-columns:1fr;gap:var(--s3)}
  .trio{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
}
@media(max-width:760px){
  .verdict{padding:var(--s5)}
  .checklist{padding:var(--s5)}
  .artbody h2.step::before{width:36px;height:36px;font-size:13.5px}
  .essay p{font-size:16.5px}
  .figkey td:nth-child(2){width:auto}
}

/* ---- print: the guide outputs steps and checklist only ----------------- */
@media print{
  .hdrshell,.ftr,.stickybar,.arttoc,.secttoc,.nlpanel,.crumb,
  .artbody figure,.notprint{display:none !important}
  body,main{background:#fff !important;color:#000 !important}
  .artsplit{display:block}
  .checklist{border:1px solid #999;box-shadow:none;break-inside:avoid}
  .checklist label{break-inside:avoid}
  .checklist .foot{display:none}
  .artbody h2{break-after:avoid}
  a[href]::after{content:""}
}

/* ==========================================================================
   SPECIFICITY REPAIR. End of sheet.
   .artbody h2/h3 and .lawbody h2/h3 are declared later in this sheet than
   .inshort h2 and .info h3, and at identical specificity (0,1,1), so they were
   winning inside component boxes that set their own heading scale: the "In
   short" legend rendered at 31px instead of 11px, and every .info card heading
   picked up a 32px top margin that knocked it off-centre from its icon badge.
   Restated here at higher specificity rather than reordering the sheet, because
   the sheet's order is load-bearing elsewhere.
   ========================================================================== */
.artbody .inshort h2,.lawbody .inshort h2,.essay .inshort h2{
  font:600 11px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s4)}
.artbody .info h3,.lawbody .info h3,.essay .info h3{
  font:600 21px/1.24 var(--dis);letter-spacing:-.018em;margin:0}
.artbody .evbanner h2,.essay .evbanner h2{
  font:600 11px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--evid);margin:0 0 var(--s5)}
.artbody .verdict h3,.essay .verdict h3{
  font:600 11px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-onpanel);margin:0 0 var(--s5)}
.artbody .railcard h4,.lawbody .railcard h4{margin:0 0 var(--s4)}
.artbody .steps h3{margin:0 0 var(--s3)}

/* ==========================================================================
   26 · EVIDENCE FURNITURE + PHOTO ESSAY BLEED  (§15, §15.2)
   ========================================================================== */

/* the confidence scale in the left rail */
.scale{display:flex;flex-direction:column;gap:9px;margin:var(--s4) 0 0}
.scale .row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;
  font:400 12.5px/1.45 var(--ui);color:var(--ink-2)}
.scale .row b{font:600 11px/1.25 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.scale .strong b{color:var(--evid)} .scale .moderate b{color:var(--legal)}
.scale .limited b{color:var(--ink-2)} .scale .weak b{color:var(--ink-3)}
.scale .contested b{color:var(--risk)}

/* "not established" cards — deliberately separated from the settled material */
.notest{display:flex;flex-direction:column;gap:var(--s4);margin:var(--s5) 0}
.notest .item{background:var(--paper-2);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s5)}

.notest .item.contested{background:var(--risk-bg)}
.notest .item.limited{background:var(--legal-bg)}
.notest .hdr{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s3)}
.notest h3{font:600 18px/1.3 var(--dis);letter-spacing:-.012em;margin:0;color:var(--ink)}
.notest p{font:400 15px/1.7 var(--ui);color:var(--ink-2);margin:0;max-width:none}

/* glossary — a two-column definition table */
.gloss{width:100%;border-collapse:collapse;font:400 14.5px/1.66 var(--ui);margin:var(--s4) 0 0}
.gloss th{text-align:left;font:600 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding:var(--s3) var(--s4);border-bottom:1.5px solid var(--rule-2);background:var(--paper-2)}
.gloss td{padding:var(--s4);border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
.gloss td:first-child{width:27%;color:var(--ink);font-weight:600}
.gloss tr:target td{background:var(--evid-bg)}
/* glossary terms in the body: dotted underline, anchor-jump only, no tooltip */
.term{color:inherit;text-decoration:none;border-bottom:1.5px dotted var(--evid);cursor:help}
.term:hover{border-bottom-style:solid}

/* dated correction and update log */
.updlog{list-style:none;margin:var(--s4) 0 0;padding:0}
.updlog li{padding:var(--s4) 0;border-top:1px solid var(--rule);
  font:400 14.5px/1.7 var(--ui);color:var(--ink-2)}
.updlog li b{display:block;font:600 12.5px/1 var(--mono);color:var(--ink);margin-bottom:6px}

/* ---- §15.2 photo essay -------------------------------------------------
   Full-bleed frames sit OUTSIDE .wrap in the markup rather than being pulled
   out with 100vw tricks, which would add a horizontal scrollbar. Captions are
   re-constrained to the 720px measure so they stay readable. */
.bleedfig{margin:var(--s8) 0}
.bleedfig > .ph{display:block;border-radius:0}
.bleedfig figcaption{max-width:720px;margin:0 auto;padding:var(--s3) var(--s5) 0}
.essayhead{max-width:720px;margin:0 auto}
.framecap{font:400 12.5px/1.6 var(--ui);color:var(--ink-2);padding-top:9px;margin:9px 0 0;
  border-top:1px solid var(--rule)}
.framecap b{color:var(--ink)}
.framenum{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink-3);
  text-transform:uppercase;display:block;margin-bottom:5px}
blockquote.pq{margin:var(--s8) auto;max-width:26ch;text-align:center;
  font:400 clamp(21px,2.3vw,30px)/1.4 var(--dis);letter-spacing:-.018em;color:var(--ink)}
blockquote.pq cite{display:block;font:500 13.5px/1.5 var(--ui);color:var(--ink-3);
  margin-top:var(--s4);font-style:normal;letter-spacing:0}
/* the credits and consent box is required on every photo essay, never collapsible */
.credits{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);margin:var(--s8) 0}
.credits h2{font:600 11px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s5)}
.credits dt{font:600 14.5px/1.4 var(--ui);color:var(--ink);margin:0 0 6px}
.credits dd{margin:0 0 var(--s5);font:400 14.5px/1.7 var(--ui);color:var(--ink-2)}
.credits dd:last-child{margin-bottom:0}

@media(max-width:760px){
  .gloss td:first-child{width:34%}
  .credits{padding:var(--s5)}
  .notest .item{padding:var(--s4)}
}

/* ==========================================================================
   27 · FORMS IN EVERY STATE  (§17)
   The built sheet only ever needed a happy-path .inp for the newsletter band.
   These are the states the contact and pitch forms can actually reach.
   ========================================================================== */

.formsplit{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--s7);align-items:start}
.formsplit > *{min-width:0}
.formcol{max-width:680px}

.fld{margin-bottom:var(--s5)}
.fld > label,.fld > .lbl{display:block;font:600 13px/1.4 var(--ui);margin-bottom:9px;color:var(--ink)}
.fld .req{color:var(--risk)}
.fld .hint{font:400 12.5px/1.55 var(--ui);color:var(--ink-3);margin:8px 0 0}
textarea.inp{border-radius:var(--r-md);min-height:150px;resize:vertical;line-height:1.6}
select.inp{border-radius:var(--r-pill);appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,var(--ink-2) 50%),
                   linear-gradient(-45deg,transparent 49%,var(--ink-2) 50%);
  background-size:6px 6px;background-repeat:no-repeat;
  background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;padding-right:44px}

/* error: never colour alone. The message says what is wrong AND what to do. */
.inp.err{border-color:var(--risk);background:var(--risk-bg)}
.inp.err:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--risk) 18%,transparent)}
.errmsg{display:flex;align-items:flex-start;gap:7px;font:500 12.5px/1.55 var(--ui);
  color:var(--risk);margin:8px 0 0}
.errmsg::before{content:"";flex:none;width:0;height:0;margin-top:4px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--risk)}
.okmsg{font:500 12.5px/1.55 var(--ui);color:var(--evid);margin:8px 0 0}
/* neutral, non-error feedback — the reader did nothing wrong */
.neutralmsg{font:400 12.5px/1.6 var(--ui);color:var(--ink-2);margin:8px 0 0}
.inp[disabled],.inp.dis{background:var(--paper-2);color:var(--disabled);cursor:not-allowed}

/* focusable error summary at the top of a failed form */
.errsummary{background:var(--risk-bg);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s5);margin:0 0 var(--s5)}
.errsummary h3{font:600 16px/1.3 var(--ui);color:var(--risk);margin:0 0 var(--s3)}
.errsummary ol{margin:0;padding-left:19px}
.errsummary li{font:400 14px/1.7 var(--ui);color:var(--ink-2);margin-bottom:4px}
.errsummary a{color:var(--risk);font-weight:600}

/* radio group: one tab stop, arrows move within, 44px touch targets */
.radios{display:flex;flex-direction:column;gap:6px;margin-top:var(--s2)}
.radios label{display:flex;align-items:center;gap:11px;min-height:46px;padding:8px 15px;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);
  font:400 14.5px/1.4 var(--ui);color:var(--ink-2);cursor:pointer}
.radios label:hover{border-color:var(--ink-3);color:var(--ink)}
.radios input{width:19px;height:19px;flex:none;margin:0;accent-color:var(--accent)}
.radios input:checked ~ span{color:var(--ink);font-weight:600}
.radios label:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.radios .tag{margin-left:auto;font:600 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.radios .tag.pri{color:var(--risk)}

/* checkbox row */
.checkrow{display:flex;align-items:flex-start;gap:11px;margin:var(--s5) 0 0;
  font:400 14.5px/1.65 var(--ui);color:var(--ink-2);cursor:pointer}
.checkrow input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--accent)}

/* live character counter — polite, announced at 90% and at the ceiling only */
.countrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-top:8px}
.counter{font:400 12.5px/1.5 var(--mono);color:var(--ink-3)}
.counter.warn{color:var(--legal);font-weight:600}
.counter.at{color:var(--risk);font-weight:600}

/* submit row. Button width is locked while in flight so nothing reflows. */
.submitrow{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6)}
.btn .ld{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.btn[aria-busy="true"]{pointer-events:none}
.btn-s[disabled]{background:transparent;border-color:var(--rule);color:var(--disabled)}

/* file field */
.filefield{border:1px dashed var(--rule-2);border-radius:var(--r-md);padding:var(--s4);
  background:var(--paper-2)}
.filefield input[type=file]{font:400 13.5px var(--ui);color:var(--ink-2);width:100%}
.filechosen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:400 13.5px/1.5 var(--ui);color:var(--ink)}
.filechosen b{font-family:var(--mono);font-size:12.5px}
.filechosen .rm{background:none;border:0;cursor:pointer;color:var(--risk);
  font:600 12.5px/1 var(--ui);text-decoration:underline;padding:6px}

/* the panel that replaces the form on success */
.successpanel{background:var(--evid-bg);border:1px solid var(--evid-line);border-radius:var(--r-lg);
  padding:var(--s7)}
.successpanel .tick{width:52px;height:52px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--evid);color:var(--on-solid);font-size:26px;margin-bottom:var(--s5)}
.successpanel h2{font:600 clamp(22px,2vw,28px)/1.24 var(--dis);letter-spacing:-.02em;
  margin:0 0 var(--s4);color:var(--ink)}
.successpanel p{font:400 15.5px/1.72 var(--ui);color:var(--ink-2);margin:0 0 var(--s4);max-width:62ch}
.refbox{background:var(--card);border:1px solid var(--evid-line);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);margin:var(--s5) 0}
.refbox dt{font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.refbox dd{margin:0;font:600 18px/1.3 var(--mono);color:var(--ink);user-select:all}
.refbox .sub{display:block;font:400 12.5px/1.6 var(--ui);color:var(--ink-2);margin-top:8px}

/* ---- the state board. A specification page, not a reader-facing route. ---- */
.boardnote{background:var(--legal-bg);border:1px solid var(--legal-line);border-radius:var(--r-md);
  padding:var(--s5);margin:0 0 var(--s7);font:400 14.5px/1.7 var(--ui);color:var(--ink-2)}
.boardnote b{color:var(--ink)}
.stateboard{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.stateboard > *{min-width:0}
.stateboard .wide{grid-column:1 / -1}
.statecard{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-card)}
.statecard > .sh{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4) var(--s5);background:var(--paper-2);border-bottom:1px solid var(--rule)}
.statecard > .sh .n{font:600 12px/1 var(--mono);color:var(--ink-3)}
.statecard > .sh h3{font:600 16px/1.3 var(--dis);margin:0;color:var(--ink)}
.statecard > .sh .badge{margin-left:auto;font:500 11.5px/1.35 var(--ui);
  color:var(--ink-2);background:var(--card);
  border:1px solid var(--rule-2);border-radius:var(--r-pill);padding:5px 11px;white-space:normal;text-align:left}
/* NOT .body — that class is the site's serif prose utility with max-width:68ch,
   which silently clamped every full-width state card to 624px. */
.statecard > .sbody{padding:var(--s5)}
.statecard > .caption{padding:var(--s4) var(--s5);border-top:1px solid var(--rule);
  background:var(--paper-2);font:400 12.5px/1.6 var(--ui);color:var(--ink-2)}
.statecard > .caption b{color:var(--ink)}

/* response-time and desk lists in the rail */
.deskrow{display:grid;grid-template-columns:1fr auto;gap:var(--s3);padding:11px 0;
  border-top:1px solid var(--rule);font:400 14px/1.5 var(--ui);color:var(--ink-2)}
.deskrow:first-of-type{border-top:0}
.deskrow b{color:var(--ink);font-weight:600}
.deskrow .v{font:600 13px/1.5 var(--mono);color:var(--ink);white-space:nowrap}
.person{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);padding:var(--s4) 0;
  border-top:1px solid var(--rule);align-items:start}
.person:first-of-type{border-top:0;padding-top:0}
.person .av{width:46px;height:46px;border-radius:var(--r-pill);overflow:hidden;flex:none;background:var(--ph-fill)}
.person .av img{width:100%;height:100%;object-fit:cover}
.person .nm{font:600 15px/1.3 var(--dis);color:var(--ink);margin:0 0 3px}
.person .ro{font:600 10.5px/1 var(--ui);letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);margin:0 0 6px}
.person p{font:400 13.5px/1.6 var(--ui);color:var(--ink-2);margin:0}

@media(max-width:980px){
  .formsplit{grid-template-columns:1fr}
  .formcol{max-width:none}
}
@media(max-width:900px){
  .stateboard{grid-template-columns:1fr}
}
@media(max-width:600px){
  .radios label{min-height:48px}
  .successpanel{padding:var(--s5)}
}

/* ==========================================================================
   28 · ARTICLE STATUS BANNERS, SKELETONS, CONSENT  (§18)
   Every banner here is server-rendered from front-matter, never script
   injected, and sits above the article body inside the same content column so
   it prints and is read before the prose.
   ========================================================================== */
.statusban{
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s5) var(--s6);margin:0 0 var(--s6);
  background:var(--card)}
.statusban .top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.statusban .lab{font:600 11px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase}
.statusban .when{font:400 12.5px/1 var(--mono);color:var(--ink-3)}
.statusban h3{font:600 17px/1.34 var(--dis);margin:0 0 var(--s3);color:var(--ink)}
.statusban p{font:400 15px/1.72 var(--ui);color:var(--ink-2);margin:0 0 var(--s3);max-width:80ch}
.statusban p:last-child{margin-bottom:0}
.statusban p b{color:var(--ink)}
.statusban .foot{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule);
  font:400 12.5px/1.7 var(--ui);color:var(--ink-2)}
.statusban ul{margin:0 0 var(--s3);padding-left:20px}
.statusban li{font:400 14.5px/1.7 var(--ui);color:var(--ink-2);margin-bottom:6px}
/* three flavours */
.statusban.review{background:var(--legal-bg)}
.statusban.review .lab{color:var(--legal)}
.statusban.stale{background:var(--legal-bg)}
.statusban.stale .lab{color:var(--legal)}
.statusban.corr{background:var(--risk-bg)}
.statusban.corr .lab{color:var(--risk)}
.statusban.noscript{background:var(--evid-bg)}
.statusban.noscript .lab{color:var(--evid)}
/* a stale last-checked date turns red in the same pass */
.stampstale{color:var(--risk);font-weight:600}
/* a TOC entry whose section is mid-rewrite */
.secttoc a .rw,.faclist .rw{font:600 9.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--risk);margin-left:7px}

/* ---- skeletons. CSS only, aria-hidden, no spinners, zero layout shift. ---- */
.skel{position:relative;overflow:hidden;background:var(--paper-2);border-radius:var(--r-md);
  display:block}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 70%,transparent),transparent);
  animation:shim 1.4s ease-in-out infinite}
@keyframes shim{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skel.r219{aspect-ratio:21/9} .skel.r16{aspect-ratio:16/9} .skel.r43{aspect-ratio:4/3}
.skel.line{height:1.05em;border-radius:5px;margin-bottom:11px}
.skel.line.w90{width:90%} .skel.line.w75{width:75%} .skel.line.w60{width:60%}
.skelcap{font:400 12.5px/1.6 var(--ui);color:var(--ink-3);padding-top:9px;margin:9px 0 0;
  border-top:1px solid var(--rule)}
@media(prefers-reduced-motion:reduce){.skel::after{animation:none}}

/* ---- consent banner. Inline in the content flow, never a modal. ---- */
.consent{background:var(--card);border:1px solid var(--rule-2);border-radius:var(--r-lg);
  padding:var(--s6);margin:var(--s7) 0;box-shadow:var(--sh-card)}
.consent h3{font:600 19px/1.3 var(--dis);margin:0 0 var(--s3);color:var(--ink)}
.consent p{font:400 15px/1.72 var(--ui);color:var(--ink-2);margin:0 0 var(--s4);max-width:76ch}
.consent .row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.consent .stored{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
  font:400 12.5px/1.7 var(--mono);color:var(--ink-2)}

/* ---- offline: the cached-articles list ---- */
.cached{display:flex;flex-direction:column;gap:var(--s3)}
.cachedrow{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding:var(--s4);border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--card);text-decoration:none;color:inherit}
.cachedrow:hover{border-color:var(--ink-3)}
.cachedrow .nm{font:600 15.5px/1.35 var(--dis);color:var(--ink);margin:0 0 5px;display:block}
.cachedrow .sv{font:400 12.5px/1.5 var(--mono);color:var(--ink-3)}
.offdis{background:var(--paper-2);border:1px dashed var(--rule-2);border-radius:var(--r-md);
  padding:var(--s5);font:400 14.5px/1.7 var(--ui);color:var(--ink-3)}

@media(max-width:760px){
  .statusban{padding:var(--s4) var(--s5)}
  .consent{padding:var(--s5)}
}

/* ==========================================================================
   29 · STANDARDS BOARDS  (§19 navigation, §20 components, §21 pictures)
   ========================================================================== */

/* A frame that renders the REAL header component in place. .hdrshell is
   position:fixed in production, so it is unpinned here — the board has to show
   the component, not overlay the board with it. */
.navframe{border:1px solid var(--rule-2);border-radius:var(--r-md);overflow:hidden;
  background:var(--paper);position:relative}
.navframe .urlbar{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--paper-2);
  border-bottom:1px solid var(--rule);font:400 11.5px/1.5 var(--mono);color:var(--ink-3)}
.navframe .urlbar i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);display:block;flex:none}
.navframe .stage{padding:var(--s4) var(--s4) var(--s6)}
.navframe .hdrshell{position:static;padding:0;pointer-events:auto}
.navframe .hdr{box-shadow:var(--sh-pill)}
.navframe.m{max-width:412px;margin:0 auto}
.navframe .ghost{padding:var(--s5) var(--s4) 0;font:400 13.5px/1.7 var(--serif);color:var(--ink-3)}
/* the mega-menu and drawer panels have to be visible on the board */
.navframe .ddmenu.show{visibility:visible;opacity:1;transform:none;pointer-events:auto;
  position:static;margin-top:var(--s3);min-width:0;box-shadow:none;background:var(--card);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.navframe .mainnav.show{display:flex}
.mega{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5) var(--s6);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s6);margin-top:var(--s3);box-shadow:var(--sh-pill)}
.mega > div{min-width:0}
.mega h5{font:600 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s3)}
.mega a{display:block;font:400 13.5px/1.5 var(--ui);color:var(--ink-2);text-decoration:none;padding:5px 0}
.mega a:first-of-type{font-weight:600;color:var(--ink)}
.mega a:hover{color:var(--accent)}
/* mobile drawer levels */
.drawer{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--rule);font:600 15px/1 var(--dis);color:var(--ink)}
.drawer .dr{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:15px var(--s4);border-bottom:1px solid var(--rule);
  font:500 15px/1.3 var(--ui);color:var(--ink);min-height:52px;text-decoration:none}
.drawer .dr:last-child{border-bottom:0}
.drawer .dr:hover{background:var(--paper-2)}
.drawer .dr i{color:var(--ink-3)}
.drawer .note{padding:var(--s4);background:var(--legal-bg);border-bottom:1px solid var(--legal-line);
  font:400 12.5px/1.6 var(--ui);color:var(--ink-2)}

/* ---- §20 component inventory ---- */
.spec{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.spec > .sh{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4) var(--s5);background:var(--paper-2);border-bottom:1px solid var(--rule)}
.spec > .sh h3{font:600 15.5px/1.3 var(--dis);margin:0;color:var(--ink)}
.spec > .sh code{font:400 12px/1.4 var(--mono);color:var(--accent);background:var(--card);
  border:1px solid var(--rule);border-radius:4px;padding:3px 7px}
.spec > .demo{padding:var(--s5);display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.spec > .demo.col{flex-direction:column;align-items:stretch}
.spec > .rules{padding:var(--s4) var(--s5);border-top:1px solid var(--rule);
  font:400 13px/1.7 var(--ui);color:var(--ink-2)}
.spec > .rules b{color:var(--ink)}
.spec > .rules code{font:400 12px/1.4 var(--mono);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:4px;padding:1px 5px;color:var(--ink)}
.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.specgrid > *{min-width:0}
.specgrid .wide{grid-column:1 / -1}

/* ---- §21 DO / DO-NOT comparison. A plain CSS grid, never a slider. ---- */
.dorow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin:var(--s5) 0}
.dorow > *{min-width:0}
.docard{border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.docard .tag{display:flex;align-items:center;gap:8px;padding:10px var(--s4);
  font:600 10.5px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase}
.docard.yes{border-color:var(--evid-line)} .docard.yes .tag{background:var(--evid-bg);color:var(--evid)}
.docard.no{border-color:var(--risk-line)} .docard.no .tag{background:var(--risk-bg);color:var(--risk)}
.docard .ph{border-radius:0;display:block}
.docard .why{padding:var(--s4);font:400 13px/1.66 var(--ui);color:var(--ink-2)}
.docard .why b{color:var(--ink)}

/* alt-text good/bad pairs */
.altpair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s4) 0}
.altpair > *{min-width:0}
.altbox{border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s4)}
.altbox.bad{border-color:var(--risk-line);background:var(--risk-bg)}
.altbox.good{border-color:var(--evid-line);background:var(--evid-bg)}
.altbox .lab{font:600 10.5px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
  display:block;margin-bottom:var(--s3)}
.altbox.bad .lab{color:var(--risk)} .altbox.good .lab{color:var(--evid)}
.altbox code{display:block;font:400 13px/1.7 var(--mono);color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:11px 13px;
  overflow-wrap:anywhere}

/* the five-line rule lists used throughout §21 */
.rulelist{list-style:none;margin:var(--s4) 0 0;padding:0;counter-reset:rl}
.rulelist li{counter-increment:rl;position:relative;padding:11px 0 11px 34px;
  border-top:1px solid var(--rule);font:400 14.5px/1.7 var(--ui);color:var(--ink-2)}
.rulelist li:first-child{border-top:0}
.rulelist li::before{content:counter(rl);position:absolute;left:0;top:12px;
  width:23px;height:23px;border-radius:var(--r-pill);background:var(--paper-2);
  border:1px solid var(--rule);display:grid;place-items:center;
  font:600 11px/1 var(--mono);color:var(--ink-2)}
.rulelist li b{color:var(--ink)}

@media(max-width:1000px){
  .mega{grid-template-columns:1fr 1fr}
  .specgrid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .dorow{grid-template-columns:1fr}
  .altpair{grid-template-columns:1fr}
}
@media(max-width:700px){
  .mega{grid-template-columns:1fr}
}

/* ==========================================================================
   30 · CORRECTIONS AGAINST THE REFERENCE TEMPLATE
   Measured from the Nexa Press demo, which the site's design system derives
   from. Three defects are fixed here, all of them mine:

   1 · ACCENT STRIPES. The reference uses zero left/top accent stripes across
       the entire template, and section 12 of this very sheet says the info card
       "replaces the tinted-box-with-a-left-stripe pattern ... no stripe".
       I added four anyway. They are removed and rebuilt as real cards.
   2 · PARAGRAPH MEASURE. Reference paragraphs carry max-width:none. My 86ch
       clamp on a full-width card left an arbitrary gap down the right side.
       The clamp is gone; the CARD is now sized so the line length is right by
       construction instead.
   3 · PILLS. Reference tags are 12px/400, 4px 10px, radius 50px, no uppercase,
       no tracking, and white-space:normal so they WRAP. Mine were 600 weight,
       uppercase, tracked and nowrap, which overflowed on long labels.
   ========================================================================== */

/* ---- 1 · no stripes. Tinted card + icon badge + coloured heading. ---- */
.inshort,.notest .item,.errsummary,.statusban{border:0;border-radius:var(--r-lg);box-shadow:var(--sh-card)}
.inshort{background:var(--paper-2);padding:var(--s6)}
.notest .item{background:var(--paper-2);padding:var(--s6)}
.notest .item.weak{background:var(--paper-2)}
.notest .item.contested{background:var(--risk-bg)}
.notest .item.limited{background:var(--legal-bg)}
.errsummary{background:var(--risk-bg);padding:var(--s6)}
.statusban{padding:var(--s6);background:var(--paper-2)}
.statusban.review,.statusban.stale{background:var(--legal-bg)}
.statusban.corr{background:var(--risk-bg)}
.statusban.noscript{background:var(--evid-bg)}
/* the status banner gains the icon badge the system uses everywhere else */
.statusban .top{gap:var(--s4);margin-bottom:var(--s4)}
.statusban .lab{display:inline-flex;align-items:center;gap:9px;
  font:600 12.5px/1.3 var(--ui);letter-spacing:0;text-transform:none}
.statusban .lab::before{content:"";width:26px;height:26px;border-radius:9px;flex:none;
  background:currentColor;opacity:.16}
.statusban .when{font:400 12.5px/1.3 var(--ui);color:var(--ink-3)}
.statusban .foot{border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}

/* ---- 2 · measure. Nothing carries a mystery right-hand gap. ---- */
.info p,.statusban p,.notest p,.consent p,.successpanel p,
.lawbody p,.artbody p,.essay p,.credits dd{max-width:none}
/* instead, cap the CARD when it sits directly in a page container, so the line
   length is governed by the box rather than by an invisible clamp inside it */
.wrap > .info,.errwrap > .info,.wrap > .statusban,.errwrap > .statusban{margin-inline:auto}
.wrap > .info,.errwrap > .info,.wrap > .statusban,.errwrap > .statusban,
.wrap > .consent,.errwrap > .consent{max-width:1040px;margin-inline:auto}
.formcol > .info{max-width:none}
/* prose columns keep a real measure, set on the column not the paragraph */
.lawbody,.artbody{max-width:74ch}
.artsplit .artbody,.scisplit .artbody,.threecol .lawbody{max-width:none}

/* ---- 3 · pills wrap, and lose the caps-plus-tracking that broke them ---- */
.st,.grade,.statecard .badge,.spec > .sh code{
  white-space:normal;text-transform:none;letter-spacing:0;
  font-weight:500;border-radius:var(--r-pill);text-align:left}
.st{font-size:12.5px;padding:5px 12px;line-height:1.35;gap:7px}
.st::before{width:8px;height:8px;margin-top:.35em;align-self:flex-start}
.st.lg{font-size:14px;padding:8px 16px}
.grade{font-size:12.5px;padding:5px 12px;line-height:1.35}
.statecard .badge{font-size:11.5px;padding:5px 11px;line-height:1.35}
.docard .tag,.altbox .lab,.framenum{letter-spacing:.06em}
/* a status pill inside a narrow card top must be allowed to sit on two lines */
.ccard .top .st,.ccard .top .grade{align-self:flex-start;max-width:100%}

/* ---- one paragraph scale, replacing the inline font overrides ---- */
.cardp{font:400 15px/1.6 var(--ui);color:var(--ink-2);margin:0}
.notecopy{font:400 14px/1.65 var(--ui)}

/* ---- softer, more generous cards, matching the reference's 18–36px radius
        and borderless tinted surfaces ---- */
.statecard,.spec,.credits,.consent,.successpanel,.checklist,.refbox,
.docard,.altbox,.offdis,.cachedrow,.filefield{
  border-radius:var(--r-lg)}
.statecard,.spec{border-color:transparent;background:var(--paper-2);box-shadow:none}
.statecard > .sh,.spec > .sh{background:transparent;border-bottom:0;padding:var(--s5) var(--s6) 0}
.statecard > .sbody,.spec > .sbody,.spec > .demo{padding:var(--s5) var(--s6)}
.statecard > .caption,.spec > .rules{
  background:transparent;border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  margin:0 var(--s6);padding:var(--s4) 0 var(--s5)}
.docard,.altbox{border:0;background:var(--paper-2)}
.docard.yes{background:var(--evid-bg)} .docard.no{background:var(--risk-bg)}
.altbox.good{background:var(--evid-bg)} .altbox.bad{background:var(--risk-bg)}
.docard .ph{border-radius:var(--r-md);margin:0 var(--s4)}
.docard .tag{padding:var(--s4) var(--s4) var(--s3)}
.docard .why{padding:var(--s4)}
.consent,.credits{border:0;background:var(--paper-2);box-shadow:none}
.successpanel{border:0}
.checklist{border:0;background:var(--paper-2);box-shadow:none}
.cachedrow,.offdis,.filefield{border:0;background:var(--paper-2)}
.navframe{border:0;border-radius:var(--r-lg);background:var(--paper-2)}
.navframe .urlbar{background:transparent;border-bottom:0;padding:var(--s4) var(--s5) 0}
.drawer{border:0;border-radius:var(--r-md);background:var(--card)}

/* ---- spacing rhythm. One vertical step between stacked blocks. ---- */
.stateboard,.specgrid{gap:var(--s5)}
.statusban{margin-bottom:var(--s6)}
.notest{gap:var(--s4)}
.dorow{gap:var(--s4)}
.rulelist li{padding-block:12px}
.sources li{padding-block:var(--s4)}

/* ---- line-height, following the reference's 1.4 on headings / 1.5+ on body -- */
.statecard > .sh h3,.spec > .sh h3{line-height:1.35}
.statusban h3{line-height:1.35}
.errsummary h3{line-height:1.35}

@media(max-width:760px){
  .inshort,.notest .item,.errsummary,.statusban,.consent,.credits,
  .checklist,.successpanel{padding:var(--s5)}
  .statecard > .sh,.spec > .sh{padding:var(--s4) var(--s5) 0}
  .statecard > .sbody,.spec > .sbody,.spec > .demo{padding:var(--s4) var(--s5)}
  .statecard > .caption,.spec > .rules{margin-inline:var(--s5)}
}

/* the two runs that were previously inline everywhere */
.authname{font:600 19px/1.3 var(--dis);letter-spacing:-.012em;color:var(--ink);margin:0 0 5px}
.readmore-lbl{font:600 15px/1.4 var(--ui);color:var(--ink)}

/* ---- final consistency pass ----
   1 · the badge rule in section 27 is `.statecard > .sh .badge` (0,3,0), which
       out-specifies the wrap fix in section 30 (0,2,0). Restated at matching
       specificity so long labels wrap instead of running to a single long line.
   2 · card paragraphs were still landing on four different sizes (15, 15.5,
       14.5, 12.5). They are one scale now. .notecopy stays smaller on purpose,
       because it is small print, not body copy. */
.statecard > .sh .badge,.spec > .sh .badge{white-space:normal;text-align:left;
  text-transform:none;letter-spacing:0;font-weight:500;line-height:1.35}
.info p,.statusban p,.notest p,.cardp,.consent p,.successpanel p,
.forwho .card2 p,.docard .why,.statecard > .caption,.spec > .rules{
  font:400 15.5px/1.72 var(--ui);color:var(--ink-2)}
.statecard > .caption,.spec > .rules{font-size:13.5px;line-height:1.7}
.docard .why{font-size:14px;line-height:1.66}

.urlcell{font:400 13px/1.6 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}

.statusline{font:600 15px/1.45 var(--ui);color:var(--ink);margin:0}
.statusline.evid{color:var(--evid)} .statusline.risk{color:var(--risk)}
.statusline.legal{color:var(--legal)}

/* ==========================================================================
   31 · ONE LAYOUT SYSTEM
   Sections 23–30 accumulated nine competing measure systems (820 / 720 / 680 /
   74ch / 68ch plus twenty-five inline max-widths) and no vertical rhythm, so
   blocks sat at different widths on the same page and the gaps between them
   varied from 12px to 96px arbitrarily. This replaces all of it.

   THREE WIDTHS, no others:
     --m-text   reading column, one measure for every prose surface
     --m-block  a standalone card or callout sitting on the page ground
     container  grids, boards and tables, which use the full gutter width
   ONE RHYTHM: .flow puts the same gap between every sibling block. Individual
   blocks no longer carry their own margins, which is what made the spacing
   inconsistent in the first place.
   ========================================================================== */
:root{ --m-text:68ch; --m-block:1040px; --gap-block:var(--s7); --gap-tight:var(--s5); }

/* ---- rhythm ---- */
.flow > * + *{margin-top:var(--gap-block)}
.flow.tight > * + *{margin-top:var(--gap-tight)}
/* a section head belongs to the block under it, so it sits closer to it */
.flow > .sechead + *{margin-top:var(--s5)}
.flow > * + .sechead{margin-top:var(--s9)}
/* first and last child never fight the container padding */
.flow > :first-child{margin-top:0}

/* ---- widths ---- */
.measure{max-width:var(--m-text)}
.block{max-width:var(--m-block);margin-inline:auto}
/* every one-column page surface resolves to the same two widths */
.errwrap{max-width:var(--m-block)}
.essay,.essayhead{max-width:var(--m-text)}
.formcol{max-width:var(--m-text)}
.lawbody,.artbody{max-width:var(--m-text)}
/* inside a rail layout the body column is already constrained by the grid */
.artsplit .artbody,.scisplit .artbody,.threecol .lawbody,
.artsplit .measure,.scisplit .measure{max-width:none}
/* standalone callouts share one width with each other and with the prose */
.wrap > .info,.wrap > .statusban,.wrap > .consent,
.errwrap > .info,.errwrap > .statusban,.errwrap > .consent{
  max-width:var(--m-block);margin-inline:auto}
/* but inside a column or grid they fill it */
.formcol > .info,.artbody > .info,.lawbody > .info,.essay > .info,
.cardgrid > .info,.cgrid > .info,.rail > .info,.sbody > .info,.notest > *{
  max-width:none;margin-inline:0}

/* ---- grids all share one gutter ---- */
.cgrid,.cardgrid,.catindex,.stateboard,.specgrid,.dorow,.trio,.pair,
.altpair,.startgrid,.forwho{gap:var(--s5)}
.trio,.pair{gap:var(--s4)}

/* ---- the nav-demo frame was clipping its own content at narrow widths ----
   The header pill inside it has a real minimum width, so the frame scrolls its
   stage rather than cutting 45px off the right-hand side. */
.navframe{overflow:hidden}
.navframe .stage{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:var(--s5)}
.navframe .stage > *{min-width:0}
@media(max-width:900px){
  .navframe:not(.m) .stage > .hdrshell,
  .navframe:not(.m) .stage > .mega{min-width:660px}
  .navframe:not(.m) .stage::after{content:"scroll to see the full bar";
    display:block;font:400 11.5px/1.5 var(--ui);color:var(--ink-3);margin-top:var(--s3)}
}

.majorbreak{margin-top:var(--s9) !important}

/* ---- the last of the inline layout, now classes ---- */
:root{ --m-head:24ch }
.chero h1,.errhero h1{max-width:var(--m-head);margin-inline:auto}
h1.flush,.h-mega.flush{text-align:left;margin-left:0;margin-inline:0;max-width:var(--m-head)}
.authorbox{display:flex;gap:var(--s5);align-items:flex-start;
  background:var(--paper-2);border-radius:var(--r-lg);padding:var(--s6)}
.metarow.mid{justify-content:center}
.meta.mid{display:flex;justify-content:center;white-space:normal}
.framecap.bleedcap{max-width:var(--m-text);margin-inline:auto;padding-inline:var(--s5)}
@media(max-width:760px){ .authorbox{flex-direction:column;gap:var(--s4);padding:var(--s5)} }

/* search results carry a thumbnail, matching the archive rows */
.result{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s5);align-items:start}
.result .rthumb{display:block;overflow:hidden;border-radius:var(--r-md);background:var(--ph-fill);aspect-ratio:4/3}
.result .rthumb img{width:100%;height:100%;object-fit:cover}
.result .rbody{min-width:0}
@media(max-width:640px){
  .result{grid-template-columns:88px minmax(0,1fr);gap:var(--s4)}
}

/* ==========================================================================
   32 · ONE EDGE
   The 1040px cap on standalone blocks put them on a different vertical line
   from the hero and from the grids, which is the misalignment. Everything in a
   content column now shares the container's edge.

   That leaves the line-length problem the 1040 cap was badly solving. A
   full-width callout gets a real two-column structure instead: the icon and
   heading take a fixed left column, the prose takes the rest. The measure is
   then a consequence of the layout rather than an arbitrary clamp, and there is
   no unexplained gap down the right-hand side.
   ========================================================================== */
:root{ --m-block:none }
.block,.errwrap,
.wrap > .info,.wrap > .statusban,.wrap > .consent,
.errwrap > .info,.errwrap > .statusban,.errwrap > .consent{
  max-width:none;margin-inline:0}

/* a callout sitting directly in a content column becomes two columns */
.wrap.flow > .info,.errwrap > .info{
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s5) var(--s7);
  align-items:start}
.wrap.flow > .info > .hd,.errwrap > .info > .hd{
  grid-column:1;grid-row:1 / span 20;margin-bottom:0;
  flex-direction:column;align-items:flex-start;gap:var(--s4)}
.wrap.flow > .info > .hd h3,.errwrap > .info > .hd h3{font-size:22px;line-height:1.28}
.wrap.flow > .info > :not(.hd),.errwrap > .info > :not(.hd){grid-column:2}
/* every wide callout treats its left column the same way: icon, then heading
   beneath it. The alarm card had kept them side by side, which wrapped its
   longer heading onto three cramped lines in a 300px column. */
.wrap.flow > .info > .hd .sqi,.errwrap > .info > .hd .sqi{margin-bottom:var(--s2)}

/* below the two-column threshold it stacks back to one */
@media(max-width:900px){
  .wrap.flow > .info,.errwrap > .info{grid-template-columns:1fr;gap:var(--s4)}
  .wrap.flow > .info > .hd,.errwrap > .info > .hd{
    grid-row:auto;grid-column:1;flex-direction:row;align-items:center;margin-bottom:var(--s2)}
  .wrap.flow > .info > :not(.hd),.errwrap > .info > :not(.hd){grid-column:1}
}