/* PartyMutuel content pages — shares the app's design tokens (see index.html :root). */
:root{
  --track:#0c2418;        /* deep turf green */
  --track-2:#123524;
  --board:#0a1b12;        /* toteboard panel */
  --line:#2a5a40;
  --cream:#f4ecd8;
  --cream-dim:#cfc5ab;
  --led:#ffc233;          /* amber LED */
  --led-dim:#9a7a23;
  --silk-red:#e0533d;
  --silk-blue:#5ea8d8;
  --ok:#7fd98f;
  --focus:#ffd877;
  --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{
  margin:0;
  font-family:"Atkinson Hyperlegible",sans-serif;
  font-size:17px;line-height:1.6;
  color:var(--cream);
  background:
    radial-gradient(1200px 500px at 50% -10%, #1b4a30 0%, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.025) 119px 120px),
    var(--track);
  min-height:100vh;
}
a{color:var(--led)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--led);color:#1a1402;padding:.6rem 1rem;font-weight:700;z-index:100}
.skip-link:focus{left:8px;top:8px}

/* ---------- header ---------- */
header.site{border-bottom:4px double var(--line);background:linear-gradient(180deg,#091a10,#0c2418);padding:.9rem 1rem .8rem}
.masthead{max-width:1060px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}
.logo{margin:0;line-height:1}
.logo a{display:block;text-decoration:none}
.logo-img{display:block;height:clamp(60px,9vw,88px);width:auto;background:none;border:0}
.tagline{margin:0;color:var(--cream-dim);font-style:italic;font-size:.95rem}
.guidenav{max-width:1060px;margin:.7rem auto 0}
.guidenav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .5rem;font-size:.86rem}
.guidenav li a,.guidenav li span{display:inline-block;padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--cream-dim)}
.guidenav li a:hover{border-color:var(--led);color:var(--led)}
.guidenav li span[aria-current]{border-color:var(--led);color:var(--led);font-weight:700}

/* ---------- layout ---------- */
main{max-width:800px;margin:0 auto;padding:1.2rem 1rem 3rem}
.crumbs{font-size:.82rem;color:var(--cream-dim);margin:0 0 1rem}
.crumbs a{color:var(--cream-dim)}
h1{font-family:Bungee,cursive;font-weight:400;letter-spacing:.4px;line-height:1.1;font-size:clamp(1.6rem,4.4vw,2.2rem);margin:0 0 .6rem;color:var(--cream)}
h2,h3{font-family:Bungee,cursive;font-weight:400;letter-spacing:.4px;line-height:1.15}
h2{font-size:1.3rem;margin:2rem 0 .6rem;color:var(--led)}
h3{font-size:1.02rem;margin:1.4rem 0 .4rem}
.standfirst{font-size:1.08rem;color:var(--cream-dim);font-style:italic;margin:0 0 1.4rem;border-left:5px solid var(--led);padding-left:.9rem}
.prose p,.prose li{max-width:68ch}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.4rem}
.muted{color:var(--cream-dim)}
.small{font-size:.88rem}
.led{font-family:Oxanium,monospace;font-weight:700;color:var(--led);font-variant-numeric:tabular-nums}

/* ---------- cards / callouts ---------- */
.card{background:linear-gradient(180deg,var(--track-2),var(--board));border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;margin:1.4rem 0}
.card h2,.card h3{margin-top:0}
.banner{border-left:5px solid var(--led);background:rgba(255,194,51,.08);padding:.8rem 1rem;border-radius:0 8px 8px 0;margin:1.4rem 0}
.banner p:first-child{margin-top:0}
.banner p:last-child{margin-bottom:0}
.warn{border-left-color:var(--silk-red);background:rgba(224,83,61,.08)}

/* ---------- toteboard-style tables ---------- */
.tote{background:#06120b;border:3px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;margin:1.4rem 0;box-shadow:inset 0 0 40px rgba(0,0,0,.6);overflow-x:auto}
.tote table{width:100%;border-collapse:collapse;min-width:420px}
.tote caption{font-family:Bungee,cursive;color:var(--led);text-align:left;padding-bottom:.5rem;font-size:1rem}
.tote th{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cream-dim);text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--line)}
.tote td{padding:.45rem .5rem;border-bottom:1px dashed #1d3a2a;font-size:.95rem}
.tote tr:last-child td{border-bottom:none}
.tote td.num,.tote th.num{text-align:right;font-family:Oxanium,monospace;font-variant-numeric:tabular-nums}
.tote tfoot td{border-top:1px solid var(--line);font-weight:700}
.post{display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;height:1.9em;border-radius:5px;font-weight:700;font-family:Oxanium,monospace;margin-right:.55em;color:#08130c;background:var(--cream-dim)}

/* ---------- worked maths ---------- */
.math{font-family:Oxanium,monospace;background:rgba(0,0,0,.32);border:1px dashed var(--line);border-radius:8px;padding:.75rem .9rem;margin:1rem 0;overflow-x:auto;font-size:.94rem;line-height:1.7;color:var(--cream)}
.math b{color:var(--led)}

/* ---------- glossary ---------- */
dl.gloss{margin:1rem 0}
dl.gloss dt{font-weight:700;color:var(--led);margin-top:1rem}
dl.gloss dd{margin:.2rem 0 0;padding:0;max-width:68ch}

/* ---------- guide index cards ---------- */
.guidegrid{display:grid;gap:1rem;margin:1.4rem 0;list-style:none;padding:0}
@media(min-width:700px){.guidegrid{grid-template-columns:1fr 1fr}}
.guidegrid a{display:block;height:100%;text-decoration:none;color:inherit;background:linear-gradient(180deg,var(--track-2),var(--board));border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.guidegrid a:hover{border-color:var(--led)}
.guidegrid h2{margin:0 0 .35rem;font-size:1.02rem;color:var(--led)}
.guidegrid p{margin:0;font-size:.9rem;color:var(--cream-dim)}

/* ---------- ads ---------- */
.ad{border:1px dashed #557a64;border-radius:var(--radius);background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px),#0a160f;color:#8fa893;text-align:center;padding:1.1rem;margin:1.8rem 0;font-size:.85rem}
.ad strong{display:block;letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;color:#6e8a77;margin-bottom:.5rem}
.ad ins.adsbygoogle[data-ad-status="unfilled"]{display:none}

/* ---------- more reading + footer ---------- */
.morereading{border-top:1px dashed var(--line);margin-top:2rem;padding-top:1rem}
.morereading h2{font-size:1rem;margin:0 0 .5rem}
.morereading ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .5rem;font-size:.88rem}
.morereading li a{display:inline-block;padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--cream-dim)}
.morereading li a:hover{border-color:var(--led);color:var(--led)}
footer.site{border-top:4px double var(--line);padding:1.4rem 1rem 2.2rem;background:#081209}
footer.site .inner{max-width:1060px;margin:0 auto;color:var(--cream-dim);font-size:.85rem}
.cta{display:inline-block;font-weight:700;border-radius:8px;border:2px solid var(--led);background:var(--led);color:#1a1402;padding:.55rem 1.1rem;text-decoration:none;margin:.4rem 0}
.cta:hover{filter:brightness(1.08)}