/* Hallmark · macrostructure: Product Detail (studied DNA) · tone: luxe, straight-talking · anchor hue: gold 95° */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V3 */
/* theme: studied-DNA (source: olxtoko.zip, user reference) · paper oklch(0% 0 0) · accent oklch(88.7% 0.182 95.3)
 * display: Noto Serif TC 900 · body: Noto Sans TC 400/500/700
 * nav: N12 banner + masthead strip (sticky entry bar · ribbon · keyword strip) · footer: statement / link columns / legal
 * enrichment: supplied hero banner + key visual (guide figure) + brand logos · motion: slide crossfade · disclosure · image hover
 * CTA motion layer (see "CTA motion" below): glint · shockwave · lift · burst (banner button)
 * studied: yes · DNA-source: zip (user reference) · diversification: suspended (studied DNA)
 */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-cjk);
  line-break: strict;
  padding-bottom: calc(var(--bar-bottom) + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; letter-spacing: inherit; }

:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: 3px;
}

[id] { scroll-margin-top: calc(var(--bar-top) + var(--space-md)); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-md); }
}

.skip {
  position: absolute;
  top: calc(-1 * var(--space-2xl));
  left: var(--space-sm);
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-ink-on-accent);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.skip:focus-visible { top: var(--space-2xs); }

/* ── entry bar (sticky LOGIN / REGISTER split, from the reference) ── */
.entry {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-paper);
}

.entry__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bar-top);
  padding-inline: var(--space-2xs);
  border: var(--rule-strong) solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.entry__link + .entry__link { border-left-width: 0; }
.entry__link:hover { background-color: var(--color-accent); color: var(--color-ink-on-accent); }
.entry__link:active { transform: translateY(1px); }
.entry__link:focus-visible { outline-offset: -6px; }

/* ── masthead ─────────────────────────────────────────── */
.ribbon {
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-accent);
  color: var(--color-ink-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-align: center;
  word-break: keep-all;   /* break at 、，： only, so no brand name splits across lines */
  text-wrap: balance;
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-accent);
  text-decoration: none;
}

.brandmark__svg {
  flex: none;
  width: var(--mark);
  height: var(--mark);
  color: var(--color-accent);
  --mark-ink: var(--color-paper);
}

.brandmark__word {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.brandmark:hover .brandmark__word { color: var(--color-accent-hi); }
.brandmark:active { transform: translateY(1px); }

@media (min-width: 640px) {
  .brandmark__word { font-size: var(--text-2xl); }
}

/* keyword strip */
.keynav { border-block: var(--rule-hair) solid var(--color-accent-line-soft); }

.keynav__list {
  display: flex;
  gap: var(--space-3xs);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, var(--color-paper) 82%, var(--color-transparent));
  mask-image: linear-gradient(90deg, var(--color-paper) 82%, var(--color-transparent));
}

.keynav__list::-webkit-scrollbar { display: none; }

.keynav__link {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
}

.keynav__link:hover {
  color: var(--color-accent-hi);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.45em;
}

.keynav__link:active { transform: translateY(1px); }
.keynav__link:focus-visible { outline-offset: -4px; }

@media (min-width: 1024px) {
  .keynav__list {
    justify-content: space-between;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .keynav__link { padding-block: var(--space-sm); }
}

/* breadcrumb — desktop only, as in the reference */
.crumbs { display: none; }

@media (min-width: 1024px) {
  .crumbs {
    display: block;
    padding-block: var(--space-sm);
    font-size: var(--text-xs);
  }
  .crumbs__list { display: flex; gap: var(--space-2xs); color: var(--color-accent); }
  .crumbs__list li { white-space: nowrap; }
  .crumbs__list li + li::before {
    content: "›";
    margin-right: var(--space-2xs);
    color: var(--color-accent-line);
  }
  .crumbs__list a { color: var(--color-accent); text-decoration: none; }
  .crumbs__list a:hover { text-decoration: underline; }
}

/* ── showcase: glow + light rays behind the glass card ── */
.showcase {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-md) var(--space-xl);
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%, var(--color-glow), var(--color-transparent) 72%),
    var(--color-paper);
}

.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 0%, var(--color-ray) 0deg 2.5deg, var(--color-transparent) 2.5deg 9deg);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, var(--color-paper), var(--color-transparent) 78%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, var(--color-paper), var(--color-transparent) 78%);
}

/* ── promo images (hero banner + guide figure): the whole picture is the link.
   The CTA button is always on show (touch screens have no hover to reveal it);
   hover or keyboard focus lights the frame, zooms the picture and lifts the button.
   Picture and button share one grid cell; the button is sticky so that when the picture
   runs past the fold it rides just above the dock instead of hiding behind it.
   overflow: clip (not hidden) clips the zoom and the starburst without trapping the sticky button. ── */
