@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/saira-condensed-latin-500.22c6c5bf.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/saira-condensed-latin-ext-500.da5cf8e6.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/saira-condensed-latin-600.d20f5b8d.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/saira-condensed-latin-ext-600.0bf20d8a.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/saira-condensed-latin-700.eb1cf59a.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/saira-condensed-latin-ext-700.f15c9a22.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400.3b646991.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-ext-400.c93d2a12.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-500.0717336f.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-ext-500.2846035d.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600.8960851d.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-ext-600.b25dfd4f.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400.08949f72.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-ext-400.6bc0f226.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500.01d28544.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-ext-500.6bb06407.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Optic Mounting — shared stylesheet for generated pages.
   Same design system as the interactive tool: cool industrial neutrals,
   blueprint accent, Saira Condensed / IBM Plex pairing. 2.0 (2026-09-23) adds
   the always-dark header, hero and footer bands, card grids, larger radii and
   a deeper dark theme; the design system artifact is the reference for it. */
:root{
  --ground:#EBEEF0; --surface:#FBFCFD; --surface-2:#DFE4E8; --inset:#E4E8EB;
  --line:#C4CCD3; --line-soft:#D8DEE3;
  --ink:#14181C; --ink-2:#4B5661; --ink-3:#5B656F;
  --accent:#1A5478; --accent-soft:#D3E2EC; --on-accent:#FBFCFD;
  --ok:#2A6B4C; --ok-soft:#D1E5D9; --ok-edge:#5D9E7C;
  --warn:#845513; --warn-soft:#F0E3C6; --warn-edge:#C08F3C;
  --bad:#8E312A; --bad-soft:#EED7D4; --bad-edge:#C0645C;
  --flag:#5B4A86; --flag-soft:#E0DBEE;
  --shadow:0 1px 1px rgba(16,24,32,.05), 0 10px 26px -18px rgba(16,24,32,.45);
  --shadow-lift:0 1px 2px rgba(16,24,32,.06), 0 14px 30px -16px rgba(16,24,32,.38);
  /* the header, hero and footer bands: dark in every theme, so these do not
     change with it. band-accent is the light blue — the dark accent is
     illegible on the band. */
  --band:#12171C; --band-2:#1A2128; --band-line:#2C353E;
  --band-ink:#EEF2F5; --band-ink-2:#A9B4BE; --band-accent:#7CB4D9; --on-band-accent:#0E1215;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --disp:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B0D10; --surface:#14181C; --surface-2:#1D2329; --inset:#101317;
    --line:#2B333B; --line-soft:#1C2228;
    --ink:#E4EAEF; --ink-2:#9AA6B1; --ink-3:#85919C;
    --accent:#7CB4D9; --accent-soft:#1B2E3C; --on-accent:#0E1215;
    --ok:#74C098; --ok-soft:#17291F; --ok-edge:#33613F;
    --warn:#D9A65E; --warn-soft:#2B2317; --warn-edge:#6B5226;
    --bad:#E19189; --bad-soft:#2C1D1B; --bad-edge:#6E3B36;
    --flag:#A99BD6; --flag-soft:#211E30;
    --shadow:0 1px 1px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.8);
    --shadow-lift:0 1px 2px rgba(0,0,0,.5), 0 16px 34px -16px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0B0D10; --surface:#14181C; --surface-2:#1D2329; --inset:#101317;
  --line:#2B333B; --line-soft:#1C2228;
  --ink:#E4EAEF; --ink-2:#9AA6B1; --ink-3:#85919C;
  --accent:#7CB4D9; --accent-soft:#1B2E3C; --on-accent:#0E1215;
  --ok:#74C098; --ok-soft:#17291F; --ok-edge:#33613F;
  --warn:#D9A65E; --warn-soft:#2B2317; --warn-edge:#6B5226;
  --bad:#E19189; --bad-soft:#2C1D1B; --bad-edge:#6E3B36;
  --flag:#A99BD6; --flag-soft:#211E30;
  --shadow:0 1px 1px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.8);
  --shadow-lift:0 1px 2px rgba(0,0,0,.5), 0 16px 34px -16px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px; margin:0 auto; padding-inline:16px; padding-block:0 56px}
/* grid pages — home, and anything laid out as cards — use the header's width */
.wrap-wide{max-width:1200px; margin:0 auto; padding-inline:16px; padding-block:0 56px}
@media (min-width:900px){ .wrap, .wrap-wide{padding-inline:24px} }
img{max-width:100%}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ── site header ─────────────────────────────────────────────────────────
   An always-dark band on every page: the mark and name, one search field
   over every pistol and optic, the fit checker, and a bar of sections. The
   3px rule on top is the old masthead's three bands, kept. Sticky on a
   desktop, where it costs nothing; on a phone it scrolls away, because a
   header that tall would take a fifth of the screen for good. */
/* first thing a keyboard reaches: jumps past the header and its search */
.skip{position:absolute; left:-9999px; top:8px; z-index:100; padding:8px 12px; border-radius:6px;
  background:var(--band-accent); color:var(--on-band-accent); font-weight:600; text-decoration:none}
