/* The Arena — shared design system. Observation-log aesthetic: serif display,
   sodium-amber accent, mono for data. Both themes. */
:root{
  --bg:#e7eaec; --bg-raised:#f5f6f7; --bg-inset:#dde2e5;
  --border:#ccd3d8; --border-strong:#b1bbc2;
  --text:#151c22; --text-dim:#525f69; --text-faint:#83919a;
  --accent:#985607; --accent-soft:rgba(152,86,7,.10);
  --good:#2c7a6b; --warn:#ab3529; --anomaly:#6a49ad; --slate:#5c6a74;
  --shadow:0 1px 0 rgba(20,28,34,.04), 0 12px 30px -22px rgba(20,28,34,.5);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0d1216; --bg-raised:#141c22; --bg-inset:#090e12;
  --border:#232e37; --border-strong:#35434e;
  --text:#e7ecf0; --text-dim:#95a2ac; --text-faint:#5f6e78;
  --accent:#e8a33d; --accent-soft:rgba(232,163,61,.12);
  --good:#54bfaa; --warn:#e0655b; --anomaly:#b092ea; --slate:#7c8b96;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 20px 40px -30px rgba(0,0,0,.9);
}}
:root[data-theme="dark"]{
  --bg:#0d1216; --bg-raised:#141c22; --bg-inset:#090e12;
  --border:#232e37; --border-strong:#35434e;
  --text:#e7ecf0; --text-dim:#95a2ac; --text-faint:#5f6e78;
  --accent:#e8a33d; --accent-soft:rgba(232,163,61,.12);
  --good:#54bfaa; --warn:#e0655b; --anomaly:#b092ea; --slate:#7c8b96;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 20px 40px -30px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --bg:#e7eaec; --bg-raised:#f5f6f7; --bg-inset:#dde2e5;
  --border:#ccd3d8; --border-strong:#b1bbc2;
  --text:#151c22; --text-dim:#525f69; --text-faint:#83919a;
  --accent:#985607; --accent-soft:rgba(152,86,7,.10);
  --good:#2c7a6b; --warn:#ab3529; --anomaly:#6a49ad; --slate:#5c6a74;
  --shadow:0 1px 0 rgba(20,28,34,.04), 0 12px 30px -22px rgba(20,28,34,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem); line-height:1.66;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"kern" 1}
.mono,.eyebrow,.chip,.stat b,.rnum,.matchup,.kv,.cite cite,.navlink,.brand,.meta,.pill,.dt{
  font-family:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace}
.wrap{max-width:920px; margin:0 auto; padding:0 clamp(20px,5vw,44px)}
.prose{max-width:66ch}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
a:hover{border-bottom-color:var(--accent)}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.88em; background:var(--bg-inset); border:1px solid var(--border); border-radius:4px; padding:1px 5px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.eyebrow{font-size:.72rem; letter-spacing:.19em; text-transform:uppercase; color:var(--accent)}

/* ---- nav ---- */
.topbar{border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(8px)}
.topbar .wrap{display:flex; align-items:center; gap:16px; height:54px}
.brand{display:flex; align-items:center; gap:9px; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text); border:0}
.sig{width:8px; height:8px; border-radius:50%; background:var(--accent); animation:ping 2.6s ease-out infinite; flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
nav{margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.navlink{font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); border:0;
  padding:6px 10px; border-radius:100px; transition:color .15s, background .15s}
.navlink:hover{color:var(--text); background:var(--accent-soft)}
.navlink[aria-current="page"]{color:var(--accent); background:var(--accent-soft)}
.themebtn{margin-left:6px; background:var(--bg-inset); border:1px solid var(--border); color:var(--text-dim); cursor:pointer;
  border-radius:100px; width:30px; height:30px; font-size:.8rem; display:grid; place-items:center; flex:none}
@media(max-width:640px){.topbar .wrap{height:auto; padding-top:9px; padding-bottom:9px; flex-wrap:wrap} nav{margin-left:0; width:100%}}

/* ---- back-to-home link (sub-pages) ---- */
.backhome{display:inline-flex; align-items:center; gap:7px; margin:18px 0 -8px; border:0;
  font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text-dim);
  transition:color .15s, gap .15s}
