/* ESL — The Harness Beats the Model — shared styles */
:root{
  --bg:#0b0e14; --bg2:#11151f; --ink:#e9eef5; --muted:#98a2b3;
  --amp:#38bdf8; --amp2:#22d3ee; --claude:#d97757; --claude2:#e0906f;
  --win:#34d399; --warn:#fbbf24; --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.04);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:
  radial-gradient(1200px 700px at 82% -8%, rgba(56,189,248,.10), transparent 60%),
  radial-gradient(1000px 650px at -10% 108%, rgba(217,119,87,.10), transparent 55%),
  var(--bg);
  color:var(--ink);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--amp);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1160px,calc(100% - 40px));margin:0 auto}
html,body{overflow-x:clip;max-width:100%}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(11,14,20,.72);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:60px;flex-wrap:wrap}
.nav .brand{font-weight:800;letter-spacing:-.01em;margin-right:auto;font-size:1.02rem;color:var(--ink)}
.nav .brand:hover{text-decoration:none}
.nav .brand span{color:var(--amp)}
.navlinks{display:flex;align-items:center;gap:20px}
.nav a.link{color:var(--muted);font-size:.9rem;font-weight:600}
.nav a.link:hover{color:var(--ink);text-decoration:none}
.nvt{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
@media(max-width:760px){
  .burger{display:flex}
  .nav .brand{margin-right:0}
  .navlinks{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;padding:6px 0 14px}
  .nvt:checked ~ .navlinks{display:flex}
  .nav a.link{font-size:1.05rem;padding:7px 0}
  .navcta{align-self:flex-start;margin-top:6px}
}

/* hero */
.hero{padding:clamp(56px,10vw,120px) 0 clamp(40px,7vw,80px);position:relative}
.kicker{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amp);font-weight:800;margin-bottom:16px}
.kicker.c{color:var(--claude)}
h1{font-size:clamp(2.4rem,7vw,5rem);font-weight:900;line-height:1.02;letter-spacing:-.025em}
h1 .amp{color:var(--amp)} h1 .cl{color:var(--claude)}
.tagline{font-size:clamp(1.4rem,3.9vw,2.6rem);font-weight:850;letter-spacing:-.01em;margin-top:20px;line-height:1.9}
.tagline .tg{display:inline-block;white-space:nowrap}
.tagline .txt{background:linear-gradient(90deg,var(--amp),var(--claude));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag-ico{height:2.1em;width:2.1em;object-fit:cover;border-radius:50%;vertical-align:-.72em;
  margin:0 .18em 0 .34em;border:2px solid rgba(255,255,255,.28);box-shadow:0 3px 12px rgba(0,0,0,.4)}
@media(max-width:560px){.tag-ico{height:1.7em;width:1.7em;vertical-align:-.55em}}
.lead{font-size:clamp(1.05rem,2.2vw,1.4rem);color:#c7d0da;max-width:780px;margin-top:22px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;font-weight:700;
  font-size:.95rem;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.btn:hover{text-decoration:none;border-color:rgba(255,255,255,.25)}
.btn.amp{background:linear-gradient(90deg,var(--amp),var(--amp2));color:#04222e;border:none}
.btn.cl{background:linear-gradient(90deg,var(--claude),var(--claude2));color:#2a0f06;border:none}

/* sections */
section{padding:clamp(40px,7vw,80px) 0;border-top:1px solid var(--line)}
.eyebrow{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:12px}
h2{font-size:clamp(1.7rem,4.4vw,2.9rem);font-weight:850;letter-spacing:-.02em;line-height:1.1}
h3{font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:800}
.p{font-size:clamp(1rem,1.9vw,1.15rem);color:#c7d0da;max-width:820px;margin-top:16px}
.mut{color:var(--muted)}
.b{font-weight:800}

/* pillar cards */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:860px){.pillars{grid-template-columns:1fr}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.pcard .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;background:#0a0d13;border-bottom:1px solid var(--line)}
.pcard .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard .tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--amp)}
.pcard .tag.c{color:var(--claude)} .pcard .tag.g{color:var(--win)}
.pcard p{color:#c1cbd6;font-size:.98rem}
.pcard .go{margin-top:auto;font-weight:700;font-size:.92rem}

/* stat grid */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.stat .big{font-size:clamp(1.8rem,5vw,2.9rem);font-weight:900;line-height:1.02}
.stat .big.amp{color:var(--amp)} .stat .big.cl{color:var(--claude)} .stat .big.win{color:var(--win)}
.stat .lab{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:8px}

/* table */
.tbl{width:100%;border-collapse:collapse;margin-top:26px;font-size:clamp(.85rem,1.6vw,1rem)}
.tbl th,.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:800}
.tbl tr.tot{background:rgba(255,255,255,.04);font-weight:800}
.tbl .amp{color:var(--amp)} .tbl .cl{color:var(--claude)} .tbl .win{color:var(--win)}
.scroll{overflow-x:auto}

/* callout / quote */
.callout{border-left:3px solid var(--amp);background:rgba(56,189,248,.06);padding:16px 20px;border-radius:0 12px 12px 0;margin-top:24px;color:#d7e0ea}
.callout.c{border-color:var(--claude);background:rgba(217,119,87,.06)}
.quote{font-size:clamp(1.3rem,3.4vw,2rem);font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-top:10px}
.quote .mut{color:var(--muted)}

/* code / prompt */
.codebox{background:#080b11;border:1px solid var(--line);border-radius:14px;padding:clamp(16px,2.4vw,24px);
  font-family:'SF Mono',Consolas,Menlo,monospace;font-size:clamp(.78rem,1.5vw,.95rem);line-height:1.6;
  color:#cdd7e2;white-space:pre-wrap;margin-top:20px;max-height:460px;overflow:auto}
.codebox .k{color:#c792ea}.codebox .c{color:#6b7a8d}.codebox .s{color:#7ee787}
.mono{font-family:Consolas,monospace}

/* two-up game panels */
.faceoff{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
@media(max-width:800px){.faceoff{grid-template-columns:1fr}}
.gpanel{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--card);display:flex;flex-direction:column;gap:12px}
.gpanel.amp{border-color:rgba(56,189,248,.34);background:linear-gradient(180deg,rgba(56,189,248,.08),rgba(56,189,248,.02))}
.gpanel.cl{border-color:rgba(217,119,87,.34);background:linear-gradient(180deg,rgba(217,119,87,.08),rgba(217,119,87,.02))}
.gpanel h3{font-size:1.3rem}
.gpanel .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.gpanel .meta span{font-size:.78rem;border:1px solid var(--line);border-radius:99px;padding:4px 10px;color:#c7d0da}

/* about */
.about{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:start;margin-top:30px}
@media(max-width:640px){.about{grid-template-columns:1fr;text-align:center}}
.about img.face{width:180px;height:180px;border-radius:20px;object-fit:cover;border:1px solid var(--line)}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:.86rem}
footer .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
footer img.esl{height:40px;width:auto;border-radius:8px;background:#fff;padding:4px}
footer a{color:var(--amp)}

.badge{display:inline-block;padding:4px 10px;border-radius:99px;border:1px solid var(--line);
  font-size:.74rem;font-weight:700;color:#c7d0da;background:var(--card);margin:3px 4px 3px 0}
.badge.same{border-color:#176c80;color:#a9f3ff;background:rgba(23,108,128,.15)}

/* nav active + cta button inside nav */
.nav a.link.active{color:var(--ink)}
.nav a.navcta{color:#04222e;background:linear-gradient(90deg,var(--amp),var(--amp2));
  padding:8px 14px;border-radius:10px;font-size:.85rem;font-weight:800}
.nav a.navcta:hover{text-decoration:none;filter:brightness(1.05)}

/* TL;DR banner */
.tldr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  margin-top:30px;padding:16px 22px;border-radius:16px;border:1px solid rgba(52,211,153,.32);
  background:linear-gradient(90deg,rgba(52,211,153,.12),rgba(56,189,248,.06))}
.tldr .txt{font-weight:800;font-size:clamp(1rem,2.2vw,1.25rem)}
.tldr .txt span{color:var(--win)}
.btn.win{background:linear-gradient(90deg,var(--win),#22d3ee);color:#04231a;border:none}

/* back link */
.backlink{display:inline-flex;align-items:center;gap:7px;margin:26px 0 4px;font-weight:700;color:var(--muted)}
.backlink:hover{color:var(--ink);text-decoration:none}

/* winner banner on final scores */
.winner{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
@media(max-width:760px){.winner{grid-template-columns:1fr}}
.wcard{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--card);text-align:center}
.wcard.amp{border-color:rgba(56,189,248,.4);background:linear-gradient(180deg,rgba(56,189,248,.10),rgba(56,189,248,.02))}
.wcard .crown{font-size:1.9rem}
.wcard .who{font-weight:900;font-size:clamp(1.3rem,3vw,1.9rem);margin-top:6px}
.wcard .who.amp{color:var(--amp)} .wcard .who.cl{color:var(--claude)}
.wcard .sub{color:var(--muted);font-size:.9rem;margin-top:6px}