/* ============================================================================
   VORTEX ARCHIVE — style.css
   A 1:1 translation of DESIGN.md ("Elektron" hardware control panel at midnight).
   Architecture: primitives -> semantics -> components.
   Monochrome chrome. Color lives in photography + one editorial accent only.
   No gradients. No shadows. 0px radius everywhere except inputs (7px).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   LAYER 1 — PRIMITIVE TOKENS (verbatim from DESIGN.md)
   --------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-page-canvas: #222222;
  --color-deep-surface: #151515;
  --color-void: #000000;
  --color-platinum: #eeeef2;
  --color-pure-white: #ffffff;
  --color-iron: #333337;
  --color-ash: #b4b4b8;

  /* The single chromatic punctuation — the section-heading underline and the
     one editorial accent tile. DESIGN.md names "red/orange ~ #e63946 or similar". */
  --color-accent: #e63946;

  /* Typography — Font Families (DESIGN.md substitutes: Inter / VT323) */
  --font-text: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dot-matrix: 'VT323', ui-monospace, 'Courier New', monospace;

  /* Typography — Scale */
  --text-caption: 11px;      --leading-caption: 1.5;     --tracking-caption: 0.46px;
  --text-body-sm: 14px;      --leading-body-sm: 1.5;     --tracking-body-sm: 0.56px;
  --text-body: 16px;         --leading-body: 1.5;        --tracking-body: 0.42px;
  --text-subheading: 18px;   --leading-subheading: 1.5;  --tracking-subheading: 0.31px;
  --text-heading-sm: 24px;   --leading-heading-sm: 1.33; --tracking-heading-sm: 0.96px;
  --text-heading: 31px;      --leading-heading: 1.33;    --tracking-heading: 1.24px;
  --text-heading-lg: 35px;   --leading-heading-lg: 1.2;  --tracking-heading-lg: 0.46px;
  --text-display: 64px;      --leading-display: 0.95;    --tracking-display: -0.64px;

  /* Typography — Weights (heaviest in the system is 500) */
  --fw-regular: 400;
  --fw-450: 450;
  --fw-medium: 500;

  /* Spacing (4px grid) */
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-28: 28px;
  --spacing-60: 60px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 72px;
  --card-padding: 21px;

  /* Border Radius — square everywhere; 7px reserved for inputs only */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-icons: 0px;
  --radius-inputs: 7px;
  --radius-buttons: 0px;

  /* ----- LAYER 2 — SEMANTIC TOKENS ----- */
  --bg-canvas: var(--color-page-canvas);
  --bg-surface: var(--color-deep-surface);
  --bg-void: var(--color-void);
  --bg-input: var(--color-iron);
  --fg-text: var(--color-platinum);
  --fg-muted: var(--color-ash);
  --fg-strong: var(--color-pure-white);
  --rule: var(--color-platinum);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg-canvas);
  color: var(--fg-text);
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--fg-text); text-decoration: none; }
a:hover { color: var(--fg-strong); }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Accessibility — visible keyboard focus everywhere (ui-ux-pro-max).
   The design refuses focus glows on mouse use, but keyboard users get a clear
   high-contrast target via :focus-visible. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

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

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-platinum);
  color: var(--color-page-canvas);
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-body-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 200;
}
.skip-link:focus { left: var(--spacing-16); top: var(--spacing-16); }

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.vx-wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
}

.vx-section { padding-block: var(--section-gap); }
.vx-section--tight { padding-block: var(--spacing-60); }

.vx-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------------------------------------------------------------------------
   TYPOGRAPHY UTILITIES (mapped to the DESIGN.md scale)
   --------------------------------------------------------------------------- */
.t-caption   { font-size: var(--text-caption);   line-height: var(--leading-caption);   letter-spacing: var(--tracking-caption); }
.t-body-sm   { font-size: var(--text-body-sm);   line-height: var(--leading-body-sm);   letter-spacing: var(--tracking-body-sm); }
.t-body      { font-size: var(--text-body);      line-height: var(--leading-body);      letter-spacing: var(--tracking-body); }
.t-subhead   { font-size: var(--text-subheading);line-height: var(--leading-subheading);letter-spacing: var(--tracking-subheading); }

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-450);
  /* fluid, capped at the DESIGN.md 64px display size */
  font-size: clamp(38px, 6.4vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-text);
}