.promo {
  position: relative;
  display: grid;
  overflow: hidden;
  overflow: clip;
  border: var(--rule-hair) solid var(--color-accent-line-soft);
  border-radius: var(--radius-lg);
  background: var(--color-tile);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.promo img,
.promo__cta { grid-area: 1 / 1; }

.promo img {
  width: 100%;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

/* Hallmark · component: banner button (.promo__cta) · genre: atmospheric · theme: studied-DNA + red core
 * states: default · hover · focus · active · disabled
 *   loading · error · success: n/a, the button is part of an outbound link (nothing async in-page)
 * contrast: pass (label 5.9:1 on the core, 4.2:1 at worst under the gloss; large text, needs 3:1)
 *
 * A red candy core in a gold rim, a starburst behind it and sparkles on the rim. The button is
 * sized in em, so it scales with its label. Paint order, back to front: rays (z -2), arrival ring
 * (::before, z -1), face (::after, z -1), label and arrow coin, sparkles. */
.promo__cta {
  position: sticky;
  bottom: calc(var(--bar-bottom) + env(safe-area-inset-bottom, 0px) + var(--space-sm));
  align-self: end;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-md);
  padding: 0.4em 0.4em 0.4em 1.2em;
  border-radius: var(--radius-pill);
  color: var(--color-hot-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
  line-height: var(--leading-tight);
  text-shadow: 0 0.07em 0 var(--color-hot-shade), 0 0.1em 0.35em var(--color-shade);
  white-space: nowrap;
}

/* the face: the glint layer (see "CTA motion") over a gloss, the red core and the gold rim */
.promo__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--rule-bezel) solid var(--color-transparent);
  border-radius: inherit;
  background:
    var(--glint-layer) var(--glint-from) 50% / 200% 100% no-repeat border-box,
    linear-gradient(var(--color-gloss), var(--color-transparent) 50%) padding-box,
    linear-gradient(var(--color-hot-hi), var(--color-hot) 45%, var(--color-hot-deep)) padding-box,
    linear-gradient(var(--color-bezel-hi), var(--color-accent) 30%, var(--color-bezel-lo) 65%, var(--color-accent-hi)) border-box;
  box-shadow:
    0 0 0 var(--rule-hair) var(--color-bezel-rim),
    inset 0 -0.25em 0.4em var(--color-hot-deep),
    0 0.3em 0.6em -0.1em var(--color-shade),
    0 0 1.4em var(--color-glow-strong);
}

/* the arrow rides in a gold coin at the right end of the pill */
.promo__cta svg {
  flex: none;
  width: 1.4em;
  height: 1.4em;
  padding: 0.28em;
  border-radius: var(--radius-round);
  background: linear-gradient(var(--color-bezel-hi), var(--color-accent) 45%, var(--color-accent-deep));
  box-shadow: 0 0 0 var(--rule-hair) var(--color-bezel-rim), 0 0.08em 0.2em var(--color-shade);
  color: var(--color-hot-deep);
}

/* the starburst: a gold bloom with spokes, faded out by a round mask. The spokes sit on ::before
   so a resting pointer can spin them on their own (see "CTA motion") */
.promo__rays {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: var(--radius-round);
  background: radial-gradient(closest-side, var(--color-glow-strong), var(--color-transparent));
  -webkit-mask-image: radial-gradient(closest-side, var(--color-paper) 25%, var(--color-transparent));
  mask-image: radial-gradient(closest-side, var(--color-paper) 25%, var(--color-transparent));
  opacity: var(--rays-o, 0.8);
  scale: var(--rays-s, 1);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
}

/* 18 spokes, one every 20deg, each with soft edges */
.promo__rays::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(var(--color-ray-hot) 0deg 2deg, var(--color-transparent) 6deg 14deg, var(--color-ray-hot) 18deg 20deg);
}

/* four sparkles on the rim: a cross of light, a hot point and a warm bloom */
.promo__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.promo__sparks span {
  position: absolute;
  top: var(--spark-y);
  left: var(--spark-x);
  width: var(--spark-d);
  aspect-ratio: 1;
  translate: -50% -50%;
  background:
    radial-gradient(closest-side, var(--color-spark), var(--color-transparent)) 50% 50% / 100% 12% no-repeat,
    radial-gradient(closest-side, var(--color-spark), var(--color-transparent)) 50% 50% / 12% 100% no-repeat,
    radial-gradient(closest-side, var(--color-spark), var(--color-transparent)) 50% 50% / 26% 26% no-repeat,
    radial-gradient(closest-side, var(--color-glow-strong), var(--color-transparent)) 50% 50% / 70% 70% no-repeat;
  scale: 0.8;   /* rest size; cta-twinkle returns here */
}

.promo__sparks span:nth-child(1) { --spark-x: 5%; --spark-y: 14%; --spark-d: 2em; }
.promo__sparks span:nth-child(2) { --spark-x: 74%; --spark-y: -4%; --spark-d: 1.3em; --j: 1; }
.promo__sparks span:nth-child(3) { --spark-x: 98%; --spark-y: 84%; --spark-d: 1.6em; --j: 2; }
.promo__sparks span:nth-child(4) { --spark-x: 27%; --spark-y: 104%; --spark-d: 1.1em; --j: 3; }

.promo:hover,
.promo:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 var(--space-lg) var(--color-glow);
}

.promo:hover img,
.promo:focus-visible img { transform: scale(1.04); filter: brightness(1.08); }

