/* ============================================================================
   MATCHMYGUN — DESIGN SYSTEM (v2)
   "Different eras. Different designs. Same passion for engineering and
    craftsmanship."

   A firearms knowledge & compatibility platform — NOT a tactical brand.
   Archive / laboratory in feel, reference-oriented.

   HOW THIS LOADS
   ──────────────
   This sheet loads AFTER the legacy style.css. Both are loaded on purpose:
     • The token block below redefines every legacy variable name, so the whole
       site reskins at once — including the ~120 legacy rules this sheet does
       not re-implement. Nothing can regress to the old palette.
     • The component/section rules here re-implement the ones that matter.
       At equal specificity, the later sheet wins.
   When the inline per-template CSS has been migrated, legacy style.css can be
   dropped and its remaining rules folded in here.

   SECTIONS
   ────────
   1. Tokens          2. Legacy aliases    3. Base
   4. Shell (nav/footer)                   5. Components
   6. Sections (hero, stats, categories, guides, deals, methodology)
   7. Responsive + print
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Surfaces: near-black / charcoal, three depths ── */
  --paper:        #090D10;
  --panel:        #11171C;
  --panel-2:      #161D22;
  --inset:        #0C1115;
  --hover:        #1C242B;

  /* ── Ink: warm off-white, never pure white ── */
  --ink:          #F3F1EB;
  --ink-2:        #9DA7AE;
  --ink-3:        #8A949B;   /* small print — AA-checked against --paper */

  /* ── Accent: interaction and emphasis ONLY, never decoration ── */
  --accent:       #F58220;
  --accent-hi:    #FF9640;
  --accent-soft:  rgba(245, 130, 32, 0.12);
  --accent-line:  rgba(245, 130, 32, 0.34);
  --on-accent:    #12161A;

  /* ── Brass / bronze: heritage accents, sparingly ── */
  --brass:        #C5A059;
  --brass-soft:   rgba(197, 160, 89, 0.14);

  /* ── Lines ── */
  --line:         rgba(255, 255, 255, 0.08);
  --line-2:       rgba(255, 255, 255, 0.14);

  /* ── Status ── */
  --ok:           #4ADE80;
  --warn:         #FBBF24;
  --danger:       #F87171;

  /* ── Type ── */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.1rem, 6.2vw, 4.35rem);
  --fs-h1:      clamp(1.8rem, 4.2vw, 2.9rem);
  --fs-h2:      clamp(1.35rem, 2.6vw, 1.95rem);
  --fs-h3:      clamp(1.08rem, 1.7vw, 1.28rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;
  --fs-micro:   0.7rem;

  /* ── Space (4px base) ── */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;  --s-9: 6rem;

  --gutter: clamp(1rem, 3.2vw, 3rem);
  /* Full-bleed layout. The client wants the site to use the whole monitor, not a
     centred column. Both wrapper tokens now run to the viewport edge; only the
     gutter separates content from the bezel. Readability is preserved by keeping
     `--measure` on PROSE (headings, paragraphs, ledes) — a 100%-wide paragraph on
     a 2560px screen is unreadable, so text keeps its own limit while the LAYOUT
     grid, cards, tables and hero fill the screen. */
  --container: 100%;
  --container-wide: 100%;
  --measure: 68ch;          /* prose limit — text keeps a readable line length */

  /* ── Radius: restrained and precise — neither rounded nor 2010-flat ── */
  --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* ── Elevation ── */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px rgba(0,0,0,.45);
  --sh-3: 0 12px 40px rgba(0,0,0,.55);

  /* ── Motion: restrained 150–220ms ── */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 200ms cubic-bezier(.4,0,.2,1);

  --header-h: 62px;

  /* hero veil as a channel triple, so it tracks the paper colour */
  --hero-veil: 9, 13, 16;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. LEGACY ALIASES
   The existing templates reference these names. Mapping them onto the new
   palette is what reskins every page in one change instead of 21 files.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:             var(--paper);
  --bg-elevated:    var(--panel);
  --bg-card:        var(--panel-2);
  --bg-input:       var(--inset);
  --bg-hover:       var(--hover);

  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);

  --accent-hover:   var(--accent-hi);
  --accent-glow:    var(--accent-soft);
  --accent-border:  var(--accent-line);

  --border:         var(--line);
  --border-light:   var(--line-2);

  --shadow-sm:      var(--sh-1);
  --shadow-md:      var(--sh-2);
  --shadow-lg:      var(--sh-3);
  --shadow-glow:    0 0 24px var(--accent-soft);

  --radius-sm:      var(--r-sm);
  --radius-md:      var(--r-md);
  --radius-lg:      var(--r-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   3. BASE
   ══════════════════════════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;              /* no horizontal scrolling, ever */
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* ── Headings: editorial serif ── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

/* ── Eyebrow: the tracked technical label ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.eyebrow.plain::before { display: none; }

/* ── Technical values: measurements, specs, counts ── */
.mono, .num, .tech, .ser, .cel, .year {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.lede { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--ink-2); max-width: var(--measure); }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }

