/* Memento H — page styles. Logical properties only; physical exceptions carry a physical-ok mark. */

:root {
  --bg-900: #0B0E14;
  --bg-800: #10141C;
  --bg-700: #171C26;
  --bg-600: #1F2530;
  --scrim: rgba(8, 10, 14, .82);

  /* Accent: magenta picked from the Vice Signalling promo art */
  --accent: #BA2C7E;       /* fill; white text 5.6:1 */
  --accent-hot: #C62F86;   /* hover fill; white text 5.1:1 */
  --accent-deep: #942365;  /* pressed */
  --accent-soft: rgba(186, 44, 126, .16);
  --accent-ink: #DB66AA;   /* accent as text on --bg-900, 6.0:1 */
  --accent-ink-hot: #E48CBE;

  --text-hi: #FFFFFF;
  --text-mid: rgba(255, 255, 255, .72);
  --text-low: rgba(255, 255, 255, .56);
  --text-muted: rgba(255, 255, 255, .34);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  --font-display: "Oswald", "Bebas Neue", "Archivo Condensed", system-ui, sans-serif;
  --font-ui: "Inter", "Roboto", system-ui, sans-serif;
  --fs-hero: clamp(44px, 6.2vw, 84px);
  --fs-h2: clamp(30px, 3.4vw, 46px);
  --fs-scene: clamp(44px, 5.4vw, 76px); /* scene title: below the hero H1 */
  --fs-h3: 22px;
  --fs-card: 16px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-label: 11px;
  --fs-btn: 13px;
  --lh-display: .92;
  --ls-label: .18em;
  --ls-btn: .12em;
  --tt: uppercase;

  --container: 1240px;
  --gutter: 28px;
  --pad-x: clamp(20px, 5vw, 72px);
  --space-1: 8px; --space-2: 16px; --space-3: 24px;
  --space-4: 40px; --space-5: 64px; --space-6: 96px; --space-7: 128px;
  --section-y: clamp(64px, 9vw, 120px);
  --radius: 4px;
  --header-h: 72px;

  --ease: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t: 240ms;

  /* direction helpers: gradients and horizontal motion follow dir */
  --start: left;
  --end: right;
  --dir-x: 1;

  color-scheme: dark;
  scrollbar-color: #2B3240 var(--bg-900);
}
[dir="rtl"] { --start: right; --end: left; --dir-x: -1; }

/* Arabic and Chinese never get caps or tracking.
   Latin faces first, so titles, the brand and English quotes keep the system's Latin
   metrics; the script's own glyphs fall through to Kufi / Noto Sans SC / TC (Oswald/Inter carry none). */
