/* ==========================================================================
   chess.css  —  Ivory & Walnut theme for the Chess section
   True sibling of astronomy.css & philosophy.css: same bespoke design system
   and component vocabulary, light parchment palette, EB Garamond display,
   single walnut accent + felt-green secondary, checkerboard signature motif.
   Self-contained. Link with:  <link rel="stylesheet" href="/chess.css">
   ========================================================================== */

:root{
  --board:#f4efe3;          /* page background (ivory, never #fff) */
  --board-2:#ece3d1;        /* sunken tint / table head */
  --panel:#fbf8f1;          /* card surface */
  --panel-2:#f7f1e4;        /* raised surface / pullquote */
  --ink:#211c15;            /* primary text (off-black) */
  --ink-soft:#5d5447;       /* muted text */
  --walnut:#6b4a2b;         /* single accent — the wood */
  --walnut-d:#523619;
  --felt:#3a5a40;           /* secondary accent — board felt green */
  --felt-d:#2c4632;
  --aegean:#1f3a5f;         /* quiet blue for inline links */
  --line:#ddd2bd;           /* hairline borders */
  --line-2:#cabfa6;
  --shadow:24px 28px 60px -28px rgba(60,44,22,.30);
  --display:'EB Garamond', Georgia, serif;
  --body:'Open Sans', system-ui, sans-serif;
  /* board diagram colours (match recolored SVGs) */
  --sq-light:#f1e8d5; --sq-dark:#8a6a45; --sq-hl:#f0c64b;
  --piece-w:#f7f5ef; --piece-b:#262421; --piece-stroke:#3a2a1a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--board);
  background-image:
    radial-gradient(1100px 560px at 88% -8%, rgba(107,74,43,.09), transparent 60%),
    radial-gradient(820px 480px at -8% 6%, rgba(58,90,64,.07), transparent 55%);
  background-attachment:fixed;
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:var(--aegean);text-decoration:none;transition:color .18s}
a:hover{color:var(--walnut-d)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
.clearfix::after{content:"";display:table;clear:both}

/* ---- Top bar ---- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(251,248,241,.88);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:14px 28px;gap:18px}
.logo{font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.logo:hover{color:var(--walnut-d)}
.menu{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.menu a{color:var(--ink-soft);font-size:14px;font-weight:500;white-space:nowrap}
.menu a:hover{color:var(--walnut-d)}
.menu a.active{color:var(--walnut-d);border-bottom:2px solid var(--walnut);padding-bottom:2px}

/* ---- HERO (portrait-left, like astronomy) + checkerboard corner motif ---- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,#fbf8f1 0%,var(--board) 100%)}
.hero::after{content:"";position:absolute;top:0;right:0;width:300px;height:300px;pointer-events:none;
  background-image:
    linear-gradient(45deg,rgba(107,74,43,.06) 25%,transparent 25%,transparent 75%,rgba(107,74,43,.06) 75%),
    linear-gradient(45deg,rgba(107,74,43,.06) 25%,transparent 25%,transparent 75%,rgba(107,74,43,.06) 75%);
  background-size:50px 50px;background-position:0 0,25px 25px;
  -webkit-mask:radial-gradient(300px 300px at 100% 0,#000,transparent 70%);
          mask:radial-gradient(300px 300px at 100% 0,#000,transparent 70%)}
.hero-inner,.hero-grid{display:grid;grid-template-columns:250px 1fr;gap:46px;align-items:center;
  max-width:1180px;margin:0 auto;padding:60px 28px 54px;position:relative;z-index:1}
.hero-grid{padding:48px 28px}
.kicker{font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--walnut-d)}
.hero h1,.hero-grid h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,5.2vw,60px);
  line-height:1.04;letter-spacing:.005em;margin:14px 0 18px;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--walnut-d)}
.hero p,.hero .lede,.hero-grid p{font-size:19px;color:var(--ink-soft);max-width:62ch;font-weight:400}

/* portrait — circular in a walnut ring */
.portrait{width:210px;height:210px;border-radius:50%;object-fit:cover;justify-self:center;
  border:3px solid var(--walnut);box-shadow:0 0 0 8px var(--panel), 0 0 0 9px var(--line), var(--shadow)}

/* checkerboard divider — chess's signature motif (answer to the meander/starfield) */
.checker{height:16px;width:176px;margin:16px 0 0;border:1px solid var(--line-2);border-radius:2px;
  background-image:
    linear-gradient(45deg,var(--walnut) 25%,transparent 25%,transparent 75%,var(--walnut) 75%),
    linear-gradient(45deg,var(--walnut) 25%,transparent 25%,transparent 75%,var(--walnut) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;opacity:.55}

/* ---- Sections & headings ---- */
section{padding:52px 0;border:none}
.eyebrow,.sub-label{display:block;font-weight:600;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--walnut-d);margin-bottom:4px}
h1,h2,h3,h4,h5,h6{font-family:var(--display);color:var(--ink);font-weight:600;line-height:1.18}
h2{font-size:33px;margin:6px 0 4px;letter-spacing:.005em}
h3{font-size:22px;letter-spacing:.005em;margin-bottom:6px}
h4{font-size:19px}
p{color:var(--ink);max-width:74ch}
section .wrap > p,.wrap.clearfix > p{font-size:17px;color:var(--ink);margin:0 0 16px;max-width:72ch}
section .wrap > .kicker{margin-bottom:2px}
section .wrap > h3{margin-top:1.6rem}
strong{color:var(--ink);font-weight:700}
em{color:var(--ink)}
.lede{font-family:var(--body);font-size:19px;color:var(--ink-soft);max-width:64ch;margin:10px 0 18px;line-height:1.55}

/* ---- Generic grids ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}

/* ---- Cards (alternating walnut / felt top rule, like board squares) ---- */
.card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--walnut);
  border-radius:14px;padding:26px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card:nth-child(even){border-top-color:var(--felt)}
