/* Alfie's Gun Range / Weston Arms
   Layout: a dark firing hall. Full-bleed bays split by thin range markers;
   red HUD brackets (the bull's eyes) frame anything you can act on. */

@font-face { font-family: "Archivo"; src: url(/public/fonts/archivo-var.woff2) format("woff2-variations"), url(/public/fonts/archivo-var.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/public/fonts/jetbrains-mono-var.woff2) format("woff2-variations"), url(/public/fonts/jetbrains-mono-var.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Rye"; src: url(/public/fonts/rye.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #09090b; --ink-2: #0f0f12; --ink-3: #17171b; --steel: #27272d;
  --line: rgba(239, 232, 220, .1); --line-2: rgba(239, 232, 220, .22);
  --bone: #efe8dc; --dust: #a8a19a;
  --accent: #ff3b42; --accent-hi: #ff7a7e; --accent-fill: #c8141c; --accent-ink: #ffffff;
  --go: #5bd17f; --warn: #f2b84b;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --western: "Rye", "Archivo", Georgia, serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px); --max: 1440px; --ease: cubic-bezier(.16, 1, .3, 1);
  --hdr-h: 72px; --tick-h: 30px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: inherit; }
a:hover { color: var(--accent-hi); }
img { max-width: 100%; height: auto; }
svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-fill); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 860px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A hidden file input whose label is the button: the focus ring shows on the label. */
.file-pick:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: var(--accent-fill); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
/* A long value with no spaces (the FastBound webhook address) wraps instead
   of pushing the page wider than a phone screen. */
code { overflow-wrap: anywhere; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--accent); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.muted { color: var(--dust); }
.lede { font-size: clamp(18px, 1.4vw, 21px); color: var(--dust); max-width: 52ch; }
.note { color: var(--dust); font-size: 15px; }
.hint { color: var(--dust); font-size: 14px; margin: 6px 0 0; }
.tag { display: inline-block; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); vertical-align: middle; }
html.has-cursor, html.has-cursor * { cursor: none !important; }

/* ---------- buttons ---------- */
.button { --fill: var(--bone); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border: 1px solid transparent; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-family: var(--display); font-weight: 750; font-stretch: 84%; font-size: 16px; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .4s var(--ease), border-color .4s, background-color .4s, box-shadow .5s; }
/* The fill follows the pointer on hover; on touch screens (no hover) it
   shows only on keyboard focus, so a tap isn't taken for a hover first. */
.button:focus-visible { color: var(--ink); box-shadow: 0 10px 40px -10px rgba(255, 40, 48, .6); }
.button svg { width: 18px; height: 18px; flex: none; transition: transform .55s var(--ease); }
.btn-fill { position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: var(--fs, 320px); aspect-ratio: 1; border-radius: 50%; background: var(--fill); transform: translate(-50%, -50%) scale(0); transition: transform .65s var(--ease); z-index: -1; pointer-events: none; }
.button:focus-visible .btn-fill { transform: translate(-50%, -50%) scale(1); }
.button:not(:has(.btn-fill)):focus-visible { background: var(--bone); }
.button-quiet { --fill: var(--accent-fill); background: transparent; border-color: var(--line-2); color: var(--bone); }
.button-quiet:focus-visible { color: var(--accent-ink); border-color: var(--accent); box-shadow: none; }
.button-quiet:not(:has(.btn-fill)):focus-visible { background: var(--accent-fill); }
.button:active { filter: brightness(1.12); }
@media (hover: hover) {
  .button:hover { color: var(--ink); box-shadow: 0 10px 40px -10px rgba(255, 40, 48, .6); }
  .button:hover svg { transform: translateX(4px); }
  .button:hover .btn-fill { transform: translate(-50%, -50%) scale(1); }
  .button:not(:has(.btn-fill)):hover { background: var(--bone); }
  .button-quiet:hover { color: var(--accent-ink); border-color: var(--accent); box-shadow: none; }
  .button-quiet:not(:has(.btn-fill)):hover { background: var(--accent-fill); }
}
.button-small { min-height: 44px; padding: 0 20px; font-size: 14px; }
.button-wide { width: 100%; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button.is-busy { opacity: .6; cursor: progress; }
.link-button { padding: 8px 0; border: 0; background: none; color: var(--dust); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-button:hover { color: var(--accent-hi); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: transform .55s var(--ease), background-color .4s, border-color .4s; }
.ticker { height: var(--tick-h); overflow: hidden; display: flex; align-items: center; background: var(--accent-fill); color: var(--accent-ink); }
.ticker-track { display: flex; flex: none; white-space: nowrap; animation: tick 42s linear infinite; }
.ticker-test { background: var(--warn); color: #111; }
.ticker-track span { display: inline-flex; align-items: center; gap: 16px; padding-right: 16px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ticker-track svg { width: 11px; height: 11px; }
@keyframes tick { to { transform: translateX(-50%); } }
.hdr-bar { height: var(--hdr-h); display: flex; align-items: center; gap: 24px; }
.hdr.is-scrolled, .page-plain .hdr { background: rgba(9, 9, 11, .82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--line); }
.hdr.is-scrolled { transform: translateY(calc(-1 * var(--tick-h))); }
.hdr.is-scrolled .ticker-track, .hdr.is-hidden .ticker-track { animation-play-state: paused; }
.hdr.is-hidden { transform: translateY(-110%); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo:hover { color: inherit; }
.logo-mark { width: 50px; height: auto; transition: transform .8s var(--ease), filter .5s; }
.logo:hover .logo-mark { transform: scale(1.08) rotate(-4deg); filter: drop-shadow(0 0 8px rgba(255, 40, 48, .55)); }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-word { font-family: var(--western); font-size: 19px; letter-spacing: .03em; text-transform: uppercase; }
.logo-sub { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { position: relative; padding: 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--dust); transition: color .3s; }
.nav a:hover, .nav a[aria-current] { color: var(--bone); }
.nav a .sl { pointer-events: none; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hdr-actions { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--bone); text-decoration: none; cursor: pointer; list-style: none; transition: border-color .3s, background-color .3s; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { border-color: var(--line-2); background: var(--ink-3); color: var(--bone); }
.icon-btn svg { width: 18px; height: 18px; }
.cart-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--accent-fill); color: var(--accent-ink); font: 700 10px/19px var(--mono); text-align: center; }
.hdr-search { position: relative; }
.search-pop { position: absolute; right: 0; top: calc(100% + 12px); z-index: 5; display: flex; gap: 8px; width: min(420px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(15, 15, 18, .97); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.search-pop input { flex: 1; min-width: 0; }
.menu-wrap { display: none; }
.menu-wrap > summary { list-style: none; }
.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 6px; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; background: var(--ink); }
/* Items keep their full height and the list scrolls when it's taller than
   the screen; the auto margins centre it when it fits. */
.menu > * { flex-shrink: 0; }
.menu > .menu-search { margin-top: auto; }
.menu > a { display: block; padding-block: .02em .06em; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(52px, 14vw, 100px); line-height: .95; text-transform: uppercase; text-decoration: none; }
.menu > a:hover { color: var(--accent); }
/* The menu's big links set their own display and type; the button keeps a
   button's: label and arrow on one line, centred. */
.menu > a.menu-book { display: inline-flex; align-items: center; justify-content: center; gap: 12px; align-self: flex-start; margin-top: 22px; padding: 0 28px; font-family: var(--display); font-weight: 750; font-stretch: 84%; font-size: 16px; letter-spacing: .07em; line-height: 1; white-space: nowrap; }
.menu > a.menu-book:hover { color: var(--accent-ink); }
.menu .menu-foot { margin: 28px 0 auto; color: var(--dust); }
.menu-foot a { color: var(--bone); text-decoration: none; }
/* The header slides and blurs as the page scrolls, and either one would pin
   the open menu inside the header's own box, so both are off while it's
   open, and the page behind stays put. */
html.menu-open, html.menu-open body { overflow: hidden; }
html.menu-open .hdr, .hdr:has(.menu-wrap[open]) { transform: none; transition: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-search { display: flex; gap: 8px; max-width: 520px; margin: 0 0 22px; }
.menu-search input { flex: 1; min-width: 0; }
/* Suggestions under a search box, as you type (search.js). */
form.has-suggest { flex-wrap: wrap; }
.suggest { flex: 1 0 100%; max-height: min(60vh, 440px); overflow: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); text-align: left; }
.sg-group + .sg-group, .sg-group + .sg-all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.sg-head { padding: 6px 10px 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.sg-opt { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.sg-opt b { font-weight: 700; line-height: 1.25; color: var(--bone); }
.sg-opt span { font-size: 14px; line-height: 1.35; color: var(--dust); }
.sg-product { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.sg-product span { flex-shrink: 0; }
.sg-opt[aria-selected="true"] { background: var(--ink-3); box-shadow: inset 2px 0 0 var(--accent); }
.sg-all b { font-weight: 600; font-size: 15px; color: var(--accent-hi); }
.suggest.is-stale { opacity: .55; transition: opacity .2s .15s; }
/* The results page. */
.search-big { position: relative; display: flex; gap: 8px; max-width: 720px; margin: 0 0 36px; }
.search-big input { flex: 1; min-width: 0; }
.search-big .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.search-page h1 .q { color: var(--accent); }
.search-sec { margin: 0 0 44px; }
.search-sec > h2 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.search-sec-pages { margin: 0 0 28px; }
.page-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.page-hits a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); text-decoration: none; transition: border-color .3s, background-color .3s; }
.page-hits a:hover { border-color: var(--line-2); background: var(--ink-3); color: inherit; }
.ph-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--bone); }
.ph-title svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--accent); }
.ph-blurb { font-size: 15px; line-height: 1.45; color: var(--dust); }
.ph-path { margin-top: auto; padding-top: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); opacity: .8; }
.page-hits.is-compact a { padding: 12px 16px; }
.search-more { margin: 24px 0 0; text-align: center; }
.menu-bull { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: var(--gutter); width: 52px; }
.menu-wrap[open] > summary { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: var(--gutter); z-index: 61; }
.menu-wrap .i-close { display: none; }
.menu-wrap[open] .i-close { display: block; }
.menu-wrap[open] .i-open { display: none; }
.page-plain main { padding-top: calc(var(--hdr-h) + var(--tick-h) + env(safe-area-inset-top, 0px)); }

.flash { position: relative; z-index: 2; padding: 14px 0; border-bottom: 1px solid var(--line); background: rgba(91, 209, 127, .1); color: var(--bone); }
.page-plain .flash { margin-top: calc(var(--hdr-h) + var(--tick-h)); }
.page-plain .flash + main { padding-top: 0; }
.flash-error { background: rgba(255, 59, 66, .14); }
.notice { margin: 16px 0; padding: 14px 18px; border: 1px solid var(--line-2); border-left: 3px solid var(--warn); border-radius: 10px; background: var(--ink-2); }
.notice p { margin: 4px 0; }
.notice-error { border-left-color: var(--accent); background: rgba(255, 59, 66, .08); }
.notice-ok { border-left-color: var(--go); }

.product-art[hidden], .product-img[hidden] { display: none !important; }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; min-height: clamp(660px, 92vh, 940px); padding-top: calc(var(--hdr-h) + var(--tick-h) + env(safe-area-inset-top, 0px)); overflow: hidden; background: radial-gradient(85% 70% at 70% 44%, #1f1d21 0%, #111013 46%, var(--ink) 74%); }
.hero-stage { position: absolute; inset: 0 0 0 37%; }
/* The stage fades in from its edge. Only the still pictures are masked here;
   the 3D canvas draws the same fade itself (hero3d.js), since a mask over
   moving content is costly. The eyes sit well inside the fade. */
.hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.hero-art::before { content: ""; position: absolute; left: 50%; top: 6%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(200, 20, 28, .26), rgba(200, 20, 28, .08) 55%, transparent); pointer-events: none; }
/* The bull's shadow and glow are drawn into the files (CSS filters this size
   are redrawn often and slow weaker devices right down). The three files
   share one frame with room for the shadow: --bw is the bull's own width,
   and the files are 1.44 times wider, with the bull 16.3% of --bw down. */
.hero-shadow, .hero-bull, .hero-eyes { --bw: min(80%, 780px); position: absolute; left: 50%; top: -2%; z-index: 0; width: calc(var(--bw) * 1.4402); max-width: none; height: auto; margin: calc(var(--bw) * -.1627) 0 0 calc(var(--bw) * -.7201); pointer-events: none; }
.hero-eyes { will-change: opacity; animation: eyesOn 1.3s steps(1, end) .35s both, eyesPulse 4.6s ease-in-out 1.8s infinite; }
@keyframes eyesOn { 0% { opacity: 0; } 14% { opacity: .85; } 22% { opacity: .1; } 34% { opacity: 1; } 46% { opacity: .2; } 62%, 100% { opacity: 1; } }
@keyframes eyesPulse { 0%, 100% { opacity: 1; } 50% { opacity: .68; } }
.hero-stage canvas { position: relative; z-index: 1; width: 100%; height: 100%; }
.tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rtag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-bottom: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); white-space: nowrap; transition: color .35s; will-change: transform; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.rtag::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 1px; height: 12px; background: currentColor; opacity: .7; }
.rtag b { font-weight: 700; }
.rtag i { font-style: normal; max-height: 0; opacity: 0; overflow: hidden; color: var(--bone); transition: max-height .45s var(--ease), opacity .35s; }
.rtag.is-on { color: var(--accent); }
.rtag.is-on i { max-height: 20px; opacity: 1; }
.hero-grid { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 48px 28px; }
.hero-copy { max-width: 660px; }
@media (min-width: 901px) { .hero-copy { max-width: min(840px, 64vw); } .hero-title .line { white-space: nowrap; } }
.hero-title { margin: 22px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(58px, 8.6vw, 140px); line-height: .86; letter-spacing: -.005em; text-transform: uppercase; }
.hero-title .line { display: block; overflow: hidden; padding-block: .02em .05em; }
.hero-title .w { display: inline-block; white-space: nowrap; }
.hero-title .ch { display: inline-block; will-change: transform; }
.hero-title .reveal { display: block; color: var(--accent); background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 42%, #ffd6d7 50%, var(--accent) 58%, var(--accent) 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 7s var(--ease) 1.6s infinite; }
@keyframes shimmer { 0%, 55% { background-position: 100% 0; } 100% { background-position: -60% 0; } }
.hero-lede { max-width: 44ch; margin: 26px 0 0; font-size: clamp(17px, 1.35vw, 20px); color: var(--dust); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-hud-wrap { position: relative; z-index: 3; border-top: 1px solid var(--line); }
.hero-hud { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 16px 56px; margin-block: 0; padding-block: 20px 34px; }
/* With the live lane count: four across on wide screens, two by two below that. */
.hero-hud.has-4 { grid-template-columns: repeat(4, minmax(0, max-content)); gap: 16px 48px; }
@media (max-width: 1400px) { .hero-hud.has-4 { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 14px 56px; } }
.hero-hud dt { color: var(--dust); }
.hero-hud dd { margin: 6px 0 0; font-size: 15px; color: var(--bone); }
.hero-hud a { text-decoration: none; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--go); animation: pulse 2.2s infinite; }
.live-dot.is-closed { background: var(--dust); animation: none; }
.lanes-now { margin: 18px 0 0; color: var(--bone); font-size: 14px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 209, 127, .55); } 70% { box-shadow: 0 0 0 10px rgba(91, 209, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 209, 127, 0); } }
.scroll-cue { position: absolute; right: var(--gutter); bottom: 34px; z-index: 3; display: flex; align-items: center; gap: 12px; color: var(--dust); }
.scroll-cue i { position: relative; width: 1px; height: 44px; overflow: hidden; background: var(--line-2); }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
/* The storefront photo on the right of the hero (the words sit over its
   faded left side), and under the buttons on phones. The edges fade out with
   masks, so the photo melts into the hero's own background. */
