/* ============================================================
   AI Frontier Post — Unified Design System v2
   One editorial language for the homepage, articles,
   categories, and about. Warm paper · ink · serif display.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --paper:#faf9f6;
  --paper-2:#f2efe7;
  --card:#ffffff;
  --ink:#181410;
  --ink-soft:#2c2620;
  --muted:#6f675c;
  --faint:#9a9184;
  --line:#e4ded1;
  --line-soft:#ede8db;
  --accent:#4d46e5;
  --accent-deep:#3730b8;
  --accent-soft:#eeedfe;
  --accent-ink:#ffffff;
  --gold:#c98a1b;
  --good:#1d7a4c;
  --shadow:0 1px 2px rgba(24,20,16,.05),0 12px 32px -12px rgba(24,20,16,.16);
  --shadow-lg:0 2px 4px rgba(24,20,16,.06),0 24px 48px -16px rgba(24,20,16,.22);
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:68ch;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141210;
    --paper-2:#1c1a17;
    --card:#1d1b18;
    --ink:#f3f0e9;
    --ink-soft:#d9d4c8;
    --muted:#a8a094;
    --faint:#7d766a;
    --line:#2e2b25;
    --line-soft:#26241f;
    --accent:#8f88ff;
    --accent-deep:#a9a4ff;
    --accent-soft:#232147;
    --accent-ink:#141210;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 36px -12px rgba(0,0,0,.5);
    --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 28px 56px -16px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
html[data-theme="light"]{
  --paper:#faf9f6; --paper-2:#f2efe7; --card:#ffffff;
  --ink:#181410; --ink-soft:#2c2620; --muted:#6f675c; --faint:#9a9184;
  --line:#e4ded1; --line-soft:#ede8db;
  --accent:#4d46e5; --accent-deep:#3730b8; --accent-soft:#eeedfe; --accent-ink:#ffffff;
  --shadow:0 1px 2px rgba(24,20,16,.05),0 12px 32px -12px rgba(24,20,16,.16);
  --shadow-lg:0 2px 4px rgba(24,20,16,.06),0 24px 48px -16px rgba(24,20,16,.22);
  color-scheme:light;
}
html[data-theme="dark"]{
  --paper:#141210; --paper-2:#1c1a17; --card:#1d1b18;
  --ink:#f3f0e9; --ink-soft:#d9d4c8; --muted:#a8a094; --faint:#7d766a;
  --line:#2e2b25; --line-soft:#26241f;
  --accent:#8f88ff; --accent-deep:#a9a4ff; --accent-soft:#232147; --accent-ink:#141210;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 36px -12px rgba(0,0,0,.5);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 28px 56px -16px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* Category accents */