hr, .divider { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ── Focus: visible, accent-tinted, keyboard-first ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: var(--s-3) var(--s-4); font-weight: 600;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. SHELL
   ══════════════════════════════════════════════════════════════════════════ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }

.navbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base);
}
.navbar.is-stuck {                 /* JS adds .is-stuck on scroll */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
nav.navbar, .nav-inner { display: flex; align-items: center; gap: var(--s-5); height: 100%; }
.nav-inner { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }

.nav-brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-serif); font-size: 1.16rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); flex: none;
}
.nav-brand:hover { color: var(--ink); }
.nav-logo { width: 27px; height: 27px; flex: none; }

.nav-links { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav-links a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.44rem 0.7rem; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: var(--hover); }
.nav-links .icon { width: 16px; height: 16px; opacity: .8; }
.nav-badge {
  font-family: var(--font-mono); font-size: 0.66rem; line-height: 1;
  padding: 0.2rem 0.34rem; border-radius: var(--r-xs);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.nav-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer; transition: all var(--t-fast);
}
.nav-search-btn:hover { color: var(--ink); border-color: var(--line-2); background: var(--hover); }
.nav-search-btn .icon { width: 17px; height: 17px; }
.nav-toggle {
  display: none; width: 38px; height: 38px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer;
}
.main-content { min-height: 40vh; }

.footer {
  background: var(--panel);
  border-top: 1px solid var(--line);
  margin-top: var(--s-9);
  padding: var(--s-8) 0 var(--s-6);
  color: var(--ink-3); font-size: var(--fs-sm);
}
.footer-inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(120px, 1fr));
  gap: var(--s-6);
}
.footer h4 {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 500; margin-bottom: var(--s-3);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer a { color: var(--ink-3); }
.footer a:hover { color: var(--ink); }
.footer-brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.footer-brand .nav-logo { width: 30px; height: 30px; }
.footer-brand span { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); }
.footer-note { color: var(--ink-3); font-size: var(--fs-xs); max-width: 44ch; }
.footer-bottom {
  max-width: var(--container); margin: var(--s-6) auto 0; padding: var(--s-4) var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center; font-size: var(--fs-xs);
}

/* ── Full-bleed overrides for the LAYOUT CEILINGS in style.css ──────────────
   The legacy sheet caps the page at 960px (.main-content) and the header at
   960px (.nav-inner) and centres both with `margin: 0 auto`. Overriding the
   tokens alone changes nothing, because these are literal pixel values in the
   earlier sheet. This block must therefore come after style.css (it does — base
   loads mmg-system.css second) and repeat the selectors to win.
   Only LAYOUT is widened. Prose keeps --measure; the reading column is what
   makes 68ch readable at any monitor width.                                  */
.main-content {
  max-width: 100%;
  margin: 0;
  padding: 2.5rem var(--gutter);
}
.nav-inner, .footer-inner, .footer-bottom {
  max-width: 100%;
  margin: 0;
  padding-inline: var(--gutter);
}
/* The support/deals widgets carried their own small caps; they are cards inside
   a full-width grid, so they follow the grid instead of a fixed 700/728px. */
.support-card { max-width: 100%; }
.ad-leaderboard { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   5. COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── SVG icon system: 24×24, 1.5–2px strokes ──
   An <svg> is inline by default in HTML but browsers give it a block-ish box;
   without an explicit `display: inline-block` + vertical-align it drops to its
   own line inside headings, doubling their height (measured: 52px instead of
   ~28px) and leaving the icon floating above the text. */
.icon {
  display: inline-block; vertical-align: -0.15em;
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Headings are where a 16px glyph sits beside 22px cap-height letters, so the
   icon must ride slightly ABOVE the baseline to look centred on the text ink.
   Measured on the rendered page: at -0.14em the glyph centre fell 6.8px below
   the text ink centre. +0.085em lands it on the optical centre. */
h1 > .icon, h2 > .icon, h3 > .icon, .section-title > .icon { vertical-align: 0.085em; }
.icon-sm { width: 16px; height: 16px; stroke-width: 1.8; }
.icon-lg { width: 28px; height: 28px; stroke-width: 1.5; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px;                     /* 44px touch targets */
  padding: 0.7rem 1.15rem;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--ink);
  cursor: pointer; text-align: center;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--hover); border-color: color-mix(in srgb, var(--ink) 28%, transparent); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 17px; height: 17px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--on-accent); }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 36px; padding: 0.42rem 0.8rem; font-size: var(--fs-xs); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ── Badges / chips ── */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.24rem 0.5rem; border-radius: var(--r-xs);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2);
}
.badge-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.badge-brass { background: var(--brass-soft); border-color: color-mix(in srgb, var(--brass) 40%, transparent); color: var(--brass); }

