@charset "UTF-8";

/* ==========================================================
   SELF-HOSTED FONTS (spec 3.6)
   Latin subset only, woff2 only, exactly the weights in use.
   No third-party request, no DNS+TLS round-trip to Google.
   Source: @fontsource (same files Google serves), 168KB total.
   Symbols the site uses (checkmark, arrow, triangle) are NOT in
   any latin subset and fall back to the system stack, which was
   already true when these came from Google.
   ========================================================== */
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/fraunces-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/fraunces-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ==========================================================
   Swing Of It - shared styles
   Built on the jmineo.com design system.
   Palette shift: paper stays, plasma steps back, turf steps up.
   ========================================================== */

:root{
  /* core jmineo tokens */
  --ink:#10131a;
  --paper:#f3efe2;
  --paper-line:#d9d2bd;
  --plasma:#ff3d8b;
  --plasma-deep:#c81e63;
  --volt:#5ef2c4;
  --volt-deep:#0e7355;      /* darkened: 5.07:1 on paper (was #1bbf8f, 2.05:1 FAIL) */
  --volt-mid:#1bbf8f;       /* old volt-deep kept for FILLS/borders only, never text */
  --beaker:#3b5bff;
  --amber:#ffb627;          /* fills + borders only */
  --amber-deep:#8a5600;     /* 3.4 - text on paper: 5.4:1 PASS */
  --grid:rgba(16,19,26,.055);

  /* golf extension */
  --turf:#2f6b4f;
  --turf-deep:#1e4a36;
  --turf-soft:#e4ece3;
  --fairway:#7fb069;        /* accents only, never text */
  --sand:#e8d9b5;
  --sky:#8fb8de;
  --muted-txt:#5a626f;      /* 3.4 - 6.2:1 on paper */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.62;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1140px;margin:0 auto;padding:0 24px}

a{color:var(--turf-deep);text-decoration:none;border-bottom:1.5px solid var(--fairway)}
a:hover{color:var(--plasma-deep);border-bottom-color:var(--plasma)}

/* 3.5 - visible focus everywhere */
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--beaker);outline-offset:2px;border-radius:4px;
}

/* 3.5 - skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--volt);color:var(--ink);border:2px solid var(--ink);
  padding:10px 18px;border-radius:0 0 12px 0;font-weight:600;
  font-family:'Space Grotesk',sans-serif;border-bottom:2px solid var(--ink);
}
.skip-link:focus{left:0}

code{font-family:'JetBrains Mono',monospace;font-size:.85em;background:rgba(16,19,26,.06);padding:2px 6px;border-radius:5px}

.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--turf-deep);
  display:block;
}
.eyebrow-pink{color:var(--plasma-deep)}

h1,h2,h3,h4{font-family:'Fraunces',serif;letter-spacing:-.015em}

/* ---------- nav (1.5) ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--turf);
  border-bottom:2px solid var(--ink);
}
.nav-inner{
  max-width:1140px;margin:0 auto;padding:6px 20px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  min-height:56px;
}
.nav-brand{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.02rem;
  color:var(--paper);border:none;margin-right:4px;white-space:nowrap;
}
.nav-brand:hover{color:var(--volt);border:none}
.nav-brand .dot{color:var(--volt)}

/* persistent one-tap cheat sheet pill (1.5 exception) */
.nav-cheat{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;
  background:var(--volt);color:var(--ink);border:2px solid var(--ink);
  border-radius:20px;padding:5px 11px;white-space:nowrap;
  box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease;
}
.nav-cheat:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);border-color:var(--ink)}
.nav-cheat.active{background:var(--paper)}