.skip:focus{left:16px}
/* In the dark theme the ground is near-black too, so the bands lift a step
   to stay a separate layer (they measured 1.08:1 against the ground). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--band:#1A2027; --band-2:#222A32; --band-line:#36414B}
}
:root[data-theme="dark"]{--band:#1A2027; --band-2:#222A32; --band-line:#36414B}
.sh{position:sticky; top:0; z-index:50; background:var(--band); color:var(--band-ink)}
.sh::before{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg,var(--band-accent) 0 38%,var(--warn-edge) 38% 62%,var(--ok-edge) 62% 100%);
}
html{scroll-padding-top:112px}
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.sh-in{max-width:1200px; margin:0 auto; padding-inline:16px; display:flex; align-items:center; gap:12px 24px}
@media (min-width:900px){ .sh-in{padding-inline:24px} }
.sh-top .sh-in{padding-block:12px}
.sh-brand{display:flex; align-items:center; gap:11px; color:var(--band-ink); text-decoration:none; flex:0 0 auto}
.sh-brand svg{width:36px; height:36px; color:var(--band-accent); flex:0 0 auto}
.sh-brand small{
  display:block; font-family:var(--disp); font-size:9.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--band-accent); margin-bottom:3px;
}
.sh-brand b{display:block; font-family:var(--disp); font-size:24px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1}
.sh-search{position:relative; flex:1 1 360px; display:flex; max-width:640px; min-width:0; margin:0}
.sh-search input{
  flex:1; min-width:0; font-family:var(--sans); font-size:15px; color:var(--band-ink);
  background:var(--band-2); border:1px solid var(--band-line); border-right:0;
  border-radius:6px 0 0 6px; padding:10px 13px; appearance:none;
}
.sh-search input::placeholder{color:var(--band-ink-2)}
.sh-search input:focus-visible{outline:2px solid var(--band-accent); outline-offset:-1px}
.sh-search button{
  font-family:var(--disp); font-size:14px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--band-accent); color:var(--on-band-accent); border:0; cursor:pointer;
  border-radius:0 6px 6px 0; padding:0 20px;
}
.sh-search button:hover{background:var(--band-ink)}
/* the results: the combobox's own list, so they look like every other picker */
.sh-search .combo-list{color:var(--ink); right:auto; width:100%; max-width:520px}
.sh-search .combo-opt{display:flex; align-items:baseline; gap:8px}
.sh-search .combo-opt .ob{color:var(--ink-3); font-size:12.5px; white-space:nowrap}
.sh-search .combo-opt.is-active .ob{color:var(--on-accent); opacity:.8}
.sh-cta{
  margin-left:auto; font-family:var(--disp); font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--band-ink); text-decoration:none; white-space:nowrap;
  border:1px solid var(--band-line); border-radius:6px; padding:9px 14px;
}
.sh-cta:hover{border-color:var(--band-accent); color:var(--band-accent)}
.sh-cats{background:var(--band-2); border-top:1px solid var(--band-line); border-bottom:1px solid var(--band-line)}
.sh-cats .sh-in{gap:0; overflow-x:auto; scrollbar-width:none}
/* on a narrow screen the bar scrolls; the fade at the right edge says so */
@media (max-width:760px){
  .sh-cats .sh-in{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent); mask-image:linear-gradient(to right,#000 82%,transparent); padding-right:40px}
}
.sh-cats a{
  font-family:var(--disp); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--band-ink-2); text-decoration:none; white-space:nowrap;
  padding:11px 14px 9px; border-bottom:2px solid transparent;
}
.sh-cats a:hover{color:var(--band-ink)}
.sh-cats a[aria-current]{color:var(--band-ink); border-bottom-color:var(--band-accent)}
.sh-meta{margin-left:auto; padding-left:16px; font-family:var(--mono); font-size:11.5px; color:var(--band-ink-2); white-space:nowrap}
.sh a:focus-visible, .sh button:focus-visible{outline:2px solid var(--band-accent); outline-offset:2px}
@media (max-width:760px){
  .sh{position:relative}
  html{scroll-padding-top:0}
  .sh-top .sh-in{flex-wrap:wrap}
  .sh-search{order:3; flex-basis:100%; max-width:none}
  .sh-brand b{font-size:20px}
  .sh-brand svg{width:30px; height:30px}
  .sh-meta{display:none}
}
/* The iPhone "add to home screen" hint, right under the header (build.mjs,
   INSTALL_HINT; assets/install.js shows it). In this section so the tool
   page, which takes the header's CSS from here, gets it too. Never printed. */
.a2hs{background:var(--accent-soft); color:var(--ink); border-bottom:1px solid var(--line)}
.a2hs .sh-in{padding-block:10px; gap:12px}
.a2hs p{margin:0; flex:1; font-size:14px; line-height:1.5; color:var(--ink-2)}
.a2hs p b{color:var(--ink)}
.a2hs-k{font-weight:600; color:var(--ink); white-space:nowrap}
.a2hs-k svg{width:13px; height:16px; vertical-align:-2px; color:var(--accent)}
.a2hs-x{
  flex:0 0 auto; width:36px; height:36px; font-size:22px; line-height:1; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:6px; color:var(--ink-2);
}
.a2hs-x:hover{color:var(--ink); border-color:var(--line)}
.a2hs-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media print{ .a2hs{display:none !important} }

/* breadcrumb + headings */
.crumb{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-block:18px 0}
.crumb a{color:var(--ink-3)}
h1{
  font-family:var(--disp); font-weight:700; font-size:clamp(26px,5.2vw,38px);
  letter-spacing:.03em; line-height:1.05; margin:10px 0 0; text-wrap:balance;
}
h2{
  font-family:var(--disp); font-size:24px; line-height:1.15; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; margin:40px 0 0;
}
h3{font-family:var(--disp); font-size:16px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:26px 0 8px}
/* a maker's group on an index page: an h2 for the outline, sized as a label */
/* the indexes: an A-Z bar of makers, then makers as cards in columns */
.azbar{display:flex; flex-wrap:wrap; gap:4px 6px; margin:14px 0 6px; padding:8px 0; background:var(--ground)}
.azbar a{font-family:var(--disp); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; min-height:28px; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink-2); text-decoration:none}
.azbar a:hover{border-color:var(--accent); color:var(--accent)}
.bgrid{columns:250px; column-gap:16px; margin-top:10px}
.bcard{break-inside:avoid; margin:0 0 16px; padding:4px 14px 8px; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; scroll-margin-top:60px}
.bcard[hidden]{display:none}
.bcard h2.grp{margin:10px 0 4px; font-size:14px}
.blist{list-style:none; margin:0; padding:0}
.blist li[hidden], .blist[hidden]{display:none}
.blist a{display:grid; grid-template-columns:1fr auto; gap:0 10px; align-items:baseline; padding:7px 0 6px;
  color:var(--ink); text-decoration:none; border-top:1px solid var(--line-soft); min-height:32px}