.hero-photo { overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 72%, transparent 100%); }
.hero-photo picture, .hero-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-photo picture { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .22) 16%, rgba(0, 0, 0, .7) 40%, #000 64%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .22) 16%, rgba(0, 0, 0, .7) 40%, #000 64%); }
.hero-photo img { object-fit: cover; object-position: 56% 38%; filter: brightness(.62) contrast(1.1) saturate(.8); }
.hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 62% 30%, rgba(200, 20, 28, .12), transparent 70%); }
@media (min-width: 721px) { .hero-photo { inset: calc(var(--hdr-h) + var(--tick-h)) 0 0 30%; } }
.hero-hint { position: absolute; right: var(--gutter); bottom: 118px; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--dust); }
.hero-hint svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- brands marquee ---------- */
.brands { overflow: hidden; padding-block: clamp(18px, 2.4vw, 30px); border-block: 1px solid var(--line); background: var(--ink); }
.marquee-track { display: flex; width: max-content; align-items: center; will-change: transform; }
.brand { display: inline-flex; align-items: center; padding-inline: clamp(18px, 2.2vw, 34px); font-family: var(--display); font-weight: 800; font-size: clamp(44px, 8vw, 124px); line-height: 1; text-transform: uppercase; font-variation-settings: "wdth" 62; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px var(--dust); text-decoration: none; transition: color .5s var(--ease), font-variation-settings .7s var(--ease), -webkit-text-stroke-color .5s; }
.brand:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); font-variation-settings: "wdth" 100; }
.brand-sep { flex: none; width: clamp(18px, 2vw, 28px); height: clamp(18px, 2vw, 28px); color: var(--accent); }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(88px, 11vw, 170px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: end; gap: 24px 64px; margin-bottom: clamp(40px, 5vw, 76px); }
.sec-head > * { min-width: 0; }
.sec-title { margin: 20px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(50px, 7.6vw, 118px); line-height: .88; text-transform: uppercase; }
.sec-lede { margin: 0; color: var(--dust); max-width: 44ch; }
.fillhead { position: relative; }
.fillhead em { font-style: normal; }
.fh-base { color: transparent; -webkit-text-stroke: 1.2px var(--dust); }
.fh-base em { -webkit-text-stroke-color: var(--accent); }
/* The filled copy is revealed left to right by sliding its frame one way and
   the words back the other: both are moves the graphics chip does alone, so
   the words aren't redrawn on every frame of scrolling. */