.t-heading-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.t-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-450);
  font-size: clamp(26px, 3.6vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.t-heading-sm {
  font-family: var(--font-display);
  font-weight: var(--fw-450);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

/* Decorative dot-matrix accent — digi one v2 substitute. Use sparingly. */
.t-dot {
  font-family: var(--font-dot-matrix);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: 0.033em;
  color: var(--fg-text);
  text-transform: uppercase;
}

.t-muted { color: var(--fg-muted); }
.t-upper { text-transform: uppercase; }

/* The single chromatic punctuation: an 80x4 accent rule above a heading. */
.accent-rule {
  display: block;
  width: 80px;
  height: 4px;
  background: var(--color-accent);
  margin-bottom: var(--spacing-16);
}

/* Section heading block (DESIGN.md "Section Display Heading") */
.section-head { margin-bottom: var(--spacing-28); }
.section-head .lede {
  margin-top: var(--spacing-12);
  max-width: 64ch;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--fg-text);
}

/* ---------------------------------------------------------------------------
   COMPONENT — Top Navigation Bar
   Full-bleed #222222, ~64px, no border, no fill.
   --------------------------------------------------------------------------- */
.vx-nav {
  position: relative;
  background: var(--bg-canvas);
  min-height: 64px;
}
.vx-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-height: 64px;
}
.vx-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}
.vx-nav__brand img { width: 32px; height: 32px; object-fit: contain; }
.vx-nav__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-text);
}
.vx-nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-28);
}
.vx-nav__links a {
  font-size: var(--text-body-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-text);
}
.vx-nav__links a[aria-current="page"] { color: var(--fg-strong); }
.vx-nav__links a:hover { color: var(--fg-strong); }

.vx-nav__toggle {
  display: none;
  background: var(--bg-void);
  border: 1px solid var(--rule);
  color: var(--fg-text);
  width: 40px; height: 40px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.vx-nav__toggle svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  .vx-nav__links { display: none; }
  .vx-nav__links.is-open {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 64px;
    flex-direction: column;
    gap: 0;
    background: var(--bg-surface);
    padding: var(--spacing-16);
    z-index: 90;
  }
  .vx-nav__links.is-open a { padding-block: var(--spacing-12); }
  .vx-nav__toggle { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
   COMPONENT — Buttons
   --------------------------------------------------------------------------- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg-text);
  border-radius: var(--radius-buttons);
  padding: 11px 24px;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s linear, color .15s linear;
}
/* No fill at rest; invert to platinum-on-canvas on interaction. */
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--color-platinum);
  color: var(--color-page-canvas);
}

.btn-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
  background: var(--bg-void);
  color: var(--fg-text);
  border: 1px solid var(--rule);
  border-radius: var(--radius-buttons);
  padding: 11px 24px;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s linear, color .15s linear;
}
.btn-filled:hover,
.btn-filled:focus-visible {
  background: var(--color-platinum);
  color: var(--color-page-canvas);
}

