/* Wanted Wire — approved cinematic homepage. Tokens live in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: "Helvetica Neue", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }

.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;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lime); color: var(--lime-ink); padding: .75rem 1.1rem; font-weight: 800;
}
.skip:focus { left: .5rem; top: .5rem; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- shared type ---------- */

.h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: .96;
  letter-spacing: -.01em;
  font-weight: 800;
  text-transform: uppercase;
  margin: .35rem 0 .65rem;
  font-stretch: condensed;
}
.h2--sm { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }

.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  margin: 0; font-size: .74rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim);
}
.eyebrow__rule { width: 26px; height: 3px; background: var(--lime); flex: none; }
.eyebrow--lime { color: var(--lime); }

.ai-tag {
  position: absolute; left: .7rem; bottom: .7rem; margin: 0; z-index: 3;
  background: rgba(8, 10, 11, .84); border: 1px solid var(--line);
  color: var(--cream-dim); font-size: .64rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 999px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.3rem;
  font: inherit; font-weight: 800; font-size: .96rem;
  border-radius: 8px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn--lime { background: var(--lime); color: var(--lime-ink); }
.btn--lime:hover { transform: translateY(-1px); background: #e2ff6b; }
.btn--ghost {
  background: rgba(8, 10, 11, .55); color: var(--cream);
  border-color: rgba(242, 238, 230, .45); backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--cream); }
.btn__play {
  width: 26px; height: 26px; border-radius: 50%; background: var(--cream); flex: none;
  position: relative;
}
.btn__play::after {
  content: ""; position: absolute; left: 10px; top: 7px;
  border-left: 8px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

/* ================================ HEADER ================================ */

.hdr { position: relative; z-index: 30; background: var(--ink); }
.hdr__in {
  max-width: var(--shell); margin: 0 auto;
  padding: .85rem var(--gutter);
  display: flex; align-items: center; gap: 2rem;
}
.brand img { width: 200px; height: auto; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem 1.9rem; margin-left: 1.5rem; }
.nav a {
  text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--cream);
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a:hover { color: var(--lime); }
.hdr__cta {
  margin-left: auto; color: var(--lime); font-weight: 800; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
}
.hdr__cta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================================= HERO ================================= */

.hero {
  position: relative;
  min-height: clamp(480px, 46vw, 660px);
  display: grid;
  isolation: isolate;
  background: #05070a;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 7, 10, .88) 0%, rgba(5, 7, 10, .62) 24%, rgba(5, 7, 10, .18) 48%, rgba(5, 7, 10, 0) 68%),
    linear-gradient(to top, rgba(5, 7, 10, .72) 0%, rgba(5, 7, 10, 0) 34%);
}

.hero__body {
  position: relative; z-index: 2;
  max-width: var(--shell); width: 100%; margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 3.2rem) var(--gutter) clamp(3.4rem, 6vw, 4.4rem);
  align-self: center;
  max-inline-size: min(var(--shell), 100%);
}
.hero__h { margin: .5rem 0 .55rem; display: grid; gap: .1rem; }
.hero__l1, .hero__l2 {
  display: block;
  font-size: clamp(2.1rem, 5.2vw, 4.3rem);
  line-height: .93; font-weight: 800; letter-spacing: -.015em;
  text-transform: uppercase; font-stretch: condensed;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .6);
}
.hero__l2 { color: var(--lime); }
.hero__lede {
  margin: 0 0 1.3rem; font-size: clamp(1rem, 1.4vw, 1.12rem);
  max-width: 38ch; color: var(--cream);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* playback controls, bottom right of the hero */
.hero__ctl {
  position: absolute; right: var(--gutter); bottom: 1rem; z-index: 4;
  display: flex; align-items: center; gap: .7rem;
}
.hero__concept {
  margin: 0; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cream-dim); text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.hero__btns { display: flex; gap: .45rem; }
.ctl {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(8, 10, 11, .62); border: 1px solid rgba(242, 238, 230, .4);
  color: var(--cream); cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.ctl--text { width: auto; padding: 0 .95rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.ctl:hover { border-color: var(--lime); color: var(--lime); }
.i { display: block; }
.i--pause { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.i--play { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.i--mute, .i--sound {
  width: 16px; height: 14px; position: relative;
  background: currentColor;
  clip-path: polygon(0 32%, 32% 32%, 62% 4%, 62% 96%, 32% 68%, 0 68%);
}
.i--mute::after {
  content: ""; position: absolute; right: -4px; top: 50%; width: 15px; height: 2px;
  background: currentColor; transform: rotate(-45deg);
}

/* ---------------------------- GEAR PICKS ---------------------------- */

.picks {
  position: absolute; z-index: 6; top: 1.1rem; right: var(--gutter);
  width: min(430px, 36vw);
  background: rgba(23, 27, 28, .93);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: .8rem .85rem .7rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.picks__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.picks__title {
  margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; display: flex; align-items: center; gap: .5rem;
}
.picks__mark { width: 18px; height: 3px; background: var(--lime); }
.picks__hint { margin: 0; font-size: .72rem; color: var(--cream-dim); }

.picks__view { position: relative; margin-top: .6rem; }
.picks__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .6rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.picks__track::-webkit-scrollbar { display: none; }
.picks__item {
  flex: 0 0 calc(100% - 34px);   /* a sliver of the next card stays visible */
  scroll-snap-align: start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem; display: grid; grid-template-columns: 92px 1fr; gap: .8rem; align-items: center;
}
.picks__img {
  width: 92px; height: 72px; object-fit: contain; border-radius: 6px;
  background: #0E1112;
}
.picks__ph {
  width: 92px; height: 72px; border-radius: 6px; background: #0E1112;
  border: 1px dashed var(--line);
  display: grid; place-items: center; color: var(--cream-dim);
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: .25rem;
}
.picks__name { margin: 0; font-size: .92rem; font-weight: 800; line-height: 1.22; }
.picks__line { margin: .15rem 0 .45rem; font-size: .78rem; color: var(--cream-dim); line-height: 1.35; }
.picks__go {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 34px; padding: .3rem .7rem; border-radius: 6px;
  background: var(--lime); color: var(--lime-ink);
  font-size: .78rem; font-weight: 800; text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
}
.picks__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(8, 10, 11, .9); border: 1px solid var(--line); color: var(--cream);
  cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.picks__arrow:hover { border-color: var(--lime); color: var(--lime); }
.picks__arrow:disabled { opacity: .35; cursor: default; }
#picksPrev { left: -14px; }
#picksNext { right: -14px; }

.picks__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; }
.picks__dots { display: flex; gap: .35rem; }
.picks__dot {
  width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.picks__dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(242, 238, 230, .32); }
.picks__dot[aria-current="true"]::after { background: var(--lime); }
.picks__auto {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--cream-dim); font: inherit; font-size: .68rem; font-weight: 700;
  padding: .3rem .6rem; min-height: 28px; cursor: pointer;
}
.picks__auto[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); }
.picks__autoI { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.picks__disc { margin: .5rem 0 0; font-size: .64rem; line-height: 1.4; color: var(--cream-dim); }

/* ============================ DISCOVERY TILES ============================ */

.tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line);
}
.tile {
  position: relative; min-height: 132px; display: flex; align-items: flex-end;
  padding: 1.1rem 1.2rem; text-decoration: none; overflow: hidden; background: var(--ink);
}
.tile__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .58; transition: transform .5s ease, opacity .3s ease;
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 10, 11, .92) 12%, rgba(8, 10, 11, .25) 70%);
}
.tile:hover .tile__img { transform: scale(1.05); opacity: .72; }
.tile__b { position: relative; z-index: 2; display: grid; gap: .15rem; }
.tile__t { font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
.tile__s { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-dim); }
.tile__go { position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 2; font-size: 1.3rem; }
.tile:hover .tile__go { color: var(--lime); }