:lang(ar) {
  --font-display: "Oswald", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-ui: "Inter", "Noto Kufi Arabic", system-ui, sans-serif;
}
:lang(zh) {
  --font-display: "Oswald", "Noto Sans SC", system-ui, sans-serif;
  --font-ui: "Inter", "Noto Sans SC", system-ui, sans-serif;
}
:lang(zh-Hant) {
  --font-display: "Oswald", "Noto Sans TC", system-ui, sans-serif;
  --font-ui: "Inter", "Noto Sans TC", system-ui, sans-serif;
}
:lang(ar), :lang(zh) { --tt: none; --ls-label: 0; --ls-btn: 0; --lh-display: 1.25; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg-900);
  color: var(--text-low);
  font: 400 var(--fs-body)/1.65 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  caret-color: var(--accent-ink);
}
img, video, svg { display: block; max-inline-size: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
[id] { scroll-margin-block-start: var(--header-h); }
[hidden] { display: none !important; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
/* The one visually-hidden pattern: read by screen readers, never shown */
.vh, .scene--live .scene__lines .line.line--chorus, .scene--live .scene__lines .line.line--others { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
.i { inline-size: 18px; block-size: 18px; flex: none; }
main:focus { outline: none; }

.container { inline-size: min(100% - 2 * var(--pad-x), var(--container)); margin-inline: auto; }

.skip {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 100;
  padding: 12px 18px; background: var(--accent); color: #fff;
  font: 700 var(--fs-btn)/1 var(--font-display); letter-spacing: var(--ls-btn); text-transform: var(--tt);
  transform: translateY(-160%); transition: transform var(--t) var(--ease);
}
.skip:focus { transform: none; }

/* ---------- type ---------- */
.label {
  font: 600 var(--fs-label)/1.4 var(--font-display);
  letter-spacing: var(--ls-label); text-transform: var(--tt);
  color: var(--text-low);
}
.label--accent { color: var(--accent-ink); }
.h2 {
  font: 700 var(--fs-h2)/.98 var(--font-display);
  text-transform: var(--tt); color: var(--text-hi); letter-spacing: .01em;
  text-wrap: balance;
}
.credit {
  font: 600 var(--fs-label)/1.4 var(--font-display);
  letter-spacing: var(--ls-label); text-transform: var(--tt);
  color: var(--text-low);
}

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 48px; padding: 14px 26px;
  font: 700 var(--fs-btn)/1.25 var(--font-display);
  letter-spacing: var(--ls-btn); text-transform: var(--tt); text-align: center;
  border: 1px solid transparent; border-radius: 0;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn .i { inline-size: 16px; block-size: 16px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hot); }
.btn--primary:active { background: var(--accent-deep); }
.btn--secondary { border-color: var(--line-strong); color: var(--text-hi); }
.btn--secondary:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn--secondary:active { background: var(--accent-soft); }
.btn--veil { background: rgba(11, 14, 20, .72); }
.btn--sm { min-block-size: 40px; padding: 10px 18px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  block-size: var(--header-h);
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.is-solid { background: var(--bg-900); box-shadow: 0 1px 0 var(--line), 0 12px 28px -18px rgba(0, 0, 0, .8); }
.site-header__in {
  block-size: 100%; display: flex; align-items: center; gap: var(--space-4);
  padding-inline: var(--pad-x); max-inline-size: calc(var(--container) + 2 * var(--pad-x)); margin-inline: auto;
}
.wordmark {
  font: 700 17px/1 var(--font-display); letter-spacing: .22em; text-transform: var(--tt);
  color: var(--text-hi); white-space: nowrap;
}
.site-menu { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
.nav ul { display: flex; gap: 28px; }
.nav a, .lang a {
  position: relative; display: inline-block; padding-block: 8px;
  font: 500 var(--fs-btn)/1 var(--font-display); letter-spacing: var(--ls-btn); text-transform: var(--tt);
  color: var(--text-mid); transition: color var(--t) var(--ease);
}
.nav a::after, .lang a[aria-current]::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: var(--start);
  transition: transform var(--t) var(--ease);
}
.nav a:hover { color: var(--text-hi); }
.nav a:hover::after, .nav a.is-current::after, .lang a[aria-current]::after { transform: none; }
.nav a.is-current { color: var(--accent-ink); }
.lang { display: flex; gap: 14px; }
.lang a { color: var(--text-low); }
.lang a:hover { color: var(--text-hi); }
.lang a[aria-current] { color: var(--text-hi); }
.site-menu__cta { display: none; }
.cta-short { display: none; }
.menu-btn { display: none; inline-size: 44px; block-size: 44px; place-items: center; color: var(--text-hi); margin-inline-end: -10px; }
.menu-btn .i { inline-size: 24px; block-size: 24px; grid-area: 1 / 1; }
.menu-btn .i--close { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-block-size: max(560px, calc(100svh - var(--space-5))); display: grid; align-items: center;
}
/* The art runs under the transparent header. A short DS scrim darkens only the header band
   (nav ≥ 4.5:1 over the white of the art); edges dissolve in steep ramps, not a long haze. */
.hero__art { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 66%; z-index: -1; }
.hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 10% 44%; }
.hero__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11, 14, 20, .9) 0, rgba(11, 14, 20, .78) calc(var(--header-h) * .8), transparent calc(var(--header-h) * 1.15)),
    linear-gradient(to var(--end), var(--bg-900) 0%, rgba(11, 14, 20, .72) 12%, rgba(11, 14, 20, .18) 28%, transparent 40%),
    linear-gradient(to top, var(--bg-900) 0%, rgba(11, 14, 20, .86) 7%, rgba(11, 14, 20, .3) 15%, transparent 22%);
}
.hero__body { padding-block: calc(var(--header-h) + var(--space-4)) var(--space-7); }
.hero__copy { max-inline-size: min(600px, 48vw); }
.hero__title {
  margin-block: 20px 22px;
  font: 700 var(--fs-hero)/var(--lh-display) var(--font-display);
  letter-spacing: .01em; text-transform: var(--tt); color: var(--text-hi);
}
.hero__lede { max-inline-size: 46ch; font-size: 16px; color: var(--text-mid); }
.hero .actions { margin-block-start: var(--space-4); }
.hero__stamp { position: absolute; z-index: 1; inset-block-end: calc(var(--space-6) + 30px); inset-inline-end: var(--pad-x); }