.card h3{margin:0 0 8px;font-size:21px}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--walnut-d)}
.card p{color:var(--ink-soft);font-size:15px;margin:0;max-width:none}

/* ---- Quick facts ---- */
.quick-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px}
.quick-facts .card{border-top-width:1px;padding:18px 20px}
.quick-facts .card h3,.quick-facts .card .kicker{font-family:var(--body);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--walnut-d);font-weight:700;margin-bottom:5px}
.quick-facts .card strong{font-family:var(--display);font-size:18px;color:var(--ink);font-weight:600}

/* ---- Details / stars-style lists ---- */
.details-list,.stars-list{list-style:none;margin:18px 0 0;padding:0;max-width:880px}
.details-list li,.stars-list li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:16px}
.details-list li:last-child,.stars-list li:last-child{border-bottom:none}
.star-name{font-family:var(--display);font-weight:600;font-size:18px;color:var(--walnut);margin-right:6px}

/* ---- Feature image + figures ---- */
.feature-image{display:block;width:100%;max-width:720px;height:auto;margin:0 auto 8px;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel-2)}
.source-note,.image-source{font-size:13.5px;color:var(--ink-soft);margin-top:12px;line-height:1.6;max-width:80ch}
.source-note a{color:var(--aegean)}
figure{margin:0 0 8px}
figcaption{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.5;font-style:italic}
.float-figure{margin:6px 0 22px;max-width:46%;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.float-figure.right{float:right;margin-left:30px}
.float-figure.left{float:left;margin-right:30px}
.float-figure img{display:block;width:100%;height:auto}
.float-figure figcaption{padding:13px 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;font-style:normal}
main img{max-width:100%;height:auto}

/* ---- Image gallery ---- */
.image-gallery,.image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:24px}
.image-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.image-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.image-card img{display:block;width:100%;height:200px;object-fit:cover;background:var(--panel-2)}
.image-card h3{padding:16px 18px 0;font-size:19px}
.image-card h3 a{color:var(--ink)}
.image-card h3 a:hover{color:var(--walnut-d)}
.image-card p{padding:6px 18px 20px;color:var(--ink-soft);font-size:14.5px;margin:0;max-width:none}

/* ---- Pullquote / insight callouts ---- */
.pullquote{background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--walnut);
  border-radius:0 14px 14px 0;padding:24px 30px;margin:26px 0;max-width:880px;font-style:italic}
.pullquote,.pullquote p{font-family:var(--display);font-size:21px;color:var(--ink);line-height:1.5}
.pullquote p{margin:0;max-width:none}
.pullquote .source-note{font-style:normal;font-family:var(--body);margin-top:12px;font-size:13.5px}
.insight-label{display:block;font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--walnut-d);font-weight:700;margin-bottom:8px}
.insight-box{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--felt);
  border-radius:0 14px 14px 0;padding:22px 28px;margin:24px 0;max-width:880px}
.insight-box p{color:var(--ink-soft);font-size:15.5px;margin:0;max-width:none}

/* ---- Data / endgame / style tables ---- */
.data-table,.endgame-table,.style-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.data-table th,.data-table td,.endgame-table th,.endgame-table td,.style-table th,.style-table td{
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft)}
.data-table thead th,.endgame-table thead th,.style-table thead th,
.endgame-table th,.style-table th{font-family:var(--display);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--walnut-d);background:var(--board-2)}
.data-table td:first-child,.endgame-table td:first-child,.style-table td:first-child{color:var(--ink);font-weight:600}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td,.endgame-table tr:hover,.style-table tr:hover{background:rgba(107,74,43,.05)}

/* ---- Ordered/unordered lists in prose ---- */
.wrap ol,.wrap ul{margin:8px 0 16px 22px;color:var(--ink-soft)}
.wrap ol li,.wrap ul li{margin:0 0 8px}
.wrap ol li strong,.wrap ul li strong{color:var(--ink)}

/* ---- Sources block ---- */
.sources{max-width:880px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.sources h3{margin-bottom:8px}
.sources p,.sources li{color:var(--ink-soft);font-size:14.5px}
.sources ul{margin:8px 0 0 20px}
.sources li{margin:0 0 7px}

/* ---- Buttons ---- */
.btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;padding:12px 22px;border-radius:8px;
  background:var(--walnut);color:#fff;border:1px solid var(--walnut);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,background .18s}
.btn:hover{color:#fff;transform:translateY(-2px);background:var(--walnut-d);
  box-shadow:0 14px 26px -12px rgba(107,74,43,.5)}
.btn-secondary{background:transparent;color:var(--walnut);border:1px solid var(--line-2)}
.btn-secondary:hover{background:transparent;color:var(--walnut-d);border-color:var(--walnut)}

/* ---- Badges ---- */
.badge{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;
  border-radius:4px;font-weight:700;margin-left:6px;vertical-align:middle}
.badge-live,.live{background:#e3ecdf;color:var(--felt-d)}
.badge-soon{background:var(--board-2);color:var(--ink-soft)}
.badge-here{background:var(--walnut);color:#fff}
.badge-fav{background:#f4e3d3;color:var(--walnut-d)}

/* ---- Series nav (3-part / multi-part guide widget) ---- */
.series-nav{border:1px solid var(--line);border-radius:14px;padding:22px 26px;background:var(--panel)}
.series-nav-title{font-family:var(--display);font-weight:600;margin:2px 0 14px;font-size:19px}
.series-part{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:12px 0;
  border-top:1px solid var(--line);align-items:baseline}
.series-part:first-of-type{border-top:none}
.part-num{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--walnut-d);font-weight:700}
.part-link a{font-weight:600}
.current-part .part-link{color:var(--ink);font-weight:700}
.upcoming-part{opacity:.7}

/* ---- Chess board diagrams (CSS grid + unicode glyphs) ---- */
.board-section{margin:28px 0}
.board-col{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.board-outer{display:inline-block;border:2px solid var(--walnut-d);background:var(--walnut-d);
  border-radius:6px;padding:0;max-width:100%}
.chess-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  width:320px;height:320px;max-width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden}
.sq{display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.sq.light{background:var(--sq-light)}
.sq.dark{background:var(--sq-dark)}
.sq.hl-to{background:var(--sq-hl)}
/* piece colours match the SVG diagrams: cream whites (outlined) on, solid charcoal blacks */
.sq.wp,.sq.wn,.sq.wb,.sq.wr,.sq.wq,.sq.wk{color:var(--piece-w);
  text-shadow:0 0 1px var(--piece-stroke),0 1px 0 var(--piece-stroke),0 0 2px rgba(0,0,0,.35)}
.sq.bp,.sq.bn,.sq.bb,.sq.br,.sq.bq,.sq.bk{color:var(--piece-b)}
.board-caption{font-size:14px;color:var(--ink-soft);margin-top:10px;font-style:italic;max-width:60ch}
.file-labels,.rank-labels{display:flex;font-size:12px;color:var(--ink-soft);font-family:monospace}
@media(max-width:480px){.chess-board{width:280px;height:280px}.sq{font-size:20px}}

/* ---- Move notation ---- */
.move-line{font-family:'Courier New',Courier,monospace;font-weight:600;line-height:1.9;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 16px;
  margin:14px 0;font-size:15px;color:var(--ink)}
.opening-moves,.og-moves,.move{font-family:'Courier New',Courier,monospace;font-weight:600;
  background:var(--board-2);padding:2px 6px;border-radius:4px;font-size:15px;color:var(--ink)}
.num{color:var(--walnut-d);font-weight:700;margin-right:2px}
.black-line{color:var(--ink-soft)}

/* ---- Opening blocks ---- */
.opening-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px}
.opening-main{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--panel)}
.opening-meta,.opening-type,.og-tag{font-size:12px;color:var(--felt-d);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.opening-desc{color:var(--ink-soft);font-size:15px}
.opening-list{list-style:none;padding:0;margin:18px 0 0}
.opening-list li{padding:16px 2px;border-bottom:1px solid var(--line)}
.opening-list li:last-child{border-bottom:none}
.og-cell{padding:4px 0}
.var-block{margin:18px 0;padding:16px 20px;background:var(--panel-2);border:1px solid var(--line);
  border-left:3px solid var(--walnut);border-radius:0 10px 10px 0}
.var-label{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--walnut-d);font-weight:700;margin-bottom:6px}

/* ---- FAQ ---- */
.faq-item{border-top:1px solid var(--line);padding:18px 0}
.faq-item:first-of-type{border-top:none}
.faq-q{font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:8px;color:var(--ink)}

/* ---- Bottom CTA strip (dark walnut, like astronomy's panel strip) ---- */
.cta,.bottom-cta{background:var(--ink);color:var(--board);border:1px solid var(--ink);
  border-radius:18px;padding:40px 30px;margin-top:8px}
.cta h2,.bottom-cta h2{color:var(--board)}
.cta p,.bottom-cta p{color:#c9bfa9;max-width:60ch}
.cta .kicker,.bottom-cta .kicker,.cta .eyebrow{color:var(--walnut)}
.cta a:not(.btn),.bottom-cta a:not(.btn){color:#e0c79e;font-weight:600}
.cta a:not(.btn):hover,.bottom-cta a:not(.btn):hover{color:#f0dcb8}
.cta .btn,.bottom-cta .btn{background:var(--walnut);border-color:var(--walnut)}
.cta .btn:hover,.bottom-cta .btn:hover{background:var(--walnut-d)}

/* ---- Profile / site links ---- */
.profile-links,.site-links{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:10px}

/* ---- Footer ---- */
footer{background:#1a1611;color:#c9bfa9;font-size:14px;border-top:1px solid var(--line);
  max-width:none;margin:0;padding:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1180px;
  margin:0 auto;padding:46px 28px 10px}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-col a{font-size:15px}
.footer-bottom{max-width:1180px;margin:0 auto;padding:22px 28px 30px;line-height:1.9;text-align:center;
  border-top:1px solid #2a241c}
footer > .wrap{padding:30px 28px;line-height:1.9}
footer a{color:#e0c79e}
footer a:hover{color:#f0dcb8}

/* ---- Responsive ---- */
@media(max-width:880px){
  .hero-inner,.hero-grid{grid-template-columns:1fr;gap:26px;padding:44px 24px 40px}
  .hero::after{display:none}
  .portrait{order:-1;width:150px;height:150px}
  .grid-2,.grid-3,.opening-grid,.footer-grid{grid-template-columns:1fr;gap:16px}
  .float-figure,.float-figure.left,.float-figure.right{float:none;max-width:100%;margin:18px 0}
  h2{font-size:27px}
  .menu{gap:12px;font-size:13px}
  .wrap{padding:0 20px}
  section{padding:40px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}