.fh-fill { position: absolute; inset: 0; overflow: hidden; color: var(--bone); transform: translate3d(calc(var(--p, 100%) - 100%), 0, 0); will-change: transform; pointer-events: none; }
.fh-in { display: block; transform: translate3d(calc(100% - var(--p, 100%)), 0, 0); will-change: transform; }
.fh-fill em { color: var(--accent); }
/* Plain headings: one color, so the red accent is kept for a few. */
.fillhead.is-plain .fh-base em { -webkit-text-stroke-color: var(--dust); }
.fillhead.is-plain .fh-fill em { color: inherit; }
/* Shorter sections, so the home page isn't one long scroll. */
.sec-tight { padding-block: clamp(64px, 7vw, 112px); }
/* Real reviews (Admin -> Reviews). */
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.review { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; color: var(--bone); font-size: 17px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.review-by { margin: auto 0 0; color: var(--bone); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.review-by span { color: var(--dust); }
.new-lede { margin: -16px 0 28px; }
.gb-points { display: grid; gap: 8px; margin: 0 0 18px; padding-left: 20px; color: var(--dust); }
.gb-points li::marker { color: var(--accent); }
.brk { position: absolute; z-index: 3; width: 14px; height: 14px; border: 0 solid var(--accent); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.brk.tl { top: 12px; left: 12px; border-top-width: 1.5px; border-left-width: 1.5px; transform: translate(10px, 10px); }
.brk.tr { top: 12px; right: 12px; border-top-width: 1.5px; border-right-width: 1.5px; transform: translate(-10px, 10px); }
.brk.bl { bottom: 12px; left: 12px; border-bottom-width: 1.5px; border-left-width: 1.5px; transform: translate(10px, -10px); }
.brk.br { bottom: 12px; right: 12px; border-bottom-width: 1.5px; border-right-width: 1.5px; transform: translate(-10px, -10px); }
.cat:hover .brk, .cat:focus-visible .brk, .card:hover .brk, .card-link:focus-visible .brk, .is-framed .brk { opacity: 1; transform: none; }

/* ---------- line art ---------- */
.art { overflow: visible; }
.art .b { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.art .d { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.art .d.dot { fill: var(--accent); stroke: none; opacity: 1; }
.art .d.pt { stroke-width: 4; opacity: .8; }
.art .d.hl { display: none; }
.art-fill .b { stroke: rgba(255, 255, 255, .16); stroke-width: .8; }
.art-fill .t-metal { fill: url(#g-metal); }
.art-fill .t-poly { fill: url(#g-poly); }
.art-fill .t-brass { fill: url(#g-brass); }
.art-fill .t-copper { fill: url(#g-copper); }
.art-fill .t-hull { fill: url(#g-hull); }
.art-fill .t-glass { fill: url(#g-glass); }
.art-fill .d { stroke: rgba(255, 255, 255, .2); stroke-width: 1; opacity: 1; }
.art-fill .d.hl { display: inline; stroke: rgba(255, 255, 255, .42); stroke-width: 1.2; }
.art-fill .d.pt { stroke: rgba(255, 255, 255, .35); stroke-width: 4; }
.art-fill .ground { display: none; }

/* ---------- categories ---------- */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--line); }
.cats > li { display: flex; min-width: 0; }
.cat-count { white-space: nowrap; }
.cat { --mx: 50%; --my: 50%; position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 24px; overflow: hidden; background: var(--ink); text-decoration: none; transition: background-color .5s; }
.cat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx) var(--my), rgba(255, 40, 48, .13), transparent 62%); opacity: 0; transition: opacity .45s; }
.cat:hover { background: var(--ink-2); color: inherit; }
.cat:hover::before { opacity: 1; }
.cat > *:not(.brk) { position: relative; }
.cat-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--dust); font-size: 10px; }
.cat-art { flex: 1; display: grid; place-items: center; min-height: 120px; padding: 6px 0; }
.cat-art svg { width: min(100%, 300px); height: auto; color: var(--dust); transition: color .5s, transform .9s var(--ease); }
/* Touch screens (site.js adds .art-rise): each drawing fades and rises in
   once its tile is on screen. */
.art-rise .cat .cat-art { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.art-rise .cat.is-in .cat-art { opacity: 1; transform: none; }
.cat:hover .cat-art svg { color: var(--accent); transform: translateY(-6px) scale(1.04); }
.cat-name { margin: 0; font-family: var(--display); font-weight: 850; font-stretch: 68%; font-size: clamp(28px, 2.4vw, 40px); line-height: .95; text-transform: uppercase; transition: font-stretch .7s var(--ease), color .4s; }
.cat:hover .cat-name { font-stretch: 92%; }
.cat-go { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); }
.cat-go svg { width: 16px; height: 16px; transition: transform .55s var(--ease); }
.cat:hover .cat-go svg { transform: translateX(6px); }

/* ---------- range band ---------- */
.range-band { background: linear-gradient(var(--ink), var(--ink-2) 30%, var(--ink-2) 70%, var(--ink)); }
.band { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.band > * { min-width: 0; }
.seats { position: relative; display: grid; text-decoration: none; transform: perspective(1100px) rotateX(16deg); transform-origin: 50% 100%; transition: transform .9s var(--ease), border-color .4s;  grid-template-columns: repeat(var(--n, 11), minmax(0, 1fr)); gap: 6px; padding: 26px; border: 1px solid var(--line); background: #0b0b0d; }
.seats:hover { transform: perspective(1100px) rotateX(6deg); border-color: var(--line-2); color: inherit; }
.seat { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px solid rgba(239, 232, 220, .7); border-radius: 9px 9px 4px 4px; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.seat.is-off { border-color: rgba(239, 232, 220, .2); color: rgba(239, 232, 220, .4); background: repeating-linear-gradient(135deg, rgba(239, 232, 220, .1) 0 3px, transparent 3px 7px); }
.seat.is-mine { border-color: var(--accent); background: var(--accent-fill); color: #fff; box-shadow: 0 0 22px rgba(255, 40, 48, .55); }
.seats-floor { grid-column: 1 / -1; height: 120px; margin-top: 8px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n, 11) - 1px), rgba(239, 232, 220, .07) 0 calc(100% / var(--n, 11))), linear-gradient(rgba(239, 232, 220, .06), transparent); }
.seats-label { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--dust); }
.seat-east { border-color: var(--east); }
.seat-west { align-self: end; aspect-ratio: auto; height: 62%; border-color: var(--west); }
.seat-gap { width: 100%; }
.seats-label span:first-child { color: var(--east); }
.seats-label span:last-child { color: var(--west); }

/* ---------- training ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.story-visual { min-width: 0; }
.story-sticky { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; background: var(--ink); }
.group-svg { width: min(100%, 500px); height: auto; }
.group-read { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; color: var(--dust); }
.group-read b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.story-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.story-steps { justify-content: center; }
.story-step { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); transition: opacity .6s var(--ease); }
.story-step:first-child { border-top: 0; }
/* Steps not reached yet are dimmed. The heading dims the most (large type
   needs 3:1); the small text stays above 4.5:1 on the dark background, so
   it can be read before it lights up (WCAG 1.4.3). test/accessibility.test.js
   checks these numbers. */
.story-step h3, .story-step p { transition: opacity .6s var(--ease); }
.js .story-step h3 { opacity: .45; }
.js .story-step p { opacity: .8; }
.js .story-step.is-on h3, .js .story-step.is-on p { opacity: 1; }
.story-step h3 { margin: 0; font-family: var(--display); font-weight: 850; font-stretch: 68%; font-size: clamp(32px, 3.4vw, 50px); line-height: .92; text-transform: uppercase; }
.story-step p { margin: 0; max-width: 40ch; color: var(--dust); font-size: 18px; }
.classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(56px, 7vw, 100px); }
.class-card { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: clamp(24px, 3vw, 40px); overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); }
.class-card .ghost { position: absolute; right: -.06em; bottom: -.2em; font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: clamp(120px, 14vw, 220px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-2); pointer-events: none; user-select: none; }
.class-card > *:not(.ghost) { position: relative; }
.class-card h3 { margin: 0; font-family: var(--display); font-weight: 850; font-stretch: 68%; font-size: clamp(36px, 3.6vw, 54px); line-height: .92; text-transform: uppercase; }
.class-card p { margin: 0; max-width: 42ch; color: var(--dust); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; }

/* ---------- product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.card { position: relative; display: flex; min-width: 0; }
.card-link { position: relative; flex: 1; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--ink-2); text-decoration: none; transition: border-color .45s; }
.card-link:hover { border-color: var(--line-2); color: inherit; }
.card-art { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 34%; position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; perspective: 900px; background: radial-gradient(70% 62% at var(--gx) var(--gy), #2c2a2f 0%, #151418 58%, #0b0b0d 100%); }
/* Photos sit inside the frame whatever their shape: a tall photo is shown
   whole, not cut off at the top and bottom. */
.card-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .7s var(--ease); }
.card-art .product-art { display: grid; place-items: center; width: 100%; height: 100%; }
.card-art .art { width: 84%; height: auto; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ease); filter: drop-shadow(0 22px 16px rgba(0, 0, 0, .6)); }
.card-link:hover .card-art .art { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px); }
.card-link:hover .card-art > img { transform: scale(1.04); }
.card-badge { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(9, 9, 11, .65); color: var(--bone); font-size: 10px; }
.card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.card-brand { color: var(--accent); }
.card-name { font-size: 17px; font-weight: 600; line-height: 1.3; font-stretch: 96%; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
/* The store's GunBroker listings in the shop: labeled, and they open on GunBroker. */
.gb-badge { border-color: var(--accent); color: var(--accent); }
.gb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.gb-go { color: var(--accent); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.price { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.avail { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.avail::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.avail-in { color: var(--go); }
.avail-low { color: var(--warn); }
.avail-out { color: var(--dust); }
.avail-store { color: var(--bone); }
.avail-store::before { background: var(--accent); }
.product-img-empty, .product-art { color: var(--dust); }
.rail { overflow: hidden; padding-block: 6px 30px; }
.rail-track { display: flex; gap: 20px; width: max-content; margin: 0; padding: 0 var(--gutter); list-style: none; will-change: transform; }
.rail-track .card { width: clamp(280px, 25vw, 360px); flex: none; }
.new-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: 36px; }
.new-head > * { min-width: 0; }
.new-note { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; color: var(--dust); }
.new-note a { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); text-decoration: none; }
.new-note svg { width: 16px; height: 16px; }
.rail-progress { width: 180px; height: 2px; overflow: hidden; background: var(--line-2); }
.rail-progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (min-width: 1024px) { .new-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } }

/* ---------- buying steps ---------- */
.steps-sec { border-top: 1px solid var(--line); }
.steps-wrap { position: relative; }
.steps-line { position: absolute; left: 34px; right: 0; top: 34px; height: 1px; background: var(--line-2); }
.steps-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 1)); }
.steps-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.bstep { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 96px; }
.bstep-n { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--ink); color: var(--accent); font-family: var(--mono); font-size: 15px; font-weight: 700; }
.bstep h3 { margin: 0; font-family: var(--display); font-weight: 850; font-stretch: 68%; font-size: clamp(34px, 3.2vw, 46px); line-height: .95; text-transform: uppercase; }
.bstep p { margin: 0; max-width: 36ch; color: var(--dust); }

/* ---------- visit ---------- */
.visit { background: linear-gradient(var(--ink), var(--ink-2)); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.visit-grid > * { min-width: 0; }
.radar { position: relative; justify-self: center; width: 100%; max-width: 560px; aspect-ratio: 1; }
.radar canvas { width: 100%; height: 100%; }
/* The sweep: a fading red wedge behind a bright line, turned once every six
   seconds by the graphics chip. It starts at 12 o'clock. */
.radar-sweep { position: absolute; inset: 6px; border-radius: 50%; background: conic-gradient(from -63deg, rgba(255, 40, 48, 0) 0deg, rgba(255, 40, 48, .3) 63deg, rgba(255, 40, 48, 0) 63.2deg); animation: radar-turn 6s linear infinite; will-change: transform; pointer-events: none; }
.radar-sweep::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 35%; margin-left: -.75px; background: rgba(255, 90, 96, .9); }
@keyframes radar-turn { to { transform: rotate(1turn); } }
/* The blips light up as the sweep passes (each one's delay is when), then
   fade, with a ring spreading out. */
.radar-blips i { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgb(255, 90, 96); opacity: .15; animation: radar-blip 6s linear infinite; }
.radar-blips i::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgb(255, 90, 96); border-radius: 50%; opacity: 0; animation: inherit; animation-name: radar-ring; }
@keyframes radar-blip { 0% { opacity: 1; } 8% { opacity: .62; } 18% { opacity: .34; } 34% { opacity: .15; } 100% { opacity: .15; } }
@keyframes radar-ring { 0% { opacity: .5; transform: scale(1); } 30% { opacity: 0; transform: scale(5.6); } 100% { opacity: 0; transform: scale(5.6); } }
/* Turning only while the radar is on screen (site.js adds .is-on). */
.radar-sweep, .radar-blips i, .radar-blips i::after { animation-play-state: paused; }
.radar.is-on .radar-sweep, .radar.is-on .radar-blips i, .radar.is-on .radar-blips i::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .radar-sweep, .radar-blips i, .radar-blips i::after { animation: none; } }
.radar-label { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -50%); color: var(--accent); text-align: center; white-space: nowrap; pointer-events: none; }
.radar-label img { width: 64px; }
/* ---------- Visit us (/visit) ---------- */
.visit-top { padding: clamp(36px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.visit-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.vh-copy h1 { margin: 14px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(48px, 6.6vw, 104px); line-height: .9; text-transform: uppercase; }
.vh-copy .lede { margin: 22px 0 0; }
.vh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vh-status { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.vh-gift { margin: 14px 0 0; }
.vh-gift a { display: inline-flex; align-items: center; gap: 8px; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.vh-gift a:hover { color: var(--accent-hi); border-color: currentColor; }
.vh-gift svg { width: 16px; height: 16px; }
.vh-photo, .visit-gallery figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.vh-photo .brk, .visit-gallery .brk { opacity: 1; transform: none; border-color: rgba(239, 232, 220, .7); }
.vh-photo picture, .visit-gallery picture { display: block; width: 100%; height: 100%; }
.vh-photo img, .visit-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vh-photo img { aspect-ratio: 4 / 3; }
.vh-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); background: linear-gradient(transparent, rgba(9, 9, 11, .85)); }
.visit-h { margin: 12px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(40px, 5vw, 76px); line-height: .92; text-transform: uppercase; }
.visit-do, .visit-photos, .visit-before { padding-block: clamp(56px, 7vw, 110px); }
.do-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.do-grid > li { min-width: 0; }
.do-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); text-decoration: none; transition: border-color .3s, background-color .3s, transform .4s var(--ease); }
.do-card:hover { border-color: var(--accent); background: var(--ink-3); color: inherit; transform: translateY(-3px); }
.do-top { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.do-top span:first-child { color: var(--accent); }
.do-card h3 { margin: 4px 0 0; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: clamp(26px, 2.3vw, 32px); line-height: 1; text-transform: uppercase; color: var(--bone); }
.do-card p { margin: 0; color: var(--dust); font-size: 15.5px; line-height: 1.5; }
.do-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); }
.do-cta svg { width: 16px; height: 16px; color: var(--accent); transition: transform .4s var(--ease); }
.do-card:hover .do-cta svg { transform: translateX(4px); }
.visit-gallery { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: clamp(220px, 21vw, 320px); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.visit-gallery .pg-big { grid-row: span 2; }
.visit-gallery figure { min-height: 0; }
.visit-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 48px 20px 18px; background: linear-gradient(transparent, rgba(9, 9, 11, .9)); }
.visit-gallery figcaption b { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 26px; line-height: 1; text-transform: uppercase; }
.visit-gallery figcaption span { color: var(--dust); font-size: 14.5px; }
.visit-before .before-grid { margin-top: clamp(24px, 3vw, 40px); }
.visit-range { margin: 14px 0 0; color: var(--dust); }
.visit-range a { color: var(--bone); text-decoration: none; }
/* The Google rating (Range settings): five stars filled to the rating. */
.g-rating { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--dust); font-size: 15px; text-decoration: none; }
.g-rating b { color: var(--bone); }
.g-rating:hover span:last-child { color: var(--bone); }
.g-stars { --pct: 100%; position: relative; display: inline-block; width: 92px; height: 16px; background: linear-gradient(90deg, var(--warn) var(--pct), var(--steel) var(--pct)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 16'%3E%3Cg%3E%3Cpath id='s' d='M8 .8l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L.8 6.1l5-.7z'/%3E%3Cuse href='%23s' x='19'/%3E%3Cuse href='%23s' x='38'/%3E%3Cuse href='%23s' x='57'/%3E%3Cuse href='%23s' x='76'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 16'%3E%3Cg%3E%3Cpath id='s' d='M8 .8l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L.8 6.1l5-.7z'/%3E%3Cuse href='%23s' x='19'/%3E%3Cuse href='%23s' x='38'/%3E%3Cuse href='%23s' x='57'/%3E%3Cuse href='%23s' x='76'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (max-width: 1000px) {
  .do-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .visit-hero { grid-template-columns: minmax(0, 1fr); }
  .visit-gallery { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .visit-gallery .pg-big { grid-row: auto; }
  .visit-gallery img { aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 600px) {
  .do-grid { grid-template-columns: minmax(0, 1fr); }
  .vh-actions .button { flex: 1 1 auto; justify-content: center; }
}
.addr { margin: 20px 0 0; font-family: var(--display); font-weight: 850; font-stretch: 66%; font-size: clamp(40px, 4.8vw, 72px); line-height: .92; text-transform: uppercase; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; }
.phone { padding-right: 8px; font-family: var(--mono); font-size: 20px; letter-spacing: .04em; text-decoration: none; }
.hours { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; margin: 0; }
.visit .hours { max-width: 440px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hours dt { color: var(--dust); }
.hours dd { margin: 0; }
.hours .today { color: var(--accent); }

/* ---------- footer ---------- */
.ftr { position: relative; overflow: hidden; padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); background: var(--ink-2); }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.ftr-top > * { min-width: 0; }
.ftr-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(40px, 5vw, 64px); padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.ftr .ftr-list-h { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(28px, 3vw, 40px); line-height: 1; text-transform: uppercase; color: var(--bone); }
.ftr .ftr-list p { margin: 0; max-width: none; }
.ftr-list-form { display: flex; flex: 1 1 320px; gap: 8px; max-width: 480px; }
.ftr-list-form input { flex: 1; min-width: 0; }
.list-row { display: flex; gap: 8px; max-width: 560px; }
.list-row input { flex: 1; min-width: 0; }
.email-page .lede { margin: 18px 0 26px; }
.email-page form { margin: 0 0 18px; }
.email-page .button + .button { margin-left: 8px; }
.optin { margin-top: 6px; }
.ftr-brand { display: flex; align-items: flex-start; gap: 24px; }
.ftr-emblem { flex: none; width: 132px; }
.ftr p { margin: 0 0 12px; max-width: 32ch; color: var(--dust); }
.ftr p a { text-decoration: none; }
.ftr h2 { margin: 0; color: var(--dust); }
.ftr ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.ftr ul a { color: var(--bone); text-decoration: none; opacity: .82; transition: opacity .3s, color .3s; }
/* Touch screens: each footer link is a comfortable target. */
@media (pointer: coarse) { .ftr ul { gap: 2px; } .ftr ul a { display: inline-block; padding-block: 7px; } }
.ftr ul a:hover { opacity: 1; color: var(--accent); }
.ftr .hours { margin-top: 16px; font-size: 14px; }
.ftr-mark { display: flex; justify-content: space-between; margin-top: clamp(48px, 6vw, 88px); padding-inline: var(--gutter); font-family: var(--western); font-size: clamp(64px, 17.5vw, 280px); line-height: 1.1; text-transform: uppercase; white-space: nowrap; user-select: none; }
.ftr-mark span { display: inline-block; color: #1f1d22; transition: transform .5s var(--ease), color .35s, text-shadow .35s; }
.ftr-legal { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 12px; padding-block: 24px 32px; border-top: 1px solid var(--line); background: var(--ink-2); color: var(--dust); font-size: 13px; }
.ftr-legal p { max-width: none; margin: 0; }

/* ---------- inner pages ---------- */
.section { padding-block: clamp(40px, 6vw, 80px); }
.page-head { padding-block: clamp(36px, 5vw, 64px) 0; }
.crumbs { color: var(--dust); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.crumbs a { color: var(--dust); text-decoration: none; }
.crumbs a:hover { color: var(--accent-hi); }
.listing-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 16px 0 24px; }
.listing-head h1, .section > h1, .narrow > h1, .checkout > h1, .prose h1 { margin: 12px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(46px, 6.4vw, 96px); line-height: .9; text-transform: uppercase; }
.listing-head .muted { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cat-tabs { display: flex; gap: 8px; margin: 0 0 20px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs a { flex: none; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--dust); transition: border-color .3s, color .3s; }
.cat-tabs a:hover { border-color: var(--bone); color: var(--bone); }
.cat-tabs a[aria-current] { border-color: var(--accent); color: var(--accent); background: rgba(255, 59, 66, .08); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 28px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.filters label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.filter-search { flex: 1 1 260px; }
.filter-check { flex-direction: row !important; align-items: center; min-height: 48px; }
/* On phones the search and sort fold away behind one button, so products
   start on the first screen. */
/* On computers the phone button and its checkbox are gone, so Tab never
   lands on something that can't be seen. */
.filter-toggle, .filter-toggle-input { display: none; }
@media (max-width: 720px) {
  .filter-toggle-input { display: block; }
  .filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-bottom: 18px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--ink-2); color: var(--bone); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .filter-toggle span::after { content: "+"; color: var(--accent); font-size: 18px; line-height: 1; }
  .filter-toggle-input:checked + .filter-toggle span::after { content: "−"; }
  .filter-toggle-input:focus-visible + .filter-toggle { outline: 2px solid var(--accent); outline-offset: 2px; }
  .filter-toggle-input:not(:checked) ~ .filters { display: none; }
}
/* Two products a row on phones. */
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid .card-body { gap: 6px; padding: 12px 12px 14px; }
  .grid .card-name { font-size: 14px; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .grid .card-brand { font-size: 10px; }
  .grid .price { font-size: 24px; }
  .grid .card-meta { gap: 6px; }
  .grid .card-meta .tag { font-size: 9px; padding: 3px 6px; }
  .grid .card-badge { display: none; }
  .grid .card-art > img { padding: 10px; }
  .grid .card-art.is-plate > img { padding: 12px; }
  .grid .gb-card .card-art > img { padding: 0; }
  .grid .gb-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .grid .avail { font-size: 10px; }
}
.empty { padding: 48px 24px; border: 1px dashed var(--line-2); border-radius: 14px; text-align: center; color: var(--dust); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 36px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--bone); text-decoration: none; transition: border-color .3s, color .3s; }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager a[rel="next"] { justify-self: end; }

.product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 24px; }
.product-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(70% 62% at 50% 38%, #2c2a2f 0%, #151418 58%, #0b0b0d 100%); }
.product-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 28px; }
.product-media .product-art { display: grid; place-items: center; width: 100%; height: 100%; }
.product-media .art { width: 84%; filter: drop-shadow(0 30px 22px rgba(0, 0, 0, .6)); }
.product-info { min-width: 0; }
.product-brand { margin: 0; color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.product-info h1 { margin: 10px 0 0; font-family: var(--display); font-weight: 800; font-stretch: 78%; font-size: clamp(30px, 2.7vw, 42px); line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; }
.product-price { margin: 20px 0 10px; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: clamp(38px, 3.4vw, 50px); line-height: 1; font-variant-numeric: tabular-nums; }
.product-stock { margin: 0; }
.buy { margin: 24px 0; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.buy > label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.buy-row { display: flex; gap: 10px; }
.buy-row input[type="number"] { flex: none; width: 96px; }
.buy-row .button { flex: 1; }
.buy-offline p { margin: 0 0 14px; }
.stock-alert { margin: 4px 0 14px; }
.stock-alert > label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.stock-alert input[type="email"] { flex: 1 1 auto; min-width: 0; }
.stock-alert .button { flex: none; }
.stock-alert .muted { margin: 10px 0 0; font-size: 14px; }
.stock-alert .notice { margin: 0 0 12px; }
.specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
.specs dt, .specs dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.specs dd { min-width: 0; overflow-wrap: anywhere; }
.specs dt { padding-right: 28px; color: var(--dust); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.product-desc { max-width: 72ch; }
.product-desc h2, .product-specs h2, .prose h2 { margin: 36px 0 10px; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 32px; line-height: 1; text-transform: uppercase; }
/* Under the photo and buying box: the write-up, and the specs. */
.product-more { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(8px, 1vw, 16px); border-top: 1px solid var(--line); }
.product-more > :only-child { grid-column: 1 / -1; max-width: 860px; }
.product-desc h2, .product-specs h2 { margin-top: 28px; }
.product-desc p { color: var(--dust); }
.more-specs { margin-top: 2px; }
.more-specs > summary { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--bone); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.more-specs > summary::-webkit-details-marker { display: none; }
.more-specs > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 16px; line-height: 1; transition: transform .3s var(--ease); }
.more-specs[open] > summary::after { transform: rotate(45deg); }
.more-specs > summary:hover { color: var(--accent-hi); }
.more-specs .specs { margin-top: 0; border-top: 0; }
.specs-tail { margin-top: 0; border-top: 0; }
/* Sports South's description line as a list. */
.highlights { margin: 26px 0 0; }
.highlights-h { margin: 0 0 10px; color: var(--dust); font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.highlights ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.highlights li { position: relative; padding-left: 20px; color: var(--bone); font-size: 15px; line-height: 1.45; }
.highlights li::before { content: ""; position: absolute; top: .62em; left: 2px; width: 8px; height: 1px; background: var(--accent); }
/* The photo stays in view beside the buying box on wide screens. */
@media (min-width: 901px) {
  .product > .product-media, .product > .gallery { position: sticky; top: calc(var(--hdr-h) + var(--tick-h) + 20px); }
  .crumbs .crumb-here > span { display: inline-block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}
@media (max-width: 900px) {
  .product-more { grid-template-columns: minmax(0, 1fr); }
  .crumbs .crumb-here { display: none; }
}
/* Distributor photos are shot on white: a light plate behind them, so the
   white disappears into it instead of sitting on the dark card as a box. */
.card-art.is-plate, .product-media.is-plate { background: #efece6; }
.card-art.is-plate > img, .product-media.is-plate > img { mix-blend-mode: multiply; }
.card-art.is-plate > img { padding: 22px 24px; }
.product-media.is-plate > img { padding: clamp(24px, 4vw, 48px); }
.card-art.is-plate .art, .product-media.is-plate .art { color: #8a847b; filter: none; }
.card-art.is-plate .card-badge { border-color: rgba(9, 9, 11, .14); background: rgba(9, 9, 11, .82); }
.product-media.is-plate { border-color: transparent; }
/* The store's own GunBroker photos fill their frame. */
.gb-card .card-art > img { padding: 0; object-fit: contain; }
.related { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.related h2 { margin: 0 0 22px; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; text-transform: uppercase; }
.prose { max-width: 860px; }
.prose p { color: var(--dust); }
.prose p a { color: var(--bone); }

/* ---------- cart ---------- */
.cart-lines { display: grid; gap: 1px; margin: 24px 0; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--line); }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px 20px; padding: 16px; background: var(--ink-2); }
.cart-thumb { display: grid; place-items: center; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: radial-gradient(#2c2a2f, #0b0b0d); }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-thumb .product-art { display: grid; place-items: center; width: 100%; height: 100%; }
.cart-thumb .art { width: 86%; }
.cart-desc { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 15px; }
.cart-name { font-weight: 600; text-decoration: none; }
.cart-qty { display: flex; gap: 8px; }
.cart-qty input[type="number"] { flex: none; width: 76px; }
.cart-qty .button { flex: none; }
.cart-line-total { min-width: 90px; text-align: right; font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 26px; }
.cart-summary { display: grid; gap: 10px; max-width: 420px; margin-left: auto; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.cart-summary p { margin: 0; }
.cart-subtotal { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 30px; text-transform: uppercase; }

/* ---------- forms + checkout ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input:not([type]), select, textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-2); color: var(--bone); transition: border-color .25s, box-shadow .25s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 59, 66, .18); }
input::placeholder, textarea::placeholder { color: rgba(168, 161, 154, .7); }
select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8a19a' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
textarea { min-height: 120px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent-fill); }
[aria-invalid="true"] { border-color: var(--accent) !important; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 16px; }
.field > label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.field-row-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.field-error { margin: 0; color: var(--accent-hi); font-size: 14px; }
fieldset { margin: 0 0 22px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
legend { padding: 0 8px; font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 24px; text-transform: uppercase; }
.choice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color .25s, background-color .25s; }
.choice:hover { border-color: var(--bone); }
.choice:has(input:checked) { border-color: var(--accent); background: rgba(255, 59, 66, .06); }
.choice input { margin-top: 3px; flex: none; }
.choice > span { display: flex; flex-direction: column; gap: 2px; }
.choice-inline { padding: 0; border: 0; background: none !important; }
.ship-address { margin-top: 12px; }
.steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: s; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; }
.steps li::before { content: counter(s, decimal-leading-zero); display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 11px; }
.steps li[aria-current]::before { border-color: var(--accent); background: var(--accent-fill); color: #fff; }
.steps li[aria-current] { color: var(--bone); }
.steps a { color: inherit; }
.checkout-form { margin-top: 24px; }
.checkout-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0; }
.review-panel, .panel { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.review-panel h2, .panel h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 28px; text-transform: uppercase; }
.review-panel h3, .panel h3 { margin: 18px 0 4px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.edit-link { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.summary-lines { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.summary-lines li { display: flex; justify-content: space-between; gap: 16px; }
.totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.totals dt { color: var(--dust); }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals .totals-grand { padding-top: 8px; color: var(--bone); font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 26px; text-transform: uppercase; }
.pay { max-width: 560px; }
.order-number { margin: 0; color: var(--accent); font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- range booking ---------- */
.range-top { padding-block: clamp(36px, 5vw, 64px) 0; }
.range-top .sec-title { margin-top: 18px; }
.range-top .lede { margin: 22px 0 0; }
.range-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; border-block: 1px solid var(--line); }
.range-facts li { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 18px 0; color: var(--dust); }
.range-facts li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.range-facts b { font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(34px, 3.4vw, 52px); line-height: .9; letter-spacing: 0; color: var(--bone); }
.range-facts li:first-child b { color: var(--accent); }
.range-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.range-jump a { padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dust); text-decoration: none; transition: border-color .3s, color .3s; }
.range-jump a:hover { border-color: var(--accent); color: var(--accent); }
.sec.range-book { padding-block: clamp(40px, 5vw, 80px); background: linear-gradient(var(--ink), var(--ink-2) 18%, var(--ink-2) 82%, var(--ink)); scroll-margin-top: calc(var(--hdr-h) + var(--tick-h)); }
#training, #classes, #lessons, #before { scroll-margin-top: calc(var(--hdr-h) + var(--tick-h) + 16px); }
.range-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.map-col { position: sticky; top: calc(var(--hdr-h) + var(--tick-h) + 16px); display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: top .45s var(--ease); }
/* When the site header slides away, the map (and its header) move up with it. */
html:has(.hdr.is-hidden) .map-col { top: 16px; }
/* The header attached to the lane map: says this is where lanes are picked,
   and what's left to pick. It travels with the map as the page scrolls. */
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 12px; background: linear-gradient(90deg, rgba(255, 59, 66, .1), rgba(15, 15, 18, .96) 46%); }
.mh-text { min-width: 0; }
.mh-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 59, 66, .18); }
.mh-title { margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(26px, 2.4vw, 34px); line-height: .95; text-transform: uppercase; color: var(--bone); }
.mh-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--dust); }
.mh-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.mh-need { padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; letter-spacing: .06em; white-space: nowrap; color: var(--bone); background: var(--ink); transition: border-color .3s, color .3s; }
.mh-need.is-done { border-color: rgba(91, 209, 127, .55); color: var(--go); }
#laneMap { scroll-margin-top: calc(var(--hdr-h) + var(--tick-h) + 96px); }
.mh-jump { display: none; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.js .nojs-only { display: none; }

/* the lane map: two rows of lanes until lanemap.js draws the 3D halls */
:root { --east: #e9b44c; --east-dim: rgba(233, 180, 76, .16); --west: #58b7e0; --west-dim: rgba(88, 183, 224, .16); }
.lane-map { --chip: 34px; position: relative; min-height: 380px; padding: 96px 18px 20px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(90% 70% at 50% 0%, rgba(255, 228, 196, .06), transparent 70%), #09090b; touch-action: manipulation; }
.lane-map canvas { display: none; }
.lane-map .brk { opacity: 1; transform: none; }
.lane-map.gl-on { aspect-ratio: 16 / 10; min-height: 0; padding: 0; background: #09090b; }
.lane-map.gl-on canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.hud { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 4px; color: var(--dust); pointer-events: none; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.hud b { font-weight: 700; color: var(--bone); }
.hud-tl { top: 18px; left: 20px; }
.hud-tl b { font-size: 13px; letter-spacing: .06em; }
.hud-tr { top: 16px; right: 20px; align-items: flex-end; gap: 2px; }
.hud-tr b { font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(34px, 4vw, 58px); line-height: .88; letter-spacing: 0; color: var(--accent); font-variant-numeric: tabular-nums; }
.lane-map[data-range="east"] .hud-tr span { color: var(--east); }
.lane-map[data-range="west"] .hud-tr span { color: var(--west); }
.map-far { display: none; }
.gl-on .map-far { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--east); pointer-events: none; opacity: 0; white-space: nowrap; transition: opacity .5s; }
.gl-on .map-far::after { content: ""; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, currentColor, transparent); }
.gl-on .map-far-west { color: var(--west); }
.gl-on .map-far.is-placed { opacity: 1; }
.halls { display: grid; grid-template-columns: 6fr 5fr; gap: 26px; align-items: end; }
fieldset.hall { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.hall-label { display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px; color: var(--dust); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.hall-label span:first-child { font-weight: 700; }
.hall-east .hall-label span:first-child { color: var(--east); }
.hall-west .hall-label span:first-child { color: var(--west); }
.map-chips { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; }
.lane-chip { position: relative; display: block; min-width: 0; cursor: pointer; }
.lane-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.lc-in { display: grid; place-items: end center; width: 100%; height: clamp(150px, 20vw, 240px); padding-bottom: 10px; border: 1.5px solid var(--east); border-radius: 6px 6px 10px 10px; background: linear-gradient(var(--east-dim), rgba(9, 9, 11, .85) 70%); color: var(--bone); font-family: var(--mono); font-size: 12px; font-weight: 700; transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--ease), box-shadow .4s, opacity .3s; }
.chip-west .lc-in { height: clamp(90px, 11vw, 140px); border-color: var(--west); background: linear-gradient(var(--west-dim), rgba(9, 9, 11, .85) 70%); }
.lane-map[data-range="east"] .hall-west .lane-chip:not(.is-taken) .lc-in, .lane-map[data-range="west"] .hall-east .lane-chip:not(.is-taken) .lc-in { opacity: .55; }
.lane-chip:hover .lc-in, .lane-chip.is-hover .lc-in { border-color: var(--accent); transform: translateY(-4px); opacity: 1; }
.lane-chip:has(input:checked) .lc-in { border-color: var(--accent); background: linear-gradient(rgba(255, 59, 66, .55), var(--accent-fill) 75%); color: #fff; box-shadow: 0 0 0 4px rgba(255, 59, 66, .2), 0 0 26px rgba(255, 40, 48, .6); opacity: 1; }
.lane-chip:has(input:focus-visible) .lc-in { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.lane-chip.is-taken { cursor: not-allowed; }
.lane-chip.is-taken .lc-in { border-color: rgba(239, 232, 220, .2); color: rgba(239, 232, 220, .4); background: repeating-linear-gradient(135deg, rgba(239, 232, 220, .09) 0 3px, rgba(9, 9, 11, .88) 3px 7px); transform: none; }
.gl-on .halls { position: absolute; inset: 0; z-index: 4; display: block; pointer-events: none; }
.gl-on fieldset.hall, .gl-on .map-chips { display: contents; }
.gl-on .hall-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gl-on .lane-chip { position: absolute; left: 0; top: 0; width: var(--chip); height: var(--chip); pointer-events: auto; will-change: transform; }
.lane-map.gl-wait .lane-chip, .lane-map.gl-wait .map-tip { visibility: hidden; }
.gl-on .lc-in { place-items: center; height: 100%; padding: 0; border-radius: 9px 9px 4px 4px; background: rgba(9, 9, 11, .85); font-size: max(9px, calc(var(--chip) * .3)); box-shadow: 0 8px 18px rgba(0, 0, 0, .55); }
.gl-on .chip-west .lc-in { height: 100%; background: rgba(9, 9, 11, .85); }
.gl-on .lane-chip:has(input:checked) .lc-in { background: var(--accent-fill); }
.map-tip { position: absolute; left: 0; top: 0; z-index: 5; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(15, 15, 18, .94); color: var(--bone); font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
.map-tip.is-on { opacity: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--dust); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 16px; height: 16px; border: 1.5px solid var(--east); border-radius: 5px 5px 2px 2px; background: var(--ink); }
.legend i.w { border-color: var(--west); }
.legend i.b { border-color: rgba(239, 232, 220, .2); background: repeating-linear-gradient(135deg, rgba(239, 232, 220, .12) 0 2px, var(--ink) 2px 5px); }
.legend i.y { border-color: var(--accent); background: var(--accent-fill); }

/* choosing a range */
fieldset.range-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; margin: 0 0 22px; padding: 0; border: 0; border-radius: 0; background: none; }
.range-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--ink); cursor: pointer; transition: border-color .3s, background-color .3s, box-shadow .4s; }
.range-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.range-card::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--east); }
.range-card-west::before { background: var(--west); }
.range-card:hover { border-color: var(--bone); }
.range-card:has(input:checked) { border-color: var(--east); background: linear-gradient(120deg, var(--east-dim), transparent 60%), var(--ink); box-shadow: 0 0 0 1px var(--east) inset; }
.range-card-west:has(input:checked) { border-color: var(--west); background: linear-gradient(120deg, var(--west-dim), transparent 60%), var(--ink); box-shadow: 0 0 0 1px var(--west) inset; }
.range-card:has(input:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.rc-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; color: var(--dust); }
.range-card-east .rc-top span:first-child { color: var(--east); }
.range-card-west .rc-top span:first-child { color: var(--west); }
.rc-name { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 28px; line-height: 1; text-transform: uppercase; }
.rc-blurb { color: var(--dust); font-size: 15px; }
.rc-price { margin-top: 4px; color: var(--dust); font-size: 14px; }
.rc-price b { margin-right: 6px; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: 30px; line-height: 1; color: var(--bone); }

/* the booking panel */
.booking { position: relative; display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 26px; border: 1px solid var(--line); background: var(--ink); }
.bk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.bk-head h2, .bk-title { margin: 0; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 36px; line-height: 1; text-transform: uppercase; }
.bk-head span { color: var(--dust); }
fieldset.bk-group { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
legend.bk-label { display: flex; justify-content: space-between; gap: 12px; width: 100%; margin: 0 0 10px; padding: 0; color: var(--dust); }
.bk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.day-chip > span { min-height: 44px; padding-inline: 2px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.slots-empty { grid-column: 1 / -1; margin: 0; color: var(--dust); font-size: 15px; }
.chip { position: relative; display: flex; min-width: 0; cursor: pointer; }
.chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.chip > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 46px; padding: 6px 4px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--bone); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-align: center; text-transform: uppercase; transition: border-color .3s, color .3s, background-color .3s; }
.chip > span b { font-size: 13px; font-weight: 700; }
.day-chip > span, .time-chip > span { color: var(--dust); }
.day-chip > span b, .time-chip > span b { color: var(--bone); }
.chip:hover > span { border-color: var(--bone); }
.chip:has(input:checked) > span, .chip:has(input:checked) > span b { border-color: var(--accent); color: var(--accent); background: rgba(255, 59, 66, .09); }
.chip:has(input:focus-visible) > span { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.chip:has(input:disabled) { cursor: not-allowed; }
.chip:has(input:disabled) > span { opacity: .4; border-color: var(--line-2); background: none; }
.chip:has(input:disabled) > span b { text-decoration: line-through; }
.pick { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.pick-n { min-width: 2ch; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: 60px; line-height: .85; color: var(--accent); font-variant-numeric: tabular-nums; }
.pick-k { margin: 0; color: var(--dust); }
.pick-t { margin: 6px 0 0; font-size: 15px; line-height: 1.4; }
.bk-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; margin: 0; }
.bk-total .mono { color: var(--dust); }
.bk-total b { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.bk-total > span:last-child { grid-column: 1 / -1; color: var(--dust); font-size: 14px; }
.bk-status { min-height: 1.4em; margin: -10px 0 0; color: var(--accent-hi); font-size: 15px; }
.lane-rule { margin: -6px 0 0; color: var(--dust); font-size: 14px; }
fieldset.rentals { display: flex; flex-direction: column; gap: 8px; }
.rental { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.rental label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; }
.rental label span { color: var(--dust); font-size: 13px; }
.rental-price { color: var(--bone); }
.rental select { min-height: 40px; padding: 6px 28px 6px 12px; background-position: right 10px center; }
.js .rental.is-elsewhere { display: none; }
.rental.is-out { opacity: .5; }
/* Renting needs a group of 2 or more; the permit question shows once a gun is picked. */
/* The permit question asks "you" or "your group", by the group's size. */
.rentals:not(.is-solo) .solo-only, .rentals.is-solo .group-only { display: none; }
.own-gun.is-blocked .hint { color: var(--accent); }
.rent-rule { margin: 0; }
.permit { display: grid; gap: 10px; margin: 4px 0 0; padding: 12px 14px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--ink-2); }
.permit[hidden] { display: none; }
.permit legend { float: left; width: 100%; margin: 0; padding: 0; color: var(--bone); font-size: 15px; }
.permit .hint { margin: 0; }
.addons .rental { grid-template-columns: minmax(0, 1fr) auto 72px; }
.lane-rule.is-short { color: var(--accent-hi); }
#laneSubmit.is-waiting { opacity: .55; }
/* The range rules (range page and policies page). */
.sec.range-rules { padding-block: clamp(48px, 6vw, 90px); border-top: 1px solid var(--line); }
.rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 0 0 24px; }
.rules-col { padding-top: 18px; border-top: 1px solid var(--line-2); }
.rules-col h3, .rules-col h4 { margin: 0 0 12px; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 24px; line-height: 1; text-transform: uppercase; }
.rules-col ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--dust); }
.rules-col li::marker { color: var(--accent); }
.policy-rules .rules-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
.policy-rules .rules-col { padding-top: 12px; }
@media (max-width: 900px) { .rules-grid { grid-template-columns: minmax(0, 1fr); } }
.bk-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; font-size: 15px; }
.bk-lines dt span { display: block; color: var(--dust); font-size: 13px; }
.bk-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.slots { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 300px; overflow: auto; padding-right: 2px; overscroll-behavior: contain; }
.time-chip .tc-open { font-size: 10px; }
/* Start times an hour at a time (range.js): the hours, then that hour's
   quarter-hours in one row. */
.hour-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.hour-bar[hidden] { display: none; }
.hour-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 44px; padding: 6px 2px; border: 1px solid var(--line-2); border-radius: 10px; background: none; color: var(--dust); font: 10px/1.2 var(--mono); letter-spacing: .04em; text-align: center; text-transform: uppercase; cursor: pointer; transition: border-color .3s, color .3s, background-color .3s; }
.hour-chip b { color: var(--bone); font-size: 13px; font-weight: 700; white-space: nowrap; }
.hour-chip:hover:not(:disabled) { border-color: var(--bone); }
.hour-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: rgba(255, 59, 66, .09); }
.hour-chip[aria-pressed="true"] b { color: var(--accent); }
.hour-chip:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.hour-chip:disabled { opacity: .4; cursor: not-allowed; }
.hour-chip:disabled b { text-decoration: line-through; }
.slots.by-hour { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: none; overflow: visible; padding-right: 0; }
.slots .time-chip[hidden] { display: none; }
.slots.by-hour .time-chip > span { padding-inline: 2px; }
.slots.by-hour .time-chip > span b { font-size: min(13px, 3.4vw); letter-spacing: 0; white-space: nowrap; }
.pick-n { flex-shrink: 0; font-size: clamp(30px, 3.4vw, 46px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.tk-east { border-color: var(--east); background: var(--east-dim); }
.tk-east .tk-n { color: var(--east); }
.tk-west { border-color: var(--west); background: var(--west-dim); }
.tk-west .tk-n { color: var(--west); }
.tk-n-sm { font-size: 28px !important; }
.shooters h2 .mono { color: var(--dust); }
.shooter-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.shooter-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink); }
.shooter-list li.is-signed { border-color: rgba(91, 209, 127, .4); }
.sh-n { color: var(--dust); }
.sh-name { flex: 1 1 auto; min-width: 120px; }
.sh-status { color: var(--dust); }
.is-signed .sh-status { color: var(--go); }
.sh-actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
.sh-link { flex: 1 1 220px; min-height: 40px !important; font-family: var(--mono); font-size: 12px !important; color: var(--dust) !important; }
.sh-send { display: flex; flex: 1 1 100%; gap: 8px; }
.sh-send input { min-height: 40px; }
.sh-send button { white-space: nowrap; }
.cancel-panel .inline-form { align-items: center; }

/* accounts */
.acct h1 { margin: 12px 0 0; }
.acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; align-items: start; }
.acct-grid .panel h2 { margin-top: 0; }
.acct-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 28px; }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.acct-actions form { margin: 0; }
.acct section + section { margin-top: 36px; }
.acct-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.acct-booking { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 18px; padding: 16px 18px; background: var(--ink-2); text-decoration: none; transition: background-color .3s; }
.acct-booking:hover { background: var(--ink-3); color: inherit; }
.ab-when { color: var(--bone); }
.ab-what { display: flex; flex-direction: column; min-width: 0; }
.ab-num { color: var(--dust); }
.acct-list-past .acct-booking { opacity: .7; }
/* The account page: what's coming up and everything that's theirs on the
   left, their details and links on the right (one column on phones). */