.nav-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:1}
.nav-primary{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.nav-ref{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding-left:12px;border-left:1.5px solid rgba(255,255,255,.28)}
.nav-ref-label{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.nav-ref-items{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav a.nav-link{
  font-size:.82rem;font-weight:500;color:#e8f0ea;
  padding:5px 9px;border-radius:20px;border:1.5px solid transparent;
  transition:all .12s ease;white-space:nowrap;
}
.nav-ref a.nav-link{font-size:.75rem;color:#cfe0d5;padding:4px 8px}
.nav a.nav-link:hover{color:var(--ink);background:var(--volt);border-color:var(--ink)}
.nav a.nav-link.active{color:var(--ink);background:var(--paper);border-color:var(--ink);font-weight:600}
.nav-toggle{
  display:none;margin-left:auto;background:var(--paper);border:2px solid var(--ink);
  border-radius:8px;padding:5px 11px;font-family:'JetBrains Mono',monospace;
  font-size:.78rem;cursor:pointer;color:var(--ink);
}
@media(max-width:980px){
  .nav-toggle{display:block}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:10px;gap:8px}
  .nav-links.open{display:flex}   /* 3.5 - display:none when closed, no phantom tab stops */
  .nav-primary{flex-direction:column;align-items:stretch;gap:2px}
  .nav a.nav-link{display:block;width:100%}
  .nav-ref{flex-direction:column;align-items:stretch;gap:2px;
    padding-left:14px;border-left:2px solid rgba(255,255,255,.28);margin-left:4px}
  .nav-ref-items{flex-direction:column;align-items:stretch;gap:2px}
  .nav-ref-label{padding:4px 0 2px}
}

/* ---------- hero ---------- */
.hero{padding:52px 0 30px}
.hero h1{
  font-weight:700;font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.05;
  margin:12px 0 14px;letter-spacing:-.025em;
}
.hero h1 .hl{position:relative;white-space:nowrap;z-index:1}
.hero h1 .hl::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:.32em;
  background:var(--volt);z-index:-1;transform:rotate(-1.3deg);
}
.hero p.lede{max-width:62ch;font-size:1.06rem;color:#333a47}
.hero-min{padding:34px 0 18px}
.hero-min h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:10px 0 8px}

/* ---------- 1.4 TL;DR ---------- */
.tldr{
  max-width:960px;margin:0 auto 30px;padding:16px 20px 16px 22px;
  background:#fff;border:2px solid var(--ink);border-left:8px solid var(--volt-mid);
  border-radius:0 14px 14px 0;box-shadow:4px 4px 0 var(--ink);
}
.tldr-wrap{max-width:960px;margin:0 auto;padding:0 24px}
.tldr .tag{
  font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--volt-deep);display:block;margin-bottom:7px;font-weight:500;
}
.tldr p{font-size:.97rem;line-height:1.55;max-width:74ch;margin:0}
.tldr p + p{margin-top:5px}
.tldr strong{font-weight:600}

/* ---------- sections ---------- */
section.sec{padding:36px 0;border-top:2px solid var(--ink)}
.sec-head{display:flex;align-items:center;gap:13px;margin-bottom:20px;flex-wrap:wrap}
.sec-num{
  font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--turf-deep);
  border:1.5px solid var(--turf-deep);border-radius:30px;padding:3px 11px;white-space:nowrap;
}
.sec-head h2{font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-weight:600;font-size:1.22rem;margin:24px 0 10px}
h4{font-weight:600;font-size:1.03rem;margin:16px 0 6px}
p.body{margin-bottom:12px;max-width:72ch}
ul.body,ol.body{margin:6px 0 14px 22px;max-width:72ch}
ul.body li,ol.body li{margin-bottom:7px}
.muted{color:var(--muted-txt)}
.small{font-size:.9rem}