.promo--hero { margin-bottom: var(--space-md); }
.promo--hero .promo__cta { font-size: var(--text-cta); }

@media (min-width: 1024px) {
  .promo--hero { margin-bottom: var(--space-lg); }
  .promo--hero .promo__cta { margin-bottom: var(--space-xl); }
}

/* ── product-detail card ──────────────────────────────── */
.pdp {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-accent-line-soft);
  border-radius: var(--radius-lg);
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

/* mobile: flatten both columns so the order reads title → stage → list → guide */
.pdp__side,
.pdp__main { display: contents; }

.pitch { order: 1; }
.gallery { order: 2; }
.lineup { order: 3; }
.guide { order: 4; }

@media (min-width: 480px) {
  .pdp { padding: var(--space-md); }
}

@media (min-width: 1024px) {
  .pdp {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--space-xl);
    padding: var(--space-lg);
  }
  .pdp__side,
  .pdp__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
  }
  .pdp__main { grid-column: 1; grid-row: 1; }
  .pdp__side { grid-column: 2; grid-row: 1; align-self: stretch; }
}

/* the side column runs the full height of the guide; the lineup (its last child)
   rides along while the guide is read, so all five picks stay one click away.
   Height guard: only when the list fits between the entry bar and the dock. */
@media (min-width: 1024px) and (min-height: 640px) {
  .lineup {
    position: sticky;
    top: calc(var(--bar-top) + var(--space-md));
  }
}

/* pitch (the reference's product-meta block) */
.pitch__title {
  color: var(--color-accent);
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
}

.tally {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.tally__num {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-num);
  font-weight: var(--weight-black);
  line-height: 1;
}

.tally__unit { font-size: var(--text-lg); font-weight: var(--weight-bold); }

.tally__date {
  margin-top: var(--space-3xs);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.pitch__lede { margin-top: var(--space-sm); }

/* ── gallery (thumb rail + stage, from the reference's image gallery) ── */
.gallery {
  display: grid;
  grid-template-areas: "stage" "controls";
  gap: var(--space-xs);
  min-width: 0;
}

.gallery__rail { grid-area: rail; display: none; }
.gallery__stage { grid-area: stage; display: grid; gap: var(--space-sm); min-width: 0; }
.gallery__controls { grid-area: controls; display: none; }

.js .gallery__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "rail stage" "rail controls";
    column-gap: var(--space-sm);
  }
  .js .gallery__rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-2xs);
  }
}

.slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-sm);
  border: var(--rule-hair) solid var(--color-accent-line-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, var(--color-glow), var(--color-transparent) 70%),
    var(--color-tile);
  text-align: center;
}

.js .slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in), visibility 0s var(--ease-in) var(--dur-base);
}

.js .slide.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
}

@media (min-width: 640px) {
  .slide { padding: var(--space-xl) var(--space-lg); }
}

.slide__rank {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
  line-height: 1;
}

.slide__tile {
  display: grid;
  place-items: center;
  width: var(--logo-lg);
  aspect-ratio: 1;
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-accent-line);
  border-radius: var(--radius-lg);
  background: var(--color-tile);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.slide__tile img { width: 100%; height: 100%; object-fit: contain; }

/* the logo repeats the CTA below it: mouse-only, kept out of the tab order */
.slide__tile:hover { border-color: var(--color-accent); box-shadow: 0 0 var(--space-md) var(--color-glow); }
.slide__tile:active { transform: translateY(1px); }

.slide__name {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.slide__blurb {
  max-width: 26rem;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.slide .btn { margin-top: var(--space-2xs); }

/* thumbs */
.thumb {
  position: relative;
  display: block;
  padding: 0;
  border: var(--rule-strong) solid var(--color-accent-line-soft);
  border-radius: var(--radius-md);
  background: var(--color-tile);
  cursor: pointer;
}

.thumb__tile {
  display: grid;
  place-items: center;
  width: var(--logo-md);
  aspect-ratio: 1;
  padding: var(--space-2xs);
}

.thumb__tile img { width: 100%; height: 100%; object-fit: contain; }

.thumb__num {
  position: absolute;
  top: calc(-1 * var(--space-2xs));
  left: calc(-1 * var(--space-2xs));
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: var(--rule-hair) solid var(--color-accent-line);
  border-radius: var(--radius-round);
  background: var(--color-paper);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.thumb:hover { border-color: var(--color-accent-line); }
.thumb:active { transform: translateY(1px); }
.thumb[aria-current="true"] { border-color: var(--color-accent); }

.thumb[aria-current="true"] .thumb__num {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-ink-on-accent);
}

/* steppers */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 2.75rem;
  padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-accent-line);
  border-radius: var(--radius-sm);
  background: var(--color-transparent);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
  cursor: pointer;
}

.stepper svg { width: 1.125rem; height: 1.125rem; flex: none; }
.stepper:hover { border-color: var(--color-accent); background: var(--color-surface); }
.stepper:active { transform: translateY(1px); }

.stepper[aria-disabled="true"] {
  border-color: var(--color-accent-line-soft);
  background: var(--color-transparent);
  color: var(--color-ink-muted);
  opacity: 0.55;
  cursor: default;
}