:root{
  --c-ai-news:#2563eb; --c-research:#7c3aed; --c-frontier-labs:#0d9488;
  --c-reviews:#b45309; --c-tutorials:#1d7a4c;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
input{font:inherit}
::selection{background:var(--accent); color:var(--accent-ink)}
.wrap{width:min(1200px,calc(100% - 40px)); margin-inline:auto}
.wrap-narrow{width:min(860px,calc(100% - 40px)); margin-inline:auto}

/* ---------- Utility bar ---------- */
.utility{
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.utility .wrap{min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.utility b{color:var(--ink); font-weight:600}
.utility .u-dot{margin:0 8px; color:var(--faint)}
@media(max-width:640px){.utility .u-tag{display:none}}

/* ---------- Masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.masthead-in{display:flex; align-items:center; gap:20px; min-height:66px; padding-block:8px}
.wordmark{
  font-family:var(--font-display); font-weight:760; font-size:23px;
  letter-spacing:-.015em; line-height:1; white-space:nowrap; color:var(--ink);
}
.wordmark em{font-style:italic; color:var(--accent); font-weight:560}
.mastnav{display:flex; align-items:center; gap:2px; margin-inline:auto; overflow-x:auto; scrollbar-width:none}
.mastnav::-webkit-scrollbar{display:none}
.mastnav a{
  font-size:13.5px; font-weight:500; color:var(--muted);
  padding:8px 11px; border-radius:999px; white-space:nowrap;
  transition:color .15s, background .15s;
}
.mastnav a:hover{color:var(--ink); background:var(--paper-2)}
.mastnav a.active{color:var(--ink); background:var(--paper-2); font-weight:600}
.mast-actions{display:flex; align-items:center; gap:8px; margin-left:auto}
.icon-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; color:var(--ink-soft);
  background:var(--card); transition:border-color .15s, transform .15s;
}
.icon-btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.btn-brief{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ink); color:var(--paper);
  font-size:13px; font-weight:600; padding:10px 18px; border-radius:999px;
  transition:transform .15s, box-shadow .15s, background .15s; white-space:nowrap;
}
.btn-brief:hover{transform:translateY(-1px); box-shadow:var(--shadow); background:var(--accent); color:var(--accent-ink)}
@media(max-width:900px){
  .masthead-in{flex-wrap:wrap; gap:10px; padding-block:10px}
  .mastnav{order:3; width:100%; margin:0; padding-bottom:2px}
  .mast-actions{margin-left:auto}
}
@media(max-width:480px){ .btn-brief span{display:none} .btn-brief{padding:10px 13px} }

/* ---------- Reading progress ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:60}

/* ---------- Kickers, chips, meta ---------- */
.kicker{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px;
}
.kicker::before{content:""; width:22px; height:2px; background:var(--accent); border-radius:2px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--muted);
}
.chip::before{content:""; width:7px; height:7px; border-radius:99px; background:var(--faint)}
.chip.ai-news{color:var(--c-ai-news); border-color:color-mix(in srgb,var(--c-ai-news) 35%, transparent)}
.chip.ai-news::before{background:var(--c-ai-news)}
.chip.research{color:var(--c-research); border-color:color-mix(in srgb,var(--c-research) 35%, transparent)}
.chip.research::before{background:var(--c-research)}
.chip.frontier-labs{color:var(--c-frontier-labs); border-color:color-mix(in srgb,var(--c-frontier-labs) 35%, transparent)}
.chip.frontier-labs::before{background:var(--c-frontier-labs)}
.chip.reviews{color:var(--c-reviews); border-color:color-mix(in srgb,var(--c-reviews) 35%, transparent)}
.chip.reviews::before{background:var(--c-reviews)}
.chip.tutorials{color:var(--c-tutorials); border-color:color-mix(in srgb,var(--c-tutorials) 35%, transparent)}
.chip.tutorials::before{background:var(--c-tutorials)}
.sponsored-badge{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px dashed var(--gold); border-radius:999px; padding:5px 11px; margin-left:8px;
}
.meta{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.meta .m-dot{color:var(--faint)}
.avatar{
  width:34px; height:34px; border-radius:999px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:var(--accent-ink); font-size:12px; font-weight:700; letter-spacing:.02em;
}

/* ---------- Section scaffolding ---------- */
.section{padding:44px 0 8px}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.section-head h2{
  font-family:var(--font-display); font-weight:680; font-size:clamp(24px,3vw,32px);
  letter-spacing:-.02em; margin:0; line-height:1.1;
}
.section-head .kicker{margin-bottom:10px}
.link-arrow{
  font-size:13.5px; font-weight:600; color:var(--accent); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; padding:6px 0;
}
.link-arrow:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------- Hero ---------- */
.hero{padding:34px 0 10px}
.hero-grid{display:grid; grid-template-columns:1.9fr 1fr; gap:26px; align-items:stretch}
.lead-card{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--card); transition:transform .2s, box-shadow .2s;
}
.lead-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.lead-card .story-image{aspect-ratio:16/8.6; width:100%; object-fit:cover; display:block}
.lead-card .abstract-cover{aspect-ratio:16/8.6}
.lead-card .story-text{padding:26px 28px 28px; display:flex; flex-direction:column; gap:12px}
.lead-card h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(30px,3.6vw,46px); line-height:1.06; margin:0;
}
.lead-card h1:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; text-decoration-color:var(--accent)}
.lead-card .lede{font-size:16.5px; color:var(--muted); margin:0; line-height:1.6}
.story-text .chip-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.hero-side{display:flex; flex-direction:column; gap:0}
.side-title{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:2px 0 12px;
  display:flex; align-items:center; gap:10px;
}
.side-title::after{content:""; flex:1; height:1px; background:var(--line)}
.stack{display:flex; flex-direction:column; gap:14px}
.stack-card{
  display:grid; grid-template-columns:112px 1fr; gap:14px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
  padding:10px; transition:transform .18s, box-shadow .18s;
}
.stack-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.stack-card .story-image, .stack-card .abstract-cover{width:112px; height:88px; border-radius:10px; object-fit:cover}
.stack-card h2{font-family:var(--font-display); font-size:17.5px; font-weight:640; letter-spacing:-.01em; line-height:1.25; margin:6px 0 6px}
.stack-card .meta{font-size:12px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ---------- Covers ---------- */
.story-image{display:block; background:var(--paper-2)}
.abstract-cover{
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:var(--font-display); font-weight:700; color:rgba(255,255,255,.92);
  background:linear-gradient(135deg,var(--accent-deep),var(--accent) 60%,#7c6cf0);
  position:relative;
}
.abstract-cover::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,.22), transparent 46%);
}
.abstract-cover::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size:18px 18px;
}
.abstract-cover span{position:relative; font-size:44px; letter-spacing:-.02em}
.stack-card .abstract-cover span, .river-card .abstract-cover span{font-size:26px}
html[data-theme="dark"] .abstract-cover, @media (prefers-color-scheme:dark){}