.backhome:hover{color:var(--accent); gap:11px}
.backhome .arw{font-size:.95rem; line-height:1}

/* ---- hero + page head ---- */
.hero{padding:clamp(48px,9vw,96px) 0 clamp(30px,5vw,52px)}
.hero h1{font-size:clamp(2.05rem,1.3rem+3vw,3.3rem); line-height:1.07; font-weight:600; letter-spacing:-.014em;
  text-wrap:balance; margin:.5em 0 0; max-width:18ch}
.hero h1 em{font-style:italic; color:var(--accent)}
.dek{margin:1.3rem 0 0; max-width:60ch; color:var(--text-dim); font-size:1.12rem; line-height:1.62}
.dek b{color:var(--text); font-weight:600}
.pagehead{padding:clamp(40px,7vw,72px) 0 clamp(18px,3vw,30px); border-bottom:1px solid var(--border)}
.pagehead h1{font-size:clamp(1.8rem,1.3rem+1.8vw,2.6rem); font-weight:600; letter-spacing:-.012em; margin:.35em 0 0; text-wrap:balance}
.pagehead .dek{font-size:1.06rem; margin-top:1rem}

/* ---- sections + prose ---- */
section{padding:clamp(40px,7vw,72px) 0}
.sect-head{display:flex; align-items:baseline; gap:14px; margin-bottom:clamp(22px,3vw,34px)}
.sect-head h2{font-size:clamp(1.4rem,1.2rem+.9vw,1.85rem); font-weight:600; letter-spacing:-.01em; margin:0; text-wrap:balance}
.sect-head .idx{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); padding-top:.3em;
  font-family:ui-monospace,Menlo,monospace; white-space:nowrap}
.prose p{margin:0 0 1.15em}
.prose h3{font-size:1.18rem; font-weight:600; letter-spacing:-.005em; margin:2em 0 .5em; text-wrap:balance}
.prose h3:first-child{margin-top:0}
.prose strong{color:var(--text); font-weight:600}
.prose ul,.prose ol{margin:0 0 1.2em; padding-left:1.3em}
.prose li{margin:0 0 .5em}
.prose li::marker{color:var(--accent)}
.lead{font-size:1.14rem; color:var(--text); line-height:1.6; max-width:62ch}

/* ---- callout / note box ---- */
.note{border:1px solid var(--border-strong); border-radius:6px;
  background:var(--bg-raised); padding:16px 20px; margin:1.6em 0; box-shadow:var(--shadow)}
.note .lbl{font-family:ui-monospace,Menlo,monospace; font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px}
.note.good .lbl{color:var(--good)}
.note p:last-child{margin-bottom:0}

/* ---- definition rows (methodology instruments etc.) ---- */
.deflist{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:5px; overflow:hidden; margin:1.6em 0}
.deflist .row{background:var(--bg); padding:15px 18px; display:grid; grid-template-columns:170px 1fr; gap:16px}
@media(max-width:560px){.deflist .row{grid-template-columns:1fr; gap:4px}}
.deflist .dt{font-size:.8rem; color:var(--accent); letter-spacing:.02em}
.deflist .dd{color:var(--text-dim); font-size:.96rem}
.deflist .dd b{color:var(--text)}

/* ---- findings grid (home) ---- */
.fgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:3px; overflow:hidden}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}
.finding{background:var(--bg); padding:24px 22px; display:flex; flex-direction:column; gap:8px}
.finding .tag{font-family:ui-monospace,Menlo,monospace; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent)}
.finding h3{margin:0; font-size:1.12rem; font-weight:600; line-height:1.28; text-wrap:balance}
.finding p{margin:0; color:var(--text-dim); font-size:.96rem; line-height:1.5}

