/* =====================================================================
   NORTHERN STICKS: site.css (shared foundation for every page)
   Bold modern, same brand: dark Spruce/Olive grounds, Snow text, Blaze
   orange for accents. Big Archivo display type (wdth axis), rounded media
   tiles, bento grids, rails, marquee bands, bold camo sections, grain.
   Motion is driven by site.js (Lenis + GSAP when loaded, IO fades when not,
   nothing at all with reduced motion).
   Fonts: one Google Fonts <link> per page:
     family=Archivo:wdth,wght@62..125,100..900&family=JetBrains+Mono:wght@400;600&display=swap
   Page CSS loads after this file. Reference: docs/FOUNDATION-API.md
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;

  /* Brand palette (same names and values as brand/palette-tokens.css) */
  --ns-olive: #454B1B;
  --ns-blaze: #FF671F;
  --ns-shadow: #262A14;
  --ns-moss: #6F6D3F;
  --ns-bark: #5A4630;
  --ns-drygrass: #A39B72;
  --ns-snow: #F7F5EE;
  --ns-blackspruce: #1F2114;
  --ns-fieldstone: #C8BE9C;
  --ns-granite: #6B6C5E;
  --ns-lake: #3E6A7D;
  --ns-ember: #B8460B;
  --ns-rink: #11161A;
  --ns-ice: #9FC3D1;
  --ns-course: #1A1D0F;

  /* Page tokens (dark ground). .on-light / .tile--snow / .section--snow redefine these. */
  --bg: #1F2114;
  --bg-2: #262A14;
  --bg-deep: #16180E;
  --surface: rgba(247, 245, 238, 0.045);
  --surface-2: rgba(247, 245, 238, 0.08);
  --fg: #F7F5EE;
  --fg-invert: #1F2114;           /* text on a --fg fill (button wipes) */
  --muted: #C8BE9C;
  --dim: #A39B72;
  --accent: #FF671F;
  --accent-hover: #FF7D3D;
  --on-accent: #1F2114;           /* text on Blaze */
  --line: rgba(247, 245, 238, 0.13);
  --line-strong: rgba(247, 245, 238, 0.32);
  --line-input: rgba(247, 245, 238, 0.42); /* form field edges: 3:1 or better on every ground (WCAG 1.4.11) */
  --ok: #9FC3D1;
  --error: #FF8A50;
  --stage: radial-gradient(120% 95% at 50% 32%, #FFFFFF 0%, #F7F5EE 52%, #E9E5D6 100%);

  /* Type */
  --font-main: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-display-xl: clamp(3.25rem, 10.5vw, 11.5rem);  /* hero */
  --fs-display-l: clamp(2.6rem, 6vw, 6.5rem);        /* section titles */
  --fs-display-m: clamp(2rem, 4.2vw, 4.25rem);       /* sub-sections, big tiles */
  --fs-h1: clamp(2.4rem, 5.4vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 3.8vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-h4: 1.1rem;
  --fs-lede: clamp(1.08rem, 1.5vw, 1.35rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* Space and shape */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1280px;
  --maxw-narrow: 820px;
  --space-section: clamp(72px, 9vw, 144px);
  --space-section-sm: clamp(48px, 6vw, 96px);
  --space-block: clamp(24px, 3vw, 48px);
  --section-pad: var(--space-section);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-media: clamp(16px, 1.7vw, 24px);  /* tiles, photos, stages, rails */
  --radius-xl: 24px;
  --radius-pill: 999px;
  --header-h: calc(clamp(56px, 6.6vw, 100px) + 24px);

  /* Motion and layers */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wipe: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-reveal: 600ms;
  --z-grain: 45;
  --z-header: 50;
  --z-drawer: 80;
  --z-toast: 90;
}

/* ---------- 2. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background-color: #1F2114; scrollbar-color: #6F6D3F #1F2114;
  /* In-page anchors clear the sticky header at every width: header height (logo + 24px) plus 16px air.
     NS.scrollTo uses the same offset. No CSS smooth scrolling: Lenis (when loaded) or site.js glides
     link clicks, and a page opened at #section jumps straight there. */
  scroll-padding-top: calc(clamp(56px, 6.6vw, 100px) + 40px);
  overflow-x: clip;
}
body {
  margin: 0; min-height: 100vh;
  background-color: var(--bg); color: var(--fg);
  font-family: var(--font-main); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip;
}
/* Grain: tiny SVG noise over the page (not over the header, drawer or toasts) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media print, (forced-colors: active) { body::before { display: none; } }
html.cart-open { overflow: hidden; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
/* :where() keeps this reset at zero specificity, so a component's own list padding always wins */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
/* Pre-launch / full-catalogue content (FOUNDATION-API.md 1a). Builds strip the losing side from
   the HTML; these rules make the dev server (unstripped HTML) show the right one too.
   site.js adds html.is-prelaunch when window.NS_PRELAUNCH === true. */
html.is-prelaunch [data-full-only] { display: none !important; }
html:not(.is-prelaunch) [data-prelaunch-only] { display: none !important; }
/* Nothing to buy before the shop opens, so the header cart button stays out of the way */
html.is-prelaunch .cart-btn { display: none !important; }
::selection { background: #FF671F; color: #1F2114; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #FF671F; outline-offset: 3px; border-radius: 4px; }
main:focus, [tabindex="-1"]:focus { outline: none; }

/* Lenis smooth scroll (classes added by Lenis itself) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 3. Type ---------- */
h1, h2, h3, h4 { font-weight: 750; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.h1 { font-size: var(--fs-h1); font-weight: 850; font-stretch: 88%; line-height: 0.98; letter-spacing: -0.025em; }
.h2 { font-size: var(--fs-h2); font-weight: 800; font-stretch: 90%; line-height: 1.02; letter-spacing: -0.02em; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; }
.h4 { font-size: var(--fs-h4); line-height: 1.3; }

/* Display type: big, tight, condensed by default, uppercase via CSS (write sentence case in the HTML) */
.display-xl, .display-l, .display-m {
  font-family: var(--font-main); font-weight: 850; font-stretch: 78%;
  line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance;
  overflow-wrap: break-word;
}
.display-xl { font-size: var(--fs-display-xl); line-height: 0.86; letter-spacing: -0.025em; }
.display-l { font-size: var(--fs-display-l); }
.display-m { font-size: var(--fs-display-m); line-height: 0.94; }
.display--condensed { font-stretch: 62%; letter-spacing: -0.01em; }
.display--expanded { font-stretch: 125%; letter-spacing: -0.035em; }
.display--case { text-transform: none; }       /* keep sentence case */
/* Mix widths inside one headline: <h2 class="display-l"><span class="t-cond">Sell us</span> <span class="t-wide">your gear</span></h2> */
.t-cond { font-stretch: 62%; }
.t-wide { font-stretch: 125%; }
.t-accent { color: var(--accent); }
.t-muted { color: var(--muted); }

.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); max-width: 48ch; }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.mono, .price { font-family: var(--font-mono); letter-spacing: 0; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 1.6em; height: 2px; background: #FF671F; }
.eyebrow--plain::before { display: none; }
/* Pill label: <span class="pill"><span class="pill__dot" aria-hidden="true"></span>Pickup in Beaverton</span> */
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: rgba(31, 33, 20, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); white-space: nowrap;
}
.pill__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF671F; }
@media (max-width: 420px) { .pill { max-width: 100%; white-space: normal; padding-block: 6px; } }
.label { display: inline-block; font-size: 0.9rem; font-weight: 600; color: var(--fg); }

