/* inside your peptides — v5 · the lab-report register
   thepeptidecatalog.com's information architecture on NL-BRAND-01's register:
   Helvetica Neue · bold caps display with a trailing stop · monochrome · hairlines
   square stamps · the slashed zero · // kickers // · 11px body
   every class name from v4 survives — interior pages depend on them */

:root{
  /* monochrome, full stop */
  --ink:#000;
  --ink-90:#000;
  --ink-70:#000;
  --ink-50:#000;
  --ink-40:#000;
  --ink-30:#000;
  --ink-20:#bdbdbd;
  --ink-15:#e2e2e2;
  --ink-8:#e2e2e2;
  --ink-4:#f4f4f4;

  --bg:#fff;
  --card:#fff;
  --black:#0a0a0a;
  --hair:#e2e2e2;
  --wash:#fff;

  /* legacy colour names — all resolved to ink. no accent colour exists */
  --green-deep:#000; --green:#000; --green-mid:#000; --green-light:#000;
  --signal:#fff; --green-tint:#f4f4f4; --green-line:#000;
  --c-weight:#000; --c-heal:#000; --c-long:#000; --c-cog:#000;
  --c-imm:#000; --c-gh:#000; --c-skin:#000;
  --g-approved:#000; --g-strong:#000; --g-moderate:#000; --g-weak:#000;

  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:1180px;
  --r:0;
  --r-s:0;
  --shadow:none;
  --shadow-h:none;

  --paper:#fff;
  --paper-2:#f4f4f4;
  --ink-soft:#000;
  --line:#e2e2e2;
  --green-soft:#f4f4f4;
  --grad-green:#000;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:var(--sans);background:#fff;color:#000;font-size:11px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:#000;color:#fff}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* the working scale — every role, one family */
.micro{font-size:8px;letter-spacing:.06em;font-weight:600;text-transform:uppercase}
.kick{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#000;margin-bottom:8px}
.kick::before{content:"// "}
.kick::after{content:" //"}
.kick.plain::before,.kick.plain::after{content:none}

/* the slashed zero — a hairline through the 0 glyph only, never a word */
.z0{position:relative;display:inline-block}
.z0::after{content:"";position:absolute;left:-14%;right:-14%;top:51%;border-top:1px solid currentColor;transform:rotate(-34deg)}

/* the stamp — 1px box, square, micro caps. the system's only button and only badge */
.bar,.stamp{display:inline-block;border:1px solid #000;padding:6px 12px;font-size:8.5px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;color:#000;background:#fff;white-space:nowrap;line-height:1.2}
.bar.fill,.stamp.fill{background:#000;color:#fff}
.dark .bar,.dark .stamp,.band-open .bar,.band-open .stamp{border-color:#fff;color:#fff;background:transparent}

/* scroll progress — a hairline of ink */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:#000;z-index:300;transition:width .1s linear}

/* ══════════ chrome ══════════ */
.topbar{background:var(--black);color:#fff}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:30px;gap:20px}
.topbar span{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:8px 0}
.topbar span b{font-weight:600}
@media(max-width:820px){.topbar span:last-child{display:none}}
@media(max-width:600px){.topbar{display:none}}

header.site{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid #000}
header.site .wrap{display:flex;align-items:center;gap:18px;height:56px}
.wordmark{font-size:13px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;line-height:1.1}
.wordmark i{font-style:normal}

/* the search — a real input on every page */
.hsearch{display:flex;align-items:center;gap:8px;flex:0 1 320px;height:34px;padding:0 12px;border:1px solid #000;background:#fff;color:#000;font-size:11px;position:relative}
.hsearch svg{flex:none}
.hsearch input{border:0;outline:0;background:none;font-family:var(--sans);font-size:11px;color:#000;width:100%}
.hsearch input::placeholder{color:#000;opacity:1;font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.hsearch span{font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.hsearch kbd{font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:.06em;border:1px solid #000;padding:2px 5px;flex:none}
@media(max-width:980px){.hsearch{flex-basis:220px}.hsearch kbd{display:none}}
@media(max-width:720px){.hsearch{display:none}}

/* search dropdown, built by site.js */
.sdrop{position:absolute;top:calc(100% + 6px);left:-1px;right:-1px;background:#fff;border:1px solid #000;z-index:250;display:none;max-height:420px;overflow:auto}
.sdrop.open{display:block}
.sdrop a{display:flex;gap:12px;align-items:baseline;padding:10px 12px;border-bottom:1px solid var(--hair)}
.sdrop a:last-child{border-bottom:0}
.sdrop a:hover,.sdrop a.on{background:#000;color:#fff}
.sdrop .t{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:0 0 64px}
.sdrop b{font-size:11px;font-weight:700;display:block;line-height:1.3}
.sdrop small{font-size:10px;display:block;line-height:1.4;margin-top:2px}
.sdrop .all{justify-content:center;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

nav.main{display:flex;gap:20px;margin-left:auto;align-items:center}
nav.main a{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#000;white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:1px}
nav.main a:hover,nav.main a.on{border-bottom-color:#000}
nav.main a.only-m{display:none}
@media(max-width:720px){nav.main a.only-m{display:inline}}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
nav.main a.navcta{border:1px solid #000;padding:7px 12px;font-size:8.5px;letter-spacing:.06em}
nav.main a.navcta:hover{background:#000;color:#fff}
@media(max-width:880px){nav.main{gap:14px}nav.main a.hide-m{display:none}header.site .wrap{gap:12px}}
@media(max-width:560px){nav.main a.navcta{padding:6px 9px}nav.main{gap:11px}nav.main a{font-size:9px}}

/* ══════════ hero ══════════ */
.hero{background:#fff;border-bottom:1px solid #000}
.hero .wrap{padding-top:44px;padding-bottom:40px;position:relative}
.hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px}
.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid #000;padding:5px 10px;font-weight:600}
.dot{width:6px;height:6px;background:#000}

h1.display{font-size:clamp(30px,4.6vw,54px);font-weight:700;line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;max-width:22ch}
h1.display em{font-style:normal}
h1.display .brk{font-weight:700}
p.dek{font-size:11px;line-height:1.68;max-width:62ch;margin-top:16px}
p.dek b,p.dek strong{font-weight:700}
.hero .legal{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:16px}

.cta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border:1px solid #000;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#fff;color:#000;transition:background .15s,color .15s}
.btn.pri{background:#000;color:#fff}
.btn.pri:hover{background:#fff;color:#000}
.btn.sec:hover{background:#000;color:#fff}

.heromark{position:absolute;right:30px;top:64px;width:210px;pointer-events:none}
.heromark *{stroke:#000!important}
.heromark circle{fill:#000!important}
@media(max-width:900px){.heromark{display:none}}

/* ══════════ the deck ══════════ */
.deck{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-top:32px;align-items:start}
@media(max-width:900px){.deck{grid-template-columns:1fr}}

.notice{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #000;padding:12px 14px;margin-bottom:10px}
.notice:hover{background:#000;color:#fff}
.notice:hover .flag{border-color:#fff;color:#fff}
.notice .flag{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid #000;padding:4px 8px;white-space:nowrap}
.notice b{font-size:11px;font-weight:700;display:block;line-height:1.35}
.notice span.s{font-size:10.5px;display:block;line-height:1.5;margin-top:2px}
.notice .go{margin-left:auto;font-size:14px;flex:none}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{background:#fff;border:1px solid var(--hair);padding:12px 13px}
.tile:hover{border-color:#000}
.tile b{display:block;font-size:11px;font-weight:700;margin-bottom:3px}
.tile span{display:block;font-size:10px;line-height:1.5}

/* the evidence board */
.panel{background:#fff;border:1px solid #000;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid #000;background:#000;color:#fff}
.panel-head span{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.panel-head a{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.arow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--hair)}
.arow:last-child{border-bottom:0}
.arow:hover{background:#000;color:#fff}
.arow:hover .pill{border-color:#fff;color:#fff;background:transparent}
.arow .pill{font-size:8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 6px;border:1px solid #000;white-space:nowrap;flex:none;min-width:66px;text-align:center}
.arow .pill.warn{background:#000;color:#fff}
.arow .pill.flat{border-color:var(--ink-20)}
.arow b{font-size:11px;font-weight:700;display:block;line-height:1.35}
.arow em{font-style:normal;font-size:9.5px;display:block;line-height:1.4}
.arow .val{margin-left:auto;text-align:right;flex:none}
.arow .val b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.arow .val em{font-size:8.5px}

/* ══════════ section rhythm ══════════ */
.band{padding:40px 0}
.band.tint{background:#fff;border-top:1px solid #000;border-bottom:0}
.band.pad-s{padding:30px 0}

.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #000}
.sechead p{font-size:11px;margin-top:6px;max-width:70ch}
h2.sec{font-size:22px;font-weight:700;letter-spacing:-.014em;line-height:1.06;text-transform:uppercase;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
h2.sec .dim{font-weight:700}
.more{font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;flex:none;border:1px solid #000;padding:6px 10px}
.more:hover{background:#000;color:#fff}
@media(max-width:640px){.sechead{flex-direction:column;align-items:flex-start;gap:8px}h2.sec{font-size:19px}}

/* ══════════ grids + cards ══════════ */
.grid{display:grid;gap:10px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.bgrid{display:grid;gap:10px}
.bgrid.c5{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)}.bgrid.c5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}.bgrid.c5{grid-template-columns:1fr}}

.card{display:block;background:#fff;border:1px solid var(--hair);padding:14px 15px;transition:border-color .15s}
.card:hover{border-color:#000}
.card h3{font-size:11px;font-weight:700;line-height:1.3;margin-bottom:5px}
.card p{font-size:10.5px;line-height:1.55}
.card .meta{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #000}
.card .out{display:inline-block;margin-top:9px;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #000}

/* thumbnail cards */
.card.thumb{display:flex;gap:12px;align-items:flex-start}
.card.thumb .im{flex:none;width:46px;height:46px;overflow:hidden;background:#0a0a0a;display:grid;place-items:center;border:1px solid #000}
.card.thumb .im img,.card.thumb .im svg{width:100%;height:100%;transform:scale(1.2)}
.card.thumb .tx{min-width:0}

/* ranked 1-2-3 */
.rankcard{display:flex;gap:12px;align-items:flex-start}
.rankcard .no{flex:none;width:22px;height:22px;border:1px solid #000;background:#000;color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;margin-top:1px}
.rankcard:nth-child(2) .no,.rankcard:nth-child(3) .no{background:#fff;color:#000}

/* article rows */
.artrow{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--hair);padding:14px 15px;margin-bottom:10px;transition:border-color .15s}
.artrow:hover{border-color:#000}
.artrow .im{flex:none;width:96px;height:74px;overflow:hidden;background:#0a0a0a;border:1px solid #000}
.artrow time{display:block;font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.artrow>time{flex:none;width:96px;padding-top:3px;margin-bottom:0}
.artrow h3{font-size:11px;font-weight:700;line-height:1.32;margin-bottom:4px}
.artrow p{font-size:10.5px;line-height:1.55}
@media(max-width:640px){.artrow{gap:12px;flex-direction:column}.artrow .im{width:100%;height:110px}}

/* ══════════ chips, tags, evidence ══════════ */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips a{font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#000;border:1px solid #000;background:#fff;padding:6px 10px;transition:background .15s,color .15s}
.chips a:hover{background:#000;color:#fff}
.chips a.on{background:#000;color:#fff}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid #000;background:#fff;padding:4px 9px}

.tag{display:inline-block;font-size:8px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px;color:#000}
.tag::before{content:"// "}

/* evidence — emphasis is structural: fill, outline, hairline */
.ev{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.evk{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.evv{font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 6px;border:1px solid var(--ink-20);margin-right:5px;background:#fff;color:#000}
.evv.approved{background:#000;color:#fff;border-color:#000}
.evv.strong{border-color:#000}
.evv.moderate{border-color:#000;border-style:dashed}
.evv.weak{border-color:var(--ink-20)}

/* directory */
.pepcard{border-left:1px solid var(--hair)!important}
.pepcard:hover{border-left-color:#000!important}
.letterhead{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid #000;padding-bottom:8px;margin:30px 0 14px}
.letterblock{scroll-margin-top:130px}
.alpha,.letters{display:flex;flex-wrap:wrap;gap:2px;margin-top:14px}
.alpha a,.letters a{font-size:10px;font-weight:600;width:26px;height:26px;display:grid;place-items:center;border:1px solid transparent}
.alpha a:hover,.letters a:hover{border-color:#000}
.alpha a.dead,.letters a.dead{color:var(--ink-20);pointer-events:none}

/* filter bar */
.filterbar{background:#fff;border:1px solid #000;padding:14px 16px;margin-top:26px}
.filterbar .letters{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.filterbar .fsearch{display:flex;cursor:text;align-items:center;gap:9px;height:36px;padding:0 12px;border:1px solid #000;background:#fff;margin-bottom:12px}
.filterbar .fsearch input{border:0;outline:0;background:none;font-family:var(--sans);font-size:11px;width:100%;color:#000}
.filterbar .fsearch input::placeholder{color:#000;opacity:1;font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.filterbar .fsearch svg{flex:none}

/* ══════════ stat bar ══════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #000;margin:32px 0 0}
.stat{background:#fff;padding:16px 18px;border-right:1px solid #000}
.stat:last-child{border-right:0}
.stat .n{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1}
.stat .l{font-size:8px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-top:8px}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid #000}}

.ticker{display:none}

/* ══════════ dark band — full bleed black ══════════ */
.dark{background:var(--black);color:#fff;padding:44px 0}
.dark h2.sec{color:#fff}
.dark h2.sec .dim{color:#fff}
.dark .kick{color:#fff}
.dark p,.dark .sechead p{color:#fff}
.dark .sechead{border-bottom-color:#fff}
.dark .card{background:transparent;border-color:#fff;color:#fff}
.dark .card:hover{background:#fff;color:#000}
.dark .card h3{color:inherit}
.dark .card p{color:inherit}
.dark .more{color:#fff;border-color:#fff}
.dark .more:hover{background:#fff;color:#000}
.dark .btn{border-color:#fff}
.dark .btn.pri{background:#fff!important;color:#000!important}
.dark .btn.pri:hover{background:transparent!important;color:#fff!important}
.dark .btn.sec{background:transparent!important;color:#fff!important;border-color:#fff!important}
.dark .btn.sec:hover{background:#fff!important;color:#000!important}

/* vendor spotlight */
.vendor{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:center}
@media(max-width:820px){.vendor{grid-template-columns:1fr}}
.vhead{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.vhead::before{content:"// "}.vhead::after{content:" //"}
.vname{font-size:26px;font-weight:700;letter-spacing:-.014em;text-transform:uppercase;line-height:1.04;margin-bottom:10px}
.vsub{font-size:11px;line-height:1.65;color:#fff;max-width:62ch}
.vpanel{background:transparent;border:1px solid #fff;padding:18px}
.vpanel .vl{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:3px}
.vpanel .vn{font-size:13px;font-weight:700;color:#fff;margin-bottom:12px;font-variant-numeric:tabular-nums}
.vpanel .vn:last-child{margin-bottom:0}
.score{font-size:44px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1}

/* ══════════ article pages — the document ══════════ */
.crumb{border-bottom:1px solid var(--hair);background:#fff}
.crumb .wrap{display:flex;align-items:center;gap:12px;height:38px;font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.crumb a:hover{border-bottom:1px solid #000}

/* sticky jump bar, auto-built by site.js */
.jump{position:sticky;top:56px;z-index:90;background:#fff;border-bottom:1px solid #000}
.jump .wrap{display:flex;align-items:center;gap:4px;height:40px;overflow-x:auto;scrollbar-width:none}
.jump .wrap::-webkit-scrollbar{display:none}
.jump .jl{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;flex:none;margin-right:8px}
.jump a{flex:none;font-size:8.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;white-space:nowrap;border:1px solid transparent}
.jump a:hover{border-color:#000}
.jump a.on{background:#000;color:#fff}

/* band opener — the catalog-page shape. full bleed black, brand left, section tag right */
.band-open{background:var(--black);color:#fff;padding:34px 0 30px;margin-bottom:0}
.band-open .wrap{max-width:var(--w)}
.band-open .brow{display:flex;justify-content:space-between;gap:20px;margin-bottom:26px}
.band-open .brow span{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.band-open .kick{color:#fff}
.band-open h1{font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.016em;line-height:1.08;text-transform:uppercase;max-width:30ch;margin:0 0 14px}
.band-open .dek{font-size:11px;line-height:1.6;max-width:86ch;margin:0;color:#fff}
.band-open .dek b,.band-open .dek strong{color:#fff}

/* document chrome row — doc id · published · revision · read time */
.docrow{border-bottom:1px solid #000;background:#fff}
.docrow .wrap{display:flex;flex-wrap:wrap;gap:0;align-items:stretch}
.docrow .cell{padding:12px 18px 12px 0;margin-right:18px;border-right:1px solid var(--hair)}
.docrow .cell:last-child{border-right:0;margin-right:0}
.docrow .cl{display:block;font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.docrow .cv{display:block;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.docrow .cv.code{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.03em}
@media(max-width:640px){.docrow .cell{padding-right:12px;margin-right:12px}}

article.post{max-width:860px;margin:0 auto;padding:36px 28px 56px}
article.post .kick{margin-bottom:12px}
article.post h1{font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.016em;line-height:1.08;text-transform:uppercase;margin-bottom:14px}
article.post .dek{font-size:11px;line-height:1.65;max-width:none;margin-top:0}
article.post h2{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.3;margin:38px 0 12px;padding-bottom:7px;border-bottom:1px solid #000;scroll-margin-top:116px}
article.post h3{font-size:11px;font-weight:700;margin:22px 0 6px}
article.post p{font-size:11px;line-height:1.68;margin-bottom:12px}
article.post p a,article.post li a,article.post td a{border-bottom:1px solid #000}
article.post p a:hover,article.post li a:hover{background:#000;color:#fff}
article.post strong{font-weight:700}
article.post em{font-style:italic}
article.post ul,article.post ol{margin:0 0 16px 18px}
article.post li{font-size:11px;line-height:1.65;margin-bottom:6px}
article.post blockquote{border-left:1px solid #000;padding-left:16px;margin:20px 0;font-size:11px}
article.post sup{font-size:8px;font-weight:600;line-height:0;vertical-align:baseline;position:relative;top:-.5em}
article.post sup a{border-bottom:0!important;padding:0 1px}
article.post sup a:hover{background:#000;color:#fff}

.byline{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:18px 0 26px;padding:10px 0;border-top:1px solid #000;border-bottom:1px solid var(--hair)}
.byline span{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.byline span b{font-weight:600}

/* answer-first — the GEO callout, now a black statement strip */
.answer{background:var(--black);color:#fff;border:0;padding:20px 22px;margin:0 0 26px}
.answer p{font-size:11px;line-height:1.68;color:#fff;margin:0}
.answer p+p{margin-top:10px}
.answer strong{color:#fff;font-weight:700}
.answer a{border-bottom:1px solid #fff}

.takeaways{background:#fff;border:1px solid #000;padding:18px 20px;margin:26px 0}
.takeaways .kick{margin-bottom:12px}
.takeaways ul{margin:0;list-style:none}
.takeaways li{font-size:11px;line-height:1.62;margin:0;padding:8px 0;border-top:1px solid var(--hair)}
.takeaways li:first-child{border-top:0;padding-top:0}
.takeaways li:last-child{padding-bottom:0}

.disclosure-inline{background:#fff;border:1px solid #000;padding:12px 15px;margin:24px 0;font-size:10px;line-height:1.6}
.disclosure-inline b{font-weight:700}
.disclosure-inline a{border-bottom:1px solid #000}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid #000;margin:22px 0;background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:11px}
table.data thead th{background:#000;color:#fff;font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:9px 12px;white-space:nowrap}
table.data td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.5}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:#f4f4f4}
table.data td.num{font-variant-numeric:tabular-nums;font-size:12.5px}
table.data td strong{font-weight:700}

.grade{display:flex;flex-direction:column;gap:5px;min-width:120px}
.grade span{font-size:8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.grade .bar{height:4px;padding:0;border:0;background:var(--hair);overflow:hidden}
.grade .bar i{display:block;height:100%;background:#000}

/* faq */
.faq{border-top:1px solid var(--hair);padding:12px 0}
.faq summary{font-size:11px;font-weight:700;cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline}
.faq summary::before{content:"+";font-weight:700;flex:none;width:12px}
.faq[open] summary::before{content:"–"}
.faq h3{font-size:11px;font-weight:700;margin:0 0 6px}
.faq p{font-size:11px;line-height:1.65;margin:8px 0 0 22px}

.refs{background:#fff;border:1px solid #000;padding:18px 20px;margin:30px 0}
.refs .kick{margin-bottom:12px}
.refs ol{margin:0 0 0 22px}
.refs li{font-size:10px;line-height:1.55;margin-bottom:6px}
.refs a{border-bottom:1px solid #000}
ol.refs{list-style:decimal}

.readnext{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:860px;margin:0 auto;padding:0 28px 40px}
.readnext h2{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid #000;padding-bottom:7px;margin:0}
.readnext h2::before{content:"// "}.readnext h2::after{content:" //"}
.readnext .artrow{margin:0}
@media(max-width:620px){.readnext{grid-template-columns:1fr}}

/* ══════════ the ledger — ranked rows, the document's signature ══════════ */
.ledger{border-top:1px solid #000;margin:18px 0 28px}
.ledger .lhead{display:grid;grid-template-columns:34px 1.15fr 1.5fr;gap:14px;padding:8px 0;border-bottom:1px solid #000;font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ledger .lr{display:grid;grid-template-columns:34px 1.15fr 1.5fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:start;scroll-margin-top:116px}
.ledger .lr:last-child{border-bottom:1px solid #000}
.ledger .no{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}
.ledger .nm{font-size:11px;font-weight:700;line-height:1.35}
.ledger .sub{display:block;font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.ledger .gr{display:inline-block;margin-top:7px}
.ledger .tx{font-size:11px;line-height:1.62}
.ledger .tx strong{font-weight:700}
.ledger.four .lhead,.ledger.four .lr{grid-template-columns:1fr .8fr 2fr 1fr}
.ledger.two .lhead,.ledger.two .lr{grid-template-columns:70px 1fr}
@media(max-width:700px){
  .ledger .lhead{display:none}
  .ledger .lr,.ledger.four .lr{grid-template-columns:34px 1fr}
  .ledger .tx{grid-column:2}
  .ledger.four .lr>*{grid-column:2}
  .ledger.four .lr>*:first-child{grid-column:1/-1}
  .ledger.two .lr{grid-template-columns:70px 1fr}
}

/* grade stamps */
.g{display:inline-block;border:1px solid #000;padding:3px 7px;font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;white-space:nowrap;background:#fff}
.g.A{background:#000;color:#fff}
.g.B{border-width:1px}
.g.C{border-style:dashed}
.g.D{border-color:var(--ink-20)}
.g.E{border-color:var(--ink-20);color:#000}
.g.X{background:#000;color:#fff;text-decoration:line-through}

/* figures — full bleed black under the page, FIG-numbered */
.fig{margin:28px 0;border:1px solid #000;background:var(--black)}
.fig img,.fig svg{width:100%;height:auto;display:block}
.fig figcaption{display:flex;gap:12px;align-items:baseline;background:#fff;color:#000;padding:10px 14px;border-top:1px solid #000;font-size:10px;line-height:1.5}
.fig figcaption b{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;flex:none}

/* the pull — a one-line twist inside the document */
.pull{border-top:1px solid #000;border-bottom:1px solid #000;padding:18px 0;margin:28px 0;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-transform:uppercase}

/* in-body bridge — internal, never a vendor */
.bridge{display:flex;gap:14px;align-items:center;border:1px solid #000;padding:12px 14px;margin:24px 0}
.bridge .stamp{flex:none}
.bridge b{font-size:11px;font-weight:700;display:block}
.bridge span{font-size:10px;display:block;line-height:1.5}
.bridge .go{margin-left:auto;flex:none}
.bridge:hover{background:#000;color:#fff}
.bridge:hover .stamp{border-color:#fff;color:#fff}

/* ══════════ the fan-out — every report ends here ══════════ */
.fanout{border-top:1px solid #000;background:#fff;padding:36px 0 44px}
.fanout .fo-row{margin-bottom:24px}
.fanout .fo-row .kick{margin-bottom:10px}
.fanout .fo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
@media(max-width:820px){.fanout .fo-grid{grid-template-columns:1fr}}
.fo-desk{background:var(--black);color:#fff;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.fo-desk .kick{color:#fff;margin-bottom:0}
.fo-desk .vname{font-size:22px;margin:0}
.fo-desk p{font-size:11px;line-height:1.6;color:#fff;margin:0}
.fo-desk .row{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid #fff;padding-top:12px}
.fo-desk .row div{min-width:70px}
.fo-desk .vl{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:2px}
.fo-desk .vn{font-size:13px;font-weight:700;display:block;font-variant-numeric:tabular-nums}
.fo-desk .cta-row{margin-top:4px}
.fo-desk .btn{border-color:#fff;background:transparent;color:#fff}
.fo-desk .btn.pri{background:#fff;color:#000}
.fo-desk .btn.pri:hover{background:transparent;color:#fff}
.fo-desk .btn.sec:hover{background:#fff;color:#000}
.fo-desk small{font-size:9px;line-height:1.5;display:block;border-top:1px solid #fff;padding-top:10px}
.fo-desk small a{border-bottom:1px solid #fff}
.fo-next{display:flex;flex-direction:column;gap:0;border:1px solid #000}
.fo-next .kick{padding:12px 16px 10px;border-bottom:1px solid #000;margin:0}
.fo-next a{display:flex;gap:14px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--hair)}
.fo-next a:last-child{border-bottom:0}
.fo-next a:hover{background:#000;color:#fff}
.fo-next .no{font-size:12.5px;font-weight:700;flex:none;width:34px;white-space:nowrap}
.fo-next b{font-size:11px;font-weight:700;display:block;line-height:1.3}
.fo-next span{font-size:10px;display:block;line-height:1.45;margin-top:2px}

/* ══════════ search page ══════════ */
.searchpage{max-width:860px;margin:0 auto;padding:36px 28px 60px}
.searchpage .big{display:flex;align-items:center;gap:10px;border:1px solid #000;height:48px;padding:0 16px;margin:18px 0 14px}
.searchpage .big input{border:0;outline:0;background:none;font-family:var(--sans);font-size:14px;width:100%;color:#000}
.searchpage .big input::placeholder{color:#000;opacity:1;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.searchpage .count{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 6px;border-bottom:1px solid #000;padding-bottom:6px}
.sres{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair)}
.sres:hover{background:#000;color:#fff;margin:0 -12px;padding-left:12px;padding-right:12px}
.sres .t{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:0 0 84px}
.sres b{font-size:11px;font-weight:700;display:block;line-height:1.3}
.sres p{font-size:10.5px;line-height:1.5;margin-top:3px}
.sres mark{background:transparent;color:inherit;border-bottom:1px solid currentColor;font-weight:700}
.sres .u{font-size:8px;letter-spacing:.04em;margin-top:4px;display:block}

/* ══════════ footer ══════════ */
footer.site{background:var(--black);color:#fff;padding:44px 0 28px;font-size:10.5px}
footer.site .cols{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:28px;padding-bottom:24px;border-bottom:1px solid #fff}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site .wordmark{color:#fff;font-size:16px;margin-bottom:10px;display:block}
footer.site h4{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:12px}
footer.site h4::before{content:"// "}footer.site h4::after{content:" //"}
footer.site ul{list-style:none;margin:0}
footer.site a{color:#fff;display:block;margin-bottom:8px;font-size:10.5px}
footer.site a:hover{text-decoration:underline}
footer.site p.fm{font-size:10.5px;line-height:1.65;color:#fff;max-width:44ch}
footer.site .legal{padding-top:18px;font-size:8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.9;color:#fff}
footer.site .legal a{display:inline;color:#fff;border-bottom:1px solid #fff!important}

/* ══════════ motion — quiet ══════════ */
.rv{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.rv.in{opacity:1;transform:none}
.rise{animation:heroRise .5s cubic-bezier(.2,.7,.3,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}
@keyframes heroRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ══════════ v5.1 — readability + the functional colour layer [her word Aug 22 pm: "easier to read · optimize for mobile · use colour if it helps association"] ══════════ */
:root{
  --grn:#0f6b4f; --grn-tint:#e6f3ed; --grn-line:#9fd1bb;
  --amb:#b5680f; --amb-tint:#fbf0e1; --amb-line:#e7c48f;
  --red:#b42318; --red-tint:#fbeae8;
  --gry:#6b7470; --gry-tint:#f0f2f1; --gry-line:#c9cfcc;
  --c-weight:#B5680F; --c-heal:#1F7A47; --c-long:#5F4FC7; --c-cog:#1D5FD8; --c-imm:#0C6C86; --c-gh:#A82C52; --c-skin:#7D6231;
  --green:#0f6b4f; --green-deep:#0a3d2c; --green-tint:#e6f3ed; --green-line:#9fd1bb; --signal:#5ad19a;
}
/* type scale up — body 13.5, floors raised, hierarchy by size not just weight */
body{font-size:12.5px;line-height:1.6}
.micro,.topbar span,.band-open .brow span,.docrow .cl,.byline span,.crumb .wrap,.artrow time,.card .meta,.evk,.tag,.jump .jl,.fo-desk .vl,.vpanel .vl,.stat .l,.sdrop .t,.sres .t,.fig figcaption b,.ledger .lhead,.ledger .sub,footer.site .legal,footer.site h4,.hero-meta,.hero .legal{font-size:9px}
.kick{font-size:10.5px}
nav.main a{font-size:10.5px}
nav.main a.navcta{font-size:9.5px}
.chips a,.chip,.jump a,.more,.btn,.bar,.stamp,.notice .flag,.arow .pill,.evv,.g{font-size:10px}
.chips a{padding:8px 12px;min-height:34px;display:inline-flex;align-items:center}
.alpha a,.letters a{font-size:11.5px;width:30px;height:30px}
.hsearch input,.hsearch input::placeholder{font-size:11.5px}
p.dek,.band-open .dek,article.post .dek{font-size:13.5px;line-height:1.65}
.notice b,.tile b,.arow b,.card h3,.artrow h3,.fo-next b,.sdrop b,.sres b,.bridge b,.docrow .cv,.ledger .nm{font-size:13px}
.notice span.s,.tile span,.card p,.artrow p,.arow em,.fo-next span,.sdrop small,.sres p,.bridge span,.vsub,.fo-desk p,footer.site a,footer.site p.fm,.sechead p,.tablewrap,table.data{font-size:12.5px}
.arow .val b{font-size:15px}
.stat .n{font-size:32px}
article.post p,article.post li,.ledger .tx,.answer p,.takeaways li,.faq p,.faq summary,.disclosure-inline,table.data td{font-size:13.5px;line-height:1.7}
article.post p{max-width:72ch}
article.post h2{font-size:14px}
article.post h3{font-size:13.5px}
article.post sup{font-size:9.5px}
.refs li{font-size:11.5px;line-height:1.6}
.pull{font-size:20px}
.ledger .no{font-size:14px}
.fo-desk .vn,.vpanel .vn,.docrow .cv{font-size:14px}
.fo-desk .vname{font-size:24px}
.fig figcaption{font-size:12px}

/* colour = association. chrome stays monochrome; data carries hue */
article.post p a,article.post li a,article.post td a,.refs a,.disclosure-inline a,.fo-desk small a{color:var(--grn);border-bottom-color:var(--grn-line)}
article.post p a:hover,article.post li a:hover{background:var(--grn);color:#fff;border-bottom-color:var(--grn)}
article.post sup a{color:var(--grn)}
.answer strong:first-child,.answer p:first-child strong:first-child{color:var(--signal)}
.takeaways{border-left:4px solid var(--grn)}
.takeaways .kick,.refs .kick{color:var(--grn)}
article.post h2{border-bottom:2px solid #000}
.pull{color:var(--grn);border-color:var(--grn)}

/* grade stamps A→E + retracted */
.g{font-size:10.5px;padding:4px 8px}
.g.A{background:var(--grn);border-color:var(--grn);color:#fff}
.g.B{background:var(--grn-tint);border-color:var(--grn);color:var(--grn)}
.g.C{background:var(--amb-tint);border-color:var(--amb);color:var(--amb);border-style:solid}
.g.D{background:var(--gry-tint);border-color:var(--gry-line);color:var(--gry)}
.g.E{background:#fff;border-color:var(--gry-line);color:var(--gry);border-style:dashed}
.g.X{background:var(--red);border-color:var(--red);color:#fff;text-decoration:none}
.ledger .lr{border-left:3px solid transparent;padding-left:10px;margin-left:-13px}
.ledger .lr:has(.g.A){border-left-color:var(--grn)}
.ledger .lr:has(.g.B){border-left-color:var(--grn-line)}
.ledger .lr:has(.g.C){border-left-color:var(--amb-line)}
.ledger .lr:has(.g.D),.ledger .lr:has(.g.E){border-left-color:var(--gry-line)}
.ledger .lr:has(.g.X){border-left-color:var(--red)}

/* evidence pills — directory + cards */
.evv{font-size:9.5px;padding:4px 7px}
.evv.approved{background:var(--grn);border-color:var(--grn);color:#fff}
.evv.strong{background:var(--grn-tint);border-color:var(--grn);color:var(--grn);border-style:solid}
.evv.moderate{background:var(--amb-tint);border-color:var(--amb);color:var(--amb);border-style:solid}
.evv.weak,.evv:not(.approved):not(.strong):not(.moderate){background:var(--gry-tint);border-color:var(--gry-line);color:var(--gry)}

/* category hue — tags + left rails, the directory reads by colour */
.tag.weight{color:var(--c-weight)}.tag.heal{color:var(--c-heal)}.tag.long{color:var(--c-long)}
.tag.cog{color:var(--c-cog)}.tag.imm{color:var(--c-imm)}.tag.gh{color:var(--c-gh)}.tag.skin{color:var(--c-skin)}
.pepcard{border-left-width:3px!important}
.card.thumb .im{background:#0a0a0a}

/* the evidence board + notices */
.arow .pill{min-width:74px}
.arow .pill{background:var(--gry-tint);border-color:var(--gry-line);color:var(--gry)}
.arow .pill.warn{background:var(--amb-tint);border-color:var(--amb);color:var(--amb)}
.arow:not(:has(.pill.warn)):not(:has(.pill.flat)) .pill{background:var(--grn);border-color:var(--grn);color:#fff}
.arow .pill.flat{background:var(--gry-tint);border-color:var(--gry-line);color:var(--gry)}
.arow:hover .pill{border-color:#fff;color:#fff;background:transparent}
.notice .flag{color:var(--grn);border-color:var(--grn)}
.hero-meta .badge{color:var(--grn);border-color:var(--grn)}
.dot{background:var(--grn)}
.sres mark,.sdrop mark{color:var(--grn)}
.jump a.on{background:var(--grn)}
.rankcard .no{background:var(--grn);border-color:var(--grn)}
.rankcard:nth-child(2) .no,.rankcard:nth-child(3) .no{background:#fff;color:#000;border-color:#000}
.vpanel .score,.fo-desk .row .vn:first-child{color:var(--signal)}
.score{color:var(--signal)}
.answer{border-left:4px solid var(--signal)}

/* figures — legible on a phone: scroll the plate, tap to open full size */
.fig .figscroll{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.fig .figscroll img{min-width:0}
@media(max-width:760px){
  .fig .figscroll img{min-width:920px;width:920px;max-width:none}
  .fig figcaption::after{content:"scroll the plate → · tap to open full size";display:block;flex-basis:100%;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grn);margin-top:6px}
  .fig figcaption{flex-wrap:wrap}
}

/* mobile */
@media(max-width:760px){
  body{font-size:13px}
  article.post{padding:28px 18px 48px}
  article.post p,article.post li,.ledger .tx,.answer p,.takeaways li,.faq p,.faq summary{font-size:14px;line-height:1.7}
  .band-open{padding:26px 0 24px}
  .band-open .brow{margin-bottom:18px}
  .band-open h1{font-size:clamp(21px,6vw,26px)}
  .band-open .dek,p.dek{font-size:13px}
  .docrow .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .docrow .cell{padding:10px 12px 10px 0;margin:0;border-right:0;border-bottom:1px solid var(--hair)}
  .docrow .cell:nth-child(odd){border-right:1px solid var(--hair);margin-right:12px}
  .docrow .cell:last-child,.docrow .cell:nth-last-child(2):nth-child(odd){border-bottom:0}
  .jump{top:56px}
  .jump .wrap{height:44px}
  .jump a{font-size:10px;padding:7px 10px}
  .ledger .lr{grid-template-columns:30px 1fr;gap:10px;padding:14px 0 14px 10px}
  .ledger .gr{margin-top:8px}
  .takeaways{padding:16px 16px}
  article.post ul,article.post ol{margin-left:16px}
  .takeaways ul{margin-left:0}
  .chips{gap:8px}
  .chips a{font-size:10.5px}
  h1.display{font-size:clamp(28px,9vw,40px)}
  .hero .wrap{padding-top:30px;padding-bottom:30px}
  .stat .n{font-size:28px}
  h2.sec{font-size:18px}
  .fo-desk{padding:18px}
  .fo-desk .vname{font-size:20px}
  .fo-next a{padding:12px 14px}
  .sres{gap:10px;flex-direction:column}
  .sres .t{flex-basis:auto}
  .searchpage{padding:24px 18px 48px}
  .tablewrap table.data{font-size:12.5px}
  header.site .wrap{height:52px}
  nav.main{gap:10px}
  nav.main a{font-size:10px}
}

/* v5.1b — her word: "bump body font and headlines by 1-2px for easier read except menu and buttons" */
body{font-size:13.5px}
p.dek,.band-open .dek,article.post .dek{font-size:15px;line-height:1.6}
article.post p,article.post li,.ledger .tx,.answer p,.takeaways li,.faq p,.faq summary,.disclosure-inline,table.data td{font-size:15px;line-height:1.68}
article.post h2{font-size:16px}
article.post h3{font-size:15px}
article.post sup{font-size:10px}
.refs li{font-size:12.5px}
.pull{font-size:22px}
.ledger .nm,.notice b,.tile b,.arow b,.card h3,.artrow h3,.fo-next b,.sdrop b,.sres b,.bridge b{font-size:14.5px}
.notice span.s,.tile span,.card p,.artrow p,.arow em,.fo-next span,.sdrop small,.sres p,.bridge span,.vsub,.fo-desk p,.sechead p{font-size:13.5px}
.ledger .sub{font-size:10px}
.band-open h1,article.post h1{font-size:clamp(26px,3.6vw,36px)}
h1.display{font-size:clamp(32px,4.8vw,56px)}
h2.sec{font-size:24px}
.vname{font-size:28px}
.fo-desk .vname{font-size:26px}
.fig figcaption{font-size:13px}
.kick{font-size:11px}
@media(max-width:760px){
  body{font-size:14px}
  article.post p,article.post li,.ledger .tx,.answer p,.takeaways li,.faq p,.faq summary{font-size:15.5px}
  .band-open h1,article.post h1{font-size:clamp(23px,6.4vw,28px)}
  .band-open .dek,p.dek{font-size:14.5px}
  h2.sec{font-size:20px}
  article.post h2{font-size:16.5px}
}

/* ══════════ v5.2 — pastel glow outlines, her word: "the green is nice but do more of a glow outline pastel like peptidecatalogue" ══════════ */
:root{
  --p-grn:#22c55e; --p-grn-bd:#86efac; --p-grn-bg:#ecfdf5; --p-grn-tx:#15803d; --p-grn-gl:rgba(34,197,94,.22);
  --p-mint:#34d399; --p-mint-bd:#a7f3d0; --p-mint-bg:#f0fdf9; --p-mint-tx:#047857; --p-mint-gl:rgba(52,211,153,.2);
  --p-amb:#f59e0b; --p-amb-bd:#fcd34d; --p-amb-bg:#fffbeb; --p-amb-tx:#b45309; --p-amb-gl:rgba(245,158,11,.22);
  --p-sla:#94a3b8; --p-sla-bd:#cbd5e1; --p-sla-bg:#f8fafc; --p-sla-tx:#475569; --p-sla-gl:rgba(148,163,184,.18);
  --p-ros:#f43f5e; --p-ros-bd:#fda4af; --p-ros-bg:#fff1f2; --p-ros-tx:#be123c; --p-ros-gl:rgba(244,63,94,.22);
  --p-vio:#8b5cf6; --p-vio-bd:#c4b5fd; --p-vio-bg:#f5f3ff; --p-vio-tx:#6d28d9; --p-vio-gl:rgba(139,92,246,.2);
  --p-blu:#3b82f6; --p-blu-bd:#bfdbfe; --p-blu-bg:#eff6ff; --p-blu-tx:#1d4ed8; --p-blu-gl:rgba(59,130,246,.2);
  --p-tea:#14b8a6; --p-tea-bd:#99f6e4; --p-tea-bg:#f0fdfa; --p-tea-tx:#0f766e; --p-tea-gl:rgba(20,184,166,.2);
  --p-pnk:#ec4899; --p-pnk-bd:#fbcfe8; --p-pnk-bg:#fdf2f8; --p-pnk-tx:#be185d; --p-pnk-gl:rgba(236,72,153,.2);
  --p-yel:#eab308; --p-yel-bd:#fde68a; --p-yel-bg:#fefce8; --p-yel-tx:#a16207; --p-yel-gl:rgba(234,179,8,.2);
  --grn:var(--p-grn-tx); --grn-line:var(--p-grn-bd); --signal:#6ee7b7;
  --c-weight:var(--p-grn-tx); --c-heal:var(--p-yel-tx); --c-long:var(--p-vio-tx); --c-cog:var(--p-blu-tx); --c-imm:var(--p-tea-tx); --c-gh:var(--p-pnk-tx); --c-skin:var(--p-amb-tx);
}
/* grade stamps — pastel fill, soft outline, glow */
.g{border-width:1.5px;box-shadow:0 0 0 3px rgba(0,0,0,0)}
.g.A{background:var(--p-grn-bg);border-color:var(--p-grn-bd);color:var(--p-grn-tx);box-shadow:0 0 0 3px rgba(34,197,94,.12),0 0 14px var(--p-grn-gl)}
.g.B{background:var(--p-mint-bg);border-color:var(--p-mint-bd);color:var(--p-mint-tx);box-shadow:0 0 0 3px rgba(52,211,153,.1),0 0 12px var(--p-mint-gl)}
.g.C{background:var(--p-amb-bg);border-color:var(--p-amb-bd);color:var(--p-amb-tx);border-style:solid;box-shadow:0 0 0 3px rgba(245,158,11,.1),0 0 12px var(--p-amb-gl)}
.g.D{background:var(--p-sla-bg);border-color:var(--p-sla-bd);color:var(--p-sla-tx);box-shadow:0 0 0 3px rgba(148,163,184,.1)}
.g.E{background:#fff;border-color:var(--p-sla-bd);color:var(--p-sla-tx);border-style:dashed;box-shadow:none}
.g.X{background:var(--p-ros-bg);border-color:var(--p-ros-bd);color:var(--p-ros-tx);box-shadow:0 0 0 3px rgba(244,63,94,.1),0 0 12px var(--p-ros-gl)}
.ledger .lr:has(.g.A){border-left-color:var(--p-grn-bd)}
.ledger .lr:has(.g.B){border-left-color:var(--p-mint-bd)}
.ledger .lr:has(.g.C){border-left-color:var(--p-amb-bd)}
.ledger .lr:has(.g.D),.ledger .lr:has(.g.E){border-left-color:var(--p-sla-bd)}
.ledger .lr:has(.g.X){border-left-color:var(--p-ros-bd)}
/* evidence pills */
.evv{border-width:1.5px}
.evv.approved{background:var(--p-grn-bg);border-color:var(--p-grn-bd);color:var(--p-grn-tx);box-shadow:0 0 10px var(--p-grn-gl)}
.evv.strong{background:var(--p-mint-bg);border-color:var(--p-mint-bd);color:var(--p-mint-tx);box-shadow:0 0 8px var(--p-mint-gl)}
.evv.moderate{background:var(--p-amb-bg);border-color:var(--p-amb-bd);color:var(--p-amb-tx);box-shadow:0 0 8px var(--p-amb-gl)}
.evv.weak,.evv:not(.approved):not(.strong):not(.moderate){background:var(--p-sla-bg);border-color:var(--p-sla-bd);color:var(--p-sla-tx);box-shadow:none}
/* the evidence board */
.arow .pill{border-width:1.5px}
.arow .pill.warn{background:var(--p-amb-bg);border-color:var(--p-amb-bd);color:var(--p-amb-tx);box-shadow:0 0 8px var(--p-amb-gl)}
.arow:not(:has(.pill.warn)):not(:has(.pill.flat)) .pill{background:var(--p-grn-bg);border-color:var(--p-grn-bd);color:var(--p-grn-tx);box-shadow:0 0 8px var(--p-grn-gl)}
.arow .pill.flat{background:var(--p-sla-bg);border-color:var(--p-sla-bd);color:var(--p-sla-tx)}
.arow:hover .pill{box-shadow:none}
/* cards — pastel category outline + glow, the TPC directory look */
.pepcard{border:1.5px solid var(--p-sla-bd)!important;border-left-width:1.5px!important;transition:box-shadow .2s,border-color .2s}
.pepcard[data-cat="weight-loss"]{border-color:var(--p-grn-bd)!important;box-shadow:0 0 16px var(--p-grn-gl)}
.pepcard[data-cat="healing"]{border-color:var(--p-yel-bd)!important;box-shadow:0 0 16px var(--p-yel-gl)}
.pepcard[data-cat="longevity"]{border-color:var(--p-vio-bd)!important;box-shadow:0 0 16px var(--p-vio-gl)}
.pepcard[data-cat="cognitive"]{border-color:var(--p-blu-bd)!important;box-shadow:0 0 16px var(--p-blu-gl)}
.pepcard[data-cat="immune"]{border-color:var(--p-tea-bd)!important;box-shadow:0 0 16px var(--p-tea-gl)}
.pepcard[data-cat="growth-hormone"]{border-color:var(--p-pnk-bd)!important;box-shadow:0 0 16px var(--p-pnk-gl)}
.pepcard[data-cat="skin"]{border-color:var(--p-amb-bd)!important;box-shadow:0 0 16px var(--p-amb-gl)}
.pepcard:hover{box-shadow:0 0 0 3px rgba(0,0,0,.04),0 0 24px var(--p-grn-gl)!important}
.card:hover,.artrow:hover,.notice:hover,.tile:hover{border-color:var(--p-grn-bd);box-shadow:0 0 0 3px rgba(34,197,94,.08),0 0 18px var(--p-grn-gl)}
.notice:hover{background:#fff;color:#000}
.notice:hover .flag{border-color:var(--p-grn-bd);color:var(--p-grn-tx)}
.card.thumb .im{border-color:var(--p-sla-bd)}
/* callouts */
.takeaways{background:var(--p-grn-bg);border:1.5px solid var(--p-grn-bd);border-left:4px solid var(--p-grn);box-shadow:0 0 0 4px rgba(34,197,94,.06),0 0 22px var(--p-grn-gl)}
.takeaways li{border-top-color:var(--p-grn-bd)}
.answer{border-left:4px solid var(--p-mint);box-shadow:0 0 0 3px rgba(52,211,153,.12),0 0 22px var(--p-mint-gl)}
.answer strong:first-child{color:#6ee7b7}
.bridge{border:1.5px solid var(--p-vio-bd);background:var(--p-vio-bg);box-shadow:0 0 16px var(--p-vio-gl)}
.bridge .stamp{border-color:var(--p-vio-bd);color:var(--p-vio-tx);background:#fff}
.bridge:hover{background:var(--p-vio-bg);color:#000}
.bridge:hover .stamp{border-color:var(--p-vio);color:var(--p-vio-tx)}
.disclosure-inline{background:var(--p-sla-bg);border:1.5px solid var(--p-sla-bd)}
.notice .flag{background:var(--p-grn-bg);border:1.5px solid var(--p-grn-bd);color:var(--p-grn-tx);box-shadow:0 0 8px var(--p-grn-gl)}
.hero-meta .badge{background:var(--p-grn-bg);border:1.5px solid var(--p-grn-bd);color:var(--p-grn-tx);box-shadow:0 0 10px var(--p-grn-gl)}
.dot{background:var(--p-grn)}
.pull{color:var(--p-grn-tx);border-color:var(--p-grn-bd)}
.jump a.on{background:var(--p-grn-tx);box-shadow:0 0 10px var(--p-grn-gl)}
.rankcard .no{background:var(--p-grn-tx);border-color:var(--p-grn-tx);box-shadow:0 0 10px var(--p-grn-gl)}
.chips a.on{background:var(--p-grn-tx);border-color:var(--p-grn-tx);box-shadow:0 0 10px var(--p-grn-gl)}
.chips a:hover{background:var(--p-grn-bg);color:var(--p-grn-tx);border-color:var(--p-grn-bd)}
article.post p a,article.post li a,article.post td a,.refs a{color:var(--p-grn-tx);border-bottom-color:var(--p-grn-bd)}
article.post p a:hover,article.post li a:hover{background:var(--p-grn-bg);color:var(--p-grn-tx)}
.sres mark,.sdrop mark{color:var(--p-grn-tx)}
.fig{box-shadow:0 0 0 3px rgba(0,0,0,.03),0 0 26px rgba(0,0,0,.18)}
.fo-desk .row .vn:first-child,.score{color:#6ee7b7}
.tablewrap{box-shadow:0 0 18px rgba(0,0,0,.06)}

/* v5.2b — "the numbers are broken by the lines": a number never splits from its label */
.refs a,.refs li a{white-space:nowrap}
article.post sup{white-space:nowrap;margin-left:2px}
.docrow .cv,.ledger .no,.arow .val b,.stat .n,.fo-desk .vn{white-space:nowrap}
/* refs: three-digit markers need room — never touch the frame */
ol.refs{padding-left:46px;margin-left:0}
ol.refs li{padding-left:4px}
ol.refs li::marker{font-variant-numeric:tabular-nums;font-weight:600}
@media(max-width:760px){ol.refs{padding-left:40px}}

/* v5.2c — "fit images with text to match width": one column, text and plates share it; the 40-row ledger breaks out wider on desktop */
article.post{max-width:780px}
article.post p{max-width:none}
@media(min-width:960px){
  .ledger{width:900px;margin-left:calc(50% - 450px)}
}

/* ── v5.3 · citation audit fixes [IYP-AUDIT-01] ────────────────────────────────
   .vh  = in the text stream for extractors and screen readers, invisible on screen.
   Used for the "grade" label inside ledger rows, where the column header is a
   sibling div and the relationship is otherwise lost to a text extractor.        */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the standfirst: one plain declarative line under an h2, stating the section's
   answer before the prose begins. Editorial furniture that doubles as the
   plain-language anchor retrieval systems look for at the top of a chunk.        */
article.post .sf{
  font-size:15.5px;line-height:1.5;color:var(--ink);
  font-weight:500;margin:-2px 0 18px;max-width:none;
  padding-left:12px;border-left:2px solid var(--grn);
}
@media(max-width:700px){article.post .sf{font-size:15px}}

/* ══════════════════════════════════════════════════════════════════════════════
   v5.4 · ALIVE — her word Aug 22: "give it more life · not black fill icons ·
   make it more animated and lively"
   Two jobs: retire every black icon ground, and put motion on the whole page.
   The register does not change — the type, the hairlines, and the pastel
   outline system all stand. What changes is that the page now moves.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. no black fills. tiles sit on their own pastel ground ──────────────── */
.card.thumb .im,.artrow .im,.fo-next .im{
  background:transparent;border:1.5px solid var(--p-sla-bd);
  overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease,transform .28s cubic-bezier(.2,.7,.3,1)}
.card.thumb .im img,.card.thumb .im svg{transform:scale(1.06);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card.thumb:hover .im,.artrow:hover .im{border-color:var(--p-grn-bd);box-shadow:0 0 14px var(--p-grn-gl);transform:rotate(-2deg) scale(1.04)}
.card.thumb:hover .im img{transform:scale(1.16)}
.artrow .im img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.artrow:hover .im img{transform:scale(1.08)}
.card.thumb .im{width:50px;height:50px}
.artrow .im{width:104px;height:78px}
@media(max-width:640px){.artrow .im{width:100%;height:120px}}

/* the report figure is a photographic plate — it keeps its dark ground,
   but it now lifts and brightens on approach */
.fig{transition:box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.fig:hover{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(0,0,0,.03),0 14px 34px rgba(0,0,0,.22)}

/* ── 2. reveal, staggered ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.grid .rv:nth-child(1),.bgrid .rv:nth-child(1){transition-delay:.02s}
.grid .rv:nth-child(2),.bgrid .rv:nth-child(2){transition-delay:.08s}
.grid .rv:nth-child(3),.bgrid .rv:nth-child(3){transition-delay:.14s}
.grid .rv:nth-child(4),.bgrid .rv:nth-child(4){transition-delay:.2s}
.grid .rv:nth-child(5),.bgrid .rv:nth-child(5){transition-delay:.26s}
.grid .rv:nth-child(6),.bgrid .rv:nth-child(6){transition-delay:.32s}

/* section heads draw their rule as they arrive */
.sechead{position:relative}
.sechead::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--p-grn-tx);transition:width .8s cubic-bezier(.2,.7,.3,1) .1s}
.sechead.in::after{width:76px}

/* the // kicker // ticks in */
.kick{opacity:1}
.kick::before,.kick::after{display:inline-block;transition:transform .4s ease,opacity .4s ease}
.sechead:hover .kick::before{transform:translateX(-3px)}
.sechead:hover .kick::after{transform:translateX(3px)}

/* ── 3. cards move ────────────────────────────────────────────────────────── */
.card,.artrow,.notice,.tile,.pepcard,.fo-next a,.sres,.arow{
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease,border-color .22s ease,background .22s ease}
.card:hover,.artrow:hover,.notice:hover,.tile:hover{transform:translateY(-3px)}
.pepcard:hover{transform:translateY(-3px)}
.card .out,.notice .go,.bridge .go{display:inline-block;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.card:hover .out,.notice:hover .go,.bridge:hover .go{transform:translateX(5px)}
.rankcard .no{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.rankcard:hover .no{transform:scale(1.14) rotate(-6deg)}

/* buttons and stamps push back */
.btn,.more,.chips a,.stamp,.bar,.jump a,.alpha a,.letters a{
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn:hover,.more:hover{transform:translateY(-2px)}
.btn:active,.more:active,.chips a:active{transform:translateY(0) scale(.97)}
.alpha a:hover,.letters a:hover{transform:translateY(-2px) scale(1.08)}
.chips a:hover{transform:translateY(-1px)}

/* nav underline sweeps in from the left */
nav.main a:not(.navcta){position:relative;border-bottom-color:transparent!important}
nav.main a:not(.navcta)::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1.5px;
  background:var(--p-grn-tx);transition:right .3s cubic-bezier(.2,.7,.3,1)}
nav.main a:not(.navcta):hover::after,nav.main a.on::after{right:0}
nav.main a.navcta{transition:transform .2s cubic-bezier(.2,.7,.3,1),background .2s,color .2s,box-shadow .2s}
nav.main a.navcta:hover{transform:translateY(-2px);box-shadow:0 0 14px var(--p-grn-gl)}

/* body links sweep too */
article.post p a,article.post li a{background-image:linear-gradient(var(--p-grn-bd),var(--p-grn-bd));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  transition:background-size .32s cubic-bezier(.2,.7,.3,1),color .2s,background-color .2s}
article.post p a:hover,article.post li a:hover{background-size:100% 1.5px}

/* ── 4. the live signal actually pulses ───────────────────────────────────── */
.dot{width:7px;height:7px;border-radius:50%;position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(3.2);opacity:0}}
.hero-meta .badge{transition:box-shadow .4s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.hero-meta .badge:hover{transform:translateY(-2px)}

/* ── 5. the hero lattice draws itself, then breathes ──────────────────────── */
.heromark{width:240px}
.heromark *{stroke:var(--p-grn-tx)!important}
.heromark circle{fill:var(--p-mint)!important;stroke:none!important}
.heromark path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.5s cubic-bezier(.3,.7,.3,1) forwards}
.heromark path:nth-child(1){animation-delay:.15s}
.heromark path:nth-child(2){animation-delay:.35s}
.heromark path:nth-child(3){animation-delay:.5s}
.heromark path:nth-child(4){animation-delay:.65s}
.heromark g{animation:float 7s ease-in-out infinite 1.8s;transform-origin:64% 50%}
.heromark circle{animation:sparkle 3.2s ease-in-out infinite 1.6s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sparkle{0%,100%{opacity:.35;r:3}50%{opacity:1;r:4.4}}

/* ── 6. the evidence board comes in row by row and reacts ─────────────────── */
.panel{overflow:hidden}
.arow{position:relative}
.arow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--p-grn-tx);transform:scaleY(0);transform-origin:50% 50%;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.arow:hover::before{transform:scaleY(1)}
.arow:hover{background:var(--p-grn-bg);color:inherit;padding-left:18px}
.arow:hover .pill{border-color:var(--p-grn-bd);color:var(--p-grn-tx);background:#fff;box-shadow:0 0 8px var(--p-grn-gl)}
.arow .val b{transition:transform .28s cubic-bezier(.2,.7,.3,1);display:inline-block}
.arow:hover .val b{transform:scale(1.1)}
.panel-head span{position:relative;padding-left:14px}
.panel-head span::before{content:"";position:absolute;left:0;top:50%;margin-top:-3px;width:6px;height:6px;
  border-radius:50%;background:var(--p-mint);animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ── 7. the stat bar counts up [site.js] and lifts ────────────────────────── */
.stat{transition:background .25s ease,transform .25s cubic-bezier(.2,.7,.3,1)}
.stat:hover{background:var(--p-grn-bg);transform:translateY(-2px)}
.stat .n{font-variant-numeric:tabular-nums;transition:color .25s ease}
.stat:hover .n{color:var(--p-grn-tx)}

/* ── 8. the notices carry a moving flag ───────────────────────────────────── */
.notice{position:relative;overflow:hidden}
.notice::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(134,239,172,.16) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .75s cubic-bezier(.2,.7,.3,1)}
.notice:hover::after{transform:translateX(120%)}
.notice .flag{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
.notice:hover .flag{transform:scale(1.05)}

/* ── 9. grade stamps and evidence pills settle in ─────────────────────────── */
.g,.evv{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
.ledger .lr:hover .g,.card:hover .evv,.pepcard:hover .evv{transform:translateY(-1px) scale(1.04)}
.ledger .lr{transition:background .22s ease,border-left-color .22s ease,padding-left .22s ease}
.ledger .lr:hover{background:var(--p-grn-bg);padding-left:16px}

/* ── 10. tables wake up on hover ──────────────────────────────────────────── */
table.data tbody tr{transition:background .18s ease}
table.data tbody tr:hover{background:var(--p-grn-bg)}
.grade .bar i{transition:width 1.1s cubic-bezier(.2,.7,.3,1)}

/* ── 11. the pull quote arrives sideways ──────────────────────────────────── */
.pull{transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .6s ease}
.pull.rv{transform:translateX(-16px)}
.pull.rv.in{transform:none}

/* ── 12. search results and the dropdown ──────────────────────────────────── */
.sres:hover{background:var(--p-grn-bg);color:inherit;transform:translateX(4px)}
.sdrop a{transition:background .16s ease,padding-left .18s ease}
.sdrop a:hover,.sdrop a.on{background:var(--p-grn-bg);color:inherit;padding-left:18px}
.sdrop.open{animation:dropIn .22s cubic-bezier(.2,.7,.3,1) both}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 13. footer links slide ───────────────────────────────────────────────── */
footer.site a{transition:transform .2s cubic-bezier(.2,.7,.3,1),color .2s ease}
footer.site .cols a:hover{transform:translateX(4px);color:var(--p-mint);text-decoration:none}

/* ── 14. hero copy arrives in sequence ────────────────────────────────────── */
.rise{animation:heroRise .7s cubic-bezier(.2,.7,.3,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cta-row .btn:nth-child(1){animation:heroRise .7s cubic-bezier(.2,.7,.3,1) .3s both}
.cta-row .btn:nth-child(2){animation:heroRise .7s cubic-bezier(.2,.7,.3,1) .38s both}

/* ── 15. the topbar scrolls its line on a phone ───────────────────────────── */
@media(max-width:600px){
  .topbar{display:block;overflow:hidden}
  .topbar .wrap{padding:0}
  .topbar span:last-child{display:none}
  .topbar span:first-child{display:block;white-space:nowrap;animation:slide 22s linear infinite;padding-left:100%}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
}

/* motion off means motion off */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .heromark path{stroke-dashoffset:0!important}
}

/* ── 16. the page gets air and colour: a mint wash behind the hero, an
      alternating tint on the bands, and a soft rule between sections.
      Pastel only — the hairline register is untouched. ──────────────────────── */
.hero{background:linear-gradient(180deg,#f0fdf9 0%,#f7fefb 46%,#fff 100%);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-140px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.16) 0%,rgba(52,211,153,0) 68%);pointer-events:none;
  animation:drift 16s ease-in-out infinite}
.hero::after{content:"";position:absolute;bottom:-180px;left:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.09) 0%,rgba(139,92,246,0) 68%);pointer-events:none;
  animation:drift 20s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,22px) scale(1.08)}}
.hero .wrap{position:relative;z-index:1}
.band.tint{background:linear-gradient(180deg,#fbfdfc 0%,#fff 100%)}
.deck .panel,.deck .notice,.deck .tile{background:rgba(255,255,255,.86);backdrop-filter:blur(4px)}
.stats{background:rgba(255,255,255,.9)}
/* the editorial tiles are square art — give the row a square well so nothing crops */
.artrow .im{width:78px;height:78px}
.artrow .im img{width:100%;height:100%;object-fit:contain}
@media(max-width:640px){.artrow .im{width:88px;height:88px}}

/* ── 17. small-screen header: the row has to fit. Tighten the wordmark, the
      gaps and the audit stamp rather than dropping a section link. ─────────── */
html,body{overflow-x:hidden}
@media(max-width:620px){
  header.site .wrap{gap:8px}
  .wordmark{font-size:11.5px;letter-spacing:-.01em}
  nav.main{gap:9px}
  nav.main a{font-size:9.5px;letter-spacing:.05em}
  nav.main a.navcta{font-size:8.5px;padding:6px 7px;letter-spacing:.04em}
}
@media(max-width:470px){
  .wordmark{font-size:10.5px}
  nav.main a.only-m{display:none!important}
  nav.main{gap:8px}
  nav.main a.navcta{padding:6px 6px;font-size:8px}
}

/* ── 18. the stat bar arrives by transform, never by rewriting its numbers.
      The figures in the markup are the figures that paint, first frame. ────── */
.stats .stat .n,.stats .stat .l{transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .6s ease}
.stats .stat.stat-in .n{animation:statPop .7s cubic-bezier(.2,.7,.3,1) both}
.stats .stat.stat-in:nth-child(2) .n{animation-delay:.07s}
.stats .stat.stat-in:nth-child(3) .n{animation-delay:.14s}
.stats .stat.stat-in:nth-child(4) .n{animation-delay:.21s}
@keyframes statPop{
  0%{opacity:0;transform:translateY(12px) scale(.94)}
  60%{opacity:1;transform:translateY(-2px) scale(1.03)}
  100%{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.stats .stat.stat-in .n{animation:none!important}}

/* trial-blocked annotation — structurally untestable, not tested-and-failed */
.g.BLK{background:repeating-linear-gradient(45deg,#f7f7f2,#f7f7f2 3px,#e9e9e1 3px,#e9e9e1 6px);border-color:#000}

/* ── 19. compound files: a grade chip never breaks across lines in a table ── */
table.data .evv,table.data .g{white-space:nowrap;display:inline-block}
table.data td.num{white-space:normal}

/* ── 20. the reconstitution calculator ─────────────────────────────────────── */
.calc{border:1.5px solid var(--p-grn-bd);background:var(--p-grn-bg);padding:20px 22px;margin:22px 0;
  box-shadow:0 0 0 4px rgba(34,197,94,.06),0 0 22px var(--p-grn-gl)}
.calc-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--p-grn-bd)}
.calc-row:first-child{padding-top:0}
.calc-row label{flex:1 1 300px;font-size:14px;font-weight:600;line-height:1.35}
.calc-row label span{display:block;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--p-grn-tx);margin-top:3px}
.calc-row input,.calc-row select{font-family:var(--sans);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;
  border:1.5px solid var(--p-grn-bd);background:#fff;color:#000;padding:9px 12px;width:130px;outline:0;
  transition:border-color .2s,box-shadow .2s}
.calc-row input:focus,.calc-row select:focus{border-color:var(--p-grn-tx);box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.calc-pair{display:flex;gap:8px}
.calc-pair select{width:88px}
.calc-out{margin-top:16px;padding-top:16px;border-top:1.5px solid var(--p-grn-bd)}
.calc-out .big{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;display:block}
.calc-out .lab{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p-grn-tx);display:block;margin-bottom:4px}
.calc-out .sub{font-size:13.5px;line-height:1.55;margin-top:10px;display:block}
.calc-out .warn{color:var(--p-ros-tx);font-weight:600}
.calc-note{font-size:12px;line-height:1.55;margin-top:14px;color:var(--p-grn-tx)}
@media(max-width:600px){
  .calc{padding:16px}
  .calc-row input,.calc-row select{width:100%;flex:1}
  .calc-pair{width:100%}
  .calc-out .big{font-size:26px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v6 · RESTRAINT — her word Aug 23: "banners are so busy · we need restraint,
   editorial, hook words, direct sentences said with confidence · easy to read,
   subtext offers with tags, nice typography, white backgrounds and if black
   there is some contrast" + "i hate the coloured numbers, weak · the black
   with green is off".

   Two jobs. First: the headline is now 3-5 words everywhere, so it is set to
   be READ ACROSS A ROOM — big, tight, two lines, with the sentence that used
   to be in it demoted to a subtext line under a tag. Second: colour comes off
   the editorial chrome entirely. Black on white, white on black, one hairline.
   Grade signal survives as SHAPE — fill, outline, dash, dot — which reads at
   any size, in any light, and never goes weak the way a mid-green does.
   The pastel layer above is left in the file, overridden here by cascade, so a
   single revert of this block restores it.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. the opener. air, then one confident line ──────────────────────────── */
.band-open{padding:62px 0 48px}
.band-open .brow{margin-bottom:38px}
.band-open .kick{color:#fff;opacity:1}
.band-open h1{
  font-size:clamp(38px,5.6vw,76px);line-height:.97;letter-spacing:-.034em;
  text-transform:uppercase;max-width:18ch;margin:14px 0 0;font-weight:700}
.band-open .dek{
  max-width:52ch;margin:30px 0 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.28);color:#fff;font-size:13px;line-height:1.62}
@media(max-width:760px){
  .band-open{padding:38px 0 32px}
  .band-open .brow{margin-bottom:26px}
  .band-open h1{font-size:clamp(30px,8.6vw,46px);max-width:none;letter-spacing:-.028em}
  .band-open .dek{margin-top:24px;padding-top:16px;font-size:13.5px;max-width:none}
}
/* the home hero holds the same scale on a white ground */
.hero h1.display{font-size:clamp(38px,5.4vw,74px);line-height:.97;letter-spacing:-.034em;max-width:22ch}
@media(max-width:760px){.hero h1.display{font-size:clamp(30px,8.6vw,46px);max-width:none}}

/* ── 2. white ground. no wash, no drifting glow ───────────────────────────── */
.hero{background:#fff}
.hero::before,.hero::after{display:none}
.band.tint{background:#fbfbfb}
.deck .panel,.deck .notice,.deck .tile{background:#fff;backdrop-filter:none}
.stats{background:#fff}
.heromark *{stroke:#000!important}
.heromark circle{fill:#000!important}

/* ── 3. citations: black, and readable. a reference is not decoration ─────── */
article.post sup a{color:#000!important;font-weight:600;border-bottom:0!important;background:none!important}
article.post sup a:hover{background:#000!important;color:#fff!important}

/* ── 4. the answer strip: black ground, white type, nothing else ──────────── */
.answer{border:0;border-left:0;box-shadow:none;background:#000;padding:26px 26px 24px}
.answer p{color:#fff}
.answer strong,.answer strong:first-child,.answer p:first-child strong:first-child{color:#fff;font-weight:700}
.answer a{color:#fff;border-bottom:1px solid #fff;background:none!important}

/* ── 5. takeaways: white, one hairline, one black rule ────────────────────── */
.takeaways{background:#fff;border:1px solid #000;border-left:3px solid #000;box-shadow:none;padding:20px 22px}
.takeaways li{border-top-color:var(--hair)}
.takeaways .kick,.refs .kick{color:#000}

/* ── 6. the standfirst rule ───────────────────────────────────────────────── */
article.post .sf{border-left:2px solid #000;color:#000}

/* ── 7. body links: black, hairline, invert on hover ──────────────────────── */
article.post p a,article.post li a,article.post td a,.refs a{
  color:#000;border-bottom:1px solid #000;
  background-image:linear-gradient(#000,#000);background-size:0 1px}
article.post p a:hover,article.post li a:hover,article.post td a:hover{background-color:#000;color:#fff}
.sres mark,.sdrop mark{color:#000;background:#f4f4f4}

/* ── 8. grade signal as SHAPE, not hue ────────────────────────────────────── */
.g{box-shadow:none!important;background:#fff;border:1.5px solid #000;color:#000}
.g.A{background:#000;border-color:#000;color:#fff}
.g.B{background:#fff;border:1.5px solid #000;color:#000}
.g.C{background:#fff;border:1.5px dashed #000;color:#000}
.g.D{background:#fff;border:1px solid var(--ink-20);color:#000}
.g.E{background:#fff;border:1px dotted var(--ink-20);color:#000}
.g.X{background:#000;border-color:#000;color:#fff;text-decoration:line-through}
.g.BLK{background:repeating-linear-gradient(45deg,#fff,#fff 3px,#e2e2e2 3px,#e2e2e2 6px);border:1.5px solid #000;color:#000}
.ledger .lr:has(.g.A){border-left-color:#000}
.ledger .lr:has(.g.B){border-left-color:#000}
.ledger .lr:has(.g.C){border-left-color:var(--ink-20)}
.ledger .lr:has(.g.D),.ledger .lr:has(.g.E){border-left-color:var(--hair)}
.ledger .lr:has(.g.X){border-left-color:#000}
.ledger .lr:hover{background:#fafafa}
.evv{background:#fff;border:1px solid var(--ink-20);color:#000;box-shadow:none!important}
.evv.approved{background:#000;border-color:#000;color:#fff}
.evv.strong{background:#fff;border:1.5px solid #000;color:#000}
.evv.moderate{background:#fff;border:1.5px dashed #000;color:#000}
.evv.weak,.evv:not(.approved):not(.strong):not(.moderate){background:#fff;border:1px solid var(--ink-20);color:#000}

/* ── 9. the evidence board ────────────────────────────────────────────────── */
.arow .pill,.arow:not(:has(.pill.warn)):not(:has(.pill.flat)) .pill{
  background:#fff;border:1px solid #000;color:#000;box-shadow:none}
.arow .pill.warn{background:#fff;border:1.5px dashed #000;color:#000;box-shadow:none}
.arow .pill.flat{background:#fff;border:1px solid var(--ink-20);color:#000}
.arow::before{background:#000}
.arow:hover{background:#fafafa}
.arow:hover .pill{border-color:#000;color:#000;background:#fff;box-shadow:none}
.panel-head span::before{background:#fff}

/* ── 10. cards: a hairline, a black edge on approach, no glow ─────────────── */
.card:hover,.artrow:hover,.notice:hover,.tile:hover{border-color:#000;box-shadow:none}
.card.thumb .im,.artrow .im,.fo-next .im{border:1px solid var(--hair)}
.card.thumb:hover .im,.artrow:hover .im{border-color:#000;box-shadow:none}
.pepcard,.pepcard[data-cat]{border:1px solid var(--hair)!important;border-left:3px solid #000!important;box-shadow:none!important}
.pepcard:hover{border-color:#000!important;box-shadow:none!important}
.notice::after{display:none}
.notice:hover .flag{border-color:#000;color:#000}
.notice .flag,.hero-meta .badge{background:#fff;border:1px solid #000;color:#000;box-shadow:none}
.dot{background:#000}
.fig{box-shadow:none;border:1px solid var(--hair)}
.fig:hover{box-shadow:none;border-color:#000}
.tablewrap{box-shadow:none}
table.data tbody tr:hover{background:#fafafa}

/* ── 11. the rest of the green, retired ───────────────────────────────────── */
.sechead::after{background:#000}
nav.main a:not(.navcta)::after{background:#000}
nav.main a.navcta:hover{box-shadow:none}
.jump a.on{background:#000;box-shadow:none}
.chips a.on{background:#000;border-color:#000;box-shadow:none}
.chips a:hover{background:#fff;color:#000;border-color:#000}
.rankcard .no{background:#000;border-color:#000;box-shadow:none}
.pull{color:#000;border-color:#000}
.bridge{background:#fff;border:1px solid #000;box-shadow:none}
.bridge .stamp{border-color:#000;color:#000;background:#fff}
.bridge:hover{background:#000;color:#fff}
.bridge:hover .stamp{border-color:#fff;color:#fff}
.disclosure-inline{background:#fff;border:1px solid var(--hair)}
.stat:hover{background:#fafafa}
.stat:hover .n{color:#000}
.sres:hover,.sdrop a:hover,.sdrop a.on{background:#f4f4f4;color:#000}
footer.site .cols a:hover{color:#fff}
.fo-desk .row .vn:first-child,.score{color:#fff}
.calc{background:#fff;border:1px solid #000;box-shadow:none}
.calc-row{border-bottom-color:var(--hair)}
.calc-row label span,.calc-out .lab,.calc-note{color:#000}
.calc-row input,.calc-row select{border:1px solid #000}
.calc-row input:focus,.calc-row select:focus{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.1)}
.calc-out{border-top-color:#000}
.calc-out .warn{color:#000;font-weight:700;text-decoration:underline}

/* citations inside the black strip invert — black on black is not a citation */
article.post .answer sup a{color:#fff!important}
article.post .answer sup a:hover{background:#fff!important;color:#000!important}
.dark sup a,.band-open sup a{color:#fff!important}

/* ── 12. the palette itself, resolved to ink ───────────────────────────────────
   Every accent token in the file now points at black, white, or a hairline.
   This is what actually retires the green — the rules above only had to catch
   the places where a hue was hard-coded. Reverting the whole restraint pass is
   deleting the v6 block; the pastel definitions above it are untouched.        */
:root{
  --grn:#000; --grn-tint:#f4f4f4; --grn-line:#000; --signal:#fff;
  --amb:#000; --amb-tint:#f4f4f4; --amb-line:#000;
  --red:#000; --red-tint:#f4f4f4;
  --gry:#000; --gry-tint:#f4f4f4; --gry-line:#e2e2e2;
  --green:#000; --green-deep:#000; --green-tint:#f4f4f4; --green-line:#000;
  --c-weight:#000; --c-heal:#000; --c-long:#000; --c-cog:#000;
  --c-imm:#000; --c-gh:#000; --c-skin:#000;
  --p-grn:#000;  --p-grn-bd:#000;  --p-grn-bg:#fff;  --p-grn-tx:#000;  --p-grn-gl:transparent;
  --p-mint:#000; --p-mint-bd:#000; --p-mint-bg:#fff; --p-mint-tx:#000; --p-mint-gl:transparent;
  --p-amb:#000;  --p-amb-bd:#000;  --p-amb-bg:#fff;  --p-amb-tx:#000;  --p-amb-gl:transparent;
  --p-sla:#bdbdbd; --p-sla-bd:#e2e2e2; --p-sla-bg:#fff; --p-sla-tx:#000; --p-sla-gl:transparent;
  --p-ros:#000;  --p-ros-bd:#000;  --p-ros-bg:#fff;  --p-ros-tx:#000;  --p-ros-gl:transparent;
  --p-vio:#000;  --p-vio-bd:#000;  --p-vio-bg:#fff;  --p-vio-tx:#000;  --p-vio-gl:transparent;
  --p-blu:#000;  --p-blu-bd:#000;  --p-blu-bg:#fff;  --p-blu-tx:#000;  --p-blu-gl:transparent;
  --p-tea:#000;  --p-tea-bd:#000;  --p-tea-bg:#fff;  --p-tea-tx:#000;  --p-tea-gl:transparent;
  --p-pnk:#000;  --p-pnk-bd:#000;  --p-pnk-bg:#fff;  --p-pnk-tx:#000;  --p-pnk-gl:transparent;
  --p-yel:#000;  --p-yel-bd:#000;  --p-yel-bg:#fff;  --p-yel-tx:#000;  --p-yel-gl:transparent;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.1 · OPENER B — her pick, 23 Aug. The report opener goes to paper.
   White ground, pure black display, one hairline under the subtext and one
   under the whole block. The QUIET read: the headline carries the page, the
   band is not doing the work any more. Tags stay in ink [option 1].
   ══════════════════════════════════════════════════════════════════════════ */
.band-open{background:#fff;color:#000;border-bottom:1px solid #000}
.band-open .brow span,.band-open .kick,.band-open h1,.band-open .dek,
.band-open .dek b,.band-open .dek strong{color:#000}
.band-open .kick{opacity:1}
.band-open .dek{border-top:1px solid var(--hair)}
.band-open .bar,.band-open .stamp{border-color:#000;color:#000;background:transparent}
.band-open sup a{color:#000!important}
/* the breadcrumb no longer sits against a black wall — give it its own rule */
.crumb{border-bottom:1px solid var(--hair)}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.2 · THE TAGS CARRY THE COLOUR — her word 23 Aug: "we need the tags to carry
   the color on these articles, also have some glow sometimes."

   The colour is not decorative. Every document page carries a `data-hue` taken
   from the tile it already uses in the directory and the card rows, so the tag
   on the page and the icon on the card are the same three values. Skin is pink
   wherever skin appears. Supply is amber wherever supply appears.

   Index pages carry NO hue — she ruled tags in ink on the home deck [option 1],
   and that stands. Colour is what tells a document apart from a directory.
   ══════════════════════════════════════════════════════════════════════════ */
[data-hue="mint"]{--h-bg:#f0fdf9;--h-bd:#a7f3d0;--h-tx:#047857;--h-gl:rgba(52,211,153,.30)}
[data-hue="pnk"] {--h-bg:#fdf2f8;--h-bd:#fbcfe8;--h-tx:#be185d;--h-gl:rgba(236,72,153,.26)}
[data-hue="amb"] {--h-bg:#fffbeb;--h-bd:#fcd34d;--h-tx:#b45309;--h-gl:rgba(245,158,11,.28)}
[data-hue="ros"] {--h-bg:#fff1f2;--h-bd:#fda4af;--h-tx:#be123c;--h-gl:rgba(244,63,94,.26)}
[data-hue="grn"] {--h-bg:#ecfdf5;--h-bd:#86efac;--h-tx:#15803d;--h-gl:rgba(34,197,94,.28)}
[data-hue="tea"] {--h-bg:#f0fdfa;--h-bd:#99f6e4;--h-tx:#0f766e;--h-gl:rgba(20,184,166,.26)}
[data-hue="vio"] {--h-bg:#f5f3ff;--h-bd:#c4b5fd;--h-tx:#6d28d9;--h-gl:rgba(139,92,246,.26)}
[data-hue="blu"] {--h-bg:#eff6ff;--h-bd:#bfdbfe;--h-tx:#1d4ed8;--h-gl:rgba(59,130,246,.26)}
[data-hue="yel"] {--h-bg:#fefce8;--h-bd:#fde68a;--h-tx:#a16207;--h-gl:rgba(234,179,8,.26)}

/* ── the opener tag: a real chip, and the one place the glow is allowed ────── */
[data-hue] .band-open .kick{
  display:inline-block;margin:0 0 20px;padding:6px 11px 5px;
  background:var(--h-bg);border:1.5px solid var(--h-bd);color:var(--h-tx);
  box-shadow:0 0 0 3px var(--h-bg),0 0 18px var(--h-gl);
  letter-spacing:.09em;line-height:1.25}
[data-hue] .band-open .kick::before{content:"// "}
[data-hue] .band-open .kick::after{content:" //"}
@media(max-width:520px){
  [data-hue] .band-open .kick{white-space:normal;max-width:100%;padding:6px 9px 5px;letter-spacing:.06em}
}

/* ── section labels inside the document: colour only, no chip, no glow ────── */
[data-hue] article.post .kick,
[data-hue] .takeaways .kick,
[data-hue] .refs .kick,
[data-hue] .fanout .kick{color:var(--h-tx)}

/* ── the standfirst rule and the pull quote pick the hue up ───────────────── */
[data-hue] article.post .sf{border-left-color:var(--h-bd)}
[data-hue] .pull{color:var(--h-tx);border-color:var(--h-bd)}

/* ── the compound chips: hairline in the hue, glow only on approach ───────── */
[data-hue] .fanout .chips a{border-color:var(--h-bd);color:var(--h-tx)}
[data-hue] .fanout .chips a:hover{background:var(--h-bg);border-color:var(--h-bd);
  color:var(--h-tx);box-shadow:0 0 14px var(--h-gl)}

/* ── the takeaways box keeps its black frame, takes the hue on the rule ───── */
[data-hue] .takeaways{border-left-color:var(--h-bd)}

/* ── the bridge card, on approach ─────────────────────────────────────────── */
[data-hue] .bridge:hover{box-shadow:0 0 20px var(--h-gl)}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.3 · THE OPENER RISES TOO — her question 23 Aug: "hero slides, the rest
   doesn't, is that purposeful?"  Half of it was: `.rise` had only ever been
   wired to the home hero, so every article and compound opener sat still. Now
   they use the same staggered entrance.

   🔴 The half that IS purposeful, and stays: PROSE AND FIGURES NEVER FADE IN.
   A reveal runs on opacity, so any early snapshot — a crawler, a preview card,
   a headless render — can capture the paragraph blank. On a property whose
   whole claim is checkable text, that trade is never worth a flourish. Same
   reasoning as the numbers, which are also never animated.
   ══════════════════════════════════════════════════════════════════════════ */
.band-open .brow{animation:heroRise .7s cubic-bezier(.2,.7,.3,1) both}
.band-open .kick{animation:heroRise .7s cubic-bezier(.2,.7,.3,1) .07s both}
.band-open h1{animation:heroRise .72s cubic-bezier(.2,.7,.3,1) .13s both}
.band-open .dek{animation:heroRise .72s cubic-bezier(.2,.7,.3,1) .2s both}
.docrow .cell{animation:heroRise .6s cubic-bezier(.2,.7,.3,1) .26s both}
@media(prefers-reduced-motion:reduce){
  .band-open .brow,.band-open .kick,.band-open h1,.band-open .dek,.docrow .cell{animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.4 · ALL SCREENS — her word 23 Aug: "optimize for all screens."
   Measured at 320 · 360 · 375 · 390 · 414 · 430 · 500 · 600 · 768 · 834 · 900 ·
   1024 · 1180 · 1280 · 1440 · 1600 · 1920 across twelve page types. The document
   never scrolled sideways at any of them; what follows fixes the things that fit
   but read badly — a clipped nav, a flag stranded beside a tall block, a brow
   line splitting a two-word name in half.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the opener brow stacks before it can split "inside your / peptides" ───── */
@media(max-width:430px){
  .band-open .brow{flex-direction:column;gap:5px}
  .band-open .brow span{text-align:left}
}

/* ── the deck notice: on a phone the flag goes above the headline, not beside
      a block three lines tall with nothing under it ─────────────────────────── */
@media(max-width:560px){
  .notice{display:grid;grid-template-columns:1fr auto;gap:9px 10px;align-items:start}
  .notice .flag{grid-column:1;grid-row:1;justify-self:start}
  .notice>span:not(.flag):not(.go){grid-column:1/-1;grid-row:2}
  .notice .go{grid-column:2;grid-row:1;margin-left:0;align-self:start;line-height:1}
  /* the bare separator in the hero meta has nothing to separate once it wraps */
  .hero-meta>span:nth-child(3){display:none}
}

/* ── below 380 the header stops trying to be one row. Nothing is dropped;
      the wordmark takes its own line and the nav spreads underneath. ────────── */
@media(max-width:380px){
  .wrap{padding:0 14px}
  header.site .wrap{flex-wrap:wrap;height:auto;padding-top:9px;padding-bottom:9px;gap:7px}
  .wordmark{flex:1 0 100%;font-size:11px}
  nav.main{margin-left:0;width:100%;justify-content:space-between;gap:4px}
  nav.main a{font-size:9px;letter-spacing:.03em}
  nav.main a.navcta{font-size:8px;padding:5px 6px;letter-spacing:.02em}
  .band-open{padding:30px 0 26px}
  .band-open h1{font-size:clamp(26px,8.8vw,34px)}
  [data-hue] .band-open .kick{font-size:9px;padding:5px 8px 4px}
}

/* ── tablet: the search field stops truncating its own placeholder ─────────── */
@media(max-width:900px) and (min-width:721px){
  .hsearch{flex-basis:150px}
  .hsearch input::placeholder{font-size:0}
  .hsearch::after{content:"Search";font-size:9.5px;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;position:absolute;left:32px;pointer-events:none}
  .hsearch:focus-within::after{display:none}
}

/* ── very large screens: the measure is the measure, but the opener should not
      look marooned in the middle of a 1920 window ───────────────────────────── */
@media(min-width:1600px){
  .band-open{padding:74px 0 56px}
  .band-open h1{font-size:clamp(60px,4.4vw,84px)}
  .hero h1.display{font-size:clamp(60px,4.4vw,82px)}
}

/* the jump bar's sticky offset is measured, not guessed — site.js writes the
   header's real height into --hh on load and on resize, so the two bars meet
   exactly at every width instead of leaving a sliver or overlapping by a pixel */
.jump{top:var(--hh,56px)}

/* the document row goes to one column on the smallest phones — the values are
   set nowrap so a two-column grid clips "22 Aug 2026" rather than wrapping it */
@media(max-width:400px){
  .docrow .wrap{grid-template-columns:1fr}
  .docrow .cell,
  .docrow .cell:nth-child(odd){border-right:0;border-bottom:1px solid var(--hair);margin-right:0;padding:10px 0}
  .docrow .cell:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--hair)}
  .docrow .cell:last-child{border-bottom:0}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.5 · ONE LEFT EDGE — her question 23 Aug: the body copy does not stay aligned
   with the hero.

   It did not, and the arithmetic was exact. The page furniture — brow, headline,
   subtext, document row, jump bar, fan-out, footer — sits in a 1180px container.
   The reading column is capped at 780px for measure. Both were centred, so their
   left edges sat (1180 − 780) / 2 = 200px apart, and the page read as two
   documents stacked on each other.

   The measure is right and stays 780. What changes is that the column now hangs
   off the container's own left edge instead of finding its own centre, so every
   element on the page starts at the same x. One rule, no breakpoint: above 1180
   the margin resolves to the container's offset, below it collapses to zero and
   the column's own padding supplies the gutter.
   ══════════════════════════════════════════════════════════════════════════ */
article.post{margin-left:max(0px,calc(50% - 590px));margin-right:auto}

/* the wide ledger breaks out to the RIGHT only — hanging it left would reopen
   the same gap this block just closed */
@media(min-width:960px){
  .ledger{width:900px;margin-left:0;margin-right:calc(-1 * (900px - 100%))}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.6 · THE PHONE OPENER — her word 23 Aug: "mobile looks like a mess · less of
   a scroll to read · no headache to read", against thepeptidecatalog's article
   header.

   The document row is the lab-report signature and it stays. What it cannot do
   is be the whole first screen. Nine cells stacked two-up ran roughly 500px on
   a phone, so the reader met a spec sheet before a sentence. It now behaves like
   the jump bar directly beneath it: one strip, scrolled sideways, about 60px
   tall. Every cell survives. The reader gets to the standfirst in one screen.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .docrow .wrap{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:0;align-items:stretch;-webkit-overflow-scrolling:touch}
  .docrow .wrap::-webkit-scrollbar{display:none}
  .docrow .cell,
  .docrow .cell:nth-child(odd),
  .docrow .cell:nth-last-child(2):nth-child(odd){
    flex:0 0 auto;white-space:nowrap;
    border-right:1px solid var(--hair);border-bottom:0;
    margin-right:15px;padding:9px 15px 9px 0}
  .docrow .cell:last-child{border-right:0;margin-right:0;padding-right:28px}
  .docrow .cl{margin-bottom:2px}
  /* the opener itself gets its air back */
  .band-open{padding:26px 0 22px}
  .band-open .brow{margin-bottom:18px}
  [data-hue] .band-open .kick{margin-bottom:14px}
  .band-open .dek{margin-top:20px;padding-top:16px}
  /* the byline is the third meta strip in a row — it scrolls too rather than wrapping */
  .byline{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:14px;padding:9px 0}
  .byline::-webkit-scrollbar{display:none}
  .byline span{white-space:nowrap;flex:0 0 auto}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.7 · SENTENCE CASE — her pick 23 Aug, against thepeptidecatalog: "maybe the
   headline needs to read more like an article · no headache to read."

   Only the DISPLAY line changes case: the page headline and the section heads.
   The micro register — kickers, doc-row labels, jump bar, stamps, buttons,
   byline, in-article h2 labels — stays in tracked caps, because that is what
   separates furniture from writing. Caps at 10px is a label. Caps at 60px is a
   shout, and on a phone it costs a whole extra line.

   Tracking is retuned with it. -.034em was set for capitals, where the letters
   are all one height and can be pulled tight. Lowercase has ascenders and
   descenders doing that work already, so the same value closes the counters.
   ══════════════════════════════════════════════════════════════════════════ */
.band-open h1,
article.post h1,
.hero h1.display,
h1.display,
h2.sec{text-transform:none}

.band-open h1,article.post h1{letter-spacing:-.026em}
.hero h1.display,h1.display{letter-spacing:-.024em}
h2.sec{letter-spacing:-.018em}
@media(max-width:760px){
  .band-open h1{letter-spacing:-.022em}
  .hero h1.display,h1.display{letter-spacing:-.02em}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.8 · SCANNING — her word 23 Aug: "hyperlink, bold, underline as needed for
   easier read."

   Three jobs, and they have to stay distinguishable from each other. A link has
   to look clickable before it is hovered. Bold has to survive a page that is
   already set in a single weight. And neither can turn the prose into a ransom
   note, which is what happens when emphasis is applied by feel rather than by
   rule.

   The rule used here: a LINK is underlined and offset, always. BOLD marks the
   claim a skimmer needs and never the reason for it. Nothing else is decorated.
   ══════════════════════════════════════════════════════════════════════════ */

/* links: a real underline that clears the descenders, thickening on approach.
   border-bottom cannot do this — it sits below the box, not below the baseline */
article.post p a,article.post li a,article.post td a,.refs a,
.fo-desk p a,.disclosure-inline a{
  border-bottom:0!important;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-skip-ink:auto;
  font-weight:500;
  transition:text-decoration-thickness .12s ease,background-color .12s ease,color .12s ease}
article.post p a:hover,article.post li a:hover,article.post td a:hover,
.fo-desk p a:hover,.disclosure-inline a:hover{
  text-decoration-thickness:2px;background-color:#000;color:#fff;
  text-decoration-color:#fff;padding:0 2px;margin:0 -2px}
/* a reference marker is a marker, not a phrase — it keeps the tight treatment */
article.post sup a{text-decoration:none!important}

/* bold: the claim, at a weight that actually separates from 400 body copy */
article.post p strong,article.post li strong,article.post td strong,
.takeaways li strong{font-weight:700;color:#000}

/* the lead-in bold that opens a takeaway or a paragraph gets a hair more room
   after it, so the eye registers the break between claim and evidence */
.takeaways li strong:first-child{letter-spacing:-.004em}

/* underline as emphasis is reserved for one thing: a word the sentence turns on.
   Written as <u> in the markdown, never applied to a whole clause. */
article.post u{text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px;text-decoration-color:#000}

/* italic stays available for the one case it is right: a term being named
   rather than used. It is not an emphasis tool on this site. */
article.post em{font-style:italic;color:#000}

/* ══════════════════════════════════════════════════════════════════════════════
   v6.9 · LINKS THAT LOOK LIKE LINKS — her word 24 Aug: "i dont see any links
   anywhere."

   She was right, and it was worse than a styling problem. Every citation
   superscript pointed at an internal anchor — `#ref-7` — so a page with fifteen
   verified sources showed a reader nothing they could click through to. 458 of
   them across 8 reports now resolve to the source itself. This block is the
   other half: making them visible.

   A monochrome chrome is the right call for furniture. It is the wrong call for
   a link, because a link is not decoration — it is the one piece of a page that
   promises something on the other side of it. On a property whose entire claim
   is "we cite and we link out", an invisible link is a broken claim. So links
   get the one colour on the site, and outbound links say so with a mark.
   ══════════════════════════════════════════════════════════════════════════ */
:root{--link:#12459e;--link-hover:#0a2f70;--link-visited:#5b3a8c}

article.post p a,article.post li a,article.post td a,.refs a,.refs li a,
.fo-desk p a,.disclosure-inline a,article.post .sf a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  font-weight:500}
article.post p a:hover,article.post li a:hover,article.post td a:hover,.refs a:hover{
  color:#fff;background:var(--link-hover);text-decoration-color:#fff;
  text-decoration-thickness:2px;padding:0 2px;margin:0 -2px}

/* outbound says so. the mark is the tell that this site links off itself,
   which is the whole positioning, and it should be visible without a hover */
article.post p a[target="_blank"]::after,
article.post li a[target="_blank"]::after,
.refs a[target="_blank"]::after{
  content:"↗";font-size:.72em;line-height:0;vertical-align:.28em;margin-left:2px;
  text-decoration:none;display:inline-block}
article.post sup a::after,.refs a.pmid::after{content:none}

/* the citation marker: same colour, so a reader can see the page is sourced
   while scrolling, and clicking one lands on the study rather than a list */
article.post sup a,article.post sup a.cite{
  color:var(--link)!important;font-weight:700;
  text-decoration:underline!important;text-decoration-thickness:1px!important;
  text-underline-offset:2px}
article.post sup a:hover{background:var(--link-hover)!important;color:#fff!important}
article.post .answer sup a{color:#9dc4ff!important}
article.post .answer sup a:hover{background:#fff!important;color:var(--link-hover)!important}
article.post .answer a:not(sup a){color:#9dc4ff}

/* the reference list reads as a bibliography, not a wall */
ol.refs li{padding:7px 0;border-top:1px solid var(--hair);line-height:1.6}
ol.refs li:first-child{border-top:0}

/* the sourcing desk's copy column was running at roughly half its grid track,
   leaving a 400px void between the paragraph and the grade panel */
.vendor{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
.vendor > div:first-child p{max-width:none}
.vendor .vname{max-width:24ch}
@media(min-width:960px){.vendor{gap:56px}}

/* ══════════════════════════════════════════════════════════════════════════════
   v7 · ONE CENTRED COLUMN, AND THE BLACK BOX RETIRED — her word 24 Aug:
   "i dont like the content left aligned · this black box remove site wide and
   optimize via thepeptidecatalogue."

   v6.5 solved the two-edge problem by dragging the reading column out to the
   1180 container. That aligned them and left the page hugging its left rail.
   The other solution to the same equation is better: bring the OPENER in to the
   reading measure instead. Headline, subtext and body then share one centred
   column — which is what the reference does — while the document row and the
   jump bar stay full-bleed, because a band is not a column.

   The answer strip stays as a block: it is the passage answer engines lift, and
   deleting it would cost the thing this site is built to win. What goes is the
   black. It now reads as a lead paragraph — bigger type, rules above and below,
   nothing to look at but the sentence.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── one measure, centred ─────────────────────────────────────────────────── */
article.post{margin-left:auto;margin-right:auto}
.band-open .wrap{max-width:780px}
.byline{max-width:none}
/* the wide ledger breaks out symmetrically again, now that the column is centred */
@media(min-width:960px){
  .ledger{width:900px;margin-left:calc(50% - 450px);margin-right:0}
}

/* ── the lead, not a box ──────────────────────────────────────────────────── */
.answer{
  background:transparent!important;color:#000!important;
  border:0!important;border-top:2px solid #000!important;border-bottom:1px solid #000!important;
  box-shadow:none!important;padding:18px 0 20px!important;margin:4px 0 28px!important}
.answer p{color:#000!important;font-size:16.5px!important;line-height:1.62!important}
.answer strong,.answer strong:first-child,.answer p:first-child strong:first-child{
  color:#000!important;font-weight:700}
article.post .answer a,article.post .answer a:not(sup a){color:var(--link)!important}
article.post .answer sup a{color:var(--link)!important}
article.post .answer sup a:hover{background:var(--link-hover)!important;color:#fff!important}
.answer a{border-bottom:0!important}
@media(max-width:760px){.answer p{font-size:16px!important}}

/* ══════════════════════════════════════════════════════════════════════════
   v8 · THE COMPOUND SPINE [24 Aug 2026]
   Measured against thepeptidecatalog on the same compound: identical facts,
   6.5x our negation rate, one eighth the usage content. Their honesty sits in
   one column of a buyer's page; ours was the whole page. The fix is order and
   unit, not tone — grade the OUTCOME, and answer what it is used for before
   what it cannot prove. Two new components only; everything else reuses the
   ledger, the takeaways box, the FAQ and the reference list. Deleting this
   block reverts the compound pages to the v7 look with no other loss.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the uses ledger — same signature row, outcome-first ─────────────────── */
.ledger.uses .nm{font-size:14px;line-height:1.3}
.ledger.uses .sub{color:#000;opacity:.62}
.ledger.uses .lr{align-items:start}

/* ── mechanism: three steps, never a claim ──────────────────────────────── */
.mech{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid #000;border-bottom:1px solid #000;margin:18px 0 26px}
.mech .ms{padding:16px 18px 18px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:7px}
.mech .ms:last-child{border-right:0}
.mech .mn{font-family:var(--mono);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums slashed-zero}
.mech .mk{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mech .mt{font-size:12.5px;line-height:1.6}
@media(max-width:760px){
  .mech{grid-template-columns:1fr}
  .mech .ms{border-right:0;border-bottom:1px solid var(--hair);padding:14px 0}
  .mech .ms:last-child{border-bottom:0}
}

/* ── the spec rows — how it is used, what to expect, status ──────────────── */
.spec{border-top:2px solid #000;margin:18px 0 20px}
.spec .sr{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--hair);align-items:start}
.spec .sr:last-child{border-bottom:1px solid #000}
.spec .sk{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.spec .sv{font-size:13.5px;line-height:1.7}
.spec .chips.inline{display:inline-flex;flex-wrap:wrap;gap:6px;margin:0}
@media(max-width:640px){
  .spec .sr{grid-template-columns:1fr;gap:5px;padding:12px 0}
  .spec .sk{padding-top:0}
}

/* the descriptive-not-prescriptive note under the dosing block */
.fineprint{font-size:11.5px;line-height:1.65;opacity:.72;margin:-6px 0 22px;padding-left:12px;border-left:2px solid var(--hair)}

/* ── what it does not do — the takeaways box, inverted meaning ───────────── */
.takeaways.nope{border-left-color:#000}
.takeaways.nope .kick{color:#000}
/* The nav CTA was clipped off a phone. Measured at 390: nav.main ran to 419px
   with overflow visible and no scroll, so "The 2026 audit" sat 29px past the
   screen edge and could not be tapped. Below 430 the nav carries navigation
   only; the audit is reached from the page body. */
@media(max-width:430px){
  nav.main a.navcta{display:none}
  nav.main{gap:13px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v6.10 · MEDIUM BOLD — her word 24 Aug: "medium bold words to easy scan …
   try to stay on helvetica neue"

   Body bold was 700. At a 13.5-15px reading size that is heavier than emphasis
   needs to be: enough of it in a paragraph and the bold stops marking the claim
   and starts reading as noise, which is the opposite of scannable.

   600 is a real cut here, not a synthesised one — Helvetica Neue ships a Medium
   on macOS and iOS, so the weight maps to an actual face. Where the stack falls
   through to Arial [Windows], there is no 600 and the browser rounds back to
   700; those readers see what they see today. No webfont is added to fix that:
   a network-dependent face on a property whose claim is checkable text is a
   worse trade than an inconsistent bold.

   Two places keep 700 deliberately. The answer strip is white type on a black
   ground, where the extra weight is doing contrast work rather than emphasis
   work. Data cells and ledger rows are furniture, not prose.
   ══════════════════════════════════════════════════════════════════════════ */
/* Helvetica Neue has NO semibold. Its upright cuts are Regular 400, Medium 500,
   Bold 700 — verified against the installed faces, not assumed. So a plain
   font-weight:600 resolves UPWARD to Bold and changes nothing, which is what the
   first version of this block did. Asking for 500 instead would pick the real
   Medium here and then break everywhere Helvetica Neue is absent: Arial has no
   Medium either, and a request for 500 falls DOWN to Regular, so the emphasis
   would disappear entirely on Windows.

   Naming the face is what settles it. 'HN Emph' is a local()-only family — no
   network request, no webfont, still a system font — declared AS weight 600.
   Where Helvetica Neue Medium exists the browser matches it exactly and renders
   a true Medium with no synthetic emboldening. Where it does not, the family is
   simply unavailable, the stack falls through to Arial, and 600 rounds up to
   Bold as before. Both platforms keep visible emphasis; only the Mac gets the
   lighter cut, which is the one that was too heavy. */
@font-face{font-family:'HN Emph';src:local('HelveticaNeue-Medium'),local('Helvetica Neue Medium');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'HN Emph';src:local('HelveticaNeue-MediumItalic'),local('Helvetica Neue Medium Italic');font-weight:600;font-style:italic;font-display:swap}
article.post strong,article.post b{font-family:'HN Emph','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600}
article.post .answer strong{font-family:var(--sans);font-weight:700}
article.post table.data td strong,article.post .ledger .tx strong{font-family:var(--sans);font-weight:700}