:root{
  --paper:#f5f0e6; --card:#fffdf8; --ink:#221f1a; --soft:#5e594e; --faint:#857f6f;
  --line:#ddd5c2; --go:#1c7a55; --go-soft:#e3efe5; --go-line:#bcdcc6;
  --warn:#9a5d0e; --warn-soft:#f6ead3; --alert:#9e362c; --alert-soft:#f4e1dc;
  --report:#2b6385; --report-soft:#e1ecf2;
  --scored-bg:#1c7a55; --scored-text:#f4faf5; --scored-soft:#cfe7d6;
  --shadow:0 1px 2px rgba(40,35,25,.05),0 8px 28px rgba(40,35,25,.06);
}
:root[data-theme="dark"]{
  --paper:#1a1815; --card:#24211c; --ink:#efeadf; --soft:#bbb4a4; --faint:#8f8878;
  --line:#39342c; --go:#5cc093; --go-soft:#1f3a2c; --go-line:#315a45;
  --warn:#d79a4a; --warn-soft:#3a2f1c; --alert:#e08b80; --alert-soft:#3a241f;
  --report:#7fb4d6; --report-soft:#1e2f3a;
  --scored-bg:#1d6e4e; --scored-text:#f1faf4; --scored-soft:#bfe0cc;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.12; letter-spacing:-.01em;}
a{color:var(--go);}
.wrap{max-width:760px; margin:0 auto; padding:0 22px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}

/* ---- Header / nav (flexbox) ------------------------------------------- */
.site-header{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:760px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:16px;}
.brand{display:flex; align-items:center; gap:9px; font-family:"Fraunces",serif; font-weight:600; font-size:18px; color:var(--ink); text-decoration:none; margin-right:auto;}
.brand img{width:26px; height:26px;}
.site-nav{display:flex; gap:6px; flex-wrap:wrap;}
.site-nav a{text-decoration:none; color:var(--soft); font-size:15px; font-weight:500;
  padding:6px 11px; border-radius:8px; transition:background .15s,color .15s;}
.site-nav a:hover{background:var(--go-soft); color:var(--go);}
.site-nav a[aria-current="page"]{color:var(--go); background:var(--go-soft);}
.theme-toggle{flex:none; background:none; border:1px solid var(--line); color:var(--ink);
  width:38px; height:38px; border-radius:9px; cursor:pointer; font-size:17px; line-height:1;
  display:grid; place-items:center; transition:background .15s,border-color .15s;}
.theme-toggle:hover{background:var(--go-soft); border-color:var(--go-line);}

/* ---- Hero ------------------------------------------------------------- */
.hero{padding:54px 0 26px;}
.eyebrow{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--go); font-weight:600; margin:0 0 14px;}
.hero h1{font-size:clamp(36px,7.5vw,58px); margin:0 0 16px;}
.promise{font-size:19px; color:var(--soft); margin:0; max-width:32em;}

main{display:block; padding-bottom:70px;}
section{margin:0 0 6px; scroll-margin-top:80px;}
h2{font-size:clamp(24px,5vw,31px); margin:30px 0 8px;}
.sub{color:var(--faint); font-size:14.5px; margin:0 0 18px;}

.lane{height:0; border:0; border-top:3px dashed var(--line); margin:34px 0;}

/* ---- Source badges ---------------------------------------------------- */
.src{display:inline-flex; align-items:center; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 8px; border-radius:20px; vertical-align:middle; margin-left:4px; white-space:nowrap;}
.src.off{background:var(--go-soft); color:var(--go);}
.src.rep{background:var(--report-soft); color:var(--report);}

/* ---- Cards ------------------------------------------------------------ */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:6px 24px; box-shadow:var(--shadow);}
.pts{list-style:none; margin:0; padding:0;}
.pts>li{padding:16px 0; border-bottom:1px solid var(--line);}
.pts>li:last-child{border-bottom:0;}
.pts b{font-weight:600;}