.acct-confirm { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin: 0 0 28px; padding: 18px 22px; border: 1px solid rgba(242, 184, 75, .45); border-left: 3px solid var(--warn); border-radius: 14px; background: var(--ink-2); }
.acct-confirm h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 22px; line-height: 1; text-transform: uppercase; }
.acct-confirm p { margin: 0; max-width: 62ch; color: var(--dust); }
.acct-confirm p b { color: var(--bone); font-weight: 600; overflow-wrap: anywhere; }
.acct-confirm form { margin: 0; }
.acct-title { margin: 10px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(52px, 7vw, 96px); line-height: .9; text-transform: uppercase; overflow-wrap: anywhere; }
.acct-sub { margin: 10px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.acct-main .train-h { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 14px; }
.acct-side > section + section { margin-top: 0; }
.acct-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(24px, 3vw, 44px); align-items: start; }
.acct-main { min-width: 0; }
.acct-side { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1025px) { .acct-side { position: sticky; top: calc(var(--hdr-h) + var(--tick-h) + 20px); } }
.acct-next { display: grid; gap: 8px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 59, 66, .08), transparent 55%), var(--ink-2); color: var(--bone); text-decoration: none; transition: border-color .3s, background-color .3s; }
.acct-next:hover { border-color: var(--accent); color: var(--bone); }
.acct-next-when { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; text-transform: uppercase; }
.acct-next-what { font-size: 17px; }
.acct-next-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 6px; }
.acct-flag { color: var(--warn); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.acct-ok { color: var(--go); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.acct-go { margin-left: auto; color: var(--accent); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.acct-list-after { margin-top: 12px; }
.acct-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 18px; padding: 16px 18px; background: var(--ink-2); color: var(--bone); text-decoration: none; transition: background-color .3s; }
.acct-row:hover { background: var(--ink-3); color: inherit; }
.ar-when, .ar-num { color: var(--dust); font-size: 12px; }
.ar-what { display: flex; flex-direction: column; min-width: 0; }
.ar-what b { overflow-wrap: anywhere; }
.acct-list > li { display: grid; background: var(--ink-2); }
.ar-track { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px 12px; color: var(--accent); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.acct-note { margin: 10px 0 0; font-size: 14px; }
.acct-past > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.acct-past > summary::-webkit-details-marker { display: none; }
.acct-past > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 24px; line-height: 1; }
.acct-past[open] > summary::after { content: "−"; }
.acct-past > summary .train-h { margin-bottom: 18px; }
.acct-panel h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 24px; line-height: 1; text-transform: uppercase; }
.acct-dl { display: grid; gap: 10px; margin: 0 0 18px; }
.acct-dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.acct-dl dt { color: var(--dust); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.acct-dl dd { margin: 0; overflow-wrap: anywhere; }
.acct-mini { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.acct-mini li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acct-mini li > span { display: flex; flex-direction: column; min-width: 0; }
.acct-mini li > a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 40px; color: var(--accent); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.acct-links { display: grid; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; }
.acct-links li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.acct-links li:last-child { border-bottom: 0; }
.acct-help { margin: 0; font-size: 14px; }
.badge-awaiting_ffl, .badge-awaiting_atf, .badge-check_delayed, .badge-req-new, .badge-req-contacted { border-color: rgba(242, 184, 75, .55); color: var(--warn); }
.badge-req-quoted, .badge-req-done { border-color: rgba(91, 209, 127, .5); color: var(--go); }
.badge-req-closed { color: var(--dust); }
@media (max-width: 960px) { .acct-layout { grid-template-columns: minmax(0, 1fr); } .acct-side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; } }
.acct-link { position: relative; }
.acct-dot { position: absolute; right: 9px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--go); }

/* waivers */
.waiver-page h1 { margin: 12px 0 0; }
.waiver-rules-box { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--ink-2); }
.waiver-rules-box p { margin: 0 0 8px; }
.waiver-rules-box p:last-child { margin: 0; color: var(--dust); }
.on-file { margin-bottom: 22px; }
.on-file summary { cursor: pointer; font-weight: 600; }
.on-file[open] summary { margin-bottom: 14px; }
.dob-label, .sig-label { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.dob-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr); gap: 8px; }
.seg-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-inline .chip > span { min-height: 44px; padding: 6px 14px; }
.waiver-sub { margin: 18px 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.waiver-form .waiver-text { max-height: 320px; color: var(--bone); }
.choice.agree { margin-top: 16px; }
.sig-field { margin-top: 16px; }
.sig-pad { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; background: #f4f1ec; touch-action: none; }
.sig-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 260; cursor: crosshair; }
.sig-line { position: absolute; left: 6%; right: 6%; bottom: 26%; height: 1px; background: rgba(20, 20, 20, .25); pointer-events: none; }
.sig-x { position: absolute; left: 6%; bottom: 28%; color: rgba(20, 20, 20, .35); font-size: 16px; pointer-events: none; }
.sig-tools { display: flex; align-items: center; gap: 14px; }
.sig-field.is-signed .sig-pad { border-color: var(--go); }
.js .minor-only:not(.is-on) { display: none; }
.js .waiver-form:not(.is-abroad) .not-us, .js .waiver-form.is-abroad .us-only { display: none; }
.signed-card { display: flex; align-items: center; gap: 18px; margin: 24px 0; padding: 22px; border: 1px solid rgba(91, 209, 127, .45); border-radius: 16px; background: rgba(91, 209, 127, .07); }
.signed-mark { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--go); color: var(--ink); font-size: 28px; font-weight: 900; }
.signed-card p { margin: 0; }
.sig-img { display: block; max-width: 420px; width: 100%; margin: 6px 0 14px; border-radius: 10px; background: #f4f1ec; }
.email-body { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; color: var(--dust); }


/* classes + lessons */
.sec.range-train { padding-block: clamp(64px, 8vw, 120px); }
.train-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.train-col { min-width: 0; }
.train-h { margin: 0 0 18px; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: clamp(30px, 3vw, 44px); line-height: 1; text-transform: uppercase; }
.weekly-list { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.weekly-note { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 12px; background: linear-gradient(90deg, rgba(255, 59, 66, .08), var(--ink-2) 50%); }
.weekly-note .wk-eyebrow { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.weekly-note b { font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.weekly-note span { color: var(--bone); font-size: 13px; }
.weekly-note p:last-child { margin: 4px 0 0; color: var(--dust); font-size: 15px; }
.class-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--line); }
.class-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px; background: var(--ink-2); transition: background-color .3s; }
.class-row:hover { background: var(--ink-3); }
.class-row.is-full > .cl-date, .class-row.is-full > .cl-info { opacity: .6; }
.cl-date { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border: 1px solid var(--line-2); border-radius: 12px; color: var(--dust); }
.cl-date span { font-size: 11px; }
.cl-date b { font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: 42px; line-height: .9; color: var(--bone); }
.cl-info h4 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 74%; font-size: 26px; line-height: 1; text-transform: uppercase; }
.cl-when { margin: 8px 0 0; color: var(--dust); }
.cl-notes { margin: 6px 0 0; color: var(--dust); font-size: 15px; }
.cl-seats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; color: var(--dust); }
.cl-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.cl-dots i { width: 9px; height: 12px; border-radius: 3px 3px 1px 1px; background: var(--bone); }
.cl-dots i.off { background: rgba(239, 232, 220, .15); }
.cl-bar { width: 120px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--bone); }
.cl-bar i { display: block; height: 100%; background: var(--steel); }
.cl-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; color: var(--dust); }
.cl-form select { width: 76px; }
.cl-form .notice { flex-basis: 100%; margin: 0 0 4px; padding: 10px 14px; font-size: 14px; }
.cl-wait { grid-column: 2 / -1; justify-content: flex-start; width: 100%; max-width: 520px; }
.cl-wait .wl-k { flex-basis: 100%; }
.cl-wait input[type="email"] { flex: 1 1 180px; min-width: 0; }
.cl-wait .hint { flex-basis: 100%; margin: 0; font-size: 13px; }
.lesson-panel { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); background: var(--ink-2); }
.lesson-panel > *:not(.ghost) { position: relative; }
.lesson-panel .ghost { position: absolute; right: -.06em; bottom: -.2em; font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: clamp(120px, 14vw, 220px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-2); pointer-events: none; user-select: none; }
.lesson-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 0 0 12px; color: var(--dust); }
.lesson-price b { font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: 64px; line-height: .9; color: var(--accent); }
.lesson-panel form { margin-top: 20px; }
.sec.range-before { padding-block: clamp(48px, 6vw, 90px); border-top: 1px solid var(--line); }
.before-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 28px; padding: 0; list-style: none; }
.before-grid li { padding-top: 18px; border-top: 1px solid var(--line-2); }
.before-grid .bf-n { color: var(--accent); }
.before-grid h3 { margin: 10px 0 6px; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 28px; line-height: 1; text-transform: uppercase; }
.before-grid p { margin: 0; color: var(--dust); }

