/*
 * "Precision / HUD" design language: the homepage and its reusable pieces (also shown in /styleguide).
 * Load after tokens/base/components. Starts with the self-hosted HUD @font-face rules (one request, not two).
 * Colours are brand tokens or color-mix() of them; dark sections opt into the brand's dark palette with data-theme="dark". Fonts and the fluid type scale come from
 * tokens.css (--font-hud-*, --type-*). Everything is visible without JS; motion is added by public/js/hud.js
 * and is skipped for prefers-reduced-motion.
 *
 * Pieces: .hud (scope) .hud-display .hud-mono .type-outline .hud-grid .hud-guides .section-label .crosshair
 *         .laser-line .marquee .reveal-text .magnetic-btn .hud-btn .image-reveal .hud-card .hud-cursor
 */

/* Self-hosted HUD fonts (fontsource variable builds served from node_modules at /fonts/*): latin + latin-ext,
   font-display: swap so text never waits for a font. Family names match the --font-hud-* tokens; the display face
   is preloaded by the page. */
@font-face {
  font-family: "Big Shoulders Display Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/big-shoulders-display/big-shoulders-display-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/big-shoulders-display/big-shoulders-display-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@layer components {
  /* ---------- scope + type ---------- */
  .hud {
    font-family: var(--font-hud-body);
    font-size: var(--type-base);
    line-height: var(--leading-body);
    --hud-line: color-mix(in srgb, currentColor 14%, transparent);
    --hud-line-strong: color-mix(in srgb, currentColor 32%, transparent);
  }
  .hud :is(h1, h2, h3) { font-family: var(--font-hud-display); text-transform: uppercase; letter-spacing: var(--tracking-display); font-weight: 600; }
  .hud-display { font-family: var(--font-hud-display); text-transform: uppercase; font-weight: 600; line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
  .hud-mono { font-family: var(--font-hud-mono); letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums; }

  /* oversized outlined type, used next to filled type */
  .type-outline { color: transparent; -webkit-text-stroke: 0.012em var(--outline-color, var(--color-text-strong)); paint-order: stroke fill; font-weight: 600; }
  @supports not (-webkit-text-stroke: 1px black) {
    .type-outline { color: color-mix(in srgb, var(--outline-color, var(--color-text-strong)) 35%, transparent); }
  }
  .type-accent { color: var(--color-primary); }

  /* ---------- 12-column grid (4 on phones, 8 on tablets) + hairline column guides ---------- */
  .hud-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
  @media (min-width: 48rem) { .hud-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .hud-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

  .hud-guides {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter);
    width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
  }
  .hud-guides span { border-inline: 1px solid var(--hud-line, color-mix(in srgb, currentColor 14%, transparent)); }
  .hud-guides span:nth-child(n + 5) { display: none; }
  @media (min-width: 48rem) { .hud-guides { grid-template-columns: repeat(8, minmax(0, 1fr)); } .hud-guides span:nth-child(-n + 8) { display: block; } }
  @media (min-width: 64rem) { .hud-guides { grid-template-columns: repeat(12, minmax(0, 1fr)); } .hud-guides span:nth-child(n) { display: block; } }

  /* ---------- section label: "01 / SHOP" ---------- */
  .section-label {
    display: flex; align-items: center; gap: var(--space-3); margin: 0;
    font-family: var(--font-hud-mono); font-size: var(--type-2xs); font-weight: 500; letter-spacing: var(--tracking-label);
    text-transform: uppercase; color: var(--color-muted-text); max-width: none;
  }
  .section-label__index { color: var(--color-primary); font-variant-numeric: tabular-nums; }
  .section-label__sep { opacity: 0.6; }
  .section-label--rule::after { content: ""; flex: 1; height: 1px; background: var(--hud-line-strong, currentColor); min-width: var(--space-8); }

  /* ---------- crosshair "+" markers ---------- */
  .crosshair {
    --size: 0.875rem;
    position: absolute; width: var(--size); height: var(--size); pointer-events: none; z-index: 1;
    color: var(--crosshair-color, var(--color-primary));
  }
  .crosshair::before, .crosshair::after { content: ""; position: absolute; background: currentColor; }
  .crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; translate: -50% 0; }
  .crosshair::after { top: 50%; left: 0; right: 0; height: 1px; translate: 0 -50%; }
  .crosshair--tl { top: calc(var(--crosshair-inset, var(--space-4)) - var(--size) / 2); left: calc(var(--crosshair-inset, var(--space-4)) - var(--size) / 2); }
  .crosshair--tr { top: calc(var(--crosshair-inset, var(--space-4)) - var(--size) / 2); right: calc(var(--crosshair-inset, var(--space-4)) - var(--size) / 2); }
  .crosshair--bl { bottom: calc(var(--crosshair-inset, var(--space-4)) - var(--size) / 2); left: calc(var(--crosshair-inset, var(--space-4)) - var(--size) / 2); }
  .crosshair--br { bottom: calc(var(--crosshair-inset, var(--space-4)) - var(--size) / 2); right: calc(var(--crosshair-inset, var(--space-4)) - var(--size) / 2); }
  .crosshair--static { position: relative; display: inline-block; vertical-align: middle; }

  /* ---------- laser line: a 2px accent beam; hud.js scans it down its section on scroll ---------- */
  .laser-line {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 0.125rem; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--color-accent) 12%, var(--color-accent) 88%, transparent);
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--color-accent) 70%, transparent), 0 0 1.5rem color-mix(in srgb, var(--color-accent) 35%, transparent);
    opacity: 0.9; will-change: transform;
  }
  .laser-line--static { position: relative; display: block; }
  /* the scan itself: a CSS scroll-driven animation tied to the section's own scroll position (no JS); browsers
     without it get hud.js's ScrollTrigger fallback, and reduced motion keeps the line still at the top. Desktop only:
     phones and tablets keep a still line (less animation work while scrolling) */
  @media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
    @supports (animation-timeline: view()) {
      [data-laser] { view-timeline: --hud-laser block; }
      [data-laser] > .laser-line { animation: hud-laser-scan linear both; animation-timeline: --hud-laser; animation-range: cover 10% cover 90%; }
    }
  }
  @keyframes hud-laser-scan { from { top: 0; } to { top: calc(100% - 0.125rem); } }

  /* ---------- marquee ---------- */
  .marquee {
    --marquee-gap: var(--space-8);
    position: relative; display: flex; overflow: hidden; user-select: none;
    border-block: 1px solid var(--hud-line, color-mix(in srgb, currentColor 14%, transparent));
    padding-block: var(--space-4);
  }
  .marquee__track { display: flex; flex: none; width: max-content; animation: hud-marquee var(--marquee-duration, 45s) linear infinite; }
  .marquee--reverse .marquee__track { animation-direction: reverse; }
  .marquee__group { display: flex; flex: none; align-items: center; gap: var(--marquee-gap); padding-inline-end: var(--marquee-gap); margin: 0; list-style: none; padding-block: 0; padding-inline-start: 0; }
  .marquee__item { font-family: var(--font-hud-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1; text-transform: uppercase; white-space: nowrap; }
  /* each name is a full-height tap target (44px+) */
  .marquee__item a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: inherit; text-decoration: none; }
  .marquee__item--outline { color: transparent; -webkit-text-stroke: 0.02em var(--marquee-ink, var(--color-text-strong)); }
  .marquee__mark { position: relative; flex: none; width: 0.875rem; height: 0.875rem; color: var(--marquee-mark, currentColor); }
  .marquee__mark::before, .marquee__mark::after { content: ""; position: absolute; background: currentColor; }
  .marquee__mark::before { left: 50%; top: 0; bottom: 0; width: 1px; translate: -50% 0; }
  .marquee__mark::after { top: 50%; left: 0; right: 0; height: 1px; translate: 0 -50%; }
  .marquee--accent { --marquee-ink: var(--btn-primary-text); background: var(--color-primary); color: var(--btn-primary-text); border-color: transparent; }
  @media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }
  @keyframes hud-marquee { to { transform: translate3d(-50%, 0, 0); } }

  /* ---------- reveal text (hud.js wraps words; plain text without JS) ---------- */
  .reveal-text__word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
  .reveal-text__word > span { display: inline-block; }

  /* ---------- one-time reveals: hud.js adds .is-pending below the fold, .is-revealed as it scrolls in ---------- */
  .reveal-text.is-pending .reveal-text__word > span { transform: translateY(110%); }
  .reveal-text.is-revealed .reveal-text__word > span { transition: transform 0.8s var(--ease); transition-delay: calc(var(--w, 0) * 35ms); }
  .image-reveal.is-pending { clip-path: inset(0 0 100% 0); }
  .image-reveal.is-pending img { transform: scale(1.12); }
  .image-reveal.is-revealed { transition: clip-path 1s var(--ease); }
  .image-reveal.is-revealed img { transition: transform 1.3s var(--ease); }
  .reveal-up.is-pending { opacity: 0; transform: translateY(1.75rem); }
  .reveal-up.is-revealed { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--reveal-order, 0) * 60ms); }

  /* ---------- buttons: HUD style + magnetic behaviour ---------- */
  .hud-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
    min-height: var(--control); padding: var(--space-2) var(--space-6);
    font-family: var(--font-hud-mono); font-size: var(--type-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
    text-decoration: none; text-align: center; max-width: 100%; color: var(--color-text-strong);
    background: transparent; border: 1px solid currentColor; border-radius: 0; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .hud-btn .icon { width: 1.125rem; height: 1.125rem; }
  .hud-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--btn-primary-text); font-weight: 600; }
  /* dark sections: black on the brighter dark-theme red (5.25:1); white on it would fail AA */
  [data-theme="dark"] .hud-btn--primary { color: var(--color-background); }
  @media (hover: hover) {
    .hud-btn:hover { background: var(--color-text-strong); border-color: var(--color-text-strong); color: var(--color-background); }
    .hud-btn--primary:hover { background: var(--color-text-strong); border-color: var(--color-text-strong); color: var(--color-background); }
  }
  /* magnetic (desktop only): hud.js sets `translate` toward the mouse, the transition eases it with --ease */
  .hud-btn.magnetic-btn { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), translate 0.45s var(--ease); }
  .magnetic-btn__label { transition: translate 0.45s var(--ease); }
  .magnetic-btn__label { display: inline-flex; align-items: center; gap: inherit; pointer-events: none; }

  /* ---------- image reveal (hud.js wipes it open on scroll) ---------- */
  .image-reveal { position: relative; overflow: hidden; background: color-mix(in srgb, var(--color-surface) 70%, var(--color-background)); }
  .image-reveal img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .image-reveal--contain { background: transparent; }
  .image-reveal--contain img { object-fit: contain; }
  .image-reveal__tag {
    position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 1;
    padding: var(--space-1) var(--space-2); font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
    background: var(--color-text-strong); color: var(--color-background);
  }

  /* ---------- HUD card ---------- */
  .hud-card {
    --crosshair-inset: 0rem;
    --crosshair-color: var(--hud-line-strong, var(--color-muted-text));
    position: relative; display: grid; align-content: start; gap: var(--space-4); min-width: 0;
    padding: var(--space-4); color: var(--color-text);
    border: 1px solid var(--hud-line, color-mix(in srgb, currentColor 14%, transparent));
    background: var(--color-background);
    transition: border-color var(--dur) var(--ease);
  }
  .hud-card__meta { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-text); }
  .hud-card__index { color: var(--color-primary); }
  .hud-card__media { margin-inline: calc(var(--space-4) * -1); aspect-ratio: 4 / 3; }
  .hud-card__media.image-reveal { background: var(--hud-media-bg, color-mix(in srgb, var(--color-surface) 70%, var(--color-background))); }
  .hud-card__media img { object-fit: contain; padding: var(--space-3); mix-blend-mode: multiply; }
  [data-theme="dark"] .hud-card__media.image-reveal { --hud-media-bg: color-mix(in srgb, var(--color-text) 94%, var(--color-background)); }
  .hud-card__title { margin: 0; font-family: var(--font-hud-display); font-size: var(--fs-body); font-weight: 600; line-height: var(--leading-display); text-transform: uppercase; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
  .hud-card__title a { color: inherit; text-decoration: none; }
  .hud-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .hud-card__title a:focus-visible { outline: none; }
  .hud-card:has(.hud-card__title a:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
  .hud-card__text { margin: 0; color: var(--color-muted-text); font-size: var(--type-sm); }
  .hud-card__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--hud-line, color-mix(in srgb, currentColor 14%, transparent)); font-family: var(--font-hud-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-mono); }
  .hud-card__price { font-size: var(--fs-lead); font-weight: 600; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
  .hud-card__status { color: var(--color-muted-text); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--type-2xs); }
  .hud-card__status::before { content: ""; display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: var(--space-2); background: currentColor; vertical-align: 0.0625rem; }
  .hud-card__status--in_stock::before { background: var(--color-success); }
  .hud-card__status--on_order::before { background: var(--color-primary); }
  .hud-card__crosshair { transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
  @media (hover: hover) {
    .hud-card:hover { border-color: var(--color-primary); }
    .hud-card:hover .hud-card__crosshair { color: var(--color-primary); transform: scale(1.6); }
  }

  /* ---------- custom crosshair cursor (fine pointers only, created by hud.js) ---------- */
  .hud-cursor {
    position: fixed; top: 0; left: 0; z-index: 2147483000; width: 1.75rem; height: 1.75rem; pointer-events: none;
    color: var(--color-accent); opacity: 0; transition: opacity var(--dur-fast) var(--ease);
  }
  .hud-cursor__ring { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; transform: scale(0.3); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); opacity: 0; }
  .hud-cursor::before, .hud-cursor::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur) var(--ease); }
  .hud-cursor::before { left: 50%; top: 0; bottom: 0; width: 1px; translate: -50% 0; transform: scaleY(0.5); }
  .hud-cursor::after { top: 50%; left: 0; right: 0; height: 1px; translate: 0 -50%; transform: scaleX(0.5); }
  .hud-cursor.is-visible { opacity: 1; }
  .hud-cursor.is-link .hud-cursor__ring { transform: scale(1.5); opacity: 1; }
  .hud-cursor.is-link::before { transform: scaleY(0.25); }
  .hud-cursor.is-link::after { transform: scaleX(0.25); }
  html.has-hud-cursor, html.has-hud-cursor * { cursor: none; }
  html.has-hud-cursor :is(input, textarea, select, [contenteditable="true"]) { cursor: auto; }
  /* modal dialogs sit in the top layer, above the custom cursor: hand them back the system cursor */
  html:has(dialog[open]) .hud-cursor { display: none; }
  html.has-hud-cursor:has(dialog[open]) dialog[open], html.has-hud-cursor:has(dialog[open]) dialog[open] * { cursor: auto; }
  html.has-hud-cursor:has(dialog[open]) dialog[open] :is(a[href], button, summary, label) { cursor: pointer; }
}

