:root { color-scheme:light; --ink:#162335; --navy:#14243a; --muted:#526275; --paper:#fff; --edge:#ced8e2; --accent:#76334d; }
* { box-sizing:border-box }
body { margin:0; color:var(--ink); background:var(--paper); font: 17px/1.62 system-ui,-apple-system,"Segoe UI",sans-serif; }
.wrap { width:min(1160px,calc(100% - 64px)); margin:auto }
a { color:inherit; text-underline-offset:.22em }
a:focus-visible,button:focus-visible { outline:3px solid #de8e30; outline-offset:3px }
header { color:white; background:var(--navy); border-bottom:1px solid #36465a }
.bar,.foot { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:72px }
.brand { font-size:24px; font-weight:780; letter-spacing:-.06em; text-decoration:none }
.brand span,.amp { color:#f4adbf }
.rubric { font-size:14px }
.cover { color:#fff; background:var(--navy) }
.cover-grid { display:grid; grid-template-columns:1.04fr 1fr; align-items:center; gap:6%; padding-block:clamp(32px,6vw,78px) }
.label { font-weight:720; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:0 0 12px }
.cover .label { color:#f4bdcc }
.dot { display:inline-block; border-radius:50%; width:7px; height:7px; margin-right:6px; background:currentColor; vertical-align:1px }
h1,h2,h3 { line-height:1.08; text-wrap:balance }
h1 { font-size:clamp(42px,4.45vw,68px); font-weight:720; letter-spacing:-.06em; margin:16px 0 20px }
h2 { font-size:clamp(30px,3.35vw,47px); letter-spacing:-.045em; margin:0 0 22px }
h3 { font-size:24px; letter-spacing:-.035em; margin:0 0 14px }
.lead { color:#e0e7ef; margin:0; max-width:46ch }
.jump { display:inline-flex; gap:12px; align-items:center; font-size:15px; font-weight:650; margin-top:22px }
.portraits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
figure { margin:0; padding:clamp(11px,1.6vw,22px); border-radius:14px; background:#f9f0f3; color:var(--ink); min-width:0; }
figure:nth-child(2) { background:#eaf2f7 }
figcaption { display:flex; flex-direction:column; margin-bottom:10px; line-height:1.4 }
figcaption b { font-size:clamp(16px,2vw,24px); letter-spacing:-.04em }
figcaption span,figure p { font-size:13px; color:#404e60 }
figure img { width:100%; height:auto; display:block; mix-blend-mode:multiply }
figure p { font-weight:650; margin:12px 0 0; font-variant-numeric:tabular-nums }
figure p span { margin:0 3px }
.content { max-width:900px; padding-block:16px 64px }
.content section { padding-block:40px 26px; border-bottom:1px solid var(--edge); scroll-margin-top:18px }
.content p:not(.label,.caption) { max-width:70ch }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; margin-bottom:12px }
th,td { padding:11px 16px; text-align:left; border-bottom:1px solid var(--edge); line-height:1.4 }
thead { color:white; background:var(--navy) } thead th { font-size:15px; font-weight:620 }
tbody th { font-weight:520; color:#39495a; width:39% } tbody tr:nth-child(even) { background:#f3f6fa }
.caption { font-size:13px; line-height:1.5; color:var(--muted); max-width:84ch }
.split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px }
.split div { padding:20px; background:#f8f2f4; border-top:3px solid #98637a }
.split div+div { background:#f0f6f9; border-color:#54798e }
.split p { margin:0 }
footer { background:var(--navy); color:white }
.foot { font-size:14px; padding-block:22px }
button { font:inherit; cursor:pointer; padding:6px 12px; background:#fff; border:1px solid #8d9bb0; border-radius:6px; color:var(--ink) }
.stats-choice { margin-top:8px } [hidden] { display:none !important }
.skip { position:absolute; left:-200vw; top:8px; padding:8px; background:white; color:var(--ink) } .skip:focus { left:8px }
.note { max-width:780px; padding-block:48px 75px } .note h1 { font-size:clamp(34px,4.8vw,54px) } .note h2 { font-size:28px; margin-top:30px }
.choices { display:flex; flex-wrap:wrap; gap:8px } .kicker { color:var(--muted); font-size:14px }
@media (max-width:750px) {
 .wrap { width:calc(100% - 36px) } .bar { min-height:58px } .rubric { font-size:12px }
 .cover-grid { grid-template-columns:1fr; gap:22px } .portraits { max-width:510px }
 .portraits figure { display:grid; grid-template-columns:1fr } figure img { max-height:170px; object-fit:contain }
 .content { padding-bottom:40px } .content section { padding-block:28px 18px }
 .split { grid-template-columns:1fr; gap:14px } th,td { padding:10px 7px; font-size:14px } thead th { font-size:14px } .foot { flex-wrap:wrap }
}