/* booking checkout + confirmation */
.bk-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
.bk-layout .checkout-form { margin-top: 0; }
.bk-aside { position: sticky; top: calc(var(--hdr-h) + var(--tick-h) + 20px); min-width: 0; }
.bk-item-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tk-mark { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 92px; aspect-ratio: 1; border: 1px solid var(--accent); border-radius: 14px; background: rgba(255, 59, 66, .08); }
.tk-n { font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: 44px; line-height: .85; color: var(--accent); }
.tk-mark .mono { font-size: 10px; color: var(--dust); }
.bk-item-title { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 74%; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.bk-item-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--dust); }
.waiver-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; margin-top: 14px; }
.waiver-online { margin-top: 8px; }
.waiver:not(:has(input[value="online"]:checked)) .waiver-online { display: none; }
.waiver-text { max-height: 260px; margin-bottom: 18px; padding: 16px 18px; overflow: auto; border: 1px solid var(--line-2); border-radius: 12px; background: var(--ink); color: var(--dust); font-size: 15px; overscroll-behavior: contain; }
.waiver-text p { margin: 0 0 12px; }
.waiver-text p:last-child { margin-bottom: 0; }
.bk-confirm h1 { margin: 12px 0 0; }
.ticket { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin: 28px 0 20px; padding: 26px; border: 1px solid var(--line-2); border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 59, 66, .1), transparent 55%), var(--ink-2); }
.ticket .brk { opacity: 1; transform: none; }
.ticket .tk-mark { width: 120px; }
.ticket .tk-n { font-size: 58px; }
.tk-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 18px 0 0; }
.tk-facts dt { padding-top: 3px; color: var(--dust); }
.tk-facts dd { margin: 0; }
.tk-stub { align-self: stretch; display: flex; align-items: center; justify-content: center; padding-left: 20px; border-left: 1px dashed var(--line-2); color: var(--dust); writing-mode: vertical-rl; transform: rotate(180deg); }
.ticket.is-void { filter: grayscale(1); opacity: .6; }
.review-panel > .totals:first-child { padding-top: 0; border-top: 0; }

