/* Time Federation  mobile first. Breakpoints: 768px (tablet), 1200px (desktop). */

:root {
  --red: #ff2a1a;
  --red-deep: #7a140c;
  --ink: #140404;
  --bg: #050303;
  --surface: #0a0404;
  --cream: #e9e2dc;
  --white: #fff;
  --muted: rgb(255 255 255 / 0.7);
  --faint: rgb(255 255 255 / 0.45);
  --line: rgb(255 42 26 / 0.4);
  --glow: 0 0 24px rgb(255 42 26 / 0.45);
  --font-display: "Orbitron", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, monospace;
  --gutter: 16px;
  --nav-h: 64px;
  --max: 1440px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; --nav-h: 88px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px;
  background: var(--red); color: var(--ink); font-family: var(--font-display); font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.icon { width: 1em; height: 1em; display: inline-block; flex: none; }

/* ---------- Fixed background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg__sky {
  position: absolute; inset: 0;
  background: linear-gradient(#040202 0%, #120404 40%, #3a0907 64.2%, #1a0504 64.4%, #060202 100%);
}
.bg__stars { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.bg__planet {
  position: absolute; border-radius: 50%; opacity: 0.8;
  background: radial-gradient(circle at 35% 30%, #4a0d09, #120303 70%);
  box-shadow: inset 0 0 0 1px rgb(255 42 26 / 0.18);
}
.bg__planet--a { width: 280px; height: 280px; right: -60px; top: 60px; }
.bg__planet--b { width: 92px; height: 92px; left: 6%; top: 34%; }
.bg__planet--c { width: 70px; height: 70px; right: 10%; top: 44%; }
.bg__planet--c::after {
  content: ""; position: absolute; left: -45%; right: -45%; top: 38%; height: 26%;
  border: 1.5px solid rgb(255 42 26 / 0.22); border-radius: 50%; transform: rotate(-8deg);
}
.bg__glow {
  position: absolute; left: 50%; top: 64.3%; width: 110vw; height: 320px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(255 42 26 / 0.38), transparent);
}
.bg__mountains { position: absolute; left: 0; width: 100%; height: 70px; bottom: 35.7%; }
.bg__floor { position: absolute; left: 0; right: 0; top: 64.3%; bottom: 0; overflow: hidden; perspective: 1px; }
.bg__floor img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0.4; }
.bg__floor::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 60px; z-index: 1;
  background: linear-gradient(rgb(42 6 5 / 0.9), transparent);
}
.bg__horizon {
  position: absolute; left: 0; right: 0; top: 64.3%; height: 1px;
  background: rgb(255 42 26 / 0.7); box-shadow: 0 0 10px rgb(255 42 26 / 0.6);
}
.bg__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.75)); }
@media (min-width: 1200px) {
  .bg__planet--a { width: 280px; height: 280px; right: 90px; top: 0; }
  .bg__planet--b { width: 92px; height: 92px; left: 7%; top: 28%; }
  .bg__planet--c { right: 13%; top: 43%; }
  .bg__mountains { height: 100px; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 8px 0 var(--gutter);
  transition: background 0.3s, backdrop-filter 0.3s;
}
.nav.is-scrolled { background: rgb(5 3 3 / 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav__brand {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  text-decoration: none; white-space: nowrap;
}
.nav__links, .nav__aside { display: none; }
.nav__toggle { width: 44px; height: 44px; display: grid; place-items: center; font-size: 44px; color: var(--white); }
.nav__toggle-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }

@media (min-width: 1200px) {
  .nav { padding: 0 var(--gutter); }
  .nav__brand { font-size: 14px; }
  .nav__toggle { display: none; }
  .nav__links { display: flex; gap: clamp(16px, 1.6vw, 32px); }
  .nav__link {
    position: relative; padding: 10px 0; text-decoration: none; color: var(--red); white-space: nowrap;
    font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red);
    box-shadow: 0 0 8px rgb(255 42 26 / 0.6); transform: scaleX(0); transition: transform 0.3s var(--ease);
  }
  .nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }
  .nav__aside { display: flex; align-items: center; gap: 20px; }
}

.lang { display: flex; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; }
.lang a { text-decoration: none; color: var(--faint); padding: 6px 0; }
.lang a[aria-current="true"] { color: var(--white); }
.lang--lg { font-size: 16px; gap: 20px; }


/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 40; padding: calc(var(--nav-h) + 24px) var(--gutter) 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgb(5 3 3 / 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.menu[hidden] { display: none; }
.menu__links a {
  display: block; padding: 16px 0; border-bottom: 1px solid rgb(255 42 26 / 0.25); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: 0.06em; color: var(--red); text-transform: uppercase;
}
.menu__foot { display: grid; gap: 20px; }
.menu__slogan { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--muted); }
body.menu-open { overflow: hidden; }
@media (min-width: 1200px) { .menu { display: none !important; } }

/* ---------- Shared ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: calc(var(--nav-h) + 32px) 0 64px; }
@media (min-width: 1200px) {
  .section { min-height: 100svh; padding: calc(var(--nav-h) + 16px) 0 56px; display: flex; align-items: center; }
}
.section-head { margin-bottom: 24px; }
.section-title {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 10vw, 64px); line-height: 1;
  letter-spacing: 0.02em; color: var(--red); text-transform: uppercase; text-shadow: var(--glow);
}
.section-sub { margin-top: 8px; color: var(--muted); font-size: 15px; }
@media (min-width: 1200px) { .section-sub { font-size: 16px; } .section-head { margin-bottom: 32px; } }
.kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--red); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px;
  padding: 14px 26px; border-radius: 6px; border: 1.5px solid var(--red); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
  transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn--primary { background: var(--red); color: var(--ink); box-shadow: 0 0 20px rgb(255 42 26 / 0.4); }
.btn--primary:hover { box-shadow: 0 0 32px rgb(255 42 26 / 0.7); transform: translateY(-1px); }
.btn--ghost { color: var(--red); background: rgb(5 3 3 / 0.4); }
.btn--ghost:hover { background: var(--red); color: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { min-height: 64px; padding: 20px 34px; font-size: 15px; }
.btn--sm { min-height: 40px; padding: 10px 16px; font-size: 12px; }
.btn.is-disabled { opacity: 0.45; pointer-events: none; color: var(--white); border-color: rgb(255 42 26 / 0.35); background: none; }
.btn__icon svg, .btn__svg { width: 20px; height: 20px; }
.btn__icon { display: grid; }
.text-link { color: var(--red); text-decoration: none; font-size: 14px; }
.text-link:hover { text-decoration: underline; }

[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Home ---------- */
.home { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #060303; display: grid; place-items: center; }
.home__tunnel { position: absolute; inset: 0; --vy: 47%; }
.home__rays { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.home__rings { position: absolute; inset: 0; }
.home__rings span {
  position: absolute; left: 50%; top: var(--vy); width: 110vw; height: 105svh;
  border: 1px solid rgb(255 42 26 / 0.45); transform: translate(-50%, -50%) scale(0.04); opacity: 0;
  animation: ring 8s linear infinite; animation-delay: calc(var(--i) * -1s);
}
@keyframes ring {
  0% { transform: translate(-50%, -50%) scale(0.04); opacity: 0; }
  15% { opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.05; }
}
.home__core {
  position: absolute; left: 50%; top: var(--vy); width: min(130vw, 900px); aspect-ratio: 9 / 7; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(255 42 26 / 0.55), rgb(58 9 7 / 0.85) 35%, transparent);
  animation: core 6s ease-in-out infinite alternate;
}
@keyframes core { to { opacity: 0.75; transform: translate(-50%, -50%) scale(1.06); } }
.home::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgb(5 3 3 / 0.85)); pointer-events: none; }
.home__content {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px;
  --logo: min(72vw, 46svh, 400px); transform: translateY(-4svh);
}
.home__title {
  width: calc(var(--logo) * 0.832); display: flex; justify-content: space-between;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, calc(var(--logo) * 0.055), 22px);
  color: var(--red); text-shadow: 0 0 14px rgb(255 42 26 / 0.4); white-space: pre; letter-spacing: 0;
}
.home__title span { display: inline-block; white-space: pre; }
.home__logo { width: var(--logo); height: var(--logo); overflow: visible; filter: drop-shadow(0 0 30px rgb(255 42 26 / 0.7)); }
/* Hourglass: the outline draws itself, then lights up */
.logo-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation-fill-mode: forwards; animation: logo-draw 1.6s cubic-bezier(.6,.1,.3,1) forwards; animation-delay: calc(0.3s + var(--n) * 0.09s); }
.logo-fill { opacity: 0; animation: logo-fill 0.8s ease-out 2s forwards; }
@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-fill { from { opacity: 0; } to { opacity: 1; } }

