/* base.css — structure only. Brand comes from tokens.css via var(--…).
   INVARIANT: no hex colors, no font-family names, no :root here. */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--c-paper); color:var(--c-ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--c-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.15; margin:0; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-4); }

/* ---- masthead ---- */
.mast{ background:var(--c-bar); border-bottom:var(--rule) solid var(--c-accent); }
.mast-row{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) 0; gap:var(--sp-4); flex-wrap:wrap; }
.wordmark{ font-family:var(--font-body); font-weight:800; font-size:var(--fs-wordmark);
  letter-spacing:-0.03em; color:var(--c-ink); text-decoration:none; line-height:1; }
.wordmark .accent{ color:var(--c-accent); }
.desk-nav{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.desk-nav a{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-nav);
  text-transform:uppercase; letter-spacing:0.08em; color:var(--c-ink); opacity:0.82; }
.desk-nav a:hover{ opacity:1; color:var(--c-accent); text-decoration:none; }

/* ---- kicker tab + voice chip ---- */
.kicker-tab{ display:inline-block; font-family:var(--font-body); font-weight:800;
  font-size:var(--fs-kicker); text-transform:uppercase; letter-spacing:0.13em;
  padding:4px 9px; border-radius:var(--radius-tab); background:var(--c-accent); color:var(--c-onaccent); }
.kicker-tab.ink{ background:var(--c-ink); }
.voice-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body);
  font-size:13px; color:var(--c-muted); }
.voice-chip::before{ content:""; width:12px; height:12px; border-radius:50%; background:var(--c-accent); display:inline-block; }
.live-tab{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body);
  font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em;
  padding:3px 9px; border-radius:var(--radius-tab); background:var(--c-accent); color:var(--c-onaccent); }
.live-tab::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-onaccent); }

/* ---- desk band (promoted-desk top slot) ---- */
.desk-band{ background:var(--c-ink); color:var(--c-onaccent); border-radius:var(--radius-card);
  padding:var(--sp-4); margin:var(--sp-5) 0; }
.desk-band .desk-label{ font-family:var(--font-body); font-size:11px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--c-onaccent); opacity:0.75; margin-bottom:var(--sp-3); }
.desk-band .desk-label b{ opacity:1; }
.desk-band-grid{ display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-4); }
.desk-band h2,.desk-band h3{ color:var(--c-onaccent); }
.desk-band a{ color:var(--c-onaccent); }
.desk-lead h2{ font-size:var(--fs-h2); margin-bottom:var(--sp-2); }
.desk-secondaries{ display:flex; flex-direction:column; gap:var(--sp-3); }
.desk-secondaries a{ display:block; font-family:var(--font-head); font-weight:600; font-size:16px; opacity:0.92; }

/* ---- home layout: river + rail ---- */
.home-cols{ display:grid; grid-template-columns:1fr 300px; gap:var(--sp-5); align-items:start; }
.section-head{ border-bottom:2px solid var(--c-ink); padding-bottom:var(--sp-2); margin:var(--sp-5) 0 var(--sp-4); }
.section-head h2{ font-size:var(--fs-h2); }
.section-head h2 .accent{ color:var(--c-accent); }
.river{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.rail{ background:var(--c-bar); border:1px solid var(--c-line); border-radius:var(--radius-card); padding:var(--sp-4); }
.rail h3{ font-family:var(--font-body); font-size:var(--fs-kicker); text-transform:uppercase;
  letter-spacing:0.1em; color:var(--c-accent); font-weight:800; margin-bottom:var(--sp-3); }
.rail ul{ list-style:none; margin:0 0 var(--sp-5); padding:0; }
.rail li{ padding:var(--sp-1) 0; border-bottom:1px solid var(--c-line); }
.rail li a{ color:var(--c-ink); font-size:14px; }

/* ---- article card ---- */
.article-card{ background:var(--c-paper); border:1px solid var(--c-line); border-radius:var(--radius-card); overflow:hidden; }
.card-visual{ aspect-ratio:16/9; background:var(--c-tint); background-size:cover; background-position:center; }
.card-body{ padding:var(--sp-3); }
.card-body h4{ font-size:var(--fs-h3); line-height:1.2; margin:var(--sp-2) 0; }
.card-body h4 a{ color:var(--c-ink); }
.card-body .dek{ color:var(--c-muted); font-size:15px; margin:0 0 var(--sp-3); }

/* ---- article page ---- */
.article-head{ padding:var(--sp-6) 0 var(--sp-4); }
.article-title{ font-size:var(--fs-h1); margin:var(--sp-3) 0; }
.article-dek{ font-family:var(--font-head); font-style:italic; font-size:var(--fs-dek); color:var(--c-muted); }
.article-meta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; color:var(--c-muted); font-size:14px; margin-top:var(--sp-3); }
.article-prose{ max-width:62ch; margin:0 auto; padding:var(--sp-5) 0; font-size:var(--fs-body); }
.article-prose p{ margin:0 0 var(--sp-4); }
.article-prose h2,.article-prose h3{ margin:var(--sp-5) 0 var(--sp-3); }
.article-prose .dateline{ font-variant:small-caps; letter-spacing:0.02em; font-weight:600; }
.back-link{ font-family:var(--font-body); font-size:13px; color:var(--c-muted); }

/* ---- footer ---- */
.site-footer{ background:var(--c-bar); border-top:var(--rule) solid var(--c-accent); margin-top:var(--sp-6); padding:var(--sp-6) 0; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-4); }
.footer-col h5{ font-family:var(--font-body); font-size:var(--fs-kicker); text-transform:uppercase;
  letter-spacing:0.1em; color:var(--c-accent); margin:0 0 var(--sp-2); }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ padding:2px 0; }
.footer-col a{ color:var(--c-ink); font-size:14px; }
.empty-state{ color:var(--c-muted); font-family:var(--font-head); font-style:italic; }

/* ---- responsive ---- */
@media (max-width:860px){
  .home-cols{ grid-template-columns:1fr; }
  .river{ grid-template-columns:1fr; }
  .desk-band-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ---- Koenig editor width support ---- */
.kg-width-wide{ width:100%; max-width:1040px; margin-inline:auto; }
.kg-width-full{ width:100%; }
.kg-image, .kg-embed-card{ max-width:100%; margin-inline:auto; }