.blist li:first-child a{border-top:0}
.blist a:hover .bm{color:var(--accent); text-decoration:underline}
.blist .bm{font-size:14px; font-weight:500; line-height:1.3}
.blist .bn{font-family:var(--mono); font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.blist .bn b{color:var(--ink); font-weight:500}
.blist .t-bar{grid-column:1 / -1; height:3px; margin-top:5px}
@media (max-width:600px){ .blist a{padding:6px 0 5px} .blist .t-bar{margin-top:4px} .bcard{margin-bottom:10px} }
h2.grp{font-family:var(--disp); font-size:16px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:26px 0 10px}
.tlist{margin-top:0}
.tlist .tile{min-height:0}
.tlist li[hidden], ul.tgrid[hidden]{display:none}
/* /fit/: one row per pairing, the verdict lined up on the right */
.flist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0 18px}
.flist a{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 2px;
  border-bottom:1px solid var(--line-soft); color:var(--ink); text-decoration:none; font-size:14px}
.flist a:hover span:first-child{color:var(--accent); text-decoration:underline}
.flist .chip{flex:none; font-size:11px; padding:1px 6px}
.flist li[hidden], ul.flist[hidden]{display:none}
.every-none{margin-top:26px}
.incl{padding-left:20px; max-width:72ch}
.incl li{margin:6px 0}
.every-none summary{cursor:pointer; font-family:var(--disp); font-size:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
/* /footprints/: the chart */
.fpchart .fpc{display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none}
.fpchart .fpc:hover b{color:var(--accent); text-decoration:underline}
.fpc-d svg{display:block; width:64px; height:auto}
.fpc-aka{display:block; font-size:12.5px; color:var(--ink-3); line-height:1.35}
@media (max-width:640px){
  .fpchart thead{display:none}
  .fpchart tr{display:grid; grid-template-columns:repeat(3,auto); gap:4px 14px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
  .fpchart td{border:0; padding:0}
  .fpchart td:first-child{grid-column:1 / -1}
  .fpchart td:nth-child(n+4)::before{content:attr(data-l); display:block; font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em}
}
/* the glossary on /guides/#terms, and the one line that links to it */
.terms-link{margin:14px 0 0; font-size:14px; color:var(--ink-2)}
.terms-dl{display:grid; grid-template-columns:minmax(140px,max-content) 1fr; gap:8px 18px; margin:12px 0 0; font-size:14.5px}
.terms-dl dt{font-weight:600}
.terms-dl dd{margin:0; color:var(--ink-2)}
@media (max-width:560px){ .terms-dl{grid-template-columns:1fr; gap:2px} .terms-dl dd{margin-bottom:10px} }
.lede{font-size:16px; color:var(--ink-2); max-width:70ch; margin:14px 0 0; line-height:1.6}
p{max-width:72ch}

/* fact strip */
.facts{
  /* wrapping flex, not a grid: the cells on a short last row stretch to fill
     it, instead of one cell sitting alone beside empty columns */
  display:flex; flex-wrap:wrap;
  gap:0; margin-top:22px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); overflow:hidden;
}
.facts > div{flex:1 1 160px; min-width:0}
/* each cell draws its own right and bottom rule, so every row is ruled off
   however many facts a page has; the strip's own border and overflow clip
   the outer ones */
.facts > div{padding:11px 14px 12px; box-shadow:1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft)}
.facts b{
  font-family:var(--disp); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:block; font-weight:600; margin-bottom:2px;
}
.facts span{font-family:var(--mono); font-size:13px; overflow-wrap:anywhere}
table.grid.sib tr.me, table.grid.sib tr.me td{background:var(--accent-soft)}
table.grid.sib td{font-size:13px}
/* on a phone each optic is a card: name across the top, its specs two-up, labelled */
@media (max-width:600px){
  table.grid.sib thead th{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  table.grid.sib tr{display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; padding:10px 12px; border-bottom:1px solid var(--line-soft)}
  table.grid.sib td{border:0; padding:0}
  table.grid.sib td:first-child{grid-column:1 / -1}
  table.grid.sib td[data-l]::before{content:attr(data-l); display:block; font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em}
}
.facts-cap{margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-3); max-width:72ch}
.facts-cap b{color:var(--ink-2); font-weight:600}
/* a count that opens the table filtered to it: a tap target, not just a digit */
.facts a[data-filter]{display:inline-block; min-width:24px; padding:3px 0}
/* on a phone: one row per fact, label left and value right, so a long value
   gets the width instead of wrapping a word per line */
@media (max-width:600px){
  .facts > div{flex-basis:100%}
  .facts > div{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    padding:9px 14px; box-shadow:0 1px 0 var(--line-soft)}
  .facts b{flex:none; margin:0}
  .facts span{text-align:right}
}

/* ── the home page's primary action ─────────────────────────────────────
   Two grouped selects in a GET form, upgraded to searchable comboboxes by
   pick.js. Sized so the two fields and the button sit on one line at desktop
   width and stack cleanly on a phone. */