/* ---------- HUD header (homepage: page local hudHeader) ----------
   Transparent over the dark hero; hud-header.js adds .has-hud-header (fixed), .is-solid once scrolled and
   .is-hidden while scrolling down. Without JS it is absolute and scrolls away with the hero. */
@layer components {
  .site-header--hud {
    position: absolute; top: 0; left: 0; right: 0;
    background: transparent; border-bottom-color: transparent; color: var(--color-text);
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease);
  }
  html.has-hud-header .site-header--hud { position: fixed; }
  .site-header--hud.is-stuck { box-shadow: none; }
  .site-header--hud.is-solid, .site-header--hud:has(.mega:not([hidden])) {
    background: color-mix(in srgb, var(--color-background) 92%, transparent);
    border-bottom-color: var(--color-border);
    backdrop-filter: blur(0.75rem);
  }
  .site-header--hud.is-hidden { transform: translateY(-100%); }
  .site-header--hud .primary-nav__link { color: var(--color-text); }
  .site-header--hud .icon-btn { border-radius: 0; }
  .site-header--hud .badge--count { font-family: var(--font-hud-mono); border-radius: 0; background: var(--color-primary); color: var(--color-background); }
  @media (hover: hover) { .site-header--hud .icon-btn:hover { background: color-mix(in srgb, var(--color-text) 12%, transparent); } }


  /* ---------- ticker (marquee variant): mono figures ---------- */
  .marquee--ticker { --marquee-gap: var(--space-6); }
  .marquee--ticker .marquee__item { font-family: var(--font-hud-mono); font-size: var(--type-xs); font-weight: 500; letter-spacing: var(--tracking-label); color: var(--color-muted-text); }
  .marquee--ticker .marquee__mark { width: 0.5rem; height: 0.5rem; color: var(--color-primary); }
  .marquee__value { font-weight: 600; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header--hud { transition: none; }
  .marquee__item--repeat, .marquee__item--repeat + .marquee__mark { display: none; }
}