.home__slogan {
  margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 3.6vw, 22px);
  letter-spacing: 0.12em; text-align: center; text-shadow: 0 0 12px #000;
}
.timeline { position: absolute; z-index: 1; left: 50%; bottom: max(24px, 5svh); width: min(86vw, 1120px); height: 60px; transform: translateX(-50%); }
.timeline__ticks { position: absolute; inset: 0; border-bottom: 1px solid transparent; background: linear-gradient(90deg, rgb(255 255 255 / 0.1), var(--red)) bottom 30px left 0 / 100% 1px no-repeat; }
.timeline__tick { position: absolute; left: var(--p); bottom: 30px; width: 1px; height: 6px; background: rgb(255 255 255 / 0.22); }
.timeline__tick.is-major { height: 10px; background: rgb(255 255 255 / 0.4); }
.timeline__tick.is-decade { height: 14px; background: rgb(255 255 255 / 0.55); }
.timeline__tick i { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font: 10px var(--font-mono); letter-spacing: 0.1em; color: rgb(255 255 255 / 0.5); font-style: normal; }
.timeline__tick.is-major i { display: none; }
.timeline__now { position: absolute; left: var(--p); bottom: 30px; width: 2px; height: 28px; background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1.2s steps(2) infinite; }
.timeline__now::before { content: ""; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--red); }
.timeline__now i { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font: 700 12px var(--font-display); letter-spacing: 0.14em; color: var(--red); font-style: normal; }
@keyframes blink { 50% { opacity: 0.35; } }
@media (min-width: 768px) { .timeline__tick.is-major i { display: block; } }

/* ---------- Tapes, rack and carousel (Watch + Music) ---------- */
.rack { position: relative; container-type: inline-size; min-width: 0; }
.rack__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.rack__title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.rack__hint { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--red); text-transform: uppercase; }
.rack__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max)) / 2)));
  padding-right: var(--gutter);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.rack__viewport::-webkit-scrollbar { display: none; }
/* Pages of 4 tapes: 2 x 2 on mobile, one row on tablet, 2 x 2 on desktop.
   Mobile and tablet leave a slice of the next tapes peeking at the edge. */