.find{
  margin:22px 0 0; padding:16px 18px 14px; background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:10px;
  box-shadow:var(--shadow);
}
.find-row{display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end}
@media (max-width:760px){ .find-row{grid-template-columns:1fr} }
.find .field{display:flex; flex-direction:column; gap:6px; min-width:0}
.find label{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
}
.find label .opt{
  font-family:var(--sans); font-size:11px; letter-spacing:0; text-transform:none;
  color:var(--ink-3); opacity:.8;
}
.find select{
  font-family:var(--sans); font-size:15px; color:var(--ink); background-color:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:10px 34px 10px 11px;
  width:100%; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.find select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.find .go{
  font-family:var(--disp); font-size:14px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; background:var(--accent); color:var(--on-accent);
  border:1px solid var(--accent); border-radius:6px; padding:11px 20px; cursor:pointer;
  white-space:nowrap;
}
.find .go:hover{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.find-hint{margin:11px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.5; max-width:76ch}
.find-hint #find-msg{color:var(--bad); font-weight:500}

/* the combobox, once pick.js has upgraded a select. Same visual language as
   the tool's own pickers — the two are the same code. */
.combo{position:relative; min-width:0}
.combo-input{
  /* the tool's own pickers are on the surface colour; a grey fill read as disabled */
  font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:10px 34px 10px 11px;
  width:100%; appearance:none;
}
.combo-input::placeholder{color:var(--ink-3)}
.combo-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.combo-caret{
  position:absolute; right:12px; top:50%; margin-top:-2px; pointer-events:none;
  width:0; height:0; border-left:4.5px solid transparent; border-right:4.5px solid transparent;
  border-top:5px solid var(--ink-3);
}
.combo[data-open="1"] .combo-caret{transform:rotate(180deg)}
.combo-list{
  position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0;
  margin:0; padding:4px; list-style:none; max-height:320px; overflow-y:auto;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 2px 4px rgba(16,24,32,.08), 0 14px 34px -14px rgba(16,24,32,.45);
  overscroll-behavior:contain;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .combo-list{box-shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.85)}
}
:root[data-theme="dark"] .combo-list{box-shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.85)}
.combo-group{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3); padding:9px 9px 4px;
}
.combo-opt{padding:7px 9px; border-radius:4px; cursor:pointer; font-size:14.5px}
.combo-opt.combo-any{color:var(--ink-3); font-style:italic}
.combo-opt[aria-selected="true"]{font-weight:600}
.combo-opt.is-active{background:var(--accent); color:var(--on-accent)}
.combo-opt.is-active.combo-any{color:var(--on-accent)}
.combo-empty{padding:12px 9px; font-size:13.5px; color:var(--ink-3)}
/* how the chosen pistol takes this optic — home page only */
.combo-opt .chip{float:right; margin:1px 0 0 10px; font-size:11px; padding:1px 6px; font-style:normal}
.find-fit{margin:6px 0 0; font-size:13px; color:var(--ink-2); line-height:1.5; max-width:76ch}
.find-fit[hidden]{display:none}
.combo-count{
  padding:7px 9px 4px; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  border-top:1px solid var(--line-soft); margin-top:4px;
}