/* Ghost text link with chevrons — "[ DECRYPT ENGRAM ]" */
.ghost-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-text);
  border-bottom: 1px solid transparent;
  padding-block: var(--spacing-4);
}
.ghost-link:hover,
.ghost-link:focus-visible {
  color: var(--fg-strong);
  border-bottom-color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
   COMPONENT — Image frames (16:9 hero / 1:1 thumbnail)
   Visual Integrity Rule: full height visible, never cropped -> object-fit:contain
   over a recessed surface (value-based letterbox, not shadow).
   --------------------------------------------------------------------------- */
.frame {
  position: relative;
  width: 100%;
  background: var(--bg-surface);
  overflow: hidden;
}
.frame > img,
.frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--1x1  { aspect-ratio: 1 / 1; }
.frame--void { background: var(--bg-void); }

/* ---------------------------------------------------------------------------
   COMPONENT — Hero band (cinematic full-bleed key-art with composited type)
   The photograph carries the colour; the scrim is a photographic treatment
   (like the version-release banner), not UI chrome. Chrome stays monochrome.
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-void);
  border-bottom: 1px solid var(--rule);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* near-zero crop: source 1.75 ≈ frame ratio; keeps key-art full-bleed */
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(17,17,17,0.96) 0%, rgba(17,17,17,0.62) 34%, rgba(17,17,17,0.10) 66%, rgba(17,17,17,0.34) 100%),
    linear-gradient(to right, rgba(17,17,17,0.74) 0%, rgba(17,17,17,0.18) 48%, rgba(17,17,17,0) 78%);
}
/* fine engineered hairline grid — silkscreen texture, value-only, no colour */
.hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    repeating-linear-gradient(to right, rgba(238,238,242,0.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to bottom, rgba(238,238,242,0.05) 0 1px, transparent 1px 96px);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 60%);
          mask-image: linear-gradient(to top, transparent 0%, #000 60%);
}
.hero__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(440px, 78vh, 760px);
  padding-block: var(--spacing-60);
}
.hero__kicker { display: flex; align-items: center; gap: var(--spacing-12); margin-bottom: var(--spacing-16); }
.hero__kicker .bar { display: inline-block; width: 48px; height: 2px; background: var(--color-accent); }
.hero__title { margin-bottom: var(--spacing-16); max-width: 20ch; }
.hero__sub {
  max-width: 62ch; color: var(--fg-text);
  font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading);
}
.hero__cta { margin-top: var(--spacing-28); display: flex; flex-wrap: wrap; gap: var(--spacing-16); }
/* spec readout strip beneath the headline */
.hero__readout {
  display: flex; flex-wrap: wrap; gap: var(--spacing-12) var(--spacing-28);
  margin-top: var(--spacing-28);
  padding-top: var(--spacing-16);
  border-top: 1px solid rgba(238,238,242,0.28);
}
.hero__readout span { font-family: var(--font-dot-matrix); font-size: var(--text-body-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-text); }
.hero__readout b { color: var(--color-ash); font-weight: 400; }

/* ---------------------------------------------------------------------------
   COMPONENT — Cards / grids
   --------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--spacing-28); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(3, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Intelligence Grid card (reviews-hub) */
.card {
  background: var(--bg-surface);
  border: 0;
  border-radius: var(--radius-cards);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.card__body { padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--spacing-12); }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); }
.card__title { color: var(--fg-text); }
.card__summary { color: var(--fg-text); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); }
.card__foot { margin-top: auto; padding-top: var(--spacing-12); display:flex; align-items:center; justify-content:space-between; gap: var(--spacing-12); }

/* ---------------------------------------------------------------------------
   COMPONENT — Synaptic Resonance Score
   --------------------------------------------------------------------------- */
.resonance { display: inline-flex; align-items: baseline; gap: var(--spacing-4); }
.resonance__value {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-heading-lg);
  line-height: 1;
  letter-spacing: var(--tracking-heading-lg);
  color: var(--fg-text);
}
.resonance__value--xl { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.resonance__max { font-size: var(--text-body-sm); color: var(--fg-muted); letter-spacing: 0.04em; }

/* sub-metric readouts */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-12) var(--spacing-28); }
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } }
.metric { display: flex; flex-direction: column; gap: var(--spacing-4); }
.metric__label { font-family: var(--font-dot-matrix); font-size: var(--text-body-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.metric__bar { position: relative; height: 4px; background: var(--bg-input); }
.metric__bar > span { position: absolute; inset: 0 auto 0 0; background: var(--color-platinum); }
.metric__num { font-family: var(--font-dot-matrix); font-size: var(--text-body-sm); letter-spacing: 0.06em; color: var(--fg-text); }

/* ---------------------------------------------------------------------------
   COMPONENT — Dot-matrix tag (digi one v2)
   --------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  font-family: var(--font-dot-matrix);
  font-size: var(--text-body-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-text);
  border: 1px solid var(--rule);
  border-radius: var(--radius-tags);
  padding: 2px 8px;
}

/* ---------------------------------------------------------------------------
   COMPONENT — Editorial accent tile (Sound Pack Highlight equivalent)
   The one loud chromatic moment: solid red/coral fill, oversized white type.
   --------------------------------------------------------------------------- */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-28); align-items: stretch; }