.rack__track {
  display: grid; grid-auto-flow: column; gap: 20px 12px; width: max-content;
  grid-template-rows: auto auto; grid-auto-columns: calc((100cqw - 12px - 24px) / 2);
}
.rack__item { min-width: 0; }
.rack__item:nth-child(4n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
@media (min-width: 768px) {
  .rack__track { grid-template-rows: auto; grid-auto-columns: calc((100cqw - 3 * 16px - 32px) / 4); column-gap: 16px; }
}
@media (min-width: 1200px) {
  .rack__viewport { mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); }
  .rack__track { grid-template-rows: auto auto; grid-auto-columns: calc((100cqw - 16px) / 2); gap: 24px 16px; }
}
.tape { position: relative; display: block; width: 100%; border-radius: 6px; transition: transform 0.25s var(--ease), filter 0.25s; }
.tape svg { width: 100%; height: auto; }
.tape:hover { transform: translateY(-4px); filter: drop-shadow(0 6px 18px rgb(255 42 26 / 0.35)); }
.tape__slot {
  position: absolute; inset: 0; display: none; place-items: center; border: 1px dashed rgb(255 42 26 / 0.6); border-radius: 6px;
  font: 12px var(--font-mono); letter-spacing: 0.2em; color: var(--red); text-transform: uppercase;
}
.tape.is-playing svg { visibility: hidden; }
.tape.is-playing .tape__slot { display: grid; }
.tape.is-playing:hover { transform: none; filter: none; }
.tape__kicker { margin-top: 10px; font: 11px var(--font-mono); letter-spacing: 0.16em; color: var(--red); }
.tape__kicker span { color: var(--faint); margin-left: 8px; }
.tape__kicker--muted { margin-top: 4px; color: var(--faint); letter-spacing: 0.06em; }
.tape__title { margin-top: 4px; font: 700 11px/1.35 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.tape--cassette + .tape__title, .tape--cassette + .tape__kicker--muted { margin-top: 10px; }
.rack__stage { position: relative; }
.rack__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 28px; min-height: 44px; }
@media (min-width: 1200px) { .rack__controls { margin: 32px 0 36px; } }
.rack__arrows { display: flex; gap: 10px; margin-left: auto; }
.carousel-btn {
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 44px;
  border-radius: 50%; background: rgb(10 4 4 / 0.9); border: 1.5px solid var(--red); color: var(--white); box-shadow: var(--glow);
  transition: transform 0.2s, opacity 0.2s;
}
.carousel-btn:hover { transform: scale(1.06); }
.carousel-btn[hidden] { display: none; }
.carousel-btn[disabled] { opacity: 0.3; box-shadow: none; cursor: default; transform: none; }
.dots { display: flex; gap: 10px; }
.dots button { width: 24px; height: 12px; position: relative; }
.dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: rgb(255 255 255 / 0.35); }
.dots button[aria-current="true"]::before { background: var(--red); }

