:root {
  --ink:#10212b;
  --ink-soft:#40545f;
  --paper:#f4f1e9;
  --paper-2:#eae4d8;
  --white:#fffdf8;
  --navy:#0b2430;
  --accent:#d86b38;
  --water:#7aa7ad;
  --line:rgba(16,33,43,.17);
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.58}
a{color:inherit}
.skip-link{position:fixed;left:1rem;top:1rem;z-index:100;background:var(--white);padding:.7rem 1rem;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem clamp(1rem,4vw,3rem);background:rgba(244,241,233,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{text-decoration:none;font-weight:850}
.site-header nav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none}
.site-header nav a{white-space:nowrap;text-decoration:none;color:var(--ink-soft);font-size:.85rem;font-weight:700}
.hero{padding:clamp(4rem,9vw,8rem) clamp(1rem,5vw,4rem);background:linear-gradient(145deg,var(--navy),#081920 75%);color:var(--white)}
.hero-inner,.section>*{width:min(var(--max),100%);margin-left:auto;margin-right:auto}
.eyebrow{margin:0 0 .7rem;color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-size:.73rem;font-weight:850}
.hero .eyebrow{color:#f0b18c}
h1,h2,h3,p{margin-top:0}
h1{max-width:15ch;font-size:clamp(2.8rem,7vw,6rem);line-height:.96;letter-spacing:-.05em;margin-bottom:1.5rem}
h2{max-width:18ch;font-size:clamp(2rem,4.5vw,4rem);line-height:1;letter-spacing:-.04em;margin-bottom:1rem}
h3{font-size:clamp(1.2rem,2vw,1.75rem);line-height:1.15}
.hero p:not(.eyebrow){max-width:50rem;color:#c5d5d8;font-size:1.08rem}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.7rem 1rem;border-radius:999px;text-decoration:none;font-weight:800}
.button-primary{background:var(--accent);color:var(--white)}
.button-secondary{border:1px solid rgba(255,255,255,.35)}
.section{padding:clamp(3.5rem,8vw,7rem) clamp(1rem,5vw,4rem)}
.section-alt{background:var(--paper-2)}
.section-dark{background:var(--navy);color:var(--white)}
.section-heading{margin-bottom:2rem}
.section-heading>p:not(.eyebrow){max-width:52rem;color:var(--ink-soft)}
.section-dark .section-heading>p:not(.eyebrow){color:#c0d0d4}
.quick-grid,.topic-grid,.season-grid,.race-grid{display:grid;gap:.7rem}
.quick-grid{grid-template-columns:repeat(4,1fr)}
.topic-grid{grid-template-columns:repeat(3,1fr)}
.season-grid{grid-template-columns:repeat(3,1fr)}
.race-grid{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);padding:1.2rem}
.card.dark{background:var(--navy);color:var(--white)}
.card .kicker{display:block;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:850;margin-bottom:1.4rem}
.card p{color:var(--ink-soft);margin-bottom:0}
.card.dark p{color:#c1d1d4}
.card ul{padding-left:1.1rem;margin-bottom:0;color:var(--ink-soft)}
.card li{margin:.4rem 0}
.timeline{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:minmax(8rem,.3fr) 1fr;gap:1.5rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.timeline strong{color:var(--accent)}
.timeline p{margin:0;color:var(--ink-soft)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.choice article{padding:clamp(1.3rem,3vw,2.2rem);background:var(--white);border:1px solid var(--line)}
.choice article:first-child{background:var(--navy);color:var(--white)}
.choice article:first-child p{color:#c0d0d4}
.choice ul{padding-left:1.1rem}
.rule{padding:1.2rem;border-left:4px solid var(--accent);background:var(--white)}
.section-dark .rule{background:rgba(255,255,255,.07)}
.rule p:last-child{margin-bottom:0}
.health-note{padding:1.2rem;background:#fff6ea;border:1px solid #e7c9a9}
.health-note strong{display:block;margin-bottom:.4rem}
details{background:var(--white);border:1px solid var(--line);padding:1rem 1.1rem;margin:.6rem 0}
summary{cursor:pointer;font-weight:800}
details p,details ul{color:var(--ink-soft)}
.path-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.path-nav a{display:block;padding:1rem;background:var(--white);border:1px solid var(--line);text-decoration:none}
.path-nav strong,.path-nav small{display:block}
.path-nav small{margin-top:.35rem;color:var(--ink-soft)}
.source-note{color:#687983;font-size:.82rem}
.footer{padding:2rem clamp(1rem,5vw,4rem);background:#07171e;color:var(--white);display:flex;justify-content:space-between;gap:1rem}
.footer p{margin:0;color:#91a8ae}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:900px){
  .quick-grid,.path-nav{grid-template-columns:repeat(2,1fr)}
  .topic-grid,.season-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .site-header{align-items:flex-start;flex-direction:column}
  .quick-grid,.topic-grid,.season-grid,.race-grid,.choice,.path-nav{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:.25rem}
  .section{padding-top:3.5rem;padding-bottom:3.5rem}
  .footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* v0.6 — local page navigation */
.page-toc {
  width:min(var(--max),calc(100% - 2rem));
  margin:1rem auto 0;
  display:flex;
  align-items:center;
  gap:.45rem;
  overflow-x:auto;
  padding:.55rem;
  background:var(--white);
  border:1px solid var(--line);
  scrollbar-width:none;
}
.page-toc::-webkit-scrollbar{display:none}
.page-toc > span {
  flex:0 0 auto;
  padding:.5rem .65rem;
  color:var(--ink-soft);
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.page-toc a {
  flex:0 0 auto;
  padding:.55rem .75rem;
  border-radius:999px;
  background:var(--paper);
  text-decoration:none;
  font-size:.84rem;
  font-weight:750;
  white-space:nowrap;
}
.page-toc a:hover,.page-toc a:focus-visible{background:var(--paper-2)}
@media(max-width:620px){
  .page-toc{width:calc(100% - 1rem);margin-top:.5rem;padding:.4rem}
  .page-toc > span{display:none}
}