.chip, .popular-link, .tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 32px; padding: 0.36rem 0.68rem;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--ink-2); white-space: nowrap;
  transition: all var(--t-fast);
}
.chip:hover, .popular-link:hover, .tag:hover {
  color: var(--ink); border-color: var(--accent-line); background: var(--hover);
}

/* ── Cards ── */
.card {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-5);
  transition: border-color var(--t-base), transform var(--t-base);
}
.card:hover { border-color: var(--line-2); }

/* ── Section furniture ── */
.section { padding: var(--s-8) 0; }
.section-alt { background: var(--panel); border-block: 1px solid var(--line); }
.section-head { margin-bottom: var(--s-6); max-width: var(--measure); }
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-desc { color: var(--ink-2); font-size: var(--fs-sm); max-width: var(--measure); }
.section-title {
  font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 600;
  margin: 0 0 var(--s-4); letter-spacing: -0.015em; color: var(--ink);
}
.page-header { margin-bottom: var(--s-6); }
.page-header .eyebrow { margin-bottom: var(--s-3); }
.detail-title { font-family: var(--font-serif); font-size: var(--fs-h1); margin-bottom: var(--s-2); }

/* ── Spec grid: the technical reference block ── */
.spec-grid, .spec-section, .caliber-specs, .ballistic-cards, .stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.spec-item, .ballistic-card, .stat-card {
  background: var(--panel-2); padding: var(--s-4);
  display: flex; flex-direction: column; gap: 0.28rem;
}
.spec-label, .ballistic-label, .stat-label {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.spec-value, .ballistic-value, .stat-number {
  font-family: var(--font-mono); font-size: 1.02rem; font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ballistic-unit { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* ── Tables: technical, aligned numerals, sticky head ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table, .hub-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); color: var(--ink-2);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-align: left; padding: 0.72rem var(--s-4);
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
tbody td { padding: 0.68rem var(--s-4); border-bottom: 1px solid var(--line); color: var(--ink-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); color: var(--ink); }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hub-table td:first-child { color: var(--ink); font-family: var(--font-mono); }

/* ── Empty states ── */
.empty-state, .empty-row, .caliber-empty {
  padding: var(--s-6); text-align: center; color: var(--ink-3);
  border: 1px dashed var(--line-2); border-radius: var(--r-md); font-size: var(--fs-sm);
}

/* ── Alerts ── */
.alert, .sl-note, .hub-note, .warn {
  display: flex; gap: var(--s-3); padding: var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--line);
  /* A flex child defaults to min-width:auto, so an unbreakable token inside
     (serial prefixes like "170-00001") pushes the box past its container —
     measured 340px inside a 320px viewport, forcing a sideways page scroll. */
  flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere;
  background: var(--panel-2); font-size: var(--fs-sm); color: var(--ink-2);
}
.alert .icon { color: var(--accent); }
.alert-warn, .hub-note.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.alert-warn .icon { color: var(--warn); }
.sources-disclaimer { font-size: var(--fs-xs); color: var(--ink-3); max-width: var(--measure); }

/* ── Breadcrumbs ── */
.breadcrumb, .breadcrumb-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: var(--s-4);
  list-style: none; padding: 0;
}
.breadcrumb a, .breadcrumb-item a { color: var(--ink-2); }
.breadcrumb a:hover, .breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-sep { opacity: .45; }

/* ── Forms & filters ── */
.field, .sl-field, .filter-group { display: flex; flex-direction: column; gap: 0.4rem; }
.field label, .lbl {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
input[type="text"], input[type="search"], input[type="email"],
input[type="number"], select, textarea, .input {
  width: 100%; min-height: 46px;
  padding: 0.66rem 0.85rem;
  font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--ink); background: var(--inset);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--ink-3) 88%, transparent); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  background: color-mix(in srgb, var(--inset) 80%, var(--accent) 4%);
}
select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.filters-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end;
  padding: var(--s-4); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--s-5);
}
.filters-form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; width: 100%; }