@media (max-width: 768px) { .editorial { grid-template-columns: 1fr; } }
.editorial__copy { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-16); }
.editorial__tile {
  background: var(--color-accent);
  color: var(--color-pure-white);
  border-radius: 0;
  padding: var(--spacing-60) var(--spacing-28);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
}
.editorial__tile .kicker { font-family: var(--font-dot-matrix); font-size: var(--text-body-sm); letter-spacing: 0.1em; text-transform: uppercase; }
.editorial__tile .big {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-heading-lg);
  line-height: 1.0;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: var(--spacing-12);
}

/* ---------------------------------------------------------------------------
   COMPONENT — Version Release Banner / Priority Transmission
   --------------------------------------------------------------------------- */
.banner__utility {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-16); flex-wrap: wrap;
  padding-block: var(--spacing-16);
}
.banner__utility .copy { font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--fg-text); }
.banner__utility .ctas { display: flex; gap: var(--spacing-12); flex-wrap: wrap; }
/* Parallax window: fixed-aspect frame, oversized image that drifts on scroll.
   The image is 130% tall and vertically centred so it can translate ±14%
   without ever revealing an edge. */
.banner__media { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--bg-void); overflow: hidden; }
.banner__media img {
  position: absolute; left: 0; top: -15%;
  width: 100%; height: 130%;
  object-fit: cover; object-position: center;
  transform: translate3d(0,0,0); will-change: transform;
}
/* subtle silkscreen scanline so the band reads as a live signal, not a still */
.banner__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px);
  opacity: 0.35;
}

/* ---------------------------------------------------------------------------
   COMPONENT — Carousel (accessory/engram row)
   --------------------------------------------------------------------------- */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--spacing-28);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--spacing-12);
}
.carousel__track > * { scroll-snap-align: start; }
.carousel__track::-webkit-scrollbar { height: 6px; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--bg-input); }
.carousel__nav { display: flex; gap: var(--spacing-12); margin-bottom: var(--spacing-16); justify-content: flex-end; }
.carousel__btn {
  width: 44px; height: 44px;
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  color: var(--fg-text);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel__btn:hover, .carousel__btn:focus-visible { background: var(--color-platinum); color: var(--color-page-canvas); }
.carousel__btn svg { width: 18px; height: 18px; }

.product-card { display: flex; flex-direction: column; gap: var(--spacing-12); }
.product-card__name { font-size: var(--text-body); color: var(--fg-text); padding-top: var(--spacing-4); }

/* ---------------------------------------------------------------------------
   COMPONENT — Forms / inputs
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--spacing-4); margin-bottom: var(--spacing-16); }
.field label {
  font-family: var(--font-dot-matrix);
  font-size: var(--text-body-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-text);
}
.input, .textarea {
  background: var(--bg-input);
  border: 1px solid var(--rule);
  border-radius: var(--radius-inputs);
  color: var(--fg-text);
  font-family: var(--font-text);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  padding: 14px 18px;
  width: 100%;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); }
/* No glow on focus — border thickens (DESIGN.md). */
.input:focus, .textarea:focus { outline: none; border-width: 2px; padding: 13px 17px; }
.textarea { min-height: 140px; resize: vertical; }

.form-note { font-size: var(--text-body-sm); color: var(--fg-muted); letter-spacing: var(--tracking-body-sm); }

/* PRG status banners — monochrome; accent rule for the confirm state */
.alert {
  border: 1px solid var(--rule);
  background: var(--bg-surface);
  padding: var(--spacing-16);
  margin-bottom: var(--spacing-28);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
}
.alert--ok { border-left: 4px solid var(--color-accent); }

/* ---------------------------------------------------------------------------
   ARTICLE / PROSE (engrams + legal)
   --------------------------------------------------------------------------- */
.prose p { margin-bottom: var(--spacing-16); max-width: 72ch; }
.prose p:last-child { margin-bottom: 0; }
.prose ul.bullets { list-style: square; padding-left: var(--spacing-28); max-width: 72ch; }
.prose ul.bullets li { margin-bottom: var(--spacing-12); }
.engram-section { margin-top: var(--section-gap); }
.engram-section__head { margin-bottom: var(--spacing-16); }
.engram-lead {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  max-width: 72ch;
}
.dossier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--spacing-16);
  margin-top: var(--spacing-16);
}
@media (max-width: 768px) { .dossier { grid-template-columns: repeat(2, 1fr); } }
.dossier dt { font-family: var(--font-dot-matrix); font-size: var(--text-body-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.dossier dd { margin: var(--spacing-4) 0 0 0; font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--fg-text); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-12); }
@media (max-width: 768px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }

.verdict {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--spacing-28);
}

/* breadcrumb */
.crumbs { display:flex; gap: var(--spacing-12); align-items:center; flex-wrap: wrap; font-size: var(--text-body-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--spacing-16); }
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--fg-text); }

/* ---------------------------------------------------------------------------
   WIDE DECORATIVE BANDS (bg-*.webp panoramas / parallax)
   --------------------------------------------------------------------------- */
.band {
  position: relative;
  background-color: var(--bg-void);
  background-size: cover;
  background-position: center;
}
.band--parallax { background-attachment: fixed; }
.band__scrim { background: rgba(0,0,0,0.62); }
.band__scrim .vx-wrap { padding-block: var(--section-gap); }

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
.vx-footer { border-top: 1px solid var(--rule); padding-block: var(--spacing-28); margin-top: var(--section-gap); }
.vx-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); flex-wrap: wrap; }
.vx-footer__links { display: flex; flex-wrap: wrap; align-items: center; }
.vx-footer__links li { display: flex; align-items: center; }
.vx-footer__links a {
  font-size: var(--text-body-sm);
  letter-spacing: 0.04em;
  color: var(--fg-text);
  padding-inline: var(--spacing-16);
}
.vx-footer__links li + li { border-left: 1px solid var(--rule); }
.vx-footer__links li:first-child a { padding-left: 0; }
.vx-footer__copy { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--fg-muted); }

/* ---------------------------------------------------------------------------
   COMPONENT — Neural Link Consent (cookie overlay)
   --------------------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-void);
  border-top: 1px solid var(--rule);
  z-index: 150;
}
.consent[hidden] { display: none; }
.consent__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-28); flex-wrap: wrap;
  padding-block: var(--spacing-16);
}
.consent__copy { font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--fg-text); max-width: 78ch; }
.consent__copy a { color: var(--fg-text); border-bottom: 1px solid var(--color-accent); }
.consent__actions { display: flex; gap: var(--spacing-12); }

/* ---------------------------------------------------------------------------
   UTILITIES
   --------------------------------------------------------------------------- */
.stack-16 > * + * { margin-top: var(--spacing-16); }
.stack-28 > * + * { margin-top: var(--spacing-28); }
.flow > * + * { margin-top: var(--spacing-12); }
.center { text-align: center; }
.mt-28 { margin-top: var(--spacing-28); }
.mt-60 { margin-top: var(--spacing-60); }
.maxw { max-width: 72ch; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   INTERACTION POLISH — motion + reveals (value/transform only, never shadow)
   --------------------------------------------------------------------------- */
.frame > img { transition: transform .55s cubic-bezier(.2,.6,.2,1); will-change: transform; }

/* Intelligence card: accent hairline reveal + key-art push-in */
.card { position: relative; transition: background-color .2s linear; }
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.card:hover::after, .card:focus-within::after { transform: scaleX(1); }
.card:hover, .card:focus-within { background: #191919; }
.card:hover .frame > img, .card:focus-within .frame > img { transform: scale(1.05); }

/* Carousel + gallery + dispatch figures: same push-in on hover/focus */
.product-card:hover .frame > img,
.product-card:focus-within .frame > img,
.gallery .frame:hover > img,
.gallery .frame:focus-within > img { transform: scale(1.05); }

figure.frame { transition: outline-color .2s linear; outline: 1px solid transparent; outline-offset: -1px; }
figure.frame:hover { outline-color: rgba(238,238,242,0.4); }
figure.frame:hover > img { transform: scale(1.05); }

/* Decrypt link: arrow nudge */
.ghost-link { transition: color .15s linear, border-color .15s linear; }
.ghost-link:hover, .ghost-link:focus-visible { transform: translateX(2px); }

/* Editorial accent tile: subtle inset frame so the red block reads as hardware */
.editorial__tile { position: relative; }
.editorial__tile::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(255,255,255,0.35); pointer-events: none;
}

/* Buttons: tactile press */
.btn-ghost:active, .btn-filled:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel__track { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; }
  .frame > img { transform: none !important; }
}