:root{
  --bg:#f4f1ea;
  --paper:#fffdf8;
  --ink:#14181f;
  --muted:#5c6570;
  --red:#c8102e;
  --navy:#0b1f3a;
  --line:#e2ddd3;
  --max:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(calc(100% - 32px), var(--max)); margin-inline:auto}
header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px;
}
nav{display:flex; gap:4px; flex-wrap:wrap}
nav a{
  text-decoration:none; font-size:.82rem; font-weight:700;
  padding:8px 10px; color:var(--muted);
}
nav a:hover, nav a.on{color:var(--red)}
.hero{padding:36px 0 20px}
.kicker{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:8px}
h1{font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.1; margin:0 0 10px; font-weight:800; letter-spacing:-.03em}
h2{font-size:1.15rem; margin:0 0 12px}
.lede{color:var(--muted); max-width:540px; margin:0}
.stats{display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); margin:28px 0}
.stat{background:var(--paper); padding:16px 18px; min-width:110px; flex:1}
.stat b{display:block; font-size:1.45rem}
.stat span{font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.card{background:var(--paper); border:1px solid var(--line); padding:18px 20px; margin:12px 0}
.game{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 0; border-top:1px solid var(--line)}
.game:first-child{border-top:none; padding-top:0}
.tag{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em}
.tag.go{color:#157347}
.tag.meh{color:#8a6d1b}
.tag.no{color:var(--muted)}
.why{font-size:.8rem; color:var(--muted); margin-top:4px}
table{width:100%; border-collapse:collapse; font-size:.88rem}
th{text-align:left; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:8px 6px; border-bottom:1px solid var(--line)}
td{padding:8px 6px; border-bottom:1px solid var(--line)}
tr.caps td{background:#f8e6e9; font-weight:700}
.r{text-align:right}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff; text-decoration:none; border:0;
  padding:11px 16px; font-weight:800; font-size:.88rem; cursor:pointer;
}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.muted{color:var(--muted)}
.fact{font-size:1.2rem; line-height:1.45; margin:8px 0 16px}
footer{padding:28px 0 40px; color:var(--muted); font-size:.78rem}
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.tabs button{
  border:1px solid var(--line); background:var(--paper); padding:8px 12px;
  font-weight:700; cursor:pointer;
}
.tabs button.on{background:var(--navy); color:#fff; border-color:var(--navy)}
@media (max-width:700px){
  nav{width:100%; overflow-x:auto; flex-wrap:nowrap}
  .top{flex-wrap:wrap; padding:8px 0}
}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800}
.brand > span{display:flex; flex-direction:column; gap:2px; line-height:1.15; min-width:0}
.nugget{width:40px; height:40px; object-fit:contain; flex:none}
.brand small, .slogan{
  font-weight:600; color:var(--muted); font-size:.72rem; letter-spacing:.02em;
  text-transform:none; max-width:min(52vw, 420px);
}
h3{font-size:.95rem; margin:18px 0 8px}
.note{background:#f8e6e9; border:1px solid var(--line); padding:12px 14px; margin:12px 0 0; font-weight:700}
.stat b.bigm{font-size:1.8rem}