/* ---- stat strip ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(30px,5vw,50px);
  background:var(--border); border:1px solid var(--border); border-radius:3px; overflow:hidden}
.stat{background:var(--bg); padding:18px 16px; display:flex; flex-direction:column; gap:5px}
.stat b{font-size:clamp(1.4rem,1.1rem+1.2vw,1.95rem); font-weight:500; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; line-height:1}
.stat span{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim)}
@media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---- cta cards (home nav to pages) ---- */
.cta{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px}
@media(max-width:620px){.cta{grid-template-columns:1fr}}
.cta a{display:block; border:1px solid var(--border); border-radius:7px; background:var(--bg-raised); padding:18px 20px; box-shadow:var(--shadow); transition:border-color .15s}
.cta a:hover{border-color:var(--accent)}
.cta .t{font-weight:600; font-size:1.05rem; color:var(--text); display:flex; align-items:center; justify-content:space-between}
.cta .d{color:var(--text-dim); font-size:.9rem; margin-top:5px; line-height:1.45}

/* ---- footer ---- */
.foot{border-top:1px solid var(--border); padding:36px 0 60px; color:var(--text-faint); font-size:.86rem}
.foot .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:6px}
@media(max-width:620px){.foot .cols{grid-template-columns:1fr}}
.foot b{color:var(--text-dim); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}

/* ---- rounds ledger ---- */
.lede{max-width:62ch; color:var(--text-dim); margin:0 0 22px; font-size:1.04rem}
.ledger{border:1px solid var(--border); border-radius:5px; overflow:hidden; background:var(--bg-raised); box-shadow:var(--shadow)}
details.round{border-bottom:1px solid var(--border)}
details.round:last-child{border-bottom:0}
summary.row{list-style:none; cursor:pointer; display:grid; grid-template-columns:50px minmax(0,1fr) auto; align-items:center; gap:15px; padding:16px 20px; transition:background .18s}
summary.row::-webkit-details-marker{display:none}
summary.row:hover,details[open]>summary.row{background:var(--accent-soft)}
.rnum{font-size:1.02rem; font-weight:500; color:var(--text-faint); font-variant-numeric:tabular-nums}
details[open] .rnum{color:var(--accent)}
.rmid{min-width:0}
.matchup{font-size:.72rem; letter-spacing:.03em; color:var(--text-dim); display:block; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rtitle{font-size:1.05rem; font-weight:600; line-height:1.24; letter-spacing:-.005em}
.rright{display:flex; align-items:center; gap:12px}
.chip{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:100px; white-space:nowrap; border:1px solid currentColor; font-family:ui-monospace,Menlo,monospace}
.chip--capture{color:var(--warn)} .chip--draw{color:var(--good)} .chip--anomaly{color:var(--anomaly)} .chip--stalemate{color:var(--slate)}
.caret{width:9px; height:9px; border-right:1.6px solid var(--text-faint); border-bottom:1.6px solid var(--text-faint); transform:rotate(45deg); transition:transform .2s; flex:none}
details[open] .caret{transform:rotate(225deg)}
.detail{padding:4px 20px 22px}
.kv{display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:13px; font-size:.72rem; color:var(--text-dim); font-family:ui-monospace,Menlo,monospace}
.kv b{color:var(--text)}
.detail .prose{max-width:68ch}
.detail .prose p{margin:0 0 .85em; font-size:.98rem; color:var(--text-dim); line-height:1.55}
.detail .prose strong{color:var(--text)}
.cite{margin:1.25em 0 0}
.cite p{margin:0; font-style:italic; color:var(--text); font-size:1.05rem; line-height:1.5}
.cite cite{display:block; margin-top:5px; font-style:normal; font-size:.72rem; color:var(--text-faint); font-family:ui-monospace,Menlo,monospace}
.replay-link{display:inline-flex; align-items:center; gap:8px; margin-top:15px; font-size:.8rem; letter-spacing:.02em; border:1px solid var(--border-strong); border-radius:100px; padding:7px 14px; color:var(--accent)}
.replay-link:hover{border-color:var(--accent); background:var(--accent-soft)}
.replay-link .play{font-size:.68rem}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}html{scroll-behavior:auto}}