/* Rugged Access Project — design system (built from _includes/css/) */
/* ==========================================================================
   01 · TOKENS
   Three tiers, read top to bottom:
     1. Primitives  — raw values. Brand colors are sampled from the logo files.
     2. Semantic    — what a value is FOR. Components use only these.
     3. Themes      — context classes that remap semantic tokens (light/ink/olive),
                      so every component adapts without its own dark-mode rules.
   Component-level tokens (e.g. --btn-bg) live with each component.
   ========================================================================== */

:root {
  /* ── 1. Primitives ─────────────────────────────────────────────────────── */

  /* Ink — logo black and the darks built from it */
  --ink-1000: #060A0A;
  --ink-900: #0E1312;
  --ink-800: #181E1C;
  --ink-700: #252C29;
  --ink-600: #39413D;

  /* Olive — logo olive (#6D765C) at 500 */
  --olive-900: #2C3025;
  --olive-800: #3D4234;
  --olive-700: #4C533F;
  --olive-600: #5B6350;
  --olive-500: #6D765C;
  --olive-400: #8C947C;
  --olive-300: #A9AF9B;
  --olive-200: #C8CCBC;
  --olive-100: #E3E5DA;

  /* Blaze — logo orange (#F26621) at 500. Hunter's-orange energy; use sparingly. */
  --blaze-800: #8F370B;
  --blaze-700: #B4470E;
  --blaze-600: #D95516;
  --blaze-500: #F26621;
  --blaze-400: #F5874F;
  --blaze-300: #F9AE87;
  --blaze-100: #FDE5D7;

  /* Bone — warm canvas pulled from the desert camo and the campaign flyer */
  --bone-50: #FBF9F4;
  --bone-100: #F3EFE6;
  --bone-200: #E9E3D6;
  --bone-300: #DCD3C0;
  --bone-400: #C7BBA2;

  /* Type families */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale — fluid between ~360px and ~1280px viewports */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-4xl: clamp(2.75rem, 1.8rem + 4.2vw, 5.25rem);
  --text-5xl: clamp(3.5rem, 2rem + 7vw, 8.5rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-display: 0.9;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --tracking-display: 0.005em;
  --tracking-button: 0.08em;
  --tracking-label: 0.14em;

  /* Space — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --space-11: 8rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Shape */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* the patch radius */
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 2px;
  --stitch-width: 1.5px;

  /* Elevation — low and earthy, no glow */
  --shadow-sm: 0 1px 2px rgb(6 10 10 / 0.08);
  --shadow-md: 0 12px 28px -16px rgb(6 10 10 / 0.45);
  --shadow-lg: 0 30px 60px -30px rgb(6 10 10 / 0.6);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 520ms;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-height: 4.25rem;

  --z-header: 50;
  --z-overlay: 100;

  /* ── 2. Semantic (light / bone theme is the default) ───────────────────── */
  --color-canvas: var(--bone-100);
  --color-surface: var(--bone-50);
  --color-surface-sunken: var(--bone-200);
  --color-surface-strong: var(--bone-300);

  --color-text: var(--ink-1000);
  --color-text-muted: var(--olive-700);
  --color-text-subtle: var(--olive-600);

  --color-border: rgb(6 10 10 / 0.14);
  --color-border-strong: var(--ink-1000);

  --color-accent: var(--blaze-500);          /* fills: buttons, blazes, meters */
  --color-accent-hover: var(--blaze-400);
  --color-on-accent: var(--ink-1000);        /* text on blaze: 6.3:1. Never white. */
  --color-accent-text: var(--blaze-700);     /* orange text on light: 4.7:1 */

  --color-field: var(--olive-500);           /* decorative olive: marks, rules */
  --color-on-field: var(--ink-1000);

  --color-inverse: var(--ink-1000);          /* the "patch" black */
  --color-on-inverse: var(--bone-100);

  --color-focus: var(--blaze-500);
  --color-overlay: rgb(6 10 10 / 0.82);

  --texture-opacity: 0.09;
}

/* ── 3. Themes ───────────────────────────────────────────────────────────── */
.theme-ink {
  --color-canvas: var(--ink-1000);
  --color-surface: var(--ink-900);
  --color-surface-sunken: var(--ink-800);
  --color-surface-strong: var(--ink-700);
  --color-text: var(--bone-100);
  --color-text-muted: var(--olive-300);
  --color-text-subtle: var(--olive-400);
  --color-border: rgb(243 239 230 / 0.14);
  --color-border-strong: var(--bone-100);
  --color-accent-text: var(--blaze-500);
  --color-field: var(--olive-500);
  --color-inverse: var(--bone-100);
  --color-on-inverse: var(--ink-1000);
  --texture-opacity: 0.35;
}

.theme-olive {
  --color-canvas: var(--olive-700);
  --color-surface: var(--olive-800);
  --color-surface-sunken: var(--olive-900);
  --color-surface-strong: var(--olive-600);
  --color-text: var(--bone-100);
  --color-text-muted: var(--olive-100);
  --color-text-subtle: var(--olive-200);
  --color-border: rgb(243 239 230 / 0.2);
  --color-border-strong: var(--bone-100);
  --color-accent-text: var(--blaze-300);
  --color-field: var(--olive-900);
  --color-inverse: var(--ink-1000);
  --color-on-inverse: var(--bone-100);
  --texture-opacity: 0.25;
}

/* Blaze is loud: reserve it for the single most important call to action on a page. */
.theme-blaze {
  --color-canvas: var(--blaze-500);
  --color-surface: var(--bone-50);
  --color-surface-sunken: var(--blaze-400);
  --color-text: var(--ink-1000);
  --color-text-muted: var(--ink-800);
  --color-text-subtle: var(--ink-700);
  --color-border: rgb(6 10 10 / 0.22);
  --color-border-strong: var(--ink-1000);
  --color-accent: var(--ink-1000);
  --color-accent-hover: var(--ink-700);
  --color-on-accent: var(--blaze-500);
  --color-accent-text: var(--ink-1000);
  --color-focus: var(--ink-1000);
  --texture-opacity: 0.12;
}

.theme-bone {
  --color-canvas: var(--bone-100);
}

:is(.theme-ink, .theme-olive, .theme-blaze, .theme-bone) {
  background-color: var(--color-canvas);
  color: var(--color-text);
}

/* ==========================================================================
   02 · BASE — reset and bare elements. No classes here.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

ul, ol { margin: 0; padding: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

strong { font-weight: var(--weight-semibold); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--blaze-500); color: var(--ink-1000); }

hr { border: 0; border-top: var(--border-thin) solid var(--color-border); margin: 0; }

blockquote, figure { margin: 0; }

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

/* ==========================================================================
   03 · LAYOUT — page-level primitives (container, section, stack, grid).
   They control space and flow only; never color or type.
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.section:not([class*="theme-"]) + .section:not([class*="theme-"]) { padding-top: 0; }

/* Vertical rhythm: .stack > * + * gets --stack-gap */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack--sm { --stack-gap: var(--space-2); }
.stack--lg { --stack-gap: var(--space-6); }

/* Horizontal grouping that wraps */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

/* Auto-fitting grid; set --grid-min per use */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-5));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