/* route cards */
.routes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:18px}
.route{
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:8px; padding:12px 14px 13px;
}
.route.is-direct{border-top-color:var(--ok-edge)}
.route.is-enc, .route.is-buy{border-top-color:var(--warn-edge)}
.route b{
  font-family:var(--disp); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:block; font-weight:600;
}
.route .p{font-family:var(--mono); font-size:19px; font-variant-numeric:tabular-nums; display:block; margin:2px 0 1px}
.route .w{font-size:13.5px; display:block; line-height:1.35}
.route .h{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); display:block; line-height:1.4; margin-top:2px}
.route .go{display:block; margin-top:8px; font-family:var(--disp); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.route .go a{text-decoration:none}
.route .go a:hover{text-decoration:underline}
/* optic pages: the other slides that share the card's answer */
.route .more{display:block; margin-top:6px; font-size:12.5px; line-height:1.4; color:var(--ink-2)}

/* ── table controls ─────────────────────────────────────────────────────
   Hidden in the HTML and revealed by table.js, so the no-JS reader never
   sees a control that would not work. Four axes, each labelled — the same
   rule the tool follows: controls are not clutter, undifferentiated data is. */
.tfilter{
  margin:16px 0 0; padding:12px 14px 10px; background:var(--inset);
  border:1px solid var(--line-soft); border-radius:8px;
}
.tf-row{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:10px 12px}
.has-fp .tf-row{grid-template-columns:1.3fr 1fr 1.1fr 1fr 1fr}
@media (max-width:980px){ .has-fp .tf-row{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:820px){ .tf-row, .has-fp .tf-row{grid-template-columns:1fr 1fr} }
@media (max-width:360px){ .tf-row, .has-fp .tf-row{grid-template-columns:1fr} }
.tfilter .field{display:flex; flex-direction:column; gap:5px; min-width:0}
.tfilter label{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.tfilter input, .tfilter select{
  font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:8px 10px; width:100%; appearance:none;
}
.tfilter select{
  padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.tfilter input:focus-visible, .tfilter select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.tf-foot{
  margin:10px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}
.tf-reset{
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line); border-radius:4px; padding:4px 10px; cursor:pointer;
}
.tf-reset:hover{color:var(--ink); border-color:var(--accent)}
.tfilter[hidden]{display:none}
/* what the table is filtered to, in words — for print, where the controls are gone */
.tf-said{display:none}

/* ── the compatibility table on a phone ─────────────────────────────────
   Four columns do not fit in 390px, and the one that fell off the right
   edge was cost — the column the sort and budget controls exist for. Below
   560px each row becomes a small card: name and cost on the first line,
   footprint (or mount system) and how it mounts beneath. Same cells, same
   order in the markup; only the layout changes. The column headings are
   hidden from sight but not from a screen reader, which still announces
   "Cost to mount" on the cost cell — display:none would have taken them out
   of the table altogether. build.mjs puts explicit roles on the table's parts
   so that changing their display cannot strip the table semantics either. */
@media (max-width:560px){
  [data-filterable] table.grid thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  [data-filterable] table.grid tr[data-t]{
    display:grid; grid-template-columns:1fr auto; gap:3px 12px;
    padding:10px 12px; border-bottom:1px solid var(--line-soft);
  }
  /* the grid rule above outranks the plain tr[hidden] rule, so say it again */
  [data-filterable] table.grid tr[data-t][hidden]{display:none}
  [data-filterable] table.grid tr[data-t] td{padding:0; border:0}
  [data-filterable] table.grid tr[data-t] td:nth-child(1){grid-column:1; grid-row:1}
  /* the cost spans two lines so a "check price" link under it sits beside
     the footprint instead of pushing it down a line */
  [data-filterable] table.grid tr[data-t] td:nth-child(4){grid-column:2; grid-row:1 / span 2; text-align:right}
  [data-filterable] table.grid tr[data-t] td:nth-child(2){grid-column:1; grid-row:2; font-size:11.5px; color:var(--ink-3)}
  [data-filterable] table.grid tr[data-t] td:nth-child(3){grid-column:1 / -1; grid-row:3; font-size:12px}
  [data-filterable] table.grid th[colspan]{display:block}
  [data-filterable] .tw{overflow-x:visible}
}

/* the same idea on an index page, where there is one axis worth having */
.lfilter{
  margin:18px 0 6px; padding:12px 14px 10px; background:var(--inset);
  border:1px solid var(--line-soft); border-radius:8px; max-width:420px;
}
.lfilter[hidden]{display:none}
.lfilter .field{display:flex; flex-direction:column; gap:5px}
.lfilter label{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.lfilter input{
  font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:8px 10px; width:100%;
}
.lfilter input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.lf-foot{
  margin:9px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}
/* explicit, rather than trusting the UA rule: any heading here that later gains
   a display value of its own would otherwise quietly reappear over an empty list */
h2[hidden], h3[hidden], ul.pills[hidden], .pills li[hidden]{display:none}
tbody[hidden]{display:none}
tr[hidden]{display:none}

/* tables */
.tw{overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
table.grid{width:100%; border-collapse:collapse; font-size:14px}
table.grid th{
  font-family:var(--disp); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); text-align:left; font-weight:600; padding:10px 12px 8px;
  border-bottom:1px solid var(--line); background:var(--inset); white-space:nowrap;
}
table.grid td{padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.grid tr:last-child td{border-bottom:0}
table.grid td.mono{font-family:var(--mono); font-size:12.5px; color:var(--ink-2)}
table.grid td.num{font-family:var(--mono); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
table.grid a{text-decoration:none; font-weight:500}
table.grid a:hover{text-decoration:underline}
/* "how it mounts" doubles as the link to that pairing's verdict — same weight
   and colour as the surrounding mono text, so the table stays a table */
table.grid a.pair{color:inherit; font-weight:inherit; border-bottom:1px dotted var(--line)}
table.grid a.pair:hover{color:var(--accent); text-decoration:none; border-bottom-color:var(--accent)}
/* the folded "no known route" group (table.js): its heading row stays, with
   the button that opens it; its rows come back in print */
@media screen{ [data-filterable] table.grid tr.folded{display:none !important} }
.tf-fold{margin-left:10px; padding:4px 10px; min-height:28px; font:inherit; font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:none; color:var(--accent); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm, 6px); cursor:pointer}
.tf-fold:hover{border-color:var(--accent)}
.tf-fold:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* "Build sheet →" under an item's name: straight to that pairing's build
   sheet, for the reader who has found the one they want and doesn't need its
   page first. Smaller and quieter than the name, so the name still reads as
   the row's label. */
table.grid a.to-build{
  /* 24px tall at least, the WCAG 2.5.8 target size: it repeats on every row */
  /* on the name's own line, so a row is one line tall, not two */
  display:inline-flex; align-items:center; min-height:24px; margin-left:10px; vertical-align:middle; font-family:var(--disp); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); white-space:nowrap;
}

/* affiliate links — visibly a different kind of link from a citation */
.blabel{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap; margin-right:2px;
}
a.aff{
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
  border-radius:4px; padding:2px 7px; white-space:nowrap; display:inline-block; margin:2px 0;
}
a.aff:hover{background:var(--ink); border-color:var(--ink); color:var(--surface)}
a.aff-sm{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--accent); white-space:nowrap;
}
a.aff-sm:hover{text-decoration:underline}
.buyline{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.disc-inline{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:12px 0 0; max-width:76ch}
.disc-inline b{color:var(--ink-2)}

.chip{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; padding:3px 8px; border-radius:4px; border:1px solid transparent;
  white-space:nowrap; display:inline-block;
}
.chip-ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-edge)}
.chip-plate{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-edge)}
.chip-none{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-edge)}
.chip-flag{background:var(--flag-soft); color:var(--flag); border-color:var(--flag)}
.chip-enc{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}

/* callouts */
.note{
  margin-top:20px; border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--surface); border-radius:4px; padding:13px 15px;
  font-size:14px; color:var(--ink-2); line-height:1.55;
}
.note b{
  font-family:var(--disp); letter-spacing:.11em; text-transform:uppercase; font-size:11.5px;
  color:var(--ink); display:block; margin-bottom:4px;
}
.note.warn{border-left-color:var(--bad-edge)}
.note.warn b{color:var(--bad)}