/* ---------- shelf ---------- */
.shelf {
  position: relative; z-index: 2; margin-block-start: calc(-1 * var(--space-6));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter);
}
.tile {
  display: grid; grid-template-columns: 88px 1fr auto; align-items: center; column-gap: 20px;
  block-size: 88px; padding-inline-end: 22px; background: var(--bg-700); overflow: hidden;
  transition: background-color var(--t) var(--ease);
}
.tile__thumb { display: block; inline-size: 88px; block-size: 88px; overflow: hidden; }
.tile__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--t) var(--ease); }
.tile__text { display: grid; gap: 4px; min-inline-size: 0; }
.tile__name { font: 600 15px/1.15 var(--font-display); letter-spacing: .06em; text-transform: var(--tt); color: var(--text-hi); }
.tile__action { font: 500 var(--fs-btn)/1.2 var(--font-display); letter-spacing: var(--ls-btn); text-transform: var(--tt); color: var(--accent-ink); }
.tile__arrow { color: var(--text-low); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
[dir="rtl"] .tile__arrow:not([data-keep]), [dir="rtl"] .press__links .i:not([data-keep]), [dir="rtl"] .film__actions .btn .i { transform: scaleX(-1); }
.tile:hover { background: var(--bg-600); }
.tile:hover .tile__thumb img { transform: scale(1.06); }
.tile:hover .tile__arrow { color: var(--accent-ink); }

/* ---------- film: the trailer loop as a framed shot ---------- */
.film { position: relative; }
.film__frame { position: relative; aspect-ratio: 16 / 9; max-block-size: 78svh; inline-size: 100%; overflow: hidden; border-radius: var(--radius); background: #000; }
.film__play { position: absolute; inset: 0; display: block; cursor: pointer; }
.film__video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.film { --slot-w: 112px; --slot-h: 118px; }
.film__icon {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%;
  display: grid; place-items: center; inline-size: var(--slot-w); block-size: var(--slot-h);
  background: url("../img/vs-ui-slot-193.webp") center / 100% 100%;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); color: #1C232B;
  transition: color var(--t) var(--ease), filter var(--t) var(--ease);
}
[dir="rtl"] .film__icon { translate: 50% -50%; }
.film__icon .i { inline-size: 34px; block-size: 34px; }
.film__play:hover .film__icon, .film__play:focus-visible .film__icon { color: var(--accent); filter: brightness(1.08); }
.film__play:focus-visible { outline-offset: -4px; }
/* The slot is labelled in words: this is the trailer, and how long it runs */
.film__label {
  position: absolute; inset-block-start: calc(50% + var(--slot-h) / 2 + 12px); inset-inline-start: 50%; translate: -50% 0;
  padding: 6px 10px 5px; background: rgba(11, 14, 20, .72); white-space: nowrap;
  font: 600 var(--fs-btn)/1.2 var(--font-display); letter-spacing: var(--ls-btn); text-transform: var(--tt); color: var(--text-hi);
  transition: color var(--t) var(--ease);
}
[dir="rtl"] .film__label { translate: 50% 0; }
.film__play:hover .film__label { color: var(--accent-ink-hot); }
/* Pause / play the loop: a sibling of the trailer link, so pressing it never opens the trailer */
.film__loop {
  position: absolute; z-index: 1; inset-block-end: 14px; inset-inline-end: 14px;
  display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  background: rgba(11, 14, 20, .72); border: 1px solid var(--line); color: var(--text-low);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.film__loop:hover, .film__loop:focus-visible { border-color: var(--line-strong); color: var(--text-hi); }
.film__loop .i { inline-size: 16px; block-size: 16px; grid-area: 1 / 1; }
/* Paused shows a loop mark, never a second play triangle beside the trailer's */
.film__loop .i--loop, .film__loop[aria-pressed="true"] .i--pause { display: none; }
.film__loop[aria-pressed="true"] .i--loop { display: block; }
.film__actions { margin-block-start: var(--space-3); }

/* ---------- dossier ---------- */
.dossier { padding-block-start: var(--section-y); }
.dossier .film + .dossier__grid { margin-block-start: var(--space-5); }
.dossier__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-4); align-items: start; }
.dossier__body { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: var(--space-3); }
.strip__nav { display: flex; gap: 8px; }
.strip__btn {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  border: 1px solid var(--line-strong); color: var(--text-hi);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.strip__btn:hover:not(:disabled) { border-color: var(--accent-ink); color: var(--accent-ink); }
.strip__btn:disabled { opacity: .34; cursor: default; }
.strip__btn .i--prev { transform: scaleX(-1); }
[dir="rtl"] .strip__btn .i { transform: scaleX(-1); }
[dir="rtl"] .strip__btn .i--prev { transform: none; }
.stamp {
  display: inline-block; padding: 10px 14px 9px;
  border: 1px solid var(--line-strong);
  font: 600 12px/1.2 var(--font-display); letter-spacing: var(--ls-label); text-transform: var(--tt);
  color: var(--accent-ink);
  transform: rotate(calc(-3.5deg * var(--dir-x))); transform-origin: var(--start) center;
}
.stamp--plate { background: rgba(11, 14, 20, .82); border-color: var(--line-strong); }
.stamp__game { display: block; margin-block-end: 4px; font-size: 15px; letter-spacing: .1em; color: var(--text-hi); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 var(--fs-btn)/1.3 var(--font-display); letter-spacing: var(--ls-btn); text-transform: var(--tt);
  color: var(--accent-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}
.link-arrow .i { inline-size: 16px; block-size: 16px; }
.link-arrow:hover { color: var(--accent-ink-hot); text-decoration-color: currentColor; }
[dir="rtl"] .link-arrow .i { transform: scaleX(-1); }
.strip {
  margin-block-start: var(--space-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  --edge: max(var(--pad-x), (100% - var(--container)) / 2);
  scroll-padding-inline: var(--edge);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  padding-block-end: 18px;
}
.strip:focus-visible { outline-offset: -2px; }
.strip__track { display: flex; gap: 18px; inline-size: max-content; padding-inline: var(--edge); }
.strip__item { flex: none; inline-size: clamp(300px, 46vw, 760px); aspect-ratio: 16 / 9; scroll-snap-align: start; overflow: hidden; border-radius: var(--radius); background: var(--bg-800); }
.strip__item img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- interlude ---------- */
.interlude {
  margin-block-start: var(--section-y); min-block-size: 100svh;
  display: grid; place-content: center; justify-items: center; gap: var(--space-5);
  padding-block: var(--space-6); padding-inline: var(--pad-x); text-align: center;
}
.hands { position: relative; block-size: min(64svh, 660px); aspect-ratio: 394 / 725; }
.hands__base { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hands__pane { position: absolute; inset: 0; background: url("../img/vs-hands-394.webp") center / 100% 100% no-repeat; }
.interlude__line {
  font: 700 clamp(32px, 4.6vw, 68px)/.95 var(--font-display);
  text-transform: var(--tt); letter-spacing: .01em; color: var(--text-hi); text-wrap: balance;
}

/* ---------- scene: the introduction, replayed line by line ---------- */
/* Default (no JS, reduced motion, screen readers): the art, then the exchange as a transcript. */
.scene { margin-block-start: var(--section-y); }
.scene__head { display: grid; gap: var(--space-2); margin-block-end: var(--space-5); }
/* Exhibit A leads the game's title, as Exhibit B leads Harm Deco's */
.scene__stamp { justify-self: start; margin-block-end: var(--space-2); }
.scene__title {
  font: 700 var(--fs-scene)/.9 var(--font-display);
  text-transform: var(--tt); letter-spacing: .005em; color: var(--text-hi); text-wrap: balance;
}
.scene__stage { inline-size: min(100% - 2 * var(--pad-x), var(--container)); margin-inline: auto; }
.scene__frame { position: relative; }
.scene__art { aspect-ratio: 1919 / 575; overflow: hidden; border-radius: var(--radius); background: var(--bg-800); }
.scene__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.scene__lines { display: grid; margin-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
/* Fallback reads as a script: who in a column, the line beside it, the chorus once. */
.line { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline; padding-block: 14px; border-block-end: 1px solid var(--line); }
.line__who { font: 600 var(--fs-label)/1.4 var(--font-display); letter-spacing: var(--ls-label); text-transform: var(--tt); color: var(--text-low); }
.line__say { max-inline-size: 62ch; font: 400 17px/1.45 var(--font-ui); color: var(--text-hi); text-wrap: pretty; }
.line--panel { grid-template-columns: minmax(150px, 220px) auto minmax(0, 1fr); align-items: center; }
.line--panel .line__who { color: var(--accent-ink); }
.line__sign { display: block; inline-size: 56px; block-size: 61px; overflow: hidden; border-radius: var(--radius); }
.line__sign img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.line--solo { display: none; }
.scene__caption { max-inline-size: 60ch; font-size: 16px; color: var(--text-mid); }
.scene__premise { max-inline-size: 56ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--text-mid); text-wrap: pretty; }
.scene__facts { display: flex; flex-wrap: wrap; gap: 4px 1.5em; clip-path: inset(-6px 0); }
.scene__facts li { font: 600 13px/1.4 var(--font-display); letter-spacing: var(--ls-btn); text-transform: var(--tt); color: var(--text-hi); white-space: nowrap; }
.scene__facts li { position: relative; }
.scene__facts li::before { content: "·"; position: absolute; inset-inline-end: calc(100% + .68em); color: var(--text-low); }
/* Script: the other answers of the same panel, quoted quietly under "It's a secret." */
.line:has(+ .line--others) { border-block-end: 0; }
.line--others { grid-template-columns: minmax(150px, 220px) 56px minmax(0, 1fr); padding-block: 0 14px; }
.line__others { grid-column: 3; max-inline-size: 62ch; font-size: var(--fs-small); line-height: 1.55; color: var(--text-low); text-wrap: pretty; }
.line__others q { color: var(--text-mid); }
.line__signs { display: none; }

/* Live: the stage pins with its title, and the lines arrive in the game's own order as the page scrolls.
   Inactive lines are hidden by opacity only, so a screen reader still reads the whole exchange. */
.scene--live { block-size: 260vh;
  /* Height budget: title (~84px) + boxes above the art (140px) + answer panel below (170px) + slack, under the header. */
  --box-room: 124px;
  --frame-w: min(100vw - 2 * var(--pad-x), var(--container), (100svh - var(--header-h) - 400px) * 1919 / 575);
}
.scene--live .scene__stage {
  position: sticky; inset-block-start: 0; block-size: 100svh; inline-size: 100%;
  display: grid; align-content: center; justify-items: center;
  padding: var(--header-h) var(--pad-x) 0;
}
/* Desktop head: title, then the premise beside the facts and the caption, so the frame keeps its height */
.scene--live .scene__head { inline-size: var(--frame-w); margin-block-end: 0; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 6px var(--gutter); align-items: start; }
.scene--live .scene__title { grid-column: 1; grid-row: 1; margin-block-end: 8px; font-size: clamp(30px, 3vw, 44px); }
.scene--live .scene__stamp { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin-block-end: 8px; }
.scene--live .scene__premise { grid-row: 2 / 4; font-size: 15px; line-height: 1.5; max-inline-size: 62ch; }
.scene--live .scene__facts li { font-size: 12px; }
.scene--live .scene__caption { font-size: 15px; line-height: 1.5; max-inline-size: 62ch; }
.scene--live .scene__frame { inline-size: var(--frame-w); margin-block: var(--box-room) 160px; }

.scene--live .scene__lines { display: contents; }
.scene--live .line--solo { display: grid; }
/* Desktop: the three solo boxes carry the welcome visually (aria-hidden); the chorus is read once, never shown */
.line__board { display: contents; }
/* Lines are the game's own dialogue UI: a paper box in its slate frame (9-slice of vs-ui-box, cut from
   the trailer) and the answer panel with its three sign slots (vs-ui-panel). Ink is dark on paper. */
.scene--live .line:not(.line--panel) {
  position: absolute; z-index: 1; inline-size: clamp(250px, 25%, 320px); pointer-events: none;
  grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2px;
  padding: 4px 8px 6px; border-style: solid; border-color: transparent; border-width: 18px 25px 21px 18px;
  border-image: url("../img/vs-ui-box-452.webp") 44 60 52 44 fill / 18px 25px 21px 18px stretch;
  background: none;
}
.scene--live .line:not(.line--panel) .line__who { color: #3A4652; }
.scene--live .line:not(.line--panel) .line__say { font-size: 15px; line-height: 1.4; color: #1C232B; }
/* The box develops out of black like every picture on the page, then its words are typed (main.js). */
.scene--live .line {
  opacity: 0; filter: brightness(0);
  transition: opacity 200ms var(--ease), filter 520ms var(--ease-out);
}
.scene--live .line.is-on { opacity: 1; filter: brightness(1); }
/* Speakers stand where they stand in the art, so these follow the picture, not the text direction.
   Boxes dip 20px over the top of the art, as they hang over the room in the game. */
.scene--live .line--a { inset-block-end: calc(100% - 20px); left: 3%; } /* physical-ok */
.scene--live .line--b { inset-block-end: calc(100% - 20px); left: 35%; } /* physical-ok */
.scene--live .line--c { inset-block-end: calc(100% - 20px); left: 66%; } /* physical-ok */
/* Answer panel: the sign sits in slot 1 exactly where the game puts it; the phrase fills the text field. */
.scene--live .line--panel {
  position: absolute; z-index: 1; display: block; pointer-events: none;
  inset-block-start: calc(100% + 30px); inset-inline: 0; margin-inline: auto;
  inline-size: min(100%, 720px); aspect-ratio: 1478 / 232; padding: 0; border: 0; background: none;
}
.scene--live .line--panel .line__who { position: absolute; inset-block-end: calc(100% + 6px); left: 0; color: var(--accent-ink); } /* physical-ok */
.scene--live .line--panel .line__board { display: block; position: absolute; inset: 0; background: url("../img/vs-ui-panel-1280.webp") center / 100% 100% no-repeat; }
.scene--live .line--panel .line__sign {
  position: absolute; left: 2.03%; top: 18.1%; inline-size: 9.61%; block-size: 66.4%; border-radius: 0; /* physical-ok */
  filter: brightness(0); transition: filter 420ms var(--ease-out);
}
.scene--live .line--panel.is-on:not(.is-cycling) .line__sign { filter: brightness(1); }
/* Before "It's a secret.": real sign combinations from the trailer, cut to the panel's slot section
   (0–40.4% of the panel), swap over the slots while their phrases fill the text field (main.js). */
.scene--live .line--panel .line__signs { display: block; position: absolute; inset-block: 0; left: 0; inline-size: 40.4%; visibility: hidden; } /* physical-ok */
.scene--live .line--panel.is-cycling .line__signs { visibility: visible; }
.line__signs-frame { position: absolute; inset: 0; opacity: 0; }
.line__signs-frame.is-shown { opacity: 1; }
.line__signs-frame img { inline-size: 100%; block-size: 100%; }
.scene--live .line--panel .line__say {
  position: absolute; left: 40.4%; right: 8.5%; top: 21.6%; bottom: 14.7%; /* physical-ok */
  display: flex; align-items: center; padding-inline: 14px;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.35; color: #1C232B;
}
/* Typing (main.js): the real text stays in place for layout and screen readers, a ghost types over it. */
.line__say.is-typing { color: transparent !important; position: relative; }
.scene--live .line--panel .line__say.is-typing { position: absolute; }
.line__ghost { position: absolute; inset: 0; color: #1C232B; pointer-events: none; }
.line__rest { visibility: hidden; }
.scene--live .line--panel .line__ghost { inset: 0 14px; display: grid; align-content: center; }

/* ---------- harm deco ---------- */
.hd { margin-block-start: var(--section-y); }
.hd__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.hd__aside { grid-column: 1 / 5; align-self: stretch; }
.hd__sticky { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-4)); display: grid; gap: var(--space-3); justify-items: start; padding-block-end: var(--space-4); }
.hd__sticky .h2 { font-size: clamp(40px, 4.6vw, 64px); margin-block-start: var(--space-2); }
.hd__hook { max-inline-size: 34ch; font: 500 clamp(18px, 1.5vw, 20px)/1.5 var(--font-ui); color: var(--text-mid); text-wrap: pretty; }
.hd__line { max-inline-size: 40ch; color: var(--text-low); }
/* Seven days as a scale under one rule: labels, not tabs */
.days { display: grid; grid-template-columns: repeat(7, 1fr); inline-size: 100%; border-block-end: 1px solid var(--line-strong); margin-block: var(--space-2); cursor: default; }
.days li {
  position: relative; display: grid; align-items: end; justify-items: start; block-size: 38px;
  padding-block-end: 14px; padding-inline-start: 7px;
  font: 500 14px/1 var(--font-display); letter-spacing: .04em; color: var(--text-low);
}
/* a tick on the rule for every day */
.days li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 1px; block-size: 9px; background: var(--text-low); transform-origin: bottom; }
.days li:last-child { color: var(--text-hi); }
/* day VII: the execution mark, a filled diamond sitting on the rule */
.days li:last-child::after { content: ""; position: absolute; inset-inline-start: -4px; inset-block-end: -5px; inline-size: 9px; block-size: 9px; background: var(--accent); transform: rotate(45deg); }
.hd__wall { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.art { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-800); }
.art img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.art--procurator { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.art--inq { grid-column: 1 / 6; grid-row: span 2; }
.art--inq img { position: absolute; inset: 0; object-position: 52% 30%; }
.art--ui1 { grid-column: 6 / -1; aspect-ratio: 16 / 9; }
.art--ui2 { grid-column: 6 / -1; aspect-ratio: 16 / 9; }


/* ---------- studio ---------- */
.studio {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block-start: var(--section-y);
  min-block-size: 100svh; display: grid; align-items: end;
}
/* The crop's top edge cuts through sleeve and glove, so the section opens on the hands, not on
   blank paper. The art ends above the statement in a short dissolve; the title stands on --bg-900. */
.studio__art { position: absolute; inset-block: 0 auto; inset-inline: 0; block-size: max(360px, calc(100% - 300px)); z-index: -1; }
.studio__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; }
.studio__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--bg-900) 0%, rgba(11, 14, 20, .9) 8%, rgba(11, 14, 20, .45) 16%, transparent 24%);
}
.studio__body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); padding-block: var(--space-6) calc(var(--space-6) + 24px); }
.studio__copy { grid-column: 1 / 8; }
.studio__title {
  margin-block: 16px 20px;
  font: 700 clamp(48px, 7.6vw, 96px)/.9 var(--font-display);
  text-transform: var(--tt); letter-spacing: .005em; color: var(--text-hi);
}
.studio__line { max-inline-size: 44ch; font-size: 17px; line-height: 1.6; color: var(--text-mid); }
.studio__credit { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--pad-x); }