/* ── Pagination ── */
.pagination { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.page-link {
  min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-2); background: var(--panel-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.page-link:hover { border-color: var(--accent-line); color: var(--ink); }
.page-link.active, .page-link[aria-current="page"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.page-info { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* ── Skeletons ── */
.skeleton {
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--hover) 37%, var(--panel-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm); min-height: 1em;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   6. SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────────────────────
   The supplied artwork carries the era balance itself; the copy sits in the
   dark left third. The veil is graded so the left stays readable whatever the
   artwork does, while the right lets the image speak.
   ───────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 74vh, 760px);
  display: flex; align-items: center;
  padding: var(--s-8) 0 var(--s-7);
  background-color: var(--paper);
  /* fallback for engines without image-set(); the modern formats follow */
  background-image: url("/static/img/hero-matchmygun-1800.png");
  background-size: cover;
  background-position: 72% 50%;    /* subject framed right; left third kept clear */
  background-repeat: no-repeat;
  overflow: hidden;
}
/* The supplied artwork is a 1942x809 PNG at 1.86 MB. Shipped as AVIF/WebP it is
   72/103 KB at the same width, and it sits under a veil so the loss is invisible.
   `image-set` takes the first format the engine understands; the plain url()
   above is the fallback for anything older. Widths are chosen per viewport. */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .hero {
    background-image: image-set(
      url("/static/img/hero-matchmygun-1800.avif") type("image/avif"),
      url("/static/img/hero-matchmygun-1800.webp") type("image/webp"),
      url("/static/img/hero-matchmygun-1800.png")  type("image/png"));
  }
}
.hero::before {                    /* readability veil — graded, image-independent */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(98deg,
      rgba(var(--hero-veil), 0.97) 0%,
      rgba(var(--hero-veil), 0.93) 30%,
      rgba(var(--hero-veil), 0.62) 56%,
      rgba(var(--hero-veil), 0.16) 78%,
      rgba(var(--hero-veil), 0.05) 100%),
    linear-gradient(to top,
      rgba(var(--hero-veil), 0.92) 0%,
      rgba(var(--hero-veil), 0.34) 16%,
      rgba(var(--hero-veil), 0) 42%);
}
.hero > .container { position: relative; z-index: 2; width: 100%; }

/* The hero copy scales with the field instead of sitting in a fixed 660px
   column. Measured problem: on a 1920px monitor an 1824px-wide hero left the
   660px copy block reading as a lost sidebar, and the search modules — the
   product — looked like an afterthought. Prose keeps --measure via .hero-sub;
   the copy BLOCK and the search grow. */
.hero-copy { max-width: clamp(34rem, 38vw, 58rem); }   /* 544 / ~730 / 928px */
.hero h1.hero-title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 var(--s-4);
}
.hero-title .era { color: var(--accent); }   /* the accented second beat */
.hero-sub {
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  color: var(--ink-2); max-width: 52ch; margin: 0 0 var(--s-6);
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

/* ── Search: the core product, visually dominant ── */
.search-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3); max-width: clamp(34rem, 38vw, 58rem);
}
.search-box {
  position: relative;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: var(--s-4);
  transition: border-color var(--t-base), background var(--t-base);
}
.search-box:focus-within { border-color: var(--accent-line); background: var(--panel-2); }
.search-box h2, .search-box .search-label {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 var(--s-3);
}
.search-box .search-label .icon { width: 15px; height: 15px; color: var(--accent); }
.search-box p { font-size: var(--fs-xs); color: var(--ink-3); margin: -0.35rem 0 var(--s-3); }
.search-input-wrap { position: relative; display: flex; }
.search-input-wrap input { min-height: 48px; padding-left: 2.5rem; }
.search-input-wrap .field-icon {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-3); pointer-events: none;
}
.search-submit {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast);
}
.search-submit:hover { background: var(--accent-hi); }
.search-submit .icon { width: 18px; height: 18px; stroke-width: 2; }