/* Running text (policies, longer copy) and inline text links */
.prose { max-width: 68ch; color: var(--muted); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { color: var(--fg); margin-top: 1.8em; }
.prose h2 { font-size: var(--fs-h3); }
.prose h3 { font-size: var(--fs-h4); }
.prose strong { color: var(--fg); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose a, .text-link, .check a, .cart-agree a, .cart-drawer__legal a {
  color: var(--fg); text-decoration: underline; text-decoration-color: rgba(255, 103, 31, 0.75); text-underline-offset: 3px;
}
.prose a:hover, .text-link:hover, .check a:hover, .cart-agree a:hover, .cart-drawer__legal a:hover { color: #FF671F; }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--maxw-narrow); }
.container--wide { max-width: 1600px; }
.section { position: relative; padding-block: var(--section-pad); }
.section--tight { padding-block: var(--space-section-sm); }
.section--flush { padding-block: 0; }
.section--alt { background-color: var(--bg-2); }
.section--deep { background-color: var(--bg-deep); }
.section--olive { background-color: #454B1B; --dim: var(--muted); } /* Dry Grass is under 4.5:1 on Olive */
.section--blaze { background-color: #FF671F; color: #1F2114; --fg: #1F2114; --muted: #1F2114; --dim: #1F2114; --line: rgba(31, 33, 20, 0.2); --line-strong: rgba(31, 33, 20, 0.5); --fg-invert: #F7F5EE; --btn-primary-bg: #1F2114; --btn-primary-fg: #F7F5EE;  --btn-primary-wipe: #F7F5EE; --btn-primary-wipe-fg: #1F2114; }
.section__head { display: grid; gap: 12px; max-width: 64ch; margin-bottom: clamp(28px, 3.6vw, 52px); }
/* Title left, link or rail buttons right */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 3.6vw, 52px); }
.section-head__text { display: grid; gap: 14px; max-width: 760px; }
.stack > * + * { margin-top: var(--stack, 1rem); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.grid, .grid-2, .grid-3 { display: grid; gap: var(--gap, clamp(16px, 2vw, 24px)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.products-grid { display: grid; gap: clamp(14px, 1.8vw, 24px) clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (max-width: 560px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; } }
.rule { height: 1px; border: 0; margin: 0; background: var(--line); }
.sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200; transform: translateY(-200%);
  padding: 10px 16px; border-radius: var(--radius-sm); background: #FF671F; color: #1F2114; font-weight: 700;
}
.skip-link:focus-visible { transform: none; }

/* Light ground scope: Snow panels with dark text (also .section--snow, .tile--snow) */
.on-light, .section--snow, .tile--snow {
  --fg: #1F2114; --fg-invert: #F7F5EE; --muted: #4A4630; --dim: #5E5F52;
  --line: rgba(31, 33, 20, 0.14); --line-strong: rgba(31, 33, 20, 0.4); --line-input: rgba(31, 33, 20, 0.5);
  --surface: rgba(31, 33, 20, 0.04); --surface-2: rgba(31, 33, 20, 0.08);
  --ok: #2F5B6B; --error: #A33D09;  /* form messages stay 4.5:1+ on Snow */
  color: var(--fg);
}
.on-light ::placeholder, .section--snow ::placeholder, .tile--snow ::placeholder { color: #6B6C5E; }
.section--snow { background-color: #F7F5EE; }

/* ---------- 5. Media: photos, scrims, hero, cut-outs, stage ---------- */
.photo { position: relative; overflow: hidden; border-radius: var(--radius-media); background-color: var(--bg-2); }
.photo > img, .photo > video { width: 100%; height: 100%; object-fit: cover; }
.photo--scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 22, 12, 0) 40%, rgba(20, 22, 12, 0.6)); }
/* Absolutely fill the parent: <img class="media-cover" …> */
.media-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrims for text over media (add to the media box; it needs position: relative) */
.scrim-bottom::after, .scrim-full::after, .scrim-left::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.scrim-bottom::after { background: linear-gradient(180deg, rgba(20, 22, 12, 0) 0%, rgba(20, 22, 12, 0.2) 35%, rgba(20, 22, 12, 0.78) 62%, rgba(20, 22, 12, 0.9) 100%); }
.scrim-full::after { background: rgba(20, 22, 12, 0.62); }
.scrim-left::after { background: linear-gradient(90deg, rgba(20, 22, 12, 0.9) 0%, rgba(20, 22, 12, 0.72) 45%, rgba(20, 22, 12, 0.25) 100%); }

/* Full-screen hero: media layer + scrim + content at the bottom */
.hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh; overflow: hidden; background-color: #11161A;
  padding-block: clamp(40px, 6vw, 96px) clamp(36px, 5vw, 80px);
}
.hero--short { min-height: min(72vh, 760px); min-height: min(72svh, 760px); }
.header-overlay main > .hero:first-child { padding-top: calc(var(--header-h) + 32px); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: #11161A; }
.hero__media > video, .hero__media > img, .hero__media > picture > img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::after {
  background:
    linear-gradient(180deg, rgba(15, 16, 10, 0.62) 0%, rgba(15, 16, 10, 0.2) 22%, rgba(15, 16, 10, 0.5) 40%, rgba(15, 16, 10, 0.76) 60%, rgba(15, 16, 10, 0.88) 80%, rgba(15, 16, 10, 0.94) 100%),
    linear-gradient(90deg, rgba(15, 16, 10, 0.55) 0%, rgba(15, 16, 10, 0) 70%);
}
.hero--no-scrim::after { display: none; }
.hero__content { position: relative; z-index: 1; display: grid; gap: clamp(16px, 2vw, 28px); }
.hero__content .lede { color: #E9E4D2; } /* a touch brighter than --muted over video */

/* Video-background section (owner, 2026-10-13: "more videos as backgrounds like the hero").
   Markup: <section class="vbg [vbg--left|vbg--strong]"><div class="vbg__media"><video data-loop-video
   muted loop playsinline preload="none" aria-hidden="true" data-src-wide=… data-src-tall=…
   data-poster-wide=… data-poster-tall=…></video></div><div class="container vbg__content">…</div></section>
   NS.loopVideo plays it only in view and never with reduced motion (the poster stays). */
.vbg { position: relative; isolation: isolate; overflow: hidden; background-color: #11161A; color: var(--fg); padding-block: var(--space-section); }
.vbg__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: #11161A; }
.vbg__media > video, .vbg__media > img { width: 100%; height: 100%; object-fit: cover; }
.vbg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 16, 10, 0.78) 0%, rgba(15, 16, 10, 0.55) 35%, rgba(15, 16, 10, 0.62) 65%, rgba(15, 16, 10, 0.86) 100%); }
.vbg--left::after { background: linear-gradient(90deg, rgba(15, 16, 10, 0.92) 0%, rgba(15, 16, 10, 0.74) 45%, rgba(15, 16, 10, 0.3) 100%); }
.vbg--strong::after { background: rgba(15, 16, 10, 0.78); }
@media (max-width: 760px) { .vbg--left::after { background: linear-gradient(180deg, rgba(15, 16, 10, 0.72), rgba(15, 16, 10, 0.88)); } }
.vbg__content { position: relative; z-index: 1; }
.vbg .lede, .vbg p { color: #E9E4D2; }

/* Stage: a light Snow panel for white-background product photos */
.stage {
  position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-media); background: var(--stage); color: #1F2114;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 40px 80px -42px rgba(0, 0, 0, 0.75), 0 14px 28px -16px rgba(0, 0, 0, 0.45);
}
.stage > img, .stage__img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: scale 800ms var(--ease-out); }
a.stage:hover > img, .stage--zoom:hover > img { scale: 1.04; }
.stage--square { aspect-ratio: 1 / 1; }
.stage--tall { aspect-ratio: 4 / 5; }
.stage--wide { aspect-ratio: 16 / 10; }
/* Small mono label pinned to a corner of a stage or tile */
.stage__tag { position: absolute; left: 16px; top: 16px; z-index: 1; }

/* Cut-out people: positioned inside a .tile / .camo-section / any position:relative box.
   .cutout--breakout lets it rise above the top edge of its box. */
.cutout {
  position: absolute; z-index: 2; bottom: 0; right: 4%;
  width: var(--cutout-w, auto); height: var(--cutout-h, 96%); max-width: none;
  object-fit: contain; object-position: bottom center; pointer-events: none;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.45));
}
.cutout--left { right: auto; left: 4%; }
.cutout--center { right: auto; left: 50%; translate: -50% 0; }
.cutout--breakout { height: var(--cutout-h, 122%); }
.cutout--inline { position: relative; inset: auto; width: 100%; height: auto; translate: none; }