.keys { display: flex; gap: 10px; }
.key {
  flex: 1; min-width: 44px; height: 52px; display: grid; place-items: center; font-size: 22px; color: var(--white);
  border-radius: 4px; border: 1px solid rgb(255 42 26 / 0.4); background: linear-gradient(#241010, #0e0505);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.key svg { width: 22px; height: 14px; }
.key:active { transform: translateY(2px); }
.key--play { color: var(--red); border-color: var(--red); background: linear-gradient(#3a0907, #0e0505); box-shadow: 0 0 10px rgb(255 42 26 / 0.5); }
.key:hover { border-color: var(--red); }

/* ---------- Watch ---------- */
.watch__grid { display: grid; gap: 40px; }
@media (min-width: 1200px) {
  .watch__grid { grid-template-columns: minmax(0, 780px) minmax(0, 1fr); gap: 56px; align-items: start; }
  /* TV + VCR always fit the viewport height on desktop */
  .deck { width: min(100%, calc((100svh - 380px) / 0.62)); min-width: 460px; }
}
.tv {
  container-type: inline-size; display: grid; grid-template-columns: 1fr 19%; gap: 3cqw; padding: 3cqw;
  border-radius: clamp(14px, 3.4cqw, 26px); border: 1.5px solid rgb(255 42 26 / 0.5);
  background: linear-gradient(#24100e, #0b0505); box-shadow: 0 0 40px rgb(255 42 26 / 0.22);
}
.tv__screen {
  position: relative; aspect-ratio: 7 / 5; overflow: hidden; border-radius: clamp(16px, 5cqw, 40px); background: #000;
  box-shadow: 0 0 0 3px #000, inset 0 0 60px #000;
}
.tv__poster, .tv__player, .tv__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.tv__poster { filter: saturate(0.9); }
.tv__player { opacity: 0; transition: opacity 0.3s; }
.tv.is-on .tv__player { opacity: 1; }
.tv__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgb(0 0 0 / 0.8)), linear-gradient(135deg, rgb(255 255 255 / 0.1), transparent 45%); }
.tv__scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / 0.28) 2px 3px); z-index: 2; }
.tv__static {
  position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tv__screen.is-static .tv__static { opacity: 0.9; animation: static 0.12s steps(3) infinite; }
@keyframes static { 0% { background-position: 0 0; } 33% { background-position: 40px 70px; } 66% { background-position: -60px 20px; } }
.tv__screen.is-poweron .tv__player, .tv__screen.is-poweron .tv__poster { animation: crt-on 0.55s var(--ease); }
@keyframes crt-on { 0% { transform: scale(1, 0.004); filter: brightness(6); } 45% { transform: scale(1, 0.004); filter: brightness(6); } 100% { transform: none; filter: none; } }
.tv__osd { position: absolute; z-index: 4; left: 6%; right: 6%; top: 5%; display: flex; justify-content: space-between; font: clamp(13px, 3.4cqw, 22px) var(--font-mono); letter-spacing: 0.08em; text-shadow: 0 0 6px #000; pointer-events: none; }
.tv__osd b { font-weight: 400; }
.tv__channel { position: absolute; z-index: 4; left: 6%; bottom: 5%; font: clamp(11px, 2.4cqw, 16px) var(--font-mono); color: var(--red); letter-spacing: 0.1em; pointer-events: none; }
.tv__play {
  position: absolute; z-index: 5; left: 50%; top: 50%; width: clamp(56px, 12cqw, 92px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-size: clamp(28px, 6cqw, 46px);
  color: #fff; background: rgb(5 3 3 / 0.25); box-shadow: 0 0 20px rgb(255 42 26 / 0.5); transition: transform 0.2s, opacity 0.3s;
}
.tv__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.tv.is-on .tv__play { opacity: 0; pointer-events: none; }
.tv__panel { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding-top: 2cqw; font: clamp(7px, 1.3cqw, 10px) var(--font-mono); letter-spacing: 0.16em; color: var(--faint); }
.knob { width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgb(255 42 26 / 0.5); background: radial-gradient(circle at 35% 30%, #3a1512, #120606); position: relative; }
.knob::after { content: ""; position: absolute; left: 50%; top: 8%; width: 6%; height: 26%; background: var(--red); border-radius: 2px; transform: translateX(-50%); }
.knob--b::after { transform: translateX(-50%) rotate(40deg); transform-origin: 50% 160%; }
.grille { width: 76%; flex: 1; min-height: 30px; margin-top: 2cqw; background: repeating-linear-gradient(#000 0 4px, transparent 4px 13px); opacity: 0.7; border-radius: 2px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); margin: 1cqw 0; }

.vcr {
  margin-top: 14px; display: grid; gap: 12px; padding: 12px; border-radius: 8px;
  border: 1px solid rgb(255 42 26 / 0.45); background: linear-gradient(#1e0c0b, #0a0404);
  grid-template-areas: "slot display" "keys keys"; grid-template-columns: 1fr auto; align-items: center;
}
.vcr__slot { grid-area: slot; height: 34px; padding: 5px 14px; border-radius: 4px; background: #050202; border: 1px solid rgb(255 42 26 / 0.7); position: relative; overflow: hidden; }
.vcr__spine { display: flex; align-items: center; height: 100%; padding: 0 0 0 12px; border-radius: 2px; background: #140f0f; position: relative; }
.vcr__spine b {
  display: block; max-width: 100%; padding: 2px 10px 2px 12px; background: var(--cream); color: var(--ink); border-left: 6px solid var(--red);
  font: 700 9px var(--font-display); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcr .keys { grid-area: keys; }
.vcr__display { grid-area: display; padding: 9px 14px; border-radius: 4px; background: #070202; font: 14px var(--font-mono); letter-spacing: 0.08em; color: var(--red); text-shadow: 0 0 8px rgb(255 42 26 / 0.8); white-space: nowrap; }
@media (min-width: 768px) {
  .vcr { grid-template-areas: "slot keys display"; grid-template-columns: minmax(180px, 1fr) auto auto; padding: 16px 20px; gap: 20px; }
  .vcr .key { flex: none; width: 48px; height: 46px; }
}

/* ---------- Music ---------- */
.music__grid { display: grid; gap: 40px; }
@media (min-width: 1200px) {
  .music__grid { grid-template-columns: minmax(0, 860px) minmax(0, 1fr); gap: 52px; align-items: start; }
  .boombox-wrap { padding-top: 40px; width: min(100%, calc((100svh - 330px) / 0.6)); min-width: 520px; }
}
.boombox-wrap { padding-top: 28px; }
.boombox {
  container-type: inline-size; position: relative; padding: 4.6cqw; border-radius: clamp(16px, 3.5cqw, 30px);
  border: 1.5px solid rgb(255 42 26 / 0.55); background: linear-gradient(#1f0b0a, #0a0404); box-shadow: 0 0 40px rgb(255 42 26 / 0.25);
}
.boombox__handle { position: absolute; left: 50%; bottom: 100%; width: 46%; height: clamp(26px, 5cqw, 46px); transform: translateX(-50%); border: clamp(4px, 0.7cqw, 6px) solid rgb(255 42 26 / 0.6); border-bottom: 0; border-radius: 18px 18px 0 0; }
.boombox__display {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "readout time" "eq eq" "embed embed"; gap: 6px 16px;
  padding: 12px 16px; border-radius: 8px; background: #0a0202; border: 1px solid rgb(255 42 26 / 0.35);
  color: var(--red); text-shadow: 0 0 8px rgb(255 42 26 / 0.7);
}
.boombox__readout { grid-area: readout; display: grid; min-width: 0; }
.boombox__state { font: 14px var(--font-mono); letter-spacing: 0.1em; }
.boombox__track { font: 700 clamp(14px, 2.4cqw, 20px) var(--font-display); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boombox__time { grid-area: time; align-self: center; font: clamp(20px, 3.6cqw, 30px) var(--font-mono); letter-spacing: 0.06em; }
.eq { grid-area: eq; display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.eq span { flex: 1; height: 30%; background: linear-gradient(var(--red), var(--red-deep)); border-radius: 1px; transform-origin: bottom; }
.boombox.is-playing .eq span { animation: eq 0.9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
@keyframes eq { 0% { height: 15%; } 50% { height: 90%; } 100% { height: 40%; } }
.boombox__embed { grid-area: embed; display: none; text-shadow: none; }
.boombox__embed iframe { display: block; width: 100%; height: 80px; border: 0; border-radius: 8px; }
.boombox.has-embed .boombox__embed { display: block; }
@media (min-width: 1200px) {
  .boombox__display { grid-template-columns: auto 1fr minmax(240px, 40%); grid-template-areas: "readout time eq" "embed embed embed"; }
  .boombox__time { justify-self: center; }
  .eq { height: 52px; }
}
.boombox__body { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 3cqw; margin-top: 4cqw; }
.speaker {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: #0c0404; box-shadow: 0 0 0 1.5px rgb(255 42 26 / 0.45), inset 0 0 0 12px #0c0404, inset 0 0 0 13px rgb(255 42 26 / 0.25), inset 0 0 0 30px #0c0404, inset 0 0 0 31px rgb(255 42 26 / 0.35);
}
.speaker span { width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 42 26 / 0.8) 0 18%, #3a0907 20%, #0c0404 70%); box-shadow: 0 0 0 1px rgb(255 42 26 / 0.5); }
.boombox.is-playing .speaker span { animation: thump 0.46s ease-in-out infinite alternate; }
@keyframes thump { to { transform: scale(1.06); } }
.boombox__center { display: grid; gap: 3cqw; }
.boombox__door { position: relative; aspect-ratio: 25 / 17; border-radius: 8px; background: #070202; border: 1.5px solid rgb(255 42 26 / 0.6); padding: 6% 6%; overflow: hidden; perspective: 500px; }
.boombox__door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(255 255 255 / 0.08), transparent 50%); pointer-events: none; }
.boombox__tape svg { width: 100%; height: auto; }
.reel { transform-box: fill-box; transform-origin: center; }
.boombox.is-playing .boombox__tape .reel { animation: spin 1.6s linear infinite; }
.boombox__lid { position: absolute; inset: 0; z-index: 2; border-radius: 6px; border: 1px solid rgb(255 42 26 / 0.35); background: linear-gradient(160deg, rgb(255 255 255 / 0.07), transparent 45%); transform-origin: 50% 100%; pointer-events: none; }
.boombox .keys { gap: 1cqw; }
.boombox .key { height: clamp(34px, 5.4cqw, 46px); min-width: 0; }
.boombox .key svg { width: 70%; }
@container (max-width: 560px) {
  .boombox__body { grid-template-columns: 1fr 1.3fr 1fr; row-gap: 14px; }
  .boombox__center { display: contents; }
  .boombox__door { grid-column: 2; grid-row: 1; }
  .boombox__center .keys { grid-column: 1 / -1; grid-row: 2; gap: 10px; }
  .boombox .key { height: 48px; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.listen { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 12px; font: 700 12px var(--font-display); letter-spacing: 0.14em; }
.listen span { width: 100%; font: 13px var(--font-mono); letter-spacing: 0.18em; color: var(--faint); text-transform: uppercase; }
.listen a { color: var(--red); text-decoration: none; }
.listen a:hover { text-decoration: underline; }
@media (min-width: 1200px) { .listen span { width: auto; } }

/* Flying tape used by the insert animation */
.flying-tape { position: fixed; z-index: 60; pointer-events: none; will-change: transform; }
.flying-tape svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 30px rgb(255 42 26 / 0.5)); }

/* ---------- Gallery ---------- */
.gallery__grid { display: grid; gap: 28px; }
.gallery__intro { display: grid; gap: 14px; justify-items: start; }
.gallery__intro .btn { order: 9; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaic__item { position: relative; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 42 26 / 0.35); }
.mosaic__item--0, .mosaic__item--5 { grid-column: span 2; }
.mosaic__item--0 { aspect-ratio: 6 / 5; }
.mosaic__item--5 { aspect-ratio: 16 / 9; }
.mosaic__item--1, .mosaic__item--2, .mosaic__item--3, .mosaic__item--4, .mosaic__item--6 { aspect-ratio: 4 / 5; }
.mosaic__item--4 { display: none; }
.mosaic button { display: block; width: 100%; height: 100%; position: relative; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.mosaic__item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 55%, rgb(5 3 3 / 0.55)); pointer-events: none; }
.mosaic__expand { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 36px; height: 36px; color: #fff; opacity: 0; transition: opacity 0.3s; }
.mosaic__item:hover img, .mosaic__item:focus-within img { transform: scale(1.04); }
.mosaic__item:hover, .mosaic__item:focus-within { box-shadow: inset 0 0 0 2px var(--red), 0 0 22px rgb(255 42 26 / 0.45); }
.mosaic__item:hover .mosaic__expand, .mosaic__item:focus-within .mosaic__expand { opacity: 1; }
@media (min-width: 768px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, minmax(150px, 1fr)); }
  .mosaic__item { aspect-ratio: auto !important; }
  .mosaic__item--4 { display: block; }
  .mosaic__item--0 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .mosaic__item--1 { grid-column: 3; grid-row: 1; }
  .mosaic__item--2 { grid-column: 4; grid-row: 1 / span 2; }
  .mosaic__item--3 { grid-column: 3; grid-row: 2; }
  .mosaic__item--4 { grid-column: 1; grid-row: 3; }
  .mosaic__item--5 { grid-column: 2 / span 2; grid-row: 3; }
  .mosaic__item--6 { grid-column: 4; grid-row: 3; }
}
@media (min-width: 1200px) {
  .gallery__grid { grid-template-columns: 340px 1fr; gap: 48px; align-items: end; }
  .gallery__intro { padding-bottom: 8px; }
  .mosaic { height: calc(100svh - var(--nav-h) - 72px); max-height: 760px; }
}
.lightbox { padding: 0; border: 0; max-width: none; max-height: none; width: 100vw; height: 100svh; background: rgb(5 3 3 / 0.96); color: #fff; }
.lightbox::backdrop { background: rgb(0 0 0 / 0.8); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { display: grid; gap: 12px; justify-items: center; padding: 64px 16px; }
.lightbox__figure img { max-width: min(92vw, 1400px); max-height: calc(100svh - 160px); object-fit: contain; box-shadow: 0 0 40px rgb(255 42 26 / 0.25); }
.lightbox__btn { position: fixed; width: 52px; height: 52px; display: grid; place-items: center; font-size: 52px; color: #fff; border-radius: 50%; background: rgb(10 4 4 / 0.8); border: 1.5px solid var(--red); }
.lightbox__close { top: 16px; right: 16px; font-size: 44px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Store ---------- */
.store__grid { display: grid; gap: 28px; }
@media (max-width: 1199px) {
  .store__info { display: contents; }
  .store__info .section-title { order: 1; }
  .store__info .section-sub { order: 2; margin-top: -20px; }
  .store__media { order: 3; }
  .store__product { order: 4; margin-top: 0; }
}
.store__product { display: grid; gap: 14px; margin-top: 28px; }
.store__name { font: 700 clamp(24px, 6vw, 30px)/1.2 var(--font-display); letter-spacing: 0.04em; }
.store__desc { color: var(--muted); }
.store__note { font-size: 13px; color: var(--faint); }
.store__media { display: grid; gap: 12px; }
.store__main { aspect-ratio: 5 / 7; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px rgb(255 42 26 / 0.5), 0 0 40px rgb(255 42 26 / 0.25); }
.store__main img, .store__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.crop-detail { object-position: 66% 44%; transform: scale(2.2); transform-origin: 66% 44%; }
.store__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.store__thumbs button { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(255 42 26 / 0.35); }
.store__thumbs button[aria-current="true"] { box-shadow: 0 0 0 2px var(--red); }
@media (min-width: 1200px) {
  .store__grid { grid-template-columns: 500px 1fr; gap: 80px; align-items: center; }
  .store__info { align-self: stretch; display: flex; flex-direction: column; }
  .store__product { margin-top: auto; margin-bottom: auto; }
  .store__media { grid-template-columns: minmax(0, 500px) minmax(0, 222px); grid-template-rows: minmax(0, 1fr); gap: 30px; height: calc(100svh - var(--nav-h) - 80px); max-height: 720px; }
  .store__main { aspect-ratio: auto; height: 100%; min-height: 0; }
  .store__thumbs { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: 0; }
  .store__thumbs li, .store__thumbs button { min-height: 0; }
  .store__thumbs button { aspect-ratio: auto; height: 100%; }
}

/* ---------- Live ---------- */
.board { border-radius: 10px; overflow: hidden; border: 1.5px solid rgb(255 42 26 / 0.5); background: linear-gradient(rgb(23 9 8 / 0.95), rgb(10 4 4 / 0.95)); box-shadow: 0 0 40px rgb(255 42 26 / 0.22); }
.board__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #0a0303; border-bottom: 1px solid var(--line); }
.board__bar h3 { font: 700 13px var(--font-display); letter-spacing: 0.2em; }
.board__clock { font: 14px var(--font-mono); letter-spacing: 0.1em; color: var(--red); text-shadow: 0 0 8px rgb(255 42 26 / 0.7); }
.board__clock b { font-weight: 400; }
.board__head { display: none; }
.board__rows { padding: 4px 16px 8px; }
.board__row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "date status" "city city" "venue venue" "cta cta"; gap: 10px; padding: 18px 0; border-bottom: 1px solid rgb(255 255 255 / 0.07); }
.board__row:last-child { border-bottom: 0; }
.flaps { display: flex; gap: 2px; flex-wrap: nowrap; }
.flaps--date { grid-area: date; }
.flaps--status { grid-area: status; justify-self: end; }
.flaps--city { grid-area: city; }
.flaps--venue { grid-area: venue; }
.board__row .btn { grid-area: cta; }
.flap {
  position: relative; display: grid; place-items: center; width: 18px; height: 28px; border-radius: 2px;
  background: linear-gradient(#1c0e0d 0 50%, #120707 50% 100%); font: 700 13px var(--font-display); color: #fff;
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / 0.8); }
.flaps--date .flap, .is-onsale .flaps--status .flap { color: var(--red); }
.board__row.is-soldout .flap, .board__row.is-done .flap { opacity: 0.45; }
.board__empty { padding: 28px 0; font: 13px var(--font-mono); letter-spacing: 0.18em; color: var(--faint); text-transform: uppercase; }
button.text-link { cursor: pointer; font-family: var(--font-body); }
.flaps--city .flap:nth-child(n+14), .flaps--venue .flap:nth-child(n+13) { display: none; }
.flaps--status .flap { width: 14px; height: 22px; font-size: 10px; background: none; }
.flaps--status .flap::after { display: none; }
.live__foot { margin-top: 28px; display: grid; gap: 18px; }
.live__foot p { display: grid; gap: 14px; color: var(--muted); }
@media (min-width: 900px) {
  .board__bar { padding: 16px 32px; }
  .board__head, .board__row { display: grid; grid-template-columns: 132px 330px 308px 1fr 140px; grid-template-areas: none; gap: 0 40px; align-items: center; }
  .board__head { padding: 18px 32px 6px; font: 11px var(--font-mono); letter-spacing: 0.2em; color: var(--faint); }
  .board__rows { padding: 0 32px 12px; }
  .board__row { padding: 14px 0; }
  .flaps--date, .flaps--status, .flaps--city, .flaps--venue, .board__row .btn { grid-area: auto; justify-self: start; }
  .flap { width: 20px; height: 30px; font-size: 15px; }
  .flaps--city .flap:nth-child(n+14), .flaps--venue .flap:nth-child(n+13) { display: grid; }
  .flaps--status .flap { width: 20px; height: 30px; font-size: 15px; background: linear-gradient(#1c0e0d 0 50%, #120707 50% 100%); }
  .flaps--status .flap::after { display: block; }
  .board__row .btn { width: 100%; }
  .live__foot { grid-template-columns: 1fr auto; align-items: center; }
  .live__foot p { display: flex; align-items: center; gap: 24px; }
  .board__head, .board__row { grid-template-columns: 132px minmax(0, 330px) minmax(0, 308px) minmax(0, 1fr) 140px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .board__head, .board__row { grid-template-columns: 132px minmax(0, 1fr) 140px; }
  .flaps--venue, .board__head span:nth-child(3), .board__head span:nth-child(4), .flaps--status { display: none; }
}
/* Each change folds the top half down like a real split-flap */
.flap { transform-style: preserve-3d; perspective: 120px; }
.flap.is-flipping { animation: flip 0.075s linear; }
.flap.is-flipping::before { content: ""; position: absolute; inset: 0 0 50%; border-radius: 2px 2px 0 0; background: linear-gradient(rgb(255 255 255 / 0.12), rgb(0 0 0 / 0.45)); transform-origin: bottom; animation: fold 0.075s linear; }
@keyframes flip { 50% { transform: scaleY(0.82); filter: brightness(1.4); } }
@keyframes fold { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
.board__colon { animation: colon 1s steps(2) infinite; }
@keyframes colon { 50% { opacity: 0.15; } }
.board__row.is-onsale .flaps--status::before {
  content: ""; align-self: center; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; flex: none;
  background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1.4s steps(2) infinite;
}
.board__row { transition: background 0.25s; }
.board__row:hover { background: rgb(255 42 26 / 0.05); }

/* ---------- Booking ---------- */
.booking { overflow: hidden; }
.booking .planet {
  position: absolute; right: -40%; top: 40%; width: 520px; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 28% 25%, #7a1a10, #3a0907 45%, #0e0303 100%);
  box-shadow: 0 0 0 1.5px rgb(255 42 26 / 0.5), 0 0 80px rgb(255 42 26 / 0.35), inset -40px -40px 120px rgb(255 42 26 / 0.25);
}
.booking .planet::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(8deg, transparent 0 40px, rgb(255 42 26 / 0.08) 40px 41px); }
.booking::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgb(5 3 3 / 0.2), rgb(5 3 3 / 0.75) 60%); }
.booking__content { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: start; }
.booking__lead { font-size: 20px; line-height: 1.35; color: rgb(255 255 255 / 0.85); }
.booking__lead--sm { font-size: 16px; }
.booking__note { font-size: 14px; color: var(--faint); margin-top: -4px; }
.booking .btn--lg { width: 100%; box-shadow: 0 0 26px rgb(255 42 26 / 0.5); }
@media (min-width: 768px) { .booking .btn--lg { width: auto; } }
@media (min-width: 1200px) {
  .booking::before { background: linear-gradient(90deg, rgb(5 3 3 / 0.85) 35%, transparent 60%); }
  .booking .planet { right: -200px; top: auto; bottom: -120px; width: 760px; }
  .booking__lead { font-size: 24px; }
  .booking__content { align-content: center; }
}
.booking--thanks .booking__content { justify-items: center; text-align: center; min-height: 60svh; align-content: center; }


/* ---------- Storytelling (federation archive + crew) ---------- */
.story .container { display: grid; }
.archive {
  position: relative; overflow: hidden; border-radius: 10px;
  border: 1.5px solid rgb(255 42 26 / 0.6); background: rgb(10 4 4 / 0.92);
  box-shadow: 0 0 28px rgb(255 42 26 / 0.3);
}
.archive::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 3px, rgb(0 0 0 / 0.16) 3px 4px);
}
.archive__bar {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px;
  background: rgb(255 42 26 / 0.14); border-bottom: 1px solid rgb(255 42 26 / 0.5);
  font: 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.archive__bar span:first-child { color: var(--red); }
.archive__bar span:last-child { color: var(--faint); }
.archive__body { position: relative; padding: 24px 20px 22px; }
.archive__label { margin-bottom: 12px; font: 14px var(--font-mono); letter-spacing: 0.16em; color: var(--red); text-transform: uppercase; }
.archive__headline {
  margin-bottom: 28px; font: 700 20px/1.3 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase;
}
.archive__cols { display: grid; gap: 28px; }
.archive__block + .archive__block { margin-top: 28px; }
.archive__block p { font-size: 16px; line-height: 1.6; color: rgb(255 255 255 / 0.85); }
.archive__block p + p { margin-top: 12px; }
.archive__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.archive__slogan { font: 700 16px var(--font-display); letter-spacing: 0.1em; color: var(--red); text-transform: uppercase; text-shadow: var(--glow); }
.archive__cursor { display: inline-block; width: 0.55em; height: 1em; margin-left: 10px; vertical-align: -0.12em; background: var(--red); animation: cursor 1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.archive__status { display: flex; align-items: center; gap: 14px; font: 10px var(--font-mono); letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; }
.archive__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 2s ease-in-out infinite; }
@media (min-width: 768px) {
  .archive__body { padding: 36px 36px 30px; }
  .archive__headline { font-size: 26px; }
  .archive__block p { font-size: 17px; }
}
@media (min-width: 1024px) {
  .archive__bar { padding: 13px 24px; font-size: 12px; }
  .archive__body { padding: 40px 48px 44px; }
  .archive__headline { font-size: 32px; margin-bottom: 40px; }
  .archive__cols { grid-template-columns: 1fr 1fr; gap: 0; }
  .archive__col + .archive__col { padding-left: 32px; margin-left: 32px; border-left: 1px solid rgb(255 42 26 / 0.35); }
  .archive__block p { font-size: 19px; }
  .archive__slogan { font-size: 24px; }
  .archive__status { font-size: 12px; }
  .archive__label { font-size: 16px; }
}

.crew { margin-top: 56px; }
.crew__title { font: 700 13px var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; }
.crew__intro { margin-top: 8px; color: var(--muted); font-size: 16px; }
.crew__list { list-style: none; display: grid; gap: 20px; margin-top: 20px; }
.crew__card { padding: 12px 12px 22px; border-radius: 8px; border: 1px solid rgb(255 42 26 / 0.45); background: rgb(13 5 5 / 0.9); }
.crew__photo { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 4px; }
.crew__photo img { width: 100%; height: 100%; object-fit: cover; }
.crew__photo::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(transparent 0 3px, rgb(0 0 0 / 0.14) 3px 4px), linear-gradient(transparent 60%, rgb(13 5 5 / 0.9));
}
.crew__name { margin: 18px 6px 0; font: 700 18px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.crew__bio { margin: 10px 6px 0; font-size: 15px; line-height: 1.55; color: rgb(255 255 255 / 0.82); }
@media (min-width: 768px) {
  .crew__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .crew__photo { aspect-ratio: 4 / 5; }
}
@media (min-width: 1200px) {
  .crew { margin-top: 72px; }
  .crew__intro { font-size: 18px; }
  .crew__list { gap: 24px; margin-top: 28px; }
  .crew__card { padding: 14px 14px 26px; }
  .crew__photo { aspect-ratio: 1; }
  .crew__name { margin: 24px 8px 0; font-size: 20px; }
  .crew__bio { margin: 12px 8px 0; font-size: 17px; }
}

/* ---------- Join (recruitment) ---------- */
.join__grid { display: grid; gap: 56px; align-items: center; }
.join__lead { margin-top: 36px; max-width: 560px; font-size: 22px; line-height: 1.35; }
.join__text { margin-top: 16px; max-width: 520px; font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / 0.8); }
.join__btn { width: 100%; margin-top: 28px; box-shadow: 0 0 26px rgb(255 42 26 / 0.5); }
.join__note { margin-top: 16px; white-space: pre-wrap; font: 10px var(--font-mono); letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.agent { display: flex; justify-content: center; padding: 8px 6px 24px; }
.agent__card {
  container-type: inline-size; width: min(100%, 560px); transform: rotate(-4deg); overflow: hidden;
  border-radius: 16px; border: 1.5px solid var(--red);
  background: linear-gradient(135deg, #290808, #0a0404);
  box-shadow: 0 0 40px rgb(255 42 26 / 0.45), 0 24px 40px rgb(0 0 0 / 0.6);
}
.agent__band { display: flex; align-items: center; justify-content: space-between; height: 9.3cqw; padding: 0 4.3cqw; background: var(--red); color: #0d0505; }
.agent__band b { font: 700 2.9cqw var(--font-display); letter-spacing: 0.08em; }
.agent__band span { font: 2.3cqw var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.agent__body { display: grid; grid-template-columns: 27cqw 1fr 21.4cqw; gap: 4.3cqw; padding: 4.3cqw; align-items: start; }
.agent__photo { position: relative; aspect-ratio: 150 / 186; overflow: hidden; border: 1px dashed rgb(255 42 26 / 0.6); border-radius: 1cqw; background: #050202; color: var(--red); }
.agent__photo svg { width: 100%; height: 100%; display: block; }
.agent__photo span { position: absolute; left: 0; right: 0; top: 37.6%; transform: translateY(-50%); text-align: center; font: 900 6cqw var(--font-display); }
.agent__fields { display: grid; gap: 2.1cqw; }
.agent__fields dt { font: 2cqw var(--font-mono); letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; }
.agent__fields dd { margin-top: 0.4cqw; font: 700 3.2cqw var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.agent__fields .is-red { color: var(--red); }
.agent__logo { width: 100%; height: auto; opacity: 0.9; }
.agent__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; padding: 0 4.3cqw 4.3cqw; }
.agent__barcode {
  width: 53cqw; height: 7cqw;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 2px, transparent 2px 4px, rgb(255 255 255 / 0.85) 4px 5px, transparent 5px 8px, rgb(255 255 255 / 0.85) 8px 11px, transparent 11px 13px);
}
.agent__slogan { font: 700 2cqw var(--font-display); letter-spacing: 0.1em; color: var(--red); text-align: right; }
@media (min-width: 768px) {
  .join__btn { width: auto; }
  .join__note { font-size: 12px; }
}
@media (min-width: 1200px) {
  .join__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .join__lead { font-size: 28px; line-height: 1.3; }
  .join__text { font-size: 16px; }
  .join__btn { margin-top: 40px; }
  .agent__card { transform: rotate(-6deg); }
}

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; padding: 48px 0 36px; background: var(--bg); border-top: 1px solid var(--red); box-shadow: 0 -1px 12px rgb(255 42 26 / 0.6); }
.footer::before {
  content: ""; position: absolute; left: 50%; top: -160px; width: min(1000px, 140%); height: 260px; transform: translateX(-50%);
  border-radius: 50%; background: rgb(255 42 26 / 0.16); filter: blur(90px); pointer-events: none;
}
.footer__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.footer__brand { grid-column: 1 / -1; }
.footer__id { display: flex; align-items: center; gap: 16px; }
.footer__id img { width: 64px; height: 64px; filter: drop-shadow(0 0 12px rgb(255 42 26 / 0.5)); }
.footer__name { font: 700 18px var(--font-display); letter-spacing: 0.12em; }
.footer__slogan { margin-top: 6px; font: 11px var(--font-mono); letter-spacing: 0.16em; color: var(--red); }
.footer__about { margin-top: 24px; max-width: 420px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.footer__label { margin-bottom: 16px; font: 11px var(--font-mono); letter-spacing: 0.18em; color: var(--red); text-transform: uppercase; }
.footer__col ul { list-style: none; display: grid; gap: 14px; }
.footer__col a { font: 700 14px var(--font-display); letter-spacing: 0.1em; color: var(--white); text-decoration: none; transition: color 0.2s; }
.footer__col a:hover { color: var(--red); }
.footer__lang { display: flex !important; gap: 24px !important; }
.footer__lang a { color: var(--faint); }
.footer__lang a[aria-current="true"] { color: var(--white); }
.footer__bar {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid rgb(255 42 26 / 0.3);
  font: 10px var(--font-mono); letter-spacing: 0.14em; color: var(--faint);
}
.footer__bar a { color: rgb(255 255 255 / 0.7); text-decoration: none; }
.footer__bar a:hover { color: var(--red); }
@media (min-width: 1024px) {
  .footer { padding: 80px 0 40px; }
  .footer__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr); gap: 48px; }
  .footer__brand { grid-column: auto; }
  .footer__id { gap: 20px; }
  .footer__id img { width: 88px; height: 88px; }
  .footer__name { font-size: 22px; }
  .footer__slogan { font-size: 14px; }
  .footer__about { font-size: 15px; }
  .footer__label { font-size: 12px; }
  .footer__col a { font-size: 16px; }
  .footer__bar { margin-top: 64px; font-size: 12px; }
}

/* ---------- Reduced motion ---------- */
/* Reduced motion: keep the gentle, story-telling animations (hourglass drawing,
   tapes going into the players, flaps forming text, fades) and stop anything
   that loops, pulses, flashes or moves the whole screen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home__rings span { animation: none; opacity: 0.25; }
  .home__rings span:nth-child(1) { transform: translate(-50%, -50%) scale(0.2); }
  .home__rings span:nth-child(2) { transform: translate(-50%, -50%) scale(0.4); }
  .home__rings span:nth-child(3) { transform: translate(-50%, -50%) scale(0.65); }
  .home__rings span:nth-child(4) { transform: translate(-50%, -50%) scale(0.95); }
  .home__core, .timeline__now, .board__colon, .board__row.is-onsale .flaps--status::before,
  .boombox.is-playing .eq span, .boombox.is-playing .speaker span { animation: none; }
  .tv__screen.is-static .tv__static { animation: none; opacity: 0; }
  .js [data-reveal] { transform: none; transition: opacity 0.6s ease; }
  .tape:hover { transform: none; }
  .archive__cursor, .archive__status i { animation: none; }
}