/* #14: maker-published co-witness data — collapsed list, attributed lines */
.cwd{margin-top:16px; border:1px solid var(--line); border-radius:4px; background:var(--surface); padding:0 15px}
.cwd summary{cursor:pointer; padding:12px 0; font-weight:600; color:var(--ink)}
.cwd[open] summary{border-bottom:1px solid var(--line)}
.cwl{margin:10px 0 0}
.cwl dt{margin-top:10px; font-weight:600}
.cwl dd{margin:0}
.cw-list{margin:3px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.cw-list li{margin:2px 0}
.cw-list b{display:inline; font:inherit; font-weight:600; letter-spacing:0; text-transform:none; margin:0; color:var(--ink)}
.cw-foot{display:block; margin:10px 0 0; font-size:12.5px; color:var(--ink-3)}
.cw-src{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px}
.cw-src .ext{white-space:normal}
/* A source pill in running text (a slide's thread source, a plate's source) can be
   wider than a phone: "Canik OEM M4 optic screws (Midwest Gun Works)" is. Let it wrap. */
.src .ext{white-space:normal}

/* footprint diagram */
.fpd{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-top:18px}
.fpd svg{flex:0 0 180px; width:180px; height:auto}   /* the drawing is what the page is for */

/* link lists */
.pills{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; padding:0; list-style:none}
.pills a{
  font-size:13.5px; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:4px; padding:5px 10px; display:block;
}
.pills a:hover{border-color:var(--accent)}
.pills .b{color:var(--ink-3); font-size:12px}
/* how a pair mounts, on a pill that links to its page (/fit/, the home page) */
.pills .chip{margin-left:4px; font-size:11px; padding:1px 6px; vertical-align:1px}
/* "every optic on this pistol →" under a list that shows only some of them */
.more{margin:10px 0 0; font-size:13.5px}
.more a{text-decoration:none; font-weight:500}
.more a:hover{text-decoration:underline}

/* ad slot — renders only when a snippet is configured */
.adslot{margin-top:32px; text-align:center}
.adslot .lbl{
  font-family:var(--disp); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:6px;
}

/* ── site footer ─────────────────────────────────────────────────────────
   The same band as the header. The legal paragraphs are audited on every
   page (audit-legal.mjs): they move here word for word, never reworded. */
.sf{margin-top:48px; background:var(--band); color:var(--band-ink-2); border-top:1px solid var(--band-line)}
.sf-in{max-width:1200px; margin:0 auto; padding:36px 16px 28px}
@media (min-width:900px){ .sf-in{padding-inline:24px} }
.sf-cols{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px}
.sf-brand{display:flex; gap:11px; align-items:flex-start; color:var(--band-ink)}
.sf-brand svg{width:32px; height:32px; color:var(--band-accent); flex:0 0 auto}
.sf-brand b{display:block; font-family:var(--disp); font-size:20px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1}
.sf-brand p{margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--band-ink-2); max-width:34ch}
.sf-h{
  margin:0 0 10px; font-family:var(--disp); font-size:11px; line-height:1.4; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--band-ink);
}
.sf nav a{display:block; padding:3px 0; font-size:13.5px; color:var(--band-ink-2); text-decoration:none}
.sf nav a:hover{color:var(--band-ink); text-decoration:underline}
.sf a:focus-visible{outline:2px solid var(--band-accent); outline-offset:2px}
.sf-legal{margin-top:28px; padding-top:18px; border-top:1px solid var(--band-line); font-size:12.5px; line-height:1.6}
.sf-legal p{margin:0 0 9px; max-width:96ch}
.sf-legal b{color:var(--band-ink)}
.sf-legal a{color:var(--band-ink)}
/* the Verify chip in the first paragraph, legible on the band */
.sf-legal .chip-flag{background:transparent; color:var(--band-ink); border-color:var(--band-ink-2)}
@media (max-width:820px){ .sf-cols{grid-template-columns:1fr 1fr} .sf-brand{grid-column:1 / -1} }

.stamp{font-family:var(--mono); font-size:11.5px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ── contact form ─────────────────────────────────────────────────────── */
.cform{max-width:62ch}
.cform .fld{margin:0 0 18px}
.cform label{display:block;font-weight:600;font-size:.94rem;margin:0 0 6px}
.cform .hint{display:block;font-weight:400;color:var(--ink-2);font-size:.86rem;margin:2px 0 0}
.cform input[type=text],.cform input[type=email],.cform input[type=url],
.cform select,.cform textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:.96rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;transition:border-color .12s,box-shadow .12s}
.cform textarea{min-height:8.5em;resize:vertical;line-height:1.5}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cform input:invalid:not(:placeholder-shown){border-color:var(--bad-edge)}
.cform .req{color:var(--bad);font-weight:400}
.cform .check{display:flex;gap:9px;align-items:flex-start}
.cform .check input{width:auto;margin:3px 0 0;flex:0 0 auto}
.cform .check label{font-weight:400;margin:0}
.cform .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform button{font:inherit;font-weight:600;font-size:.98rem;cursor:pointer;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);
  border-radius:7px;padding:10px 20px}
.cform button:hover{filter:brightness(1.08)}
.cform button:disabled{opacity:.55;cursor:default;filter:none}
.cform .cf-turnstile{margin:0 0 18px;min-height:65px}
.cform .sending{color:var(--ink-2);font-size:.9rem;margin-left:12px}
.cstat{margin:18px 0 0;padding:13px 15px;border-radius:8px;border:1px solid;font-size:.95rem}
.cstat.ok{background:var(--ok-soft);border-color:var(--ok-edge);color:var(--ok)}
.cstat.bad{background:var(--bad-soft);border-color:var(--bad-edge);color:var(--bad)}
.cstat b{display:block;margin:0 0 3px}
.creason{border:1px solid var(--line-soft);border-radius:9px;background:var(--inset);
  padding:16px 16px 0;margin:0 0 18px}