.stepper[aria-disabled="true"]:active { transform: none; }

.gallery__count {
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gallery__count [data-count] { color: var(--color-accent); }

/* ── buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: 3rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-strong) solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
}

.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }

/* 320-359px: the narrower padding keeps 前往JP大獎娛樂城 + arrow inside the slide */
@media (min-width: 360px) {
  .btn { padding-inline: var(--space-lg); }
}

.btn--primary { background-color: var(--color-accent); color: var(--color-ink-on-accent); }

.btn--primary:hover,
.btn--primary:focus-visible { border-color: var(--color-accent-hi); background-color: var(--color-accent-hi); }

/* ── lineup (the reference's buy box, now the five picks) ── */
.lineup__list { display: grid; gap: var(--space-2xs); }

.pick {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2xs);
  padding: var(--space-2xs);
  border: var(--rule-hair) solid var(--color-accent-line-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.pick:hover { border-color: var(--color-accent-line); background: var(--color-surface-2); }
.pick:active { transform: translateY(1px); }
.pick--lead { border-color: var(--color-accent-line); }

.pick__num {
  min-width: var(--space-sm);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: 1;
  text-align: center;
}

.pick__tile {
  display: grid;
  place-items: center;
  width: var(--logo-sm);
  aspect-ratio: 1;
  padding: var(--space-3xs);
  border: var(--rule-hair) solid var(--color-accent-line-soft);
  border-radius: var(--radius-sm);
  background: var(--color-tile);
}

.pick__tile img { width: 100%; height: 100%; object-fit: contain; }

.pick__text { display: grid; min-width: 0; line-height: var(--leading-snug); }

.pick__name,
.pick__note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pick__name { font-weight: var(--weight-bold); }
.pick__note { color: var(--color-ink-muted); font-size: var(--text-xs); }

.pick__go {
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-strong) solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.pick:hover .pick__go,
.pick:focus-visible .pick__go,
.pick--lead .pick__go { background-color: var(--color-accent); color: var(--color-ink-on-accent); }

.pick--lead:hover .pick__go,
.pick--lead:focus-visible .pick__go { border-color: var(--color-accent-hi); background-color: var(--color-accent-hi); }

/* 320-359px: tight gaps keep every name and note on one full line (no ellipsis) */
@media (min-width: 360px) {
  .pick { column-gap: var(--space-xs); padding: var(--space-xs); }
  .pick__go { padding-inline: var(--space-sm); }
}

@media (min-width: 480px) {
  .pick { padding: var(--space-xs) var(--space-sm); }
  .pick__tile { width: var(--logo-md); }
}

/* ── guide (the reference's article under the gallery) ── */
.guide__title {
  color: var(--color-accent);
  font-size: var(--text-h2);
  font-weight: var(--weight-black);
}

.guide p {
  margin-top: var(--space-sm);
  text-align: justify;
  text-justify: inter-character;
}

.inline-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.3em;
}

.inline-link:hover { color: var(--color-accent-hi); text-decoration-thickness: var(--rule-strong); }

.guide__part,
.guide__brand {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-accent-line-soft);
}

.guide__part h3,
.guide__brand h3 {
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.guide__num {
  margin-right: var(--space-2xs);
  color: var(--color-accent);
  font-size: var(--text-lg);
}

/* key visual: portrait poster, capped so it never outgrows the column */
.guide__figure {
  max-width: 26rem;
  margin: var(--space-lg) auto 0;
}

.guide__figure figcaption {
  margin-top: var(--space-xs);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-align: center;
}

/* bulleted + numbered lists inside the guide */
.guide__list,
.guide__steps {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.guide__list li,
.guide__steps li { position: relative; }

.guide__list li { padding-left: var(--space-md); }

.guide__list li::before {
  content: "";
  position: absolute;
  top: calc(var(--leading-body) * 0.5em - 0.2em);
  left: var(--space-3xs);
  width: 0.4em;
  height: 0.4em;
  border-radius: var(--radius-round);
  background: var(--color-accent);
}

.guide__steps { counter-reset: step; }

.guide__steps li {
  padding-left: var(--space-lg);
  counter-increment: step;
}

.guide__steps li::before {
  content: counter(step);
  position: absolute;
  top: calc((var(--leading-body) * 1em - 1.5rem) / 2);
  left: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--rule-hair) solid var(--color-accent-line);
  border-radius: var(--radius-round);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
}

/* overview table: brand · logo cue · first check */
.guide__table-wrap {
  margin-top: var(--space-sm);
  overflow-x: auto;
  border: var(--rule-hair) solid var(--color-accent-line-soft);
  border-radius: var(--radius-md);
}

.guide__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.guide__table th,
.guide__table td {
  padding: var(--space-xs) var(--space-2xs);
  text-align: left;
  vertical-align: top;
}

.guide__table thead th {
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.guide__table tbody tr { border-top: var(--rule-hair) solid var(--color-accent-line-soft); }
.guide__table tbody th { font-weight: var(--weight-bold); white-space: nowrap; }
.guide__table td { color: var(--color-ink-muted); }

.guide__table-num {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
}

.guide__table a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-line);
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.3em;
}