/* ---------- cards ---------- */
.card{
  background:#fff;border:2px solid var(--ink);border-radius:18px;padding:22px;
  box-shadow:6px 6px 0 var(--turf);
}
.card.acc-plasma{box-shadow:6px 6px 0 var(--plasma)}
.card.acc-amber{box-shadow:6px 6px 0 var(--amber)}
.card.acc-beaker{box-shadow:6px 6px 0 var(--beaker)}
.card.acc-volt{box-shadow:6px 6px 0 var(--volt-mid)}
.card.acc-sand{box-shadow:6px 6px 0 var(--sand)}
.card h4{margin-top:0;font-size:1.25rem}
.card p{font-size:.95rem;color:#3a4150}

.card-link{display:block;border:none;color:inherit;transition:all .13s ease}
.card-link:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--turf);border-bottom:none;color:inherit}
.card-link.acc-plasma:hover{box-shadow:8px 8px 0 var(--plasma)}
.card-link.acc-amber:hover{box-shadow:8px 8px 0 var(--amber)}
.card-link.acc-beaker:hover{box-shadow:8px 8px 0 var(--beaker)}
.card-link.acc-volt:hover{box-shadow:8px 8px 0 var(--volt-mid)}
.card-link.acc-sand:hover{box-shadow:8px 8px 0 var(--sand)}

.chip{
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;padding:4px 10px;border-radius:20px;display:inline-block;
  margin-bottom:12px;border:1.5px solid var(--turf);background:var(--turf);color:#fff;
}
.chip-plasma{border-color:var(--plasma);background:var(--plasma)}
.chip-amber{border-color:var(--amber);background:var(--amber);color:var(--ink)}
.chip-volt{border-color:var(--volt-mid);background:var(--volt);color:var(--ink)}
.chip-ghost{background:transparent;color:var(--turf-deep)}
.chip-bonus{background:var(--paper);color:var(--muted-txt);border-color:var(--muted-txt)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;
  padding:11px 20px;border:2px solid var(--ink);border-radius:40px;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transition:all .13s ease;border-bottom-width:2px;
}
a.btn{border-bottom:2px solid var(--ink)}
.btn-primary{background:var(--turf);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);color:#fff}
.btn-pink{background:var(--plasma);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn-pink:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);color:#fff}
.btn-volt{background:var(--volt);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-volt:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);color:var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-ghost:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:4px 4px 0 var(--ink)!important}