.creason[hidden]{display:none}
.cways{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:20px 0 26px}
.cway{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:14px 15px}
.cway b{display:block;font-family:var(--disp);font-size:1.06rem;letter-spacing:.01em}
.cway p{margin:5px 0 0;font-size:.9rem;color:var(--ink-2)}
.cway a{font-family:var(--mono);font-size:.88rem;word-break:break-all}
.report{margin:26px 0 0;padding:13px 15px;border-radius:8px;
  border:1px dashed var(--line);background:var(--inset);font-size:.93rem;color:var(--ink-2)}
.report a{font-weight:600}

/* ── comments (on /contact/) ──────────────────────────────────────────────
   Readers' words, set apart from the data: plain surface cards, no semantic
   colour (on this site a colour is a claim), and text kept as text —
   pre-line keeps a reader's line breaks without any markup. */
.comments{margin-top:40px;padding-top:6px;border-top:1px solid var(--line)}
.comments h3{margin:26px 0 12px}
.klist{max-width:72ch}
.kcom{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:13px 15px;margin:0 0 12px}
.kmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 6px}
.kmeta b{font-weight:600;overflow-wrap:anywhere}
.kmeta time{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.kbody{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.kreply{margin:11px 0 0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--inset);border-radius:0 7px 7px 0}
.kreply b{display:block;font-size:.88rem;margin:0 0 3px}
.kempty{color:var(--ink-2);font-style:italic}
.kmore{font:inherit;font-weight:600;font-size:.94rem;cursor:pointer;color:var(--accent);background:none;
  border:1px solid var(--line);border-radius:7px;padding:8px 16px}
.kmore:disabled{opacity:.55;cursor:default}

/* ── home: the hero ──────────────────────────────────────────────────────
   The header's band carried on down: the question, the finder, the site's
   own footprint schematics (never a photograph — brand-and-legal.md), and the
   counts. The finder keeps its light panel, so the one thing to do is the
   brightest thing on the page. */
.hero{background:var(--band); color:var(--band-ink)}
.hero-terms{margin:12px 0 0; font-size:14px; color:var(--band-ink-2)}
.hero-terms a{color:var(--band-accent)}
.hero-in{max-width:1200px; margin:0 auto; padding-inline:16px}
@media (min-width:900px){ .hero-in{padding-inline:24px} }
.hero-main{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:44px; align-items:center; padding-block:44px 48px}
.hero-eyebrow{
  margin:0; font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--band-accent);
}
.hero h1{
  margin:10px 0 0; font-size:clamp(32px,5.6vw,56px); line-height:1; letter-spacing:.02em;
  text-transform:uppercase; color:var(--band-ink);
}
.hero-sub{margin:12px 0 0; font-family:var(--disp); font-size:clamp(17px,2.4vw,22px); font-weight:600; letter-spacing:.04em; color:var(--band-accent)}
.hero-lede{margin:10px 0 0; font-size:15.5px; line-height:1.6; color:var(--band-ink-2); max-width:60ch}
.hero .find{margin-top:22px; border:1px solid var(--band-line); border-top:3px solid var(--band-accent); box-shadow:none}
.hero-art{margin:0; border:1px solid var(--band-line); border-radius:10px; background:var(--band-2); padding:22px 20px 14px}
.hero-art svg{display:block; width:100%; height:auto}
.hero-art figcaption{margin-top:12px; font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--band-ink-2)}
.hero-art svg .ha-plate{fill:var(--band); stroke:var(--band-line); stroke-width:1.6}
.hero-art svg .ha-lug{fill:var(--band-2); stroke:var(--band-ink-2); stroke-width:1.5}
.hero-art svg .ha-screw{fill:var(--band); stroke:var(--band-accent); stroke-width:2}
.hero-art svg .ha-x{stroke:var(--band-accent); stroke-width:1.5}
.hero-art svg .ha-acc{fill:var(--band-2); stroke:var(--band-accent); stroke-width:1.6}
.hero-art svg .ha-t{fill:var(--band-ink-2); font-family:var(--mono); font-size:9px}
.hero-stats{background:var(--band-2); border-top:1px solid var(--band-line)}
.hero-stats .hero-in{display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.hero-stats .hero-in > div{padding:15px 16px 14px; border-left:1px solid var(--band-line)}
.hero-stats .hero-in > div:first-child{border-left:0; padding-left:0}
.hero-stats b{display:block; font-family:var(--mono); font-size:30px; font-weight:500; line-height:1.1; letter-spacing:-.01em; color:var(--band-ink); font-variant-numeric:tabular-nums}
.hero-stats span{font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--band-ink-2)}
.hero-stats a{color:inherit; text-decoration:underline; text-decoration-color:var(--band-line); text-underline-offset:3px}
.hero-stats a:hover{color:var(--band-ink)}
@media (max-width:900px){ .hero-main{grid-template-columns:1fr} .hero-art{display:none} }
/* on a phone the finder has to stay above the fold: the lede goes, the
   padding tightens */
@media (max-width:620px){
  .hero-main{padding-block:22px 26px}
  .hero-lede{display:none}
  .hero .find{margin-top:16px}
  .hero-stats .hero-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats .hero-in > div{border-left:0; padding-left:0; border-top:1px solid var(--band-line)}
  .hero-stats .hero-in > div:nth-child(-n+2){border-top:0}
  .hero-stats b{font-size:24px}
}