.guide__table a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

/* 320-359px: tight cell padding keeps all three columns in view (no sideways scroll) */
@media (min-width: 360px) {
  .guide__table th,
  .guide__table td { padding: var(--space-xs); }
}

@media (min-width: 480px) {
  .guide__table th,
  .guide__table td { padding: var(--space-xs) var(--space-sm); }
}

/* closing recap: the FAQ's gold-ruled box */
.guide__recap {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-sm);
  border: var(--rule-strong) solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.guide__recap h3 {
  color: var(--color-accent);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

@media (min-width: 480px) {
  .guide__recap { padding: var(--space-md) var(--space-lg); }
}

.textlink {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.35em;
  white-space: nowrap;
}

.textlink:hover { color: var(--color-accent-hi); text-decoration-thickness: var(--rule-strong); }
.textlink:active { transform: translateY(1px); }

/* ── divider + FAQ ────────────────────────────────────── */
.divider {
  max-width: var(--container);
  height: var(--rule-hair);
  margin: var(--space-xl) auto 0;
  background: linear-gradient(90deg, var(--color-transparent), var(--color-accent), var(--color-transparent));
}

.faq { padding-block: var(--space-xl) var(--space-2xl); }

.faq__title {
  color: var(--color-accent);
  font-size: var(--text-h2);
  font-weight: var(--weight-black);
  text-align: center;
}

.faq__list { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }

.qa {
  border: var(--rule-strong) solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-radius: calc(var(--radius-lg) - var(--rule-strong));
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  list-style: none;
  cursor: pointer;
}

.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ""; }
.qa__q:hover .qa__text { color: var(--color-accent); }
.qa__q:focus-visible { outline-offset: 4px; }

.qa__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--rule-strong) solid var(--color-accent);
  border-radius: var(--radius-round);
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out);
}

.qa__icon svg { width: 1.125rem; height: 1.125rem; }
.qa[open] .qa__icon { transform: rotate(45deg); }

.qa__a {
  padding: 0 var(--space-sm) var(--space-sm);
  color: var(--color-ink-muted);
}

.qa[open] .qa__a { animation: qa-in var(--dur-slow) var(--ease-out); }

@keyframes qa-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .qa__q { padding: var(--space-md) var(--space-lg); font-size: var(--text-md); }
  .qa__a { padding: 0 var(--space-lg) var(--space-md); }
}

/* ── footer ───────────────────────────────────────────── */
.colophon {
  padding-block: var(--space-xl) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-accent-line-soft);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.colophon__inner { display: grid; gap: var(--space-lg); }

.colophon__about { display: grid; align-content: start; gap: var(--space-sm); }

.colophon__brand {
  display: flex;
  justify-self: start;   /* hug the mark and name, so the empty row beside them isn't a link */
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: 0.08em;
  text-decoration: none;
}

.colophon__brand:hover { color: var(--color-accent-hi); }
.colophon__brand:active { transform: translateY(1px); }

.colophon__mark {
  width: var(--space-lg);
  height: var(--space-lg);
  color: var(--color-accent);
  --mark-ink: var(--color-paper);
}

.colophon__help { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.colophon__help a {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-accent-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
}

.colophon__help a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.colophon__help a:active { transform: translateY(1px); }

/* link columns: 2-up on phones, 3-up from 640px, beside the statement from 1024px */
.colophon__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
}

.colophon__heading {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: 0.04em;
}

.colophon__links { display: grid; gap: var(--space-3xs); margin-top: var(--space-xs); }

.colophon__links a,
.colophon__policy a,
.colophon__legal a {
  display: inline-block;
  padding-block: var(--space-3xs);
  color: var(--color-ink-muted);
  line-height: var(--leading-snug);
  text-decoration: none;
}

.colophon__links a:hover,
.colophon__policy a:hover,
.colophon__legal a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.35em;
}

.colophon__links a:active,
.colophon__policy a:active,
.colophon__legal a:active { transform: translateY(1px); }

.colophon__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-accent-line-soft);
}

.colophon__legal { font-size: var(--text-xs); }

.colophon__policy {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
  font-size: var(--text-xs);
}

@media (min-width: 640px) {
  .colophon__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .colophon__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-2xl);
    row-gap: var(--space-xl);
  }
  .colophon__base { grid-column: 1 / -1; }
}

/* ── dock (the reference's fixed bottom bar, now the five brands) ── */
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: var(--rule-hair) solid var(--color-accent-line);
  background: var(--color-dock);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

.dock__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dock__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: var(--bar-bottom);
  padding: var(--space-2xs) var(--space-3xs);
  color: var(--color-ink);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
}

.dock__tile {
  display: grid;
  place-items: center;
  width: var(--logo-xs);
  height: var(--logo-xs);
}

.dock__tile img { width: 100%; height: 100%; object-fit: contain; }
.dock__link:hover { color: var(--color-accent); }
.dock__link:active { transform: translateY(1px); }
.dock__link:focus-visible { outline-offset: -4px; }

@media (min-width: 480px) {
  .dock__link { font-size: var(--text-xs); }
}