@media (max-width: 1100px) {
  .range-grid, .train-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: the map's header pins under the site header while the form
     below is filled in, with a link back up to the map. */
  .map-col { display: contents; }
  .map-head { position: sticky; top: calc(var(--hdr-h) + var(--tick-h) + env(safe-area-inset-top, 0px)); z-index: 6; padding: 10px 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); background: linear-gradient(90deg, rgba(60, 14, 16, .98), rgba(15, 15, 18, .98) 55%); transition: top .45s var(--ease); }
  html:has(.hdr.is-hidden) .map-head { top: env(safe-area-inset-top, 0px); }
  /* Out of the way once the booking summary is on screen (range.js): fades
     and lifts away, then comes back on scrolling up. It keeps its place, so
     nothing below moves. */
  .map-head { transition: top .45s var(--ease), opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear 0s; }
  .map-head.is-tucked { opacity: 0; transform: translateY(-16px); pointer-events: none; visibility: hidden; transition: top .45s var(--ease), opacity .3s var(--ease), transform .45s var(--ease), visibility 0s linear .3s; }
  /* Fields reached with the keyboard stop below the pinned headers. */
  html:has(.map-head) { scroll-padding-top: calc(var(--hdr-h) + var(--tick-h) + 84px); }
  .mh-sub { display: none; }
  .mh-title { font-size: 24px; }
  .mh-jump { display: block; }
  .range-grid > .lane-map { margin-top: -10px; }
  .range-grid > .legend { margin-top: -10px; }
}
@media (max-width: 900px) {
  .range-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .range-facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .bk-layout { grid-template-columns: minmax(0, 1fr); }
  .bk-aside { position: static; order: -1; }
  .before-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  fieldset.range-pick { gap: 8px; }
  .range-card { padding: 14px 14px 14px 18px; }
  .rc-name { font-size: 22px; }
  .rc-blurb { display: none; }
  .halls { gap: 12px; }
  .acct-grid { grid-template-columns: minmax(0, 1fr); }
  .acct-booking { grid-template-columns: minmax(0, 1fr) auto; }
  .acct-row { grid-template-columns: minmax(0, 1fr) auto; }
  .acct-row .ar-when { grid-column: 1 / -1; }
  .acct-row .ar-num { display: none; }
  .ab-num { display: none; }
  .rental { grid-template-columns: minmax(0, 1fr) 64px; }
  .rental-price { grid-row: 2; }
  .dob-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); }
  .lane-map { min-height: 300px; padding: 84px 10px 14px; }
  .lane-map.gl-on { aspect-ratio: 4 / 3; }
  .hud-tl { left: 14px; top: 14px; }
  .hud-tr { right: 14px; top: 12px; }
  .map-far { top: 64px; }
  .gl-on .map-far { display: none; }
  .map-chips { gap: 3px; }
  .lc-in { height: 130px; font-size: 10px; border-radius: 4px 4px 7px 7px; }
  .chip-west .lc-in { height: 80px; }
  .booking { padding: 18px; }
  .days { gap: 5px; }
  .day-chip > span { font-size: 10px; letter-spacing: .02em; }
  .day-chip > span b { font-size: 12px; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slots.by-hour { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hour-bar { gap: 5px; }
  .class-row { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .cl-date b { font-size: 34px; }
  .cl-form { grid-column: 1 / -1; }
  .cl-form .button { flex: 1; }
  .cl-wait { max-width: none; }
  .waiver-choices { grid-template-columns: minmax(0, 1fr); }
  .ticket { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px; }
  .tk-stub { justify-content: flex-start; padding: 14px 0 0; border-top: 1px dashed var(--line-2); border-left: 0; writing-mode: horizontal-tb; transform: none; }
}

/* ---------- staff pages ---------- */
body.admin { font-size: 16px; }
.admin-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); background: rgba(9, 9, 11, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.admin-brand { display: flex; align-items: center; gap: 12px; font-family: var(--western); font-size: 17px; text-transform: uppercase; text-decoration: none; }
.admin-brand img { width: 40px; }
.admin-brand span { padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--dust); }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.admin-nav a { color: var(--dust); text-decoration: none; }
.admin-nav a[aria-current] { color: var(--bone); box-shadow: inset 0 -1px var(--accent); }
.admin-nav form { margin: 0; }
.admin-nav .link-button { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.admin .flash { padding: 12px var(--gutter); }
.admin-main { max-width: 1240px; margin: 0 auto; padding: 32px var(--gutter) 80px; }
.admin-main h1 { margin: 8px 0 20px; font-family: var(--display); font-weight: 900; font-stretch: 66%; font-size: clamp(40px, 4.8vw, 64px); line-height: .95; text-transform: uppercase; }
.admin-main h2 { font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 26px; text-transform: uppercase; }
.admin-main > section { margin-top: 28px; }
.admin-main > .panel { margin-top: 20px; }
.admin-login { max-width: 420px; margin: 8vh auto 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.admin-login h1 { margin-top: 0; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); text-decoration: none; transition: border-color .3s; }
a.stat:hover { border-color: var(--accent); color: inherit; }
.stat-num { font-family: var(--display); font-weight: 900; font-stretch: 66%; font-size: 48px; line-height: 1; color: var(--bone); }
.stat-label { color: var(--dust); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { padding: 12px 14px; border-bottom: 1px solid var(--line-2); background: var(--ink-2); color: var(--dust); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.table a { color: var(--bone); }
/* Admin -> Sales tax: the kinds of items a holiday covers, with a top price each. */
.tax-items { min-width: 0; }
.tax-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tax-row .choice { flex: 1 1 auto; min-width: 0; margin: 0; }
.tax-cap { flex: 0 0 8rem; min-width: 0; }
.tax-cap input { width: 100%; }
.tax-head { padding: 0 0 8px; color: var(--dust); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tax-head span:first-child { flex: 1 1 auto; }
.tax-head span:last-child { flex: 0 0 8rem; white-space: nowrap; }
@media (max-width: 600px) {
  .tax-items { padding: 14px 12px; }
  .tax-cap, .tax-head span:last-child { flex-basis: 6.5rem; }
}
.badge { display: inline-block; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.badge-paid, .badge-completed, .badge-ready_for_pickup, .badge-shipped { border-color: rgba(91, 209, 127, .5); color: var(--go); }
.badge-payment_review, .badge-payment_unknown, .badge-pending_payment { border-color: rgba(242, 184, 75, .55); color: var(--warn); }
.badge-payment_failed, .badge-cancelled { border-color: rgba(255, 59, 66, .5); color: var(--accent-hi); }
.badge-confirmed { border-color: rgba(91, 209, 127, .5); color: var(--go); }
/* The Today page (store staff): the day's range customers, pickups and checks. */
.tag-warn { border-color: rgba(242, 184, 75, .55); color: var(--warn); }
.tag-ok { border-color: rgba(91, 209, 127, .5); color: var(--go); }
.waiver-table td:last-child { white-space: nowrap; }
.today-table td { vertical-align: top; }
.today-table td .tag { margin: 0 4px 4px 0; }
.today-table tr.is-checked-in td { opacity: .62; }
.today-table tr.is-checked-in td:last-child { opacity: 1; }
.today-table .inline-form { margin: 0; display: inline-flex; }
.today-search { margin: 12px 0 18px; }
.today-table a[href^="tel:"] { white-space: nowrap; }
/* On a phone, each booking or order is a card, so Check in is never off-screen. */
@media (max-width: 760px) {
  .today-table thead { display: none; }
  .today-table, .today-table tbody, .today-table tr, .today-table td { display: block; width: 100%; }
  .today-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .today-table td { padding: 3px 0; border: 0; }
  .today-table td:last-child { padding-top: 10px; }
  .today-none { display: none; }
  .stat-row.today-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .today-stats .stat { padding: 12px; }
  .today-stats .stat-num { font-size: 24px; }
  .today-stats .stat-label { font-size: 9px; }
}
.staff-actions .inline-form { margin: 0 6px 6px 0; display: inline-flex; }
/* A link to copy exactly as it is: never shown in capitals. */
.copy-field { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--ink-2); color: var(--bone); font-family: var(--mono); font-size: 13px; letter-spacing: 0; text-transform: none; }
.badge-requested { border-color: rgba(242, 184, 75, .55); color: var(--warn); }
.badge-declined { border-color: rgba(255, 59, 66, .5); color: var(--accent-hi); }
.badge-promo-sent { border-color: rgba(91, 209, 127, .5); color: var(--go); }
.badge-promo-sending { border-color: rgba(242, 184, 75, .55); color: var(--warn); }
.badge-promo-cancelled { border-color: rgba(255, 59, 66, .5); color: var(--accent-hi); }
/* Promo emails (staff). */
.promo-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.promo-grid > .admin-form { max-width: none; }
.promo-side { display: grid; gap: 16px; }
.promo-side .panel h2 { margin: 0 0 10px; font-size: 22px; }
.promo-side .panel form + form, .promo-side .panel p + form { margin-top: 10px; }
.promo-banner { display: block; width: 100%; margin: 0 0 10px; border-radius: 10px; }
.promo-products { margin: 0 0 18px; padding-left: 18px; }
.promo-add { max-width: 560px; margin-top: 18px; }
.weekly-admin { margin-top: 20px; }
.weekly-admin .order-head h2 { margin: 0; }
.class-cancel { margin-top: 20px; border-color: rgba(255, 59, 66, .35); }
.class-cancel h2 { margin-top: 0; }
.input-short { max-width: 160px; }
.admin-main section > .inline-form { margin-bottom: 16px; }
.promo-progress { height: 10px; margin: 18px 0 8px; overflow: hidden; border-radius: 99px; background: var(--ink-3); }
.promo-progress span { display: block; height: 100%; background: var(--accent-fill); transition: width .4s; }
@media (max-width: 960px) { .promo-grid { grid-template-columns: minmax(0, 1fr); } }
.stat-row-range { margin-top: 16px; }
.panel-alert { border-color: rgba(242, 184, 75, .45); }
.filter-tabs-sub { margin-top: -8px; }
.filter-tabs-sub a { padding: 6px 12px; font-size: 10px; }
.day-nav { gap: 8px; }
.day-nav .field input { min-height: 44px; }
.lane-grid { table-layout: fixed; }
.lane-grid th:first-child { width: 64px; }
.lane-grid tbody th { padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--dust); font-family: var(--mono); font-size: 12px; text-align: left; }
.lane-grid td { vertical-align: middle; }
.lg-cell a { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 44px; padding: 4px 10px; overflow: hidden; border: 1px solid rgba(91, 209, 127, .45); border-radius: 8px; background: rgba(91, 209, 127, .1); text-decoration: none; white-space: nowrap; }
.lg-cell a b { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; }
.lg-cell a span { overflow: hidden; text-overflow: ellipsis; color: var(--dust); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.lg-staff a { border-color: var(--line-2); background: rgba(239, 232, 220, .07); }
.lg-pending_payment a, .lg-payment_unknown a, .lg-payment_review a { border-color: rgba(242, 184, 75, .6); background: rgba(242, 184, 75, .12); }
.lg-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; color: var(--dust); }
.admin-main > .admin-grid { margin-top: 28px; }
.lg-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg-legend i { width: 14px; height: 14px; border: 1px solid; border-radius: 4px; }
.lg-k-confirmed { border-color: rgba(91, 209, 127, .6); background: rgba(91, 209, 127, .15); }
.lg-k-staff { border-color: var(--line-2); background: rgba(239, 232, 220, .1); }
.lg-k-check { border-color: rgba(242, 184, 75, .6); background: rgba(242, 184, 75, .15); }
.lg-k-lesson { border-color: rgba(88, 183, 224, .6); background: rgba(88, 183, 224, .15); }
.lg-k-class { border-color: rgba(200, 120, 255, .55); background: rgba(200, 120, 255, .14); }
.lg-lesson a { border-color: rgba(88, 183, 224, .55); background: rgba(88, 183, 224, .12); }
.lg-class a { border-color: rgba(200, 120, 255, .5); background: rgba(200, 120, 255, .12); }
.lg-block + .lg-block { margin-top: 18px; }
.lg-title { margin: 0 0 8px; }
.lg-east .lg-title { color: var(--east); }
.lg-west .lg-title { color: var(--west); }
.lane-grid { min-width: calc(64px + var(--cols, 38) * 26px); }
.lane-grid thead th { padding: 10px 2px; font-size: 10px; text-align: left; }
.lane-grid td { height: 52px; padding: 2px 1px; border-left: 0; }
.lane-grid td.lg-hour, .lane-grid th.lg-hour { border-left: 1px solid var(--line); }
.lane-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.lane-picks .choice-inline { min-width: 74px; margin: 0; }
.chip-sm > span { min-height: 38px; padding: 4px 10px; }
.rental-list { display: grid; gap: 14px; }
.rental-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 110px 110px auto 80px auto auto; align-items: end; gap: 10px; }
.rental-form .field { margin: 0; }
.rental-form label, .rental-form .dob-label { font-size: 10px; }
.bk-admin-desc { margin: 0 0 14px; color: var(--dust); }
.waiver-copy summary, .manual-status summary { cursor: pointer; color: var(--accent-hi); }
.manual-status[open] summary { margin-bottom: 16px; }
.waiver-copy .waiver-text { margin-top: 12px; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-tabs a { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--dust); }
.filter-tabs a[aria-current] { border-color: var(--accent); color: var(--accent); }
.order-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.inline-form .field { margin-bottom: 0; }
.inline-form .field-full { flex: 1 1 100%; }
/* The staff order page: items marked not available to sell again. */
.keep-out-h { margin: 0 0 6px; }
.kept-out { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.kept-out h3 { margin: 0 0 6px; }
.kept-out li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.field-grow { flex: 1 1 240px; }
.events { margin: 0; padding-left: 20px; }
.events li { margin-bottom: 12px; }
.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.admin-form { max-width: 860px; }
.admin-preview { max-width: 280px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); }

/* ---------- overlays ---------- */
.cursor { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .3s; }
html.has-cursor .cursor { opacity: 1; }
.c-dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); transition: opacity .2s; }
.c-box { position: absolute; left: 0; top: 0; width: 28px; height: 28px; }
.c-box i { position: absolute; width: 9px; height: 9px; border: 0 solid var(--bone); transition: border-color .3s; }
.c-box i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.c-box i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.c-box i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.c-box i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.cursor.is-locked .c-box i { border-color: var(--accent); }
.cursor.is-locked .c-dot { opacity: 0; }
.c-cross { position: absolute; left: 0; top: 0; width: 70px; height: 70px; margin: -35px 0 0 -35px; opacity: 0; color: var(--accent); transition: opacity .2s; }
.cursor.is-cross .c-cross { opacity: 1; }
.cursor.is-cross .c-box, .cursor.is-cross .c-dot { opacity: 0; }
.grain { position: fixed; inset: -8%; z-index: 90; will-change: transform; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -4%); } 60% { transform: translate(-3%, -3%); } 80% { transform: translate(4%, 4%); } 100% { transform: translate(0, 0); } }
.fly-dot { position: fixed; left: 0; top: 0; z-index: 80; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(255, 40, 48, .85); pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .cats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cat { min-height: 260px; padding: 18px; }
}
@media (max-width: 1180px) {
  .nav { display: none; }
  .hdr-actions { margin-left: auto; }
  .menu-wrap { display: block; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sec-head, .band, .story, .classes, .visit-grid, .product, .review-grid, .admin-grid { grid-template-columns: minmax(0, 1fr); }
  .story-sticky { z-index: 2; padding-bottom: 12px; }
  .group-svg { width: min(62vw, 340px); }
  .story-step { min-height: 0; }
  /* Phones held upright (site.js adds .is-full and holds it in place while
     you scroll): the target opens into a full-screen sheet of target paper,
     with the group readout and one step at a time at the bottom. */
  .story.is-full { display: block; position: relative; width: 100vw; height: 100vh; margin-inline: calc(50% - 50vw); }
  .story.is-full::before { content: ""; position: absolute; inset: 0; background-color: #ece5d6; background-image: linear-gradient(rgba(20, 20, 20, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 20, .07) 1px, transparent 1px); background-size: var(--gs, 40px) var(--gs, 40px); background-position: var(--gx, 0) var(--gy, 0); clip-path: var(--clip, none); }
  .story.is-full .story-visual, .story.is-full .story-sticky { position: absolute; inset: 0; display: block; padding: 0; background: none; }
  .story.is-full .group-svg { position: absolute; left: 50%; top: 0; max-width: none; transform-origin: 50% 0; will-change: transform; }
  .story.is-full .group-svg > rect:first-child, .story.is-full .group-svg > g:first-of-type { display: none; }
  /* The readout is on the sheet from the start: small under the small
     target, full size once the sheet fills the screen. */
  /* At the bottom, one column: the readout, then the steps. */
  .story.is-full .story-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
  .story.is-full .group-read { position: relative; flex-wrap: nowrap; transform-origin: 50% 0; color: #4a443a; }
  .story.is-full .group-read b { color: #b4161d; }
  /* The three steps share one spot, so it's as tall as the tallest. */
  .story.is-full .story-steps { display: grid; }
  .story.is-full .story-step { grid-area: 1 / 1; align-self: end; gap: 10px; padding: 0; border: 0; opacity: 0; transform: translateY(18px); transition: opacity .18s linear, transform .3s var(--ease); }
  /* The step leaving fades first, so two never show at once. */
  .story.is-full.is-open .story-step.is-on { opacity: 1; transform: none; transition: opacity .45s var(--ease) .2s, transform .6s var(--ease) .2s; }
  .story.is-full .story-step .eyebrow { color: #b4161d; }
  .story.is-full .story-step h3 { color: #141414; font-size: clamp(34px, 9.4vw, 48px); }
  .story.is-full .story-step p { color: #3d382f; }
  /* The sheet is as tall as the screen with the browser's bars hidden; the
     words stay clear of the bars when they show. */
  @supports (height: 100lvh) {
    .story.is-full { height: 100lvh; }
    .story.is-full .story-foot { bottom: calc(100lvh - 100svh + 28px + env(safe-area-inset-bottom, 0px)); }
  }
  /* Held in place: the paper reaches past the top and bottom of the screen. */
  .story.is-full.is-held::before { top: -20vh; bottom: -40vh; background-position: var(--gx, 0) calc(var(--gy, 0px) + 20vh); }
  .radar { max-width: 420px; }
  .ftr-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; }
  .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps-line { left: 34px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps-line i { transform-origin: top; transform: scaleY(var(--p, 1)); }
  .bstep { min-height: 68px; padding: 12px 0 0 96px; }
  .new-head { grid-template-columns: minmax(0, 1fr); }
  .new-note { align-items: flex-start; }
  .cart-line { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .cart-thumb { width: 80px; }
  .cart-qty { grid-column: 2 / -1; grid-row: 2; }
  .cart-remove { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
  .cart-line-total { grid-column: 3; grid-row: 1; }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --hdr-h: 64px; }
  .logo-sub { display: none; }
  .logo-word { font-size: 16px; }
  .logo-mark { width: 42px; }
  .hdr-book { display: none; }
  .hdr-bar { gap: 12px; }
  .hdr-actions { gap: 6px; margin-left: auto; }
  .hero { min-height: 0; }
  .hero-grid { order: 1; flex: none; padding-block: 32px 8px; }
  .hero-stage { position: relative; inset: auto; order: 2; height: 360px; margin-top: -8px; }
  .hero-photo { height: 300px; margin-top: 20px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 78%, transparent); }
  .hero-photo picture { -webkit-mask-image: none; mask-image: none; }
  .hero-photo img { object-position: 60% 34%; }
  .hero-art { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent); }
  .hero-shadow, .hero-bull, .hero-eyes { --bw: 92%; top: 0; }
  .hero-hud-wrap { order: 3; }
  .hero-hud, .hero-hud.has-4 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hero-hint, .scroll-cue { display: none; }
  .hero-ctas .button { flex: 1 1 auto; }
  .cat { min-height: 220px; padding: 16px; gap: 8px; }
  .cat-art { min-height: 80px; }
  .rail { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail-track .card { width: min(80vw, 320px); scroll-snap-align: start; }
  .ftr-top { grid-template-columns: minmax(0, 1fr); }
  .ftr-brand { flex-direction: column; }
  .field-row, .field-row-3 { grid-template-columns: minmax(0, 1fr); }
  .seats { padding: 14px; gap: 4px; }
  .seat { font-size: 9px; border-radius: 6px 6px 3px 3px; }
}
@media (max-width: 480px) {
  .hdr-search { display: none; }
  /* The name gets smaller, and on the narrowest phones goes onto two
     lines, so the account, cart and menu buttons always fit. */
  .logo { flex: 0 1 auto; min-width: 0; gap: 10px; }
  .logo-text { min-width: 0; }
  .logo-word { font-size: clamp(12px, 3.5vw, 15px); line-height: 1.08; }
  .logo-mark { width: clamp(34px, 10.5vw, 42px); }
  .hdr-bar { gap: 8px; }
}
@media (max-width: 379px) {
  .icon-btn { width: 40px; height: 40px; }
  .hdr-actions { gap: 4px; }
}
@media (max-width: 1023px) and (min-width: 721px) {
  .rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rail-track .card { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grain { display: none; }
}
@media (max-width: 900px) {
  .rental-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-grid { grid-template-columns: minmax(0, 1fr); }
  .halls { grid-template-columns: minmax(0, 1fr); }
}
.minor-hint { margin: 0 0 14px; }
/* Florida requires this notice in capitals, at least 5 points larger than
   the waiver text (15px, about 11pt). 23px is about 17pt. */
.statutory-notice { margin: 0 0 18px; padding: 16px 18px; border: 2px solid var(--bone); border-radius: 12px; background: var(--ink); color: var(--bone); font-size: 23px; line-height: 1.35; text-transform: uppercase; }
.statutory-notice p { margin: 0 0 12px; }
.statutory-notice p:last-child { margin-bottom: 0; }

/* ---------- 21+ question on the first visit ---------- */
.is-age-gated { overflow: hidden; }
.age-gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); background: rgba(9, 9, 11, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; touch-action: manipulation; transition: opacity .3s; }
.age-gate.is-done { opacity: 0; pointer-events: none; }
.age-note { margin: 18px 0 0; color: var(--bone); font-size: 15px; }
.age-card { position: relative; width: min(100%, 520px); padding: clamp(28px, 5vw, 44px); border: 1px solid var(--line-2); border-radius: 18px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); text-align: center; }
.age-card::before, .age-card::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--accent); }
.age-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.age-card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.age-bull { display: block; margin: 0 auto 14px; filter: drop-shadow(0 0 18px rgba(255, 59, 66, .35)); }
.age-card h2 { margin: 6px 0 12px; font-family: var(--display); font-weight: 900; font-stretch: 70%; font-size: clamp(34px, 7vw, 52px); line-height: .95; text-transform: uppercase; }
.age-card p { color: var(--dust); }
.age-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.age-actions .button { min-width: 140px; }

/* ---------- FFL dealer finder ---------- */
.ffl-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 22px 0 10px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.ffl-search .field { margin: 0; min-width: 130px; }
.ffl-search .field-grow { flex: 1 1 220px; }
.ffl-count { margin: 16px 0 8px; }
.ffl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ffl-card { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.ffl-card:hover { border-color: var(--line-2); }
.ffl-name { margin: 0; font-weight: 700; font-size: 18px; }
.ffl-sub { margin: 2px 0 0; font-size: 14px; }
.ffl-addr { margin: 6px 0; color: var(--dust); }
.ffl-meta { margin: 0; font-size: 12px; color: var(--dust); letter-spacing: .02em; }
.ffl-meta a { color: var(--bone); }
.ffl-card-us, .ffl-card-us:hover { border-color: rgba(91, 209, 127, .5); }
.ffl-us { margin: 10px 0 0; color: var(--bone); font-size: 14px; }
.ffl-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; flex: none; }
.ffl-miles { color: var(--accent); font-size: 14px; }
.ffl-chosen { border-color: var(--accent); }
.ffl-manual { margin-top: 22px; }
.ffl-manual summary { cursor: pointer; font-weight: 700; }
.nfa-panel { border-left: 3px solid var(--warn); }
@media (max-width: 640px) {
  .ffl-card { flex-direction: column; }
  .ffl-side { flex-direction: row; align-items: center; }
}

/* ---------- firearms on product and order pages ---------- */
.gun-options { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--ink-2); }
.gun-options-h { margin: 0 0 8px; color: var(--accent); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.gun-options ul { margin: 0 0 8px; padding-left: 18px; }
.gun-options li { margin: 6px 0; }
.gun-options li b { display: block; color: var(--bone); }
.gun-options .muted { margin: 0; font-size: 14px; }
.next-steps { margin: 0; padding-left: 20px; }
.next-steps li { margin: 8px 0; }
.firearm-terms ul li { margin: 6px 0; }
.preview-bar { margin-top: 16px; }

/* ---------- product photos ---------- */
.gallery { display: grid; gap: 12px; align-content: start; }
.gallery .product-media > img { padding: 0; }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.thumbs a { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--ink-2); }
.thumbs a[aria-current="true"] { border-color: var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- listing maker ---------- */
.listing-form .panel { margin-bottom: 18px; }
.title-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.title-row input { flex: 1 1 260px; min-width: 0; }
.photo-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.photo-grid li { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--ink-2); }
.photo-grid li:first-child { border-color: var(--accent); }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; }
.photo-tools button[value="remove"] { margin-left: auto; }
.photo-upload label.button { cursor: pointer; }
.upload-status { min-height: 1.4em; color: var(--dust); }
.hint-steps { margin: 10px 0; padding-left: 20px; color: var(--dust); }
.hint-steps li { margin: 4px 0; }
.refund-form { margin-top: 14px; }

/* ---------- policies ---------- */
.policy-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 26px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.policies h2 { scroll-margin-top: calc(var(--hdr-h) + var(--tick-h) + 16px); }

/* ---------- services, sell your gun, gunsmithing requests ---------- */
.svc h1 { max-width: 18ch; }
.svc-block { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 48px; align-items: start; padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--line); }
.svc-block h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: clamp(30px, 3vw, 42px); line-height: 1; text-transform: uppercase; }
.svc-copy p { margin: 0 0 12px; color: var(--dust); max-width: 60ch; }
.svc-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.svc-price { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.svc-price .mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.svc-price b { font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 54px; line-height: 1; color: var(--bone); }
.svc-price span:last-child { color: var(--dust); font-size: 14px; }
.svc-note { grid-column: 1 / -1; margin: 0; color: var(--dust); font-size: 15px; }
.svc-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rq-steps { list-style: none; margin: 26px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rq-steps li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.rq-steps .mono { color: var(--accent); font-size: 12px; }
.rq-steps b { font-size: 16px; }
.rq-steps li > span:last-child { color: var(--dust); font-size: 14px; }
.rq-form { max-width: 860px; }
.rq-form textarea { width: 100%; }
.rq-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 4px 0 14px; }
.rq-contact .label-text { width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.rq-contact .choice { margin: 0; }
.rq-layout { display: grid; grid-template-columns: minmax(0, 860px) minmax(260px, 1fr); gap: 0 32px; align-items: start; }
.rq-fine { margin-top: 24px; position: sticky; top: calc(var(--hdr-h) + var(--tick-h) + 20px); }
.rq-fine h2 { font-size: 24px; }
.rq-fine ul { margin: 0; padding-left: 20px; color: var(--dust); }
.rq-fine li { margin: 6px 0; }
.rq-photos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rq-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-3); }
.request-page .panel { margin-top: 18px; }
.pre { white-space: pre-wrap; }
/* A field people can't see, for catching form-filling bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ftr-links a { color: inherit; }
.legal h2 { margin-top: 34px; }
.legal h3 { margin: 18px 0 6px; font-size: 16px; }
.legal ul { color: var(--dust); }
.legal li { margin: 6px 0; }
@media (max-width: 1100px) {
  .rq-layout { grid-template-columns: 1fr; }
  .rq-fine { position: static; max-width: 860px; }
}
@media (max-width: 860px) {
  .svc-block { grid-template-columns: 1fr; }
  .rq-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .svc-prices { grid-template-columns: 1fr; }
  .rq-steps { grid-template-columns: 1fr; }
}

/* ---------- lighter effects for slower devices (html.lite, set by site.js) ---------- */
html.lite .grain { display: none; }
html.lite .hdr.is-scrolled, html.lite .page-plain .hdr { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(9, 9, 11, .97); }
html.lite .hero-title .reveal { animation: none; }
html.lite .hero-eyes { animation: eyesOn 1.3s steps(1, end) .35s both; }
html.lite .age-gate { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(9, 9, 11, .96); }