/* ---------- panels ---------- */
.panel-dark{
  background:var(--ink);color:var(--paper);border-radius:18px;padding:24px 26px;margin:18px 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:24px 24px;
}
.panel-dark .eyebrow{color:var(--volt)}
.panel-dark h4{color:var(--paper);margin-top:6px}
.panel-dark p{color:#c9d1dc;max-width:68ch}
.panel-dark a{color:var(--volt);border-bottom-color:var(--volt-mid)}

.callout{
  background:var(--turf-soft);border:2px solid var(--turf);border-left-width:7px;
  border-radius:12px;padding:16px 18px;margin:16px 0;
}
.callout .tag{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--turf-deep);display:block;margin-bottom:5px;font-weight:500;
}
.callout p{font-size:.95rem;max-width:70ch}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:#fdf3e0;border-color:var(--amber)}
.callout.warn .tag{color:var(--amber-deep)}
.callout.tip{background:#eafaf3;border-color:var(--volt-mid)}
.callout.tip .tag{color:var(--volt-deep)}
.callout.money{background:#fdeef4;border-color:var(--plasma)}
.callout.money .tag{color:var(--plasma-deep)}

/* ---------- tables ---------- */
.tbl-scroll{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch;position:relative}
/* 3.3 - scroll affordance */
.tbl-scroll.is-scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);
}
.tbl-scroll.is-end{-webkit-mask-image:none;mask-image:none}
.scroll-hint{
  display:none;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-txt);margin:0 0 4px;
}
.tbl-scroll.is-scrollable + .scroll-hint,.scroll-hint.show{display:block}
table.data{
  width:100%;border-collapse:collapse;background:#fff;
  border:2px solid var(--ink);border-radius:12px;overflow:hidden;font-size:.88rem;min-width:520px;
}
table.data th,table.data td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--paper-line);vertical-align:top}
table.data th{
  background:var(--ink);color:var(--paper);font-family:'JetBrains Mono',monospace;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;white-space:nowrap;
}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:nth-child(even){background:#faf9f4}
table.data td.club{font-weight:600;white-space:nowrap}
table.data td.mono{font-family:'JetBrains Mono',monospace;font-size:.82rem;white-space:nowrap}
/* priority tiers - 3.4 contrast-safe, text label carries meaning not just colour */
.t-yes{color:var(--volt-deep);font-weight:600}
.t-strong{color:var(--amber-deep);font-weight:600}
.t-skip{color:var(--muted-txt)}

/* ---------- 1.3 accordions ---------- */
details.acc-table{
  border:2px solid var(--ink);border-radius:14px;background:#fff;
  margin:14px 0;box-shadow:4px 4px 0 var(--turf);overflow:hidden;
}
details.acc-table > summary{
  cursor:pointer;list-style:none;padding:12px 18px;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--turf-deep);
  background:var(--turf-soft);border-bottom:2px solid transparent;
  display:flex;align-items:center;gap:9px;transition:background .12s;
}
details.acc-table > summary::-webkit-details-marker{display:none}
details.acc-table > summary::before{content:"▸";font-size:.85rem;transition:transform .15s ease;display:inline-block}
details.acc-table[open] > summary{border-bottom-color:var(--ink)}
details.acc-table[open] > summary::before{transform:rotate(90deg)}
details.acc-table > summary:hover{background:#d8e5d9}
details.acc-table .tbl-scroll{margin:0}
details.acc-table table.data{border:none;border-radius:0}
details.acc-table .acc-body{padding:16px 18px}

/* ---------- do / don't ---------- */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
@media(max-width:700px){.do-dont{grid-template-columns:1fr}}
.dd{border:2px solid var(--ink);border-radius:14px;padding:18px;background:#fff}
.dd.do{box-shadow:5px 5px 0 var(--volt-mid)}
.dd.dont{box-shadow:5px 5px 0 var(--plasma-deep)}
.dd .tag{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px;display:inline-block;
}
.dd.do .tag{color:var(--volt-deep)}
.dd.dont .tag{color:var(--plasma-deep)}
.dd ul{margin-left:18px}
.dd li{margin-bottom:6px;font-size:.92rem}

/* ---------- checklist ---------- */
.checklist{list-style:none;margin:12px 0}
.checklist li{
  display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-bottom:1px dashed var(--paper-line);
}
.checklist li:last-child{border-bottom:none}
.checklist input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:21px;height:21px;border:2px solid var(--ink);border-radius:6px;
  background:#fff;cursor:pointer;margin-top:2px;position:relative;transition:all .1s;
}
.checklist input[type=checkbox]:checked{background:var(--volt)}
.checklist input[type=checkbox]:checked::after{
  content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;color:var(--ink);
}
.checklist label{cursor:pointer;font-size:.95rem;flex:1}
.checklist input:checked + label{opacity:.55;text-decoration:line-through}

/* ---------- glossary ---------- */
.gloss{border-top:2px solid var(--ink);padding-top:6px}
.gloss dl{margin:0}
.gloss dt{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;margin-top:14px;color:var(--turf-deep);
  scroll-margin-top:80px;
}
.gloss dd{margin:2px 0 0 0;font-size:.94rem;color:#3a4150;max-width:72ch}
.gloss-count{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted-txt);
  margin-top:8px;display:block;
}

/* ---------- 2.2 glossary tooltips ---------- */
.gloss-tip{
  border-bottom:1.5px dotted var(--turf);cursor:help;text-decoration:none;
  background:none;border-top:0;border-left:0;border-right:0;padding:0;
  font:inherit;color:inherit;
}
.gloss-tip:hover,.gloss-tip:focus-visible{background:rgba(94,242,196,.28)}
.tip-pop{
  position:absolute;z-index:120;max-width:290px;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);
  border-radius:12px;padding:12px 14px;font-size:.86rem;line-height:1.5;
  box-shadow:4px 4px 0 rgba(0,0,0,.32);font-family:'Space Grotesk',sans-serif;
}
.tip-pop .tip-term{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--volt);display:block;margin-bottom:5px;
}
.tip-pop a{color:var(--volt);border-bottom-color:var(--volt-mid);font-size:.8rem}
.tip-pop .tip-close{
  position:absolute;top:5px;right:9px;background:none;border:none;color:var(--paper);
  font-size:1.05rem;cursor:pointer;line-height:1;padding:3px;
}