/* ---------- Cards ---------- */
.cardlink{display:block}
.category-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.category-card, .river-card{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s;
}
.category-card:hover, .river-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.category-card .story-image, .category-card .abstract-cover{aspect-ratio:16/9.4; width:100%; object-fit:cover}
.category-card>div, .river-card>div{padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1}
.category-card h3, .river-card h3{
  font-family:var(--font-display); font-size:20px; font-weight:660; letter-spacing:-.015em;
  line-height:1.28; margin:0;
}
.category-card p, .river-card p{font-size:14px; color:var(--muted); margin:0; line-height:1.6; flex:1}
@media(max-width:900px){.category-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.category-grid{grid-template-columns:1fr}}

/* ---------- Latest river + sidebar ---------- */
.content-grid{display:grid; grid-template-columns:1fr 320px; gap:34px; align-items:start}
.river{display:flex; flex-direction:column; gap:0}
.river-card{
  flex-direction:row; gap:0; border:0; border-bottom:1px solid var(--line);
  border-radius:0; background:transparent; padding:20px 0;
}
.river-card:first-child{padding-top:4px}
.river-card:hover{transform:none; box-shadow:none}
.river-card .story-image, .river-card .abstract-cover{
  width:200px; height:132px; flex:none; border-radius:12px; object-fit:cover;
}
.river-card>div{padding:2px 0 2px 20px; gap:8px}
.river-card h3{font-size:21px}
.river-card h3:hover{text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px}
@media(max-width:600px){
  .river-card .story-image, .river-card .abstract-cover{width:120px; height:96px}
  .river-card h3{font-size:17px}
  .river-card p{display:none}
}
.sidebar{position:sticky; top:96px; display:flex; flex-direction:column; gap:26px}
.trend-list{display:flex; flex-direction:column}
.trend{
  display:grid; grid-template-columns:44px 1fr; gap:6px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.trend:last-child{border-bottom:0}
.trend b{
  font-family:var(--font-display); font-style:italic; font-size:22px; font-weight:560;
  color:var(--faint); line-height:1;
}
.trend:hover b{color:var(--accent)}
.trend h3{font-family:var(--font-display); font-size:16.5px; font-weight:620; letter-spacing:-.01em; line-height:1.32; margin:0}
.trend:hover h3{text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}
.newsletter-mini{
  border:1px solid var(--line); border-radius:var(--r-md); padding:22px;
  background:linear-gradient(160deg, var(--accent-soft), var(--card) 70%);
}
.newsletter-mini h3{font-family:var(--font-display); font-size:20px; font-weight:680; margin:0 0 6px; letter-spacing:-.01em}
.newsletter-mini p{font-size:13.5px; color:var(--muted); margin:0 0 14px}
.btn-accent{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  font-size:13.5px; font-weight:600; padding:11px 20px; border-radius:999px;
  transition:transform .15s, box-shadow .15s, background .15s; width:100%;
}
.btn-accent:hover{transform:translateY(-1px); box-shadow:var(--shadow); background:var(--accent-deep)}
@media(max-width:900px){.content-grid{grid-template-columns:1fr}.sidebar{position:static}}

/* ---------- Benchmarks ---------- */
.bench-section .section-head{flex-wrap:wrap}
.bench-updated{
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; background:var(--card); white-space:nowrap;
}
.bench-lede{font-size:15px; color:var(--muted); max-width:76ch; margin:0 0 20px; line-height:1.65}
.bench-lede b{color:var(--ink)}
.bench-card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card);
  padding:26px clamp(18px,3vw,30px); box-shadow:var(--shadow);
}
.bench-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px; flex-wrap:wrap}
.bench-kicker{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px;
}
.bench-card-head h3{
  font-family:var(--font-display); font-size:clamp(20px,2.4vw,26px); font-weight:680;
  letter-spacing:-.015em; margin:0; line-height:1.2;
}
.bench-info{
  font-size:13px; font-weight:600; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding:9px 16px; border-radius:999px; white-space:nowrap;
  transition:background .15s, color .15s;
}
.bench-info:hover, .bench-info.open{background:var(--accent); color:var(--accent-ink)}
.bench-explainer{
  border-left:3px solid var(--accent); background:var(--paper-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:16px 18px; margin:14px 0 6px;
  font-size:14px; color:var(--ink-soft);
}
.bench-explainer p{margin:0 0 10px}.bench-explainer p:last-child{margin:0}
.bench-explainer b{color:var(--ink)}
.bench-table{list-style:none; margin:14px 0 6px; padding:0}
.bench-table li{
  display:grid; grid-template-columns:30px minmax(150px,220px) 1fr 76px; gap:14px; align-items:center;
  padding:10px 4px; border-bottom:1px solid var(--line-soft); font-size:14.5px;
}
.bench-table li:last-child{border-bottom:0}
.b-rank{font-family:var(--font-mono); font-size:12px; color:var(--faint); font-weight:500}
.b-model{font-weight:600; line-height:1.3}
.b-model small{display:block; font-weight:400; color:var(--muted); font-size:12px}
.b-bar{height:8px; background:var(--paper-2); border-radius:99px; overflow:hidden; min-width:60px}
.b-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent-deep),var(--accent))}
.bench-table li:first-child .b-bar i{background:linear-gradient(90deg,var(--gold),#e8b23f)}
.b-score{font-family:var(--font-mono); font-size:13.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.bench-note{
  font-size:12.5px; color:var(--muted); background:var(--paper-2);
  border-radius:var(--r-sm); padding:10px 14px; margin:12px 0 0; line-height:1.6;
}
.bench-src{font-size:12.5px; color:var(--faint); margin:12px 0 0}
.bench-src a{color:var(--accent); font-weight:600}
.bench-src a:hover{text-decoration:underline}
.bench-more{
  display:inline-flex; align-items:center; gap:10px; margin-top:18px;
  font-size:14px; font-weight:600; color:var(--ink);
  border:1px solid var(--line); background:var(--card); padding:12px 22px; border-radius:999px;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.bench-more:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow)}
.bench-more span{
  width:22px; height:22px; border-radius:99px; background:var(--ink); color:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1;
}
.bench-pills{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 4px}
.bench-pill{
  font-size:13px; font-weight:600; padding:9px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  transition:all .15s;
}
.bench-pill:hover{border-color:var(--accent); color:var(--ink)}
.bench-pill.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.bench-rest .bench-panel{margin-top:14px}
.bench-foot{font-size:12.5px; color:var(--faint); max-width:90ch; margin:18px 0 0; line-height:1.65}
@media(max-width:640px){
  .bench-table li{grid-template-columns:24px 1fr 64px; gap:10px}
  .b-bar{display:none}
}

/* ---------- Newsletter band ---------- */
.newsletter-band{
  margin-top:56px; background:var(--ink); color:var(--paper);
  border-radius:var(--r-lg); overflow:hidden; position:relative;
}
.newsletter-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 12% 20%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%),
    radial-gradient(500px 260px at 88% 85%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
}
.newsletter-band .wrap{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:26px; padding-block:52px; flex-wrap:wrap;
}
.newsletter-band h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(26px,3.4vw,40px); line-height:1.1; margin:0 0 10px;
}
.newsletter-band h2 em{font-style:italic; color:var(--accent-deep)}
html[data-theme="dark"] .newsletter-band h2 em{color:var(--accent)}
.newsletter-band p{color:color-mix(in srgb, var(--paper) 72%, transparent); margin:0; font-size:15.5px; max-width:52ch}
.notify-note{
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid color-mix(in srgb, var(--paper) 30%, transparent); color:var(--paper);
  padding:14px 26px; border-radius:999px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:10px;
}
.notify-note::before{content:""; width:8px; height:8px; border-radius:99px; background:var(--accent-deep); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Footer ---------- */
.footer{margin-top:64px; border-top:1px solid var(--line); background:var(--paper-2)}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px;
  padding:48px 0 36px;
}
.foot-brand p{font-size:14px; color:var(--muted); margin:14px 0; max-width:34ch; line-height:1.65}
.foot-mail{font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--accent)}
.foot-mail:hover{text-decoration:underline}
.foot-col h4{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}
.foot-col a{display:block; font-size:14px; color:var(--ink-soft); padding:5px 0}
.foot-col a:hover{color:var(--accent)}
.foot-col p{font-size:13.5px; color:var(--muted); margin:0 0 14px; line-height:1.6}
.foot-base{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding:18px 0 22px;
  font-size:12.5px; color:var(--faint);
}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr; gap:26px}}