/* ---------- gift cards ---------- */
.gift-box { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.gift-box > summary { cursor: pointer; color: var(--bone); font-weight: 600; }
.gift-box > summary::marker { color: var(--accent); }
.gift-form { margin-top: 12px; }
.gift-form label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.gift-form input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.gift-form .button { flex: none; }
.gift-totals { margin-top: 0; padding-top: 0; border-top: 0; }
.gift-box .hint { margin: 8px 0 0; }
.gc-code-shown { margin: 12px 0; font-size: clamp(22px, 4vw, 34px); font-weight: 700; letter-spacing: .08em; color: var(--bone); user-select: all; }
.gc-top { padding-top: calc(var(--hdr-h) + var(--tick-h) + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); background: radial-gradient(70% 90% at 80% 30%, #1f1d21 0%, var(--ink) 70%); }
.gc-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 7vw, 96px); }
.gc-hero h1 { margin: 12px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(48px, 7vw, 104px); line-height: .9; text-transform: uppercase; }
.gc-hero .lede { max-width: 54ch; }
.gc-points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0; padding: 0; list-style: none; color: var(--bone); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.gc-points li::before { content: "◆ "; color: var(--accent); }
.gc-figure { position: relative; margin: 0; padding: clamp(14px, 2vw, 22px); }
.gc-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 2px 14px; aspect-ratio: 1.586; padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #1b1a1e 0%, #0d0d10 55%, #2a0a0d 100%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
.gc-card::after { content: ""; position: absolute; inset: auto -20% -60% 30%; height: 120%; background: radial-gradient(closest-side, rgba(200, 20, 28, .35), transparent); pointer-events: none; }
.gc-card img { grid-row: 1 / 3; width: 52px; height: auto; }
.gc-name { align-self: end; font-family: var(--display); font-weight: 900; font-stretch: 70%; font-size: clamp(20px, 2.4vw, 28px); line-height: 1; text-transform: uppercase; color: var(--bone); }
.gc-sub { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.gc-amount { grid-column: 1 / -1; align-self: center; font-family: var(--display); font-weight: 900; font-stretch: 64%; font-size: clamp(54px, 8vw, 96px); line-height: 1; color: var(--accent); }
.gc-code { grid-column: 1 / -1; font-size: clamp(11px, 1.4vw, 14px); letter-spacing: .14em; color: rgba(239, 232, 220, .55); }
.review-panel .gc-card { max-width: 380px; margin-bottom: 16px; }
.gc-amounts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gc-to { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.gc-chip > span { min-height: 52px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.gc-amounts .gc-chip > span { font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 22px; }
.gc-other { margin-top: 12px; max-width: 320px; }
.gc-other[hidden], .gc-recipient[hidden] { display: none; }
.gc-balance { max-width: 520px; }
.gc-balance input { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.gc-result { margin-top: 24px; }
.gc-left b { font-family: var(--display); font-weight: 900; font-stretch: 70%; font-size: 40px; color: var(--accent); }
@media (max-width: 900px) {
  .gc-hero { grid-template-columns: minmax(0, 1fr); }
  .gc-figure { max-width: 460px; }
}
@media (max-width: 600px) {
  .gc-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gc-to { grid-template-columns: minmax(0, 1fr); }
}
.gc-link { display: inline-flex; align-items: center; gap: 8px; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.gc-link:hover { color: var(--accent-hi); border-color: currentColor; }
.gc-link svg { width: 16px; height: 16px; }
.gc-to .gc-chip > span { font-family: var(--body); font-size: 15px; }