:root{
  --ink:#12151c; --ink-2:#3d4453; --ink-3:#6b7280;
  --line:#e7e4ea; --bg:#ffffff; --soft:#faf7fa;
  --accent:#7b2d52; --accent-dark:#5d2140;
  --gold:#d9a441; --cta:#16a34a; --cta-dark:#12833c;
  --radius:14px; --wrap:720px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; font-size:18px; line-height:1.68; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-underline-offset:2px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.wrap-wide{max-width:960px; margin:0 auto; padding:0 20px}

.topbar{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:50}
.topbar .wrap-wide{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.brand span{color:var(--accent)}
.topnav{display:flex; gap:18px; font-size:14px; font-weight:600}
.topnav a{color:var(--ink-2); text-decoration:none}
.topnav a:hover{color:var(--accent)}
.topnav a[aria-current="page"]{color:var(--accent)}
@media(max-width:640px){ .topnav{gap:13px; font-size:13px} }

.crumbs{font-size:13.5px; color:var(--ink-3); padding:16px 0 0}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{text-decoration:underline}

h1{font-size:38px; line-height:1.18; letter-spacing:-.028em; font-weight:800; margin:22px 0 14px; text-wrap:balance}
@media(max-width:600px){ h1{font-size:29px} }
h2{font-size:26px; letter-spacing:-.022em; font-weight:800; margin:40px 0 12px; line-height:1.28; text-wrap:balance}
h3{font-size:19.5px; letter-spacing:-.015em; font-weight:700; margin:28px 0 9px}
p{margin:0 0 18px}
.kicker{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-top:24px}
.standfirst{font-size:19.5px; color:var(--ink-2); margin:0 0 24px; line-height:1.6}
.updated{font-size:14px; color:var(--ink-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px 0; margin:0 0 30px}

.callout{border-left:3px solid var(--accent); background:var(--soft); padding:16px 20px; border-radius:0 10px 10px 0; margin:26px 0; font-size:16.5px}
.callout b{color:var(--accent-dark)}
.callout.warn{border-left-color:var(--gold); background:#fffbeb}
.callout.warn b{color:#92400e}

.authorcard{display:flex; gap:20px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--soft); margin:0 0 30px}
.authorcard img{width:96px; height:96px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.authorcard b{display:block; font-size:19px; letter-spacing:-.02em}
.authorcard .role{font-size:14px; color:var(--ink-3); margin-bottom:9px}
.authorcard p{margin:0; font-size:15.5px; line-height:1.6}
@media(max-width:560px){ .authorcard{flex-direction:column} }

.cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0}
@media(max-width:700px){ .cards{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .06s ease}
.card:hover{box-shadow:0 6px 20px rgba(16,24,40,.08)}
.card img{width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--soft)}
.card .body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.card .tag{font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:7px}
.card h3{margin:0 0 8px; font-size:19px; line-height:1.3}
.card h3 a{color:var(--ink); text-decoration:none}
.card h3 a:hover{color:var(--accent)}
.card p{font-size:15px; color:var(--ink-2); margin:0 0 14px; line-height:1.55}
.card .meta{margin-top:auto; font-size:13px; color:var(--ink-3); display:flex; gap:10px; align-items:center}
.score-pill{display:inline-flex; align-items:baseline; gap:4px; background:var(--accent); color:#fff; font-weight:800; font-size:13px; padding:3px 10px; border-radius:99px}
.score-pill small{font-weight:600; font-size:11px; opacity:.85}

.steps{counter-reset:s; list-style:none; padding:0; margin:24px 0}
.steps li{counter-increment:s; position:relative; padding-left:52px; margin-bottom:22px}
.steps li::before{content:counter(s); position:absolute; left:0; top:1px; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center}
.steps li b{display:block; font-size:17.5px; letter-spacing:-.015em; margin-bottom:4px}
.steps li p{margin:0; font-size:16px; color:var(--ink-2)}

.tbl{width:100%; border-collapse:collapse; margin:20px 0; font-size:15.5px}
.tbl th,.tbl td{padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.tbl th{background:var(--soft); font-size:13.5px; font-weight:700}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0}
.scroll-x .tbl{margin:0}

.never{list-style:none; padding:0; margin:20px 0; font-size:16.5px}
.never li{display:flex; gap:11px; margin-bottom:13px; align-items:flex-start; line-height:1.55}
.never li::before{content:"\2715"; color:var(--accent); font-weight:800; flex:0 0 auto; font-size:14px; margin-top:3px}
.always li::before{content:"\2713"; color:var(--cta)}

footer{border-top:1px solid var(--line); margin-top:56px; padding:32px 0 48px; font-size:14px; color:var(--ink-3); line-height:1.65}
footer a{color:var(--ink-3)}
.fnav{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; font-weight:600}

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