/* ─── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{display:block;max-width:100%}
table{border-collapse:collapse}
button,input{font:inherit}

/* ─── page ──────────────────────────────────────────────── */
:root{
  --ground:#F5F6F7; --surface:#FFFFFF; --surface-2:#EDEFF2;
  --rule:#DDE1E6; --rule-strong:#C4CBD3;
  --ink:#16202B; --muted:#5C6873; --faint:#8895A2;
  --accent:#1F3A5F; --accent-soft:#E7EDF4;
  --caution:#9A3B19; --caution-soft:#FDECE5; --caution-rule:#D99A83;
  --reply:#2E5E4E; --reply-soft:#E6F0EA; --reply-rule:#9DC3B1;
  --maxw:70ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F141A; --surface:#161D26; --surface-2:#1D2630;
    --rule:#27313D; --rule-strong:#3A4653;
    --ink:#E3E9EF; --muted:#98A5B2; --faint:#71808E;
    --accent:#8FB2D8; --accent-soft:#1B2836;
    --caution:#E58E6D; --caution-soft:#2D1D19; --caution-rule:#704333;
    --reply:#7FBBA0; --reply-soft:#152420; --reply-rule:#365246;
  }
}
:root[data-theme="dark"]{
  --ground:#0F141A; --surface:#161D26; --surface-2:#1D2630;
  --rule:#27313D; --rule-strong:#3A4653;
  --ink:#E3E9EF; --muted:#98A5B2; --faint:#71808E;
  --accent:#8FB2D8; --accent-soft:#1B2836;
  --caution:#E58E6D; --caution-soft:#2D1D19; --caution-rule:#704333;
  --reply:#7FBBA0; --reply-soft:#152420; --reply-rule:#365246;
}
*{box-sizing:border-box}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; margin:0;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px 100px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
h1,h2,h3{text-wrap:balance; margin:0}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---- masthead ---- */
.mast{border-bottom:2px solid var(--ink); padding:52px 0 20px; display:flex; flex-direction:column; gap:18px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--caution); font-weight:600;
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--caution)}
h1{
  font-family:Newsreader,Georgia,serif; font-weight:500; font-size:clamp(2.1rem,6.2vw,3.05rem);
  line-height:1.1; letter-spacing:-.015em;
}
.standfirst{font-size:1.09rem; color:var(--muted); max-width:60ch; margin:0}
.mast-meta{
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:6px 18px; padding-top:4px;
}

/* ---- notice ---- */
.notice{
  background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--rule-strong);
  padding:18px 20px; margin:30px 0 0; font-size:14.5px; color:var(--muted);
  display:flex; flex-direction:column; gap:9px;
}
.notice strong{color:var(--ink); font-weight:600}
.alert-notice{border-left-width:5px; border-left-color:var(--caution); background:var(--caution-soft)}

/* ---- sections ---- */
section{padding-top:56px}
.sec-head{display:flex; flex-direction:column; gap:10px; margin-bottom:26px}
.sec-num{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); font-weight:600;
}
h2{font-family:Newsreader,Georgia,serif; font-weight:500; font-size:1.82rem; line-height:1.2; letter-spacing:-.01em}
.lede{color:var(--muted); margin:0; max-width:62ch}
p{margin:0 0 1.05em}
section p:last-child{margin-bottom:0}

/* ---- rating panel ---- */
.rating{
  background:var(--surface); border:1px solid var(--rule); padding:24px;
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
}
.score{display:flex; flex-direction:column; gap:2px; align-items:center; min-width:88px}
.score-n{font-family:Newsreader,Georgia,serif; font-size:3.1rem; line-height:1; font-variant-numeric:tabular-nums}
.score-l{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.bars{display:flex; flex-direction:column; gap:6px}
.bar-row{display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:center; font-size:12px}
.bar-row span{font-family:"IBM Plex Mono",monospace; color:var(--faint); font-variant-numeric:tabular-nums}
.bar{height:7px; background:var(--surface-2); position:relative; overflow:hidden}
.bar i{position:absolute; inset:0 auto 0 0; background:var(--rule-strong); display:block}
.bar.hot i{background:var(--caution)}

/* ---- topic data strip ---- */
.topics{display:flex; flex-direction:column; gap:9px; margin-top:8px}
.topic{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; font-size:14px}
.topic-bar{height:22px; background:var(--caution-soft); border:1px solid var(--caution-rule); position:relative; display:flex; align-items:center; padding:0 9px}
.topic-bar b{position:relative; font-weight:500; font-size:13px; color:var(--ink)}
.topic-bar::before{content:""; position:absolute; inset:0 auto 0 0; background:var(--caution); opacity:.16; width:var(--w)}
.topic-n{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--caution); font-weight:600; font-variant-numeric:tabular-nums}

/* ---- review ledger ---- */
.ledger{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule)}
.entry{border-bottom:1px solid var(--rule); padding:22px 0; display:flex; flex-direction:column; gap:12px}
.entry-meta{
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:5px 14px; align-items:baseline;
}
.entry-meta b{color:var(--ink); font-weight:600; font-size:13px}
.stars{color:var(--caution); letter-spacing:.1em}
blockquote{
  margin:0; padding:0 0 0 18px; border-left:2px solid var(--caution-rule);
  font-family:Newsreader,Georgia,serif; font-size:1.13rem; line-height:1.52; color:var(--ink);
}
blockquote .trunc{color:var(--faint); font-style:italic; font-size:.95rem}
.src{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.03em}
.reply{
  background:var(--reply-soft); border:1px solid var(--reply-rule); border-left:3px solid var(--reply);
  padding:15px 17px; display:flex; flex-direction:column; gap:8px;
}
.reply-tag{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--reply); font-weight:600;
}
.reply p{margin:0; font-size:15px; color:var(--ink)}

/* ---- facts table ---- */
.facts{width:100%; border-collapse:collapse; font-size:14.5px}
.facts th,.facts td{text-align:left; padding:10px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.facts th{font-weight:500; color:var(--muted); width:38%; font-size:13px}
.facts td{font-family:"IBM Plex Mono",monospace; font-size:13.5px}

/* ---- steps ---- */
ol.steps{list-style:none; counter-reset:s; padding:0; margin:0; display:flex; flex-direction:column; gap:20px}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:30px 1fr; gap:15px}
ol.steps li::before{
  content:counter(s,decimal-leading-zero); font-family:"IBM Plex Mono",monospace;
  font-size:12px; font-weight:600; color:var(--caution); padding-top:3px;
}
ol.steps h3{font-family:"Public Sans",sans-serif; font-size:1rem; font-weight:600; margin-bottom:5px}
ol.steps p{font-size:15px; color:var(--muted); margin:0}

.checks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px}
.checks li{display:grid; grid-template-columns:20px 1fr; gap:12px; font-size:15.5px}
.checks li::before{content:"\2713"; color:var(--caution); font-weight:700; font-size:14px; padding-top:2px}

footer{margin-top:70px; padding-top:26px; border-top:2px solid var(--ink); font-size:13.5px; color:var(--muted); display:flex; flex-direction:column; gap:14px}
footer h3{font-family:"Public Sans",sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); font-weight:600}

@media(max-width:560px){
  .rating{grid-template-columns:1fr; gap:20px}
  .facts th{width:auto; display:block; border:0; padding-bottom:2px}
  .facts td{display:block; padding-top:0}
}
@media(prefers-reduced-motion:no-preference){
  .mast,section{animation:rise .5s ease-out both}
  section:nth-of-type(n+2){animation-delay:.05s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}