/* ---------- Article pages ---------- */
.crumb{font-size:13px; color:var(--muted); margin:26px 0 18px}
.crumb a{color:var(--accent); font-weight:600}
.crumb a:hover{text-decoration:underline}
.post-header, .article-head{max-width:var(--measure); margin:0 auto; text-align:left}
.post-header .chip-row, .article-head .chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.post-header h1, .article-head h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(32px,4.6vw,50px); line-height:1.08; margin:0 0 16px;
}
.lede{font-size:19px; line-height:1.65; color:var(--muted); margin:0 0 20px; max-width:var(--measure)}
.byline{
  display:flex; align-items:center; gap:12px; padding:16px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:30px; font-size:14px; color:var(--muted); max-width:var(--measure);
}
.byline .who{display:flex; flex-direction:column; gap:1px}
.byline .who b{color:var(--ink); font-weight:600}
.byline .who span{font-size:12.5px}
.hero-art{max-width:1000px; margin:0 auto 34px}
.hero-art img, .hero-art .abstract-cover{border-radius:var(--r-lg); width:100%}
.hero-art img{aspect-ratio:21/10; object-fit:cover; display:block}
.hero-art .abstract-cover{aspect-ratio:21/10}
.hero-art .abstract-cover span{font-size:64px}
.article-layout{display:grid; grid-template-columns:220px minmax(0,var(--measure)); gap:44px; justify-content:center; align-items:start}
.toc{position:sticky; top:96px; font-size:13.5px}
.toc b{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px;
}
.toc a{display:block; color:var(--muted); padding:6px 0 6px 14px; border-left:2px solid var(--line); line-height:1.45}
.toc a:hover{color:var(--accent); border-color:var(--accent)}
.article-body{font-size:17.5px; line-height:1.78; color:var(--ink-soft); min-width:0}
.article-body>*:first-child{margin-top:0}
.article-body p{margin:0 0 1.4em}
.article-body h2{
  font-family:var(--font-display); font-size:29px; font-weight:680; letter-spacing:-.015em;
  color:var(--ink); line-height:1.25; margin:1.8em 0 .6em;
}
.article-body h3{font-family:var(--font-display); font-size:22px; font-weight:660; color:var(--ink); margin:1.6em 0 .5em; letter-spacing:-.01em}
.article-body h2 .anchor, .article-body h3 .anchor{opacity:0; margin-left:8px; color:var(--accent); text-decoration:none; font-size:.7em}
.article-body h2:hover .anchor, .article-body h3:hover .anchor{opacity:1}
.article-body ul, .article-body ol{margin:0 0 1.4em; padding-left:26px}
.article-body li{margin-bottom:.55em}
.article-body li::marker{color:var(--accent)}
.article-body a{color:var(--accent); font-weight:500; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 40%, transparent); text-underline-offset:3px}
.article-body a:hover{text-decoration-color:var(--accent)}
.article-body strong{color:var(--ink)}
.article-body blockquote{
  margin:1.8em 0; padding:6px 0 6px 22px; border-left:3px solid var(--accent);
  font-family:var(--font-display); font-size:21px; font-style:italic; line-height:1.55; color:var(--ink);
}
.article-body img{border-radius:var(--r-md); display:block; margin:1.6em auto}
.article-body figure{margin:1.8em 0}
.article-body figcaption{font-size:13px; color:var(--faint); text-align:center; margin-top:8px}
.article-body pre{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:18px 20px; overflow-x:auto; font-size:13.5px; line-height:1.65; margin:0 0 1.6em;
  font-family:var(--font-mono);
}
.article-body code{font-family:var(--font-mono); font-size:.86em; background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:2px 7px}
.article-body pre code{background:none; border:0; padding:0; font-size:1em}
.table-wrap{overflow-x:auto; margin:0 0 1.6em; border:1px solid var(--line); border-radius:var(--r-sm)}
.article-body table{border-collapse:collapse; width:100%; font-size:14.5px; margin:0}
.article-body th,.article-body td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft)}
.article-body th{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--paper-2)}
.article-body tr:last-child td{border-bottom:0}
.disclosure{
  background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%, transparent);
  border-radius:var(--r-sm); padding:14px 18px; font-size:13.5px; line-height:1.6;
  color:var(--ink-soft); margin:0 0 1.8em;
}
.disclosure b, .disclosure strong{color:var(--ink)}
.affiliate-cta{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
  padding:22px 24px; margin:2em 0; box-shadow:var(--shadow);
}
.affiliate-cta h4{font-family:var(--font-display); font-size:19px; margin:0 0 4px; letter-spacing:-.01em}
.affiliate-cta p{font-size:14px; color:var(--muted); margin:0}
.affiliate-cta .btn-accent{width:auto; padding:12px 26px}
.article-sources{margin:2.4em 0 0; padding-top:20px; border-top:1px solid var(--line)}
.article-sources h2{font-family:var(--font-mono)!important; font-size:12px!important; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 12px!important}
.article-sources ol{margin:0; padding-left:20px; font-size:13.5px}
.article-sources li{margin-bottom:6px}
.article-sources a{color:var(--accent); word-break:break-all}
.post-end{max-width:var(--measure); margin:44px auto 0}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px}
.tag{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.04em;
  background:var(--paper-2); border:1px solid var(--line); color:var(--muted);
  padding:6px 13px; border-radius:999px;
}
.author-box{
  display:flex; gap:18px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); padding:24px; margin-bottom:44px; align-items:flex-start;
}
.author-box .avatar{width:52px; height:52px; font-size:17px}
.author-box h3{font-family:var(--font-display); font-size:20px; margin:0 0 4px; letter-spacing:-.01em}
.author-box p{font-size:14.5px; color:var(--muted); margin:10px 0 0; line-height:1.65}
.author-box .chip{margin-bottom:2px}
.related{margin:0 0 20px}
.related h2, .comments .section-head h2{
  font-family:var(--font-display); font-size:26px; font-weight:680; letter-spacing:-.015em; margin:0 0 18px;
}
.rel-list{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rel-card{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
  padding:20px; display:flex; flex-direction:column; gap:10px;
  transition:transform .18s, box-shadow .18s;
}
.rel-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.rel-card h3{font-family:var(--font-display); font-size:17.5px; font-weight:640; letter-spacing:-.01em; line-height:1.35; margin:0}
.rel-card .meta{font-size:12.5px}
@media(max-width:1000px){.article-layout{grid-template-columns:minmax(0,var(--measure)); justify-content:center}.toc{display:none}}
@media(max-width:640px){.rel-list{grid-template-columns:1fr}.author-box{flex-direction:column}}

/* ---------- Category + archive pages ---------- */
.page-head{max-width:760px; padding:34px 0 8px}
.page-head h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(34px,4.6vw,54px); line-height:1.05; margin:14px 0 12px;
}
.page-head p{font-size:16.5px; color:var(--muted); margin:0; line-height:1.65}
.all-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:26px 0 10px}
.cat-head .art-item{
  border-bottom:1px solid var(--line); padding:26px 0; display:grid; gap:10px;
}
.cat-head .art-item h2{font-family:var(--font-display); font-size:25px; font-weight:660; letter-spacing:-.015em; line-height:1.3; margin:0}
.cat-head .art-item h2 a:hover{color:var(--accent)}
.cat-head .art-item p{color:var(--muted); margin:0; font-size:15px; line-height:1.65; max-width:70ch}
.cat-desc{color:var(--muted); font-size:15.5px; margin:0 0 6px}
@media(max-width:900px){.all-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.all-grid{grid-template-columns:1fr}}