/* Stretch items to fill the row instead of leaving empty tracks */
.grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr)); }

/* Section heading block used across pages */
.section-head {
  display: grid;
  gap: var(--space-4) var(--space-8);
  margin-bottom: var(--space-8);
  align-items: end;
}
.section-head__title { font-size: var(--text-4xl); line-height: var(--leading-display); }
.section-head__lede { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 38rem; }

@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .section-head--split > :last-child:not(:first-child) { justify-self: end; }
}

/* ==========================================================================
   04 · ATOMS — the smallest reusable pieces. Each reads semantic tokens only,
   so it works on any theme (bone, ink, olive) without overrides.
   ========================================================================== */

/* ── Logo ────────────────────────────────────────────────────────────────
   Brand marks are single-color SVGs used as masks, so they take any token
   color. Size with --logo-h. Give the parent link an aria-label.          */
.logo {
  --logo-h: 2.75rem;
  display: block;
  height: var(--logo-h);
  aspect-ratio: var(--logo-ratio, 216 / 138);
  background-color: var(--logo-color, currentColor);
  -webkit-mask: var(--logo-src) center / contain no-repeat;
  mask: var(--logo-src) center / contain no-repeat;
}
.logo--ra { --logo-src: url("../brand/mark-ra.svg"); --logo-ratio: 216 / 138; }
.logo--monogram { --logo-src: url("../brand/mark-ra-monogram.svg"); --logo-ratio: 168 / 79; }
.logo--range { --logo-src: url("../brand/mark-mountain.svg"); --logo-ratio: 288 / 97; }
.logo--fish { --logo-src: url("../brand/mark-fish.svg"); --logo-ratio: 288 / 121; }