/* ===== the safehouse markers (the homepage detail feature has its own) ===== */

.safe__spots { position: absolute; inset: 0; }

.spot {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: rgba(8, 10, 11, .55); border: 2px solid var(--lime);
  display: grid; place-items: center; padding: 0;
}
.spot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.spot:hover, .spot.is-on { box-shadow: 0 0 0 6px rgba(214, 255, 63, .22); }
.spot__label {
  position: absolute; left: 38px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: rgba(8, 10, 11, .9); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .6rem; font-size: .72rem; font-weight: 700;
  pointer-events: none;
}
.kindtag {
  display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px;
  border: 1px solid; margin-bottom: .4rem;
}
.kindtag--confirmed { color: var(--lime); border-color: rgba(214, 255, 63, .55); background: rgba(214, 255, 63, .12); }
.kindtag--observation { color: var(--cream); border-color: rgba(242, 238, 230, .45); background: rgba(242, 238, 230, .08); }
.kindtag--theory { color: var(--sunset); border-color: rgba(255, 113, 61, .5); background: rgba(255, 113, 61, .1); }

/* =============================== SAFEHOUSE =============================== */

.safe { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 5vw, 3.4rem); background: var(--ink); }
.safe__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; gap: clamp(1.2rem, 3vw, 2.6rem);
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.9fr);
  align-items: center;
}
.safe__lede { margin: .5rem 0 1.1rem; color: var(--cream-dim); }
.safe__states { display: flex; gap: .55rem; margin-bottom: 1.1rem; }
.state {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--cream);
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.state.is-on { border-color: var(--lime); color: var(--lime); }
.state__i { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.state__i--sun { background: var(--sunset); box-shadow: 0 0 0 2px rgba(255, 113, 61, .25); }
.state__i--moon { background: #8FA3B0; clip-path: circle(50% at 68% 50%); }
.safe__status { margin: .7rem 0 0; font-size: .85rem; min-height: 1.2em; }
.safe__status[data-state="ok"] { color: var(--lime); }
.safe__privacy { margin: .35rem 0 0; font-size: .72rem; color: var(--cream-dim); max-width: 46ch; }
.safe__stage { margin: 0; }
.safe__crop {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 16 / 9; background: #0E1112;
}
.safe__img { width: 100%; height: 100%; object-fit: cover; transition: filter .45s ease; }

/* ================================ ALERTS ================================ */

.alerts { padding: clamp(2.2rem, 4vw, 3.2rem) var(--gutter); background: var(--surface); border-top: 1px solid var(--line); }
.alerts__in {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1fr minmax(360px, .85fr); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center;
}
.alerts__lede { margin: .3rem 0 0; color: var(--cream-dim); max-width: 46ch; }
.alerts__row { display: flex; gap: .55rem; flex-wrap: wrap; }
.alerts__row input {
  flex: 1 1 230px; min-height: 48px; padding: .7rem .9rem;
  background: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  color: var(--cream); font: inherit; font-size: 1rem;
}
.alerts__row input::placeholder { color: #6E7375; }
.optin { display: flex; gap: .55rem; align-items: flex-start; margin-top: .7rem; font-size: .84rem; color: var(--cream-dim); cursor: pointer; min-height: 44px; }
.optin input { margin-top: .25rem; width: 18px; height: 18px; flex: none; accent-color: var(--lime); }
.alerts__status { margin: .5rem 0 0; font-size: .86rem; min-height: 1.2em; }
.alerts__status[data-state="ok"] { color: var(--lime); }
.alerts__status[data-state="error"] { color: var(--sunset); }
.alerts__fine { margin: .45rem 0 0; font-size: .72rem; color: var(--cream-dim); }

/* ============================= PRODUCT SHEET ============================= */

.sheet { position: fixed; inset: 0; z-index: 90; display: grid; }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(4, 6, 8, .78); }
.sheet__panel {
  position: relative; z-index: 2; justify-self: end; align-self: stretch;
  width: min(430px, 100%); overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 2.6rem 1.6rem 2rem;
}
.sheet__x {
  position: absolute; right: .7rem; top: .7rem; width: 44px; height: 44px;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--cream); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sheet__eyebrow { margin: 0; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.sheet__t { font-size: 1.6rem; font-weight: 800; margin: .3rem 0 .7rem; line-height: 1.1; }
.sheet__why { margin: 0 0 .9rem; }
.sheet__tags { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.sheet__tags li {
  font-size: .7rem; font-weight: 700; padding: .25rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--cream-dim);
}
.sheet__limits { margin: 0 0 1.1rem; font-size: .86rem; color: var(--cream-dim); }
.sheet__go { width: 100%; }
.sheet__merchant { margin: .6rem 0 0; font-size: .78rem; color: var(--cream-dim); }
.sheet__disc { margin: .5rem 0 0; font-size: .7rem; color: var(--cream-dim); }

/* ================================ FOOTER ================================ */

.ftr { background: var(--ink); border-top: 1px solid var(--line); padding: 1.4rem var(--gutter) 1.6rem; }
.ftr__in {
  max-width: var(--shell); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem;
}
.brand--ftr img { width: 170px; }
.ftr__tag { margin: 0; font-size: .82rem; color: var(--cream-dim); }
.ftr__nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; }  /* wrap: the footer carries eight destinations since the GTA VI hub and
     Community page were added, and on a 390px phone an unwrapped row was
     505px wide, which scrolled every page sideways. */
.ftr__nav a { text-decoration: none; font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; min-height: 44px; }
.ftr__nav a:hover { color: var(--lime); }
.ftr__for { margin: 0; display: flex; align-items: center; gap: .7rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); }
.ftr__rule { width: 22px; height: 2px; background: var(--lime); flex: none; }
.ftr__legal { max-width: var(--shell); margin: 1.1rem auto 0; font-size: .72rem; line-height: 1.55; color: var(--cream-dim); }

/* ============================== RESPONSIVE ============================== */

@media (max-width: 1100px) {
  .picks { width: min(360px, 44vw); }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  /* On a phone the carousel is a row directly under the hero, never over it. */
  .picks {
    position: static; width: auto; margin: 0; border-radius: 0;
    border-left: 0; border-right: 0; backdrop-filter: none; box-shadow: none;
    background: var(--surface);
  }
  .picks__item { flex-basis: calc(100% - 46px); }
  #picksPrev { left: 2px; }
  #picksNext { right: 2px; }
  .hero__body { padding-bottom: 4.6rem; }
  .safe__grid, .alerts__in { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 116px; }
  .nav { display: none; }
  .hdr__in { gap: 1rem; }
  .sheet__panel { width: 100%; }
}

@media (max-width: 560px) {
  .hero__ctl { right: auto; left: var(--gutter); bottom: .7rem; flex-wrap: wrap; }
  .ftr__nav { margin-left: 0; }
}

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

/* ---- layout corrections found by tools/wanted-wire/verify-experience.mjs ----
   1. The hero is a grid and the carousel was a grid item. The carousel holds a
      horizontal scroller, which has no intrinsic width limit, so the column
      grew to its content — 1,055px inside an 834px viewport, and the whole
      page overflowed sideways. Grid and flex items need min-width: 0 before a
      scroller inside them will agree to shrink.
   2. The carousel now sits beside the hero in .herowrap rather than inside it,
      so on a phone it falls below the hero instead of on top of the headline.
   3. Small controls were below the 44px touch minimum on phones.
   -------------------------------------------------------------------------- */

.herowrap { position: relative; }
.hero { grid-template-columns: minmax(0, 1fr); }
.hero__body > * { max-width: min(760px, 64%); }
.picks, .picks__view, .picks__track, .picks__item { min-width: 0; }

@media (max-width: 900px) {
  .hero__body > * { max-width: none; }
  .picks { position: static; width: auto; }

  /* Touch sizing: the visual dot stays small, the target does not. */
  .picks__arrow { width: 44px; height: 44px; }
  #picksPrev { left: 4px; }
  #picksNext { right: 4px; }
  .picks__dot { width: 44px; height: 44px; }
  .picks__auto { min-height: 44px; padding: .4rem .85rem; }
  .spot { width: 44px; height: 44px; }
  .spot::after { width: 11px; height: 11px; }
  .spot__label { left: 50px; }
  .brand--ftr { display: inline-flex; align-items: center; min-height: 44px; }
  .detail__cap a, .ftr__nav a, .nav a { min-height: 44px; }
}

/* ---- category cards and the category sheet -------------------------------
   A card carries the site's own scene artwork, labelled as an illustration,
   because no licensed photograph of any individual product exists yet.
   -------------------------------------------------------------------------- */
.picks__fig { position: relative; display: block; width: 92px; height: 72px; flex: none; }
.picks__fig .picks__img { width: 92px; height: 72px; object-fit: cover; border-radius: 6px; }
.picks__imgtag {
  position: absolute; left: 3px; bottom: 3px;
  background: rgba(8, 10, 11, .86); border: 1px solid var(--line); color: var(--cream-dim);
  font-size: .5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .1rem .3rem; border-radius: 999px;
}
.sheet__rows { list-style: none; margin: .2rem 0 1rem; padding: 0; display: grid; gap: .75rem; }
.sheet__row { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; background: var(--surface-2); }
.sheet__rowName { margin: 0 0 .25rem; font-weight: 800; font-size: 1rem; }
.sheet__rowWhy { margin: 0 0 .4rem; font-size: .88rem; color: var(--cream-dim); }
.sheet__rowLim { margin: 0 0 .45rem; font-size: .78rem; color: var(--cream-dim); }
.sheet__rowGo {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 800; font-size: .86rem; color: var(--lime); text-decoration: none;
}
.sheet__rowGo:hover { text-decoration: underline; text-underline-offset: 3px; }
.sheet__policy { margin: .45rem 0 0; font-size: .68rem; color: var(--cream-dim); }

/* ---- GTA editorial imagery: credited, and visually separated from our own ---- */
.hdr__desc {
  margin: 0; font-size: .82rem; color: var(--cream-dim); line-height: 1.25;
  max-width: 21ch; border-left: 2px solid var(--sunset); padding-left: .7rem;
}
@media (max-width: 1150px) { .hdr__desc { display: none; } }

.tile__credit {
  position: absolute; right: .7rem; top: .7rem; z-index: 3;
  background: rgba(8, 10, 11, .78); border: 1px solid var(--line); color: var(--cream-dim);
  font-size: .55rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 999px;
}
.tile__credit--own { border-color: rgba(214, 255, 63, .45); color: var(--lime); }

/* The three tiles now carry three different subjects, so give the middle one a
   focal crop rather than letting a portrait sit centred and headless. */
.tiles .tile:nth-child(2) .tile__img { object-position: 60% 28%; }
.tiles .tile:nth-child(1) .tile__img { object-position: 50% 42%; }

/* ---- hotspot labels: on demand, not all at once -------------------------
   Six always-visible pills stacked over two faces made the frame unreadable
   and hid the very details the markers point at. The label now appears on
   hover, on keyboard focus, and for the marker that is currently selected.
   ------------------------------------------------------------------------- */
.spot__label {
  opacity: 0; transform: translateY(-50%) translateX(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
.spot:hover .spot__label,
.spot:focus-visible .spot__label,
.spot.is-on .spot__label {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
/* A marker near the right edge opens its label to the left so it stays in frame. */
.spot[data-side="left"] .spot__label { left: auto; right: 38px; }
@media (max-width: 900px) { .spot[data-side="left"] .spot__label { right: 50px; } }

/* The selected marker reads as selected even without its label showing. */
.spot.is-on { background: var(--lime); }
.spot.is-on::after { background: var(--lime-ink); }

/* ---- tiles: three subjects, three sensible crops ---- */
.tile { min-height: 168px; }
.tiles .tile:nth-child(1) .tile__img { object-position: 50% 55%; }
.tiles .tile:nth-child(2) .tile__img { object-position: 52% 18%; }
.tiles .tile:nth-child(3) .tile__img { object-position: 50% 45%; }
@media (max-width: 900px) { .tile { min-height: 132px; } }

/* The sound control carries a word, not just a glyph, because "can I turn this
   on" should not be a guess. */
.ctl--text { gap: .45rem; }
.ctl--text .i { flex: none; }
#muteBtn[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }
.hero__concept {
  background: rgba(8, 10, 11, .6); border: 1px solid var(--line);
  border-radius: 999px; padding: .28rem .6rem;
}
/* Credit chips on official imagery, wherever it appears. */
.credit-chip {
  position: absolute; right: .55rem; bottom: .55rem; z-index: 3;
  background: rgba(8, 10, 11, .8); border: 1px solid var(--line); color: var(--cream-dim);
  font-size: .54rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .42rem; border-radius: 999px; pointer-events: none;
}
/* The rights credit that sits with the legal text. A class, not an inline
   style: the preview serves under style-src 'self' and refuses style="…". */
.credit-line { margin-top: .6rem; }

/* Styles lifted out of inline attributes: style-src 'self' refuses those. */
.ww-s1775 { color: var(--on-ink-dim); margin-top: 1.6rem; }
.ww-s8423 { margin-bottom: 2.4rem; }

/* Readability floor: nothing below 12px anywhere, including fine print. */
.card__kicker, .tag, .row__tags li, .row__aff, .sheet__tags li, .picks__disc,
.ftr__legal, .credit-line, .sheet__disc, .sheet__policy, .detail__cap,
.hero__concept, .tile__s, .safe__privacy, .alerts__fine, .form-fineprint,
.footer-disclosure, .footer-disclaimer, .footer-meta, .ftr__for, .picks__hint {
  font-size: max(0.75rem, 12px);
}
/* Final readability floor on the remaining small labels. */
.eyebrow, .spot__label, .picks__auto, .picks__title, .tile__s, .hdr__desc { font-size: max(0.74rem, 12px); }

/* ======================================================================
   DETAILS WORTH A CLOSER LOOK

   Replaces "Every frame has a story", which spread one picture, six glowing
   dots and a floating caption across three columns and told a reader nothing
   they could act on. This is an editorial feature: one photograph, three
   numbered details, and for each one a close-up, a plain description, why it
   matters, and where it came from.

   The number is the whole design. It appears on the image and in the list,
   it is the same number in both places, and it is how a reader on a phone
   with no hover and no room for a marker still gets the feature.
   ====================================================================== */
.detail { padding: clamp(2.6rem, 5vw, 4rem) var(--gutter); background: var(--ink); }
.detail__in { max-width: var(--shell); margin-inline: auto; }
.detail__head { max-width: 56ch; margin-bottom: clamp(1.3rem, 2.6vw, 1.9rem); }
.detail__h {
  margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.02; color: var(--cream);
}
.detail__sf { margin: 0.6rem 0 0; color: var(--cream-dim); font-size: 1.0625rem; line-height: 1.55; }

.detail__grid {
  display: grid; gap: clamp(1.1rem, 2.4vw, 2rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}
.detail__stage { margin: 0; }
.detail__crop {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 16 / 9; background: #0E1112;
}
.detail__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__marks { position: absolute; inset: 0; }
.detail__cap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: center;
  margin-top: 0.6rem; font-size: 0.8125rem; color: var(--cream-dim);
}
.detail__cap a { color: var(--cream); font-weight: 700; }
.detail__stage .dlist { margin: 1rem 0 0; }
.detail__next { margin: clamp(1.3rem, 2.6vw, 1.9rem) 0 0; }

/* ------------------------------- the markers ------------------------------- *
   Positioned in percentages, so they hold their subject at any width — there
   is no pixel arithmetic to go out of date on resize. */
.mark {
  position: absolute; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(8, 10, 11, 0.78); border: 2px solid var(--lime);
  color: var(--lime); font-weight: 800; font-size: 0.9375rem; line-height: 1;
  backdrop-filter: blur(2px);
}
.mark__n { pointer-events: none; }
.mark:hover, .mark:focus-visible { box-shadow: 0 0 0 6px rgba(214, 255, 63, 0.22); }
.mark[aria-pressed="true"] { background: var(--lime); color: var(--lime-ink); }
/* Each kind of claim gets its own outline, on the image and in the list, so a
   reader can see at a glance that one of the three is not a fact. */
.mark--observation { border-color: rgba(242, 238, 230, 0.8); color: var(--cream); }
.mark--observation[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.mark--interpretation { border-color: var(--sunset); color: var(--sunset); border-style: dashed; }
.mark--interpretation[aria-pressed="true"] { background: var(--sunset); color: var(--ink); }

.mark__label {
  position: absolute; left: 42px; top: 50%; transform: translateY(-50%) translateX(-4px);
  white-space: nowrap; background: rgba(8, 10, 11, 0.92); color: var(--cream);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.22rem 0.62rem; font-size: 0.75rem; font-weight: 700;
  pointer-events: none; opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.mark:hover .mark__label,
.mark:focus-visible .mark__label,
.mark[aria-pressed="true"] .mark__label { opacity: 1; transform: translateY(-50%) translateX(0); }
.mark[data-side="left"] .mark__label { left: auto; right: 42px; }

/* ------------------------------ the numbered list ------------------------------ */
.dlist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.drow {
  width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left;
  background: var(--ink-2, #0E1112); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.6rem 0.75rem; cursor: pointer; color: var(--cream);
}
.drow:hover { border-color: rgba(242, 238, 230, 0.4); }
.drow__n {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--lime); color: var(--lime); font-weight: 800; font-size: 0.875rem;
}
.drow--observation .drow__n { border-color: rgba(242, 238, 230, 0.8); color: var(--cream); }
.drow--interpretation .drow__n { border-color: var(--sunset); color: var(--sunset); border-style: dashed; }
.drow__b { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.drow__t { font-weight: 700; }
.drow__k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.drow[aria-pressed="true"] { border-color: var(--lime); background: rgba(214, 255, 63, 0.07); }
.drow--observation[aria-pressed="true"] { border-color: rgba(242, 238, 230, 0.55); background: rgba(242, 238, 230, 0.06); }
.drow--interpretation[aria-pressed="true"] { border-color: var(--sunset); background: rgba(255, 113, 61, 0.08); }

/* ------------------------------ the reading panel ------------------------------ */
.dread { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #0E1112; }
/* The close-up is the same photograph again, positioned at the marker's own
   coordinates, so the zoom can never drift off the thing the dot points at. */
.dread__zoom {
  position: relative; aspect-ratio: 3 / 2; background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}
.dread__zoomtag {
  position: absolute; left: 0.6rem; bottom: 0.6rem;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); background: rgba(8, 10, 11, 0.8);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.18rem 0.5rem;
}
.dread__b { padding: 0.95rem 1rem 1.1rem; }
.dread__t { margin: 0.4rem 0 0.45rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.dread__what { margin: 0 0 0.85rem; font-size: 1rem; line-height: 1.6; color: var(--cream); }
.dread__whyl {
  margin: 0 0 0.2rem; font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim);
}
.dread__why { margin: 0 0 0.85rem; font-size: 0.9375rem; line-height: 1.6; color: var(--cream-dim); }
.dread__src { margin: 0; padding: 0 1rem 1rem; font-size: 0.8125rem; color: var(--cream-dim); }
.dread__src a { color: var(--cream); font-weight: 700; }
.kindtag--interpretation { color: var(--sunset); border-color: rgba(255, 113, 61, 0.5); background: rgba(255, 113, 61, 0.1); }

@media (max-width: 900px) {
  .detail__grid { grid-template-columns: 1fr; }
  .mark { width: 40px; height: 40px; font-size: 1.0625rem; }
  /* On a touch screen a marker's label has nowhere to hover from, so the list
     underneath carries the names instead and the markers stay unlabelled. */
  .mark__label { display: none; }
}

/* ---- homepage rhythm ----------------------------------------------------
   Watch and Gear are consecutive full-width sections with their own padding,
   which stacked to roughly 165px of empty page between the last video and the
   Gear heading. A section that directly follows another one needs the seam,
   not two full margins. */
.watchfeat + .shopcards { padding-top: 0; }
.watchfeat .watchrec__more { margin-bottom: 0; }
.detail + .safe { padding-top: clamp(1.6rem, 3vw, 2.6rem); }

/* ---- the affiliate disclosure -------------------------------------------
   One plain sentence, with the full three-sentence wording behind a summary
   on the same page. It was printing in full on eleven pages; every word of it
   is still reachable, it just is not the third paragraph of boilerplate a
   reader meets before anything useful. */
.disc { margin: 0.9rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--cream-dim); }
.disc__line { margin: 0; display: inline; }
.disc__d { display: inline; }
.disc__d summary {
  /* inline-block with real padding, not plain inline: as an inline element
     this was a 17px-tall tap target, well under the 30px floor the rest of
     the site holds and nowhere near 44px on a phone. */
  display: inline-block; cursor: pointer; color: var(--cream);
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  list-style: none; padding: 0.45rem 0.1rem; min-height: 30px;
}
@media (hover: none), (pointer: coarse) {
  .disc__d summary { padding: 0.7rem 0.2rem; min-height: 44px; }
}
.disc__d summary::-webkit-details-marker { display: none; }
.disc__d[open] summary { color: var(--lime); }
.disc__b { display: block; margin-top: 0.5rem; max-width: 74ch; }