/* Hub site styles. Light/dark via prefers-color-scheme. */
:root{
  --bg:#f4f1ea; --surface:#fbf9f5; --ink:#132a28; --ink-2:#3c4f4c; --ink-3:#6b7a77;
  --line:rgba(19,42,40,.14); --accent:#b4532f; --accent-ink:#fff; --accent-soft:rgba(180,83,47,.1);
  --ga:#1f6b4f; --gb:#3e6aa0; --gc:#9a6a12; --gd:#a2382f;
  --serif:'Newsreader',Georgia,serif; --sans:'IBM Plex Sans',system-ui,sans-serif;
  --max:1120px; --text:720px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1a19; --surface:#152321; --ink:#e9efe9; --ink-2:#bccac6; --ink-3:#8a9b97;
    --line:rgba(233,239,233,.14); --accent:#e0805c; --accent-ink:#1a0d07; --accent-soft:rgba(224,128,92,.14);
    --ga:#5fc49b; --gb:#86b0e6; --gc:#e2b552; --gd:#ec8279;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--sans);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kicker{font:600 .72rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 .8rem}
.kicker a{text-decoration:none}

/* header */
.site-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem max(16px,calc((100vw - var(--max))/2));background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font:500 1.35rem/1 var(--serif);letter-spacing:.01em;text-decoration:none;margin:0}
.site-nav{display:flex;gap:1.3rem;align-items:center;font-size:.86rem;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{text-decoration:none;color:var(--ink-2)}
.site-nav a:hover{color:var(--accent)}
.site-nav .nav-cta{color:var(--accent-ink);background:var(--accent);padding:.45rem .9rem;border-radius:999px}
.site-nav .nav-cta:hover{color:var(--accent-ink);filter:brightness(1.08)}

main{display:block}
/* one content grid: every full-width block shares the same edges as the header */
.hero,.layers,.latest,.promise,.nl{width:min(var(--max),calc(100% - 32px));margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.page-head{padding-left:16px;padding-right:16px}
.nl{padding:clamp(1.6rem,4vw,3rem)}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding-top:clamp(3rem,9vw,7rem);padding-bottom:3rem}
.hero h1{font:400 clamp(2.3rem,6vw,4.6rem)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 1.4rem;max-width:15ch}
.hero h1 em{color:var(--accent);font-style:italic}
.lede{font:300 clamp(1.1rem,2vw,1.35rem)/1.6 var(--serif);color:var(--ink-2);max-width:60ch;margin:0 0 1.8rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;font:500 .9rem/1 var(--sans);text-decoration:none;padding:.9rem 1.3rem;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink)}

/* layers */
.layers{max-width:var(--max);margin:0 auto 4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0}
.layer{background:var(--surface);padding:1.8rem;text-decoration:none;display:block;transition:background .2s}
.layer:hover{background:var(--accent-soft)}
.layer h3{font:400 1.6rem/1.15 var(--serif);margin:0 0 .6rem}
.layer p{margin:0;color:var(--ink-2);font-size:.95rem}