/* ---------- press & partners ---------- */
.press { background: var(--bg-800); padding-block: var(--section-y); padding-inline: var(--pad-x); }
.press > .container { inline-size: min(100%, var(--container)); }
.press__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-5); }
.press__title { grid-column: 1 / -1; }
.factsheet { display: grid; margin: 0; }
.factsheet dt { font: 600 var(--fs-label)/1.4 var(--font-display); letter-spacing: var(--ls-label); text-transform: var(--tt); color: var(--text-low); }
.factsheet dd { margin: 6px 0 0; font: 500 17px/1.35 var(--font-ui); color: var(--text-hi); text-wrap: balance; }
.boiler { border-block-end: 1px solid var(--line); }
.boiler summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px;
  cursor: pointer; list-style: none;
  font: 500 18px/1.2 var(--font-display); letter-spacing: .04em; text-transform: var(--tt); color: var(--text-mid);
  transition: color var(--t) var(--ease);
}
.boiler summary::-webkit-details-marker { display: none; }
.boiler summary::after { content: "+"; font: 400 24px/1 var(--font-ui); color: var(--text-low); }
.boiler[open] summary::after { content: "\2212"; }
.boiler summary:hover { color: var(--accent-ink); }
.boiler__text { max-inline-size: 62ch; margin-block-end: var(--space-3); color: var(--text-mid); }
.boiler__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-block-start: var(--space-2); }
.press__meta { margin-inline-start: 8px; font: 500 12px/1.2 var(--font-ui); letter-spacing: .02em; text-transform: none; color: var(--text-low); white-space: nowrap; }
.factsheet--list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block-start: var(--space-2); border-block-start: 1px solid var(--line); }
.factsheet--list div { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); column-gap: var(--space-3); align-items: baseline; padding-block: 12px; padding-inline-start: 0; border-inline-start: 0; border-block-end: 1px solid var(--line); }
.factsheet--list dd { margin: 0; font-size: 16px; }
.press__h3 { font: 600 var(--fs-h3)/1.1 var(--font-display); letter-spacing: .03em; text-transform: var(--tt); color: var(--text-hi); }
.press__col { grid-column: 1 / -1; display: grid; gap: var(--space-3); align-content: start; }
/* For press is one full-width row: links | facts | description; For publishers is the row under it */
.press__col:not(.press__col--biz) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--gutter); }
.press__col:not(.press__col--biz) > .press__h3 { grid-column: 1 / -1; }
.press__col:not(.press__col--biz) > .press__links { grid-column: 1; grid-row: 2 / 5; }
.press__col:not(.press__col--biz) > .factsheet { grid-column: 2; grid-row: 2 / 5; align-self: start; margin-block-start: 0; }
.press__col:not(.press__col--biz) > .boiler { grid-column: 3; grid-row: 2; border-block-start: 1px solid var(--line); }
.press__col:not(.press__col--biz) > .boiler__copy { grid-column: 3; grid-row: 3; }
.press__col--biz { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: var(--space-5); }
.press__col--biz > .press__h3, .press__col--biz > .press__demo, .press__col--biz > .copy-status { grid-column: 1 / -1; }
.press__demo { max-inline-size: 52ch; color: var(--text-mid); text-wrap: pretty; }
.press__links li { border-block-end: 1px solid var(--line); }
.press__links li:first-child { border-block-start: 1px solid var(--line); }
.press__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 18px;
  font: 500 18px/1.2 var(--font-display); letter-spacing: .04em; text-transform: var(--tt);
  color: var(--text-mid); transition: color var(--t) var(--ease);
}
.press__addr { text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; }
.press__links a .i { color: var(--text-low); transition: color var(--t) var(--ease); }
.press__links a:hover, .press__links a:hover .i { color: var(--accent-ink); }
.press__email {
  font: 500 clamp(20px, 1.9vw, 26px)/1.2 var(--font-ui); letter-spacing: -.01em;
  color: var(--text-hi); overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}
