:root{
  --paper:#F2F3EE; --sunk:#EAEBE4; --raised:#FFFFFF;
  --ink:#1B211C; --ink-2:#4B5347; --ink-3:#7C8577;
  --rule:#DEE2D6; --rule-2:#C7CCBD;
  --brass:#A9782B; --brass-text:#876021; --brass-soft:#F1E6CC;
  --ff-body:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --ff-display:"Newsreader",Georgia,serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;
  --gap:clamp(1.5rem,4vw,3rem);
  --r:13px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:clamp(15px,.55vw + 13.6px,17px);line-height:1.62;
}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 var(--gap)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1.5px solid var(--ink);padding:clamp(2rem,6vw,4.5rem) 0 clamp(1.4rem,4vw,2.4rem)}
.eyebrow{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.3rem;
}
.eyebrow a{text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:1px}
.eyebrow a:hover{border-color:var(--brass)}
h1{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2.3rem,6vw,4rem);line-height:1.04;letter-spacing:-.022em;
  margin:0 0 1.1rem;max-width:19ch;
}
.standfirst{font-size:clamp(1rem,1vw + .8rem,1.22rem);line-height:1.5;max-width:58ch;color:var(--ink-2);margin:0 0 2rem}
.standfirst b{color:var(--ink);font-weight:600}
.factbar{
  display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;font-family:var(--ff-mono);font-size:.74rem;
  color:var(--ink-3);border-top:1px solid var(--rule);padding-top:1rem;
}
.factbar b{color:var(--ink);font-weight:500}

/* ---------- sections ---------- */
main{padding:clamp(2.6rem,6vw,4.5rem) 0 4rem}
.group{margin-bottom:clamp(2.6rem,6vw,4rem)}
.group-h{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:.5rem}
.group-n{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.group h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.015em;margin:0}
.group-lede{color:var(--ink-2);max-width:64ch;margin:.4rem 0 1.4rem;font-size:.95rem}

/* ---------- cards ---------- */
.cards{display:grid;gap:14px}
.card{
  display:block;text-decoration:none;background:var(--raised);
  border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px;
  transition:border-color .15s ease,transform .15s ease;
}
.card:hover{border-color:var(--brass);transform:translateY(-1px)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.45rem}
.card-t{font-family:var(--ff-display);font-size:1.22rem;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.card-meta{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.card-d{color:var(--ink-2);font-size:.92rem;line-height:1.55;max-width:70ch;margin:0}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:.75rem}
.tag{
  font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;background:var(--sunk);color:var(--ink-2);
}
.tag.ev{background:var(--brass-soft);color:var(--brass-text)}

/* ---------- note ---------- */
.note{
  display:flex;gap:11px;background:var(--sunk);border-radius:9px;padding:15px 17px;
  font-size:.86rem;color:var(--ink-2);line-height:1.55;margin:0 0 1.4rem;max-width:70ch;
}
.note-b{width:2px;background:var(--brass);border-radius:2px;flex-shrink:0}
.note b{color:var(--ink)}

/* ---------- footer ---------- */
footer{
  border-top:1.5px solid var(--ink);padding:2rem 0 4rem;
  font-family:var(--ff-mono);font-size:.74rem;color:var(--ink-3);line-height:1.7;
}
footer p{max-width:74ch;margin:0 0 .5rem}
footer a{color:var(--ink-2)}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}