/* ── CTA motion ───────────────────────────────────────────
 * Hallmark · component: CTA motion layer · genre: atmospheric · theme: studied-DNA (gold on black)
 * states: default · hover · focus · active · disabled
 *   loading · error · success: n/a, every CTA is an outbound link that opens a new tab (nothing async in-page)
 * contrast: pass (labels keep their colours; the light always passes under the label, never over it)
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 *
 * Four primitives, loudest where the money is:
 *   glint      a specular pair of streaks crosses the face (every CTA; the dock gets one long beam)
 *   shockwave  the face thumps while a gold ring leaves its edge (filled CTAs only)
 *   lift       hover and keyboard focus raise the face and dart the arrow; a press sinks it
 *   burst      the banner button's starburst swells and turns and its sparkles twinkle; a resting
 *              pointer spins the burst and keeps the sparkles going (user-driven, so no time cap)
 * Arrival: site.js adds .is-lit when a CTA scrolls into view. It plays --cta-plays beats
 * (2 × 2.2 s, inside WCAG 2.2.2's five seconds), goes still, and re-arms once it leaves.
 * Every layer runs an animation list fed by custom properties ([arrival…, hover]), so a
 * trigger on any ancestor (the row, the banner, the button) drives the face, and hovering
 * never restarts a fanfare that is already playing. */

.btn--primary,
.pick__go,
.textlink--go { position: relative; }

/* the ring sits under the label: z-index -1 inside an isolated face */
.btn--primary,
.promo__cta,
.pick--lead .pick__go { isolation: isolate; }

/* lift and press arrive as custom properties */
.btn--primary,
.promo__cta,
.pick__go {
  translate: 0 var(--cta-y, 0px);
  scale: var(--cta-s, 1);
  transition:
    translate var(--cta-t, var(--dur-base)) var(--ease-out),
    scale var(--cta-t, var(--dur-base)) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* glint: a broad streak and a thin one behind it, painted as a background layer over the fill,
   so the face's own rounded edge clips it and it always passes under the label. The layer is
   twice the face's width; sliding it from 60% to -70% carries the pair in from beyond the
   left edge and out past the right. The banner button paints its face on ::after, so it stacks
   the same layer there, over its own. */
.btn--primary,
.promo__cta,
.pick__go,
.entry__link--go {
  --glint-from: 60%;
  --glint-to: -70%;
  --glint-layer: linear-gradient(110deg,
    var(--color-transparent) 15%,
    var(--glint, var(--color-glint)) 20%,
    var(--glint, var(--color-glint)) 21.5%,
    var(--color-transparent) 25%,
    var(--glint, var(--color-glint)) 27%,
    var(--color-transparent) 29%);
}

.btn--primary,
.pick__go,
.entry__link--go {
  background-image: var(--glint-layer);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: var(--glint-from) 50%;
}

.btn--primary,
.promo__cta::after,
.pick__go,
.entry__link--go {
  animation-name: var(--glint-arrive, none), var(--glint-hover, none);
  animation-duration: var(--dur-fanfare), var(--dur-glint);
  animation-timing-function: var(--ease-in-out);
  animation-delay: var(--cta-delay, 0ms), 0ms;
  animation-iteration-count: var(--cta-plays), 1;
}

/* over black (outlined faces at rest) the light is a dim gold; on a gold fill it is near-white */
.pick__go,
.entry__link--go { --glint: var(--color-glint-dim); }

.pick--lead .pick__go { --glint: var(--color-glint); }

/* shockwave: filled faces add a thump to the same beat */
.btn--primary,
.pick--lead .pick__go {
  animation-name: var(--thump-arrive, none), var(--glint-arrive, none), var(--glint-hover, none);
  animation-duration: var(--dur-fanfare), var(--dur-fanfare), var(--dur-glint);
  animation-timing-function: var(--ease-out), var(--ease-in-out), var(--ease-in-out);
  animation-delay: var(--cta-delay, 0ms), var(--cta-delay, 0ms), 0ms;
  animation-iteration-count: var(--cta-plays), var(--cta-plays), 1;
}

/* the banner button thumps whole (burst, rim and sparkles) while its face carries the glint */
.promo__cta {
  animation: var(--thump-arrive, none) var(--dur-fanfare) var(--ease-out) var(--cta-delay, 0ms) var(--cta-plays);
}

/* …while a gold ring leaves the edge: transform and opacity only, free to spill past the face */
.btn--primary::before,
.promo__cta::before,
.pick--lead .pick__go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--rule-strong) solid var(--color-accent);
  border-radius: inherit;
  box-shadow: 0 0 var(--space-sm) var(--color-glow-strong);
  opacity: 0;
  pointer-events: none;
  animation: var(--ring-arrive, none) var(--dur-fanfare) var(--ease-out) var(--cta-delay, 0ms) var(--cta-plays);
}

/* ring reach per face: about 10-12px past every edge; the banner button's 0.7em (13-21px) */
.btn--primary { --ring-x: 1.12; --ring-y: 1.5; }
.promo__cta { --ring-x: 1.13; --ring-y: 1.64; }
.pick__go { --ring-x: 1.3; --ring-y: 1.45; }