/* ── section head: a heading, its count, and where to see all of it ───── */
.shead{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:44px 0 16px}
.shead h2{margin:0}
.shead-n{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.shead-all{
  margin-left:auto; font-family:var(--disp); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:var(--accent); white-space:nowrap;
}
.shead-all:hover{text-decoration:underline}

/* ── pair cards ──────────────────────────────────────────────────────────
   One popular pairing per card. The picture is the optic's footprint — the
   thing that decides the fit — and the chip on it is the verdict, nothing
   else. The whole card is the link. */
.pgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.pcard{
  display:flex; flex-direction:column; height:100%; background:var(--surface); color:var(--ink); text-decoration:none;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pcard:hover{border-color:var(--accent); box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.pcard:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* the verdict chip gets its own strip above the drawing: a long one
   ("Direct (cross-fit)") would otherwise sit on a screw hole */
.pc-fig{position:relative; display:grid; place-items:center; padding:38px 0 10px; background:var(--inset); border-bottom:1px solid var(--line-soft)}
.pc-fig svg{height:92px; width:auto}
.pc-fig .chip{position:absolute; top:10px; left:10px}
@media (max-width:600px){ .pc-fig{padding:36px 0 6px} .pc-fig svg{height:60px} }
.pc-body{flex:1; display:flex; flex-direction:column; gap:2px; padding:12px 14px 0}
.pc-o{font-size:15px; font-weight:600; line-height:1.35}
.pc-p{font-size:13.5px; line-height:1.4; color:var(--ink-2)}
.pc-spec{margin-top:6px; font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.pc-foot{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:12px; padding:10px 14px 12px; border-top:1px solid var(--line-soft)}
.pc-price{font-family:var(--mono); font-size:16px; font-weight:500; font-variant-numeric:tabular-nums}
.pc-go{font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}

/* ── tiles: a pistol or an optic, and how far it reaches ──────────────── */
.tgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
.tile{
  display:flex; flex-direction:column; height:100%; padding:12px 14px 13px; background:var(--surface); color:var(--ink);
  text-decoration:none; border:1px solid var(--line); border-radius:8px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover{border-color:var(--accent); box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.tile:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.t-b{font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.t-m{margin-top:2px; font-size:15px; font-weight:600; line-height:1.3}
.t-n{margin-top:auto; padding-top:10px; font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.t-n b{font-weight:500; color:var(--ink)}
/* coverage, not a verdict — so accent, never green/amber/red */
.t-bar{display:block; height:4px; margin-top:6px; border-radius:2px; background:var(--line); overflow:hidden}
.t-bar i{display:block; height:100%; background:var(--accent)}
@media (prefers-reduced-motion:reduce){ .pcard:hover, .tile:hover{transform:none} }

/* ── home: main column and the latest-changes rail ───────────────────── */
.home-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start}
@media (max-width:980px){ .home-grid{grid-template-columns:1fr} }
.latest{margin-top:44px; background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.latest h2{margin:0; padding:12px 16px 10px; font-size:14px; letter-spacing:.12em; background:var(--inset); border-bottom:1px solid var(--line)}
.latest ol{list-style:none; margin:0; padding:0}
.latest li{padding:11px 16px 12px; border-bottom:1px solid var(--line-soft)}
.latest time{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.latest li a{display:block; margin-top:2px; font-size:14px; font-weight:500; line-height:1.4; text-decoration:none; color:var(--ink)}
.latest li a:hover{color:var(--accent); text-decoration:underline}
.latest .l-d{display:block; margin-top:3px; font-family:var(--mono); font-size:11.5px; color:var(--ink-2)}
.latest .shead-all{display:block; margin:0; padding:10px 16px 12px}


/* ── print ────────────────────────────────────────────────────────────────
   A filtered table is a thing people print: the list for the gun counter,
   or for the gunsmith. Paper is white whatever the screen was, so the light
   tokens always apply — printed from dark mode, the text came out pale grey
   on white. The controls go, and the count line says in words what the
   table was filtered to, since the controls that said it are gone. */
@media print{
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"]{
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#EEF1F3; --inset:#F4F6F7;
    --line:#B9C2CA; --line-soft:#D8DEE3;
    --ink:#000000; --ink-2:#333B42; --ink-3:#5A646D;
    --accent:#1A5478; --accent-soft:#D3E2EC; --on-accent:#FFFFFF;
    --ok:#1F5A3E; --ok-soft:#D1E5D9; --ok-edge:#5D9E7C;
    --warn:#6E450C; --warn-soft:#F0E3C6; --warn-edge:#C08F3C;
    --bad:#7A2721; --bad-soft:#EED7D4; --bad-edge:#C0645C;
    --flag:#4B3C74; --flag-soft:#E0DBEE;
    --shadow:none; --shadow-lift:none;
    --band:#FFFFFF; --band-2:#FFFFFF; --band-line:#B9C2CA;
    --band-ink:#000000; --band-ink-2:#333B42; --band-accent:#1A5478; --on-band-accent:#FFFFFF;
  }
  body{background:#fff; font-size:12pt}
  .sh::before, .sh-search, .sh-cta, .sh-cats, .find, .adslot, .tf-row, .tf-reset, .lfilter .field, #lf-reset,
  .hero-art, .latest{display:none !important}
  .sh{position:static; border-bottom:1px solid #000}
  .hero-main{display:block; padding-block:12px}
  .hero-stats, .sf{border-color:#B9C2CA}
  .pcard, .tile{break-inside:avoid; box-shadow:none; transform:none}
  .tfilter, .lfilter{background:none; border:0; padding:0; margin:6px 0 0}
  .tf-foot, .lf-foot{display:block; margin:0; color:#000; font-size:10pt}
  .tf-said{display:inline}
  .tw{overflow:visible; border-color:#B9C2CA}
  table.grid tr, .route, .note, .facts{break-inside:avoid}
  /* #14: a closed co-witness list still prints in full */
  .cwd::details-content{content-visibility:visible; display:block}
  .cwd summary{list-style:none}
  h2, h3{break-after:avoid}
  .kform, .kmore{display:none !important}
  /* navigation, not content: a printed build sheet link goes nowhere */
  table.grid a.to-build{display:none !important}
  .kcom{break-inside:avoid}
  a{color:inherit}
}