.press__email:hover { color: var(--accent-ink); text-decoration-color: var(--accent-ink); }
[data-copy] .i--done { display: none; }
[data-copy].is-done .i--copy { display: none; }
[data-copy].is-done .i--done { display: block; }
[data-copy].is-done { border-color: var(--accent-ink); color: var(--accent-ink); }
.copy-status { font-size: var(--fs-small); color: var(--text-low); }
.copy-status:empty { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- footer ---------- */
.footer { padding-block: var(--space-6) var(--space-4); }
.footer__in { container-type: inline-size; }
.footer__mark {
  font: 700 21.2cqi/.8 var(--font-display); letter-spacing: -.005em; text-transform: uppercase;
  white-space: nowrap; color: var(--text-hi); padding-block: .04em;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .footer__mark {
    background: url("../img/vs-wordmark-fill-1280.jpg") center / cover;
    background-image: image-set(url("../img/vs-wordmark-fill-1280.webp") type("image/webp"), url("../img/vs-wordmark-fill-1280.jpg") type("image/jpeg"));
    background-size: cover; background-position: center;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-5); }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.footer__links a {
  font: 500 var(--fs-btn)/1.4 var(--font-display); letter-spacing: var(--ls-btn); text-transform: var(--tt);
  color: var(--text-low); transition: color var(--t) var(--ease);
}
.footer__links li:last-child a { text-transform: none; letter-spacing: .02em; font-family: var(--font-ui); }
.footer__links a:hover { color: var(--text-hi); }
.footer__meta { margin-block-start: var(--space-4); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); font-size: 12px; color: var(--text-low); }