/* the banner button's burst swells with the thump and turns one spoke on each beat; a resting
   pointer spins the spokes and keeps the sparkles twinkling. The spin pauses where it is when the
   pointer leaves, so nothing snaps back. */
.promo__rays {
  animation: var(--flare-arrive, none) var(--dur-fanfare) var(--ease-out) var(--cta-delay, 0ms) var(--cta-plays);
}

.promo__rays::before {
  animation: cta-spin var(--dur-spin) linear infinite var(--spin, paused);
}

.promo__sparks span {
  animation:
    var(--twinkle-arrive, none) var(--dur-fanfare) var(--ease-out) calc(var(--cta-delay, 0ms) + var(--j, 0) * var(--stagger)) var(--cta-plays),
    var(--twinkle-hover, none) var(--dur-twinkle) var(--ease-in-out) calc(var(--j, 0) * 2 * var(--stagger)) infinite;
}

/* arrows dart on arrival and lean forward on hover */
.btn--primary svg,
.promo__cta svg,
.textlink--go svg {
  translate: var(--arrow-x, 0px) 0;
  transition: translate var(--dur-base) var(--ease-out);
  animation: var(--dart-arrive, none) var(--dur-fanfare) var(--ease-out) var(--cta-delay, 0ms) var(--cta-plays);
}

/* text CTA: the underline becomes a drawn wire, and the glint is a spark that runs along it */
.textlink--go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding-bottom: var(--space-3xs);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.textlink--go svg { width: 1rem; height: 1rem; flex: none; }

.textlink--go::before,
.textlink--go::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(1rem + var(--space-3xs));
  pointer-events: none;
}

.textlink--go::before {
  bottom: 0;
  height: var(--rule-hair);
  background: currentColor;
  transform: scaleY(var(--wire, 1));
  transform-origin: 50% 100%;
  transition: transform var(--dur-base) var(--ease-out);
}

.textlink--go::after {
  --glint-from: -2.5em;
  --glint-to: calc(100% + 2.5em);
  bottom: calc(var(--rule-hair) / 2 - var(--space-2xs) / 2);
  height: var(--space-2xs);
  background: radial-gradient(closest-side, var(--color-glint), var(--color-transparent)) var(--glint-from) 50% / 2.5em 100% no-repeat;
  animation-name: var(--glint-arrive, none), var(--glint-hover, none);
  animation-duration: var(--dur-fanfare), var(--dur-glint);
  animation-timing-function: var(--ease-in-out);
  animation-delay: var(--cta-delay, 0ms), 0ms;
  animation-iteration-count: var(--cta-plays), 1;
}

/* arrival: site.js lights a face in view (the pinned entry-bar CTA once the page settles) */
.is-lit {
  --glint-arrive: cta-glint;
  --ring-arrive: cta-ring;
  --thump-arrive: cta-thump;
  --dart-arrive: cta-dart;
  --flare-arrive: cta-flare;
  --twinkle-arrive: cta-twinkle;
}

/* the five picks light in a cascade, lead first */
.lineup__list li:nth-child(2) { --i: 1; }
.lineup__list li:nth-child(3) { --i: 2; }
.lineup__list li:nth-child(4) { --i: 3; }
.lineup__list li:nth-child(5) { --i: 4; }
.pick__go { --cta-delay: calc(var(--i, 0) * var(--stagger)); }

/* stacked slides: only the showing slide's button plays, and it replays whenever its slide comes up */
.slide .btn--primary { --cta-delay: var(--dur-base); }

.js .slide:not(.is-active) .is-lit {
  --glint-arrive: none;
  --ring-arrive: none;
  --thump-arrive: none;
  --dart-arrive: none;
}

/* ignition: hover or keyboard focus on the face, or on the frame that holds it */
@media (hover: hover) {
  .btn--primary:hover,
  .promo:hover,
  .pick:hover,
  .entry__link--go:hover,
  .textlink--go:hover {
    --glint-hover: cta-sweep;
    --cta-y: var(--lift);
    --arrow-x: var(--dart);
    --wire: 2;
  }

  .pick:hover .pick__go,
  .entry__link--go:hover { --glint: var(--color-glint); }

  .promo:hover {
    --rays-o: 1;
    --rays-s: 1.15;
    --spin: running;
    --twinkle-hover: cta-twinkle;
  }
}

/* keyboard focus swells the burst too, but keeps it still */
.promo:focus-visible { --rays-o: 1; --rays-s: 1.15; }

.btn--primary:focus-visible,
.promo:focus-visible,
.pick:focus-visible,
.entry__link--go:focus-visible,
.textlink--go:focus-visible {
  --glint-hover: cta-sweep;
  --cta-y: var(--lift);
  --arrow-x: var(--dart);
  --wire: 2;
}

.pick:focus-visible .pick__go { --glint: var(--color-glint); }

/* press: the face sinks back and gives a little */
.btn--primary:active,
.promo:active,
.pick:active {
  --cta-y: 0px;
  --cta-s: var(--press-scale);
  --cta-t: var(--dur-fast);
  --arrow-x: 0px;
}