/* ---------- About page ---------- */
.about-page{padding-bottom:20px}
.about-grid{display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; padding-top:10px}
.about-copy{font-size:16.5px; line-height:1.75; color:var(--ink-soft)}
.about-copy h2{font-family:var(--font-display); font-size:26px; font-weight:680; letter-spacing:-.015em; color:var(--ink); margin:1.6em 0 .5em}
.about-copy h2:first-child{margin-top:0}
.about-copy p{margin:0 0 1.2em}
.about-copy a{color:var(--accent); font-weight:500}
.coverage-list{list-style:none; margin:0 0 1.2em; padding:0}
.coverage-list li{padding:9px 0 9px 30px; border-bottom:1px solid var(--line-soft); position:relative}
.coverage-list li::before{content:"→"; position:absolute; left:4px; color:var(--accent); font-weight:700}
.people{display:flex; flex-direction:column; gap:16px; position:sticky; top:96px}
.person{border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:20px}
.person .avatar{width:44px; height:44px; font-size:15px; margin-bottom:10px}
.person h3{font-family:var(--font-display); font-size:18px; margin:0 0 2px}
.person small{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.person p{font-size:13.5px; color:var(--muted); margin:8px 0 0; line-height:1.6}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}.people{position:static}}

/* ---------- Search ---------- */
.search-panel{
  position:fixed; inset:0; z-index:80; display:none;
  background:color-mix(in srgb, var(--ink) 45%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:8vh 20px 20px;
}
.search-panel.open{display:block}
.search-inner{
  max-width:680px; margin:0 auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden;
  animation:rise .22s ease;
}
@keyframes rise{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}
.search-row{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.search-row input{flex:1; border:0; outline:0; background:none; color:var(--ink); font-size:17px}
.search-row input::placeholder{color:var(--faint)}
.search-results{max-height:56vh; overflow:auto; padding:8px}
.search-hit{display:block; padding:14px 16px; border-radius:var(--r-sm)}
.search-hit:hover{background:var(--paper-2)}
.search-hit h3{font-family:var(--font-display); font-size:17px; font-weight:640; margin:8px 0 4px; letter-spacing:-.01em}
.search-hit p{font-size:13.5px; color:var(--muted); margin:0; line-height:1.55}
.empty{padding:26px; text-align:center; color:var(--faint); font-size:14px}

/* ---------- Comments ---------- */
.comments{margin-top:44px; padding-top:26px; border-top:1px solid var(--line)}
.comment-shell{border:1px dashed var(--line); border-radius:var(--r-md); padding:26px; text-align:center; color:var(--muted); font-size:14px}
.comment-shell p{margin:0 0 14px}
.comment-rules{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.comment-rules span{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--paper-2); border:1px solid var(--line); padding:6px 12px; border-radius:999px}

/* ---------- Home misc ---------- */
main{display:block}
.home{padding-bottom:8px}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- Print ---------- */
@media print{
  .masthead,.utility,.sidebar,.search-panel,.progress,.newsletter-band,.footer,.toc,.comments,.newsletter-mini{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------- Engagement: reactions + comments ---------- */
.post-engage{margin-top:8px; display:grid; gap:0}
.reactions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); margin-bottom:26px;
}
.rx-label{font-family:var(--font-display); font-size:16px; font-weight:600; margin-right:4px}
.rx-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:999px; padding:8px 16px 8px 13px; font-size:13.5px; font-weight:600;
  cursor:pointer; transition:border-color .15s, background .15s, transform .15s;
}
.rx-btn svg{width:16px; height:16px}
.rx-btn b{font-variant-numeric:tabular-nums; min-width:1.2em; text-align:left}
.rx-btn:hover{border-color:var(--accent); transform:translateY(-1px)}
.rx-btn.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.rx-btn.busy{opacity:.55; pointer-events:none}
.comments{border-top:1px solid var(--line); padding-top:6px}
.comments .section-head{margin-bottom:18px}
.comment-list{display:grid; gap:14px; margin-bottom:26px}
.comment{
  display:flex; gap:12px; padding:16px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--card);
}
.avatar.sm{width:30px; height:30px; font-size:11px}
.comment-body{flex:1; min-width:0}
.comment-meta{display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap}
.comment-meta b{font-size:14px}
.comment-meta span{font-size:12px; color:var(--muted)}
.comment-body p{margin:0; font-size:14.5px; line-height:1.6; overflow-wrap:anywhere}
.comments-empty,.comments-loading{color:var(--muted); font-size:14px; margin:4px 0}
.comment-form{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
  padding:20px; display:grid; gap:12px;
}
.comment-form h3{font-family:var(--font-display); font-size:19px; font-weight:680; margin:0; letter-spacing:-.01em}
.comment-rules{display:flex; gap:8px; flex-wrap:wrap}
.comment-rules span{
  font-size:11.5px; color:var(--muted); border:1px solid var(--line);
  padding:4px 10px; border-radius:999px; background:var(--bg);
}
.comment-form label{display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--muted)}
.comment-form input[name="name"],
.comment-form textarea{
  font:inherit; font-weight:400; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; background:var(--bg);
  padding:10px 12px; width:100%; resize:vertical;
}
.comment-form input[name="name"]:focus,
.comment-form textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.comment-form .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.comment-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.comment-actions .btn-accent{width:auto; padding:10px 22px; border:0; cursor:pointer}
.comment-actions .btn-accent:disabled{opacity:.55; cursor:wait; transform:none}
.form-status{font-size:13px; color:var(--muted)}
@media(max-width:640px){
  .reactions{padding:16px}
  .rx-label{width:100%; margin-bottom:2px}
  .comment{padding:13px}
  .comment-form{padding:16px}
}