.search-results {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  max-height: 340px; overflow-y: auto; z-index: 40;
}
.search-result-item {
  display: block; padding: 0.68rem 0.9rem;
  border-bottom: 1px solid var(--line); color: var(--ink);
  transition: background var(--t-fast);
}
.search-result-item:last-child { border-bottom: 0; }
.search-result-item:hover, .search-result-item[aria-selected="true"] { background: var(--hover); color: var(--ink); }
.sr-name { font-weight: 600; font-size: var(--fs-sm); }
.sr-meta, .sr-sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); margin-top: 0.15rem; }
.search-result-empty { padding: var(--s-4); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

.popular-searches {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin-top: var(--s-4);
}
/* The caption always takes its own line. Sharing the row with the chips made
   the chip flow depend on the caption's width, which pushed the 7th chip
   ("12 Gauge") onto a line by itself on a 1440px viewport. On its own line the
   seven chips measure ~572px and sit on one row. */
.popular-searches > .label, .popular-searches > span:first-child {
  flex-basis: 100%;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 0.15rem;
}

/* ── STATS BAND ── */
.stats-band, .stats-bar { background: var(--panel); border-block: 1px solid var(--line); padding: var(--s-7) 0; }
.stats-band-inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: var(--s-4); align-items: center;
}
.stat { display: flex; align-items: center; gap: var(--s-4); padding-right: var(--s-4); border-right: 1px solid var(--line); }
.stat:last-of-type { border-right: 0; }
.stat-icon { color: var(--accent); opacity: .9; }
.stat-body { display: flex; flex-direction: column; }
.stat .count, .stat-number {
  font-family: var(--font-mono); font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stats-pill { display: contents; }
.stats-mission {
  font-family: var(--font-serif); font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.45; color: var(--ink-2); font-style: italic;
  padding-left: var(--s-5); border-left: 2px solid var(--accent-line);
}

/* ── CATEGORIES ── */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--s-3); }
.category-section { padding: var(--s-8) 0; }
.category-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  min-height: 152px;
  background: linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 72%, var(--paper)));
  border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base);
}
.category-card::after {            /* the accent hairline — the one bit of motion */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base);
}
.category-card:hover { border-color: var(--line-2); color: var(--ink); transform: translateY(-2px); }
.category-card:hover::after { transform: scaleX(1); }
.category-card .cat-icon, .cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600;
}
.category-card .cat-icon .icon { width: 26px; height: 26px; stroke-width: 1.45; }
.cat-label { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; margin-top: auto; }
.cat-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.category-card .silo-arrow, .category-card .arrow, .silo-arrow {
  color: var(--ink-3); transition: transform var(--t-base), color var(--t-base);
}
.category-card:hover .arrow, .category-card:hover .silo-arrow { color: var(--accent); transform: translateX(3px); }

/* ── Feature modules (compatibility / specs / knowledge) ── */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.feature-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.feature-card .icon-lg { color: var(--accent); }
.feature-card h3 { font-size: 1.06rem; margin: 0; }
.feature-card p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.feature-card .link-more {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent); margin-top: auto;
}

/* ── GUIDES: warmer, editorial ── */
.guide-feature {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-6); align-items: center;
  padding: var(--s-6); border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 65%, var(--paper)));
  border: 1px solid var(--line); margin-bottom: var(--s-5);
}
.guide-feature h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
.guide-card, .article-card, .guide-item {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); transition: border-color var(--t-base), transform var(--t-base);
}
.guide-card:hover, .article-card:hover, .guide-item:hover {
  border-color: var(--line-2); transform: translateY(-2px); color: var(--ink);
}
.guide-card .cat-icon { width: 36px; height: 36px; }
.guide-card .cat-icon .icon { width: 20px; height: 20px; }
.article-meta, .article-header .article-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.guides-header, .article-header { margin-bottom: var(--s-6); }

.article-content, .intro-text, .content-section, .about-section, .faq-section {
  max-width: var(--measure); color: var(--ink-2); font-size: 1.04rem; line-height: 1.75;
}
.article-content h2, .article-content h3 { color: var(--ink); margin-top: var(--s-6); }
.article-content p { margin-bottom: var(--s-4); }
.faq-item { border-bottom: 1px solid var(--line); padding: var(--s-4) 0; }
.faq-question { font-family: var(--font-serif); font-size: 1.06rem; color: var(--ink); margin-bottom: var(--s-2); }
.faq-answer { color: var(--ink-2); }

