:root{
    --drab:#191B12; --drab-2:#22251A; --drab-3:#2C3022;
    --paper:#DAD4BE; --paper-2:#C9C2A6;
    --amber:#E6A630; --amber-dim:#B9842296;
    --rust:#DE826B;
    --moss:#94A074; --moss-dim:#9AA87F;
    --ink:#1E1F16; --ink-soft:#41442F;
    --line:#3A3E2C; --hero-line:rgba(218,212,190,.16);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* The UA's [hidden]{display:none} is a plain element rule, so any class that
     sets display (.faq is display:grid) silently beats it and the element
     stays visible. Enforce it so the `hidden` property actually hides things. */
  [hidden]{display:none !important}
  /* Guaranteed-contrast keyboard focus ring, applied broadly rather than
     trusting each browser's own default outline (inconsistent, and can be
     low-contrast against this site's dark background). :focus-visible only
     triggers for keyboard/programmatic focus, not mouse/touch, so it doesn't
     add visual noise for pointer users. More specific rules elsewhere (e.g.
     .platform-btn) still win over this by CSS specificity. */
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  /* Offscreen until focused, so keyboard/screen-reader users can bypass the
     header and jump straight to #main instead of tabbing through it every
     page load; invisible to mouse/touch users, who never trigger :focus. */
  .skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amber);color:var(--drab);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;padding:10px 16px;border-radius:4px;text-decoration:none;transition:top .16s}
  .skip-link:focus{top:12px}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{background:var(--drab);color:var(--paper);font-family:'Public Sans',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
  .wrap{max-width:760px;margin:0 auto;padding:0 20px}

  /* COMMAND BAR */
  .cmdbar{position:sticky;top:0;z-index:50;background:rgba(20,22,15,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .cmdbar-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:9px 20px}
  /* Padding + matching negative margin grows the tap target to the WCAG
     2.5.8 minimum (24x24, aiming for 44) without changing the visible
     wordmark size or pushing the rest of the top bar around. */
  .callsign{display:inline-flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--amber);white-space:nowrap;flex-shrink:0;text-decoration:none;padding:8px 4px;margin:-8px -4px}
  .callsign span{color:var(--moss-dim)}

  /* BREADCRUMBS — skipped on the homepage; every other page shows Home //
     Current, matching the OPORD document styling (mono, slash-divided). */
  .breadcrumbs{border-bottom:1px solid var(--line)}
  .breadcrumbs .wrap{max-width:760px;margin:0 auto;padding:9px 20px}
  .breadcrumbs .bc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
  .breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em}
  .breadcrumbs li{display:flex;align-items:center;color:var(--moss)}
  .breadcrumbs li + li::before{content:"//";margin:0 8px;color:var(--moss-dim)}
  .breadcrumbs a{color:var(--moss);text-decoration:none;padding:2px 0}
  .breadcrumbs a:hover{color:var(--amber)}
  .breadcrumbs li[aria-current="page"]{color:var(--amber);font-weight:600}
  /* Small trust-signal stamp — "content checked against sources on this
     date," distinct from the community update-bar's "last refit" (that's
     about the trap builds shipping; this is about factual accuracy). */
  .verified{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--moss-dim);white-space:nowrap}

  .jumpnav{position:fixed;right:16px;bottom:16px;z-index:70}
  /* Amber border by default (not just on hover) so the button reads as an
     obvious floating control against any page content behind it, matching
     the amber-border-on-dark-card treatment already used elsewhere on the
     site (.quickstart) rather than the near-invisible --line border a
     resting nav link normally gets. */
  .jumpnav summary{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--paper);cursor:pointer;list-style:none;min-height:48px;padding:0 18px;background:var(--drab-2);border:1.5px solid var(--amber);border-radius:24px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:.16s;box-shadow:0 4px 16px #0008}
  .jumpnav summary::-webkit-details-marker{display:none}
  .jumpnav summary:hover,.jumpnav[open] summary{color:var(--amber);background:var(--drab-3)}
  .jumpnav .chev{color:var(--amber);transition:transform .16s}
  .jumpnav[open] .chev{transform:rotate(180deg)}
  .jumpnav-list{position:absolute;bottom:calc(100% + 8px);right:0;min-width:230px;max-height:60vh;overflow-y:auto;background:var(--drab-2);border:1px solid var(--line);border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 24px #0008;z-index:70}
  .jumpnav-list a{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.02em;color:var(--moss);text-decoration:none;padding:9px 10px;border-radius:4px;display:flex;gap:8px;align-items:baseline}
  .jumpnav-list a .n{color:var(--moss-dim);font-size:10px;font-weight:600}
  .jumpnav-list a:hover{color:var(--paper);background:var(--drab-3)}
  .jumpnav-list a.active{color:var(--amber);background:var(--drab-3)}
  .jumpnav-list a.active .n{color:var(--amber)}
  .jumpnav-list a .sub{color:var(--moss-dim);font-size:11px}
  .jumpnav-list a.active .sub{color:var(--amber-dim)}
  .jumpnav-divider{height:1px;background:var(--line);margin:4px 2px}
  /* Cross-page switcher links: stacked label/sub, same shape as the desktop
     rail's primary links, so a two-word label never staggers onto a second
     line mid-dash the way an inline "Label — Sub" row does at narrow widths. */
  .jumpnav-list .primary-link{display:flex;flex-direction:column;gap:1px;
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.02em;
    color:var(--moss);text-decoration:none;padding:9px 10px;border-radius:4px}
  .jumpnav-list .primary-link .sub{font-size:11px;color:var(--moss-dim)}
  .jumpnav-list .primary-link:hover{color:var(--paper);background:var(--drab-3)}
  /* Skeeter School carries its own colour in the jump sheet for the same
     reason it does in the desktop rail: a parent scanning a list of seven
     olive OPORD labels should be able to spot the one written for their kid
     without reading any of them. Teal on the dark panel, matched to the
     announcement strip at the top of the home page so the two read as the
     same destination. Measured 7.41:1 on the panel's #17352F fill. */
  .jumpnav-list .primary-link.accent-kids{color:#6FD4B4;
    background:#17352F;border:1px solid #2C6A5B}
  .jumpnav-list .primary-link.accent-kids .sub{color:#A8DCC9}
  .jumpnav-list .primary-link.accent-kids:hover{color:#fff;background:#1F4A40}

  /* HERO */
  .hero{position:relative;padding:30px 0 40px;border-bottom:1px solid var(--line);
    background:repeating-linear-gradient(0deg,transparent 0 39px,var(--hero-line) 39px 40px),radial-gradient(120% 80% at 50% -10%, #232619 0%, var(--drab) 60%)}
  .stamp{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--moss);border:1px solid var(--moss-dim);padding:3px 9px;border-radius:2px;margin-bottom:22px}
  .hero .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--amber);margin-bottom:10px}
  .hero h1{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(44px,13.5vw,86px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;color:var(--paper);margin-bottom:18px}
  .hero h1 .frag{color:var(--amber)}
  .hero .mission{font-size:clamp(16px,4.3vw,20px);color:var(--paper-2);max-width:30em;margin-bottom:26px}
  .hero .mission b{color:var(--paper);font-weight:700}
  .cta-row{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:30px}
  .btn{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border-radius:3px;padding:13px 20px;display:inline-flex;align-items:center;gap:8px;transition:.18s;cursor:pointer;border:1.5px solid transparent}
  .btn-primary{background:var(--amber);color:var(--drab)}
  .btn-primary:hover{background:#f2b53e;transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--paper);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--moss);color:var(--amber)}
  .hero-img{width:100%;height:auto;border-radius:5px;margin-bottom:24px;border:1px solid var(--line);display:block}
  .intel-strip{display:flex;flex-wrap:wrap;gap:8px}
  .intel-chip{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.03em;color:var(--paper-2);background:var(--drab-2);border:1px solid var(--line);border-radius:3px;padding:5px 10px}
  .intel-chip b{color:var(--amber);font-weight:600}

  /* UPDATE BANNER */
  .updatebar{background:linear-gradient(90deg,var(--amber-dim),transparent 62%),var(--drab-2);border-top:1px solid var(--amber);border-bottom:1px solid var(--amber-dim)}
  .updatebar .wrap{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:11px 0}
  .ub-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.11em;color:var(--drab);background:var(--amber);padding:4px 10px;border-radius:3px;flex-shrink:0}
  .ub-msg{font-size:14px;color:var(--paper-2);flex:1 1 240px;min-width:200px;line-height:1.45}
  .ub-msg b{color:var(--paper);font-weight:600}
  .ub-go{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--amber);text-decoration:none;white-space:nowrap;border:1px solid var(--amber-dim);border-radius:4px;padding:8px 13px;transition:.16s;flex-shrink:0}
  .ub-go:hover{background:var(--amber);color:var(--drab);border-color:var(--amber)}

  /* SECTIONS */
  .order{padding:44px 0;border-bottom:1px solid var(--line)}
  .order:nth-of-type(even){background:var(--drab-2)}
  .sec-head{display:flex;gap:16px;align-items:baseline;margin-bottom:6px}
  .sec-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(34px,9vw,52px);line-height:.85;color:#B98422;flex-shrink:0}
  .sec-titles h2{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(26px,7vw,40px);line-height:.95;text-transform:uppercase;letter-spacing:.005em;color:var(--paper)}
  .sec-titles .plain{font-size:clamp(15px,4vw,18px);color:var(--amber);font-weight:600;margin-top:3px}
  .para-tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--moss-dim);margin:18px 0 12px;text-transform:uppercase}
  .order p{color:var(--paper-2);margin-bottom:14px;font-size:16px}
  .order p b{color:var(--paper);font-weight:700}
  .order .lead{font-size:17px;color:var(--paper)}

  .readout{background:var(--paper);color:var(--ink);border-radius:5px;padding:20px 20px 6px;margin:18px 0;box-shadow:inset 0 0 0 1px #00000018, 0 1px 0 #00000040}
  .readout .rt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:#5f5a3f;font-weight:600;margin-bottom:10px;text-transform:uppercase}
  .readout ul{list-style:none;display:grid;gap:12px}
  .readout li{display:flex;gap:11px;font-size:15.5px;color:var(--ink-soft)}
  .readout li b{color:var(--ink)}
  .readout .bullet{font-family:'IBM Plex Mono',monospace;color:var(--rust);font-weight:600;flex-shrink:0}
  .readout .amb{color:#9a6f12}

  /* ENEMY CARD */
  .enemy{display:grid;gap:0;margin:20px 0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--drab-3)}
  @media(min-width:560px){.enemy{grid-template-columns:230px 1fr}}
  .enemy-img{width:100%;height:100%;object-fit:cover;display:block;border-right:1px solid var(--line);min-height:170px}
  .enemy-data{padding:16px 18px}
  .enemy-data .ed-tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:#E07A52;font-weight:600;margin-bottom:6px}
  .enemy-data h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:24px;color:var(--paper);font-style:italic;letter-spacing:.01em}
  .enemy-data .sub{font-size:13px;color:var(--moss);margin-bottom:10px}
  .enemy-data p{font-size:14.5px;color:var(--paper-2);margin-bottom:10px}
  .enemy-data .marks{list-style:none;display:grid;gap:6px}
  .enemy-data .marks li{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--paper-2);display:flex;gap:8px}
  .enemy-data .marks li::before{content:"▣";color:var(--amber)}

  /* LIFECYCLE GALLERY (egg raft / larvae reference photos) */
  .lifecycle{display:grid;gap:12px;margin:14px 0 20px}
  .lc-item{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--drab-3)}
  .lc-item img{width:100%;height:auto;display:block}
  .lc-item figcaption{font-size:13px;color:var(--paper-2);padding:12px 14px}
  .lc-item figcaption::before{content:none}
  @media(min-width:560px){.lifecycle{grid-template-columns:1fr 1fr}}

  /* PAPER EXPLAINER */
  .paperbox{background:var(--paper);color:var(--ink);border-radius:6px;padding:20px;margin:18px 0}
  .paperbox .rt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:#5f5a3f;font-weight:600;margin-bottom:10px;text-transform:uppercase}
  .paperbox h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:21px;text-transform:uppercase;color:var(--ink);margin-bottom:8px;letter-spacing:.01em}
  .paperbox p{color:var(--ink-soft);font-size:15px;margin-bottom:11px}
  .paperbox p b{color:var(--ink)}
  .paperbox p i{font-style:italic}
  .twoform{display:grid;gap:10px;margin:14px 0 4px}
  @media(min-width:560px){.twoform{grid-template-columns:1fr 1fr}}
  .form{border:1px solid #c4bb9b;border-radius:5px;padding:13px 14px;background:#e6dfc7}
  .form .fk{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:15px;color:#7a5a12;letter-spacing:.02em;margin-bottom:3px}
  .form p{font-size:13.5px;margin:0;color:var(--ink-soft)}

  /* SEASON CHART */
  .seasonwrap{border:1px solid var(--line);border-radius:6px;background:#10130C;padding:14px 14px 10px;margin:18px 0}
  .seasonwrap .sct{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:17px;color:var(--paper);letter-spacing:.02em}
  .seasonwrap .scs{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--moss-dim);letter-spacing:.04em;margin:2px 0 8px}
  .seasonwrap svg{width:100%;height:auto;display:block}
  .seasonwrap .cap{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--moss-dim);margin-top:6px;letter-spacing:.02em}

  /* QUICKSTART */
  .quickstart{border:1.5px solid var(--amber);border-radius:6px;background:linear-gradient(180deg,#2c2718,#22251A);padding:18px;margin:8px 0 6px}
  .quickstart .qt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--amber);font-weight:600;margin-bottom:12px}
  .qsteps{list-style:none;counter-reset:q;display:grid;gap:11px}
  .qsteps li{display:flex;gap:12px;align-items:flex-start}
  .qsteps li::before{counter-increment:q;content:counter(q);font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;color:var(--drab);background:var(--amber);width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .qsteps li b{color:var(--paper);font-weight:700}
  .qsteps li span{font-size:15px;color:var(--paper-2)}

  /* RECON CHECKLIST */
  .recon{border:1px solid var(--line);border-radius:6px;background:var(--drab-3);padding:16px 18px;margin:14px 0}
  .recon .rh{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--amber);font-weight:600;margin-bottom:4px}
  .recon p{font-size:14px;color:var(--paper-2);margin:0 0 12px}
  .reclist{list-style:none;display:grid;gap:7px}
  @media(min-width:520px){.reclist{grid-template-columns:1fr 1fr}}
  .reclist li{font-size:14px;color:var(--paper-2);display:flex;gap:9px;align-items:center}
  .reclist li::before{content:"";width:13px;height:13px;border:1.5px solid var(--moss);border-radius:2px;flex-shrink:0}

  /* PATH FORK */
  .fork{display:grid;gap:10px;margin:16px 0}
  @media(min-width:560px){.fork{grid-template-columns:1fr 1fr}}
  .path{border:1px solid var(--line);border-radius:6px;padding:15px 16px;background:var(--drab-3)}
  .path.b{border-color:var(--amber-dim)}
  .path .pt{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.02em;margin-bottom:3px}
  .path.a .pt{color:var(--moss)}
  .path.b .pt{color:var(--amber)}
  .path .ps{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--moss-dim);margin-bottom:9px;letter-spacing:.03em}
  .path p{font-size:14px;color:var(--paper-2);margin:0}

  /* SCHEME beats */
  .beats-head{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;text-transform:uppercase;color:var(--paper);letter-spacing:.01em;margin-bottom:4px}
  .beats{display:grid;gap:12px;margin:16px 0}
  @media(min-width:600px){.beats{grid-template-columns:repeat(3,1fr)}}
  /* Four-up variant for the mosquito life cycle: two-by-two on tablets so a
     lone fourth card never strands on its own row, four across on desktop. */
  @media(min-width:600px){.beats-4{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:900px){.beats-4{grid-template-columns:repeat(4,1fr)}}
  .beat{border:1px solid var(--line);border-radius:5px;padding:16px;background:var(--drab-3);border-top:3px solid var(--amber)}
  .beat .bk{font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;text-transform:uppercase;color:var(--amber);letter-spacing:.02em;margin-bottom:5px}
  .beat p{font-size:14px;color:var(--paper-2);margin:0}

  /* ARSENAL */
  .arsenal{display:grid;gap:10px;margin-top:8px}
  .platform{border:1px solid var(--line);border-radius:6px;background:var(--drab-3);overflow:hidden}
  /* Each trap's toggle button is wrapped in an <h3> so the accordion follows
     the standard ARIA pattern and the traps show up in the document outline.
     The heading is purely structural — it must not impose its own type size
     on the button it contains. */
  .platform-h{font-size:inherit;font-weight:inherit;line-height:inherit}
  .platform.open{border-color:var(--amber-dim)}
  .platform-btn{width:100%;text-align:left;background:none;border:none;cursor:pointer;color:var(--paper);padding:15px 16px;display:flex;align-items:center;gap:13px}
  .platform-btn:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
  .desig{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--drab);background:var(--moss);border-radius:3px;padding:3px 7px;flex-shrink:0;min-width:46px;text-align:center}
  .platform.open .desig{background:var(--amber)}
  .pf-name{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
  .pf-name .pn{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.01em;line-height:1.15}
  .pf-name .pv{display:block;font-size:13px;color:var(--moss);margin-top:3px;line-height:1.3}
  .chev{color:var(--moss);transition:transform .25s;flex-shrink:0}
  .platform.open .chev{transform:rotate(90deg);color:var(--amber)}
  .platform-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
  @media (prefers-reduced-motion:reduce){.platform-body{transition:none}}
  .pb-inner{padding:2px 16px 18px;border-top:1px solid var(--line)}
  .platform-btn:hover{background:rgba(214,162,72,.06)}
  .pf-thumb{width:42px;height:42px;flex-shrink:0;display:block}
  .pf-thumb .o{fill:none;stroke:var(--paper-2);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
  .pf-thumb .w{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round}
  .pf-thumb .d{fill:none;stroke:var(--amber);stroke-width:1.8}
  .pf-cue{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .cue-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.09em;color:var(--amber);border:1px solid var(--amber-dim);border-radius:3px;padding:3px 7px;white-space:nowrap}
  .cue-label.is-open{display:none}
  .platform.open .cue-label.is-closed{display:none}
  .platform.open .cue-label.is-open{display:inline-block}
  @media (max-width:400px){.cue-label{display:none}.platform.open .cue-label.is-open{display:none}.pf-thumb{width:36px;height:36px}.platform-btn{gap:10px}}

  /* BLUEPRINT */
  .bp{width:100%;height:auto;display:block;background:#10130C;border:1px solid var(--line);border-radius:5px;margin:14px 0 6px}
  .bp .grid{stroke:#222719;stroke-width:.5}
  .bp .frame{fill:none;stroke:#3a4029;stroke-width:1}
  .bp .body{fill:none;stroke:var(--paper-2);stroke-width:2;stroke-linejoin:round}
  .bp .water{fill:#22443388}
  .bpwl{stroke:#6f9277;stroke-width:1;stroke-dasharray:4 3}
  .bpg{fill:none;stroke:#6f9277;stroke-width:1.1}
  .bpdunk circle,.bpdunk ellipse{fill:none;stroke:var(--amber);stroke-width:1.8}
  .bpdunkmark .under{fill:#9a7d44;stroke:#6b5530;stroke-width:.8}
  .bpdunkmark .top{fill:#ddd0a6;stroke:#9a7d44;stroke-width:1}
  .bpdunkmark .hole{fill:#e6dfc7;stroke:#9a7d44;stroke-width:.6}
  .tire-side{fill:#24271a}
  .tire-top{fill:#313528}
  .tread-grooves line{stroke:#0b0c06;stroke-width:2}
  .tread-circ{stroke:#0b0c06;stroke-width:2.4}
  .tire-edge{fill:none;stroke:#b8b291;stroke-width:1.3}
  .ground-fill{fill:#181206}
  .ground-line{stroke:#9aa079;stroke-width:1.2}
  .ground-hatch line{stroke:#6b6238;stroke-width:1}
  .box-front{fill:#2a3018;stroke:var(--amber);stroke-width:1.5}
  .box-side{fill:#1e2410;stroke:var(--amber);stroke-width:1.5}
  .box-top{fill:#3a4a22;stroke:var(--amber);stroke-width:1.5}
  .box-inner-top{fill:#0f1508;stroke:var(--amber);stroke-width:1}
  .box-lip{fill:#4a5a30;stroke:var(--amber);stroke-width:1.5}
  .box-bot{fill:#1a2008;stroke:var(--amber);stroke-width:1.2}
  .box-rib{fill:none;stroke:var(--amber);stroke-width:1;opacity:.4}
  .pool-rim{stroke:var(--amber);stroke-width:1.4;opacity:.7}
  .pool-band{stroke:var(--amber);stroke-width:1;opacity:.4}
  .pool-flange{fill:#333f20;stroke:var(--amber);stroke-width:1.4}
  .pool-rib{stroke:var(--amber);stroke-width:.8;opacity:.4}
  .bucket-rim{stroke:var(--paper-2);stroke-width:2.4}
  .bucket-bail{stroke:var(--paper-2);stroke-width:2;stroke-linecap:round}
  .bucket-grip{stroke:var(--paper-2);stroke-width:4.5;stroke-linecap:round}
  .bucket-ear{fill:#10130C;stroke:var(--paper-2);stroke-width:1.3}
  .brick-top{fill:#4a3a22;stroke:var(--amber);stroke-width:1.1}
  .brick-l{fill:#2a2012;stroke:var(--amber);stroke-width:1.1}
  .brick-r{fill:#362a18;stroke:var(--amber);stroke-width:1.1}
  .box-inner-front{fill:#161c0c;stroke:var(--amber);stroke-width:.8;opacity:.6}
  .box-inner-side{fill:#121808;stroke:var(--amber);stroke-width:.8;opacity:.6}
  .bpramp .board{fill:#3a2f1f4d;stroke:var(--amber);stroke-width:1.5}
  .bpramp .grain{stroke:var(--amber);stroke-width:1;opacity:.55}
  .bpegg .raft{fill:#e8dfb8;stroke:#a89a5c;stroke-width:.9}
  .bpegg .body{fill:var(--paper-2);stroke:var(--paper);stroke-width:.6}
  .bpegg .legs{stroke:var(--paper-2);stroke-width:1;stroke-linecap:round}
  .bpl{stroke:#7d8a5f;stroke-width:.6}
  .bpd{fill:var(--amber)}
  .bplbl{font-family:'IBM Plex Mono',monospace;font-size:9px;fill:#bdbd9f;letter-spacing:.02em}
  .bplbl.a{fill:var(--amber)}
  .bp .ann{fill:none;stroke:var(--amber);stroke-width:1}
  .bp .anchor{fill:none;stroke:#9a7d44;stroke-width:1.5}
  .bp-cap{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--moss-dim);letter-spacing:.02em;margin:0 0 12px}
  /* 2D flat blueprint */
  .bp2-body{fill:none;stroke:var(--paper-2);stroke-width:2;stroke-linejoin:round}
  .bp2-water{fill:#22443388;stroke:none}
  .bp2-wl{stroke:#6f9277;stroke-width:1;stroke-dasharray:4 3}
  .bp2-ground{stroke:#9aa079;stroke-width:1.2}
  .bp2-dunk{fill:none;stroke:var(--amber);stroke-width:1.8}
  .bp2-hole{fill:#10130C;stroke:var(--amber);stroke-width:1.4}
  .bp2-ramp polygon{fill:#3a2f1f4d;stroke:var(--amber);stroke-width:1.5}
  .bp2-ramp line{stroke:var(--amber);stroke-width:1;opacity:.55}
  .bp2-brick rect{fill:#4a3a22;stroke:var(--amber);stroke-width:1.1}
  .bp2-brick line{stroke:var(--amber);stroke-width:.7;opacity:.6}
  .bp2-dim{fill:none;stroke:#8a9166;stroke-width:.7}
  .bp2-dimlbl{font-family:'IBM Plex Mono',monospace;font-size:8.5px;fill:#c7c9a6;letter-spacing:.02em}
  /* dual 3D + 2D view layout */
  .pb-views{display:grid;gap:14px;margin:14px 0 6px}
  @media(min-width:620px){.pb-views{grid-template-columns:1fr 1fr;gap:16px}}
  .pb-view{margin:0}
  .pb-view .bp{margin:0 0 6px}
  .pb-view .bp-cap{margin:0}
  /* Reference photo spans the full card width below the 3D/2D pair rather
     than competing with them for a grid column — it's supplementary, not a
     third equal view. */
  .pb-photo{grid-column:1/-1}
  .pb-photo img{width:100%;max-width:420px;height:auto;border-radius:6px;border:1px solid var(--line);display:block;margin:0 auto 6px}

  .tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
  .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.02em;padding:3px 8px;border-radius:3px;border:1px solid}
  .tag.good{color:var(--moss);border-color:var(--moss-dim)}
  .tag.warn{color:var(--rust);border-color:#8a3a23}
  .steps{list-style:none;counter-reset:s;display:grid;gap:9px;margin:10px 0 0}
  .steps li{display:flex;gap:11px;font-size:14.5px;color:var(--paper-2)}
  .steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--amber);flex-shrink:0;padding-top:1px}
  /* --amber-dim is 59% alpha, which composites to a mid brown here. Amber text
     on it came to 2.70:1 and the body text to 3.86:1, both under AA. Using an
     opaque dark base instead keeps the amber banding but lets the text sit at
     full strength. */
  .kill-line{display:flex;align-items:center;gap:9px;margin-top:14px;background:#3a2f14;border:1px solid var(--amber);border-radius:4px;padding:9px 12px}
  .kill-line .kx{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;letter-spacing:.1em;color:#F0B94A;flex-shrink:0}
  .kill-line span.t{font-size:13.5px;color:#F2ECD8}

  /* DO NOT EMPLACE */
  .nogo{border:1px solid #8a3a23;border-left:4px solid var(--rust);border-radius:6px;background:#241510;padding:16px 18px;margin:14px 0}
  .nogo .nt{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;letter-spacing:.1em;color:#E07A52;margin-bottom:10px}
  .nogo ul{list-style:none;display:grid;gap:9px}
  .nogo li{font-size:14.5px;color:#e7cbbf;display:flex;gap:10px}
  .nogo li::before{content:"✕";color:var(--rust);font-weight:700;flex-shrink:0}
  .nogo li b{color:#fff}

  /* WIDER FIGHT */
  .fronts{display:grid;gap:10px;margin:14px 0}
  .front{border:1px solid var(--line);border-radius:6px;background:var(--drab-3);padding:15px 16px}
  .front .ft{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.02em;color:var(--amber);margin-bottom:6px;display:flex;align-items:center;gap:8px}
  .front .ft .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--moss-dim);font-weight:500}
  .front p{font-size:14.5px;color:var(--paper-2);margin:0}
  .front p b{color:var(--paper)}
  .myth{border:1px dashed var(--moss-dim);border-radius:6px;background:#1a1d12;padding:15px 16px;margin:14px 0}
  .myth .mt{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--moss);margin-bottom:10px}
  .myth-photo{margin:0 0 14px}
  .myth-photo img{width:100%;max-width:320px;height:auto;border-radius:6px;border:1px solid var(--line);display:block;margin:0 auto}
  .myth-photo figcaption{font-size:12.5px;color:var(--moss);text-align:center;margin-top:8px;font-style:italic}
  .myth ul{list-style:none;display:grid;gap:8px}
  .myth li{font-size:14px;color:var(--paper-2);display:flex;gap:9px}
  .myth li::before{content:"✕";color:var(--rust);font-weight:700;flex-shrink:0}
  .myth li b{color:var(--paper)}

  /* SUSTAINMENT */
  .supply{border:1px solid var(--amber);border-radius:6px;background:var(--drab-3);padding:18px;margin:18px 0}
  .supply .sl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--amber);font-weight:600;margin-bottom:8px}
  .supply p{margin-bottom:8px}
  .buy{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
  @media(min-width:560px){.buy{grid-template-columns:repeat(3,1fr)}}
  .buy a{display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1px solid var(--line);border-radius:5px;padding:11px 12px;background:var(--drab-2);transition:.16s}
  .buy a:hover{border-color:var(--amber);transform:translateY(-1px)}
  .buy .bn{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;color:var(--paper);text-transform:uppercase;letter-spacing:.02em}
  .buy .bd{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--moss)}
  .buy-note{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--moss-dim);margin-top:10px;letter-spacing:.02em}
  .tempo{display:grid;gap:10px;margin:18px 0}
  @media(min-width:560px){.tempo{grid-template-columns:1fr 1fr}}
  .tempo .t{border:1px solid var(--line);border-radius:5px;padding:14px;background:var(--drab-3)}
  .tempo .tk{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;color:var(--amber);font-size:15px;letter-spacing:.04em;margin-bottom:4px}
  .tempo .t p{font-size:14px;margin:0;color:var(--paper-2)}
  .note-line{font-size:14.5px;color:var(--paper-2);border-left:3px solid var(--moss-dim);padding-left:12px;margin:14px 0}
  .note-line b{color:var(--paper)}
  .warnbox{border:1px solid var(--rust);border-left:4px solid var(--rust);border-radius:5px;background:#2a1a14;padding:16px 18px;margin:18px 0}
  .warnbox .wt{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;letter-spacing:.12em;color:#E07A52;margin-bottom:7px}
  .warnbox p{color:#e7cbbf;margin:0;font-size:15px}
  .warnbox p b{color:#fff}

  /* COMMAND & SIGNAL */
  .signal-hit{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(22px,6vw,32px);line-height:1.05;text-transform:uppercase;color:var(--paper);margin:18px 0;letter-spacing:.005em}
  .signal-hit em{color:var(--amber);font-style:normal}
  .share-box{border:1px solid var(--amber);border-radius:6px;background:var(--drab-3);padding:18px;margin:18px 0}
  .share-box .sbt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--amber);font-weight:600;margin-bottom:6px}
  .share-box p{font-size:14.5px;color:var(--paper-2);margin-bottom:12px}
  .share-row{display:flex;flex-wrap:wrap;gap:10px}
  .share-row button{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;border-radius:3px;padding:11px 16px;cursor:pointer;border:1.5px solid var(--amber);background:var(--amber);color:var(--drab);transition:.16s}
  .share-row button.ghost{background:transparent;color:var(--paper);border-color:var(--line)}
  .share-row button:hover{transform:translateY(-1px)}
  .share-row button.ghost:hover{border-color:var(--amber);color:var(--amber)}
  .share-row a.ghost{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;border-radius:3px;padding:11px 16px;cursor:pointer;border:1.5px solid var(--line);background:transparent;color:var(--paper);text-decoration:none;display:inline-flex;align-items:center;transition:.16s}
  .share-row a.ghost:hover{transform:translateY(-1px);border-color:var(--amber);color:var(--amber)}
  #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--paper);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;padding:10px 16px;border-radius:4px;opacity:0;transition:.25s;pointer-events:none;z-index:90;box-shadow:0 4px 16px #0008}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* KEEP READING — cross-page links at the bottom of each subpage's content,
     above the footer. Same card language as .front, so it reads as part of
     the document rather than a bolted-on widget. */
  .related-pages{padding:8px 0 6px;border-top:1px solid var(--line);margin-top:28px}
  .related-pages .wrap{padding-top:22px}
  .rp-head{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--moss);margin-bottom:12px}
  .rp-grid{display:grid;gap:10px}
  .rp-card{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:6px;background:var(--drab-3);padding:14px 16px;text-decoration:none;transition:.16s}
  .rp-card:hover{border-color:var(--amber-dim);transform:translateY(-1px)}
  .rp-label{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.02em;color:var(--amber)}
  .rp-sub{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--moss)}

  footer{padding:34px 0 48px;text-align:center}
  .foot-stamp{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--moss);border:1px solid var(--moss-dim);border-radius:2px;padding:4px 11px;display:inline-block;margin-bottom:16px}
  footer p{font-size:13px;color:var(--moss);max-width:36em;margin:0 auto 8px}
  footer .url{color:var(--amber);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px}
  footer .foot-links{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.04em;color:var(--moss-dim);margin-top:16px}
  footer .dtg{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--moss-dim);letter-spacing:.08em;margin-top:14px}

  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* LEGAL ANNEX */
  .legal{max-width:38em;margin:18px auto 0;text-align:left;border:1px solid var(--line);border-radius:6px;background:var(--drab-2)}
  .legal summary{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.07em;color:var(--moss);font-weight:600;cursor:pointer;padding:12px 14px;list-style:none}
  .legal summary::-webkit-details-marker{display:none}
  .legal summary::before{content:"▸ ";color:var(--amber)}
  .legal[open] summary::before{content:"▾ "}
  .legal-body{padding:0 14px 14px}
  .legal-body p{font-size:12px;color:var(--moss);margin-bottom:10px;line-height:1.55;text-align:left}
  .legal-body p.priv{color:var(--moss-dim);border-top:1px solid var(--line);padding-top:10px;margin-bottom:0}

  /* FAQ */
  .faq{display:grid;gap:8px;margin-top:8px}
  .faq-item{border:1px solid var(--line);border-radius:6px;background:var(--drab-3)}
  .faq-item summary{font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;color:var(--paper);cursor:pointer;padding:14px 16px;list-style:none;display:flex;gap:10px;align-items:baseline}
  .faq-item summary h3{font:inherit;letter-spacing:inherit;color:inherit}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::before{content:"▸";color:var(--amber);flex-shrink:0}
  .faq-item[open] summary::before{content:"▾"}
  .faq-a{padding:0 16px 16px 32px}
  .faq-a p{color:var(--paper-2);font-size:15px;margin:0}

  /* PRINT FLYER (screen-hidden) */
  #flyer{display:none}
  @media print{
    @page{margin:0.5in}
    body{background:#fff!important}
    body > *{display:none!important}
    #flyer{display:block!important}
  }
  .flyer-inner{font-family:'Public Sans',sans-serif;color:#15170f;max-width:7.4in;margin:0 auto}
  .flyer-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#3a4029;border-bottom:2.5px solid #15170f;padding-bottom:8px;margin-bottom:20px;display:flex;justify-content:space-between}
  .flyer-h1{font-family:'Oswald',sans-serif;font-weight:700;font-size:62px;line-height:.9;text-transform:uppercase;color:#15170f;margin-bottom:10px}
  .flyer-h1 .am{color:#b6791a;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .flyer-sub{font-size:17px;font-weight:600;color:#23271a;margin-bottom:24px;max-width:40em;line-height:1.4}
  .flyer-moves{list-style:none;counter-reset:f;display:grid;gap:14px;margin-bottom:26px}
  .flyer-moves li{display:flex;gap:14px;align-items:flex-start}
  .flyer-moves li::before{counter-increment:f;content:counter(f);font-family:'Oswald',sans-serif;font-weight:700;font-size:21px;background:#15170f;color:#fff;width:34px;height:34px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .flyer-moves b{font-size:17px;color:#15170f}
  .flyer-moves span{font-size:15px;color:#23271a}
  .flyer-cta{display:flex;gap:22px;align-items:center;border:3px solid #15170f;border-radius:8px;padding:18px 20px}
  .flyer-qr{width:150px;height:150px;flex-shrink:0;border:2px dashed #999;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.4;color:#777;border-radius:4px}
  .flyer-qr img{width:100%;height:100%;object-fit:contain}
  .flyer-cta .scan{font-family:'Oswald',sans-serif;font-weight:700;font-size:25px;line-height:1.05;text-transform:uppercase;color:#15170f;margin-bottom:6px}
  .flyer-cta .url{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;color:#b6791a;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .flyer-foot{margin-top:24px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#3a4029;border-top:2.5px solid #15170f;padding-top:11px;text-align:center;letter-spacing:.05em}

/* --- Utility classes: moved here from inline style="" attributes so the CSP
   can drop 'unsafe-inline' from style-src. --- */
.u-mb-0{margin-bottom:0 !important}
.u-mt-14{margin:14px 0 0 !important}
.u-amber{color:var(--amber)}
.compare-illustration{width:100%;height:auto;display:block;margin:4px 0 6px;background:#e6dfc7;border:1px solid #c4bb9b;border-radius:5px}

/* Dashed strokes for the "Improvise" (IMP) icon + schematic, moved out of the
   inline SVG style attributes in script.js for the same reason. */
.dash-icon{stroke-dasharray:4 3}
.dash-schem{stroke-dasharray:6 4}

/* ============================================================================
   TOP ANNOUNCEMENT STRIP (home page, above the hero)

   Replaces two separate bars that both sat BELOW a full-bleed hero image,
   where a phone visitor met a screen and a half of artwork before reaching
   either one. This sits above the hero so it is the first thing on the page.

   Two panels in one strip. The left panel stays in the site's olive/amber
   OPORD language. The right panel deliberately does not: it runs a bright
   teal-to-green gradient with a sunshine-yellow button, which is the only
   place on the site using those hues. That contrast is the whole point — a
   child or a parent should be able to find it by colour alone, without
   reading a word of the military framing around it.

   Contrast (measured, WCAG AA needs 4.5:1 for body text):
     #FFFFFF on #1F6F78 (gradient start) ....... 5.83:1
     #FFFFFF on #2E7D32 (gradient end) ......... 5.13:1
     #EDFBF4 on #2E7D32 (sub-label, worst) ..... 4.81:1
     #12332C on #FFD34E (the button) ........... 9.56:1
   Both gradient endpoints clear AA, so every point along it does too. The
   automated checker cannot read gradients, so those numbers are stated here
   rather than left to it — see CONTRIBUTING.md.
   ============================================================================ */
  .topbanner{border-bottom:1px solid var(--line)}
  .tb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch}

  /* --- operations panel (olive, stays on-theme) --- */
  .tb-op{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
    background:linear-gradient(90deg,var(--amber-dim),transparent 70%),var(--drab-2);
    border-left:3px solid var(--amber);padding:13px 18px 13px 15px}
  .tb-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;
    letter-spacing:.11em;color:var(--drab);background:var(--amber);
    padding:4px 10px;border-radius:3px;flex-shrink:0;align-self:flex-start}
  .tb-msg{font-size:13.5px;line-height:1.45;color:var(--paper-2);flex:1 1 210px;min-width:0}
  .tb-msg b{color:var(--paper);font-weight:600}
  .tb-go{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
    letter-spacing:.03em;color:var(--amber);text-decoration:none;
    border:1px solid var(--amber-dim);border-radius:4px;padding:9px 13px;
    min-height:44px;display:inline-flex;align-items:center;transition:.16s;flex-shrink:0}
  .tb-go:hover{background:var(--amber);color:var(--drab);border-color:var(--amber)}

  /* --- kids panel (the loud one) --- */
  .tb-kids{display:grid;grid-template-columns:auto 1fr;gap:8px 13px;align-items:center;
    background:linear-gradient(135deg,#1F6F78,#2E7D32);
    border-left:3px solid #FFD34E;padding:13px 18px}
  .tb-art{width:58px;height:58px;grid-row:1/3;flex-shrink:0}
  .tb-kwords{min-width:0}
  .tb-new{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;
    font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:#12332C;background:#FFD34E;border-radius:99px;padding:3px 9px;margin-bottom:5px}
  .tb-ktitle{font-family:'Oswald',sans-serif;font-weight:700;font-size:23px;
    line-height:1.02;color:#fff;letter-spacing:.01em}
  .tb-ksub{font-size:13px;line-height:1.4;color:#EDFBF4;margin-top:3px}
  .tb-kactions{grid-column:2;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
  .tb-kbtn{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;
    color:#12332C;background:#FFD34E;border-radius:8px;padding:11px 17px;
    text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:.16s}
  .tb-kbtn:hover{background:#FFDE7A;transform:translateY(-1px)}
  .tb-kalt{font-size:13.5px;font-weight:600;color:#fff;text-decoration:underline;
    text-underline-offset:3px;padding:5px 0;min-height:32px;display:inline-flex;align-items:center}
  .tb-kalt:hover{color:#FFD34E}
  .tb-kids a:focus-visible{outline:2px solid #fff;outline-offset:3px}

  /* Below ~880px the two panels cannot both hold a readable line length side
     by side, so they stack — kids panel FIRST, because on a phone the top of
     the screen is the only thing seen without a deliberate scroll and the
     kids route is what this change exists to surface. */
  @media (max-width:880px){
    .tb-grid{grid-template-columns:1fr}
    .tb-kids{order:-1;border-left:none;border-bottom:3px solid #FFD34E}
    .tb-op{border-left:none}
  }
  @media (max-width:560px){
    .tb-kids{grid-template-columns:auto 1fr;gap:7px 11px;padding:12px 15px}
    .tb-art{width:46px;height:46px}
    .tb-ktitle{font-size:20px}
    .tb-kactions{grid-column:1/-1;margin-top:2px}
    .tb-op{padding:12px 15px}
    .tb-msg{font-size:13px}
  }

/* ============================================================================
   SKEETER SCHOOL (/kids/)
   The kids page runs on the site's existing paper palette — the same
   --paper/--ink surface .paperbox already uses — rather than the dark
   stencil chrome. It reads as a printed booklet sitting on the desk:
   softer for an 8-to-14-year-old, but built from tokens already in the
   design system, so it still belongs to this site.

   Also drops the uppercase headings, opens up the corner radii, and
   trades the rust alarm box for a warm one. Accent is #6b4f10 rather
   than --amber: amber on cream is only ~2.4:1, while this clears 5:1,
   so the small mono labels stay legible.
   Everything is scoped to .kids-page (set via body_class front matter)
   so no other page is touched.
   ============================================================================ */
  .kids-page{--k-ink:var(--ink); --k-soft:var(--ink-soft); --k-gold:#6b4f10;
    --k-card:#e6dfc7; --k-edge:#c4bb9b; --k-surface:var(--paper);
    /* The same teal-to-green run as the Skeeter School panel in the home
       page announcement strip, so arriving here feels like the same place.
       Used only as a FILL behind white text — never as text on the cream
       surface, where the green end measures 3.84:1 and fails AA. When a teal
       is needed as text, that is what --k-teal is for (5.68:1 on the card,
       5.11:1 on the page, 6.42:1 on the pale box). */
    --k-grad:linear-gradient(135deg,#1F6F78,#2E7D32);
    --k-grad-hover:linear-gradient(135deg,#25818C,#36913B);
    --k-teal:#1B5E52; --k-sun:#FFD34E}

  /* Surfaces */
  .kids-page .hero,
  .kids-page .order{background:var(--k-surface);color:var(--k-ink);
    border:1px solid var(--k-edge);border-radius:16px;margin:14px 0;padding:30px 0}
  .kids-page .hero{padding-top:26px}
  .kids-page .order{border-bottom:1px solid var(--k-edge)}

  /* Headings — sentence case instead of stencil caps */
  .kids-page .hero h1,
  .kids-page .sec-titles h2,
  .kids-page .signal-hit{text-transform:none;color:var(--k-ink)}
  .kids-page .hero h1{font-size:clamp(38px,10vw,68px);line-height:1}
  .kids-page .hero h1 .frag{color:var(--k-gold)}
  /* Section numbers become filled badges rather than big gold numerals.
     Repeated six times down a long page, they are the main thing giving it
     a colour rhythm instead of one unbroken field of beige. */
  .kids-page .sec-num{color:#fff;background:var(--k-grad);
    font-size:clamp(23px,5.5vw,31px);line-height:1;
    border-radius:12px;padding:9px 13px;align-self:flex-start}
  .kids-page .sec-titles .plain,
  .kids-page .hero .eyebrow{color:var(--k-gold)}
  .kids-page .signal-hit{font-size:clamp(20px,5vw,28px);line-height:1.2}
  .kids-page .signal-hit em{color:var(--k-gold);font-style:normal}

  /* Body copy — a touch larger and looser than the adult pages */
  .kids-page .hero .mission,
  .kids-page .order p,
  .kids-page .order .lead{color:var(--k-soft);font-size:17px;line-height:1.62}
  .kids-page .order .lead{color:var(--k-ink);font-weight:500}
  .kids-page .order p b,.kids-page .order .lead b{color:var(--k-ink)}
  /* Matches the "New - for kids" chip on the home page banner, so the pill a
     visitor tapped there is the first thing they see again here. */
  .kids-page .stamp{color:#fff;background:var(--k-grad);border:none;
    border-radius:999px;padding:6px 14px;letter-spacing:.1em}

  /* Cards */
  .kids-page .front,.kids-page .beat,.kids-page .faq-item,
  .kids-page .recon,.kids-page .quickstart,.kids-page .supply,
  .kids-page .paperbox{background:var(--k-card);border:1px solid var(--k-edge);
    border-radius:12px;color:var(--k-soft)}
  .kids-page .paperbox{background:#f1ecdc}
  /* A painted cap rather than border-top, so the four life-cycle stages read
     as a set. overflow:hidden lets the bar follow the 12px corner radius. */
  .kids-page .beat{border-top:1px solid var(--k-edge);position:relative;
    overflow:hidden;padding-top:18px}
  .kids-page .beat::before{content:"";position:absolute;inset:0 0 auto 0;
    height:5px;background:var(--k-grad)}
  .kids-page .front .ft,.kids-page .paperbox h3,
  .kids-page .supply .sl{color:var(--k-gold);text-transform:none}
  /* The small mono labels that head a box move to teal, so gold and teal
     alternate down the page instead of every accent being the same brown. */
  .kids-page .beat .bk,.kids-page .recon .rh,
  .kids-page .quickstart .qt{color:var(--k-teal);text-transform:none}
  /* Muted, but still >=4.5:1 on the #e6dfc7 card — a lighter warm grey
     tested at 2.99:1 and failed. */
  .kids-page .front .ft .num{color:#665d41}
  .kids-page .front p,.kids-page .beat p,.kids-page .recon p,
  .kids-page .paperbox p,.kids-page .faq-a p{color:var(--k-soft)}
  .kids-page .front p b,.kids-page .beat p b,.kids-page .paperbox p b,
  .kids-page .faq-a p b{color:var(--k-ink)}

  /* Fact-card glyphs. The card becomes a two-column grid (icon | text) so a
     long heading wraps beside the icon rather than under it. */
  /* align-content:start matters — cards are stretched to match the tallest in
     their row, and without it grid hands that leftover height to the auto
     rows, opening a gap between the heading and its paragraph. */
  .kids-page .front:has(.fact-icon){display:grid;grid-template-columns:auto 1fr;
    column-gap:13px;row-gap:2px;align-items:start;align-content:start}
  /* Each fact icon sits in a filled disc. The icon strokes are set as a
     presentation attribute in the markup (#6b4f10); a CSS `stroke` wins over
     that, so they flip to white here without touching eleven inline SVGs. */
  .kids-page .fact-icon{width:46px;height:46px;grid-row:1/3;margin-top:1px;
    background:var(--k-grad);border-radius:50%;padding:8px}
  .kids-page .fact-icon g{stroke:#fff}
  .kids-page .front .fact-icon + .ft{margin-bottom:2px}

  /* Life-cycle diagram — capped so the hand-set type inside the SVG keeps a
     sensible rendered size on wide screens instead of ballooning. */
  .kids-page .lifecycle-fig{margin:18px 0 6px}
  .kids-page .lifecycle-svg{display:block;width:100%;max-width:460px;height:auto;margin:0 auto}
  .kids-page .lifecycle-fig figcaption{text-align:center;font-size:15px;color:var(--k-soft);
    max-width:34em;margin:10px auto 0;font-style:italic}

  /* Numbered mission steps */
  .kids-page .qsteps li::before{background:var(--k-grad);color:#fff;border-radius:8px}
  .kids-page .qsteps li span{color:var(--k-soft);font-size:16px}
  .kids-page .qsteps li b{color:var(--k-ink)}
  .kids-page .reclist li{color:var(--k-soft)}
  .kids-page .reclist li::before{color:var(--k-gold)}

  /* Quiz */
  .kids-page .faq-item summary{color:var(--k-ink)}
  .kids-page .faq-item summary::before{color:var(--k-gold)}

  /* SVG illustration styling. These live here rather than in a <style>
     block inside each inline SVG: the site's CSP is style-src 'self' with
     no 'unsafe-inline', so an inline <style> element is blocked outright
     and every shape silently falls back to a black fill. */
  .kids-page .an-body{fill:#6f6647;stroke:none}
  .kids-page .an-out{fill:none;stroke:#6f6647;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .kids-page .an-leg{fill:none;stroke:#6f6647;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
  .kids-page .an-legfar{fill:none;stroke:#6f6647;stroke-width:2.8;stroke-linecap:round;opacity:.4}
  .kids-page .an-band{stroke:#f4efe0;stroke-width:3.6;stroke-linecap:butt}
  .kids-page .an-wing{fill:#cfd8cd;fill-opacity:.55;stroke:#6f6647;stroke-width:1.6}
  .kids-page .an-lead{fill:none;stroke:#6b4f10;stroke-width:1.5;stroke-dasharray:4 3}
  .kids-page .an-dot{fill:#6b4f10}
  .kids-page .an-lbl{font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;fill:#1E1F16}
  .kids-page .an-sub{font-family:'Public Sans',sans-serif;font-size:14.5px;fill:#41442F}
  .kids-page .pc-p-well{fill:#b9c3a0;stroke:#7d8a68;stroke-width:2}
  .kids-page .pc-p-sick{fill:#c9a44e;stroke:#7a5a12;stroke-width:2}
  .kids-page .pc-cap{font-family:'Public Sans',sans-serif;font-size:15px;fill:#41442F}
  .kids-page .pc-big{font-family:'Oswald',sans-serif;font-weight:700;font-size:21px;fill:#1E1F16}
.kids-page .yd-ln{fill:none;stroke:#4f4a34;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .kids-page .yd-thin{fill:none;stroke:#4f4a34;stroke-width:1.8;stroke-linecap:round}
  .kids-page .yd-wood{fill:#cbbf9c}
  .kids-page .yd-roof{fill:#8f8461}
  .kids-page .yd-wall{fill:#ddd3b2}
  .kids-page .yd-obj{fill:#c9bd99}
  .kids-page .yd-dark{fill:#a89a72}
  .kids-page .yd-water{fill:#7fa8c4;fill-opacity:.8}
  .kids-page .yd-grass{fill:#b9c3a0}
  .kids-page .yd-tree{fill:#aebb96}
  .kids-page .yd-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:23px;fill:#f4efe0;text-anchor:middle}
  .kids-page .yd-pin{fill:#8c451f;stroke:#f4efe0;stroke-width:2.5}

  /* Illustration figures (mosquito anatomy, backyard scene, pictogram).
     -wide sits on its own card background; -flush drops straight into the
     paperbox it lives inside, which already has a surface of its own. */
  .kid-fig{margin:18px 0}
  .kid-fig svg{display:block;width:100%;height:auto}
  /* Cap each illustration at the width it was drawn for. Past that the
     hand-set type inside the SVG scales up with the artwork and starts
     shouting over the body copy around it. */
  .kid-fig:has(.an-body) svg{max-width:620px;margin:0 auto}
  .kid-fig:has(.yd-grass) svg{max-width:820px;margin:0 auto}
  .kid-fig:has(.pc-cap) svg{max-width:560px;margin:0 auto}
  /* Seek-and-find layout. The scene is drawn portrait rather than landscape
     so it survives a phone: at 330px it still renders its numbers at about
     17px, where the old wide version dropped them to 7px and needed a
     sideways scroll to be usable at all. On desktop the spare width goes to
     the key list beside it instead of stretching the artwork. */
  .yardfind{display:grid;gap:16px;margin:18px 0}
  .yardfind .yard-scene{margin:0}
  .yardfind .yard-scene svg{max-width:440px;margin:0 auto}
  .yardfind .recon{margin:0}
  @media (min-width:900px){
    .yardfind{grid-template-columns:minmax(0,420px) 1fr;gap:22px;align-items:start}
    .kids-page .spotlist{grid-template-columns:1fr}
  }
  .kid-fig-wide{background:var(--k-card);border:1px solid var(--k-edge);
    border-radius:12px;padding:16px}
  .kid-fig-flush{margin:14px 0 16px}
  .kid-fig figcaption{font-size:15px;color:var(--k-soft);line-height:1.5;
    margin-top:10px;font-style:italic}
  .kid-fig-wide figcaption{text-align:center;max-width:40em;margin-left:auto;margin-right:auto}

  /* Numbered key beneath the backyard scene */
  .kids-page .spotlist{list-style:none;display:grid;gap:6px;margin-top:10px}
  @media(min-width:520px){.kids-page .spotlist{grid-template-columns:1fr 1fr}}
  @media(min-width:900px){.kids-page .spotlist{grid-template-columns:repeat(3,1fr)}}
  .kids-page .spotlist li{display:flex;align-items:center;gap:9px;
    font-size:15px;color:var(--k-soft)}
  .kids-page .spotlist b{flex-shrink:0;width:25px;height:25px;border-radius:50%;
    background:#8c451f;color:#f4efe0;font-family:'Oswald',sans-serif;font-weight:700;
    font-size:13px;display:flex;align-items:center;justify-content:center}

  /* Printable-checklist call-out */
  /* The one thing on this page a teacher or a parent is most likely to want,
     so it gets the full fill and is the only element here that is entirely
     gradient. The icon strokes flip to white the same way the fact icons do.
     White heading 5.13:1, pale body 4.81:1, sun arrow 3.58:1 (large). */
  .kids-page .hunt-card-link{display:flex;align-items:center;gap:15px;
    background:var(--k-grad);border:none;border-radius:14px;
    padding:17px 19px;margin:16px 0;text-decoration:none;transition:.16s;
    box-shadow:0 3px 0 #17423B}
  .kids-page .hunt-card-link:hover{background:var(--k-grad-hover);transform:translateY(-2px);
    box-shadow:0 5px 0 #17423B}
  .kids-page .hunt-card-link svg{width:40px;height:40px;flex-shrink:0}
  .kids-page .hunt-card-link svg g,.kids-page .hunt-card-link svg path,
  .kids-page .hunt-card-link svg rect,.kids-page .hunt-card-link svg line{stroke:#fff}
  .kids-page .hunt-card-link span{font-size:15.5px;color:#EDFBF4;line-height:1.5}
  .kids-page .hunt-card-link span b{display:block;font-family:'Oswald',sans-serif;
    font-weight:700;font-size:19px;color:#fff;margin-bottom:2px}
  .kids-page .hunt-card-link .go{font-size:26px;color:var(--k-sun);flex-shrink:0}
  .kids-page .hunt-card-link:focus-visible{outline:3px solid var(--k-ink);outline-offset:3px}

  /* Quiz */
  .kids-page .quiz{background:var(--k-card);border:1px solid var(--k-edge);
    border-radius:12px;padding:20px}
  .kids-page .quiz-head{display:flex;justify-content:space-between;align-items:baseline;
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:#665d41}
  .kids-page .quiz-score{color:var(--k-gold);font-weight:600}
  .kids-page .quiz-bar{height:6px;border-radius:99px;background:#d2c9a9;margin:9px 0 16px;overflow:hidden}
  .kids-page .quiz-bar span{display:block;height:100%;background:var(--k-grad);
    border-radius:99px;transition:width .3s ease}
  .kids-page .quiz-q{font-family:'Oswald',sans-serif;font-weight:700;
    font-size:clamp(19px,4.6vw,23px);line-height:1.25;color:var(--k-ink);margin-bottom:14px}
  .kids-page .quiz-q:focus{outline:none}
  .kids-page .quiz-choices{display:grid;gap:9px}
  .kids-page .quiz-choice{font-family:'Public Sans',system-ui,sans-serif;font-size:16px;
    text-align:left;color:var(--k-ink);background:#f4efe0;border:1.5px solid var(--k-edge);
    border-radius:10px;padding:13px 15px;cursor:pointer;transition:.14s;min-height:48px}
  .kids-page .quiz-choice:hover:not(:disabled){border-color:var(--k-gold);background:#faf6ea}
  .kids-page .quiz-choice:disabled{cursor:default;opacity:.75}
  /* Right/wrong carry an icon as well as colour, so the result is not
     conveyed by colour alone. */
  .kids-page .quiz-choice.is-right{background:#dbe7cf;border-color:#5e7a3c;color:#22301a;opacity:1}
  .kids-page .quiz-choice.is-right::before{content:"✓ ";font-weight:700;color:#43602a}
  .kids-page .quiz-choice.is-wrong{background:#f0dcd4;border-color:#a9603f;color:#3a1f14;opacity:1}
  .kids-page .quiz-choice.is-wrong::before{content:"✕ ";font-weight:700;color:#8c451f}
  .kids-page .quiz-feedback:not(:empty){margin-top:16px;padding-top:14px;border-top:1px dashed var(--k-edge)}
  .kids-page .quiz-verdict{font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;
    color:var(--k-ink);margin-bottom:4px}
  .kids-page .quiz-why{font-size:15.5px;color:var(--k-soft);margin-bottom:14px;line-height:1.55}
  .kids-page .quiz-next{font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;
    letter-spacing:.02em;color:#fff;background:var(--k-grad);border:none;
    border-radius:10px;padding:12px 22px;cursor:pointer;min-height:48px;transition:.14s}
  .kids-page .quiz-next:hover{background:var(--k-grad-hover)}
  .kids-page .quiz-done{text-align:center;padding:8px 0}
  .kids-page .quiz-done:focus{outline:none}
  /* --k-teal, not the gradient: this is text on the cream card, where the
     gradient's green end only reaches 3.84:1. Teal measures 5.68:1. */
  .kids-page .quiz-done-score{font-family:'Oswald',sans-serif;font-weight:700;
    font-size:clamp(40px,11vw,58px);line-height:1;color:var(--k-teal)}
  .kids-page .quiz-rank{font-family:'Oswald',sans-serif;font-weight:700;
    font-size:clamp(21px,5.5vw,27px);color:var(--k-ink);margin-top:6px}
  .kids-page .quiz-note{font-size:16px;color:var(--k-soft);margin:8px auto 16px;max-width:30em}
  @media (prefers-reduced-motion:reduce){
    .kids-page .quiz-bar span{transition:none}
  }

  /* ---- pronunciation respellings ----------------------------------------
     Words like siphon, pupa, larva and proboscis are the point of the page,
     so they cannot be swapped for easier ones — but an 8-year-old who cannot
     say a word tends to stop reading at it. Each one carries a plain-English
     respelling (SY-fun, PYOO-puh) in small caps-and-hyphens, not IPA, which
     needs no key to read.

     aria-hidden because this is a VISUAL aid. A screen reader already
     pronounces "siphon" correctly; reading "S-Y-fun" after it would be
     noise. The word itself stays in the accessibility tree untouched.

     Sits on the baseline of the sentence around it and never wraps away from
     its word — white-space:nowrap keeps "(PYOO-puh)" whole. */
  /* The one-line key that tells a reader what the green bits are. */
  .kids-page .saynote{background:#f1ecdc;border:1px dashed var(--k-edge);
    border-radius:10px;padding:11px 14px;margin:14px 0 4px;
    font-size:15.5px !important;color:var(--k-soft)}
  .kids-page .saynote b{color:var(--k-ink)}
  .kids-page .say{font-family:'IBM Plex Mono',monospace;font-size:.78em;
    font-weight:600;letter-spacing:.01em;color:var(--k-teal);white-space:nowrap}
  .kids-page .say::before{content:"("}
  .kids-page .say::after{content:")"}
  /* Inside the life-cycle card headings the respelling must not inherit
     Oswald's weight or size, or it stops reading as an aside. */
  .kids-page .bk .say{font-size:13px;font-weight:500}
  /* SVG equivalents. The anatomy diagram sets type as <text>, so these are
     fill rather than color. */
  .kids-page .an-say-svg{font-family:'IBM Plex Mono',monospace;font-size:12.5px;
    font-weight:500;fill:#1B5E52}

  /* Safety box — warm and calm rather than an alarm */
  .kids-page .warnbox{background:#f1e4c4;border-color:#c9a44e;
    border-left:5px solid #c9a44e;border-radius:12px}
  .kids-page .warnbox .wt{color:#7a5a12}
  .kids-page .warnbox p{color:var(--k-soft)}
  .kids-page .warnbox p b{color:var(--k-ink)}

  /* Links and source cards */
  .kids-page .buy a{background:#f1ecdc;border-color:var(--k-edge)}
  .kids-page .buy a:hover{border-color:var(--k-gold)}
  .kids-page .buy .bn{color:var(--k-gold)}
  .kids-page .buy .bd{color:var(--k-soft)}
  .kids-page .note-line{color:var(--k-soft);border-left-color:var(--k-edge)}
  .kids-page .order a.u-amber,.kids-page .note-line a{color:var(--k-gold)}
  .kids-page a:focus-visible,.kids-page summary:focus-visible{outline-color:var(--k-gold)}

/* ============================================================================
   RESPONSIVE SHELL (Phase 1)
   Mobile & tablet render exactly as before: .layout/.main are pass-through
   wrappers and the side rails are hidden, so the content keeps its full-bleed
   sections and 760px reading column untouched. On wide desktops the rails are
   ADDED into the previously-dead gutters as fixed panels — the content is not
   reflowed, so nothing about the existing layout can regress.
   ============================================================================ */
  .layout{display:block}
  .main{display:block}

  /* Option A — fill the width on desktop: widen the content column, cap the
     narrative paragraphs so text stays readable, and let the card grids use the
     extra room (the two single-column groups go multi-column). Mobile and tablet
     are unchanged (the original 760px column, full-bleed sections, top-bar phase
     nav). */
  .section-rail{display:none}

  @media (min-width:1201px){
    /* Desktop shell. The rail is a real grid column rather than a panel
       floating in the gutter beside a centred column: the gutter approach
       only worked when the viewport happened to be wide enough to leave
       one (>=1600px), which meant common laptop widths (1440, 1512, 1536)
       got no rail at all and fell back to the mobile jump button. In the
       flow it is available at every desktop width.

       --shell/--rail-w/--rail-gap also drive the top bar and breadcrumb
       alignment below, so all the chrome lines up with the content column
       instead of the viewport centre. */
    /* Shell = padding + rail + gap + the 1120px content column, so the
       content track is pinned to exactly 1120 and never drifts. */
    :root{--shell:1400px; --shell-pad:20px; --rail-w:212px; --rail-gap:28px;
      --col-offset:calc(var(--shell-pad) + var(--rail-w) + var(--rail-gap))}

    .jumpnav{display:none}

    .layout{display:grid;grid-template-columns:var(--rail-w) minmax(0,1120px);
      gap:var(--rail-gap);align-items:start;
      max-width:var(--shell);margin:0 auto;padding:0 var(--shell-pad)}
    /* min-width:0 stops the wide card grids and blueprints from forcing the
       content column past its track and overflowing the page. */
    .main{min-width:0}

    /* Chrome outside .layout, realigned to the content column. The extra
       20px matches .wrap's own horizontal padding, so the wordmark and
       breadcrumb sit on the same left edge as the body text. */
    .cmdbar-inner,.breadcrumbs .wrap{max-width:var(--shell);
      padding-left:calc(var(--col-offset) + 20px);padding-right:var(--shell-pad)}

    .wrap{max-width:1120px}

    /* Keep narrative text at a readable measure inside the wide column. */
    .order p{max-width:42em}

    /* The two single-column card groups now use the width. align-items:start so
       an expanded (taller) platform card doesn't stretch its row neighbour. */
    .arsenal{grid-template-columns:1fr 1fr;align-items:start}
    .fronts{grid-template-columns:repeat(3,1fr)}
    .rp-grid{grid-template-columns:repeat(3,1fr)}
  }

  /* Desktop rail. Sticky inside its grid column rather than fixed to the
     viewport, so it needs no left/width math and can never collide with the
     content column. No fixed height or inner scroll — the nested hierarchy
     keeps it short (roughly 300-480px) so the page is the only thing that
     scrolls. */
  @media (min-width:1201px){
    .section-rail{
      display:block;position:sticky;top:84px;
      background:var(--drab-2);border:1px solid var(--line);border-radius:6px;
      padding:14px 12px 14px;z-index:40;
    }
    .rail-head{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
      letter-spacing:.16em;color:var(--moss);margin-bottom:8px;
      padding:0 8px 8px;border-bottom:1px solid var(--line)}
    .rail-nav{list-style:none;display:flex;flex-direction:column;gap:1px}

    /* Page links: the top level of the hierarchy. */
    .primary-link{display:block;
      font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.03em;
      color:var(--moss);text-decoration:none;padding:7px 8px;border-radius:4px;
      transition:.16s}
    .primary-link:hover{color:var(--paper);background:var(--drab-3)}
    /* Active page is the single strongest marker in the rail. */
    .primary-link.active{color:var(--amber);font-weight:600;background:var(--drab-3)}
    /* Skeeter School: second in the rail, and the only entry that is not
       olive. The KIDS flag does the work at a glance; the teal keeps it
       readable as a link rather than as a warning. Measured 7.41:1 on the
       link's own #17352F fill; the active state is 6.95:1. */
    .primary-link.accent-kids{color:#6FD4B4;background:#17352F;
      border:1px solid #2C6A5B;display:flex;align-items:center;gap:7px}
    .primary-link.accent-kids:hover{color:#fff;background:#1F4A40;border-color:#3E8E7A}
    /* The active marker must still win on /kids/ itself, or the current page
       stops being obvious the moment you are on it. */
    .primary-link.accent-kids.active{color:#FFD34E;background:#1F4A40;
      border-color:#FFD34E;font-weight:600}
    .rail-flag{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;
      letter-spacing:.1em;color:#12332C;background:#FFD34E;border-radius:99px;
      padding:2px 6px;margin-left:auto;flex-shrink:0}

    /* In-page sections, nested under the active page. The left rule ties them
       visually to their parent and marks them as one level down. */
    .rail-sections{list-style:none;display:flex;flex-direction:column;gap:1px;
      margin:2px 0 6px;padding-left:9px;border-left:1px solid var(--line)}
    .rail-sections a{display:flex;gap:7px;align-items:baseline;
      font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.02em;
      color:var(--moss);text-decoration:none;padding:5px 8px;border-radius:4px;
      transition:.16s}
    .rail-sections a .n{color:var(--moss-dim);font-size:9.5px;font-weight:600;flex-shrink:0}
    .rail-sections a:hover{color:var(--paper);background:var(--drab-3)}
    /* Scroll-spy current section: amber text only, no fill — so it never
       competes with the active-page marker above it. */
    .rail-sections a.active{color:var(--amber)}
    .rail-sections a.active .n{color:var(--amber)}
  }