/* ── Trail blaze ─────────────────────────────────────────────────────────
   The painted rectangle hikers follow on trees. Our wayfinding motif:
   section markers, list bullets, active states.                           */
.blaze {
  display: inline-block;
  width: 0.45em;
  height: 1em;
  background: var(--color-accent);
  border-radius: 1px;
  flex: none;
}

/* ── Eyebrow / label ─────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow::before {
  content: "";
  width: 0.5em;
  height: 1.1em;
  background: var(--color-accent);
  border-radius: 1px;
}
.eyebrow--plain::before { display: none; }

/* Mono microcopy: coordinates, SKUs, figure captions */
.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

/* Meta line led by an icon */
.meta--icon { display: flex; gap: var(--space-2); align-items: flex-start; }
.meta--icon .icon { width: 1rem; height: 1rem; margin-top: 0.05em; }

/* ── Display text helpers ────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.text-accent { color: var(--color-accent-text); }
.text-muted { color: var(--color-text-muted); }

/* ── Button ──────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-text);
  --btn-fg-hover: var(--color-canvas);
  --btn-pad-y: 0.85rem;
  --btn-pad-x: 1.35rem;
  --btn-size: var(--text-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: 2.875rem;
  border: var(--border-thick) solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--btn-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-button);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn .btn__icon { width: 1.05em; height: 1.05em; transition: transform var(--duration-base) var(--ease-out); }
.btn:hover .btn__icon--nudge { transform: translateX(3px); }

.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-border: var(--color-accent);
  --btn-bg-hover: var(--color-accent-hover);
  --btn-fg-hover: var(--color-on-accent);
}
.btn--dark {
  --btn-bg: var(--color-inverse);
  --btn-fg: var(--color-on-inverse);
  --btn-border: var(--color-inverse);
  --btn-bg-hover: var(--color-accent);
  --btn-fg-hover: var(--color-on-accent);
}
.btn--ghost {
  --btn-border: transparent;
  --btn-pad-x: 0.25rem;
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--color-accent-text);
}
.btn--sm { --btn-pad-y: 0.55rem; --btn-pad-x: 0.9rem; --btn-size: var(--text-sm); min-height: 2.375rem; }
.btn--lg { --btn-pad-y: 1.05rem; --btn-pad-x: 1.75rem; --btn-size: var(--text-lg); min-height: 3.5rem; }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; pointer-events: none; }

/* ── Text link with arrow ────────────────────────────────────────────── */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: var(--border-thick) solid var(--color-accent);
  padding-bottom: 2px;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--duration-base) var(--ease-out); }
.link-arrow:hover { color: var(--color-accent-text); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ── Patch ───────────────────────────────────────────────────────────────
   Echoes the embroidered hat patch: rounded plate + stitched inner border.  */
.patch {
  --patch-bg: var(--ink-1000);
  --patch-fg: var(--blaze-500);
  --patch-stitch: var(--blaze-500);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.95em;
  border-radius: var(--radius-md);
  background: var(--patch-bg);
  color: var(--patch-fg);
  outline: var(--stitch-width) dashed var(--patch-stitch);
  outline-offset: -5px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
}
a.patch:hover { --patch-stitch: var(--bone-100); }
.patch--olive { --patch-bg: var(--olive-500); --patch-fg: var(--ink-1000); --patch-stitch: var(--ink-1000); }
.patch--blaze { --patch-bg: var(--blaze-500); --patch-fg: var(--ink-1000); --patch-stitch: var(--ink-1000); }
.patch--lg { font-size: var(--text-lg); padding: 0.8em 1.2em; outline-offset: -7px; }

/* ── Tag (static) & Chip (interactive filter) ────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.6em;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55rem 0.95rem;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  transition: border-color var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast);
}
.chip:hover { border-color: var(--color-border-strong); }
.chip[aria-pressed="true"] { background: var(--color-inverse); color: var(--color-on-inverse); border-color: var(--color-inverse); }
.chip__count { font-family: var(--font-mono); font-size: var(--text-2xs); opacity: 0.7; }

/* ── Price ───────────────────────────────────────────────────────────── */
.price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--price-size, var(--text-xl));
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.price--lg { --price-size: var(--text-3xl); }