/* ── DEALS: deliberately quiet, never SALE-loud ── */
.deals-carousel-section, .deals-page { padding: var(--s-7) 0; background: var(--panel); border-block: 1px solid var(--line); }
.deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
.deal-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  min-width: 232px; padding: var(--s-4);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-md); transition: border-color var(--t-base);
}
.deal-card:hover { border-color: var(--line-2); }
.deal-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.deal-discount, .discount-badge {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  color: var(--brass); background: var(--brass-soft);
  padding: 0.2rem 0.42rem; border-radius: var(--r-xs);
  border: 1px solid color-mix(in srgb, var(--brass) 34%, transparent);
}
.deal-retailer, .deal-card-retailer {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.deal-card-name, .deal-card-title { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.4; }
.deal-card-prices { display: flex; align-items: baseline; gap: 0.5rem; margin-top: auto; }
.price-original { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); text-decoration: line-through; }
.price-sale { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-saved { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--brass); }
.deals-carousel { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin; }
.deals-carousel::-webkit-scrollbar { height: 6px; }
.deals-carousel::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.deals-intro { color: var(--ink-2); max-width: var(--measure); margin-bottom: var(--s-5); }
.deal-mini {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.deal-mini:last-child { border-bottom: 0; }
.deal-mini-name { color: var(--ink); font-size: var(--fs-sm); }
.deal-mini-discount { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--brass); }
.deal-mini-price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); }

/* ── METHODOLOGY: trust cards, archive feel ── */
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.trust-card { background: var(--panel-2); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.trust-card .icon-lg { color: var(--brass); }
.trust-card h3 { font-size: 1rem; margin: 0; }
.trust-card p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.standard-item { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.standard-icon { color: var(--brass); flex: none; }

/* ── Support / donate: quiet, footer region only ── */
.support-section { padding: var(--s-6) 0; }
.support-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-2);
}
.support-card h3 { font-size: 1rem; margin: 0; }
.support-slogan { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; flex: 1 1 260px; }
.support-buttons { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btn-donation { min-height: 40px; }

/* ── Ad slot: reserved, quiet, never shouting ── */
.ad-slot { margin: var(--s-6) auto; max-width: var(--container); padding-inline: var(--gutter); }
.ad-placeholder {
  display: block; padding: var(--s-4); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--r-sm);
}

/* ── Sub-page shells (serial lookup, hubs, compare, reloading) ── */
.hub-hero, .sl-hero, .compare-header, .page-header {
  padding: var(--s-7) 0 var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-6);
}
.hub-title, .hub-subtitle { color: var(--ink); }
.hub-subtitle { color: var(--ink-2); font-size: 1.02rem; max-width: var(--measure); }
.hub-container, .hub-main, .hub-card, .hub-cta, .sidebar-card, .related-section {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-5);
}
.related-link, .serial-cta-link, .serial-hub-link, .gun-link {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent);
}
.hub-models { columns: 2; column-gap: var(--s-6); list-style: none; padding: 0; margin: var(--s-4) 0; }
.hub-models li { break-inside: avoid; padding: 0.22rem 0; font-size: var(--fs-sm); }
.hub-models li::before { content: "→ "; color: var(--accent); font-family: var(--font-mono); }
.hub-scroll { overflow-x: auto; }
.hub-prefixes, .codegrid, .cgrid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin: var(--s-4) 0;
}
.codegrid div, .cgrid div, .hub-prefixes div {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.55rem; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
}
.sl-grid, .sl-form, .sl-result { display: grid; gap: var(--s-4); }
.sl-kv { display: flex; justify-content: space-between; gap: var(--s-4); padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.sl-year { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500; color: var(--accent); }
.sl-badge, .gun-type-badge { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.sl-makes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sl-source, .sources-section { font-size: var(--fs-xs); color: var(--ink-3); }

/* ── Article furniture ─────────────────────────────────────────────────────
   guides.html and article.html were the last two templates not extending
   base.html: standalone documents that loaded only the legacy sheet and the
   Inter webfont. They now extend base.html, so their old inline <style>
   blocks (which hardcoded the previous gunmetal palette, #D97706 accents and
   emoji arrows) are gone. These rules restore that furniture on the new
   tokens.                                                                */
.related-database,
.serial-lookup-cta,
.further-reading,
.cta-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--s-5) var(--s-5);
  margin: var(--s-6) 0;
}
.related-database h3,
.serial-lookup-cta h3,
.further-reading h3,
.cta-box h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink-1);
  margin: 0 0 var(--s-3);
  border: none;
  padding: 0;
}
.related-database h3::before,
.serial-lookup-cta h3::before,
.further-reading h3::before { content: none; }
.related-section { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 var(--s-2); line-height: 1.65; }
.related-section strong { color: var(--ink-1); margin-right: var(--s-2); }
.related-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rgb), .35); }
.related-link:hover { border-bottom-color: var(--accent); }
.serial-lookup-cta p { margin: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); }
.serial-cta-link { font-weight: 700; color: var(--accent); text-decoration: none; }
.serial-cta-link:hover { text-decoration: underline; }
.sources-section { background: transparent; border: none; border-top: 1px solid var(--line); border-radius: 0; padding: var(--s-6) 0 0; margin: var(--s-7) 0 var(--s-4); }
.sources-section h3 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink-1); margin: 0 0 var(--s-4); }
.sources-section ul { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.sources-section li { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; padding-left: var(--s-4); position: relative; margin-bottom: var(--s-2); }
.sources-section li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.sources-disclaimer { font-size: var(--fs-xs); color: var(--ink-3); font-style: normal; margin: 0; }
.article-nav { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.article-nav a { color: var(--accent); font-weight: 600; text-decoration: none; font-size: var(--fs-sm); }
.article-nav a:hover { text-decoration: underline; }
.article-nav .prev { text-align: left; }
.article-nav .next { text-align: right; margin-left: auto; }
.breadcrumb { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s-5); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { margin: 0 var(--s-2); opacity: .5; }
.breadcrumb [aria-current] { color: var(--ink-3); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); }
.guide-card { display: flex; flex-direction: column; gap: var(--s-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--s-5); text-decoration: none; color: var(--ink-1); transition: border-color .18s, transform .18s; }
.guide-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.guide-card .article-meta { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.guide-card h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; margin: 0; color: var(--ink-1); }
.guide-card .link-more { margin-top: auto; font-size: var(--fs-sm); color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-2); }
.article-content table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--fs-sm); }
/* Article bodies are imported HTML and can carry wide spec tables. Without this
   they overflow the viewport on phones (measured: a 395px table inside a 390px
   viewport → 500px document scroll width). Wrapping the table keeps the page
   from scrolling sideways; the table itself scrolls. */