/* ---------- trailer modal ---------- */
.modal {
  /* Width is a height budget too: the frame, the close button above it and the link below fit any laptop */
  inline-size: min(100% - 2 * var(--pad-x), 1180px, (100svh - 140px) * 16 / 9); max-inline-size: none; max-block-size: none;
  padding: 54px 0 0; border: 0; background: transparent; color: var(--text-hi); overflow: visible;
}
.modal::backdrop { background: rgba(5, 6, 9, .95); }
.modal__box { position: relative; }
.modal__frame { aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); }
.modal__frame iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.modal__close {
  position: absolute; inset-block-end: calc(100% + 10px); inset-inline-end: 0;
  inline-size: 44px; block-size: 44px; display: grid; place-items: center; color: var(--text-hi);
  border: 1px solid var(--line-strong); transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.modal__close:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.modal__close .i { inline-size: 22px; block-size: 22px; }
.modal__yt { margin-block-start: 14px; }
@media (max-height: 520px) {
  .modal { inline-size: min(100% - 2 * var(--pad-x), (100svh - 90px) * 16 / 9); padding: 0; }
  .modal__close { inset-block: 8px auto; inset-inline-end: 8px; z-index: 1; background: rgba(11, 14, 20, .8); }
}

/* ---------- motion: develop from darkness, rise once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="rise"] { opacity: 0; transform: translateY(24px); transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
  .js [data-reveal="rise"].is-in { opacity: 1; transform: none; }
  .js [data-reveal="develop"] img { filter: brightness(0); transition: filter 900ms var(--ease-out), transform 600ms var(--ease-out); }
  .js [data-reveal="develop"].is-in img { filter: brightness(1); }
  .js [data-hands] .hands__base { filter: brightness(0); transition: filter 1200ms var(--ease-out); }
  .js [data-hands].is-in .hands__base { filter: brightness(.34); }
  .js [data-hands] .hands__pane { filter: brightness(0); transition: filter 700ms var(--ease-out) calc(200ms + var(--i) * 140ms); }
  .js [data-hands].is-in .hands__pane { filter: brightness(1); }
  .art:hover img { transform: scale(1.02); }
  .js [data-days] li::before { transition: transform 420ms var(--ease-out) calc(200ms + var(--d) * 160ms); }
  .js [data-days]:not(.is-in) li::before { transform: scaleY(0); }
  .js [data-days] li:last-child::after { transition: transform 420ms var(--ease-out) 1300ms; }
  .js [data-days]:not(.is-in) li:last-child::after { transform: rotate(45deg) scale(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav ul { gap: 20px; }
  .site-header__in { gap: var(--space-3); }
}
@media (max-width: 899px) {
  :root { --header-h: 64px; }
  .site-header__cta { margin-inline-start: auto; }
  .js .menu-btn { display: inline-grid; }
  .js .site-menu {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: flex-start; justify-content: safe center; gap: var(--space-5);
    overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--header-h) + var(--space-4)) var(--pad-x) var(--space-5);
    background: var(--bg-900);
    visibility: hidden; opacity: 0; transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
  }
  .js .site-header.is-open .site-menu { visibility: visible; opacity: 1; transition: opacity var(--t) var(--ease); }
  .js .site-header.is-open { background: var(--bg-900); }
  .js .site-header.is-open .site-header__cta { visibility: hidden; }
  .js .site-header.is-open .menu-btn .i--open { display: none; }
  .js .site-header.is-open .menu-btn .i--close { display: block; }
  .js .nav ul { flex-direction: column; gap: 6px; }
  .js .nav a { font-size: 34px; font-weight: 600; letter-spacing: .02em; padding-block: 6px; }
  .js .lang a { font-size: 15px; }
  .js .site-menu__cta { display: inline-flex; }
  html:not(.js) .site-header { position: absolute; block-size: auto; background: var(--bg-900); }
  html:not(.js) .site-header__in { flex-wrap: wrap; padding-block: 14px; row-gap: 10px; }
  html:not(.js) .site-menu { order: 3; inline-size: 100%; flex-wrap: wrap; gap: 8px 24px; margin-inline-start: 0; }
  html:not(.js) .nav ul { flex-wrap: wrap; gap: 4px 18px; }

  /* Hero: the eye fills the top under the transparent header; text starts below it on solid ground */
  .hero { --art-h: calc(var(--header-h) + 52svh); align-items: start; }
  .hero__art { inset-block: 0 auto; inset-inline: 0; inline-size: 100%; block-size: var(--art-h); }
  .hero__img { object-position: 17% 42%; }
  .hero__art::after {
    background:
      linear-gradient(to bottom, rgba(11, 14, 20, .9) 0, rgba(11, 14, 20, .78) calc(var(--header-h) * .8), transparent calc(var(--header-h) * 1.15)),
      linear-gradient(to top, var(--bg-900) 0%, rgba(11, 14, 20, .88) 7%, rgba(11, 14, 20, .3) 15%, transparent 21%);
  }
  .hero__body { padding-block: calc(var(--art-h) + var(--space-2)) var(--space-6); }
  .hero__copy { max-inline-size: none; }
  .hero__stamp { inset-block: calc(var(--art-h) - 78px) auto; inset-inline-end: var(--pad-x); }
  .hero__lede { font-size: 15px; }

  .shelf { grid-template-columns: 1fr; gap: 8px; margin-block-start: calc(-1 * var(--space-4)); }


  .film__frame { max-block-size: none; }
  .film { --slot-w: 76px; --slot-h: 80px; }
  .film__label { font-size: 12px; }
  .film__loop { inset-block-end: 8px; inset-inline-end: 8px; }
  .film__actions { margin-block-start: 14px; }
  .strip__nav { display: none; }
  .film__actions .btn { flex: 1 1 auto; }
  .dossier__grid { grid-template-columns: minmax(0, 1fr); }
  .strip { margin-block-start: var(--space-3); }
  .strip__item { inline-size: 86vw; }

  .hands { block-size: min(62svh, 560px); }
  .scene__art { aspect-ratio: 2.35 / 1; }
  .scene__img { object-position: 0 50%; }
  .line, .line--panel { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .line--panel { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .line--panel .line__who { grid-column: 1 / -1; }
  .line--others { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .line__others { grid-column: 2; }
  .scene--live { block-size: 240vh; }
  /* Phones: the head scrolls in with the page and only the room with its lines pins under the header,
     so the stage fits any phone the live query admits (head + room + lines did not fit under ~830px). */
  .scene--live .scene__stage { position: static; display: block; align-content: normal; block-size: 100%; padding: 0; }
  .scene--live .scene__frame { position: sticky; inset-block-start: var(--header-h); }
  .scene--live .scene__head { inline-size: 100%; padding-inline: var(--pad-x); grid-template-columns: minmax(0, 1fr); }
  .scene--live .scene__title { grid-row: auto; font-size: 32px; }
  .scene--live .scene__stamp { grid-column: 1; grid-row: auto; justify-self: start; }
  .scene--live .scene__premise { grid-row: auto; font-size: 14px; line-height: 1.45; }
  .scene--live .scene__caption { font-size: 14px; line-height: 1.45; }
  .scene--live .scene__frame { inline-size: 100vw; margin-block: 14px 0; padding-block-start: 14px; background: var(--bg-900); }
  /* Phones: all three guests in frame (the window is cropped away); the lines stack under it in flow. */
  .scene--live .scene__art { aspect-ratio: 2.35 / 1; max-block-size: 34svh; border-radius: 0; }
  .scene--live .scene__lines { display: grid; align-content: start; gap: 8px; min-block-size: 210px; margin-block-start: 14px; padding-inline: var(--pad-x); border: 0; }
  .scene--live .line:not(.line--panel), .scene--live .line--solo { position: static; inline-size: auto; left: auto; /* physical-ok */ }
  /* Inactive lines leave the layout but stay in the accessibility tree */
  .scene--live .line:not(.is-on) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
  .scene--live .line--solo, .scene--live .line--solo.is-on { display: none; }
  .scene--live .scene__lines .line.line--chorus { display: grid; }
  .scene--live .scene__lines .line.line--chorus.is-on { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; white-space: normal; padding: 4px 8px 6px; border-style: solid; border-color: transparent; border-width: 18px 25px 21px 18px; border-image: url("../img/vs-ui-box-452.webp") 44 60 52 44 fill / 18px 25px 21px 18px stretch; }
  .scene--live .line--panel.is-on { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; inline-size: auto; aspect-ratio: auto; margin-inline: 0; }
  .scene--live .line--panel .line__who { grid-column: 1 / -1; }
  .scene--live .line--panel .line__who { position: static; margin-block-end: 6px; }
  .scene--live .line--panel .line__board { position: relative; inset: auto; inline-size: calc(min(100%, 350px) * 597 / 881); aspect-ratio: 597 / 232; background-size: 247.6% 100%; background-position: 0 0; }
  .scene--live .line--panel .line__sign { left: 5.03%; inline-size: 23.79%; } /* physical-ok */
  .scene--live .line--panel .line__signs { inline-size: 100%; }
  .scene--live .line--panel .line__say {
    position: static; display: flex; align-items: center; inline-size: min(100%, 350px); aspect-ratio: 881 / 232;
    padding: 5.7% calc(14.3% + 6px) 3.9% 12px; /* physical-ok: the raster is not mirrored */
    background: url("../img/vs-ui-panel-640.webp") 100% 0 / 167.8% 100% no-repeat;
    font-size: 14px; line-height: 1.3;
  }
  .scene--live .line--panel .line__say.is-typing { position: relative; }
  .scene--live .line--panel .line__say { left: auto; right: auto; top: auto; bottom: auto; } /* physical-ok */
  .scene--live .line--panel .line__ghost { inset: 0; padding: inherit; display: flex; align-items: center; }

  .hd__aside, .hd__wall { grid-column: 1 / -1; }
  .hd__sticky { position: static; padding-block-end: var(--space-5); }
  .hd__wall { grid-template-columns: 1fr; gap: 14px; }
  .art--procurator, .art--inq, .art--ui1, .art--ui2 { grid-column: 1 / -1; grid-row: auto; }
  .art--inq { aspect-ratio: 4 / 5; }

  .studio { min-block-size: 0; }
  .studio__art { block-size: min(118vw, 64svh); }
  .studio__img { object-position: 55% 0; }
  .studio__body { padding-block-start: calc(min(118vw, 64svh) - 26px); }
  .studio__copy { grid-column: 1 / -1; }
  .studio__line { font-size: 16px; }

  .press__col--biz { grid-template-columns: minmax(0, 1fr); }
  .press__col:not(.press__col--biz) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .press__col:not(.press__col--biz) > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .studio__credit { inset-block-start: var(--space-3); }
  .press__links a { font-size: 17px; }

  .footer__row { flex-direction: column; align-items: flex-start; }
  .footer__meta { gap: 6px; }
}
@media (max-width: 899px) and (max-height: 520px) {
  .js .site-menu { justify-content: flex-start; gap: var(--space-3); padding-block: calc(var(--header-h) + var(--space-2)) var(--space-3); }
  .js .nav ul { gap: 0; }
  .js .nav a { font-size: 22px; padding-block: 3px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .hero { --art-h: calc(var(--header-h) + 38svh); }
}
@media (max-width: 479px) {
  .site-header__cta { padding-inline: 14px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .js .menu-btn { margin-inline-start: 4px; }
  .site-header__in { gap: 12px; }
  .wordmark { letter-spacing: .16em; }
  .wordmark { font-size: 16px; }
  .hero__title { font-size: clamp(40px, 12.4vw, 60px); }
  .hero .actions .btn { inline-size: 100%; }
  .hero__stamp { inset-block: calc(var(--art-h) - 52px) auto; inset-inline-end: 10px; padding: 6px 9px 5px; font-size: 10px; }
  .hero__stamp .stamp__game { font-size: 12px; margin-block-end: 2px; }
  .dossier .actions .btn, .press .actions .btn { flex: 1 1 auto; }
}