/* ── Swatch ──────────────────────────────────────────────────────────── */
.swatch {
  display: inline-block;
  width: var(--swatch-size, 1rem);
  height: var(--swatch-size, 1rem);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgb(6 10 10 / 0.25);
  flex: none;
}

/* ── Select (sort) ───────────────────────────────────────────────────── */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23060A0A' stroke-width='1.6'/%3E%3C/svg%3E") right 0.8rem center / 0.7rem no-repeat,
    var(--color-surface);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-sm);
}

/* ── Icon ────────────────────────────────────────────────────────────── */
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ── Skip link ───────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: calc(var(--z-overlay) + 1);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   05 · MOLECULES — small groups of atoms with one job each.
   ========================================================================== */

/* ── Product card ────────────────────────────────────────────────────── */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: inherit;
  text-decoration: none;
}
.product-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-sunken);
}
.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.product-card__media img + img { opacity: 0; }
@media (hover: hover) {
  .product-card:hover .product-card__media img:first-child { transform: scale(1.03); }
  .product-card:hover .product-card__media img + img { opacity: 1; }
}
.product-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; }
.product-card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
}
.product-card__title {
  font-size: var(--text-2xl);
  line-height: 1;
}
.product-card__title a { text-decoration: none; }
/* Whole card clickable, one link in the accessibility tree */
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.product-card__variant {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.product-card:focus-within .product-card__media { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.product-card__title a:focus-visible { outline: none; }
.product-card[hidden] { display: none; }
.product-card--sold-out .product-card__media img { filter: saturate(0.55); }
.product-card--sold-out .price { color: var(--color-text-subtle); }

/* ── Equipment card (campaign line items) ────────────────────────────── */
.equipment-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.equipment-card__media {
  aspect-ratio: 4 / 3;
  background: var(--bone-50);
  overflow: hidden;
}
.equipment-card__media img { width: 100%; height: 100%; object-fit: cover; }
.equipment-card__media--contain img { object-fit: contain; padding: var(--space-4); }
.equipment-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.equipment-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.equipment-card__index { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); }
.equipment-card__title { font-size: var(--text-xl); }
.equipment-card__cost { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-3xl); line-height: 1; color: var(--color-accent-text); }
.equipment-card__text { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Progress meter — reads like a map scale bar ─────────────────────── */
.meter { display: grid; gap: var(--space-3); }
.meter__labels { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.meter__raised { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-3xl); line-height: 1; }
.meter__goal { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.meter__track {
  position: relative;
  height: 0.875rem;
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--color-border-strong) calc(25% - 1px) 25%);
  overflow: hidden;
}
.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter-value, 0%);
  background: var(--color-accent);
  transition: width 1.2s var(--ease-out);
}
.meter__scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-subtle); }

/* ── Stat ────────────────────────────────────────────────────────────── */
.stat { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--border-thick) solid var(--color-border-strong); }
.stat__value { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-4xl); line-height: 0.9; }
.stat__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }

/* ── Pillar (numbered mission point) ─────────────────────────────────── */
.pillar { display: grid; gap: var(--space-3); align-content: start; }
.pillar__num { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-subtle); }
.pillar__num::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.pillar__title { font-size: var(--text-2xl); }
.pillar__text { color: var(--color-text-muted); }

