/* The Champion Geek — Apple-like: true black, big type, generous space, full-bleed media, one accent per pack.
   Layout: seven full-width pages stacked on one smooth-scrolling page (hero, grid, 3 packs, me, play). */

:root {
  --black: #000000;      /* page */
  --carbon: #161617;     /* raised surfaces */
  --snow: #f5f5f7;       /* text */
  --graphite: #86868b;   /* secondary text */
  --race: #ff453a;       /* Racing Pack */
  --astro: #a796ff;      /* Astro Pack */
  --cyber: #45e1ff;      /* Cyber Pack */
  --sky: #5fd0ff;        /* studio shine */
  --line: rgba(255, 255, 255, 0.12);

  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --text: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --gutter: max(20px, min(5vw, 64px));
  --max: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 0px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
html.motion-off { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--snow); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; border-radius: 6px; }
.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: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--snow); color: var(--black); border-radius: 999px; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.big { font: 500 clamp(3rem, 9vw, 7.5rem)/0.95 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.lead { font: 500 clamp(1.3rem, 2.4vw, 1.9rem)/1.25 var(--text); letter-spacing: -0.01em; color: var(--snow); text-wrap: balance; }

/* ---------- Intro: five lights, then lights out ---------- */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background: var(--black); transition: opacity 0.7s var(--ease), visibility 0.7s;
  animation: intro-failsafe 0s linear 5s forwards;
}
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.intro.is-done { opacity: 0; visibility: hidden; }
.intro__lights { display: flex; gap: clamp(10px, 2.4vw, 20px); }
.intro__lights span { width: clamp(24px, 4.5vw, 36px); aspect-ratio: 1; border-radius: 50%; background: #1c0806; box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.25); transition: background 0.1s, box-shadow 0.1s; }
.intro__lights span.on { background: radial-gradient(circle at 40% 35%, #ffb3a8, #ff2a1f 45%, #b30d06); box-shadow: 0 0 22px 4px rgba(255, 42, 31, 0.6); }

/* BEBE MONSIEUR STUDIO: three words, letters shine sky blue in turn */
.studio { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.6em; font: 500 13px var(--text); letter-spacing: 0.4em; color: #4a4a4f; margin: 0; }
.studio__word { display: inline-flex; }
.studio .ch { display: inline-block; }
.studio.is-shining .ch { animation: shine 1.1s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes shine { 0% { color: #4a4a4f; } 45% { color: #fff; text-shadow: 0 0 10px var(--sky), 0 0 24px var(--sky); } 100% { color: var(--sky); text-shadow: 0 0 8px rgba(95, 208, 255, 0.35); } }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; gap: 24px;
  height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent; transition: border-color 0.4s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__brand { font: 500 1.35rem var(--display); letter-spacing: 0.01em; white-space: nowrap; }
.nav__links { display: flex; gap: clamp(16px, 2.6vw, 34px); margin-left: auto; }
.nav__links a { font-size: 13px; color: var(--graphite); padding: 14px 0; transition: color 0.3s; }
.nav__links a:hover, .nav__links a.is-current { color: var(--snow); }
.nav__end { display: flex; align-items: center; gap: 16px; }
.nav__menu { display: none; min-height: 44px; font-size: 14px; }

.motion-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--graphite); transition: color 0.3s; }
.motion-btn:hover { color: var(--snow); }
.motion-btn__track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #39393d; transition: background 0.3s; }
.motion-btn__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--snow); transition: transform 0.35s var(--ease); }
.motion-btn[aria-pressed='true'] .motion-btn__track { background: #30d158; }
.motion-btn[aria-pressed='true'] .motion-btn__track::after { transform: translateX(12px); }

.menu { position: fixed; inset: 0; z-index: 90; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gutter) 40px; background: rgba(0, 0, 0, 0.94); backdrop-filter: blur(20px); overflow-y: auto; }
.menu nav { display: grid; gap: 4px; }
.menu nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font: 500 clamp(1.8rem, 6vw, 2.6rem)/1.1 var(--display); }
.menu nav a span { font: 400 14px var(--text); color: var(--graphite); }
.menu .motion-btn { margin-top: 28px; }

/* ---------- 1 · Hero ---------- */
.hero { position: relative; }
.hero__pin { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.hero__photo { position: absolute; inset: -3% -3% -3% 26%; z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 45%; will-change: transform; }
.hero__pin::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, var(--black) 0%, transparent 30%), linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 20%); }
.hero__copy { position: absolute; left: var(--gutter); bottom: clamp(80px, 14vh, 140px); max-width: 640px; }
.hero__title { font: 500 clamp(3.6rem, 10vw, 9rem)/0.88 var(--display); letter-spacing: -0.02em; }
.hero__title em { display: block; font-style: italic; }
.hero__lead { margin-top: 22px; font: 500 clamp(1.15rem, 2vw, 1.6rem)/1.3 var(--text); letter-spacing: -0.01em; color: var(--snow); }
.hero__screen {
  position: absolute; right: clamp(20px, 7vw, 120px); bottom: clamp(70px, 12vh, 130px); width: clamp(170px, 20vw, 300px); aspect-ratio: 368 / 428;
  border-radius: 24px; overflow: hidden; background: var(--carbon);
  box-shadow: 0 40px 100px -30px rgba(255, 69, 58, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hero__screen video { width: 100%; height: 100%; object-fit: cover; }
.hero__cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; color: var(--graphite); }
.hero__cue span { width: 1px; height: 36px; background: linear-gradient(var(--snow), transparent); }
.motion-on .hero__cue span { animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 2 · Building the Grid ---------- */
.worlds { padding: clamp(120px, 16vw, 220px) var(--gutter) clamp(80px, 10vw, 140px); }
.worlds__intro { max-width: 980px; margin: 0 auto clamp(48px, 7vw, 96px); text-align: center; display: grid; gap: 28px; justify-items: center; }
.worlds__intro .lead { max-width: 30em; color: var(--graphite); }
.worlds__row { display: flex; gap: 14px; height: min(44vh, 420px); max-width: 1200px; margin: 0 auto; }
.world { position: relative; flex: 1; min-width: 0; border-radius: var(--radius); overflow: hidden; isolation: isolate; transition: flex 0.8s var(--ease); }
.world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.world::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.1) 55%); }
.world:hover, .world:focus-visible { flex: 1.7; }
.world:hover img, .world:focus-visible img { transform: scale(1.05); }
.world__body { position: absolute; left: clamp(20px, 2.4vw, 36px); right: clamp(20px, 2.4vw, 36px); bottom: clamp(22px, 2.6vw, 40px); display: grid; gap: 6px; }
.world__name { font: 500 clamp(2rem, 3.4vw, 3.2rem)/1 var(--display); }
.world__topic { font-weight: 500; color: var(--c); }
.world__line { color: rgba(245, 245, 247, 0.72); font-size: 15px; }

/* ---------- 3-5 · Pack pages ---------- */
.pack { padding: clamp(120px, 15vw, 210px) 0 clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); }
.pack__head { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; display: grid; justify-items: center; gap: 22px; }
.pack__world { font-weight: 500; font-size: 19px; color: var(--c); }
.pack__text { max-width: 36em; color: var(--graphite); }
.pack__media { max-width: calc(640px + 2 * var(--gutter)); margin: clamp(56px, 6vw, 88px) auto 0; padding: 0 var(--gutter); }   /* same size in all three packs; v34 makes the film the largest element of each pack */
.pack__media--duo { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }

.frame { position: relative; }
.frame video, .frame img, .frame canvas { width: 100%; border-radius: var(--radius); background: var(--carbon); }
.frame--wide video { aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.frame--tall video { aspect-ratio: 368 / 428; object-fit: cover; }
.frame figcaption { margin-top: 14px; font-size: 14px; color: var(--graphite); }
.frame--stage .frame__poster, .frame--stage .frame__canvas { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.frame--stage .frame__canvas { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.frame--stage.is-live .frame__canvas { opacity: 1; }
.frame--stage { box-shadow: none; }
.film-btn { margin-left: 8px; padding: 6px 14px; border-radius: 0; background: #2a2a2d; color: var(--snow); font-size: 13px; }
.film-btn:hover { background: #3a3a3e; }

/* Carousels: Apple-style gallery right under each pack title. One big slide centred, the next ones peek in
   and stay dim; the caption sits inside the picture; dots, arrows and a play/pause button underneath. */
.carousel { --slide: min(58vw, 800px); --h: calc(var(--slide) * 9 / 16); margin-top: clamp(48px, 6vw, 80px); }
.carousel__track { scroll-behavior: auto !important;
  display: flex; gap: clamp(12px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 0 calc((100vw - var(--slide)) / 2); scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel figure { position: relative; flex: 0 0 auto; scroll-snap-align: center; width: var(--slide); height: var(--h); border-radius: var(--radius); overflow: hidden; background: var(--carbon); opacity: 0.35; transition: opacity 0.6s var(--ease); }
.carousel figure.is-small { width: auto; }
.carousel figure.is-active { opacity: 1; }
.carousel img { width: 100%; height: 100%; object-fit: cover; }
.carousel figure.is-small img { width: auto; height: 100%; }
.carousel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(40px, 6vw, 90px) clamp(20px, 3vw, 44px) clamp(18px, 2.4vw, 34px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), transparent); font-size: 13px; color: rgba(245, 245, 247, 0.62);
}
.carousel figcaption b { display: block; margin-bottom: 4px; font: 500 clamp(1.4rem, 2.6vw, 2.4rem)/1.1 var(--display); color: var(--snow); }
.carousel figure.is-small figcaption b { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.carousel__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 26px auto 0; padding: 0 var(--gutter); }
.carousel__nav button { width: 44px; height: 44px; border-radius: 50%; background: #2a2a2d; font-size: 24px; line-height: 1; transition: background 0.3s, opacity 0.3s; }
.carousel__nav button:hover { background: #3a3a3e; }
.carousel__nav button:disabled { opacity: 0.35; cursor: default; }
.carousel__dots { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 0; background: #2a2a2d; }
.carousel__nav .carousel__dots button { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgba(245, 245, 247, 0.4); transition: width 0.4s var(--ease), background 0.3s; }
.carousel__dots button::before { content: ''; position: absolute; inset: -18px -3px; }   /* bigger touch target */
.carousel__nav .carousel__dots button[aria-current='true'] { width: 28px; background: var(--snow); }
.carousel__play::before { content: ''; display: block; margin: auto; width: 10px; height: 12px; border-left: 3px solid var(--snow); border-right: 3px solid var(--snow); box-sizing: border-box; }
.carousel__play.is-paused::before { width: 0; height: 0; border: 7px solid transparent; border-left: 11px solid var(--snow); border-right: 0; margin-left: 17px; }

/* ---------- 6 · Who I am ---------- */
.me { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; max-width: 1280px; margin: 0 auto; padding: clamp(120px, 15vw, 210px) var(--gutter); border-top: 1px solid var(--line); }
.me__age { font-weight: 500; font-size: 19px; color: var(--race); margin-bottom: 18px; }
.me__line { font: 500 clamp(2.6rem, 6.4vw, 5.6rem)/1 var(--display); letter-spacing: -0.015em; }
.me__line + .me__line { margin-top: 0.12em; }
.me__why { margin-top: 40px; color: var(--graphite); }
.me__motto { margin-top: 36px; padding-left: 20px; border-left: 3px solid var(--race); max-width: 30em; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45; color: var(--graphite); }
.me__motto b { display: block; font: 500 clamp(1.8rem, 3.6vw, 2.8rem)/1.05 var(--display); color: var(--snow); margin-bottom: 8px; }
.me__note { margin-top: 28px; color: var(--snow); font-weight: 500; }
.frame--portrait video { aspect-ratio: 576 / 1024; max-height: 62vh; object-fit: cover; margin-left: auto; }

/* ---------- 7 · Play ---------- */
.join { padding: clamp(120px, 15vw, 210px) var(--gutter); border-top: 1px solid var(--line); text-align: center; display: grid; justify-items: center; gap: 24px; }
.join .lead { max-width: 30em; color: var(--graphite); }
.join__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 1180px; margin-top: clamp(32px, 5vw, 64px); text-align: left; }
.pass { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--carbon); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.pass h3 { font: 500 2.2rem/1 var(--display); }
.pass h3::before { content: ''; display: block; width: 28px; height: 4px; border-radius: 4px; background: var(--c); margin-bottom: 18px; }
.pass p { color: var(--graphite); font-size: 15px; }
.pill { min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--c); color: var(--black); font-weight: 500; font-size: 15px; justify-self: start; }
.pill--ghost { background: transparent; color: var(--snow); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.pill[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.pass__note { font-size: 13px !important; }

/* ---------- Footer ---------- */
.footer { padding: 72px var(--gutter) 40px; border-top: 1px solid var(--line); display: grid; justify-items: center; gap: 22px; text-align: center; }
.footer__legal { max-width: 52em; font-size: 12px; line-height: 1.6; color: var(--graphite); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; font-size: 12px; color: var(--graphite); }
.footer__base a { min-height: 44px; display: inline-flex; align-items: center; }
.footer__base a:hover { color: var(--snow); }

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  .nav__links, .nav .motion-btn { display: none; }
  .nav__menu { display: inline-flex; align-items: center; margin-left: auto; }
  .hero__photo { inset: 0 0 auto 0; height: 62svh; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .hero__photo img { object-position: 38% 50%; }
  .hero__copy { bottom: clamp(70px, 12vh, 110px); right: var(--gutter); }
  .hero__screen { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; right: var(--gutter); width: 34vw; }
  .worlds__row { flex-direction: column; height: auto; }
  .world { flex: none; height: 52vh; }
  .world:hover, .world:focus-visible { flex: none; }
  .carousel { --slide: 84vw; --h: calc(var(--slide) * 3 / 4); }
  .carousel figcaption b { font-size: 1.5rem; }
  .frame--tall video { max-height: 70vh; width: auto; margin: 0 auto; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .me { grid-template-columns: 1fr; }
  .frame--portrait video { margin: 0 auto; max-height: 70vh; }
  .join__row { grid-template-columns: 1fr; }
}

/* ---------- Motion off: stop what moves, keep light and colour ---------- */
.motion-off .hero__cue span { animation: none; }
.motion-off .world, .motion-off .world img { transition: none; }
.motion-off .carousel__track { scroll-behavior: auto; }

/* ---------- v7: cinematic stills, aura walk-out, neon Play cards ---------- */
/* The Astro and Cyber stages: one high-quality still with a slow camera push and a light sweep
   (replaces the live WebGL scenes, which glitched on some graphics chips and slowed scrolling). */
.frame--still { border-radius: var(--radius); }
.frame--still .frame__poster { transform-origin: 60% 50%; will-change: transform; }
.frame--still .frame__poster { will-change: auto; }
@keyframes push { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2%, -1.5%, 0); } }
.frame--still::after { display: none; content: ''; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--c) 22%, transparent) 50%, transparent 65%); background-size: 260% 100%; mix-blend-mode: screen; opacity: 0.8; }
@keyframes sweep { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }

/* Who I am: he walks out of the dark; nothing around him */
.frame--aura video { box-shadow: none; background: #000; -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 45%, transparent 100%); }

/* Play: each pack card sits on its own neon light */
.join { position: relative; overflow: hidden; }
.join::before { content: ''; position: absolute; left: 50%; bottom: -10%; width: 140%; height: 60%; transform: translateX(-50%); pointer-events: none; background: linear-gradient(transparent, rgba(69, 225, 255, 0.05)), repeating-linear-gradient(90deg, rgba(69, 225, 255, 0.12) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgba(69, 225, 255, 0.12) 0 1px, transparent 1px 80px); transform-origin: 50% 100%; transform: translateX(-50%) perspective(600px) rotateX(62deg); -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); }
.join > * { position: relative; }
.pass { position: relative; isolation: isolate; background: rgba(12, 12, 14, 0.92); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 40px -6px color-mix(in srgb, var(--c) 55%, transparent); }
.pass::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--radius) + 2px); padding: 2px; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--c) 85%, #fff 90%, var(--c) 95%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pass::after { content: ''; position: absolute; inset: 18% 8% -18%; z-index: -2; border-radius: 50%; background: var(--c); filter: blur(70px); opacity: 0.35; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.motion-on .pass::before { animation: orbit 6s linear infinite; }
.pass:nth-child(2)::before { animation-delay: -2s; }
.pass:nth-child(3)::before { animation-delay: -4s; }
@keyframes orbit { to { --a: 360deg; } }
.pass h3 { text-shadow: 0 0 24px color-mix(in srgb, var(--c) 70%, transparent); }

/* ---------- v10: independent design review fixes ---------- */
/* One width for the gallery and the block under it, in all three packs */
.carousel { --slide: min(52vw, 720px); --h: calc(var(--slide) * 9 / 16); }
.pack__media { max-width: calc(min(52vw, 720px) + 2 * var(--gutter)); }
/* Captions sit under the picture, never on it (some pictures carry their own title) */
.carousel figure { height: auto; overflow: visible; background: none; }
.carousel figure img { height: var(--h); background: var(--carbon); }
.carousel figure.is-small img { width: auto; height: var(--h); }
.carousel figcaption { position: static; padding: 14px 0 0; background: none; font-size: 13px; line-height: 1.45; color: #a1a1a6; }
.carousel figcaption b, .carousel figure.is-small figcaption b { display: inline; margin: 0 6px 0 0; font: 500 15px/1.45 var(--text); color: var(--snow); }
.frame figcaption { margin-top: 14px; font-size: 13px; line-height: 1.45; color: #a1a1a6; }
/* Calmer rhythm: no hairline dividers, less dead space */
.pack, .me, .join { border-top: 0; }
.pack { padding: clamp(96px, 11vw, 160px) 0 0; }
.me { padding-top: clamp(120px, 12vw, 180px); padding-bottom: clamp(96px, 11vw, 160px); }
.join { padding-top: clamp(96px, 11vw, 160px); }
/* Hero: no scroll cue, a readable tagline */
.hero__cue { display: none; }
.hero__lead { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
/* Who I am: fewer type styles; the motto without a side bar */
.me__motto { padding-left: 0; border-left: 0; }
.me__note { font-weight: 400; color: var(--graphite); font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
/* Nav and footer */
.nav__links a { color: rgba(245, 245, 247, 0.72); }
.footer__legal { max-width: 640px; line-height: 1.5; }
/* Play: keep the neon, less spill */
.pass::after { inset: 30% 14% -6%; opacity: 0.18; filter: blur(60px); }
.pass { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 28px -10px color-mix(in srgb, var(--c) 50%, transparent); }
@media (max-width: 860px) {
  .carousel { --slide: 84vw; --h: calc(var(--slide) * 9 / 16); }
  .pack__media { max-width: none; }
  .nav__end { margin-left: auto; }
  .hero__copy { bottom: auto; top: 50svh; }
  .pack { padding-top: 96px; }
}
/* review pass 2 */
.carousel figcaption span { display: block; margin-top: 4px; }
.carousel figure figcaption { transition: opacity 0.4s var(--ease); }
.carousel figure:not(.is-active) figcaption { opacity: 0; }
.hero__lead { font-size: clamp(1.375rem, 1.7vw, 1.5rem); font-weight: 400; color: #e8e8ed; }
.me__motto, .me__note { font-size: 17px; color: #a1a1a6; }
.pill[aria-disabled='true'] { background: transparent; color: var(--snow); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); opacity: 0.4; }
.pass__note { display: none; }
.pass::after { inset: 30% 14% 6%; }
@media (max-width: 860px) {
  .hero__photo { height: 74svh; }
  .hero__copy { top: auto; bottom: 48px; }
}
/* carousel drag */
.carousel__track { cursor: grab; user-select: none; -webkit-user-select: none; }
.carousel__track.is-dragging { cursor: grabbing; }
.carousel__track.is-dragging figure { transition: none; }

/* ---------- Who I am: helmet portrait with movement ---------- */
/* A slow camera push, a gentle drift on scroll (main.js) and a light glint across the visor. Transform-only, so cheap. */
.frame--helmet { width: min(100%, 440px); margin-left: auto; }
.helmet { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.helmet__media, .helmet__push { position: absolute; inset: 0; }
.helmet__media { transform: scale(1.1); will-change: transform; }
.helmet__push { transform-origin: 55% 32%; }
.helmet__push img { width: 100%; height: 100%; object-fit: cover; }
.motion-on .helmet__push { animation: helmet-push 16s ease-in-out infinite alternate; }
@keyframes helmet-push { from { transform: scale(1); } to { transform: scale(1.07) translate3d(0, -1.2%, 0); } }
.helmet__glint { position: absolute; left: 35.5%; top: 21%; width: 40%; height: 14%; overflow: hidden; border-radius: 45% 45% 40% 40% / 60% 60% 40% 40%; pointer-events: none; }
.helmet__glint::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: translateX(-140%) skewX(-18deg); }
.motion-on .helmet__glint::before { animation: glint 7s ease-in-out infinite 1.5s; }
@keyframes glint { 0% { transform: translateX(-140%) skewX(-18deg); } 22%, 100% { transform: translateX(360%) skewX(-18deg); } }
.helmet::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #000 0%, transparent 22%), linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 28%, transparent 78%, rgba(0, 0, 0, 0.4)); }
@media (max-width: 860px) { .frame--helmet { margin: 0 auto; width: min(100%, 360px); } }
/* Who I am, review pass 3: square hard frame, background graded down, aligned to the text */
.me { align-items: start; gap: 96px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.frame--helmet { width: min(100%, 460px); margin-top: 6px; }
.helmet::after { background: radial-gradient(ellipse 62% 58% at 56% 46%, transparent 45%, rgba(0, 0, 0, 0.55) 100%); }
.helmet__glint::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent); }
@media (max-width: 860px) { .me { grid-template-columns: 1fr; gap: 56px; } }
/* owner: the portrait fades into the black at the bottom (phone and desktop) */
.helmet::after { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.85) 8%, transparent 34%), radial-gradient(ellipse 62% 58% at 56% 46%, transparent 45%, rgba(0, 0, 0, 0.55) 100%); }

/* ---------- Phase 1 (2026-10-18): Bebe Monsieur Studio brand, new sections, navigation and contrast fixes ---------- */
html { scroll-padding-top: 72px; }
.nav__brand { font: 600 15px/1 var(--text); letter-spacing: 0.18em; color: var(--snow); }
.nav__brand span { color: var(--sky); font-weight: 500; }
.nav__links a.is-current { color: var(--snow); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.hero__fine { margin-top: 14px; font-size: 14px; color: #a1a1a6; }
.studio { color: #86868b; }
/* Manifesto: one line on its own */
.manifesto { padding: clamp(120px, 14vw, 200px) var(--gutter) clamp(40px, 6vw, 80px); text-align: center; display: grid; justify-items: center; gap: 22px; }
.manifesto .lead { color: #a1a1a6; }
/* About */
.me__lines { margin: 0; font: inherit; }
.me__lines .me__line { display: block; }
.me__studio { margin-top: 36px; font: 600 13px/1 var(--text); letter-spacing: 0.28em; color: var(--sky); }
.me__note { margin-top: 12px; }
/* Pack status and the one honesty badge per gallery */
.pack__status { font-size: 14px; color: #a1a1a6; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; }
.carousel__badge { margin: 22px auto 0; padding: 0 var(--gutter); text-align: center; font-size: 13px; color: #a1a1a6; }
.carousel__nav { margin-top: 14px; }
/* Still building */
.pass__status { margin-top: auto; padding-top: 18px; font-size: 14px !important; color: var(--snow) !important; }
.pass { min-height: 210px; }
/* Gallery dots: 24px targets, the dot is drawn inside */
.carousel__nav .carousel__dots button { width: 24px; height: 24px; background: none; }
.carousel__nav .carousel__dots button::before { content: ''; position: absolute; inset: 8px; border-radius: 999px; background: rgba(245, 245, 247, 0.4); transition: background 0.3s, inset 0.4s var(--ease); }
.carousel__nav .carousel__dots button[aria-current='true'] { width: 40px; background: none; }
.carousel__nav .carousel__dots button[aria-current='true']::before { background: var(--snow); }
.carousel__dots { gap: 0; padding: 0 10px; }
/* Phase 1 review fixes */
.manifesto { padding: clamp(120px, 12vw, 160px) var(--gutter); }
.frame figcaption b { color: var(--snow); font-weight: 500; }
.frame figcaption span { display: block; margin-top: 4px; }

/* ---------- Steps 1-9 (path to 8/10) ---------- */
/* Hero title words rise out of a mask */
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.hero__title em.w { display: block; }
.hero__title .w > span { display: inline-block; }
/* One type system: serif for h1/h2 only, the sans for everything else */
.big { text-wrap: balance; }
.lead { text-wrap: pretty; }
.world__name { font: 600 clamp(1.5rem, 2.2vw, 2rem)/1.05 var(--text); letter-spacing: -0.02em; }
.pass h3 { font: 600 1.6rem/1 var(--text); letter-spacing: -0.02em; }
.me__motto b { font-family: var(--text); font-weight: 600; letter-spacing: -0.02em; }
/* Neon cards: readable text, a fine edge, the glow kept close */
.pass p { color: #c7c7cc; }
.pass { outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -1px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), 0 0 60px -20px var(--c); }
.pass::after { display: none; }
/* Pictures: a hairline edge; controls: visible focus and a small press */
.carousel figure img, .frame video, .frame img, .world img, .helmet { outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.world { outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.carousel__nav button, .film-btn, .motion-btn, .nav__menu { transition: transform 0.15s var(--ease), background 0.3s; }
.carousel__nav button:active, .film-btn:active, .nav__menu:active { transform: scale(0.96); }
.carousel__nav button:focus-visible, .film-btn:focus-visible, .motion-btn:focus-visible, .nav__menu:focus-visible, .carousel__track:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
/* Gallery: a slow push on the current picture, and the row leans with a drag */
.carousel figure { overflow: clip; }
.carousel figure img { transform-origin: 50% 100%; transition: transform 0.6s var(--ease); }
.motion-on .carousel figure.is-active.is-settled img { animation: kenburns 8s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.04); } }
.carousel__track { transform: skewX(var(--lean, 0deg)); transition: transform 0.5s var(--ease); }
.carousel__track.is-dragging figure { transition: none; }
/* Worlds chapters: the room tint animates; keep the section a full screen while pinned */
.worlds { transition: none; }
@media (min-width: 861px) { .worlds { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; padding-bottom: 48px; } }

/* ---------- Vertical rhythm (ECC art director): one scale, every section boundary from it ---------- */
:root { --sec-xl: clamp(96px, 11vw, 160px); --sec-l: clamp(80px, 9vw, 128px); --sec-m: clamp(64px, 6vw, 96px); --blk: clamp(40px, 4.5vw, 64px); --stack: clamp(16px, 1.7vw, 24px); }
.manifesto { margin-top: 0; padding: var(--sec-l) var(--gutter) var(--sec-m); gap: var(--stack); }
.manifesto .big { font-size: clamp(56px, 9vw, 128px); text-wrap: balance; }
.manifesto::after { content: ''; display: block; width: min(480px, 60vw); height: 1px; margin: var(--blk) auto 0; background: linear-gradient(90deg, transparent, rgba(69, 225, 255, 0.6), transparent); }
.me { padding-top: var(--sec-l); padding-bottom: var(--sec-l); }
.worlds { position: relative; isolation: isolate; padding: var(--sec-l) var(--gutter); border-top: 1px solid var(--line); }
.worlds__intro { gap: var(--stack); margin-bottom: var(--blk); }
.worlds__fine { font-size: 13px; color: #a1a1a6; }
.worlds__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.worlds__bg span { position: absolute; inset: 0; opacity: 0; background: radial-gradient(70% 60% at 50% 60%, color-mix(in srgb, var(--c) 16%, transparent), transparent 75%); will-change: opacity; }
@media (min-width: 861px) and (pointer: fine) { .worlds { padding-top: var(--sec-m); padding-bottom: var(--sec-m); } }
.pack { position: relative; display: flow-root; padding: var(--sec-l) 0; }
.pack::before { content: ''; position: absolute; inset: 0 0 auto; height: 40vh; pointer-events: none; background: radial-gradient(60% 100% at 50% 0, color-mix(in srgb, var(--c) 10%, transparent), transparent); }
.pack__head { gap: var(--stack); position: relative; }
.carousel { margin-top: var(--blk); }
.pack__media { margin: var(--blk) auto 0; }
.pack__media > :last-child { margin-bottom: 0; }
.join { padding: var(--sec-l) var(--gutter) var(--sec-xl); border-top: 1px solid var(--line); }
.footer { padding: 64px var(--gutter) 40px; }
.footer__line { font: 600 clamp(1.1rem, 1.6vw, 1.4rem)/1.2 var(--text); letter-spacing: -0.01em; color: var(--snow); }
/* Paint savings (ECC performance-optimizer): no heavy blur on touch, pause loops off screen */
@media (pointer: coarse) { .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, 0.88); } .pass::after { display: none; } }
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }
.pack { overflow-x: clip; }   /* the gallery waits 120px to the right before it slides in; never widen the page */
/* Real playtest captures: shown whole (letterboxed, never cropped, HUD intact) and tagged in the caption */
.carousel figure.is-capture img { object-fit: contain; background: #000; }
.motion-on .carousel figure.is-capture.is-active.is-settled img { animation: none; }
.tag-real { display: inline-block !important; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: #45e1ff; color: #001018 !important; font: 600 11px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- v21 hero: three neon pack cards replace the photo (ECC art director spec) ---------- */
.hero__pin::before { content: ''; position: absolute; left: 50%; bottom: -8%; width: 160%; height: 46%; z-index: -1; pointer-events: none; transform-origin: 50% 100%; transform: translateX(-50%) perspective(600px) rotateX(62deg); background: repeating-linear-gradient(90deg, rgba(69, 225, 255, 0.13) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgba(69, 225, 255, 0.13) 0 1px, transparent 1px 80px); -webkit-mask-image: linear-gradient(transparent, #000 65%); mask-image: linear-gradient(transparent, #000 65%); }
.hero__pin::after { background: radial-gradient(60% 50% at 70% 60%, rgba(69, 225, 255, 0.07), transparent 70%); }
.hero__title { font-size: clamp(3.6rem, 8vw, 8rem); }
.hero__copy { max-width: min(600px, 42vw); }
.picks { position: absolute; right: var(--gutter); bottom: clamp(80px, 14vh, 140px); display: grid; grid-template-columns: repeat(3, clamp(150px, 16vw, 232px)); gap: 20px; align-items: end; margin: 0; padding: 0; list-style: none; }
.picks li:nth-child(2) { margin-bottom: 32px; }
.picks li:nth-child(3) { margin-bottom: 64px; }
.pick { position: relative; display: block; isolation: isolate; background: #0c0c0e; transform-style: preserve-3d; will-change: transform; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 60px -20px var(--c); transition: box-shadow 0.35s var(--ease), opacity 0.35s var(--ease); }
.pick::before { content: ''; position: absolute; inset: -2px; z-index: 2; pointer-events: none; padding: 2px; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--c) 85%, #fff 90%, var(--c2, var(--c)) 95%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0.55; transition: opacity 0.35s; }
.motion-on .pick:is(:hover, :focus-visible, .is-lit)::before { animation: orbit 2.4s linear infinite; opacity: 1; }
.pick__img { display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.pick__img img { width: 100%; height: 100%; object-fit: cover; }
.pick__say { display: block; padding: 16px 16px 18px; font: 600 17px/1 var(--text); letter-spacing: -0.01em; color: var(--snow); text-shadow: 0 0 18px var(--c); }
.pick__say::before { content: ''; display: block; width: 28px; height: 3px; margin-bottom: 10px; background: linear-gradient(90deg, var(--c), var(--c2, var(--c))); transition: width 0.35s var(--ease); }
.picks:has(.pick:hover) .pick:not(:hover) { opacity: 0.55; }
.pick:is(:hover, :focus-visible, .is-lit) { box-shadow: inset 0 0 0 1px var(--c), 0 30px 90px -20px var(--c); }
.pick:is(:hover, :focus-visible, .is-lit) .pick__say::before { width: 64px; }
.pick:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.pick.is-lit { transform: translateY(-10px); transition: transform 0.4s var(--ease), box-shadow 0.35s var(--ease); }
.motion-off .pick, .motion-off .pick.is-lit { transform: none !important; transition: box-shadow 0.2s; }
@media (max-width: 860px) {
  .hero__pin { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: 96px var(--gutter) 48px; }
  .hero__copy { position: static; max-width: none; }
  .picks { position: static; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .picks li:nth-child(n) { margin-bottom: 0; }
  .pick { display: grid; }
  .pick__img { grid-area: 1 / 1; aspect-ratio: auto; height: 124px; }
  .pick__say { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; padding: 40px 16px 14px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent); }
}
/* ---------- v21 Racing gallery: real clips and real menus ---------- */
.carousel figure video { display: block; width: 100%; height: var(--h); object-fit: contain; background: #000; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.carousel figure.is-menu { position: relative; }
.carousel figure.is-menu .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); box-shadow: 0 0 14px var(--c); opacity: 0; pointer-events: none; }
.motion-on .carousel figure.is-menu.is-active.is-settled .scan { animation: scan 5s linear infinite; }
@keyframes scan { 0% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(calc(var(--h) - 2px)); opacity: 0.55; } 50.1%, 100% { opacity: 0; } }
.pick__img img { object-position: 50% 45%; }
@media (min-width: 861px) { .picks { grid-template-columns: repeat(3, clamp(150px, 17.5vw, 300px)); gap: clamp(14px, 1.4vw, 24px); } }
.hero__pin::before { background: repeating-linear-gradient(90deg, rgba(69, 225, 255, 0.22) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgba(69, 225, 255, 0.22) 0 1px, transparent 1px 80px); }

/* ---------- v21 gate fixes ---------- */
/* Hero: title and cards are one centred group; cards level at rest; the game's own 3:2 frame (real HUD never cropped) */
@media (min-width: 861px) {
  .hero__pin { display: flex; align-items: center; justify-content: center; gap: clamp(32px, 5vw, 96px); padding: 72px var(--gutter) 0; }
  .hero__copy { position: static; max-width: 34rem; flex: 0 1 auto; }
  .picks-wrap { flex: 0 0 auto; }
  .picks { position: static; grid-template-columns: repeat(3, clamp(130px, 16vw, 280px)); gap: clamp(12px, 1.2vw, 20px); }
  .picks li:nth-child(n) { margin-bottom: 0; }
  .hero__title { font-size: clamp(3.6rem, 6.5vw, 7.5rem); }
}
@media (min-width: 861px) and (max-width: 1180px) { .hero__title { font-size: clamp(3.2rem, 6.5vw, 5rem); } }
.pick__img { aspect-ratio: 3 / 2; }
.pick__img img { object-position: 50% 50%; }
.pick__say { padding: 18px 20px 20px; font: 500 18px/1.1 var(--text); letter-spacing: 0; }
.pick__say::before { width: 24px; height: 2px; margin-bottom: 12px; }
.pick:is(:hover, :focus-visible, .is-lit) .pick__say::before { width: 48px; }
.picks__note { margin-top: 18px; font-size: 12px; color: #a1a1a6; }
@media (max-width: 860px) { .picks__note { margin-top: 12px; } .pick__img { aspect-ratio: auto; } }
/* Gallery: clip slides hug the video (no side bars); one quiet tag in the Racing red */
.carousel figure.is-clip { width: calc(var(--h) * 1.5); }
.tag-real { background: transparent !important; color: var(--race) !important; box-shadow: inset 0 0 0 1px var(--race); font-size: 11px !important; padding: 2px 8px !important; }
@media (max-width: 860px) { .film-btn { display: block; margin: 10px 0 0; } }
/* Phone: keep the game's 3:2 frame and put the line under the picture (the real HUD is never cropped or covered) */
@media (max-width: 860px) {
  .pick { display: block; }
  .pick__img { height: auto; aspect-ratio: 3 / 2; }
  .pick__say { position: static; padding: 14px 16px 16px; background: none; }
  .picks { grid-template-columns: 1fr; gap: 16px; }
}
/* ---------- v21 re-score fixes ---------- */
@media (min-width: 861px) {
  .picks { grid-template-columns: repeat(3, clamp(130px, 17vw, 300px)); gap: 20px; }
  .hero__title { font-size: clamp(3.6rem, 7vw, 8rem); }
}
.pick__say { display: flex; align-items: center; gap: 10px; padding: 16px 18px; }
.pick__say::before { flex: 0 0 auto; margin: 0; }
.picks__note { margin: 16px 0 0; text-align: center; font-size: 13px; color: #a1a1a6; }
@media (max-width: 860px) {
  .picks { gap: 24px; }
  .pick { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 24px -8px color-mix(in srgb, var(--c) 30%, transparent); }
  .pick:is(:hover, :focus-visible, .is-lit) { box-shadow: inset 0 0 0 1px var(--c), 0 0 24px -6px color-mix(in srgb, var(--c) 45%, transparent); }
}
.carousel__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8vw, #000 calc(100% - 8vw), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8vw, #000 calc(100% - 8vw), transparent 100%); }

/* ---------- v22: logo, full-height expanding hero panels, combined packs section ---------- */
.nav__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand-mark { width: 24px; height: 24px; flex: 0 0 auto; transition: filter 0.3s; }
.nav__brand:hover .brand-mark { filter: drop-shadow(0 0 6px rgba(95, 208, 255, 0.5)); }
@media (max-width: 480px) { .nav__word { font-size: 11px; letter-spacing: 0.14em; } }
.hero__pin { display: block !important; height: 100svh; min-height: 620px; padding: 0 !important; overflow: hidden; }
.hero__pin::before { display: none; }
.hero__copy { position: absolute !important; z-index: 3; left: clamp(20px, 4vw, 56px); top: calc(52px + clamp(28px, 6vh, 64px)); max-width: min(560px, 46vw) !important; pointer-events: none; }
.hero__copy a { pointer-events: auto; }
.hero__copy::before { content: ''; position: absolute; inset: -60px -120px -60px -80px; z-index: -1; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.72), transparent); }
.hero__title { font-size: clamp(2.4rem, 5vw, 5rem) !important; line-height: 0.98; }
.hero__title .w, .hero__title em.w { display: inline-block; }
.hero__lead { margin-top: 18px; font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important; color: #e8e8ed; }
.hero__fine { margin: 0 0 14px; font-size: 13px; letter-spacing: 0.04em; color: #c7c7cc; }
.hero__cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; padding: 0 22px; border-radius: 999px; background: var(--snow); color: #000; font-weight: 600; font-size: 15px; transition: transform 0.15s var(--ease); }
.hero__cta:active { transform: scale(0.96); }
.hero__cta:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.panels { position: absolute; inset: 60px 8px 8px; display: flex; gap: 8px; }
.panel { position: relative; flex: 1 1 0; min-width: 64px; overflow: hidden; contain: paint; background: #0c0c0e; transition: flex-grow 700ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s; }
.panel.is-active { flex-grow: 10; box-shadow: inset 0 0 0 1px var(--c), 0 0 32px -8px var(--c); }
.panel img { position: absolute; top: 0; left: 50%; height: 100%; width: max(100%, 82vw); max-width: none; transform: translateX(-50%); object-fit: cover; object-position: var(--pos); }
.panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 40%); pointer-events: none; }
.panel:not(.is-active)::after { background: rgba(0, 0, 0, 0.55); }
.panel__line { position: absolute; left: 32px; bottom: 32px; z-index: 1; font: 500 clamp(28px, 4vw, 56px)/1.05 var(--display); color: var(--snow); text-shadow: 0 0 28px color-mix(in srgb, var(--c) 55%, transparent); opacity: 0; transform: translateY(8px); transition: opacity 300ms, transform 300ms; }
.panel__line::before { content: ''; display: block; width: 48px; height: 3px; margin-bottom: 14px; background: var(--c); box-shadow: 0 0 14px var(--c); }
.panel.is-active .panel__line { opacity: 1; transform: none; transition-delay: 250ms; }
.panel__v { position: absolute; left: 50%; bottom: 28px; z-index: 1; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font: 600 12px var(--text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c); transition: opacity 200ms; }
.panel.is-active .panel__v { opacity: 0; }
.panel:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.panels__note { position: absolute; right: 24px; bottom: 18px; z-index: 3; margin: 0; font-size: 12px; color: #c7c7cc; }
@media (max-width: 860px) {
  .hero__pin { min-height: 0; height: auto; }
  .hero__copy { position: relative !important; left: auto; top: auto; max-width: none !important; padding: 72px var(--gutter) 14px; pointer-events: auto; }
  .hero__copy::before { display: none; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
  .hero__lead { margin-top: 10px; }
  .hero__cta { margin-top: 14px; }
  .panels { position: relative; inset: auto; flex-direction: column; height: 72svh; min-height: 420px; padding: 0 8px 8px; }
  .panel { min-width: 0; min-height: 64px; }
  .panel.is-active { flex-grow: 6; }
  .panel img { width: 100%; height: max(100%, 62svh); top: 50%; left: 0; transform: translateY(-50%); }
  .panel__v { writing-mode: horizontal-tb; transform: translateY(-50%); left: 20px; bottom: auto; top: 50%; }
  .panel__line { left: 20px; bottom: 18px; font-size: 30px; }
  .panels__note { position: static; padding: 0 var(--gutter) 12px; text-align: right; }
}
.motion-off .panel, .motion-off .panel__line { transition: opacity 150ms; }
.join .pass { text-decoration: none; color: inherit; }
.pass__img { display: block; margin: calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 3vw, 40px)) 18px; aspect-ratio: 16 / 9; overflow: hidden; }
.pass__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.pass:hover .pass__img img { transform: scale(1.04); }
.pass:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.join__note { margin-top: 8px; font-size: 13px; color: #a1a1a6; text-align: center; }
.me__sign { margin-top: 18px; font: 600 12px/1 var(--text); letter-spacing: 0.28em; text-transform: uppercase; color: var(--sky); }
.nav__word { color: var(--snow); font: 600 13px/1 var(--text); letter-spacing: 0.18em; }
.nav__word span { color: var(--sky); }
@media (min-width: 861px) {
  .panels { inset: 60px 8px 34px; }
  .panels__note { bottom: 10px; right: 16px; }
  .panel.is-active::after { background: radial-gradient(70% 55% at 0% 0%, rgba(0, 0, 0, 0.78), transparent 70%), linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent 45%); }
  .hero__copy::before { display: none; }
  .hero__fine { color: #e8e8ed; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
  .hero__title, .hero__lead { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
}
.nav__brand .nav__word { color: var(--snow); } .nav__brand .nav__word span { color: var(--sky); }
@media (max-width: 860px) { .hero .hero__copy { padding: 84px 20px 16px !important; margin: 0 !important; } .hero .panels { padding: 0 12px 8px; } }
@media (max-width: 860px) { .hero .hero__copy { left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; } }
/* v22 review fixes */
.hero__fine { font-size: 14px; }
.panel__line { font: 600 clamp(22px, 2vw, 30px)/1.1 var(--text); letter-spacing: -0.01em; }
.panel__v { font-size: 13px; }
.join .pass { padding-bottom: 24px; min-height: 0; }
.join .pass .pass__status { padding-top: 10px; }
.carousel figure.is-menu { width: min(calc(var(--h) * var(--r, 1.778)), 92vw); }
.hero__lead { text-wrap: pretty; }
/* Hero text readability: a dark fade from the left, behind the text only (owner: "difficult to read") */
@media (min-width: 861px) {
  .hero__pin::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.66) 30%, rgba(0, 0, 0, 0.25) 48%, transparent 60%); }
  .hero__title, .hero__lead, .hero__fine { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85); }
}
@media (min-width: 861px) { .hero__pin::after { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 72%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 72%); } }

/* ---------- v29: ECC art-director audit ---------- */
/* One frame for every slide in all three galleries, and the films below match it.
   Real footage and menus sit whole inside it on the game's own navy (HUD never cropped). */
.carousel { --slide: min(56vw, 800px); --h: calc(var(--slide) * 9 / 16); }
.carousel figure, .carousel figure.is-clip, .carousel figure.is-menu { width: var(--slide); }
.carousel figure :is(img, video) { display: block; width: 100%; height: var(--h); }
.carousel figure.is-capture :is(img, video) { object-fit: contain; background: #0c1323; }
.carousel figure.is-menu .scan { display: none; }
.pack__media { max-width: calc(min(56vw, 800px) + 2 * var(--gutter)); }
@media (max-width: 860px) {
  .carousel { --slide: 88vw; --h: calc(var(--slide) * 9 / 16); }
  .pack__media { max-width: none; }
}
/* Captions: one line, left-aligned with the frame, fixed height so the controls never jump */
.carousel figcaption { min-height: 2.9em; text-align: left; }
.carousel figcaption span { display: inline-block; }
.tag-concept { display: inline-block; margin-top: 6px; padding: 2px 8px; box-shadow: inset 0 0 0 1px var(--c); color: var(--c); font: 600 11px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; }
.frame figcaption span { display: inline; margin: 0 0 0 4px; }
.frame figcaption .film-btn { margin-left: 10px; }
/* Square edges everywhere (owner's direction); only the start lights stay round */
*, *::before, *::after { border-radius: 0 !important; }
.intro__lights span { border-radius: 50% !important; }
.helmet__glint { border-radius: 45% 45% 40% 40% / 60% 60% 40% 40% !important; }
.carousel__nav .carousel__dots button { height: 3px; }
.carousel__nav .carousel__dots button::before { inset: 0; }
/* One display size for every section heading */
.big, .manifesto .big { font-size: clamp(3.5rem, 7vw, 6.5rem); }
/* Hero note sits inside the gutter */
.panels__note { right: var(--gutter); }
/* Phone hero: the closed packs are real tiles, not slivers */
@media (max-width: 860px) {
  .panel { min-height: 92px; }
  .panel.is-active { flex-grow: 4; }
  .panel__v { font-size: 14px; color: var(--snow); }
  .panel__v::before { content: ''; display: inline-block; width: 18px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--c); box-shadow: 0 0 10px var(--c); }
}
/* v29 gate: the slide counter is the same width in every gallery; controls sit on the frame's left edge, under the caption */
.carousel__nav { justify-content: flex-start; max-width: var(--slide); padding: 0; }
.carousel__dots { width: 180px; justify-content: space-between; }
.carousel__nav .carousel__dots button, .carousel__nav .carousel__dots button[aria-current='true'] { flex: 1 1 0; width: auto; }

/* ---------- v30: pack brand names ---------- */
.pack__world { letter-spacing: 0.24em; text-transform: uppercase; }
.pass__name { margin: 0; color: var(--c); font: 600 12px/1.2 var(--text); letter-spacing: 0.24em; text-transform: uppercase; }
.pass h3 { margin-top: -4px; }
/* v30 gate: the brand label keeps its pack colour; the colour bar sits above the label, not between label and title */
.pass .pass__name { color: var(--c); font-size: 12px; }
.pass__name::before { content: ''; display: block; width: 28px; height: 4px; margin-bottom: 14px; background: var(--c); }
.pass h3::before { display: none; }
.pass h3 { margin-top: 8px; }
.film-btn { background: transparent; box-shadow: inset 0 0 0 1px #3a3a3e; }
.film-btn:hover { background: #1c1c1e; }

/* ---------- v31: minimalist home hero (Proposal C+) ---------- */
/* One left margin (the gutter) for logo, eyebrow, title and footer row; both columns centred on one axis.
   Red, violet and cyan are used for the packs only. */
.hc { --c: var(--snow); min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 76px var(--gutter) 0; background: #050506; }
.hc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: 12px 28px; }
.hc__copy { display: grid; gap: 28px; align-content: center; }
.hc__eyebrow { margin: 0; font: 400 14px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: #b8b8bf; }
/* the three pack tags hang from one shared column (a single tab stop) */
.hc__title { margin: 0; display: grid; grid-template-columns: max-content max-content; column-gap: 0.32em; align-items: baseline; font: 400 clamp(46px, 5.5vw, 86px)/1 var(--display); letter-spacing: -0.01em; }
.hc__ln { display: contents; }
.hc.is-ready .hc__say, .hc.is-ready .hc__tag { transition: opacity 0.35s; }   /* only after the reveal, so CSS never fights GSAP */
.hc__tag { font: 500 13px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); transform: translateY(-0.2em); }
.hc [data-pack='race'] { --c: #ff6b61; } .hc [data-pack='astro'] { --c: #b3a6ff; } .hc [data-pack='cyber'] { --c: #45e1ff; }
.hc__lead { margin: 0; max-width: 32ch; font: 400 18px/1.5 var(--text); color: #d2d2d8; }
.hc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.hc__cta { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 26px; background: var(--snow); color: #050506; font: 600 15px/1 var(--text); transition: background 0.2s; }
.hc__cta:hover { background: #fff; }
.hc__cta span { transition: transform 0.2s; } .hc__cta:hover span { transform: translateX(4px); }
.hc__follow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; min-height: 44px; font-size: 15px; color: #b8b8bf; }
.hc__follow span { color: #d2d2d8; border-bottom: 1px solid #5a5a62; padding-bottom: 3px; }
.hc__art { display: grid; gap: 14px; }
.hc__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hc__card { display: grid; }
.hc.is-ready .hc__card { transition: opacity 0.35s; }
.hc__pic { position: relative; display: block; overflow: hidden; height: clamp(340px, calc(100svh - 76px - 52px - 200px), 680px); background: #101014; outline: 1px solid #1e1e22; outline-offset: -1px; }
.hc__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.motion-on .hc__card:is(:hover, :focus-visible) .hc__pic img { transform: scale(1.045); }
.hc__bar { display: block; height: 3px; background: var(--c); }
.hc__name { padding-top: 14px; font: 500 19px/1.2 var(--text); letter-spacing: 0.06em; white-space: nowrap; color: var(--snow); }
.hc__promise { padding-top: 5px; font-size: 14px; color: #b8b8bf; }
.hc__note { margin: 0; font-size: 14px; line-height: 1.5; color: #b8b8bf; }
.hc__card:focus-visible { outline: 2px solid var(--snow); outline-offset: 4px; }
/* pairing: a line or a card dims the other two packs */
.hc[data-hl] .hc__card, .hc[data-hl] .hc__ln > * { opacity: 0.42; }
.hc[data-hl='race'] [data-pack='race'], .hc[data-hl='race'] [data-pack='race'] > *,
.hc[data-hl='astro'] [data-pack='astro'], .hc[data-hl='astro'] [data-pack='astro'] > *,
.hc[data-hl='cyber'] [data-pack='cyber'], .hc[data-hl='cyber'] [data-pack='cyber'] > * { opacity: 1; }
.hc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px; min-height: 52px; padding-block: 14px; border-top: 1px solid #1e1e22; font-size: 14px; color: #b8b8bf; }
.motion-off .hc *, .motion-off .hc *::before { transition: none !important; }
/* phone: type first, then portrait pack cards in a snap carousel (about 72% wide, tagline shown) */
@media (max-width: 860px) {
  .hc { min-height: 0; padding-top: 72px; }
  .hc__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 14px 22px; }
  .hc__copy { gap: 16px; }
  .hc__eyebrow { font-size: 13px; }
  .hc__title { font-size: clamp(38px, 11vw, 50px); }
  .hc__tag { font-size: 12px; }
  .hc__lead, .hc__follow { font-size: 15px; }
  .hc__actions { gap: 4px 18px; }
  .hc__cta { height: 48px; padding: 0 20px; font-size: 15px; }
  .hc__cards { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .hc__cards::-webkit-scrollbar { display: none; }
  .hc__cards li { flex: 0 0 72%; scroll-snap-align: start; }
  .hc__pic { height: auto; aspect-ratio: 3 / 4; }
  .hc__card[data-pack='race'] .hc__pic img, .motion-on .hc__card[data-pack='race']:is(:hover, :focus-visible) .hc__pic img { transform-origin: 8% 92%; transform: scale(1.5); }
  .hc__name { font-size: 16px; padding-top: 10px; }
  .hc__promise, .hc__note, .hc__foot { font-size: 15px; }
  .hc__foot { flex-direction: column; align-items: flex-start; }
}
/* v31 gate: follow targets are plain text until the real handles exist; tags sit clear of the title;
   stronger card taglines; the Motion switch uses no UI colour (colour belongs to the packs) */
.hc__follow span { border-bottom: 0; padding-bottom: 0; color: #b8b8bf; }
.hc__title { column-gap: 0.6em; }
.hc__promise { font-size: 15px; color: #c8c8ce; }
.motion-btn { font-size: 14px; color: #b8b8bf; }
.motion-btn[aria-pressed='true'] .motion-btn__track { background: var(--snow); }
.motion-btn[aria-pressed='true'] .motion-btn__track::after { background: #050506; }
@media (max-width: 860px) {
  .hc__tag { font-size: 13px; }
  .hc__title { column-gap: 0.45em; }
  .hc__cards li { flex-basis: 68%; }
}
/* v32: the target month sits under each hero card's promise, quiet, in the same tone as the note */
.hc__when { padding-top: 6px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #8e8e96; }
@media (max-width: 860px) { .hc__when { font-size: 14px; } }
/* v32 gate: the date is a quiet line, not a second title; the CTA arrow points down the page */
.hc__when { padding-top: 5px; letter-spacing: 0; text-transform: none; }
.hc__cta:hover span { transform: translateY(3px); }
@media (max-width: 860px) { .hc__art { gap: 20px; } }

/* ---------- v33: Astro (COMET DOCK) real Earth/Mars screenshots, plum + amber ---------- */
/* Amber is used in four places only: build tags, the active dot, the viewer counter, focus rings inside Astro. */
:root { --astro-bg: #120b1c; --astro-surface: #22142f; --astro-matte: #150e22; --astro-ink: #b9b0c9; --amber: #ffb547; }
/* D53: every pack section gets the same faint tint of its own colour (was COMET only) */
.pack { background: color-mix(in srgb, var(--c) 6%, var(--black)); }
.astro-worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 640px)); justify-content: center; gap: 24px; margin: clamp(48px, 6vw, 80px) auto 0; padding: 0 var(--gutter); }
.world-tile { margin: 0; }
.world-tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.world-tile figcaption { padding-top: 14px; font-size: 15px; color: var(--astro-ink); }
.world-tile figcaption b { font-weight: 500; color: var(--snow); margin-right: 6px; }
.world-tile__label { display: block; margin-bottom: 6px; font: 600 12px/1 var(--text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--astro); }
.astro-world { margin-top: clamp(72px, 9vw, 120px); }
.astro-world__head { max-width: calc(min(56vw, 800px)); margin: 0 auto; padding: 0; }
.astro-world__head h3 { margin: 0; font: 500 clamp(1.8rem, 3.2vw, 2.6rem)/1.1 var(--display); color: var(--snow); }
.astro-world__head p { margin: 10px 0 0; font-size: 15px; color: var(--astro-ink); }
.astro-world .carousel { margin-top: 28px; }
.shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.carousel__track.is-dragging .shot { cursor: grabbing; }
.tag-shot { display: inline-block; margin-top: 6px; padding: 2px 8px; box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.4); color: var(--amber); font: 600 11px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; }
.shot-hint { display: inline-block; margin-left: 6px; font-size: 13px; color: var(--astro-ink); }
.astro-note { max-width: calc(min(56vw, 800px)); margin: 40px auto 0; font-size: 14px; line-height: 1.5; color: var(--astro-ink); }
@media (max-width: 860px) {
  .astro-worlds { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .astro-world__head, .astro-note { max-width: none; padding: 0 var(--gutter); }
}
/* full-size viewer */
.lb { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 56px 72px 24px; border: 0; background: rgba(10, 6, 18, 0.96); color: var(--snow); display: none; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; overscroll-behavior: contain; }
.lb[open] { display: grid; }
.lb::backdrop { background: rgba(10, 6, 18, 0.96); }
.lb__frame { display: grid; place-items: center; min-height: 0; touch-action: pinch-zoom; }
.lb__img { max-width: min(92vw, 1280px); max-height: calc(100dvh - 200px); width: auto; height: auto; }
.lb__cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; max-width: min(92vw, 1280px); width: 100%; margin: 0 auto; }
.lb__title { margin: 0; font: 500 24px/1.2 var(--text); }
.lb__tag { margin: 8px 0 0; color: var(--amber); font: 600 11px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; }
.lb__note { margin: 8px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--astro-ink); text-wrap: pretty; }
.lb__count { margin: 0; white-space: nowrap; color: var(--amber); font-size: 14px; }
.lb__btn { position: absolute; width: 44px; height: 44px; border: 0; background: var(--astro-surface); color: var(--snow); font-size: 24px; line-height: 1; cursor: pointer; }
.lb__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb__close { right: 16px; top: 12px; }
.motion-on .lb[open] { animation: lbIn 200ms ease-out; }
@keyframes lbIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .lb { padding: max(56px, env(safe-area-inset-top)) 0 calc(76px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .lb__img { max-width: 100vw; max-height: none; width: 100vw; }
  .lb__cap { flex-direction: column; gap: 6px; padding: 0 var(--gutter); }
  .lb__title { font-size: 20px; }
  .lb__prev, .lb__next { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: none; }
  .lb__prev { left: var(--gutter); } .lb__next { right: var(--gutter); }
  .lb__close { top: max(8px, env(safe-area-inset-top)); right: 8px; }
}
/* v33 gate: the viewer counter keeps its width; on phone the picture sits at the top; no focus ring after a tap */
.lb__count { font-variant-numeric: tabular-nums; }
.lb__close:focus:not(:focus-visible) { outline: none; }
@media (max-width: 860px) { .lb { grid-template-rows: auto auto; align-content: start; } }

/* v33b: closing teaser after the Mars gallery (owner: "all solar system soon"); no date, nothing claimed playable */
.astro-next { max-width: calc(min(56vw, 800px)); margin: clamp(72px, 9vw, 120px) auto 0; padding-top: 28px; border-top: 1px solid rgba(255, 181, 71, 0.35); }
.astro-next h3 { margin: 0; font: 500 clamp(1.8rem, 3.2vw, 2.6rem)/1.1 var(--display); color: var(--snow); }
.astro-next p { margin: 10px 0 0; font-size: 15px; color: var(--astro-ink); }
@media (max-width: 860px) { .astro-next { max-width: none; margin-left: var(--gutter); margin-right: var(--gutter); } }

/* ---------- v33c: follow call to action (owner: subscribe / follow for updates). Buttons stay disabled
   placeholders until the YouTube, TikTok and Instagram accounts exist; then each becomes a link. ---------- */
.follow { padding: clamp(96px, 11vw, 160px) var(--gutter); border-top: 1px solid var(--line); display: grid; justify-items: center; gap: 22px; text-align: center; }
.follow .lead { color: #a1a1a6; }
.follow__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.follow__row li { display: grid; justify-items: center; gap: 8px; }
.follow__btn { min-height: 52px; padding: 0 26px; border: 0; background: var(--snow); color: #050506; font: 600 15px/1 var(--text); }
.follow__btn:disabled { background: transparent; color: var(--snow); box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.45); cursor: default; }
.follow__soon { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #a1a1a6; }
.follow__note { margin: 6px 0 0; font-size: 14px; color: #a1a1a6; }
.hc__follow a { color: #d2d2d8; text-decoration: underline; text-decoration-color: #5a5a62; text-underline-offset: 5px; }
.hc__follow a:hover { color: var(--snow); }
.footer__news { margin: 0; font-size: 14px; color: #d2d2d8; }
@media (max-width: 860px) { .follow__row { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; } .follow__btn { width: 100%; } }

/* v33d: tap-to-play fallback, shown only when the browser or app blocks autoplay */
.tap-play { position: absolute; left: 50%; z-index: 3; width: 72px; height: 72px; transform: translate(-50%, -50%); border: 0; background: rgba(5, 5, 6, 0.72); color: var(--snow); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.5); }
.tap-play:hover { background: rgba(5, 5, 6, 0.9); }
.tap-play:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; }

/* ---------- v33e: Astro follows the Racing structure: title, one gallery with an Earth / Mars switch, film ----------
   Selected tab = filled + underline + bold (never colour alone); 44px targets; amber focus ring; fade only. */
[hidden] { display: none !important; }
.astro-switch { display: flex; justify-content: center; gap: 8px; margin: clamp(48px, 6vw, 80px) auto 0; padding: 0 var(--gutter); }
.astro-switch [role='tab'] { min-width: 120px; min-height: 48px; padding: 0 24px; border: 0; background: transparent; color: var(--astro-ink); font: 500 16px/1 var(--text); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(185, 176, 201, 0.35); cursor: pointer; transition: background 0.15s, color 0.15s; }
.astro-switch [role='tab'][aria-selected='true'] { background: var(--astro-surface); color: var(--snow); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(185, 176, 201, 0.35), inset 0 -3px 0 var(--amber); }
.astro-switch [role='tab']:hover { color: var(--snow); }
.astro-panel { outline: none; }
.astro-panel:focus-visible { outline: 3px solid var(--amber); outline-offset: 6px; }
.astro-panel__lead { margin: 22px auto 0; padding: 0 var(--gutter); text-align: center; font-size: 15px; color: var(--astro-ink); }
.astro-panel .carousel { margin-top: 28px; }
.motion-on .astro-panel:not([hidden]) { animation: astroFade 150ms ease-out; }
@keyframes astroFade { from { opacity: 0; } to { opacity: 1; } }

/* v33e gate: the switch row carries the solar-system teaser as a quiet, inactive third item; the section ends on the film like Racing */
.astro-switch { align-items: center; flex-wrap: wrap; }
.astro-switch__tabs { display: flex; gap: 8px; }
.astro-switch__soon { min-height: 48px; display: inline-flex; align-items: center; padding: 0 20px; color: var(--astro-ink); font: 500 14px/1 var(--text); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(185, 176, 201, 0.18); opacity: 0.8; }

/* ---------- v34: film first, then a smaller gallery, in all three packs (owner). Spec by the ECC art director ---------- */
.pack__media { max-width: calc(min(78vw, 1120px) + 2 * var(--gutter)); margin: clamp(40px, 5vw, 64px) auto 0; }
.carousel, .astro-panel .carousel { --slide: min(44vw, 640px); --h: calc(var(--slide) * 9 / 16); }
.pack > .carousel { margin-top: clamp(64px, 8vw, 112px); }
.astro-switch { margin-top: clamp(64px, 8vw, 112px); }
.astro-panel .carousel { margin-top: 24px; }
@media (max-width: 860px) {
  .carousel, .astro-panel .carousel { --slide: 76vw; --h: calc(var(--slide) * 9 / 16); }
  .pack__media { max-width: none; }
}

/* v34: with motion off the hero is ready at once */
.motion-off .hc .hc__card, .motion-off .hc .hc__say, .motion-off .hc .hc__tag { transition: none; }

/* ---------- v36: AMPERE CITY real in-game captures (whole frames, guide bar and HUD visible). Tag in the pack colour ---------- */
.tag-cap { display: inline-block; margin-top: 6px; padding: 2px 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); font: 600 11px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; }
/* D53: the picture viewer takes the colour of its pack, the same way for all three */
.lb[data-set='racing'] { --lbc: var(--race); } .lb[data-set='astro'] { --lbc: var(--astro); } .lb[data-set='cyber'] { --lbc: var(--cyber); }
.lb .lb__tag, .lb .lb__count { color: var(--lbc, var(--snow)); }
.lb .lb__btn:focus-visible { outline-color: var(--lbc, var(--snow)); }

/* v36 gate: honesty line under the Cyber gallery; the page behind the viewer does not scroll */
.pack__note { max-width: calc(min(44vw, 640px)); margin: 18px auto 0; font-size: 14px; line-height: 1.5; color: #a1a1a6; }
@media (max-width: 860px) { .pack__note { max-width: none; padding: 0 var(--gutter); } }
html:has(.lb[open]) { overflow: hidden; }

/* ---------- v38: real-gameplay first page (owner adopted the proposal). Spec by the ECC art director ----------
   One 16:9 stage, frames whole (contain) over a blurred fill of the same graded frame; 2px pack line; label row;
   three tabs with a 6 s progress line; Pause button. Motion (switch on by default) drives cycling and effects. */
.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; }
.rh { display: grid; gap: 12px; }
.rh__stage { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 715px; background: #0A0B0F; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.rh__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 2px; background: var(--rh-c, #FF5A4E); transition: background 350ms; }
.rh__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 350ms cubic-bezier(.2,0,0,1); }
.rh__slide.is-on { opacity: 1; }
.rh__slide > :is(video, .rh__still) { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.rh__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(24px) brightness(.4); transform: scale(1.08); }
.motion-on .rh.is-cycling .rh__slide.is-on .rh__fill { animation: rhFillGrow 2.5s linear forwards; }
.motion-on .rh.is-cycling .rh__slide.is-on > .rh__still { animation: rhStill 2.5s cubic-bezier(.2,.6,.2,1) forwards; }
.motion-on .rh.is-flash .rh__slide.is-on { animation: rhFlash 300ms ease-out; }
.rh.is-paused .rh__slide.is-on :is(.rh__fill, .rh__still) { animation-play-state: paused; }
@keyframes rhFillGrow { from { transform: scale(1.08); } to { transform: scale(1.14); } }
@keyframes rhStill { from { transform: scale(.97); } to { transform: scale(1); } }
@keyframes rhFlash { 0% { filter: brightness(1.25); } 100% { filter: none; } }
.rh__cap { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #D0D3DA; letter-spacing: .04em; }
.rh__dot { width: 6px; height: 6px; background: var(--rh-c, #FF5A4E); }
.rh__pp { margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; color: var(--snow); font-size: 12px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.rh__pp:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rh__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 227px)); gap: 16px; margin-top: 8px; }
.rh__tab { display: grid; gap: 8px; padding: 0; border: 0; background: none; color: var(--snow); text-align: left; cursor: pointer; opacity: .72; transition: opacity 200ms; }
.rh__tab[aria-selected='true'], .rh__tab:hover { opacity: 1; }
.rh__tab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rh__bar { display: block; height: 2px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.rh__bar::after { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--c); }
.rh__tab[aria-selected='true'] .rh__bar::after { transform: scaleX(1); }
.motion-on .rh.is-cycling .rh__tab[aria-selected='true'] .rh__bar::after { animation: rhBar 2.5s linear forwards; }
.rh.is-paused .rh__tab[aria-selected='true'] .rh__bar::after { animation-play-state: paused; }
@keyframes rhBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rh__thumb { display: block; aspect-ratio: 16 / 9; background: #0A0B0F; }
.rh__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rh__name { font: 600 11px/1 var(--text); letter-spacing: .16em; }
.rh__tab[data-pack='race'] { --c: #FF5A4E; } .rh__tab[data-pack='astro'] { --c: #A99BFF; } .rh__tab[data-pack='cyber'] { --c: #3FD0FF; }
.hc .rh .hc__note { margin-top: 6px; }
.motion-off .rh__slide { transition: none; }
@media (max-width: 860px) {
  .hc__grid { display: flex; flex-direction: column; align-items: stretch; }
  .hc__copy { display: contents; }
  .hc__eyebrow { order: 1; } .hc__title { order: 2; } .rh { order: 3; } .hc__lead { order: 4; } .hc__actions { order: 5; }
  .rh__stage { max-width: none; }
  .rh__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* v38 gate: labels never break inside "colour-graded"; phone shows the lead line before the stage */
.rh__label, .hc .rh .hc__note { text-wrap: pretty; }
@media (max-width: 860px) { .hc .hc__lead { order: 3; } .hc .rh { order: 4; } .hc .hc__actions { order: 5; } }

/* ---------- v40: first page after the ECC panel. Full-bleed ambient backdrop (blurred copy of the shown slide), bigger
   stage bleeding to the right edge, slim text tabs, pack-colour light sweep + wordmark + matching headline line.
   The real frame is always shown whole and never covered at the bottom (game HUD). ---------- */
.hc { position: relative; isolation: isolate; overflow: hidden; }
.hc__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hc__bgimg { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; filter: blur(48px) saturate(1.25) brightness(.62); opacity: 0; transition: opacity 350ms ease; }
.hc__bgimg.is-on { opacity: 1; }
.hc__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #050506 0%, rgba(5,5,6,.9) 30%, rgba(5,5,6,.45) 58%, rgba(5,5,6,.15) 100%), linear-gradient(0deg, #050506 0%, rgba(5,5,6,0) 30%); }
.hc__grid { gap: 40px; }
.rh__stage { max-width: none; width: calc(100% + var(--gutter)); margin-right: calc(-1 * var(--gutter)); background: rgba(5,5,6,.35); box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--rh-c, #fff) 45%, transparent), inset 0 0 0 1px rgba(255,255,255,.08); }
.rh__slide > :is(video, .rh__still) { background: transparent; }
.rh__fill { display: none; }
.rh__sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--rh-c, #fff) 55%, transparent) 48%, rgba(255,255,255,.55) 50%, color-mix(in srgb, var(--rh-c, #fff) 55%, transparent) 52%, transparent 70%); transform: translateX(-120%); mix-blend-mode: screen; }
.motion-on .rh.is-switch .rh__sweep { animation: rhSweep 900ms cubic-bezier(.3,.6,.2,1); }
@keyframes rhSweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.rh__mark { position: absolute; top: 18px; left: 22px; z-index: 3; font: 700 clamp(22px, 2.6vw, 40px)/1 var(--text); letter-spacing: .14em; color: #fff; text-shadow: 0 0 24px var(--rh-c, #fff), 0 2px 10px rgba(0,0,0,.6); opacity: 0; pointer-events: none; }
.motion-on .rh.is-switch .rh__mark { animation: rhMark 2200ms cubic-bezier(.2,.7,.2,1); }
.motion-off .rh .rh__mark { display: none; }
@keyframes rhMark { 0% { opacity: 0; transform: translateY(10px); letter-spacing: .3em; } 18% { opacity: 1; transform: none; letter-spacing: .14em; } 70% { opacity: 1; } 100% { opacity: 0; } }
.rh__bar-row { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.rh__cap { flex: 1 1 auto; min-width: 0; }
.rh__tabs { display: flex; gap: 18px; margin: 0; grid-template-columns: none; }
.rh__tab { display: grid; gap: 8px; min-height: 44px; align-content: center; opacity: .62; }
.rh__thumb { display: none; }
.rh__name { font-size: 12px; }
.rh__pp { margin-left: 0; flex: 0 0 auto; }
/* the matching headline line lights up with its pack */
.hc.is-ready[data-live] .hc__ln > * { transition: opacity .5s, text-shadow .5s; }   /* only after the reveal, never against GSAP */
.hc[data-live] .hc__ln:not([data-pack]) > * { opacity: 1; }
.hc[data-live='race'] .hc__ln[data-pack='race'] .hc__say, .hc[data-live='astro'] .hc__ln[data-pack='astro'] .hc__say, .hc[data-live='cyber'] .hc__ln[data-pack='cyber'] .hc__say { text-shadow: 0 0 28px color-mix(in srgb, var(--rh-c, #fff) 55%, transparent); }
.hc[data-live] .hc__ln .hc__tag { opacity: .55; }
.hc[data-live='race'] .hc__ln[data-pack='race'] .hc__tag, .hc[data-live='astro'] .hc__ln[data-pack='astro'] .hc__tag, .hc[data-live='cyber'] .hc__ln[data-pack='cyber'] .hc__tag { opacity: 1; }
.hc__foot { position: relative; }
@media (max-width: 860px) {
  .hc .hc__lead { order: 3; } .hc .hc__actions { order: 4; } .hc .rh { order: 5; }
  .hc__title { font-size: clamp(34px, 10vw, 44px); }
  .rh__stage { width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); }
  .rh__bar-row { flex-wrap: wrap; gap: 6px 14px; }
  .rh__cap { flex-basis: 100%; }
  .rh__tabs { gap: 14px; flex: 1 1 auto; }
  .hc__bg::after { background: linear-gradient(180deg, rgba(5,5,6,.75) 0%, rgba(5,5,6,.55) 45%, #050506 100%); }
}

/* v41 gate: no dark side bars. Stills carry no game HUD, so they fill the stage (16:10 trims 5% top and bottom);
   the racing clips keep the whole frame and HUD, framed by a blurred copy of the same shot. Gap after the pack tags. */
.rh__slide > .rh__still { object-fit: cover; }
@keyframes rhStill { from { transform: scale(1); } to { transform: scale(1.045); } }
.rh__fill { display: block; filter: blur(28px) saturate(1.2) brightness(.55); transform: scale(1.15); }
.motion-on .rh.is-cycling .rh__slide.is-on .rh__fill { animation: none; }
@media (min-width: 861px) { .hc__art.rh { margin-left: 36px; } }
/* v41 phone: the Pause button sits beside the label, the three pack tabs share the full row below */
@media (max-width: 860px) {
  .rh__cap { flex: 1 1 0; order: 1; }
  .rh__pp { order: 2; }
  .rh__tabs { order: 3; flex: 1 1 100%; justify-content: space-between; gap: 10px; }
}

/* ---------- v42: after the v40 panel (6.9). The gameplay is the hero: wider, taller 16:10 stage (the racing clips are
   about 16:10, so they nearly fill it with no side bands), slimmer headline column, pack names only in the tabs,
   brighter ambient light, a tinted sweep with no white core. Phone: a real frame right under the eyebrow. ---------- */
@media (min-width: 861px) {
  .hc__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; padding-block: 0; }
  .hc__art.rh { margin-left: 0; }
  .rh__stage { aspect-ratio: 16 / 10; max-height: calc(100svh - 230px); }
  .hc__title { grid-template-columns: max-content; font-size: clamp(44px, 4.6vw, 74px); }
}
.hc__tag { display: none; }
.hc__bgimg { filter: blur(48px) saturate(1.3) brightness(.78); }
.rh__sweep { background: linear-gradient(100deg, transparent 32%, color-mix(in srgb, var(--rh-c, #fff) 45%, transparent) 50%, transparent 68%); }
.rh__fill { filter: blur(30px) saturate(1.1) brightness(.42); }
.rh__tab { opacity: .82; }
.rh__name { font-size: 13px; }
@media (max-width: 860px) {
  .hc { min-height: 0; }
  .hc .hc__eyebrow { order: 1; } .hc .rh { order: 2; } .hc .hc__title { order: 3; } .hc .hc__lead { order: 4; } .hc .hc__actions { order: 5; }
  .rh__stage { aspect-ratio: 16 / 10; }
}
@media (pointer: coarse) { .nav { background: #000; } }
.hc .hc__title { grid-template-columns: max-content; }   /* one column now the pack tags are gone */
.rh__cap { font-size: 14px; }   /* v42: readable label row */

/* v43 gate (panel 7.0): the pack on screen owns the headline, its wordmark stays on the image for the whole slide,
   a taller stage, and on phone the CTA comes before the label row (one ordering rule, replaces the earlier ones). */
html { scrollbar-gutter: stable; }
@media (min-width: 861px) { .rh__stage { max-height: calc(100svh - 180px); } }
.hc.is-ready[data-live] .hc__ln[data-pack] .hc__say { opacity: .45; }
.hc.is-ready[data-live='race'] .hc__ln[data-pack='race'] .hc__say, .hc.is-ready[data-live='astro'] .hc__ln[data-pack='astro'] .hc__say, .hc.is-ready[data-live='cyber'] .hc__ln[data-pack='cyber'] .hc__say { opacity: 1; text-shadow: 0 0 36px color-mix(in srgb, var(--rh-c, #fff) 70%, transparent); }
.rh__mark { opacity: .92; font-size: clamp(16px, 1.6vw, 24px); }
.motion-on .rh.is-switch .rh__mark { animation: rhMark 1200ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes rhMark { 0% { opacity: 0; transform: translateY(10px); letter-spacing: .3em; } 100% { opacity: .92; transform: none; letter-spacing: .14em; } }
.motion-off .rh .rh__mark { display: block; }
@media (max-width: 860px) {
  .hc .rh { display: contents; }
  .hc .hc__eyebrow { order: 1; } .hc .rh__stage { order: 2; } .hc .hc__title { order: 3; } .hc .hc__lead { order: 4; }
  .hc .hc__actions { order: 5; } .hc .rh__bar-row { order: 6; } .hc .rh .hc__note { order: 7; }
}

/* v45 (owner): no timer bar under the carousels; the arrows and a swipe move them. One Space carousel. */
.carousel__dots { display: none; }
.carousel__nav { justify-content: center; }


/* v45 (owner): no timer bar under the carousels; the arrows and a swipe move them. One Space carousel. */
.carousel__dots { display: none; }
.carousel__nav { justify-content: center; }


/* v46: ECC review round (a11y, SEO, performance, security, copy).
   The Motion switch is a real switch now (aria-checked); same looks as before. */
.motion-btn[aria-checked='true'] .motion-btn__track { background: var(--snow); }
.motion-btn[aria-checked='true'] .motion-btn__track::after { background: #050506; transform: translateX(12px); }
.motion-btn__track { box-shadow: inset 0 0 0 1px #8e8e93; }   /* the off state is visible too */
/* focus ring inside the picture, so the carousel never clips it; two tones read on any frame */
.shot { position: relative; }
.shot:focus-visible { outline: none; }
.shot:focus-visible::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #000; }
.carousel__track:focus-visible { outline-offset: -3px; -webkit-mask-image: none; mask-image: none; }
.rh__stage:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* small text keeps 4.5:1 over bright frames */
.nav { background: rgba(0, 0, 0, .85); }
.nav__links a { color: #d2d2d8; }
.rh__tab { opacity: 1; }
.rh__tab:not([aria-selected='true']) .rh__name { color: #c4c4cc; }
.rh__tab[aria-selected='true'] .rh__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--c); }
.tag-real, .tag-cap, .tag-shot, .tag-concept, .lb__tag { font-size: 12px; }
/* the backdrop is a 96 px copy, blurred anyway: tiny to load and to paint */
.hc__bgimg { image-rendering: auto; }

/* v47 (panel 6.8): the headline visibly conducts the stage: the two other lines step back further, the line of the
   pack on screen glows in its colour, in time with the light sweep. */
.hc.is-ready[data-live] .hc__ln[data-pack] .hc__say { opacity: .38; transition: opacity .4s, text-shadow .4s; }
.hc.is-ready[data-live='race'] .hc__ln[data-pack='race'] .hc__say, .hc.is-ready[data-live='astro'] .hc__ln[data-pack='astro'] .hc__say, .hc.is-ready[data-live='cyber'] .hc__ln[data-pack='cyber'] .hc__say { opacity: 1; text-shadow: 0 0 28px color-mix(in srgb, var(--rh-c, #fff) 85%, transparent), 0 0 64px color-mix(in srgb, var(--rh-c, #fff) 45%, transparent); }
.hc__lead { text-wrap: balance; }   /* v47: no single word alone on the last line */
/* v48: clips without a game HUD (HUD hidden at capture) fill the stage like the stills; clips with a HUD stay whole */
.rh__slide > video.rh__fill-video { object-fit: cover; }
.hc__lead { text-wrap: wrap; }   /* word pairs are kept together with no-break spaces instead */

/* v50 (panel 6.9): nothing moves on a switch, the dimmed lines stay readable (3:1), the pack name reads on bright frames */
.hc .rh .hc__note { min-height: 2.9em; }
.hc.is-ready[data-live] .hc__ln[data-pack] .hc__say { opacity: .58; }
.rh__mark { text-shadow: 0 0 24px var(--rh-c, #fff), 0 1px 3px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.65); }

/* ---------- v54 (owner), D53: the Follow section shows three neon pack blocks, each with its best real clip or shot and
   one Download button that stays disabled with "Soon" until the real download exists (no claim that anything is live).
   The follow channels stay below. ---------- */
.drops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); width: min(1240px, 100%); margin: 28px 0 8px; padding: 0; list-style: none; text-align: left; }
.drop { --n: #fff; position: relative; display: grid; grid-template-rows: auto 1fr; background: #07070a; border: 1px solid color-mix(in srgb, var(--n) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n) 25%, transparent), 0 0 24px color-mix(in srgb, var(--n) 40%, transparent), 0 0 70px -10px color-mix(in srgb, var(--n) 45%, transparent), inset 0 0 24px color-mix(in srgb, var(--n) 12%, transparent); }
.drop[data-pack='race'] { --n: #ff5a4e; } .drop[data-pack='astro'] { --n: #a99bff; } .drop[data-pack='cyber'] { --n: #3fd0ff; }
.motion-on .drop { animation: dropHum 3.6s ease-in-out infinite; }
.motion-on .drop[data-pack='astro'] { animation-delay: -1.2s; } .motion-on .drop[data-pack='cyber'] { animation-delay: -2.4s; }
@keyframes dropHum { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.drop__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--n) 55%, transparent); background: #000; }
.drop__media > :is(video, img) { width: 100%; height: 100%; object-fit: cover; display: block; }
.motion-on .drop__still { animation: rhStill 8s ease-in-out infinite alternate; }
.drop__body { display: grid; gap: 12px; align-content: start; padding: 20px 20px 22px; }
.drop__name { margin: 0; font: 700 clamp(22px, 2vw, 28px)/1 var(--text); letter-spacing: .12em; color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--n) 85%, transparent), 0 0 2px color-mix(in srgb, var(--n) 90%, transparent); }
.drop__line { margin: 0; font-size: 15px; color: #c4c4cc; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.drop__tag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--n) 75%, #fff); }
.drop__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.drop__btn { min-height: 48px; padding: 0 12px; border: 0; background: transparent; color: var(--snow); font: 600 14px/1.1 var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--n) 60%, transparent); cursor: default; }
.drop__btn--main { background: color-mix(in srgb, var(--n) 18%, transparent); }
.drop__btn:disabled { opacity: .78; }
.drop__soon { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #a1a1a6; }
.follow__lead { margin: 26px 0 0; font-size: 15px; color: #c4c4cc; }
.follow .follow__row { margin-top: 4px; }
@media (max-width: 960px) { .drops { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
.motion-off .drop { animation: none; }
.drop__line { display: grid; gap: 6px; }   /* the label always sits on its own line, so the three blocks line up */

/* v56 (panel 7.2): the pack buttons read as not-yet-available; the APEX grid frame drops the cut gantry sign */
.drop__btn, .drop__btn--main { background: transparent; color: #9a9aa2; box-shadow: none; border: 1px dashed color-mix(in srgb, var(--n) 45%, transparent); }
.drop__btn:disabled { opacity: 1; }
.drop__chip { display: inline-block; margin-left: 6px; padding: 2px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--n) 80%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--n) 50%, transparent); }
.drop__soon { text-transform: none; letter-spacing: .02em; font-size: 13px; }
.rh__slide > .rh__still--low { object-position: center 85%; }
.drop__btn { display: grid; justify-items: center; gap: 6px; padding: 8px 10px; } .drop__chip { margin-left: 0; }   /* the Soon tag sits under the label on both buttons */

/* v57: side slides stay readable (55%), so each row never looks empty */
.carousel figure { opacity: .55; } .carousel figure.is-active { opacity: 1; }

/* v58: Racing ships (claude-build-20261024-r1): circuits and Race Team facts block, scoped to the pack pages */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; width: min(1100px, 100% - 2 * var(--gutter)); margin: 48px auto 0; }
.facts__title, .slot__title { margin: 0 0 12px; font: 600 14px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #ff6b61; }
.facts__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.facts__list li { padding: 8px 12px; font-size: 15px; color: #e6e6ea; box-shadow: inset 0 0 0 1px rgba(255, 107, 97, .45); }
.facts__list--suits b { color: #fff; font-weight: 600; margin-right: 4px; }
.facts__line { margin: 0 0 10px; color: #c4c4cc; font-size: 15px; }
.pack .pack__note { width: min(1100px, 100% - 2 * var(--gutter)); margin: 32px auto 0; }
.facts__title, .slot__title { color: var(--c); font: 500 19px/1.3 var(--text); letter-spacing: 0; text-transform: none; margin: 0 0 16px; }
.facts { gap: 48px; margin-top: 64px; align-items: start; }
.facts__list li { padding: 10px 14px; font-size: 14px; color: var(--snow); background: #121215; box-shadow: none; cursor: default; }
.facts__list--suits li { display: inline-flex; align-items: center; gap: 8px; }
.facts__list--suits li::before { content: ''; width: 14px; height: 14px; background: linear-gradient(135deg, var(--s1) 50%, var(--s2) 50%); outline: 1px solid rgba(255,255,255,.18); outline-offset: -1px; }
.facts__list--suits b { margin: 0; font-weight: 500; }
.facts__pill { display: inline-block; margin: 0 0 14px; }
.pack .pack__note { max-width: none; text-align: left; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; text-wrap: pretty; }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr); } }
/* v59 (Racing panel 7.2): tidy circuit grid, readable swatches, a short note line */
.facts__sub { margin: -8px 0 12px; font-size: 13px; color: #a1a1a6; }
.pack .pack__note { max-width: 68ch; margin-left: max(var(--gutter), calc((100% - 1100px) / 2)); text-wrap: balance; font-size: 14px; color: #c4c4cc; }

/* Day 0 build (tools/build_final.py): the pack buttons become live links and must read as available (gate 2, 28 Oct) */
a.drop__btn { color: var(--snow); border: 1px solid color-mix(in srgb, var(--n) 70%, transparent); cursor: pointer; text-decoration: none; align-content: center; }
a.drop__btn--main { background: var(--n); color: #050506; border-color: transparent; }
a.drop__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.drop__actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.footer__links { margin: 0; font-size: 14px; color: #d2d2d8; } .footer__links a { color: inherit; }
a.follow__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Wed 28 round: hero tab names stay on one line from tablet width up (wrapped at 1024 px) */
@media (min-width: 700px) { .rh__name { white-space: nowrap; } }
/* Thu 29 round: key art at the top of each pack, Age 10 portrait tag, bio loop */
.pack__keyart { margin-bottom: 0; }
.pack__keyart img { aspect-ratio: 16 / 9; height: auto; object-fit: contain; background: #000; }
.me__tag, .me__loop { --c: var(--sky); }
.me__tag { margin-top: 10px; }
.me__loop { margin: 36px 0 0; max-width: 480px; }
.me__loop-img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--carbon); }
.me__loop figcaption { margin-top: 10px; font-size: 14px; color: var(--graphite); }
.me__loop .tag-concept { margin: 0 8px 0 0; }
/* D53 pack template (29 Oct): the three pack sections share the same blocks in the same order */
.pack__block { width: min(1100px, 100% - 2 * var(--gutter)); margin: clamp(56px, 7vw, 96px) auto 0; font: 600 13px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #a1a1a6; text-align: center; }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding: 0; list-style: none; }
.facts--3 .facts__col { padding: 22px; background: #0e0e11; box-shadow: inset 0 2px 0 var(--c); }
.facts--3 .facts__title { margin: 0 0 10px; }
.facts--3 p { margin: 0; font-size: 15px; line-height: 1.5; color: #c4c4cc; }
.pack__block + .carousel { margin-top: 20px; }
.pack__more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: min(1100px, 100% - 2 * var(--gutter)); margin: clamp(48px, 6vw, 80px) auto 0; }
.pack__more > div { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.pack__more h3 { margin: 0 0 8px; font: 500 17px/1.3 var(--text); color: var(--c); }
.pack__more p { margin: 0; font-size: 14px; line-height: 1.5; color: #c4c4cc; }
.pack__more b { color: var(--snow); font-weight: 600; }
.pack__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 14px; color: var(--snow); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
.pack__link:hover { text-decoration-color: var(--snow); }
@media (max-width: 960px) { .pack__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .facts--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pack__more { grid-template-columns: minmax(0, 1fr); } }

/* D53 film slot: the real-gameplay film sits in the same place in every pack. One button on the picture:
   a big Play (pack colour) when paused, a small Pause in the corner while it plays. */
.film { position: relative; }
.film video { display: block; width: 100%; height: auto; }   /* the height="…" attribute must not win over the 16:9 box */
.film__play { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(5, 5, 6, 0.3); color: var(--snow); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition-property: background-color; transition-duration: 0.2s; }
.film__play:hover { background: rgba(5, 5, 6, 0.15); }
.film__icon { position: relative; width: 72px; height: 72px; background: var(--c, var(--sky)); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); transition: transform 0.15s var(--ease); }
.film__icon::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -8px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #050506; }   /* 3 px right of the box centre: optically centred */
.film__text { padding: 5px 10px; background: rgba(5, 5, 6, 0.72); text-wrap: balance; }
.film__play:hover .film__icon { transform: scale(1.05); }
.film__play:active .film__icon { transform: scale(0.96); }
.film__play:focus-visible { outline: 2px solid var(--sky); outline-offset: -4px; box-shadow: inset 0 0 0 6px #050506; }
html:not(.js) .film__play { display: none; }
.film__play.is-playing { inset: auto 10px 10px auto; width: 44px; height: 44px; background: transparent; }
.film__play.is-playing .film__icon { width: 44px; height: 44px; background: rgba(5, 5, 6, 0.72); box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.4); }
.film__play.is-playing .film__icon::before { margin: -8px 0 0 -6px; width: 4px; height: 16px; border: 0; background: var(--snow); box-shadow: 8px 0 0 var(--snow); }
.film__play.is-playing .film__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) { .film__icon { width: 56px; height: 56px; } .film__icon::before { margin: -10px 0 0 -6px; border-width: 10px 0 10px 17px; } .film__text { font-size: 13px; } }

/* D59 (blind art director, 29 Oct): same shapes in every pack section */
.facts--3 { align-items: stretch; }                                  /* the 3 cards of a row share one height */
.facts--3 .facts__title { min-height: 2.6em; text-wrap: balance; }   /* 1- and 2-line titles start the text at the same height */
.pack__film video { aspect-ratio: auto; }                            /* each film frame follows its footage (no bars, nothing cropped) */
.carousel figcaption .tag-cap { display: table; }                    /* the tag always sits on its own line under the title */
.tag-cap, .tag-concept { max-width: 100%; text-wrap: balance; }      /* a long tag wraps inside one box */
@media (max-width: 520px) { .pack__more p, .facts--3 p { font-size: 15px; } }
/* D62 (COO, 29 Oct): the ▶ is a compact pill at the bottom left on every film, clear of the on-screen titles and the HUD (bottom centre) */
.film__play:not(.is-playing) { inset: auto auto 14px 14px; width: auto; flex-direction: row; gap: 0; padding: 0 14px 0 0; background: rgba(5, 5, 6, 0.78); box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.25); }
.film__play:not(.is-playing):hover { background: rgba(5, 5, 6, 0.9); }
.film__play:not(.is-playing) .film__icon { width: 56px; height: 56px; box-shadow: none; }
.film__play:not(.is-playing) .film__icon::before { margin: -10px 0 0 -6px; border-width: 10px 0 10px 17px; }
.film__play:not(.is-playing) .film__text { padding: 0 0 0 12px; background: none; white-space: nowrap; }
.film__play:not(.is-playing):focus-visible { outline-offset: 2px; box-shadow: 0 0 0 6px #050506; }
@media (max-width: 480px) { .film__play:not(.is-playing) { inset: auto auto 8px 8px; padding-right: 10px; } .film__play:not(.is-playing) .film__icon { width: 44px; height: 44px; } .film__play:not(.is-playing) .film__icon::before { margin: -8px 0 0 -5px; border-width: 8px 0 8px 14px; } .film__play:not(.is-playing) .film__text { padding-left: 10px; font-size: 13px; } }
/* D64 (COO + GPT audit #7): the first screen answers "what do I play?" in 10 s: plain pitch, 3 real-gameplay proof tiles,
   date + platform, one button */
.hc__copy { gap: 18px; }
.hc__lead { max-width: 40ch; color: #e6e6ea; text-wrap: pretty; }
.hc__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.hc__proof a { display: grid; gap: 2px; text-decoration: none; color: var(--snow); }
.hc__proof img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 6px; box-shadow: 0 3px 0 var(--c); outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.hc__proof b { font: 600 13px/1.2 var(--text); letter-spacing: 0.06em; color: var(--c); }
.hc__proof span { font-size: 14px; line-height: 1.3; color: #d2d2d8; }
.hc__proof a:hover span { color: var(--snow); }
.hc__proof a:focus-visible { outline: 2px solid var(--snow); outline-offset: 4px; }
.hc__proof-tag { margin: -8px 0 0; font: 600 11px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: #a1a1a6; }
.hc__when { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 15px; color: #d2d2d8; }
.hc__when strong { color: var(--snow); font-weight: 600; }
@media (max-width: 860px) { .hc__proof span { font-size: 13px; } .hc__proof b { font-size: 12px; } }

/* D74 (owner: "make illustration of menu for all pack"): a picture on top of each "What you get" card, pixel icons on the info row */
.card-pic { margin: -22px -22px 18px; background: #07080b; border-bottom: 2px solid var(--c); }
.card-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: var(--fit, cover); transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%); }
.card-pic img[src$='.svg'] { image-rendering: pixelated; }
.card-pic__tag { margin: 0; padding: 7px 12px 6px; font: 600 11px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #c4c4cc; background: #07080b; border-top: 1px solid rgba(255, 255, 255, .08); }   /* D75: a strip under the picture, never on top of game text or the HUD */
.facts--3 .facts__col { overflow: hidden; }
.pack__more { gap: 16px; }
.pack__more > div { padding: 20px; border-top: 0; background: #0e0e11; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pack__ic { display: block; width: 32px; height: 32px; margin: 0 0 14px; color: var(--c); }
@media (max-width: 760px) { .facts--3 .facts__title { min-height: 0; } }
@media (max-width: 520px) { .card-pic { margin: -22px -22px 16px; } .pack__more > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; } .pack__more > div > :not(.pack__ic) { grid-column: 2; } .pack__ic { grid-row: 1 / span 3; margin: 2px 0 0; } }

/* D75 (D64 #7 review): on phone the plain pitch, proof, date and the button come first, the big stage after */
@media (max-width: 860px) {
  .hc .hc__eyebrow { order: 1; } .hc .hc__title { order: 2; } .hc .hc__lead { order: 3; } .hc .hc__proof { order: 4; } .hc .hc__proof-tag { order: 5; }
  .hc .hc__when { order: 6; } .hc .hc__actions { order: 7; } .hc .rh__stage { order: 8; } .hc .rh__bar-row { order: 9; } .hc .rh .hc__note { order: 10; }
}

/* D85: a clip that fails the smoothness gate ships as its poster (plain still, no Play) */
.film__still { display: block; width: 100%; height: auto; }
.carousel figure .clip__still { display: block; width: 100%; height: var(--h); object-fit: contain; background: #000; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }

/* Owner review: About / AURA. Scoped to the final two sections. */
.aura-manifesto { gap: 20px; padding-bottom: clamp(50px, 6vw, 90px); }
.aura-manifesto::after { background: linear-gradient(90deg, transparent, rgba(212, 178, 104, .65), transparent); }
.aura-eyebrow, .aura-kicker { color: #d4b268; font: 600 12px/1.4 var(--text); letter-spacing: .2em; text-transform: uppercase; }
.aura-manifesto .big { color: #f5f2ea; font-size: clamp(3.4rem, 7.5vw, 7.5rem); line-height: .98; }
.aura-identity { color: #c6c3bc; font-size: 15px; letter-spacing: .08em; }
.aura-about { padding-top: clamp(60px, 7vw, 100px); align-items: start; }
.aura-title { margin: 17px 0 28px; color: #f5f2ea; font: 500 clamp(2.5rem, 4.1vw, 4.5rem)/1.05 var(--display); letter-spacing: -.02em; }
.aura-copy { max-width: 37rem; color: #c9c8c3; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.75; }
.aura-copy p + p { margin-top: 1.1em; }
.aura-copy strong { color: #f5f2ea; font-weight: 600; }
.aura-passions { margin-top: 32px; color: #d4b268; font: 600 12px/1.5 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.aura-passions span { color: #76bdc5; padding: 0 .5em; }
.aura-about .me__tag { color: #c9c8c3; font-size: 13px; line-height: 1.5; }
@media (max-width: 860px) { .aura-about { gap: 36px; } .aura-manifesto .big { font-size: clamp(3rem, 12vw, 5rem); } .aura-title { font-size: clamp(2.3rem, 9vw, 3.5rem); } }
@media (prefers-reduced-motion: reduce) { :root:not(.motion-on) .aura-about .helmet__push, :root:not(.motion-on) .aura-about .helmet__glint::before { animation: none !important; } }

/* Owner review: portrait-first About, with the story alongside on desktop. */
.aura-about .frame--helmet { grid-column: 2; grid-row: 1; }
.aura-about .me__text { grid-column: 1; grid-row: 1; }
@media (max-width: 860px) {
  .aura-manifesto { padding-top: 88px; padding-bottom: 24px; }
  .aura-manifesto::after { margin-top: 18px; }
  .aura-about { padding-top: 24px; gap: 34px; }
  .aura-about .frame--helmet, .aura-about .me__text { grid-column: 1; grid-row: auto; }
  .aura-about .frame--helmet { width: min(100%, 360px); }
  .aura-copy { line-height: 1.65; }
}

/* Private review: gameplay-first hierarchy and motion-aware stills. */
.concept-detail, .rl-concept { max-width: 1120px; margin: 18px auto 32px; color: #c9c9cd; }
.concept-detail summary, .rl-concept summary { cursor: pointer; width: fit-content; padding: 10px 0; font-size: 14px; }
.compact-keyart, .rl-concept .rl-key { width: min(100%, 360px); margin: 12px 0 0; }
.still-stage { position: relative; overflow: hidden; }
.still-stage img { transform-origin: center; animation: still-pan 16s ease-in-out infinite alternate; animation-play-state: paused; }
.still-stage.is-moving img { animation-play-state: running; }
@keyframes still-pan { from { transform: scale(1); } to { transform: scale(1.045) translateX(-.8%); } }
.stage-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 8px 12px; background: #111; color: #fff; border: 1px solid #aaa; font: 600 13px/1.2 sans-serif; cursor: pointer; }
.stage-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { :root:not(.motion-on) .still-stage img { animation: none; } }

/* Private review: bring each pack's gameplay into the first view. */
.pack { padding-top: clamp(64px, 7vw, 112px); }
.pack__head { gap: clamp(16px, 1.5vw, 22px); }
.pack__block { margin-top: 32px; }
.pack__block + .pack__film { margin-top: 20px; }

/* Selected About B: restrained gold editorial emphasis. */
.aura-manifesto .big span { color: #d6bd82; }
.aura-copy .aura-motto { color: #d6bd82; font: 500 clamp(2rem, 3vw, 3rem)/1.1 var(--display); margin-top: 1em; }

/* Align the key-art disclosure with the gameplay stage. */
.concept-detail { max-width: calc(min(78vw, 1120px) + 2 * var(--gutter)); padding: 0 var(--gutter); }
.concept-detail summary { list-style-position: inside; }
.concept-detail .compact-keyart { padding: 0; }
@media (max-width: 860px) { .concept-detail { max-width: none; } }

/* Selected About B: a single navigable editorial section. */
.about-selected { position: relative; align-items: center; padding-top: clamp(90px, 10vw, 150px); }
.about-anchor { position: absolute; top: 0; left: 0; scroll-margin-top: 64px; }
.about-selected .selected-head { margin: 24px 0; color: #f5f2ea; font: 500 clamp(3.6rem, 6vw, 6.5rem)/.95 var(--display); letter-spacing: -.025em; }
.about-selected .selected-head span { color: #d6bd82; }
.about-selected .aura-identity { color: #e1ddd1; font: 600 12px/1.4 var(--text); letter-spacing: .18em; text-transform: uppercase; }
.about-selected .aura-copy { margin-top: 40px; }
@media (max-width: 860px) { .about-selected { padding-top: 64px; } .about-selected .selected-head { font-size: clamp(3.4rem, 12vw, 5.4rem); } }

/* Private owner review: follow updates and concept preview. */
.hc__follow { color: #f5f5f7; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.ai-credit { color: #c9c8c3; font-size: 13px; line-height: 1.5; }
.drop--concept { --n: #c9aa6c; }
.drop__concept-art { aspect-ratio: 16/9; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 38%, #282116, #0a0908 70%); color: #d6bd82; }
.drop__concept-art span { font: 500 clamp(3rem, 5vw, 5rem)/1 var(--display); letter-spacing: .08em; }
@media (min-width: 1200px) { .drops { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 961px) and (max-width: 1199px) { .drops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Private review: separate current packs from December worlds. */
.upcoming-title { margin: 44px 0 0; color: #c9c9cd; font: 600 13px/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.drops--upcoming { max-width: 800px; }
.drop--abyss { --n: #76bdc5; }
.drop--abyss .drop__concept-art { color: #a4d2d5; background: radial-gradient(ellipse at 50% 38%, #142e35, #070b0d 70%); }
@media (min-width: 961px) { .drops--current { grid-template-columns: repeat(3, minmax(0, 1fr)); } .drops--upcoming { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .drops--current, .drops--upcoming { grid-template-columns: minmax(0, 1fr); } }

/* Hero-specific pause control. */
.rh__pp { width: auto; min-width: 100px; padding: 0 12px; justify-self: end; }