/* ==========================================================================
   WANTED WIRE DESIGN TOKENS
   Base approved 2026-09-17 (see DESIGN_LOCK.md). Miami palette added
   2026-09-19 — additive only: every token the locked design referenced is
   unchanged, so nothing that was approved can shift underneath it.

   THE COLOUR RULE
   Each section declares ONE accent by setting --a (and its soft/ink
   companions) on itself. Everything inside — the eyebrow rule, the hover
   border, the card glow, the atmosphere behind the band — reads --a. That is
   how a page gets colour without every component learning five palettes, and
   how one section stays one colour instead of becoming a paint chart.
   ========================================================================== */
:root {
  /* --- the locked base --- */
  --ink: #080A0B;
  --surface: #171B1C;
  --surface-2: #1F2425;
  --line: #2A3032;
  --lime: #D6FF3F;
  --lime-ink: #0B0F04;
  --cream: #F2EEE6;
  --cream-dim: #A8A9A4;
  --sunset: #FF713D;
  --radius: 10px;
  --radius-lg: 14px;
  --shell: 1440px;
  --gutter: clamp(1rem, 3vw, 2.75rem);

  /* --- the Miami palette --- */
  --pink: #FF4FA3;
  --cyan: #32D9E6;
  --purple: #8055F5;
  --orange: #FF9157;

  /* Ink companions: the text colour that sits ON each hue at full strength.
     Checked, not guessed — lime, cyan and orange are light hues and take dark
     text; pink and purple are dark enough to take the cream. */
  --pink-ink: #FFFFFF;
  --cyan-ink: #04191B;
  --purple-ink: #FFFFFF;
  --orange-ink: #21100A;

  /* The default accent, if a section declares none, is the brand. */
  --a: var(--lime);
  --a-ink: var(--lime-ink);
  --a-rgb: 214 255 63;

  /* Deep tints of each hue, for backgrounds that carry colour without
     dropping text contrast. These are the "broad, restrained gradient" end. */
  --deep-pink: #1C0A15;
  --deep-cyan: #04191B;
  --deep-purple: #140C29;
  --deep-orange: #1D0F08;
  --deep-lime: #101404;
}

/* Every accent as a one-line opt-in. Put ww-a--pink on a section and the
   whole section turns pink: rules, borders, glows, focus rings, atmosphere. */
.ww-a--lime   { --a: var(--lime);   --a-ink: var(--lime-ink);   --a-rgb: 214 255 63;  --a-deep: var(--deep-lime); }
.ww-a--pink   { --a: var(--pink);   --a-ink: var(--pink-ink);   --a-rgb: 255 79 163;  --a-deep: var(--deep-pink); }
.ww-a--cyan   { --a: var(--cyan);   --a-ink: var(--cyan-ink);   --a-rgb: 50 217 230;  --a-deep: var(--deep-cyan); }
.ww-a--purple { --a: var(--purple); --a-ink: var(--purple-ink); --a-rgb: 128 85 245;  --a-deep: var(--deep-purple); }
.ww-a--orange { --a: var(--orange); --a-ink: var(--orange-ink); --a-rgb: 255 145 87;  --a-deep: var(--deep-orange); }
:root { --a-deep: var(--deep-lime); }

/* ---------------------------------------------------------------------------
   ATMOSPHERE
   A band of colour behind a section, not a colour applied to it. Two soft
   radial pools in the section's own accent over the charcoal, so the page
   moves through colour as you scroll instead of presenting nine identical
   dark boxes. It sits at z-index 0 behind content and never touches text.
   --------------------------------------------------------------------------- */
/* No overflow clipping here, deliberately. Clipping the section did stop the
   drift animation escaping its box, but `overflow: clip` on an ancestor kills
   `position: sticky` inside it — which silently broke the Watch page's sticky
   queue. The drift now animates background-position instead of transform, so
   it cannot leave the element in the first place and nothing needs clipping. */
.ww-atmos { position: relative; isolation: isolate; }
.ww-atmos > * { position: relative; z-index: 1; }
.ww-atmos::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 12% 0%, rgb(var(--a-rgb) / 0.16), transparent 58%),
    radial-gradient(60% 80% at 92% 100%, rgb(var(--a-rgb) / 0.10), transparent 62%),
    linear-gradient(180deg, var(--a-deep) 0%, transparent 40%, transparent 62%, var(--a-deep) 100%);
  /* Oversized so the pools have somewhere to drift to without the box moving. */
  background-size: 130% 130%, 130% 130%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0;
  background-repeat: no-repeat;
}
/* The seam between two differently-accented bands: a thin lit edge rather
   than a hard line, so the colour change reads as lighting. */
.ww-seam { position: relative; }
.ww-seam::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--a-rgb) / 0.55), transparent);
}

/* ---------------------------------------------------------------------------
   ACCENT-AWARE COMPONENTS
   These override the neutral defaults only where a section has declared an
   accent, so an un-accented section looks exactly as it did before.
   --------------------------------------------------------------------------- */
.ww-atmos .eyebrow__rule,
.ww-a--pink .eyebrow__rule, .ww-a--cyan .eyebrow__rule,
.ww-a--purple .eyebrow__rule, .ww-a--orange .eyebrow__rule { background: var(--a); }

.ww-a--pink .dot, .ww-a--cyan .dot, .ww-a--purple .dot, .ww-a--orange .dot { color: var(--a); }

/* A pill in the section's own colour. */
.ww-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.24rem 0.66rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--a); background: rgb(var(--a-rgb) / 0.12);
  border: 1px solid rgb(var(--a-rgb) / 0.45);
}
.ww-chip--solid { color: var(--a-ink); background: var(--a); border-color: var(--a); }

/* The accent button. Primary actions stay lime everywhere — that is the brand
   and it is not up for grabs per section — so this is for secondary actions
   that should still carry the section's colour. */
.btn--accent {
  background: transparent; color: var(--a);
  border: 1px solid rgb(var(--a-rgb) / 0.5);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.15rem; border-radius: var(--radius);
  font-weight: 700; text-decoration: none;
}
.btn--accent:hover { background: rgb(var(--a-rgb) / 0.12); border-color: var(--a); }

/* Focus follows the accent too, so the ring is always visible against the
   band it is on. */
.ww-atmos a:focus-visible, .ww-atmos button:focus-visible,
.ww-atmos summary:focus-visible, .ww-atmos input:focus-visible {
  outline: 3px solid var(--a); outline-offset: 2px;
}

/* ==========================================================================
   SHORT PRODUCT GRIDS
   A category with one product was sitting in a four-column grid with three
   empty columns beside it. The grids now declare how many items they hold and
   cap their track count to match, so a short row is a short row rather than a
   full-width row that is mostly nothing.

   Only above 1000px: below that the grids are already one or two columns and
   there is no empty track to remove.
   ========================================================================== */
/* One item never belongs in a multi-column grid at any width above a phone,
   so this rule starts lower than the others. */
@media (min-width: 640px) {
  .gps[data-n="1"], .gcards[data-n="1"], .pcards[data-n="1"] {
    grid-template-columns: minmax(0, 26rem);
  }
}
@media (min-width: 1000px) {
  .gps[data-n="2"], .gcards[data-n="2"], .pcards[data-n="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 62rem;
  }
  .gps[data-n="3"], .gcards[data-n="3"], .pcards[data-n="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Anything with four or more keeps the responsive auto grid it already had. */

/* The sticky header is 88px tall, so an anchor that lands flush with the top
   of the viewport lands underneath it. */
:target, [id] { scroll-margin-top: 6.5rem; }