/* ── Quote ───────────────────────────────────────────────────────────── */
.quote { display: grid; gap: var(--space-5); }
.quote__text {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}
.quote__text::before { content: "“"; color: var(--color-accent); margin-right: 0.05em; }
.quote__text::after { content: "”"; color: var(--color-accent); }
.quote__cite { display: flex; align-items: center; gap: var(--space-3); font-style: normal; }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); opacity: 0.6; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent-text); text-decoration: underline; }

/* ── Accordion (native <details>) ────────────────────────────────────── */
.accordion { border-top: var(--border-thin) solid var(--color-border); }
.accordion__item { border-bottom: var(--border-thin) solid var(--color-border); }
.accordion__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after { content: "+"; font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: var(--text-xl); transition: transform var(--duration-base) var(--ease-out); }
.accordion__item[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding-bottom: var(--space-5); color: var(--color-text-muted); }

/* Bulleted list with trail blazes */
.blaze-list { list-style: none; display: grid; gap: var(--space-2); }
.blaze-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: baseline; }
.blaze-list li::before { content: ""; width: 0.4em; height: 0.85em; background: var(--color-accent); border-radius: 1px; transform: translateY(0.1em); }

/* ── Product gallery (PDP) ───────────────────────────────────────────── */
.gallery { display: grid; gap: var(--space-3); }
.gallery__stage {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.gallery__stage::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3 / 4; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; }
.gallery__thumb {
  width: 4.5rem;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: var(--border-thick) solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: none;
  opacity: 0.6;
  transition: opacity var(--duration-fast), border-color var(--duration-fast);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { opacity: 1; border-color: var(--color-border-strong); }

/* ── Colorway picker (links to sibling products) ─────────────────────── */
.colorways { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; }
.colorways a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.8rem 0.45rem 0.5rem;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.colorways a:hover { border-color: var(--color-border-strong); }
.colorways a[aria-current="page"] { border: var(--border-thick) solid var(--color-border-strong); padding: calc(0.45rem - 1px) calc(0.8rem - 1px) calc(0.45rem - 1px) calc(0.5rem - 1px); }

/* ── Feature row (shipping / secure / impact strip) ──────────────────── */
.assurances { display: grid; gap: var(--space-3); list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.assurances li { display: flex; gap: var(--space-3); align-items: flex-start; }
.assurances .icon { color: var(--color-text); margin-top: 0.1em; }

/* ==========================================================================
   06 · ORGANISMS — full sections built from atoms + molecules.
   ========================================================================== */

/* ── Topographic texture (any section) ───────────────────────────────── */
.has-topo { position: relative; isolation: isolate; overflow: hidden; }
.has-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-field);
  opacity: var(--texture-opacity);
  -webkit-mask: url("../textures/topo.svg") center / cover no-repeat;
  mask: url("../textures/topo.svg") center / cover no-repeat;
  pointer-events: none;
}

/* ── Conditions bar ──────────────────────────────────────────────────── */
.conditions {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.conditions__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 2.25rem; }
.conditions__place { display: flex; gap: var(--space-3); align-items: center; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; }
.conditions__place span + span::before { content: "·"; margin-right: var(--space-3); opacity: 0.6; }
.conditions__cta { color: var(--color-text); text-decoration: none; white-space: nowrap; display: inline-flex; gap: var(--space-2); align-items: center; }
.conditions__cta strong { color: var(--color-accent-text); font-weight: var(--weight-medium); }
.conditions__cta:hover { text-decoration: underline; }
@media (max-width: 640px) { .conditions__coords { display: none; } }
@media (max-width: 520px) { .conditions__place { display: none; } .conditions__inner { justify-content: center; } }