/* ---------- 6. Camo (drawn by NS.drawCamo / NS.camoAll) ---------- */
canvas.camo { display: block; width: 100%; height: 100%; background-color: #454B1B; }
.camo-panel, .camo-strip { position: relative; overflow: hidden; background-color: #454B1B; }
.camo-panel { border-radius: var(--radius-media); }
.camo-strip { height: 8px; }
.camo-panel > canvas.camo, .camo-strip > canvas.camo { position: absolute; inset: 0; }
/* Bold camo section: full-bleed camo background + dark gradient for legibility.
   <section class="camo-section" data-camo="7"> site.js adds the canvas. */
.camo-section { position: relative; isolation: isolate; overflow: hidden; background-color: #454B1B; color: var(--fg); padding-block: var(--space-section); }
.camo-section > canvas.camo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.camo-section::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(31, 33, 20, 0.74) 0%, rgba(31, 33, 20, 0.66) 45%, rgba(31, 33, 20, 0.84) 100%);
}
.camo-section--side::after { background: linear-gradient(90deg, rgba(31, 33, 20, 0.9) 0%, rgba(31, 33, 20, 0.72) 50%, rgba(31, 33, 20, 0.32) 100%); }
.camo-section--strong::after { background: rgba(31, 33, 20, 0.8); }
@media (max-width: 760px) { .camo-section--side::after { background: linear-gradient(180deg, rgba(31, 33, 20, 0.72), rgba(31, 33, 20, 0.86)); } }

/* ---------- 7. Buttons and links (fill-wipe hover) ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--line-strong);
  --btn-wipe: var(--fg); --btn-wipe-fg: var(--fg-invert);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 1.45em;
  border: 1px solid var(--btn-bd); border-radius: var(--radius-pill);
  background-color: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.95rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: color var(--dur) var(--ease-wipe), border-color var(--dur) var(--ease-wipe);
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--btn-wipe); transform: scaleX(0); transform-origin: right center;
  transition: transform 460ms var(--ease-wipe);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn:hover, .btn:focus-visible { color: var(--btn-wipe-fg); border-color: var(--btn-wipe); }
.btn__arrow { display: inline-block; font-family: var(--font-mono); font-weight: 400; transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary { --btn-bg: var(--btn-primary-bg, #FF671F); --btn-fg: var(--btn-primary-fg, #1F2114); --btn-bd: var(--btn-primary-bg, #FF671F); --btn-wipe: var(--btn-primary-wipe, var(--fg)); --btn-wipe-fg: var(--btn-primary-wipe-fg, var(--fg-invert)); }
.btn--secondary, .btn--ghost { --btn-bd: var(--line-strong); }
.btn--light { --btn-bg: #F7F5EE; --btn-fg: #1F2114; --btn-bd: #F7F5EE; --btn-wipe: #FF671F; --btn-wipe-fg: #1F2114; }
.btn--sm { min-height: 40px; padding: 0 1.1em; font-size: 0.875rem; }
.btn--lg { min-height: 58px; padding: 0 1.9em; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"]:not(.is-locked) { opacity: 0.45; pointer-events: none; }
.btn.is-locked { opacity: 0.55; cursor: not-allowed; }
.btn.is-locked::before { display: none; }
.btn.is-locked:hover { color: var(--btn-fg); border-color: var(--btn-bd); }
.btn.is-busy { cursor: progress; }
.btn.is-busy .btn__arrow { position: relative; color: transparent; transform: none; }
.btn.is-busy .btn__arrow::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ns-spin 0.75s linear infinite;
}
.btn.is-busy .btn__arrow::after { border-color: var(--btn-fg); border-right-color: transparent; }
button.is-busy:not(.btn) { cursor: progress; opacity: 0.75; }
@keyframes ns-spin { to { transform: rotate(360deg); } }
.btn-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 1.4rem; line-height: 1;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn-icon:hover { background: var(--fg); border-color: var(--fg); color: var(--fg-invert); }
/* Round arrow button (rails, tiles): <button class="btn-round" aria-label="…"><svg…></button> */
.btn-round {
  display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px;
  border: 1px solid var(--line-strong); border-radius: 50%; color: var(--fg); background: transparent;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}
.btn-round svg { width: 20px; height: 20px; }
.btn-round:hover { background: #FF671F; border-color: #FF671F; color: #1F2114; }
.btn-round[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.btn-round[aria-disabled="true"]:hover { background: transparent; border-color: var(--line-strong); color: var(--fg); }
/* Quiet text link: <a class="link" href="…">See all sticks <span aria-hidden="true">→</span></a> */
.link {
  display: inline-flex; align-items: center; gap: 0.4em; color: var(--fg); font-weight: 650;
  text-decoration: underline; text-decoration-color: rgba(255, 103, 31, 0.6); text-underline-offset: 5px; text-decoration-thickness: 2px;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.link:hover { color: #FF671F; text-decoration-color: #FF671F; }

/* ---------- 8. Cards, tags, chips ---------- */
.card {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--line); border-radius: var(--radius-media); background-color: var(--surface);
  transition: border-color var(--dur-fast), translate var(--dur) var(--ease-out);
}
a.card:hover { border-color: var(--line-strong); translate: 0 -3px; }
.card__title { font-size: var(--fs-h4); font-weight: 750; line-height: 1.25; }
.card__text { color: var(--muted); font-size: 0.95rem; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: rgba(31, 33, 20, 0.88); color: #F7F5EE;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.tag--blaze { background: #FF671F; border-color: #FF671F; color: #1F2114; }
.tag--used { background: #A39B72; border-color: #A39B72; color: #1F2114; }
.grade { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.grade__letter { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 4px; color: var(--fg); }
/* Filter chips: <button class="chip" type="button" aria-pressed="false"> */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface);
  font-size: 0.9rem; font-weight: 600; line-height: 1.1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-active { background: #F7F5EE; border-color: #F7F5EE; color: #1F2114; }

/* Big numbers (real facts only): <div class="big-number"><span class="big-number__value">30<span class="big-number__unit">days</span></span><span class="big-number__label">to return unused gear</span></div> */
.big-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0; border-top: 1px solid var(--line); }
.big-numbers > .big-number { padding: clamp(20px, 2.6vw, 36px) clamp(16px, 2vw, 28px) 0 0; }
.big-numbers > .big-number + .big-number { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
@media (max-width: 520px) { .big-numbers > .big-number + .big-number { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.big-number { display: grid; gap: 10px; align-content: start; }
.big-number__value {
  font-weight: 850; font-stretch: 72%; font-size: clamp(3rem, 7.4vw, 7.5rem); line-height: 0.84;
  letter-spacing: -0.03em; text-transform: uppercase; font-variant-numeric: lining-nums; white-space: nowrap;
}
.big-number__unit { margin-left: 0.08em; font-size: 0.42em; letter-spacing: -0.01em; color: var(--accent); }
.big-number__label { max-width: 28ch; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* ---------- 9. Bento grid + tiles ---------- */
/* <div class="bento"><a class="tile span-big">…</a><div class="tile span-tall">…</div>…</div> */
.bento {
  --bento-row: clamp(190px, 19vw, 290px);
  display: grid; gap: var(--bento-gap, clamp(12px, 1.4vw, 20px));
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--bento-row); grid-auto-flow: dense;
}
.bento > * { min-width: 0; min-height: 0; }
.bento > .span-big { grid-column: span 2; grid-row: span 2; }
.bento > .span-wide { grid-column: span 2; }
.bento > .span-tall { grid-row: span 2; }
.bento > .span-full { grid-column: 1 / -1; }
.bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .bento, .bento--3 { --bento-row: clamp(200px, 32vw, 280px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bento, .bento--3 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .bento > *, .bento > .span-big, .bento > .span-wide, .bento > .span-tall { grid-column: auto; grid-row: auto; min-height: 260px; }
  .bento > .span-big { min-height: min(118vw, 540px); }
  .bento > .span-tall { min-height: 380px; }
}

.tile {
  --tile-pad: clamp(20px, 2.4vw, 34px);
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  min-height: 260px; padding: var(--tile-pad); overflow: visible;
  border-radius: var(--radius-media); background-color: var(--bg-2); color: var(--fg);
  transition: translate var(--dur) var(--ease-out);
}
.bento > .tile { min-height: 0; }
.tile--top { justify-content: flex-start; }
.tile--center { justify-content: center; }
.tile__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background-color: #262A14; }
.tile__media > img, .tile__media > video, .tile__media > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-out);
}
.tile__media > canvas.camo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Scrim over tile media, strongest where text sits (bottom 45%) */
.tile--scrim .tile__media::after, .camo-tile .tile__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 22, 12, 0) 0%, rgba(20, 22, 12, 0.2) 35%, rgba(20, 22, 12, 0.78) 62%, rgba(20, 22, 12, 0.9) 100%);
}
.tile--scrim.tile--top .tile__media::after { background: linear-gradient(0deg, rgba(20, 22, 12, 0) 0%, rgba(20, 22, 12, 0.2) 35%, rgba(20, 22, 12, 0.78) 62%, rgba(20, 22, 12, 0.9) 100%); }
.camo-tile .tile__media::after { background: linear-gradient(180deg, rgba(31, 33, 20, 0.5) 0%, rgba(31, 33, 20, 0.68) 50%, rgba(31, 33, 20, 0.88) 100%); }
.tile__body { position: relative; z-index: 3; display: grid; gap: 10px; max-width: 36ch; }
.tile--scrim .tile__body, .camo-tile .tile__body { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.tile__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tile__title { font-size: clamp(1.6rem, 2.7vw, 2.75rem); font-weight: 850; font-stretch: 80%; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.span-big .tile__title { font-size: clamp(2.2rem, 4.6vw, 4.6rem); }
.tile__text { color: var(--muted); font-size: 0.98rem; line-height: 1.5; }
.tile__cta {
  position: absolute; z-index: 3; top: var(--tile-pad); right: var(--tile-pad);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #F7F5EE; color: #1F2114; transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast);
}
.tile__cta svg { width: 20px; height: 20px; }
a.tile:hover .tile__cta, a.tile:focus-visible .tile__cta { transform: rotate(0deg); background: #FF671F; }
a.tile:hover .tile__media > img, a.tile:hover .tile__media > video, .tile--zoom:hover .tile__media > img { scale: 1.04; }
a.tile:focus-visible { outline: 2px solid #FF671F; outline-offset: 3px; border-radius: var(--radius-media); }
.tile--blaze { background-color: #FF671F; color: #1F2114; --fg: #1F2114; --muted: #1F2114; --dim: #1F2114; --line: rgba(31, 33, 20, 0.2); --line-strong: rgba(31, 33, 20, 0.5); --fg-invert: #F7F5EE; --btn-primary-bg: #1F2114; --btn-primary-fg: #F7F5EE;  --btn-primary-wipe: #F7F5EE; --btn-primary-wipe-fg: #1F2114; }
.tile--blaze .tile__cta { background: #1F2114; color: #F7F5EE; }
.tile--snow { background-color: #F7F5EE; }
.tile--olive { background-color: #454B1B; --dim: var(--muted); }
.tile--line { background-color: transparent; border: 1px solid var(--line-strong); }
.tile--deep { background-color: var(--bg-deep); }
/* Room for a cut-out that breaks out of the tile's top edge */
.tile--breakout { margin-top: clamp(40px, 6vw, 90px); }
.camo-tile { background-color: #454B1B; }

/* ---------- 10. Marquee band ---------- */
/* <div class="marquee marquee--blaze" data-marquee><div class="marquee__track"><div class="marquee__group">
     <span class="marquee__item">If you&rsquo;re a stick or need a stick</span><span class="marquee__sep" aria-hidden="true"></span>…
   </div></div></div>  site.js clones the group (aria-hidden) so it loops seamlessly. */
.marquee {
  --marquee-gap: clamp(22px, 3vw, 48px);
  position: relative; display: flex; overflow: hidden; padding-block: clamp(14px, 1.8vw, 26px);
  -webkit-user-select: none; user-select: none; background-color: var(--bg-deep); color: var(--fg);
}
.marquee--blaze { background-color: #FF671F; color: #1F2114; }
.marquee--dark { background-color: var(--bg-deep); color: var(--fg); border-block: 1px solid var(--line); }
.marquee--tilt { rotate: -2deg; margin-inline: -3vw; padding-inline: 3vw; }
.marquee__track { display: flex; flex: none; width: max-content; will-change: transform; }
.marquee__group { display: flex; flex: none; align-items: center; gap: var(--marquee-gap); padding-right: var(--marquee-gap); }
.marquee__item {
  font-size: clamp(1.5rem, 3.4vw, 3.1rem); font-weight: 850; font-stretch: 78%; line-height: 1;
  letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap;
}
.marquee__item--outline { color: transparent; -webkit-text-stroke: 1.5px #F7F5EE; } /* decorative bands only (keep a solid item in every group) */
.marquee--blaze .marquee__item--outline { -webkit-text-stroke-color: #1F2114; }
.marquee__item--mono { font-family: var(--font-mono); font-size: clamp(0.9rem, 1.4vw, 1.15rem); font-weight: 600; letter-spacing: 0.06em; }
.marquee__sep { flex: none; width: 0.55em; height: 0.55em; font-size: clamp(1.5rem, 3.4vw, 3.1rem); border-radius: 50%; background: currentColor; }
.marquee__sep--star { border-radius: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.marquee.is-ready:not(.is-js):not(.is-static) .marquee__track { animation: ns-marquee var(--marquee-dur, 40s) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track, .marquee.is-offscreen .marquee__track { animation-play-state: paused; }
@keyframes ns-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% / var(--marquee-copies, 2)), 0, 0); } }

/* ---------- 11. Rail: horizontal scroll-snap track ---------- */
/* <div class="rail" data-rail> [optional .section-head with data-rail-prev / data-rail-next buttons]
     <div class="rail__track" aria-label="Sticks we like"><div class="rail__item">…</div>…</div></div>
   Full width: put .rail outside .container; the track pads itself to the container edge. */
.rail {
  --rail-gap: clamp(12px, 1.6vw, 22px);
  --rail-pad: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --rail-item: clamp(250px, 24vw, 330px);
  --fade-l: 56px; --fade-r: 56px;
  position: relative;
}
.rail.at-start { --fade-l: 0px; }
.rail.at-end { --fade-r: 0px; }
.rail__track {
  display: flex; gap: var(--rail-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad);
  padding: 10px var(--rail-pad) 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { flex: 0 0 var(--rail-item); min-width: 0; scroll-snap-align: start; }
.rail__item--wide { flex-basis: calc(var(--rail-item) * 1.6); }
.rail__track:focus-visible { outline: 2px solid #FF671F; outline-offset: -2px; border-radius: var(--radius-media); }
.rail--drag .rail__track { cursor: grab; }
.rail.is-dragging .rail__track { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging .rail__track * { pointer-events: none; }
.rail__track img { -webkit-user-drag: none; user-select: none; }
.rail__nav { display: flex; gap: 10px; }
.rail > .rail__nav { justify-content: flex-end; padding-inline: var(--rail-pad); margin-top: 4px; }
.rail.is-static .rail__nav { visibility: hidden; }
.rail__progress { height: 2px; margin-inline: var(--rail-pad); background: var(--line); overflow: hidden; }
.rail__progress > span { display: block; height: 100%; width: 100%; background: #FF671F; transform-origin: left; transform: scaleX(var(--rail-progress, 0)); }
@media (max-width: 560px) { .rail { --rail-item: 72vw; --fade-l: 0px; --fade-r: 32px; } }

/* ---------- 12. Product card (markup from NS.renderCard): big Snow stage ---------- */
.p-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-media); background-color: transparent;
  transition: translate var(--dur) var(--ease-out);
}
.p-card:hover { translate: 0 -4px; }
.p-card__link { display: flex; flex-direction: column; flex: 1; border-radius: var(--radius-media); }
.p-card__link:focus-visible { outline-offset: -3px; } /* fallback: inset ring */
/* Ring around the whole card, on the dark page (an inset Blaze ring on the light stage is under 3:1) */
@supports selector(:has(*)) {
  .p-card:has(> .p-card__link:focus-visible) { outline: 2px solid #FF671F; outline-offset: 4px; }
  .p-card > .p-card__link:focus-visible { outline: none; }
}
.p-card__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius-media); background-color: #262A14;
  box-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.8);
}
.p-card__img { width: 82%; height: 82%; object-fit: contain; transition: scale 700ms var(--ease-out); }
.p-card:hover .p-card__img { scale: 1.04; }
.p-card--photo .p-card__media { background: var(--stage); } /* supplier photos are shot on white */
.p-card--photo .p-card__img { width: 88%; height: 88%; mix-blend-mode: multiply; }
.p-card__body { display: grid; gap: 4px; padding: 14px 4px 4px; }
.p-card__vendor, .p-card__type { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.p-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; text-wrap: pretty; }
.p-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.p-card__price { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--fg); }
.p-card__retail { display: block; color: var(--dim); font-size: 0.72rem; font-weight: 400; }
.p-card__tags { position: absolute; left: 12px; top: 12px; right: 64px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.p-card__add {
  position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: #FF671F; color: #1F2114; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; line-height: 1;
  transition: background-color var(--dur-fast), transform var(--dur) var(--ease-out);
}
.p-card__add:hover { background: #1F2114; color: #F7F5EE; transform: rotate(90deg); }
.p-card__add[disabled] { background: #6B6C5E; color: #F7F5EE; cursor: not-allowed; transform: none; }
.p-card--photo .p-card__add:focus-visible { outline-color: #1F2114; } /* the ring sits on the light stage */
/* Used items that sold (NS.renderCard adds .is-sold; { soldTag: true } also adds a "Sold" tag) */
.p-card.is-sold .p-card__img { opacity: 0.55; }
.tag--sold { background: #F7F5EE; border-color: #F7F5EE; color: #1F2114; }
.p-card--sm .p-card__body { padding: 10px 2px 2px; }
.p-card--sm .p-card__title { font-size: 0.95rem; }
.p-card--lg .p-card__title { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
@media (max-width: 560px) {
  .p-card__body { padding: 10px 2px 2px; }
  .p-card__title { font-size: 0.92rem; }
  .p-card__add { width: 38px; height: 38px; right: 8px; top: 8px; }
  .p-card__tags { left: 8px; top: 8px; right: 52px; }
}

/* ---------- 13. Forms ---------- */
.form { display: grid; gap: 16px; }
.form-field { display: grid; gap: 6px; align-content: start; } /* side-by-side fields stay top-aligned when one has a hint or error */
.form-field > label { font-size: 0.9rem; font-weight: 600; }
.hint { font-size: 0.82rem; color: var(--dim); }
.field-err { font-size: 0.82rem; color: var(--error); }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 1px solid var(--line-input); border-radius: var(--radius-lg);
  background-color: var(--surface); font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur-fast);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, #F7F5EE 50%), linear-gradient(135deg, #F7F5EE 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
select option { background-color: #1F2114; color: #F7F5EE; }
::placeholder { color: #A39B72; opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(247, 245, 238, 0.55); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: #FF671F; box-shadow: 0 0 0 1px #FF671F; }
[aria-invalid="true"] { border-color: var(--error) !important; }
/* Inline email + button (sign-ups) */
.field {
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 18px;
  border: 1px solid var(--line-input); border-radius: var(--radius-pill); background: var(--surface);
  transition: border-color var(--dur-fast);
}
.field:focus-within { border-color: #FF671F; }
.field input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; outline: none; font-size: 1rem; }
.field--lg { padding: 6px 6px 6px 24px; }
.field--lg input { height: 54px; font-size: 1.1rem; }
.field--lg .btn { min-height: 54px; padding: 0 1.6em; }
@media (max-width: 420px) { .field--lg { flex-wrap: wrap; padding: 6px; border-radius: 24px; } .field--lg input { flex-basis: 100%; padding-inline: 16px; } .field--lg .btn { flex: 1; } }
/* Checkbox or radio with its text: <label class="check"><input type="checkbox"><span>…</span></label> */
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.check input, .cart-agree input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #FF671F; }
.file {
  display: block; width: 100%; padding: 16px; cursor: pointer;
  border: 1px dashed var(--line-input); border-radius: var(--radius-lg); background: var(--surface); color: var(--muted); font-size: 0.9rem;
}
.file:hover { border-color: #FF671F; }
.file::file-selector-button {
  margin-right: 12px; padding: 8px 16px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--fg); font: inherit; font-weight: 600;
}
.form-msg { margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.form-msg:empty { margin-top: 0; }
.form-msg.is-ok { color: var(--ok); }
.form-msg.is-error { color: var(--error); }
.form-note { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); font-size: 0.9rem; color: var(--muted); }
.form-note--error { border-color: var(--error); color: var(--fg); }
/* Honeypot: off-screen for people, still in the form for bots */
.ns-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 14. Header and nav ---------- */
/* Constant height so scrolling never shifts the page; only the bar and logo shrink.
   Over a full-screen hero (<main data-header="overlay">) it is fixed and transparent until you scroll. */
.site-header { position: sticky; top: 0; z-index: var(--z-header); height: calc(clamp(56px, 6.6vw, 100px) + 24px); pointer-events: none; }
.site-header__bar {
  position: relative; isolation: isolate; pointer-events: auto; border-bottom: 1px solid transparent;
  background-color: rgba(31, 33, 20, 0.86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: border-color var(--dur), background-color var(--dur);
}
.site-header__bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 48px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 13, 8, 0.74) 0%, rgba(12, 13, 8, 0.5) 55%, rgba(12, 13, 8, 0) 100%);
  opacity: 0; transition: opacity var(--dur);
}
.site-header__inner { display: flex; align-items: center; gap: 16px; padding-block: 12px; transition: padding var(--dur) var(--ease-out); }
.site-header__logo { display: block; flex: none; margin-right: auto; }
.site-header__logo img { height: clamp(56px, 6.6vw, 100px); width: auto; transition: height var(--dur) var(--ease-out); } /* owner: bigger logo at rest */
.site-header.is-scrolled .site-header__bar { border-bottom-color: var(--line); background-color: rgba(31, 33, 20, 0.94); }
.site-header.is-scrolled .site-header__inner { padding-block: 8px; }
.site-header.is-scrolled .site-header__logo img { height: clamp(44px, 4.4vw, 64px); }
/* Overlay mode (home): fixed over the hero, see-through at rest with a soft top gradient */
.header-overlay .site-header { position: fixed; left: 0; right: 0; top: 0; }
.header-overlay .site-header:not(.is-scrolled):not(.is-menu-open) .site-header__bar {
  background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.header-overlay .site-header:not(.is-scrolled):not(.is-menu-open) .site-header__bar::before { opacity: 1; }
/* Over bright video the hover colour stays Snow (Blaze text could drop under 3:1); the Blaze underline shows hover. */
@media (min-width: 761px) { .header-overlay .site-header:not(.is-scrolled):not(.is-menu-open) .site-nav__link:hover { color: #F7F5EE; } }
.header-overlay .site-header:not(.is-scrolled):not(.is-menu-open) .site-header__logo img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }
.site-nav__links { display: flex; align-items: center; gap: 2px; }
.site-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius); font-weight: 650; font-size: 1.02rem; transition: color var(--dur-fast); }
.site-nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; background: #FF671F;
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-wipe);
}
.site-nav__link:hover::after, .site-nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.site-nav__link:hover, .site-nav__link.is-active { color: #FF671F; }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-weight: 650; background: rgba(31, 33, 20, 0.35); }
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out); }
.menu-btn__bars { position: relative; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.menu-btn__bars::before { top: -6px; }
.menu-btn__bars::after { top: 6px; }
.is-menu-open .menu-btn__bars { background: transparent; }
.is-menu-open .menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
.is-menu-open .menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }
.cart-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 8px 0 16px;
  border-radius: var(--radius-pill); background: #FF671F; color: #1F2114; font-weight: 750;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.cart-btn:hover { background: #F7F5EE; }
.cart-btn__icon { width: 16px; height: 16px; }
.cart-btn__count {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px;
  background: #1F2114; color: #F7F5EE; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
}
@media (max-width: 760px) {
  .site-header__inner { gap: 8px; }
  .menu-btn { display: inline-flex; }
  /* Drop-down panel: solid, full width under the bar, page gutter on both sides.
     ".site-nav" in front outranks the ul[class] reset, which would otherwise zero the padding. */
  .site-nav .site-nav__links {
    position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 4px var(--gutter) 12px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background-color: var(--bg);
    max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain;
  }
  .is-menu-open .site-nav .site-nav__links { display: flex; }
  .site-nav__link { display: flex; width: 100%; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.5rem; font-weight: 800; font-stretch: 85%; text-transform: uppercase; letter-spacing: -0.01em; }
  .site-nav__link::after { display: none; }
  .site-nav__links li:last-child .site-nav__link { border-bottom: 0; }
  /* Open menu: the bar goes solid too (no see-through blur behind the panel) */
  .site-header.is-menu-open .site-header__bar { background-color: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 400px) {
  .menu-btn__label, .cart-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cart-btn { padding-left: 12px; }
}

/* ---------- 15. Footer (full width): big sign-up, then logo + link columns ---------- */
.site-footer { position: relative; background-color: var(--bg-deep); border-top: 1px solid var(--line); }
.site-footer__signup { padding-block: clamp(56px, 7vw, 112px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.site-footer__band { padding-block: 0; border-bottom: 1px solid var(--line); }
.site-footer__band .site-footer__signup { border-bottom: 0; }
.site-footer__form {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(28px, 6vw, 96px); row-gap: 14px; align-items: end;
}
.site-footer__form > .site-footer__kicker { grid-column: 1; }
.site-footer__form > .label {
  grid-column: 1; grid-row: 2 / span 3; align-self: start; display: block; max-width: 16ch;
  font-size: clamp(2rem, 4.4vw, 4.25rem); font-weight: 850; font-stretch: 80%; line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance;
}
.site-footer__form > .field { grid-column: 2; grid-row: 2; }
.site-footer__form > .check { grid-column: 2; grid-row: 3; font-size: 0.8rem; }
.site-footer__form > .form-msg { grid-column: 2; grid-row: 4; }
.site-footer__form > .ns-hp { grid-column: 2; }
.site-footer__grid {
  display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding-block: clamp(44px, 5vw, 72px) clamp(28px, 4vw, 48px);
}
.site-footer__brand { display: grid; gap: 18px; align-content: start; }
.site-footer__logo { width: min(280px, 72%); height: auto; }
.site-footer__tagline { max-width: 36ch; color: var(--muted); font-size: 1.02rem; }
.site-footer__h { margin: 0 0 16px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer li { color: var(--muted); font-size: 0.95rem; }
.site-footer li a { color: var(--fg); transition: color var(--dur-fast); }
.site-footer li a:hover { color: #FF671F; }
.site-footer__phone { font-size: 1.15rem; font-weight: 750; }
.site-footer__email { font-family: var(--font-mono); font-size: 0.9rem; overflow-wrap: anywhere; }
.site-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--dim);
}
@media (max-width: 1000px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 5vw, 56px); }
}
@media (max-width: 760px) {
  .site-footer__form { grid-template-columns: minmax(0, 1fr); }
  .site-footer__form > .label, .site-footer__form > .field, .site-footer__form > .check, .site-footer__form > .form-msg, .site-footer__form > .ns-hp, .site-footer__form > .site-footer__kicker { grid-column: 1; grid-row: auto; }
  .site-footer__form > .label { margin-bottom: 10px; }
}
@media (max-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- 16. Cart drawer ---------- */
.cart-scrim { position: fixed; inset: 0; z-index: var(--z-drawer); background: rgba(10, 12, 8, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility 0s var(--dur); }
.cart-drawer {
  position: fixed; z-index: calc(var(--z-drawer) + 1); top: 0; right: 0; bottom: 0; width: min(460px, 100vw);
  display: flex; flex-direction: column; border-left: 1px solid var(--line); background-color: #1F2114;
  transform: translateX(100%); visibility: hidden; transition: transform 460ms var(--ease-out), visibility 0s 460ms;
}
html.cart-open .cart-scrim { opacity: 1; visibility: visible; transition: opacity var(--dur), visibility 0s; }
html.cart-open .cart-drawer { transform: none; visibility: visible; transition: transform 460ms var(--ease-out), visibility 0s; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cart-drawer__title { font-size: 1.5rem; font-weight: 850; font-stretch: 82%; text-transform: uppercase; letter-spacing: -0.01em; }
.cart-drawer__title .mono { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.cart-drawer__camo { flex: none; }
.cart-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px; }
.cart-drawer__empty { display: grid; justify-items: center; gap: 16px; padding: 48px 0; text-align: center; color: var(--muted); }
.cart-drawer__empty strong { display: block; margin-bottom: 4px; font-size: 1.15rem; color: var(--fg); }
.cart-drawer__empty .row { justify-content: center; }
.cart-line { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-line__img { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border-radius: 12px; background: #262A14; }
.cart-line__img img { width: 86%; height: 86%; object-fit: contain; }
.cart-line__img--photo { background: var(--stage); }
.cart-line__img--photo img { mix-blend-mode: multiply; }
.cart-line__used { display: inline-block; margin-bottom: 4px; padding: 2px 6px; border-radius: 4px; background: #A39B72; color: #1F2114; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.cart-line__title { display: block; font-size: 0.92rem; font-weight: 650; line-height: 1.3; }
.cart-line__title:hover, .cart-line__remove:hover, .qty button:hover { color: #FF671F; }
.cart-line__variant { margin-top: 2px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.cart-line__right { display: grid; justify-items: end; gap: 8px; }
.cart-line__price { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600; }
.cart-line__remove { font-size: 0.78rem; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.qty { display: inline-flex; align-items: center; height: 34px; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.qty button { display: grid; place-items: center; width: 34px; height: 32px; font-family: var(--font-mono); }
.qty button[disabled] { opacity: 0.3; pointer-events: none; }
.qty output, .qty input { width: 32px; border: 0; background: transparent; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; }
.cart-drawer__foot {
  display: grid; gap: 10px; padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: #1F2114;
  max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
}
.cart-drawer__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cart-drawer__subtotal { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; }
.cart-drawer__fees { display: grid; gap: 4px; }
.cart-drawer__fee { display: flex; justify-content: space-between; gap: 16px; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.cart-drawer__fee > span:first-child { flex: none; color: var(--dim); }
.cart-drawer__fee > span:last-child { text-align: right; }
.cart-drawer__note { font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.cart-drawer__legal { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; }
.cart-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; line-height: 1.4; cursor: pointer; }
.cart-agree__err { margin-top: -4px; font-size: 0.8rem; color: var(--error); }
.cart-drawer__msg { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-size: 0.85rem; }
.cart-drawer__msg--error { border-color: var(--error); background: rgba(255, 103, 31, 0.1); }
.cart-drawer__secure { font-size: 0.75rem; line-height: 1.4; color: var(--dim); text-align: center; }
@media (max-height: 680px) {
  .cart-drawer__foot { gap: 7px; padding-top: 12px; }
  .cart-drawer__note { font-size: 0.74rem; }
  .cart-drawer__foot .btn--lg { min-height: 48px; }
}

/* ---------- 17. Toast ---------- */
.toast-wrap {
  position: fixed; z-index: var(--z-toast); left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none;
}
.toast {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: rgba(31, 33, 20, 0.96);
  font-size: 0.875rem; font-weight: 600; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  animation: ns-fade-in var(--dur) var(--ease-out) both;
}
.toast img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; background: #F7F5EE; }
.toast__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF671F; }
.toast__sub { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; color: var(--muted); }
.toast.is-out { animation: ns-fade-out var(--dur) ease both; }
@keyframes ns-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ns-fade-out { to { opacity: 0; } }

/* ---------- 18. Motion hooks (wired by site.js) ---------- */
/* Split text: spans stay visible unless GSAP is running (html.has-motion). */
.split-holder { display: inline; }
.split-w { display: inline-block; white-space: nowrap; }
/* Clip only the bottom edge (words rise from there) so tight leading never slices tops or sides. */
.split-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; }
@supports (clip-path: inset(0 0 0 0)) {
  .split-mask { overflow: visible; clip-path: inset(-0.4em -0.25em 0 -0.25em); -webkit-clip-path: inset(-0.4em -0.25em 0 -0.25em); }
}
.split-wi { display: inline-block; }
html.has-motion [data-split].is-split:not(.is-in) .split-wi { transform: translateY(110%); }

/* Fallback (no GSAP): soft fade + rise with CSS transitions when the element scrolls into view */
html.js:not(.has-motion) [data-reveal]:not([data-reveal="stagger"]),
html.js:not(.has-motion) [data-reveal="stagger"] > *,
html.js:not(.has-motion) [data-split] {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), translate var(--dur) var(--ease-out);
}
html.js:not(.has-motion) [data-reveal="stagger"] > * { transition-delay: calc(var(--reveal-i, 0) * 70ms), calc(var(--reveal-i, 0) * 70ms), 0s; }
html.js:not(.has-motion):not(.reduce-motion) [data-reveal]:not([data-reveal="stagger"]):not(.is-in),
html.js:not(.has-motion):not(.reduce-motion) [data-reveal="stagger"]:not(.is-in) > *,
html.js:not(.has-motion):not(.reduce-motion) [data-split]:not(.is-in) { opacity: 0; transform: translateY(24px); }
/* GSAP: hidden until the element enters (site.js adds .is-in and GSAP animates it in) */
html.has-motion [data-reveal]:not([data-reveal="stagger"]):not(.is-in),
html.has-motion [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; }

/* ---------- 19. Reduced motion: nothing moves, everything shows ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .js [data-reveal]:not(.is-in), .js [data-reveal]:not(.is-in) > *, .js [data-split]:not(.is-in), [data-split] .split-wi { opacity: 1 !important; transform: none !important; }
  .marquee .marquee__track { animation: none !important; transform: none !important; }
  .p-card:hover, a.card:hover, .p-card:hover .p-card__img, a.tile:hover .tile__media > img, a.tile:hover .tile__media > video, a.stage:hover > img, .btn:hover .btn__arrow { translate: none; scale: none; transform: none; }
}
html.reduce-motion [data-reveal], html.reduce-motion [data-reveal] > *, html.reduce-motion [data-split], html.reduce-motion .split-wi { opacity: 1 !important; transform: none !important; transition: none !important; }
html.reduce-motion .marquee__track { animation: none !important; transform: none !important; }
html.reduce-motion .btn.is-busy .btn__arrow::after { animation: none; opacity: 0.6; }

/* ---------- 20. Coming soon block (pre-launch) ---------- */
/* <section class="section coming-soon" id="coming-soon" aria-labelledby="…" data-prelaunch-only>
     <span class="coming-soon__ghost" aria-hidden="true">Soon</span>
     <div class="container coming-soon__grid">
       <div class="coming-soon__text"> eyebrow · h2.display-l.coming-soon__title · p.lede · .row.coming-soon__actions </div>
       <div class="coming-soon__card on-light"> optional .camo-strip.coming-soon__camo · .coming-soon__stamp · subscribe form </div>
     </div>
   </section>
   Big condensed headline on a deep ground, a faint outlined "Soon" behind it, and a Snow sign-up
   card with a thin camo edge and a tilted Blaze stamp. Without the card the text runs full width. */
.coming-soon { position: relative; isolation: isolate; overflow: hidden; background-color: var(--bg-deep); }
.coming-soon::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 70% at 88% 18%, rgba(255, 103, 31, 0.16) 0%, rgba(255, 103, 31, 0) 62%),
    radial-gradient(70% 80% at 0% 100%, rgba(69, 75, 27, 0.55) 0%, rgba(69, 75, 27, 0) 70%);
}
.coming-soon__ghost {
  position: absolute; z-index: -1; right: -0.04em; bottom: -0.16em; pointer-events: none;
  font-size: clamp(9rem, 34vw, 34rem); font-weight: 900; font-stretch: 62%; line-height: 0.8; letter-spacing: -0.03em;
  text-transform: uppercase; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 2px rgba(247, 245, 238, 0.07);
}
@supports not (-webkit-text-stroke: 1px black) { .coming-soon__ghost { color: rgba(247, 245, 238, 0.04); } }
.coming-soon__grid {
  display: grid; align-items: center; gap: clamp(36px, 5vw, 80px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.coming-soon__grid > :only-child { grid-column: 1 / -1; }
.coming-soon__text { display: grid; justify-items: start; gap: clamp(16px, 1.8vw, 26px); }
.coming-soon__title { max-width: 11ch; font-size: clamp(3rem, 7.4vw, 8rem); }
.coming-soon__title .t-accent { display: inline; }
.coming-soon__lede { max-width: 46ch; }
.coming-soon__actions { gap: 14px 26px; padding-top: 4px; }
.coming-soon__card {
  position: relative; display: grid; gap: 16px; padding: clamp(26px, 3vw, 44px); padding-top: clamp(34px, 3.6vw, 52px);
  border-radius: var(--radius-media); background-color: #F7F5EE; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  color-scheme: light; /* native checkbox and field render light on the Snow card */
}
.coming-soon__camo { position: absolute; left: 0; right: 0; top: 0; height: 12px; }
.coming-soon__stamp {
  position: absolute; z-index: 2; top: clamp(26px, 2.6vw, 38px); right: clamp(-46px, -3vw, -34px);
  padding: 7px 56px; rotate: 35deg;
  background: #FF671F; color: #1F2114; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.coming-soon__form { display: grid; gap: 14px; }
.coming-soon__form > .eyebrow { padding-right: 84px; }
.coming-soon__label {
  display: block; font-size: clamp(1.7rem, 2.7vw, 2.6rem); font-weight: 850; font-stretch: 78%;
  line-height: 0.96; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; color: var(--fg);
}
.coming-soon__form .field { background-color: #FFFFFF; }
.coming-soon__form .check { font-size: 0.8rem; }
@media (max-width: 900px) {
  .coming-soon__grid { grid-template-columns: minmax(0, 1fr); }
  .coming-soon__card { max-width: 620px; }
}
@media (max-width: 420px) {
  .coming-soon__stamp { right: -52px; top: 22px; padding-inline: 50px; font-size: 0.62rem; }
  .coming-soon__form > .eyebrow { padding-right: 64px; }
}