/* At a glance (grid) */
.glance{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:8px 26px;}
.glance dl{margin:0;}
.glance .row{display:grid; grid-template-columns:108px 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.glance .row:last-child{border-bottom:0;}
.glance dt{color:var(--faint); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;}
.glance dd{margin:0;}
@media(max-width:520px){.glance .row{grid-template-columns:1fr; gap:2px;}}

/* Scored centerpiece */
.scored{background:var(--scored-bg); color:var(--scored-text); border-radius:18px; padding:28px 28px 30px; margin:14px 0; box-shadow:0 10px 34px rgba(28,122,85,.22);}
.scored h2{color:#fff; margin-top:6px;}
.scored .sub{color:var(--scored-soft);}
.scored ul{list-style:none; margin:16px 0 0; padding:0;}
.scored li{display:flex; gap:14px; padding:13px 0; border-top:1px solid rgba(255,255,255,.16); align-items:flex-start;}
.scored li:first-child{border-top:0;}
.check{flex:none; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; margin-top:2px; font-size:14px;}
.scored .note{color:var(--scored-soft); font-size:15px;}
.big{outline:2px solid rgba(255,255,255,.5); outline-offset:5px; border-radius:6px;}

.official-list{columns:2; column-gap:28px; list-style:none; margin:0; padding:0; font-size:15.5px;}
.official-list li{padding:6px 0 6px 20px; position:relative; break-inside:avoid;}
.official-list li::before{content:""; position:absolute; left:0; top:13px; width:7px; height:7px; border-radius:50%; background:var(--go-line);}
@media(max-width:520px){.official-list{columns:1;}}

/* Maneuver accordions */
details{background:var(--card); border:1px solid var(--line); border-radius:14px; margin:0 0 12px; overflow:hidden; box-shadow:var(--shadow);}
summary{cursor:pointer; padding:18px 22px; font-family:"Fraunces",serif; font-size:21px; font-weight:500; list-style:none; display:flex; align-items:center; gap:12px;}
summary::-webkit-details-marker{display:none;}
summary::before{content:""; width:9px; height:9px; border-right:2px solid var(--go); border-bottom:2px solid var(--go); transform:rotate(-45deg); transition:transform .2s; flex:none;}
details[open] summary::before{transform:rotate(45deg);}
details .body{padding:0 22px 20px;}
details .body p{margin:0 0 10px;}
.fail{color:var(--alert); font-weight:500;}

/* Routes */
.routecard{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:20px 24px; margin:0 0 16px;}
.routecard h3{font-size:20px; margin:0 0 4px;}
.routecard .tagline{color:var(--faint); font-size:14px; margin:0 0 16px;}
ol.route{list-style:none; counter-reset:step; margin:0; padding:0;}
ol.route li{counter-increment:step; position:relative; padding:0 0 22px 48px;}
ol.route li::before{content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--go-soft); color:var(--go); border:1px solid var(--go-line); display:grid; place-items:center; font-weight:600; font-size:15px;}
ol.route li::after{content:""; position:absolute; left:14px; top:32px; bottom:2px; width:2px; background:var(--line);}
ol.route li:last-child::after{display:none;}
.caveat{background:var(--report-soft); border-left:3px solid var(--report); border-radius:0 10px 10px 0; padding:13px 18px; color:var(--report); font-size:15px; margin:0 0 22px;}

ol.rank{list-style:none; counter-reset:r; margin:0; padding:0;}
ol.rank li{counter-increment:r; display:flex; gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line);}
ol.rank li:last-child{border-bottom:0;}
ol.rank li::before{content:counter(r); font-family:"Fraunces",serif; font-size:26px; color:var(--alert); font-weight:600; flex:none; width:26px;}

/* Rules Q&A */
.qa{padding:18px 0; border-bottom:1px solid var(--line);}
.qa:last-child{border-bottom:0;}
.qa .q{font-weight:600; margin:0 0 4px;}
.qa .a{margin:0; color:var(--soft);}

.calm{background:var(--go-soft); border-radius:16px; padding:8px 26px; border:1px solid var(--go-line);}

/* ---- Flashcards (grid + flip animation) ------------------------------- */
.flash-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:6px;}
.flash{background:transparent; border:0; padding:0; perspective:1000px; height:150px; cursor:pointer; font:inherit; text-align:left;}
.flash-inner{position:relative; width:100%; height:100%; transition:transform .5s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d;}
.flash[aria-pressed="true"] .flash-inner{transform:rotateY(180deg);}
.flash-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; padding:18px; display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow); border:1px solid var(--line);}
.flash-front{background:var(--card);}
.flash-front .label{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:0 0 8px;}
.flash-front .q{font-family:"Fraunces",serif; font-size:18px; margin:0;}
.flash-back{background:var(--go-soft); border-color:var(--go-line); transform:rotateY(180deg);}
.flash-back p{margin:0; font-size:15px; color:var(--ink);}
.flash .hint{margin-top:auto; font-size:12px; color:var(--faint);}

/* ---- Contact form ----------------------------------------------------- */
.form-card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:26px;}
.field{margin:0 0 18px;}
.field label{display:block; font-weight:600; font-size:15px; margin:0 0 6px;}
.field input,.field select,.field textarea{
  width:100%; font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; transition:border-color .15s,box-shadow .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--go); box-shadow:0 0 0 3px var(--go-soft);}
.field .help{font-size:13px; color:var(--faint); margin:5px 0 0;}
.btn{background:var(--go); color:#fff; border:0; border-radius:10px; padding:12px 22px; font:inherit; font-weight:600; cursor:pointer; transition:filter .15s,transform .05s;}
.btn:hover{filter:brightness(1.06);}
.btn:active{transform:translateY(1px);}
.form-status{margin:14px 0 0; font-size:15px; color:var(--go); font-weight:500;}

/* ---- Footer ----------------------------------------------------------- */
.site-footer{border-top:3px dashed var(--line); margin-top:30px;}
.site-footer .wrap{padding-top:24px; padding-bottom:40px; color:var(--faint); font-size:14px;}
.site-footer a{color:var(--go);}

/* ---- Motion & accessibility ------------------------------------------ */
:focus-visible{outline:3px solid var(--go); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
  @keyframes rise{to{opacity:1; transform:none;}}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}