/* ---------- 2.1 distance inputs ---------- */
.dist-in{
  font-family:'JetBrains Mono',monospace;font-size:.85rem;
  width:80px;padding:5px 8px;border:2px solid var(--ink);border-radius:7px;
  background:#fff;color:var(--ink);
}
.dist-in::placeholder{color:#9aa2ae}
.miss-in{width:100%;min-width:120px}
.dist-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.personal-flag{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--turf-deep);background:var(--volt);
  border:1px solid var(--turf);border-radius:10px;padding:1px 6px;margin-left:6px;
}
.print-head{display:none}


/* 3.1.5 - card/panel headings are semantically h3 (no skipped levels)
   but keep the smaller visual weight the design calls for. */
h3.card-h{font-weight:600;font-size:1.03rem;margin:16px 0 6px}
.card h3.card-h{margin-top:0;font-size:1.25rem}
.panel-dark h3.card-h{color:var(--paper);margin-top:6px;font-size:1.2rem}
.dd h3.card-h{font-size:1.03rem;margin:16px 0 6px}

/* ---------- footer ---------- */
footer.site{border-top:2px solid var(--ink);padding:28px 0 40px;margin-top:26px}
footer.site small{font-family:'JetBrains Mono',monospace;font-size:.73rem;color:var(--muted-txt);display:block;line-height:1.9}
footer.site a{color:var(--muted-txt);border-bottom-color:var(--paper-line)}
footer.site a:hover{color:var(--turf-deep)}
.foot-motto{font-family:'Fraunces',serif;font-size:.95rem;color:var(--turf-deep);font-style:italic;letter-spacing:0}
.foot-meta{color:#7a828e;font-size:.68rem}

/* ---------- page nav ---------- */
.pagenav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ---------- video ---------- */
.video-wrap{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--turf);margin:16px 0 22px;
}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ---------- misc ---------- */
.divider{height:2px;background:var(--ink);border:none;margin:28px 0}
.pill-row{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.tag-mini{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--turf-deep);color:var(--turf-deep);border-radius:20px;padding:3px 9px;
}
.stat{font-family:'JetBrains Mono',monospace;font-weight:500}
kbd{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;border:1.5px solid var(--ink);
  border-radius:5px;padding:1px 6px;background:#fff;box-shadow:2px 2px 0 var(--ink);
}
.jump-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 4px}
.jump-row .btn{font-size:.76rem;padding:6px 13px}
/* cheatsheet sticky jump bar */
.stickynav{
  position:sticky;top:58px;z-index:30;background:var(--paper);
  border-bottom:2px solid var(--ink);padding:8px 0;margin-bottom:6px;
}
.stickynav .wrap{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.stickynav a{
  font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;border:1.5px solid var(--turf);color:var(--turf-deep);
  border-radius:20px;padding:4px 10px;background:#fff;white-space:nowrap;
  /* touch target: >=44px tall on phones without inflating the visual pill */
  display:inline-flex;align-items:center;min-height:32px;
}
@media(max-width:820px){
  .stickynav a{min-height:44px;padding:4px 13px}
  .stickynav .wrap{gap:8px}
}
.stickynav a:hover{background:var(--volt);color:var(--ink);border-color:var(--ink)}

/* 5.1 - the three things a beginner actually looks up mid-round, promoted
   above the long tail so they are not one of thirteen equal-weight links. */
.stickynav a.jump-hot{
  background:var(--volt);border-color:var(--ink);color:var(--ink);font-weight:500;
  box-shadow:2px 2px 0 var(--ink);
}
.stickynav a.jump-hot:hover{background:#fff}
.jump-more{
  font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;border:1.5px solid var(--turf);color:var(--turf-deep);
  border-radius:20px;padding:4px 10px;background:#fff;white-space:nowrap;cursor:pointer;
  display:inline-flex;align-items:center;min-height:32px;
}
.jump-more:hover{background:var(--volt);color:var(--ink);border-color:var(--ink)}
/* long tail: hidden until asked for, so the bar stays one row on a phone */
.jump-rest{display:none;gap:7px;flex-wrap:wrap;width:100%;padding-top:7px}
.jump-rest.open{display:flex}
@media(min-width:900px){
  /* desktop has the room: show everything, drop the toggle */
  .jump-more{display:none}
  .jump-rest{display:flex;width:auto;padding-top:0}
}
@media(max-width:820px){ .jump-more{min-height:44px} }

/* clearance = main nav (58) + sticky jump bar (62) + a little air.
   Measured, not guessed: headings were landing 6-10px under the bar at 110. */
section.sec[id]{scroll-margin-top:132px}
@media(min-width:900px){ section.sec[id]{scroll-margin-top:158px} }


/* 3.5 - comfortable touch targets on phones */
@media(max-width:820px){
  .nav a.nav-link{min-height:44px;display:flex;align-items:center}
  .nav-cheat{min-height:38px;display:inline-flex;align-items:center}
  .jump-row .btn{min-height:44px}
  .checklist input[type=checkbox]{width:24px;height:24px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ==========================================================
   3.2 PRINT
   ========================================================== */
@media print{
  .nav,footer.site,.pagenav,.btn,.skip-link,.stickynav,.jump-row,.tip-pop,.scroll-hint{display:none!important}
  html,body{background:#fff!important;color:#000!important;background-image:none!important;font-size:11pt}
  .wrap,.wrap-wide,.tldr-wrap{max-width:100%;padding:0}
  a{color:#000;border-bottom:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.78em;color:#444}
  a[href^="#"]::after,a[href^="mailto"]::after{content:""}
  .card,.callout,.panel-dark,.dd,.tldr,details.acc-table{
    border:1px solid #000!important;box-shadow:none!important;background:#fff!important;
    page-break-inside:avoid;
  }
  .panel-dark,.panel-dark h4,.panel-dark p,.panel-dark .eyebrow{
    background:#fff!important;color:#000!important;background-image:none!important;
  }
  .tldr{border-left:4px solid #000!important}
  table.data{min-width:0!important;page-break-inside:avoid;border:1px solid #000!important}
  table.data th{background:#eee!important;color:#000!important}
  table.data tbody tr:nth-child(even){background:#f7f7f7!important}
  .tbl-scroll{overflow:visible!important;mask-image:none!important;-webkit-mask-image:none!important}
  /* accordions must force open, else blank pages */
  details.acc-table{display:block!important}
  details.acc-table > summary{display:none!important}
  details.acc-table > *{display:revert!important}
  section.sec{page-break-inside:auto;border-top:1px solid #000}
  h1,h2,h3,h4{page-break-after:avoid}
  .dist-in{border:none!important;border-bottom:1px solid #000!important;border-radius:0!important;width:70px}
  .hero p.lede{font-size:1rem}
}

/* 2.1 - print ONLY the distance table */
@media print{
  body.print-distances > main > *:not(#my-distances){display:none!important}
  body.print-distances #my-distances{border-top:none!important;padding-top:0!important}
  body.print-distances #my-distances .print-head{
    display:block!important;font-family:'Fraunces',serif;font-size:1.5rem;
    font-weight:700;margin-bottom:4px;
  }
  body.print-distances #my-distances .sec-head,
  body.print-distances #my-distances p.body,
  body.print-distances #my-distances .callout,
  body.print-distances #my-distances .dist-actions{display:none!important}
  body.print-distances #my-distances .card{border:none!important;padding:0!important}
}