:root{
  --bg:#0a0e14; --surface:#121925; --surface-2:#0e141d; --border:#1f2a3a;
  --ink:#e8edf4; --muted:#93a1b5; --faint:#5d6b7e;
  --alarm:#ff4d4d; --amber:#f5a623; --data:#2dd4d4; --good:#3ddc97;
  --maxw:720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 18px/1.7 Georgia,"Iowan Old Style","Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
}
.ui{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mono{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace}
a{color:var(--data); text-decoration:none}
a:hover{text-decoration:underline}

/* nav */
.nav{
  position:sticky; top:0; z-index:20; background:rgba(10,14,20,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
  font-family:ui-sans-serif,system-ui,sans-serif;
}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:.7rem 1.2rem;
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.brand{font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:1.02rem}
.brand b{color:var(--alarm)}
.nav a.link{color:var(--muted); font-size:.84rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em}
.nav a.link:hover{color:var(--ink); text-decoration:none}
.nav .spacer{flex:1}
.nav a.run{color:var(--bg); background:var(--data); padding:.4rem .8rem;
  border-radius:6px; font-size:.78rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em}
.nav a.run:hover{text-decoration:none; filter:brightness(1.1)}

/* layout */
main{max-width:var(--maxw); margin:0 auto; padding:3rem 1.2rem 1rem}
.eyebrow{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.74rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.16em;
  color:var(--amber); margin:0 0 .8rem}
h1{font-family:ui-sans-serif,system-ui,sans-serif; font-weight:800;
  letter-spacing:-.025em; line-height:1.12; font-size:2.5rem; margin:.2rem 0 1rem}
h2{font-family:ui-sans-serif,system-ui,sans-serif; font-weight:800;
  letter-spacing:-.02em; font-size:1.5rem; margin:2.6rem 0 .8rem; line-height:1.2}
h3{font-family:ui-sans-serif,system-ui,sans-serif; font-weight:700;
  font-size:1.15rem; margin:1.8rem 0 .5rem}
.dek{font-size:1.28rem; line-height:1.5; color:var(--muted); margin:0 0 1.6rem}
p{margin:0 0 1.2rem}
ul,ol{margin:0 0 1.3rem; padding-left:1.3rem}
li{margin:.5rem 0}
strong{color:#fff}
hr{border:0; border-top:1px solid var(--border); margin:2.6rem 0}

/* byline */
.byline{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.82rem;
  color:var(--faint); display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:.8rem 0; margin:0 0 2rem}
.byline .dot::before{content:"·"; margin-right:.6rem; color:var(--border)}

/* reality-check callout (the site signature) */
.reality{
  border-left:3px solid var(--alarm); background:var(--surface);
  padding:1.1rem 1.3rem; margin:1.8rem 0; border-radius:0 8px 8px 0;
}
.reality .tag{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.72rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:var(--alarm); display:block; margin-bottom:.4rem}
.reality p:last-child{margin-bottom:0}

/* data table */
.tbl-wrap{overflow-x:auto; margin:1.6rem 0; border:1px solid var(--border);
  border-radius:10px}
table{width:100%; border-collapse:collapse; font-family:ui-monospace,monospace;
  font-size:.92rem}
th,td{padding:.7rem .9rem; text-align:right; border-bottom:1px solid var(--border)}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--surface-2); color:var(--muted); font-weight:700;
  text-transform:uppercase; font-size:.72rem; letter-spacing:.06em}
tbody tr:last-child td{border-bottom:0}
.row-bad{background:rgba(255,77,77,.06)}
.num-bad{color:var(--alarm); font-weight:700}

/* CTA to calculator */
.cta{display:block; margin:2.4rem 0; padding:1.4rem 1.5rem; border-radius:12px;
  background:linear-gradient(135deg,#11202b,#0e141d);
  border:1px solid var(--border); text-decoration:none}
.cta:hover{text-decoration:none; border-color:var(--data)}
.cta .k{font-family:ui-sans-serif,system-ui,sans-serif; font-weight:800;
  color:var(--ink); font-size:1.12rem; display:block; margin-bottom:.2rem}
.cta .s{font-family:ui-sans-serif,system-ui,sans-serif; color:var(--data);
  font-size:.86rem; font-weight:700}

/* related / cards */
.related{margin:3rem 0 1rem}
.related h2{font-size:1.1rem; margin:0 0 1rem}
.cards{display:grid; gap:.8rem}
.card{display:block; padding:1rem 1.1rem; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); text-decoration:none}
.card:hover{border-color:var(--data); text-decoration:none}
.card .ct{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.68rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:var(--amber); display:block; margin-bottom:.3rem}
.card .ch{font-family:ui-sans-serif,system-ui,sans-serif; font-weight:700;
  color:var(--ink); font-size:1rem; line-height:1.3}
.card .cd{color:var(--muted); font-size:.9rem; margin-top:.35rem; line-height:1.45}

/* glossary */
.gloss dt{font-family:ui-sans-serif,system-ui,sans-serif; font-weight:800;
  color:#fff; margin-top:1.4rem; font-size:1.05rem}
.gloss dd{margin:.3rem 0 0; color:var(--muted)}

/* footer */
footer{border-top:1px solid var(--border); margin-top:3rem;
  font-family:ui-sans-serif,system-ui,sans-serif}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:2rem 1.2rem 3rem;
  color:var(--faint); font-size:.84rem}
.foot-in a{color:var(--muted)}
.foot-links{display:flex; gap:1.2rem; flex-wrap:wrap; margin-bottom:1rem}
.disclaimer{color:var(--faint); font-size:.78rem; line-height:1.5;
  border-top:1px solid var(--border); padding-top:1rem; margin-top:1rem}

@media (max-width:560px){
  h1{font-size:1.95rem}
  body{font-size:17px}
  .dek{font-size:1.12rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*:focus-visible{outline:2px solid var(--data); outline-offset:2px}