/* cards */
.latest{max-width:var(--max);margin:0 auto 4rem}
.latest h2{font:400 2rem/1.1 var(--serif);margin:0 0 1.4rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.card{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1.5rem;text-decoration:none;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.card h3{font:400 1.4rem/1.2 var(--serif);margin:0}
.card p{margin:0;color:var(--ink-2);font-size:.93rem;flex:1}
.card-layer{font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.card-meta{font-size:.8rem;color:var(--ink-3);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.empty{color:var(--ink-3)}

/* grades */
.grade{display:inline-block;font:600 .72rem/1 var(--sans);padding:.32rem .55rem;border-radius:6px;white-space:nowrap;border:1px solid currentColor}
.g-a{color:var(--ga)} .g-b{color:var(--gb)} .g-c{color:var(--gc)} .g-d{color:var(--gd)}
.promise{max-width:var(--max);margin:0 auto 4rem;display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start;
  border-top:1px solid var(--line);padding-top:3rem}
.promise h2{font:400 2.2rem/1.1 var(--serif);margin:0 0 1rem}
.promise p{color:var(--ink-2)}
.grade-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.grade-list li{display:grid;grid-template-columns:8.5rem 1fr;gap:.8rem;align-items:baseline;font-size:.93rem;color:var(--ink-2)}

/* newsletter */
.nl{max-width:var(--max);margin:0 auto 5rem;display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;
  background:var(--ink);color:var(--bg);border-radius:18px;padding:clamp(1.6rem,4vw,3rem)}
.nl .kicker{color:var(--accent)}
.nl h2{font:400 clamp(1.7rem,3vw,2.3rem)/1.1 var(--serif);margin:0 0 .6rem}
.nl p{margin:0;opacity:.8}
.nl-form{display:flex;gap:.5rem;flex-wrap:wrap}
.nl-form input{flex:1 1 200px;min-width:0;font:400 1rem var(--sans);padding:.85rem 1rem;border-radius:999px;border:1px solid transparent;background:var(--bg);color:var(--ink)}
.nl-form button{font:500 .95rem var(--sans);padding:.85rem 1.3rem;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer}
.nl-soon{font:300 1.2rem var(--serif);opacity:.85}

/* page + article */
.page-head,.article-head{max-width:var(--text);margin:0 auto;padding-top:clamp(2.5rem,7vw,5rem);padding-bottom:1.5rem}
.page-head h1,.article-head h1{font:400 clamp(2rem,5vw,3.3rem)/1.08 var(--serif);letter-spacing:-.015em;margin:0 0 1rem}
.byline{font-size:.85rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:1rem;margin:0}
.article{padding:0}
.article>*{max-width:var(--text);margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.coi{background:var(--accent-soft);border-left:3px solid var(--accent);padding:1rem 1.2rem;font-size:.92rem;border-radius:0 8px 8px 0}
.evidence{margin-top:1.5rem;margin-bottom:2rem}
.evidence .kicker{color:var(--ink-3)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
tr:last-child td{border-bottom:0}
.ev-note{font-size:.82rem;color:var(--ink-3);margin:.7rem 0 0}
.keypoints{border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:2rem}
.keypoints ul{margin:0;padding-left:1.1rem}
.keypoints li{margin:.35rem 0;color:var(--ink-2)}
.prose{font-size:1.03rem}
.prose h2{font:400 1.9rem/1.2 var(--serif);margin:2.6rem 0 .8rem}
.prose h3{font:500 1.3rem/1.3 var(--serif);margin:2rem 0 .6rem}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent)}
.prose table{margin:1.5rem 0;border:1px solid var(--line);border-radius:12px;display:block;overflow-x:auto}
.cite{font-size:.7em;line-height:0}
.cite a{color:var(--accent);text-decoration:none}
.page-prose{max-width:var(--text);margin:0 auto 3rem;padding:0 16px}
.route{margin-top:2.5rem;margin-bottom:2.5rem;border:1px solid var(--accent);border-radius:14px;padding:1.4rem 1.5rem;background:var(--surface)}
.route p{color:var(--ink-2);margin:0 0 1rem}
.route .kicker{margin-bottom:.5rem}
.refs{border-top:1px solid var(--line);padding-top:1.5rem;margin-bottom:3rem}
.refs .kicker{color:var(--ink-3)}
.refs ol{padding-left:1.3rem;font-size:.85rem;color:var(--ink-3)}
.refs li{margin:.5rem 0;scroll-margin-top:5rem}
.refs a{color:var(--accent);word-break:break-all}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:2.5rem max(16px,calc((100vw - var(--max))/2)) 2rem;font-size:.88rem;color:var(--ink-3)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:1.5rem}
.foot-grid div:last-child{display:flex;flex-direction:column;gap:.4rem}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--accent)}
.fine{font-size:.78rem;margin:0}

@media (max-width:820px){
  .layers,.promise,.nl,.foot-grid{grid-template-columns:1fr}
  .site-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  .site-nav{gap:.9rem;justify-content:flex-start;font-size:.82rem}
  .grade-list li{grid-template-columns:1fr;gap:.3rem}
  .grade-list .grade{justify-self:start}
  .cards{grid-template-columns:1fr}
}

/* verdict + share */
.verdict-box{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:1rem 1.2rem;background:var(--surface)}
.verdict-box .kicker{margin:0;width:100%}
.verdict-claim{font:400 1.35rem/1.3 var(--serif);margin:0;flex:1 1 280px}
.share{border-top:1px solid var(--line);padding-top:1.2rem;margin-bottom:2rem}
.share .kicker{color:var(--ink-3)}
.share-links{display:flex;flex-wrap:wrap;gap:.5rem}
.share-links a{font-size:.85rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;color:var(--ink-2)}
.share-links a:hover{border-color:var(--accent);color:var(--accent)}
.verdict-table td:first-child{white-space:nowrap}