/* The article wrapper is full-bleed now, so the PROSE inside it takes the
   measure back — a 100%-wide paragraph on a wide monitor is unreadable. The
   article's own furniture (header, nav, sources) stays aligned with the text. */
.article-header, .article-content, .sources-section, .article-nav, .breadcrumb,
.related-database, .serial-lookup-cta { max-width: var(--measure); }
@media (min-width: 1100px) { .article-header, .article-content, .sources-section,
  .article-nav, .breadcrumb, .related-database, .serial-lookup-cta { max-width: 78ch; } }

.article-content { overflow-x: auto; }
.article-content > table { min-width: 100%; }
@media (max-width: 700px) {
  .article-content table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}
.article-content th { background: var(--paper-2); color: var(--ink-1); text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 2px solid var(--line); font-weight: 600; }
.article-content td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.article-content tbody tr:last-child td { border-bottom: none; }
.article-content .cta-box { text-align: center; border-left-width: 1px; }
.article-content .cta-box .btn { margin-top: var(--s-3); display: inline-block; }

/* ── Responsive: article furniture ──────────────────────────────────────── */
@media (max-width: 700px) {
  .article-nav { flex-direction: column; gap: var(--s-3); }
  .article-nav .next { text-align: left; margin-left: 0; }
  .serial-lookup-cta, .related-database, .cta-box { padding: var(--s-4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. RESPONSIVE
   This block must stay AFTER the legacy style.css in the cascade: the legacy
   sheet carries its own `@media (max-width: 768px)` rules for the navbar, and
   equal specificity means the later sheet wins. It also must be the LAST thing
   in this file, or a partial write silently drops it (the mobile nav, the
   stacked tables and the narrow hero all live here).
   Targets: 320 / 375 / 390 / 768 / 1024 / 1440 / 1920
   ══════════════════════════════════════════════════════════════════════════ */

/* Tablet and below — stacked layouts begin */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-mission {
    grid-column: 1 / -1; padding: var(--s-4) 0 0;
    border-left: 0; border-top: 2px solid var(--accent-line);
  }
  .guide-feature { grid-template-columns: 1fr; }
}

/* The horizontal veil is useless once the text spans the full width —
   switch to an even, stronger VERTICAL veil. It is graded so the artwork still
   BREATHES between the copy blocks: measured on a real 390px render, a flat
   0.86-0.97 veil left the photo contributing literally zero detail (every
   sampled row identical to the page colour), which wastes the hero image.
   0.90 over the headline, easing to 0.74 lower down, keeps every text run
   above 4.5:1 while letting the image read. */
@media (max-width: 900px) {
  .hero { background-position: 62% 40%; min-height: clamp(520px, 72vh, 660px); }
  .hero::before {
    background: linear-gradient(to bottom,
      rgba(var(--hero-veil), 0.95) 0%,
      rgba(var(--hero-veil), 0.90) 26%,
      rgba(var(--hero-veil), 0.74) 58%,
      rgba(var(--hero-veil), 0.66) 72%,
      rgba(var(--hero-veil), 0.94) 100%);
  }
  .hero-copy { max-width: none; }
  .search-grid { grid-template-columns: 1fr; }
}

/* ── Mobile navigation ──
   Must neutralise the legacy `@media (max-width: 768px)` navbar rules,
   which keep the link row on one line and force the page wider than the
   viewport. Every property the legacy sheet sets is re-set here.
   Threshold is 1100px, not 860: the inline row of 8 links plus the brand
   measured 194px WIDER than a 1024px viewport, so the hamburger has to
   arrive before that width, or the page scrolls sideways on a small laptop. */
@media (max-width: 1100px) {
  .nav-inner { max-width: none; padding-inline: var(--gutter); justify-content: flex-start; }
  .nav-toggle { display: inline-flex; margin-left: auto; order: 3; }
  .nav-search-btn { order: 2; margin-left: auto; margin-right: 0; }
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; max-width: 100%; margin-left: 0;
    background: var(--paper); border-bottom: 1px solid var(--line-2);
    padding: var(--s-3) var(--gutter) var(--s-4);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    margin-left: 0; padding: 0.8rem 0.6rem;
    font-size: 1rem; border-radius: var(--r-sm);
  }
}

@media (max-width: 760px) {
  /* Dense tables become stacked cards — never a shrunk desktop table.
     Each cell carries its own label from data-label. */
  .table-wrap { border: 0; overflow: visible; }
  table.responsive thead, .hub-table.responsive thead { display: none; }
  table.responsive tbody tr, .hub-table.responsive tbody tr {
    display: block; margin-bottom: var(--s-3);
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s-3);
  }
  table.responsive tbody td, .hub-table.responsive tbody td {
    display: flex; justify-content: space-between; gap: var(--s-3);
    padding: 0.35rem 0; border: 0; border-bottom: 1px solid var(--line);
    text-align: left;
  }
  table.responsive tbody tr td:last-child,
  .hub-table.responsive tbody tr td:last-child { border-bottom: 0; }
  table.responsive tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: var(--fs-micro);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    flex: none;
  }
  td.num, th.num { text-align: right; }

  .footer-inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .stats-band-inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 var(--s-4); }
  .stat:last-of-type { border-bottom: 0; padding-bottom: 0; }
  .category-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .section { padding: var(--s-7) 0; }
  .hub-models { columns: 1; }
  .codegrid, .cgrid, .hub-prefixes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* touch targets: bring the small controls up to 44px on touch devices */
  .btn-sm { min-height: 44px; }
  .nav-search-btn, .nav-toggle { width: 44px; height: 44px; }
}