/* ── Site header ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: var(--border-thin) solid transparent;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.site-header.is-scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: var(--header-height); }
.site-header__brand { display: inline-flex; color: var(--color-text); }
.site-header__brand .logo { --logo-h: 2.6rem; }
.site-header__brand:hover { color: var(--color-accent-text); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }

.site-nav__list { list-style: none; display: flex; gap: var(--space-6); }
.site-nav__link {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--space-2);
  background: none;
  border: 0;
  padding-inline: 0;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  font-size: var(--text-sm);
}
.menu-toggle__bars { width: 1rem; height: 0.7rem; position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform var(--duration-base) var(--ease-out), top var(--duration-base);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: calc(100% - 2px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: calc(50% - 1px); transform: rotate(-45deg); }

@media (max-width: 899px) {
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-canvas);
    border-bottom: var(--border-thin) solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--gutter) var(--space-6);
    display: none;
  }
  .js .site-nav.is-open { display: block; }
  .js .site-nav__list { flex-direction: column; gap: 0; }
  .js .site-nav__link { display: block; width: 100%; text-align: left; font-size: var(--text-2xl); padding-block: var(--space-3); border-bottom: var(--border-thin) solid var(--color-border); }
  .js .site-nav__link::after { display: none; }
  html:not(.js) .site-header__inner { height: auto; flex-wrap: wrap; padding-block: var(--space-3); }
  html:not(.js) .site-nav__list { flex-wrap: wrap; gap: var(--space-4); }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding-block: var(--space-7) var(--space-9); overflow: hidden; }
.hero + .section { padding-top: var(--space-8); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero__title { font-size: var(--text-5xl); font-weight: var(--weight-black); line-height: 0.86; }
.hero__title span { display: block; }
.hero__tape {
  display: inline !important;
  padding-inline: 0.06em;
  background: linear-gradient(transparent 8%, var(--color-accent) 8%, var(--color-accent) 92%, transparent 92%);
  color: var(--color-on-accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 34rem; }
.hero__actions { --cluster-gap: var(--space-3); }
.hero__story {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: none; border: 0; padding: 0;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-button); text-transform: uppercase;
}
.hero__story-icon {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: var(--border-thick) solid var(--color-border-strong);
  border-radius: 50%;
  transition: background-color var(--duration-base), color var(--duration-base);
}
.hero__story-icon svg { width: 0.9rem; height: 0.9rem; margin-left: 2px; }
.hero__story:hover .hero__story-icon { background: var(--color-text); color: var(--color-canvas); }

.hero__media { position: relative; }
.hero__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-sunken);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__patch { position: absolute; left: calc(var(--space-5) * -1); bottom: var(--space-8); transform: rotate(-3deg); box-shadow: var(--shadow-md); }
.hero__patch strong { color: var(--bone-100); font-weight: inherit; }
.hero__caption { margin-top: var(--space-3); display: flex; justify-content: space-between; gap: var(--space-4); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-9); }
  .hero__photo { aspect-ratio: auto; height: min(74vh, 46rem); }
}
@media (max-width: 899px) {
  .hero__patch { left: var(--space-3); bottom: calc(var(--space-8) + var(--space-2)); }
}

/* ── Mission ─────────────────────────────────────────────────────────── */
.mission__statement { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.02; max-width: 22ch; }
.mission__statement em { font-style: normal; color: var(--color-accent-text); }
.mission__pillars { --grid-min: 15rem; --grid-gap: var(--space-7); margin-top: var(--space-9); }

/* ── Campaign ────────────────────────────────────────────────────────── */
.campaign__head { display: grid; gap: var(--space-7); margin-bottom: var(--space-8); }
.campaign__title { font-size: var(--text-4xl); line-height: var(--leading-display); }
.campaign__statement { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 36rem; }
.campaign__goal {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  align-content: start;
}
.campaign__goal-amount { font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem); color: var(--color-accent-text); }
.campaign__breakdown { display: grid; gap: var(--space-2); list-style: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.campaign__breakdown li { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px dashed var(--color-border); }
.campaign__items { --grid-min: 15rem; --grid-gap: var(--space-4); }
.campaign__items .equipment-card { counter-increment: equipment; }
.campaign__footnote { margin-top: var(--space-6); }
.campaign .equipment-card__media--contain { background: #fff; }

@media (min-width: 900px) {
  .campaign__head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; }
}

/* ── Merch promo ─────────────────────────────────────────────────────── */
.merch { display: grid; gap: var(--space-8); align-items: center; }
.merch__feature { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; max-height: 52rem; }
.merch__feature img { width: 100%; height: 100%; object-fit: cover; }
.merch__feature .patch { position: absolute; top: var(--space-4); left: var(--space-4); }
/* On phones the product cards right below already show the hat, so skip the big repeat. */
@media (max-width: 899px) { .merch__feature { display: none; } }
.merch__copy { display: grid; gap: var(--space-5); }
.merch__title { font-size: var(--text-4xl); line-height: var(--leading-display); }
.merch__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.merch__products .product-card__title { font-size: var(--text-xl); }
@media (min-width: 900px) {
  .merch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-10); }
}

