/* Lokaal geserveerde fonts (geen Google-verzoek). IBM Plex Sans Condensed staat niet lokaal; --label valt terug op Arial Narrow / system-ui. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-regular.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/source-serif-4-normal-core.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-regular.woff2) format("woff2")}
/* Titus Today: één kolom leesbreedte, krantenkop zonder broadsheet-lijnwerk; palet uit de Rockstar Senators-huisstijl. */
:root{
  --paper:#eef0f3; --panel:#ffffff; --ink:#101a33; --muted:#566079; --line:#cdd3de;
  --navy:#12213f; --on-navy:#ffffff; --red:#c8102e; --yellow:#f2e100; --on-yellow:#101a33;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --label:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0b1120; --panel:#131b2e; --ink:#e9edf5; --muted:#9ba6bf; --line:#27324d; --navy:#0a1222; --red:#ff4560; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--body);padding-inline:16px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:44rem;margin:0 auto;padding-block:0 4rem}
.top{background:var(--navy);color:var(--on-navy);margin-inline:-16px;padding:14px 16px;border-bottom:5px solid var(--red)}
.top .in{max-width:44rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mark{font:400 1.6rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--on-navy)}
.mark:hover{color:var(--yellow)}
.nav{display:flex;gap:16px;font:600 .78rem var(--label);letter-spacing:.12em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--on-navy);opacity:.9}
.nav a:hover{color:var(--yellow);opacity:1}
.eyebrow{font:600 .78rem var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:2.6rem 0 .5rem}
h1{font:400 clamp(2.6rem,9vw,4.4rem)/.98 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 1rem;text-wrap:balance}
h2{font:400 clamp(1.6rem,5vw,2.1rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0 0 .75rem;text-wrap:balance}
h3{font:600 1.15rem/1.3 var(--label);margin:0 0 .4rem;text-wrap:balance}
.hl{background:linear-gradient(transparent 12%,var(--yellow) 12%,var(--yellow) 88%,transparent 88%);color:var(--on-yellow);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lede{font-size:1.2rem;line-height:1.55;max-width:38rem}
section{margin-top:3rem}
.rule{display:flex;gap:10px;align-items:center;font:600 .74rem var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:3rem 0 1rem}
.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.points{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.points li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:12px;align-items:start}
.points b{font:400 1.5rem/1 var(--display);color:var(--red)}
.series{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;background:var(--navy);color:var(--on-navy);padding:18px;text-decoration:none;border-left:6px solid var(--red)}
.series img{width:96px;height:96px;display:block}
.series .s-name{font:400 1.7rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.series .s-tag{font:600 .8rem var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin-top:.35rem}
.series p{margin:.5rem 0 0;font-size:.98rem;line-height:1.5;opacity:.92}
.series:hover{color:var(--on-navy)}
.series:hover .s-name{color:var(--yellow)}
.story{background:var(--panel);border:1px solid var(--line);padding:20px}
.meta{font:500 .78rem var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:.6rem}
.story p{margin:.7rem 0}
.sources{margin:1rem 0 0;padding:12px 0 0;border-top:1px dashed var(--line);font:400 .85rem/1.6 var(--mono)}
.sources span{display:block;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.74rem}
.sources a{display:inline-block;margin-right:1rem}
.btn{display:inline-block;font:600 .82rem var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:.7rem 1rem;border:2px solid var(--ink);margin:.8rem .5rem 0 0}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.follow{display:flex;flex-wrap:wrap;gap:0}
.hero-rs{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:20px;align-items:end;margin-top:2.4rem}
.hero-rs img{width:150px;height:150px;display:block}
.slogan{font:400 clamp(1.3rem,4.5vw,1.7rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:.2rem 0 1rem}
footer{margin-top:4rem;padding-top:1rem;border-top:1px solid var(--line);font:400 .85rem/1.6 var(--label);color:var(--muted)}
@media (max-width:520px){.hero-rs{grid-template-columns:1fr}.hero-rs img{width:110px;height:110px;order:-1}.series{grid-template-columns:72px minmax(0,1fr)}.series img{width:72px;height:72px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}