@media (max-width: 420px) {
  :root { --gutter: 1.05rem; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card { min-height: 132px; padding: var(--s-4) var(--s-3); }
  .search-box { padding: var(--s-3); }
  .popular-searches > span:first-child { flex-basis: 100%; }
  .codegrid, .cgrid, .hub-prefixes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 320px floor — nothing may overflow */
@media (max-width: 340px) {
  .category-grid { grid-template-columns: 1fr; }
  .codegrid, .cgrid, .hub-prefixes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-title { letter-spacing: -0.02em; }
}

/* ── Touch targets ──
   Keyed on the POINTER, not the width: a 768px tablet is a touch device but a
   768px desktop window is not, and a width rule cannot tell them apart.
   The brief asks for >=44px; this is where that is honoured. */
@media (pointer: coarse) {
  .btn, .btn-sm, .btn-donation { min-height: 44px; }
  .nav-search-btn, .nav-toggle { width: 44px; height: 44px; }
  .chip, .popular-link, .tag { min-height: 44px; padding-inline: 0.85rem; }
  .nav-links a { min-height: 44px; }
  .page-link { min-width: 44px; min-height: 44px; }
  input[type="text"], input[type="search"], select { min-height: 48px; }
}

/* ── Print: the archive sheet ── */
@media print {
  .navbar, .footer, .ad-slot, .support-section, .deals-carousel-section { display: none; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; background: none; padding: 0 0 1rem; }
  .hero::before { display: none; }
  a { color: #000; text-decoration: underline; }
}