/* ── Impact ──────────────────────────────────────────────────────────── */
.impact { display: grid; gap: var(--space-9); }
.impact__stats { --grid-min: 6rem; --grid-gap: var(--space-5); }
@media (min-width: 900px) {
  .impact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
}

/* Photo mosaic */
.mosaic { display: grid; gap: var(--space-3); grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(9rem, 16vw, 15rem); margin-top: var(--space-9); }
.mosaic figure { border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-sunken); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic figure:nth-child(2) { grid-column: span 2; }
.mosaic figure:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.mosaic figure:nth-child(4) { grid-column: span 1; }
.mosaic figure:nth-child(5) { grid-column: span 1; }
@media (max-width: 719px) {
  .mosaic { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .mosaic::-webkit-scrollbar { display: none; }
  .mosaic figure { flex: 0 0 72%; aspect-ratio: 3 / 4; scroll-snap-align: center; }
}

/* ── Donate panel ────────────────────────────────────────────────────────
   Blaze panel = the pitch. Bone "gift ticket" = what the money buys + checkout.
   The ticket is a fixed, narrow column so the Stripe button never floats in
   empty space, and a perforated, stitched tear line echoes the hat patch.  */
.donate {
  --ticket-pad: var(--space-5);
  display: grid;
  gap: var(--space-8);
  padding: clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--radius-lg);
  align-items: center;
}
.donate__title { font-size: var(--text-4xl); line-height: var(--leading-display); }
.donate__lede { max-width: 34rem; font-size: var(--text-lg); }
.donate__alt { justify-self: start; align-self: flex-start; margin-top: var(--space-5); }

.donate__ticket {
  /* Back to light-surface tokens inside the blaze theme */
  --color-text: var(--ink-1000);
  --color-text-muted: var(--olive-700);
  --color-text-subtle: var(--olive-600);
  --color-border: rgb(6 10 10 / 0.14);
  --color-border-strong: var(--ink-1000);
  --color-accent: var(--blaze-500);
  --color-accent-text: var(--blaze-700);
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--ticket-pad);
  border-radius: var(--radius-md);
  background: var(--bone-50);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.donate__ticket-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.donate__gear { list-style: none; display: grid; gap: var(--space-2); }
.donate__gear li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}
/* Dotted leader between item and price, like a field-guide index */
.donate__gear li::after { content: ""; order: 1; flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--color-border); transform: translateY(-0.25em); }
.donate__gear-cost { order: 2; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }

/* Perforated tear line with notches cut from the card edges */
.donate__perf {
  position: relative;
  height: 0;
  margin: var(--space-2) calc(var(--ticket-pad) * -1);
  border-top: var(--stitch-width) dashed var(--color-border-strong);
}
.donate__perf::before, .donate__perf::after {
  content: "";
  position: absolute;
  top: -0.7rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--blaze-500);
}
.donate__perf::before { left: -0.7rem; }
.donate__perf::after { right: -0.7rem; }

/* Reserve roughly one button's height before Stripe loads, then fit the button exactly. */
.donate__mount { min-height: 4.5rem; display: grid; place-items: center; text-align: center; }
.donate__mount[data-mounted="true"] { min-height: 0; display: block; }
.donate__mount stripe-buy-button { display: block; }
.donate__mount p { color: var(--olive-700); font-size: var(--text-sm); }
/* Stripe centers its button inside its own frame, so the note under it centers too. */
.donate__secure { text-align: center; text-wrap: balance; margin-top: calc(var(--space-2) * -1); }
.donate__secure .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.45em; }

@media (min-width: 900px) {
  .donate { grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); gap: var(--space-9); }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { padding-block: var(--space-10) var(--space-6); }