/* ---------- shop card, set card, bento tile (homepage sections; also in /styleguide) ---------- */
@layer components {
  /* marquee with "•" separators instead of crosshairs */
  .marquee--dots .marquee__mark { width: auto; height: auto; }
  .marquee--dots .marquee__mark::before { content: "•"; position: static; width: auto; height: auto; background: none; translate: none; font-family: var(--font-hud-display); font-size: var(--type-2xl); line-height: 1; }
  .marquee--dots .marquee__mark::after { display: none; }

  /* shared: product photos sit on white (dark sections) or the surface tint (light), white blended away */
  .shop-card__media, .set-card__media, .bento-tile__media, .cat-card__media { background: var(--color-surface); }
  [data-theme="dark"] :is(.shop-card__media, .set-card__media, .bento-tile__media, .cat-card__media) { background: var(--color-text); }
  :is(.shop-card__media, .set-card__media, .bento-tile__media, .cat-card__media) img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

  /* category card (homepage rail): photo left, name + count right; a red hairline along the top grows and the arrow slides on hover / tap */
  .cat-card { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); width: 100%; height: 8rem; overflow: hidden; border: 1px solid var(--hud-line); color: inherit; text-decoration: none; transition: border-color var(--dur) var(--ease); }
  .cat-card::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 1px; background: var(--color-primary); transform-origin: left; transform: scaleX(0.3); transition: transform var(--dur) var(--ease); }
  .cat-card__media { display: block; height: 100%; }
  .cat-card__media picture { display: block; height: 100%; }
  .cat-card__media img { padding: var(--space-2); }
  .cat-card__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
  .cat-card__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: var(--font-hud-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.05; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-text-strong); overflow-wrap: anywhere; }
  .cat-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .cat-card__count { font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-muted-text); font-variant-numeric: tabular-nums; }
  .cat-card__arrow { display: inline-flex; color: var(--color-primary); transition: transform var(--dur) var(--ease); }
  .cat-card__arrow .icon { width: 1rem; height: 1rem; }
  .cat-card:is(:active, :focus-visible)::before { transform: scaleX(1); }
  .cat-card:is(:active, :focus-visible) .cat-card__arrow { transform: translateX(var(--space-1)); }
  @media (hover: hover) {
    .cat-card:hover { border-color: var(--hud-line-strong); }
    .cat-card:hover::before { transform: scaleX(1); }
    .cat-card:hover .cat-card__arrow { transform: translateX(var(--space-1)); }
  }

  /* shop card: large image, mono SKU, name, price, status badge, Add */
  .shop-card {
    --crosshair-inset: 0rem; --crosshair-color: var(--color-primary);
    position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
    color: var(--color-text); background: var(--color-background); border: 1px solid var(--hud-line, var(--color-border));
    transition: border-color var(--dur) var(--ease);
  }
  .shop-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
  .shop-card__media img { padding: var(--space-5); transition: transform 0.6s var(--ease); }
  .shop-card__status {
    position: absolute; top: var(--space-3); left: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.25rem 0.5rem; font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--color-text); background: var(--color-background); border: 1px solid var(--hud-line-strong, var(--color-border));
  }
  .shop-card__status::before { content: ""; width: 0.4375rem; height: 0.4375rem; background: var(--color-muted-text); }
  .shop-card__status--in_stock::before { background: var(--color-success); }
  .shop-card__status--on_order::before { background: var(--color-primary); }
  .shop-card__body { display: grid; align-content: start; gap: var(--space-3); flex: 1; padding: var(--space-4); }
  .shop-card__sku { display: flex; gap: var(--space-2); min-width: 0; margin: 0; max-width: none; font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-muted-text); }
  .shop-card__index { flex: none; color: var(--color-primary); }
  .shop-card__sku-code { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .shop-card__title { margin: 0; font-family: var(--font-hud-display); font-size: var(--fs-body); font-weight: 600; line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-text-strong); overflow-wrap: anywhere; }
  .shop-card__title a { color: inherit; text-decoration: none; }
  .shop-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .shop-card__title a:focus-visible { outline: none; }
  .shop-card:has(.shop-card__title a:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
  .shop-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--hud-line, var(--color-border)); }
  .shop-card__price { font-family: var(--font-hud-mono); font-size: var(--fs-lead); font-weight: 600; letter-spacing: var(--tracking-mono); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
  .shop-card__action { position: relative; z-index: 2; }
  .shop-card__add { min-height: var(--tap); padding-inline: var(--space-4); gap: var(--space-2); }
  .shop-card__add[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
  @media (hover: hover) {
    .shop-card:hover { border-color: var(--color-primary); }
    .shop-card:hover .shop-card__media img { transform: scale(1.04); }
  }

  /* set card: feature (generation toggle + live price) and compact */
  .set-card {
    --crosshair-inset: var(--space-3);
    position: relative; display: grid; align-content: start; min-width: 0; height: 100%;
    color: var(--color-text); text-decoration: none; background: var(--color-background); border: 1px solid var(--hud-line-strong, var(--color-border));
    transition: border-color var(--dur) var(--ease);
  }
  .set-card__media { position: relative; display: block; aspect-ratio: 16 / 10; }
  .set-card__media img { padding: var(--space-5); }
  .set-card__body { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5) var(--space-4); }
  .set-card__sku { margin: 0; max-width: none; font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-text); overflow-wrap: anywhere; }
  .set-card__title { margin: 0; font-family: var(--font-hud-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--leading-display); text-transform: uppercase; color: var(--color-text-strong); }
  .set-card__title a { color: inherit; text-decoration: none; }
  .set-card__form { display: grid; gap: var(--space-4); }
  .set-gen { min-width: 0; margin: 0; padding: 0; border: 0; }
  .set-gen__legend { margin-bottom: var(--space-2); padding: 0; font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-text); }
  .set-gen__options { display: grid; gap: var(--space-2); }
  .set-gen__opt { position: relative; display: grid; align-content: center; gap: 0.125rem; min-height: var(--control); padding: var(--space-2) var(--space-3); border: 1px solid var(--hud-line-strong, var(--color-border)); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
  .set-gen__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .set-gen__label { font-family: var(--font-hud-mono); font-size: var(--type-xs); font-weight: 600; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text); }
  .set-gen__total { font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-mono); color: var(--color-muted-text); }
  .set-gen__opt:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
  .set-gen__opt:has(input:checked) .set-gen__total { color: var(--color-text); }
  .set-gen__opt:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
  @media (min-width: 30rem) { .set-gen__options { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
  /* live price: the server rendered every generation's price; show the one whose radio is checked */
  .set-card__price { margin: 0; font-family: var(--font-hud-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
  .set-card__price-v { display: none; }
  .set-card:has(.set-gen__opt:nth-child(1) input:checked) .set-card__price-v:nth-child(1),
  .set-card:has(.set-gen__opt:nth-child(2) input:checked) .set-card__price-v:nth-child(2),
  .set-card:has(.set-gen__opt:nth-child(3) input:checked) .set-card__price-v:nth-child(3),
  .set-card:has(.set-gen__opt:nth-child(4) input:checked) .set-card__price-v:nth-child(4),
  .set-card:has(.set-gen__opt:nth-child(5) input:checked) .set-card__price-v:nth-child(5) { display: inline; }
  @supports not selector(:has(*)) { .set-card__price-v:first-child { display: inline; } }
  .set-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .set-card__status { margin: 0; font-family: var(--font-hud-mono); font-size: var(--type-2xs); }
  .set-card--compact .set-card__title { font-size: var(--type-2xl); }
  .set-card__from { font-family: var(--font-hud-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-muted-text); }
  .set-card__from strong { font-size: var(--type-base); color: var(--color-text-strong); }
  .set-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .set-card__chip { padding: 0.25rem 0.5rem; border: 1px solid var(--hud-line-strong, var(--color-border)); font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-muted-text); }
  /* desktop feature: a wide photo, then the title beside the generation toggle, price and actions */
  @media (min-width: 64rem) {
    .set-card--feature { display: flex; flex-direction: column; }
    .set-card--feature .set-card__media { flex: 1; aspect-ratio: auto; min-height: 20rem; }
    /* set photos are small (408–680 px): the big card centres the photo at a size it can show sharply */
    .set-card--feature .set-card__media img { position: absolute; inset: 0; margin: auto; max-width: 38rem; max-height: 26rem; }
    .set-card--feature .set-card__media img { padding: var(--space-8); }
    .set-card--feature .set-card__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr; align-items: start; column-gap: var(--space-8); padding: var(--space-6); }
    .set-card--feature .set-card__sku, .set-card--feature .set-card__title { grid-column: 1; }
    .set-card--feature .set-card__form { grid-column: 2; grid-row: 1 / span 2; }
    .set-card--feature .set-gen__options { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  }
  @media (hover: hover) { .set-card--compact:hover, .set-card--feature:hover { border-color: var(--color-primary); } }

  /* bento tile */
  .bento-tile { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; color: var(--color-text); text-decoration: none; background: var(--color-background); border: 1px solid var(--hud-line, var(--color-border)); transition: border-color var(--dur) var(--ease); }
  .bento-tile__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
  .bento-tile__media img { padding: var(--space-3); transition: transform 0.6s var(--ease); }
  .bento-tile__body { display: grid; gap: var(--space-1); padding: var(--space-3); }
  .bento-tile__tag { font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-muted-text); overflow-wrap: anywhere; }
  .bento-tile__index { margin-right: var(--space-2); color: var(--color-primary); }
  .bento-tile__name { font-family: var(--font-hud-display); font-size: var(--fs-body); font-weight: 600; line-height: var(--leading-tight); text-transform: uppercase; color: var(--color-text-strong); overflow-wrap: anywhere; }
  .bento-tile__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); font-family: var(--font-hud-mono); font-size: var(--type-2xs); text-transform: uppercase; }
  .bento-tile__price { font-weight: 600; color: var(--color-text-strong); }
  .bento-tile--big .bento-tile__name { font-size: var(--fs-h3); line-height: var(--leading-display); }
  .bento-tile--big .bento-tile__media img { padding: var(--space-6); }
  @media (min-width: 64rem) {
    .bento-tile--big .bento-tile__media { flex: 1; aspect-ratio: auto; min-height: 20rem; }
    .bento-tile--big .bento-tile__body { padding: var(--space-5); }
  }
  @media (hover: hover) {
    .bento-tile:hover { border-color: var(--color-primary); }
    .bento-tile:hover .bento-tile__media img { transform: scale(1.05); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-card__media img, .set-card, .set-gen__opt, .bento-tile, .bento-tile__media img { transition: none; }
}

/* ---------- quote card, press card, HUD footer ---------- */
@layer components {
  /* quote card: an approved review in large type */
  .quote-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); height: 100%; margin: 0; padding: var(--space-6) var(--space-5); color: var(--color-text); background: var(--color-background); border: 1px solid var(--hud-line-strong, var(--color-border)); }
  .quote-card__stars { display: inline-flex; gap: 0.125rem; font-size: 1rem; line-height: 1; color: var(--hud-line-strong, var(--color-border)); }
  .quote-card__stars .is-on { color: var(--color-primary); }
  .quote-card__body { margin: 0; }
  .quote-card__text {
    margin: 0; max-width: none; font-family: var(--font-hud-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--color-text);
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  }
  .quote-card__more { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--font-hud-body); font-size: var(--fs-small); font-weight: 600; color: var(--color-text-strong); text-decoration: underline; text-underline-offset: 0.2em; }
  .quote-card__meta { display: grid; gap: var(--space-1); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--hud-line, var(--color-border)); font-family: var(--font-hud-body); }
  .quote-card__author { font-size: var(--fs-name); font-weight: 600; color: var(--color-text-strong); }
  .quote-card__details { font-size: var(--fs-meta); color: var(--color-muted-text); }
  @media (min-width: 64rem) { .quote-card__text { font-size: var(--fs-lead); } }
  @media (hover: hover) { .quote-card__more:hover { color: var(--color-primary); } }

  /* press card: date, title, excerpt; the title link covers the card */
  .press-card { --crosshair-inset: 0rem; --crosshair-color: var(--color-primary); position: relative; display: grid; align-content: start; min-width: 0; color: var(--color-text); background: var(--color-background); border: 1px solid var(--hud-line, var(--color-border)); transition: border-color var(--dur) var(--ease); }
  .press-card__media { aspect-ratio: 16 / 9; background: var(--hud-media-bg, var(--color-surface)); }
  .press-card__media img { width: 100%; height: 100%; object-fit: contain; }
  .press-card__body { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-4); }
  .press-card__meta { display: flex; gap: var(--space-3); margin: 0; max-width: none; font-family: var(--font-hud-mono); font-size: var(--type-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted-text); }
  .press-card__index { color: var(--color-primary); }
  .press-card__title { margin: 0; font-family: var(--font-hud-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--leading-display); text-transform: uppercase; color: var(--color-text-strong); }
  .press-card__title a { color: inherit; text-decoration: none; }
  .press-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .press-card__title a:focus-visible { outline: none; }
  .press-card:has(.press-card__title a:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
  .press-card__excerpt { margin: 0; font-size: var(--type-sm); color: var(--color-muted-text); }
  @media (hover: hover) { .press-card:hover { border-color: var(--color-primary); } }

  /* HUD footer (homepage): newsletter + back to top, link columns, giant wordmark, legal line */
  /* the on-dark button token (#ff0000 + white) fails AA; black on the dark red passes (5.25:1) */
}

@media (prefers-reduced-motion: reduce) { .press-card { transition: none; } }

/* Smooth scroll (Lenis) housekeeping */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .hud-cursor__ring, .hud-cursor::before, .hud-cursor::after, .hud-card__crosshair { transition: none; }

  /* type scale (docs/brand-typography.json roles): card titles in the body font, normal case, two lines at most;
     prices 1.125rem / 600 */
  .shop-card__title, .hud-card__title, .bento-tile__name {
    font-family: var(--font-hud-body); font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bento-tile--big .bento-tile__name { font-family: var(--font-hud-display); text-transform: uppercase; -webkit-line-clamp: 3; }
  .shop-card__price, .hud-card__price, .bento-tile__price, .set-card__price { font-weight: 600; }
}