/* disabled: a brand on pause (drop the href, add aria-disabled="true"). site.js never lights it */
.btn--primary[aria-disabled="true"],
.promo[aria-disabled="true"],
.pick[aria-disabled="true"],
.entry__link--go[aria-disabled="true"],
.textlink--go[aria-disabled="true"] {
  opacity: 0.55;
  filter: saturate(0);
  pointer-events: none;
}

/* dock: one long beam of light over the five brands; each logo rises as the beam reaches it.
   Plays once the page settles, and again when the list scrolls away above (site.js). */
.dock { overflow: clip; }

.dock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--color-transparent) 40%, var(--color-glint-dim) 50%, var(--color-transparent) 60%);
  opacity: 0;
  pointer-events: none;
  animation: var(--dock-beam, none) var(--dur-sweep) var(--ease-in-out);
}

.dock__list li:nth-child(2) { --i: 1; }
.dock__list li:nth-child(3) { --i: 2; }
.dock__list li:nth-child(4) { --i: 3; }
.dock__list li:nth-child(5) { --i: 4; }

/* the beam's core reaches logo i about (0.3 + 0.1 × i) into the sweep; the pop peaks 40% into its own run */
.dock__tile {
  animation: var(--dock-pop, none) var(--dur-slow) var(--ease-out) calc(var(--dur-sweep) * (0.21 + var(--i, 0) * 0.1));
}

.dock.is-lit { --dock-beam: cta-beam; --dock-pop: cta-pop; }

@keyframes cta-thump {
  0%, 22%, 100% { transform: none; }
  7% { transform: scale(1.06); }
}

@keyframes cta-ring {
  0% { opacity: 0; transform: none; }
  5% { opacity: 1; }
  42%, 100% { opacity: 0; transform: scale(var(--ring-x), var(--ring-y)); }
}

@keyframes cta-glint {
  0%, 10% { background-position: var(--glint-from) 50%; }
  44%, 100% { background-position: var(--glint-to) 50%; }
}

@keyframes cta-sweep {
  from { background-position: var(--glint-from) 50%; }
  to { background-position: var(--glint-to) 50%; }
}

@keyframes cta-dart {
  0%, 28%, 100% { transform: none; }
  13% { transform: translateX(var(--dart)); }
}

@keyframes cta-beam {
  0% { opacity: 0; transform: translateX(-60%); }
  25%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

@keyframes cta-pop {
  0%, 100% { transform: none; }
  40% { transform: translateY(calc(-1 * var(--space-3xs))) scale(1.14); }
}

/* one spoke is 20deg, so the burst ends each beat looking exactly as it began */
@keyframes cta-flare {
  0% { opacity: var(--rays-o, 0.8); scale: var(--rays-s, 1); rotate: 0deg; }
  9% { opacity: 1; scale: calc(var(--rays-s, 1) * 1.2); }
  100% { opacity: var(--rays-o, 0.8); scale: var(--rays-s, 1); rotate: 20deg; }
}

@keyframes cta-spin {
  to { rotate: 1turn; }
}

/* a four-point sparkle looks the same after a quarter turn, so the loop has no seam */
@keyframes cta-twinkle {
  0% { scale: 0.8; rotate: 0deg; }
  18% { scale: 1.5; rotate: 45deg; }
  45%, 100% { scale: 0.8; rotate: 90deg; }
}

/* ── logo hover: every brand logo sits in a link or button, and steps forward on hover ── */
.pick__tile img,
.thumb__tile img,
.slide__tile img,
.dock__tile img { transition: transform var(--dur-base) var(--ease-out); }

.pick__tile { transition: border-color var(--dur-base) var(--ease-out); }
.pick:hover .pick__tile { border-color: var(--color-accent-line); }

.pick:hover .pick__tile img,
.thumb:hover .thumb__tile img,
.slide__tile:hover img,
.dock__link:hover .dock__tile img { transform: scale(1.08); }

/* ── reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .slide,
  .js .slide.is-active { transition: opacity var(--dur-fast) var(--ease-out), visibility 0s; }
  .qa__icon { transition: none; }
  .promo img,
  .pick__tile img,
  .thumb__tile img,
  .slide__tile img,
  .dock__tile img { transition: none; }
  .promo:hover img,
  .promo:focus-visible img,
  .pick:hover .pick__tile img,
  .thumb:hover .thumb__tile img,
  .slide__tile:hover img,
  .dock__link:hover .dock__tile img { transform: none; }
  /* CTAs: no arrival, no light pass, no lift, dart or press. Colour changes stay. */
  :root {
    --cta-plays: 0;
    --dur-glint: 0ms;
    --lift: 0px;
    --dart: 0px;
    --press-scale: 1;
  }
  .dock::after,
  .dock__tile { animation: none; }
  /* banner button: the burst still brightens on hover and focus, without growing or turning */
  .promo__rays { scale: 1; transition: opacity var(--dur-fast) var(--ease-out); }
  .promo__rays::before,
  .promo__sparks span { animation: none; }
  .qa[open] .qa__a { animation: qa-fade var(--dur-fast) var(--ease-out); }
  @keyframes qa-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}