.site-footer__mark { --logo-h: auto; width: min(100%, 40rem); height: auto; color: var(--olive-500); margin-bottom: var(--space-9); }
.site-footer__cols { --grid-min: 12rem; --grid-gap: var(--space-7); }
.site-footer__heading { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-4); font-weight: var(--weight-medium); }
.site-footer__links { list-style: none; display: grid; gap: var(--space-2); }
.site-footer__links a { text-decoration: none; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.site-footer__links a:hover { color: var(--color-accent-text); }
.site-footer__legal { font-size: var(--text-sm); color: var(--color-text-muted); }
.site-footer__legal a { color: var(--color-text); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-9); padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-border); }

/* ── Modal (native <dialog>) ─────────────────────────────────────────── */
.modal {
  width: min(64rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--ink-1000);
  color: var(--bone-100);
  overflow: hidden;
}
.modal::backdrop { background: var(--color-overlay); }
.modal__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); }
.modal__close {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: var(--border-thin) solid rgb(243 239 230 / 0.3);
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
}
.modal__close:hover { background: var(--blaze-500); color: var(--ink-1000); border-color: var(--blaze-500); }
.modal__video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.modal__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Page hero (inner pages) ─────────────────────────────────────────── */
.page-hero { padding-block: var(--space-8) var(--space-9); }
.page-hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.page-hero__title { font-size: var(--text-5xl); line-height: 0.86; font-weight: var(--weight-black); }
.page-hero__lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 34rem; }
.page-hero__art { justify-self: center; width: min(100%, 26rem); transform: rotate(-4deg); filter: drop-shadow(0 18px 24px rgb(6 10 10 / 0.25)); }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* ── Shop toolbar + grid ─────────────────────────────────────────────── */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  margin-bottom: var(--space-7);
  border-block: var(--border-thin) solid var(--color-border);
}
.shop-toolbar__filters { --cluster-gap: var(--space-2); }
.shop-toolbar__sort { display: flex; align-items: center; gap: var(--space-3); }
.shop-toolbar__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); letter-spacing: 0.06em; text-transform: uppercase; }
.shop-grid { --grid-min: 17rem; --grid-gap: var(--space-8) var(--space-5); }
.shop-empty { padding: var(--space-9) 0; text-align: center; color: var(--color-text-muted); }

/* Impact band (shop + PDP) */
.impact-band { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-7); border-radius: var(--radius-lg); }
.impact-band__title { font-size: var(--text-3xl); line-height: 0.95; }
@media (min-width: 900px) { .impact-band { grid-template-columns: minmax(0, 1.4fr) auto; } }

/* ── Product detail ──────────────────────────────────────────────────── */
.pdp { display: grid; gap: var(--space-8); padding-block: var(--space-5) var(--space-section); }
.pdp__info { display: grid; gap: var(--space-5); align-content: start; }
.pdp__title { font-size: var(--text-4xl); line-height: var(--leading-display); font-weight: var(--weight-black); }
.pdp__colorway { color: var(--color-text-muted); font-size: var(--text-lg); }
.pdp__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); border-block: var(--border-thin) solid var(--color-border); }
.pdp__option-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-2); }
.pdp__buy { display: grid; gap: var(--space-3); }
.pdp__buy > .link-arrow { justify-self: start; }
.pdp__impact { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-sm); }
.pdp__impact .logo { --logo-h: 2.25rem; flex: none; color: var(--color-accent); }
.pdp__description { color: var(--color-text-muted); }
.pdp__description strong { color: var(--color-text); }
@media (min-width: 960px) {
  .pdp { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
  .pdp__info { position: sticky; top: calc(var(--header-height) + var(--space-5)); }
}

/* ── Notice (thank you / 404) ────────────────────────────────────────── */
.notice { min-height: 60vh; display: grid; align-content: center; justify-items: start; gap: var(--space-5); padding-block: var(--space-10); }
.notice__title { font-size: var(--text-5xl); line-height: 0.86; font-weight: var(--weight-black); }

/* ==========================================================================
   07 · UTILITIES — single-purpose overrides. Last in the cascade on purpose.
   ========================================================================== */

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

.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.max-prose { max-width: 38rem; }
.text-center { text-align: center; }

/* Scroll reveal — content is only hidden once JS has confirmed it can reveal it. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }