/* ═══════════════════════════════════════════════════════════
ChessPath — shared stylesheet
Change the palette here and it changes everywhere.
═══════════════════════════════════════════════════════════ */
:root{
--bg:#0e1013; --panel:#15181d; --panel2:#1b1f25; --line:#282e36; --line2:#39414c;
--tx:#e8e5df; --mut:#98a0aa; --dim:#7c8791;
--gold:#c9a24b; --gold2:#e0bd6c; --jade:#6f9c7c; --red:#c86255; --blue:#6b8fb5;
/* --ctl: control boundary; needs 3:1 vs --panel2 for WCAG 1.4.11 */
--ctl:#5c6a7d;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--han:"Songti SC","Noto Serif SC","Source Han Serif SC",STSong,SimSun,Georgia,serif;
--wrap:1000px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--gold2);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.28)}
a:hover{border-color:var(--gold2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
/* ── skip link ── */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#12140f;padding:10px 16px;z-index:200;border:0}
.skip:focus{left:8px;top:8px}
/* ── focus visibility (WCAG 2.4.7 / 1.4.11) ──
The UA default ring is unreliable on this dark palette and disappears
entirely on the gold buttons. One explicit, high-contrast ring everywhere. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
button.btn:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* keep a ring for browsers without :focus-visible support */
@supports not selector(:focus-visible){
a:focus,button:focus,summary:focus,[tabindex]:focus{outline:2px solid var(--gold);outline-offset:2px}
}
/* scrollable table wrapper made keyboard-reachable by site.js */
.scrollx:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ── header / nav ── */
.topbar{position:sticky;top:0;z-index:60;background:rgba(14,16,19,.985);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);box-shadow:0 8px 18px -14px rgba(0,0,0,.9)}
.topin{max-width:var(--wrap);margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:9px;padding:13px 0;font-weight:600;font-size:16px;
color:var(--tx);border:0;flex:0 0 auto;letter-spacing:-.01em}
.brand:hover{color:var(--gold2)}
.brand .gl{font-family:var(--han);color:var(--gold);font-size:19px;line-height:1}
.mainnav{display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;flex:1}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{flex:0 0 auto;color:var(--dim);font-size:13.5px;padding:14px 11px;border:0;
border-bottom:2px solid transparent;white-space:nowrap;transition:.15s}
.mainnav a:hover{color:var(--mut)}
.mainnav a[aria-current="page"]{color:var(--gold2);border-bottom-color:var(--gold)}
/* ── hero ── */
.hero{padding:54px 0 34px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);margin-bottom:16px}
.hanbig{font-family:var(--han);font-size:clamp(28px,6.4vw,44px);line-height:1.35;color:var(--gold2);
margin:0 0 12px;letter-spacing:.06em}
h1{font-size:clamp(25px,5.2vw,40px);line-height:1.18;margin:0 0 16px;font-weight:600;letter-spacing:-.015em}
.sub{color:var(--mut);font-size:16px;max-width:66ch;margin:0}
.sub em,.sub strong{color:var(--tx);font-style:normal}
/* ── typography ── */
main{padding:36px 0 90px}
main h1{font-size:24px;margin:0 0 8px;font-weight:600;letter-spacing:-.01em}
main h1 .han,main h2 .han{font-family:var(--han);color:var(--gold);font-size:19px;margin-left:10px;font-weight:400}
main h2{font-size:18px;margin:40px 0 12px;font-weight:600}
main h2:first-child{margin-top:0}
main h3,h2.kick{font-size:13px;margin:24px 0 8px;font-weight:600;color:var(--gold2);
font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase}
/* .kick = an h3 that must look like the old h4 card label. Used where the
heading is semantically a section but was visually a kicker, so promoting
it to h3 does not change the design. */
h2.kick:first-child{margin-top:0}
/* .sec = an h3 that must keep the old h2 scale (top-level sections on a page
whose title sits in the hero). .plain = an h4 that keeps the h3 look. */
h2.sec{font-size:24px;margin:40px 0 8px;font-weight:600;letter-spacing:-.01em;
font-family:inherit;text-transform:none;color:var(--tx)}
h3.plain{font-size:18px;margin:40px 0 12px;font-weight:600;color:var(--tx);
font-family:inherit;letter-spacing:normal;text-transform:none}
.card h3.plain{margin-top:0}
/* the page-title heading when it sits in the hero (index) keeps the large scale */
.hero h1{font-size:clamp(25px,5.2vw,40px);line-height:1.18;margin:0 0 16px;
font-weight:600;letter-spacing:-.015em}
.hero h1 .han{font-size:.5em}
/*