/* GymScape Guide: shares the landing palette + fonts. */
:root{
  --ink:#1a1c1f; --panel:#202329; --panel-2:#25282c; --edge:#383c42; --edge-lit:#474c53;
  --gold:#ffc44d; --gold-deep:#e8a72e; --xp:#ffd84d; --parchment:#eceef4; --stone:#969cac;
  --emerald:#41d18a; --danger:#e0564b;
  --font-num:"Jersey 10", ui-monospace, monospace;
  --font-display:"Cinzel Decorative","Cinzel", ui-serif, Georgia, serif;
  --font-heading:"Cinzel", ui-serif, Georgia, serif;
  --font:"Spectral", ui-serif, Georgia, serif;
}
*{box-sizing:border-box}
body{margin:0; background:radial-gradient(ellipse 120% 80% at 50% 0%, #23262c 0%, var(--ink) 62%) fixed; color:var(--parchment); font-family:var(--font); line-height:1.65}
a{color:var(--gold); text-decoration:none} a:hover{text-decoration:underline}
.topbar{position:sticky; top:0; z-index:10; background:rgba(13,14,18,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--edge)}
.topbar .in{max-width:880px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.wordmark{font-family:var(--font-display); font-weight:900; letter-spacing:2px; color:var(--gold); font-size:19px}
.topbar nav{display:flex; gap:18px; font-size:14px}
.topbar nav a{color:var(--stone)} .topbar nav a:hover{color:var(--parchment); text-decoration:none}
main{max-width:880px; margin:0 auto; padding:40px 22px 90px}
.eyebrow{color:var(--gold); font-family:var(--font-heading); font-weight:700; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px}
h1{font-family:var(--font-display); font-size:clamp(30px,5vw,44px); line-height:1.1; margin:0 0 14px}
h2{font-family:var(--font-heading); font-size:24px; margin:44px 0 10px; color:var(--parchment)}
h3{font-family:var(--font-heading); font-size:18px; margin:28px 0 8px}
p,li{color:#c9cdd8; font-size:16.5px}
.lead{font-size:19px; color:var(--stone)}
.card{background:var(--panel); border:1px solid var(--edge); border-radius:18px; padding:22px 24px; margin:18px 0}
.card.tip{border-color:rgba(255,196,77,.4)}
.card.warn{border-color:rgba(224,86,75,.45)}
.card b:first-child{font-family:var(--font-heading); color:var(--gold)}
.pix{image-rendering:pixelated}
.inline-ic{height:26px; width:26px; vertical-align:-6px; margin:0 2px}
.figrow{display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; margin:18px 0}
.figrow figure{margin:0; text-align:center}
.figrow img{height:84px; width:auto; image-rendering:pixelated; filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.figrow figcaption{font-size:12.5px; color:var(--stone); margin-top:4px}
table{border-collapse:collapse; width:100%; margin:16px 0; font-size:15px}
th,td{border:1px solid var(--edge); padding:9px 12px; text-align:left}
th{background:var(--panel-2); font-family:var(--font-heading); font-size:13px; letter-spacing:.5px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px} @media(max-width:640px){.grid2{grid-template-columns:1fr}}
.toc{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px} @media(max-width:700px){.toc{grid-template-columns:1fr 1fr}}
.toc a{display:block; background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:18px; text-decoration:none; transition:border-color .15s}
.toc a:hover{border-color:rgba(255,196,77,.5)}
.toc b{display:block; font-family:var(--font-heading); color:var(--parchment); margin-bottom:4px}
.toc span{color:var(--stone); font-size:13.5px; line-height:1.4}
.pagenav{display:flex; justify-content:space-between; margin-top:60px; padding-top:20px; border-top:1px solid var(--edge); font-size:15px}
footer{border-top:1px solid var(--edge); padding:26px 22px; text-align:center; color:var(--stone); font-size:13.5px}