/* ==================================================================
   ЗГРАЯ — стилі
   Концепція: табличка «Обережно, злий пес», але для театру.
   Сигнальний жовтий + чорнильний дріт логотипу + білий папір.
   Тема одна (свідомо): кольори задані явно, без dark/light режимів.
   ================================================================== */

/* Layout: повноширинні «смуги» (жовта / папір / чорна), контент у .wrap */
:root {
  /* Колір */
  --signal: #ffd400;      /* сигнальний жовтий — головне поле */
  --signal-hot: #ffe74d;  /* світліший жовтий для ховерів */
  --ink: #141210;         /* чорнило логотипу (теплий чорний) */
  --ink-2: #26231f;       /* підняті поверхні на чорному */
  --paper: #f4f3ee;       /* папір (холодний білий) */
  --ash: #8d887e;         /* приглушений текст */
  --blood: #e3120b;       /* тільки для «все продано» та тривог */

  /* Шрифти */
  --f-display: "Unbounded", "Arial Black", "Helvetica Neue", sans-serif;
  --f-body: "Onest", "Segoe UI", system-ui, sans-serif;
  --f-hand: "Marck Script", "Segoe Script", "Brush Script MT", cursive;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Шкала */
  --t-xs: .75rem;
  --t-sm: .9rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  --t-xl: clamp(2rem, 1.2rem + 3.5vw, 3.6rem);
  --t-2xl: clamp(3rem, 1rem + 9vw, 9rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --stroke: 3px;         /* товщина «дроту», як у логотипі */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.7, 0, .2, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } /* clip, а не hidden — sticky-секції працюють */
body {
  margin: 0;
  background: var(--signal);
  color: var(--ink);
  font: 400 var(--t-md)/1.55 var(--f-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--signal); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.afisha :focus-visible, .foot :focus-visible { outline-color: var(--signal); }

[hidden] { display: none !important; }
section[tabindex="-1"]:focus { outline: none; } /* фокус після переходу з меню — без рамки навколо секції */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--ink); color: var(--signal); padding: .6em 1em; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.hand { font-family: var(--f-hand); font-weight: 400; letter-spacing: 0; }
.eyebrow { font: 700 var(--t-xs)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; }
.display {
  font: 900 var(--t-2xl)/1.12 var(--f-display); /* крапки «Ї»/«Й» в Unbounded високі — менший інтервал = налізають на рядок вище */
  text-transform: uppercase; letter-spacing: -.035em; margin: 0;
  text-wrap: balance;
}
.display--sm { font-size: var(--t-xl); line-height: .95; }

/* ---------- Кнопки ---------- */
.btn {
  --bg: transparent; --fg: var(--ink); --bd: var(--ink);
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1em 1.5em; border: var(--stroke) solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 800 var(--t-sm)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, transform .35s var(--ease-out);
  will-change: transform;
}
.btn i { font-style: normal; transition: transform .35s var(--ease-out); }
.btn:hover i { transform: translate(3px, 3px) rotate(-10deg); }
.btn--ink { --bg: var(--ink); --fg: var(--signal); }
.btn--ink:hover { --bg: var(--paper); --fg: var(--ink); }
.btn--line:hover { --bg: var(--ink); --fg: var(--signal); }
.btn--signal { --bg: var(--signal); --fg: var(--ink); --bd: var(--signal); }
.btn--signal:hover { --bg: var(--paper); --bd: var(--paper); }

/* ---------- Демо-наліпка ---------- */
.demo-tag {
  display: inline-block; align-self: flex-start;
  font: 700 .65rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em;
  padding: .45em .7em; border: 2px dashed currentColor; border-radius: 4px;
  transform: rotate(-3deg); opacity: .75;
}
.demo-tag[hidden] { display: none !important; }
section[tabindex="-1"]:focus { outline: none; } /* фокус після переходу з меню — без рамки навколо секції */

/* ==================================================================
   ПРЕЛОАДЕР — кіт «малюється» конічною маскою, потім завіса летить вгору
   ================================================================== */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; gap: 1rem;
  background: var(--signal);
  animation: lift .8s var(--ease-snap) 1.5s forwards;
}
.preloader__cat {
  width: min(52vw, 300px);
  --sweep: 0deg;
  -webkit-mask: conic-gradient(from 200deg, #000 var(--sweep), transparent 0);
          mask: conic-gradient(from 200deg, #000 var(--sweep), transparent 0);
  animation: draw 1.25s var(--ease-out) .1s forwards;
}
.preloader__count {
  position: absolute; left: var(--gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--gutter));
  display: flex; align-items: baseline; gap: .8rem;
  font: 900 clamp(3rem, 12vw, 7rem)/.8 var(--f-display);
  font-variant-numeric: tabular-nums;
}
.preloader__count small { font: 700 var(--t-xs)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; }
@keyframes draw { to { --sweep: 360deg; } }
@keyframes lift {
  0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

/* ==================================================================
   КУРСОР (тільки миша)
   ================================================================== */
.cursor { display: none; }
@media (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
  .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .3s; }
  .cursor.ready { opacity: 1; }
  .cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
  .cursor__dot { width: 8px; height: 8px; margin: -4px; background: var(--ink); }
  .cursor__ring {
    width: 44px; height: 44px; margin: -22px;
    border: 2px solid var(--ink);
    display: grid; place-items: center;
    transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, border-color .3s;
  }
  .cursor__ring b { font: 700 .62rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; opacity: 0; color: var(--signal); transition: opacity .2s; }
  .cursor.is-link .cursor__ring { width: 76px; height: 76px; margin: -38px; background: var(--ink); }
  .cursor.is-link .cursor__ring b { opacity: 1; }
  .cursor.on-dark .cursor__dot { background: var(--signal); }
  .cursor.on-dark .cursor__ring { border-color: var(--signal); }
  .cursor.on-dark.is-link .cursor__ring { background: var(--signal); }
  .cursor.on-dark.is-link .cursor__ring b { color: var(--ink); }
}

/* ==================================================================
   ШАПКА
   ================================================================== */
.bar {
  position: fixed; z-index: 100; left: 0; right: 0;
  top: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gutter) 0;
  display: flex; align-items: center; gap: 1rem;
  pointer-events: none; /* шапка нерухома: не ховається й не смикається при скролі */
}
.bar > * { pointer-events: auto; }
.bar__brand {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .35rem 1rem .35rem .45rem; border-radius: 999px;
  background: var(--paper); text-decoration: none;
  font: 900 var(--t-sm)/1 var(--f-display); text-transform: uppercase;
  box-shadow: 0 0 0 var(--stroke) var(--ink);
}
.bar__brand { transition: background .3s, color .3s; }
/* головний екран (жовтий): «Зграя» світиться жовтим на чорному — як активний пункт меню */
.bar__brand.is-active { background: var(--ink); color: var(--signal); }
.bar__brand.is-active img { content: url("../img/cat-signal.png"); }
.bar__brand img { width: 34px; height: auto; transition: transform .5s var(--ease-out); }
.bar__brand:hover img { transform: rotate(-14deg) scale(1.1); }
.bar__nav {
  margin-left: auto; display: flex; gap: .2rem; padding: .3rem;
  background: var(--ink); border-radius: 999px;
}
.bar__nav a {
  color: var(--paper); text-decoration: none; padding: .55rem 1rem; border-radius: 999px;
  font: 700 var(--t-xs)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em;
  transition: background .2s, color .2s;
}
.bar__nav a:hover, .bar__nav a.is-active { background: var(--signal); color: var(--ink); }
.bar__cta {
  background: var(--blood); color: var(--paper); text-decoration: none;
  padding: .8rem 1.2rem; border-radius: 999px;
  font: 800 var(--t-xs)/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 0 0 var(--stroke) var(--ink);
  transition: transform .3s var(--ease-out);
}
.bar__cta:hover { transform: rotate(-4deg) scale(1.06); }
.bar__burger {
  display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: var(--ink); cursor: pointer; position: relative;
}
.bar__burger span:not(.sr) {
  position: absolute; left: 14px; right: 14px; height: 3px; background: var(--signal); border-radius: 2px;
  transition: transform .35s var(--ease-out);
}
.bar__burger span:nth-child(1) { top: 19px; }
.bar__burger span:nth-child(2) { top: 27px; }
.bar__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.bar__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--signal);
  padding: calc(env(safe-area-inset-top, 0px) + 90px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu nav { display: grid; gap: .3rem; }
.menu a { font: 900 clamp(2.6rem, 13vw, 4.5rem)/1 var(--f-display); text-transform: uppercase; text-decoration: none; letter-spacing: -.03em; }
.menu__hand { font-family: var(--f-hand); font-size: 1.8rem; margin: 0; color: var(--paper); }

@media (max-width: 860px) {
  .bar__nav, .bar__cta { display: none; }
  .bar__burger { display: block; }
}

/* ==================================================================
   HERO
   ================================================================== */
.hero {
  position: relative;
  padding: calc(env(safe-area-inset-top, 0px) + 96px) var(--gutter) 0;
  max-width: 100%;
  overflow: hidden;
}
.hero__title {
  margin: 0; max-width: var(--max); margin-inline: auto;
  font: 900 clamp(3.6rem, 17.5vw, 16rem)/.8 var(--f-display);
  text-transform: uppercase; letter-spacing: -.06em;
  white-space: nowrap;
}
.hero__word { display: flex; justify-content: space-between; }
.hero__word .ch {
  display: inline-block;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
.hero__word.is-intro .ch { animation: drop .9s var(--ease-out) both; animation-delay: calc(1.6s + var(--i) * 70ms); }
@keyframes drop {
  0% { transform: translateY(-60%) rotate(calc(var(--i) * 7deg - 14deg)); }
  60% { transform: translateY(4%) rotate(0); }
  100% { transform: none; }
}

.hero__grid {
  max-width: var(--max); margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.hero__tag { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); line-height: 1; margin: 0; transform: rotate(-4deg); transform-origin: left; }
.hero__lead { font-size: var(--t-lg); line-height: 1.3; font-weight: 500; margin: 0; max-width: 28ch; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__logo { position: relative; justify-self: center; width: min(100%, 460px); perspective: 900px; }
.hero__logo img {
  width: 100%; height: auto;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease-out);
}
.badge {
  position: absolute; width: clamp(110px, 30%, 150px); right: -4%; top: -6%;
  animation: spin 14s linear infinite;
}
.badge__bg { fill: var(--blood); }
.badge text { fill: var(--paper); font: 800 13px var(--f-display); }
@keyframes spin { to { transform: rotate(360deg); } }

.hazard {
  margin: clamp(2rem, 5vw, 4rem) calc(var(--gutter) * -1) 0;
  height: 28px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 22px, var(--signal) 22px 44px);
  background-size: 62.2px 100%;
  animation: hazard 1.4s linear infinite;
}
@keyframes hazard { to { background-position: 62.2px 0; } }

@media (max-width: 760px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__logo { width: min(80%, 360px); order: -1; }
}

/* ==================================================================
   МАРКІЗИ
   ================================================================== */
.tape { background: var(--ink); padding-block: clamp(1.2rem, 3vw, 2.4rem); overflow: hidden; }
.tape__row {
  background: var(--signal); color: var(--ink);
  transform: rotate(-2deg) scale(1.05);
  border-block: var(--stroke) solid var(--ink);
  overflow: hidden;
}
.tape__row--alt { background: var(--paper); transform: rotate(1.5deg) scale(1.05); margin-top: -.4rem; }
.tape__track {
  display: flex; width: max-content; white-space: nowrap;
  font: 900 clamp(1.6rem, 4.5vw, 3.6rem)/1.15 var(--f-display); text-transform: uppercase; letter-spacing: -.02em;
  will-change: transform;
}
.tape__track span { padding-inline: .5em; display: inline-flex; align-items: center; gap: .5em; }
.tape__track em { font-style: normal; font-family: var(--f-hand); text-transform: none; font-weight: 400; letter-spacing: 0; font-size: 1.15em; }
.tape__track .star { color: var(--blood); }

/* ==================================================================
   ПРО НАС
   ================================================================== */
.about { background: var(--paper); padding-block: clamp(4rem, 10vw, 8rem) 0; position: relative; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.sec-head--big { align-items: flex-end; }
.sec-head__note { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); margin: 0 0 .3em; transform: rotate(-3deg); }

.manifesto {
  margin: 0; max-width: 22em;
  font: 800 var(--t-xl)/1.08 var(--f-display); letter-spacing: -.03em;
  text-wrap: pretty;
}
.manifesto .w { color: var(--ash); transition: color .25s; }
.manifesto .w.on { color: var(--ink); }
.manifesto .w.hot { background: var(--signal); color: var(--ink); box-shadow: 0 0 0 .08em var(--signal); }

.stats {
  list-style: none; padding: 0; margin: clamp(3rem, 7vw, 5rem) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--stroke) solid var(--ink);
}
.stats li { padding: 1.4rem 1rem 0 0; display: grid; gap: .4rem; }
.stats li + li { padding-left: 1.2rem; border-left: var(--stroke) solid var(--ink); }
.stats b { font: 900 var(--t-xl)/1 var(--f-display); font-variant-numeric: tabular-nums; position: relative; isolation: isolate; justify-self: start; }
/* лічильник добіг — число «кусає», під ним прорізається жовта плашка */
.stats b::after {
  content: ""; position: absolute; z-index: -1; left: -.08em; right: -.08em; bottom: .04em; height: .38em;
  background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-snap);
}
.stats b.is-done { animation: bite .5s var(--ease-out); }
.stats b.is-done::after { transform: scaleX(1); }
@keyframes bite {
  0% { transform: none; }
  30% { transform: scale(1.18) rotate(-4deg); }
  60% { transform: scale(.96) rotate(1deg); }
  100% { transform: none; }
}
.stats span { font: 700 var(--t-xs)/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; }
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .stats li + li { padding-left: 0; border-left: 0; border-top: 2px solid var(--ink); padding-top: 1rem; }
  .stats li { padding-bottom: 1rem; }
}

/* Подряпини кігтів */
.claws { display: block; width: 100%; height: clamp(90px, 16vw, 200px); margin-top: clamp(2rem, 6vw, 4rem); }
.claws path { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.claws path:nth-child(2) { stroke-width: 14; }
.js .claws:not(.in) path { stroke-dashoffset: 1; }
.claws.in path { transition: stroke-dashoffset .7s var(--ease-snap); }
.claws.in path:nth-child(2) { transition-delay: .08s; }
.claws.in path:nth-child(3) { transition-delay: .16s; }

/* ==================================================================
   АФІША
   ================================================================== */
.afisha { background: var(--ink); color: var(--paper); padding-block: clamp(4rem, 10vw, 8rem); position: relative; }
.afisha .display { color: var(--signal); }
.afisha .sec-head__note { color: var(--paper); }

.shows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink-2); }
.show {
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.2rem, 3vw, 2rem) clamp(.5rem, 1.5vw, 1rem);
  border-bottom: 2px solid var(--ink-2);
  isolation: isolate;
  transition: color .3s;
}
.show::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal);
  transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-snap);
}
.show:hover, .show:focus-within { color: var(--ink); }
.show:hover::before, .show:focus-within::before { transform: scaleY(1); }
.show__date { display: grid; gap: .2rem; font-variant-numeric: tabular-nums; }
.show__day { font: 900 clamp(2.6rem, 6vw, 4rem)/.85 var(--f-display); letter-spacing: -.04em; }
.show__month { font: 700 var(--t-xs)/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; }
.show__body { min-width: 0; display: grid; gap: .55rem; }
.show__title {
  margin: 0; font: 800 var(--t-xl)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.03em;
  transition: transform .45s var(--ease-out);
  overflow-wrap: anywhere;
}
.show:hover .show__title { transform: translateX(.4rem) skewX(-6deg); }
.show__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font: 500 var(--t-xs)/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ash); }
.show:hover .show__meta, .show:focus-within .show__meta { color: var(--ink); }
.show__side { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.chip {
  font: 700 .68rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em;
  padding: .5em .8em; border-radius: 999px; border: 2px solid currentColor; white-space: nowrap;
}
.chip--premiere { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.chip--few { color: var(--signal); }
.chip--soldout { background: var(--blood); color: var(--paper); border-color: var(--blood); }
.show:hover .chip--few, .show:focus-within .chip--few { color: var(--ink); }
.show:hover .chip--premiere, .show:focus-within .chip--premiere { background: var(--ink); color: var(--signal); border-color: var(--ink); }
.show .btn { --fg: var(--paper); --bd: var(--paper); padding: .85em 1.2em; white-space: nowrap; }
.show:hover .btn, .show:focus-within .btn { --bg: var(--ink); --fg: var(--signal); --bd: var(--ink); }
.show.is-soldout .show__title { text-decoration: line-through; text-decoration-thickness: .08em; }
.show.is-soldout .btn { opacity: .5; pointer-events: none; }
.show .demo-tag { font-size: .55rem; }

@media (max-width: 680px) {
  .show { grid-template-columns: 5.2rem minmax(0, 1fr); }
  .show__side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
}

/* Постер, що летить за курсором */
.poster {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 220px; aspect-ratio: 3 / 4; max-width: 100%;
  background: var(--signal); color: var(--ink);
  border: var(--stroke) solid var(--ink); box-shadow: 10px 10px 0 var(--paper);
  padding: 1rem; display: none; flex-direction: column; justify-content: space-between;
  opacity: 0; transform: translate(-50%, -50%) rotate(var(--pr, -6deg)) scale(.6);
  transition: opacity .25s, transform .4s var(--ease-out);
}
.poster img { width: 70%; margin-inline: auto; }
.poster b { font: 900 1.15rem/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; }
@media (pointer: fine) and (min-width: 861px) { .poster { display: flex; } }
.poster.on { opacity: 1; transform: translate(-50%, -50%) rotate(var(--pr, -6deg)) scale(1); }

/* Афіша порожня: «Скоро» */
.soon {
  position: relative; isolation: isolate;
  display: grid; justify-items: start; gap: 1.2rem;
  padding-top: clamp(1.5rem, 4vw, 3rem);
}
.soon__tape {
  width: 100%; height: 22px;
  background: repeating-linear-gradient(-45deg, var(--signal) 0 22px, var(--ink) 22px 44px);
  background-size: 62.2px 100%;
  animation: hazard 1.4s linear infinite;
}
.soon__eyebrow { display: inline-flex; align-items: center; gap: .7em; color: var(--signal); margin: clamp(1rem, 3vw, 2rem) 0 0; }
.soon__dot { width: .8em; height: .8em; border-radius: 50%; background: var(--signal); animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.soon__big {
  margin: 0; max-width: 100%;
  font: 900 clamp(4rem, 19vw, 17rem)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.06em;
  color: var(--signal);
}
.soon__big span[style] { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* літери загоряються по черзі, як неонова вивіска */
  .soon__big span[style] {
    animation: charge 3.6s var(--ease-snap) infinite;
    animation-delay: calc(var(--i) * .16s);
  }
}
@keyframes charge {
  0%, 12% { color: var(--ash); transform: none; }
  22% { color: var(--signal); transform: translateY(-6%) rotate(-3deg); }
  30%, 70% { color: var(--signal); transform: none; }
  85%, 100% { color: var(--ash); transform: none; }
}
.soon__hand { margin: -.2em 0 0; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1; color: var(--paper); transform: rotate(-3deg); transform-origin: left; }
.soon__text { margin: 0; max-width: 34ch; font-size: var(--t-lg); line-height: 1.35; color: var(--paper); }
.soon__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.soon .btn--line { --fg: var(--paper); --bd: var(--paper); }
.soon .btn--line:hover { --bg: var(--signal); --fg: var(--ink); --bd: var(--signal); }
.soon__claws { position: absolute; z-index: -1; right: 0; top: 30%; width: min(46%, 520px); height: auto; aspect-ratio: 400 / 220; margin: 0; opacity: .9; }
.soon__claws path { stroke: var(--ink-2); stroke-width: 16; }
.soon__claws path:nth-child(2) { stroke-width: 22; }

/* ==================================================================
   РЕПЕРТУАР — «Сліди зграї»: рядки з купкою фото, клік відкриває сцену
   ================================================================== */
/* «СЛІДИ / ЗГРАЇ»: ніжки «Д» тягнуться вниз назустріч крапкам «Ї» — тут рядки ширше */
.rep .display { line-height: 1.26; }
.rep { background: var(--paper); padding-block: clamp(4rem, 10vw, 8rem); overflow: hidden; }
.plays { list-style: none; margin: 0; padding: 0; border-top: var(--stroke) solid var(--ink); }
.play { border-bottom: var(--stroke) solid var(--ink); }
.play__btn {
  position: relative; isolation: isolate;
  width: 100%; margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  padding: clamp(1.2rem, 3vw, 2.2rem) 0;
  display: grid; align-items: center;
  grid-template-columns: 3rem minmax(0, 1fr) auto auto;
  grid-template-areas: "num title pile go" "num meta pile go";
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
  transition: color .3s, transform .9s var(--ease-out);
  transition-delay: 0s, var(--d, 0s);
}
/* чорна заливка рядка, що «вривається» зліва */
.play__btn::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--gutter) * -1);
  background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-snap);
}
.play__btn:hover, .play__btn:focus-visible { color: var(--paper); }
.play__btn:hover::before, .play__btn:focus-visible::before { transform: scaleX(1); }
.play__btn:focus-visible { outline-offset: -3px; outline-color: var(--signal); }
.play__num { grid-area: num; align-self: start; padding-top: .5em; font: 700 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; }
.play__title {
  grid-area: title; min-width: 0;
  font: 900 var(--t-xl)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.04em;
  overflow-wrap: anywhere;
  transition: transform .5s var(--ease-out), color .3s;
}
.play__btn:hover .play__title, .play__btn:focus-visible .play__title { color: var(--signal); transform: translateX(.5rem) skewX(-7deg); }
.play__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font: 500 var(--t-xs)/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ash); }
.play__btn:hover .play__meta, .play__btn:focus-visible .play__meta { color: var(--paper); }

/* купка фото / постерів */
.play__pile { grid-area: pile; position: relative; width: clamp(120px, 13vw, 180px); aspect-ratio: 4 / 3; }
.play__card {
  position: absolute; inset: 0; overflow: hidden;
  border: var(--stroke) solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  background: var(--ink);
  transition: transform .6s var(--ease-out), box-shadow .3s, border-color .3s;
}
.play__card:nth-child(1) { transform: rotate(-7deg); }
.play__card:nth-child(2) { transform: rotate(5deg) translateX(6%); }
.play__card:nth-child(3) { transform: rotate(-1deg); }
.play__card > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transition: filter .4s; }
.play__btn:hover .play__card { border-color: var(--signal); box-shadow: 6px 6px 0 var(--signal); }
.play__btn:hover .play__card > img { filter: none; }
.play__btn:hover .play__card:nth-child(1) { transform: translate(-48%, -10%) rotate(-16deg); }
.play__btn:hover .play__card:nth-child(2) { transform: translate(40%, -6%) rotate(13deg); }
.play__btn:hover .play__card:nth-child(3) { transform: translateY(-16%) scale(1.08) rotate(-2deg); }

.play__go {
  grid-area: go; width: clamp(48px, 6vw, 72px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--signal);
  font: 900 clamp(1.2rem, 2.4vw, 1.8rem)/1 var(--f-display);
  transition: transform .5s var(--ease-out), background .3s, color .3s;
}
.play__btn:hover .play__go { background: var(--signal); color: var(--ink); transform: rotate(45deg) scale(1.1); }

/* постер-заглушка, поки немає фото */
.ph {
  width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: .6rem;
  padding: 8%; text-align: center; background: var(--signal); color: var(--ink);
}
.ph img { width: min(46%, 160px); height: auto; }
.ph b { font: 900 clamp(1rem, .6rem + 1.6vw, 2rem)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; overflow-wrap: anywhere; }
.ph--1 { background: var(--ink); color: var(--signal); }
.ph--2 { background: var(--paper); }
.play__card .ph b { display: none; }

/* поява рядків (класи ставить JS, тільки якщо рух дозволено) */
.play.pre .play__btn { transform: translateX(-10%) skewX(-10deg); }
.play.pre.in .play__btn { transform: none; }

@media (max-width: 680px) {
  .play__btn {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas: "num title title" "num meta meta" "num pile go";
  }
  .play__title { font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .play__go { align-self: end; }
  .play__pile { width: min(52vw, 200px); margin: 1rem 0 .4rem 1rem; }
}

/* ==================================================================
   ДРІТ ПРАВОРУЧ — котик на нитці показує, де ти на сторінці (main.js §15)
   ================================================================== */
.rail { position: fixed; z-index: 85; right: 22px; top: 100px; bottom: 76px; width: 2px; transition: opacity .6s ease, visibility 0s; }
.rail.is-away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility 0s .6s; }
.rail__wire { position: absolute; inset: 0; border-radius: 2px; background: var(--ash); opacity: .55; }
.rail__wire i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--ink); box-shadow: 0 0 0 1px var(--signal); }
.rail__marks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rail__marks li { position: absolute; right: -6px; transform: translateY(-50%); }
.rail__marks a {
  position: relative; display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
  transition: background .3s, transform .3s var(--ease-out);
}
.rail__marks li.is-passed a { background: var(--signal); }
.rail__marks a:hover, .rail__marks a:focus-visible { transform: scale(1.35); }
.rail__marks a:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.rail__marks span {
  position: absolute; right: 22px; top: 50%; transform: translate(8px, -50%);
  white-space: nowrap; pointer-events: none; opacity: 0;
  padding: .4em .75em; border-radius: 999px; background: var(--ink); color: var(--signal);
  font: 700 .65rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em;
  transition: opacity .2s, transform .3s var(--ease-out);
}
.rail__marks a:hover span, .rail__marks a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.rail__cat {
  position: absolute; left: 1px; top: 0; width: 42px; height: 42px; margin-left: -21px;
  z-index: 1; transform: translateY(var(--y, 0)); cursor: grab; touch-action: none; user-select: none;
}
.rail.is-drag .rail__cat { cursor: grabbing; }
.rail__cat img {
  width: 100%; height: 100%; padding: 5px; border-radius: 50%;
  background: var(--signal); border: 2px solid var(--ink);
  transform: rotate(var(--swing, 0deg)); transform-origin: 50% -4px; /* висить на нитці */
}
.rail__end {
  position: absolute; right: 30px; bottom: -30px; transform: rotate(-6deg); white-space: nowrap; /* ліворуч від котика, що приземлився */
  padding: 0 .45em; border-radius: 4px; background: var(--signal); color: var(--ink);
  font-size: 1.25rem; line-height: 1.3; opacity: .55; transition: opacity .3s;
}
.rail.is-end .rail__end { opacity: 1; }
.rail.is-end .rail__cat img { animation: rail-land .7s var(--ease-out); }
@keyframes rail-land {
  0% { transform: translateY(-14px) rotate(0); }
  35% { transform: translateY(0) scale(1.18, .82); }
  60% { transform: translateY(-6px) scale(.95, 1.06); }
  100% { transform: none; }
}
@media (max-width: 760px) {
  .rail { right: 7px; top: 84px; bottom: 60px; }
  .rail__marks, .rail__end { display: none; }
  .rail__cat { width: 26px; height: 26px; margin-left: -13px; pointer-events: none; }
  .rail__cat img { padding: 3px; border-width: 1.5px; }
}

/* ==================================================================
   ЗГРАЯ В КАДРІ — горизонтальна плівка (рух — main.js §14)
   ================================================================== */
.reel { position: relative; background: var(--ink); color: var(--paper); }
.reel__pin {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 3vh, 2rem);
  padding-block: clamp(4rem, 10vw, 6rem) clamp(2rem, 4vw, 3rem);
}
.reel.is-pinned .reel__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  padding-block: calc(env(safe-area-inset-top, 0px) + 84px) 26px;
}
.reel__ghost {
  position: absolute; z-index: 0; left: 0; top: 17%; margin: 0; pointer-events: none;
  white-space: nowrap; transform: translate3d(-45%, -50%, 0);
  font: 900 clamp(6rem, 22vh, 20rem)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.06em;
  color: var(--ink-2);
}
.reel__head, .reel__viewport, .reel__foot { position: relative; z-index: 1; }
.reel__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1.5rem; }
.reel .display { color: var(--signal); font-size: clamp(2.6rem, 1rem + 5vw, 6.5rem); }
.reel .sec-head__note { color: var(--paper); }

.reel__viewport { min-height: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.reel__viewport::-webkit-scrollbar { display: none; }
.reel.is-pinned .reel__viewport { overflow: visible; scroll-snap-type: none; }
/* сама плівка: темна стрічка з перфорацією згори й знизу */
.reel__track {
  position: relative; list-style: none; margin: 0;
  display: flex; gap: 16px; width: max-content; height: 100%;
  padding: 28px var(--gutter);
  background:
    repeating-linear-gradient(90deg, var(--paper) 0 16px, transparent 16px 40px) left 8px / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--paper) 0 16px, transparent 16px 40px) left calc(100% - 8px) / 100% 11px no-repeat,
    var(--ink-2);
  will-change: transform;
}
.reel__item { flex: none; height: clamp(260px, 72vw, 420px); scroll-snap-align: center; }
.reel.is-pinned .reel__item { height: 100%; }
.reel__card {
  position: relative; display: block; height: 100%; aspect-ratio: 4 / 5;
  margin: 0; padding: 0; border: 0; overflow: hidden; cursor: pointer;
  background: var(--ink); color: inherit; text-align: left;
  transform: scale(calc(1 - var(--a, 0) * .1));
  transition: box-shadow .3s;
}
.reel__frame { position: absolute; inset: 0; overflow: hidden; }
.reel__frame img {
  position: absolute; top: 0; left: -10%; width: 120%; height: 100%; object-fit: cover;
  transform: translateX(calc(var(--d, 0) * -14%)) scale(var(--z, 1));
  filter: grayscale(.85) contrast(1.1); transition: filter .4s;
}
.reel__frame img.is-whole { left: 0; width: 100%; object-fit: contain; transform: none; }
.reel__card:hover img, .reel__card:focus-visible img { filter: none; }
.reel__card:hover { box-shadow: inset 0 0 0 4px var(--signal); }
.reel__card:focus-visible { outline: 4px solid var(--signal); outline-offset: -4px; }
.reel__credit {
  position: absolute; left: .6rem; bottom: .6rem; max-width: calc(100% - 1.2rem);
  padding: .35em .65em; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 700 .62rem/1.2 var(--f-mono); letter-spacing: .08em; overflow-wrap: anywhere;
}
/* заставка вистави між кадрами */
.reel__card--title {
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: space-between; gap: .6rem;
  padding: clamp(1rem, 2.6vh, 1.8rem);
  background: var(--signal); color: var(--ink);
  transition: background .3s, color .3s, box-shadow .3s;
}
.reel__card--title:hover, .reel__card--title:focus-visible { background: var(--paper); }
.reel__num { font: 700 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; }
.reel__title { margin-top: auto; font: 900 clamp(1.25rem, .5rem + 2.2vh, 2.6rem)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.04em; overflow-wrap: break-word; text-wrap: balance; }
.reel__author { font-size: clamp(1.1rem, .9rem + 1vh, 1.6rem); line-height: 1.05; }
.reel__years { font: 700 var(--t-xs)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; }
.reel__years i { font-style: normal; }

.reel__foot { display: flex; align-items: center; gap: 1.2rem; }
.reel:not(.is-pinned) .reel__foot { display: none; }
.reel__count { flex: none; max-width: 50%; font: 700 var(--t-xs)/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--signal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel__bar { flex: 1; position: relative; height: 3px; background: var(--ink-2); overflow: hidden; }
.reel__bar i { position: absolute; inset: 0; background: var(--signal); transform: scaleX(0); transform-origin: left; }

/* ==================================================================
   СЦЕНА — повноекранна картка вистави (<dialog>)
   ================================================================== */
.stage {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
}
.stage::backdrop { background: var(--ink); }
.stage :focus-visible { outline-color: var(--signal); }
.stage__inner {
  position: relative; height: 100%; overflow: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 2rem);
}
/* завіса: жовта табличка з котом, що злітає вгору */
.stage__curtain {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  display: grid; place-items: center;
  background: var(--signal);
  clip-path: inset(0 0 100% 0);
}
.stage__curtain img { width: min(42vw, 260px); }
@media (prefers-reduced-motion: no-preference) {
  /* перше відкриття: завіса піднімається знизу, накриває, злітає; вміст видно лише після накриття */
  .stage.is-in .stage__curtain { animation: curtain-in 1.05s var(--ease-snap) both; }
  .stage.is-in .stage__curtain img { animation: curtain-cat 1.05s var(--ease-out) both; }
  .stage.is-in .stage__inner { animation: veil 1.05s steps(1) both; }
  /* перемикання вистав: спершу накрити (is-cover), під завісою змінити вміст, потім злетіти (is-reveal) */
  .stage.is-cover .stage__curtain { animation: curtain-out .45s var(--ease-snap) both; }
  .stage.is-cover .stage__curtain img { animation: curtain-cat-in .45s var(--ease-out) both; }
  .stage.is-reveal .stage__curtain { animation: curtain-lift .6s var(--ease-snap) .08s both; }
  .stage.is-reveal .stage__curtain img { animation: curtain-cat-out .6s var(--ease-out) .08s both; }
  .stage.is-out .stage__curtain { animation: curtain-out .5s var(--ease-snap) both; }
}
@keyframes curtain-in {
  0% { clip-path: inset(100% 0 0 0); }
  38%, 55% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
@keyframes curtain-out {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes curtain-lift {
  0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
@keyframes curtain-cat-in {
  0% { transform: translateY(40%) rotate(-20deg) scale(.6); }
  100% { transform: none; }
}
@keyframes curtain-cat-out {
  0% { transform: none; }
  100% { transform: translateY(-30%) rotate(8deg) scale(1.1); }
}
@keyframes veil {
  0% { opacity: 0; }
  38% { opacity: 1; }
}
@keyframes curtain-cat {
  0% { transform: translateY(40%) rotate(-20deg) scale(.6); }
  45%, 60% { transform: none; }
  100% { transform: translateY(-30%) rotate(8deg) scale(1.1); }
}

.stage__top {
  position: sticky; top: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  max-width: var(--max); margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 14px;
  background: var(--ink); color: var(--signal);
}
.stage__close { --fg: var(--paper); --bd: var(--paper); padding: .8em 1.2em; }
.stage__close:hover { --bg: var(--signal); --fg: var(--ink); --bd: var(--signal); }
.stage__close:hover i { transform: rotate(90deg); }

.stage__grid {
  max-width: var(--max); margin: clamp(1rem, 3vw, 2rem) auto 0;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.stage__media { position: sticky; top: 90px; min-width: 0; }
.stage__track {
  list-style: none; margin: 0 14px 0 0; padding: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  height: clamp(320px, 68vh, 760px);
  border: var(--stroke) solid var(--signal); box-shadow: 14px 14px 0 var(--signal);
  background: var(--ink-2);
  transform: rotate(-1.5deg);
}
.stage__track::-webkit-scrollbar { display: none; }
.stage__slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; overflow: hidden; }
.stage__slide > img { width: 100%; height: 100%; object-fit: cover; }
/* наближення з адмінки (--z, точка — transform-origin з того ж фокусу) */
.stage__slide > img, .play__card > img { transform: scale(var(--z, 1)); }
/* «показати цілим» з адмінки — для афіш і широких кадрів */
.stage__slide > img.is-whole, .play__card > img.is-whole { object-fit: contain; transform: none; }
.stage__who { color: var(--signal); text-underline-offset: .2em; text-decoration-thickness: 2px; }
.stage__who:hover { background: var(--signal); color: var(--ink); text-decoration: none; }
.stage__credit {
  position: absolute; left: .8rem; bottom: .8rem; max-width: calc(100% - 1.6rem);
  padding: .4em .7em; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 700 .68rem/1.2 var(--f-mono); letter-spacing: .08em; overflow-wrap: anywhere;
}
.stage__slide .ph b { font-size: clamp(1.6rem, 1rem + 2.4vw, 3.2rem); }
.stage__ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.6rem; }
.stage__arrow {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: var(--stroke) solid var(--signal); background: transparent; color: var(--signal);
  font: 900 1.2rem/1 var(--f-display);
  transition: background .25s, color .25s, transform .35s var(--ease-out);
}
.stage__arrow:hover { background: var(--signal); color: var(--ink); transform: scale(1.08); }
.stage__count { font: 700 var(--t-sm)/1 var(--f-mono); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.stage__nophoto { margin: 1.4rem 0 0; font-size: 1.8rem; line-height: 1; color: var(--signal); text-align: center; }

.stage__copy { display: grid; gap: 1.2rem; justify-items: start; min-width: 0; }
.stage__title {
  margin: 0; color: var(--signal);
  font: 900 clamp(2.2rem, 1rem + 4.6vw, 5.4rem)/1.04 var(--f-display); text-transform: uppercase; letter-spacing: -.045em;
}
.stage__title .wd { display: inline-block; white-space: nowrap; }
.stage__title .ch { display: inline-block; }
.stage__author { margin: -.2rem 0 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.05; }
.stage__facts {
  margin: 0; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.4rem;
  padding-block: 1rem; border-block: 2px solid var(--ink-2);
}
.stage__facts dt { font: 700 var(--t-xs)/1.8 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ash); }
.stage__facts dd { margin: 0; font-weight: 500; }
.stage__text { margin: 0; max-width: 52ch; line-height: 1.6; }
.stage__quote {
  margin: .4rem 0; max-width: 100%;
  padding: .35em .6em; background: var(--signal); color: var(--ink);
  font: 400 clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem)/1.1 var(--f-hand);
  box-shadow: 8px 8px 0 var(--paper);
}
.stage__h { margin: .8rem 0 0; color: var(--signal); }
.stage__played, .stage__awards { list-style: none; margin: 0; padding: 0; width: 100%; }
.stage__played li {
  display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 2px dashed var(--ink-2);
}
.stage__played time { font: 700 var(--t-sm)/1.2 var(--f-mono); color: var(--signal); font-variant-numeric: tabular-nums; }
.stage__awards li { padding: .5rem 0; font-weight: 700; }
.stage__awards li::before { content: "✱ "; color: var(--signal); }
.stage__copy .btn--signal { margin-top: .6rem; }
.stage__copy .btn--signal:hover { --bg: var(--paper); --bd: var(--paper); }

.stage__nav {
  max-width: var(--max); margin: clamp(3rem, 7vw, 5rem) auto 0; padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 2px solid var(--ink-2);
}
.stage__nav button {
  display: inline-flex; align-items: center; gap: .6em; min-width: 0; max-width: 48%;
  padding: .6em 0; border: 0; background: none; cursor: pointer; color: var(--paper);
  font: 800 var(--t-sm)/1.1 var(--f-display); text-transform: uppercase; text-align: left;
  transition: color .25s;
}
.stage__nav button:last-child { text-align: right; }
.stage__nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage__nav i { font-style: normal; color: var(--signal); transition: transform .35s var(--ease-out); }
.stage__nav button:hover { color: var(--signal); }
.stage__nav button:first-child:hover i { transform: translateX(-6px); }
.stage__nav button:last-child:hover i { transform: translateX(6px); }

/* вхід сцени: фото «гупає», літери падають, текст підіймається */
@media (prefers-reduced-motion: no-preference) {
  .stage.is-in .stage__track { animation: slam .9s var(--ease-out) .42s both; }
  .stage.is-in .stage__title .ch { animation: drop .8s var(--ease-out) both; animation-delay: calc(.5s + var(--i) * 32ms); }
  .stage.is-in .stage__copy > :not(.stage__title) { animation: rise .7s var(--ease-out) .75s both; }
  .stage.is-reveal .stage__track { animation: slam .9s var(--ease-out) .12s both; }
  .stage.is-reveal .stage__title .ch { animation: drop .8s var(--ease-out) both; animation-delay: calc(.2s + var(--i) * 32ms); }
  .stage.is-reveal .stage__copy > :not(.stage__title) { animation: rise .7s var(--ease-out) .4s both; }
}
@keyframes slam {
  0% { transform: translateY(26%) rotate(-10deg) scale(.86); }
  100% { transform: rotate(-1.5deg); }
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }

@media (max-width: 860px) {
  .stage__grid { grid-template-columns: 1fr; }
  .stage__media { position: static; }
  .stage__track { height: min(60vh, 110vw); box-shadow: 8px 8px 0 var(--signal); margin-right: 8px; }
}

/* ==================================================================
   КОМАНДА
   ================================================================== */
.team { background: var(--signal); padding-block: clamp(4rem, 10vw, 8rem); }
.pack {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(2.5rem, 4vw, 3.2rem) clamp(1rem, 2.5vw, 1.8rem);
  padding-top: 2rem;
}
.member { position: relative; display: grid; gap: .8rem; }
.member__card {
  position: relative; aspect-ratio: 4 / 5; max-width: 100%;
  background: var(--ink); color: var(--signal);
  border-radius: 6px; overflow: hidden;
  display: grid; place-items: center;
  transition: transform .4s var(--ease-out), background .3s;
}
.member__card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transform: scale(var(--z, 1)); }
/* картка з окремою сторінкою: уся — посилання, у кутку «досьє» */
.member__link { display: grid; gap: .8rem; color: inherit; text-decoration: none; }
.member__link:focus-visible { outline-offset: 6px; }
.member__more {
  position: absolute; right: .7rem; bottom: .7rem;
  padding: .45em .8em; border-radius: 999px; background: var(--signal); color: var(--ink);
  font: 700 .65rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em;
  transition: transform .35s var(--ease-out);
}
.member--page:hover .member__more, .member__link:focus-visible .member__more { transform: rotate(-6deg) scale(1.12); }
.member__initials { font: 900 clamp(4rem, 9vw, 6.5rem)/1 var(--f-display); letter-spacing: -.05em; }
.member__num { position: absolute; left: .8rem; top: .8rem; font: 700 .7rem/1 var(--f-mono); letter-spacing: .14em; }
/* вуха — як «дріт» у логотипі */
.member__ears {
  position: absolute; left: 0; right: 0; top: -34px; height: 40px; pointer-events: none;
  overflow: visible;
}
.member__ears path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s var(--ease-snap); }
.member:hover .member__ears path, .member:focus-within .member__ears path { stroke-dashoffset: 0; }
.member:hover .member__card { animation: growl .35s linear 2; background: var(--ink-2); }
@keyframes growl {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-3px, 1px) rotate(-1deg); }
  40% { transform: translate(3px, -1px) rotate(1deg); }
  60% { transform: translate(-2px, 2px) rotate(-.5deg); }
  80% { transform: translate(2px, -2px) rotate(.5deg); }
}
.member__name { margin: 0; font: 800 var(--t-md)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.member__role { margin: 0; font-family: var(--f-hand); font-size: 1.6rem; line-height: 1; }

/* ==================================================================
   INSTAGRAM
   ================================================================== */
.insta { background: var(--paper); border-block: var(--stroke) solid var(--ink); }
.insta__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem 1rem;
  max-width: var(--max); margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
  text-decoration: none; position: relative; isolation: isolate;
}
.insta__link .eyebrow { grid-column: 1 / -1; }
.insta__handle {
  font: 900 clamp(1.9rem, 8vw, 7.5rem)/.9 var(--f-display); letter-spacing: -.05em;
  overflow-wrap: anywhere; min-width: 0;
  transition: letter-spacing .5s var(--ease-out);
}
.insta__go {
  width: clamp(56px, 10vw, 120px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); color: var(--signal);
  display: grid; place-items: center; font: 900 clamp(1.5rem, 4vw, 3rem)/1 var(--f-display);
  transition: transform .5s var(--ease-out), background .3s;
}
.insta__link:hover .insta__handle { letter-spacing: -.02em; }
.insta__link:hover .insta__go { transform: rotate(45deg) scale(1.08); background: var(--blood); color: var(--paper); }

/* ==================================================================
   КОНТАКТИ
   ================================================================== */
.contact { background: var(--signal); padding-block: clamp(4rem, 10vw, 8rem); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.sign {
  background: var(--paper); border: 6px solid var(--ink); border-radius: 10px;
  padding: clamp(1.4rem, 4vw, 2.5rem); text-align: center;
  box-shadow: 14px 14px 0 var(--ink);
  transform: rotate(-3deg);
  position: relative;
}
.sign::before, .sign::after {
  content: ""; position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink);
}
.sign::before { left: 14px; } .sign::after { right: 14px; }
.sign__warn { margin: 0; color: var(--blood); font: 900 clamp(1.6rem, 5vw, 3rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; }
.sign__main { margin: .2rem 0 0; font: 900 clamp(3rem, 11vw, 6.5rem)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.05em; }
.sign__hand { margin: .6rem 0 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.contact__info { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; min-width: 0; }
.contact__text { margin: 0; font-size: var(--t-lg); line-height: 1.35; max-width: 30ch; }
.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1.2rem; width: 100%; max-width: 32rem; }
.facts dt { font: 700 var(--t-xs)/1.7 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.facts .btn-copy {
  margin-left: .4rem; border: 2px solid var(--ink); background: transparent; border-radius: 999px;
  font: 700 .62rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; padding: .35em .6em; cursor: pointer;
}
.contact .btn--signal { --bg: var(--ink); --fg: var(--signal); --bd: var(--ink); }
.contact .btn--signal:hover { --bg: var(--paper); --fg: var(--ink); --bd: var(--ink); }
@media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } .sign { margin-inline: 8px 22px; } }

/* ==================================================================
   ФУТЕР
   ================================================================== */
.foot { background: var(--ink); color: var(--paper); padding: clamp(2rem, 5vw, 3rem) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 1.5rem); overflow: hidden; }
.foot__giant {
  margin: 0; text-align: center;
  font: 900 clamp(4rem, 24vw, 22rem)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.07em;
  /* контур тінями, а не -webkit-text-stroke: у Unbounded частини «Я» перекриваються, і stroke малює внутрішні лінії */
  color: var(--ink);
  text-shadow:
    2px 0 0 var(--signal), -2px 0 0 var(--signal), 0 2px 0 var(--signal), 0 -2px 0 var(--signal),
    1.5px 1.5px 0 var(--signal), -1.5px 1.5px 0 var(--signal), 1.5px -1.5px 0 var(--signal), -1.5px -1.5px 0 var(--signal);
  transition: color .5s;
}
.foot__giant:hover { color: var(--signal); }
/* щільний трекінг: «Г» + «Р» злипаються в «П», «З» впирається в «Г» — після «З» і «Г» трохи повітря */
.foot__kern { margin-right: .05em; }
.foot__row {
  max-width: var(--max); margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  font: 500 var(--t-xs)/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .12em;
}
.foot__row .hand { font-size: 1.6rem; text-transform: none; letter-spacing: 0; color: var(--signal); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--signal); }

/* ==================================================================
   ЗГРАЯ БІЖИТЬ (кнопка «Покликати зграю»)
   ================================================================== */
.swarm { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
/* маршрути котів генерує main.js §12 (Web Animations), тут лише вигляд */
.swarm img {
  position: absolute; left: 0; top: 0; width: var(--s, 90px); height: auto;
  transform: translate(-200px, -200px); will-change: transform;
}
.shake { animation: shake .5s linear; }
@keyframes shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-6px, 2px); } 30% { transform: translate(6px, -3px); }
  45% { transform: translate(-4px, 3px); } 60% { transform: translate(4px, -2px); }
  75% { transform: translate(-2px, 1px); }
}
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 160;
  margin: 0; transform: translate(-50%, 160%);
  background: var(--ink); color: var(--signal); padding: .9rem 1.4rem; border-radius: 999px;
  font: 800 var(--t-sm)/1 var(--f-display); text-transform: uppercase;
  transition: transform .5s var(--ease-out);
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.on { transform: translate(-50%, 0); }
/* порожня підказка не має визирати знизу */
.toast { visibility: hidden; transition: transform .5s var(--ease-out), visibility 0s .5s; }
.toast.on { visibility: visible; transition-delay: 0s; }

/* ==================================================================
   НОРА → ЛАПА → ПЕЧАТКА З ТРІЩИНАМИ
   ================================================================== */
.hole {
  position: fixed; z-index: 135; left: 50%; bottom: env(safe-area-inset-bottom, 0px); /* над лапою: рука виходить з-під нори */
  width: 64px; height: 30px; margin-left: -32px; padding: 0;
  border: 0; border-radius: 64px 64px 0 0; cursor: pointer;
  background: var(--ink); box-shadow: 0 0 0 2px var(--signal);
  transition: transform .4s var(--ease-out);
}
.hole::before { content: ""; position: absolute; inset: -14px -14px 0; } /* більша зона натискання */
.hole__eyes { position: absolute; left: 50%; top: 9px; display: flex; gap: 10px; transform: translateX(-50%); }
.hole__eyes i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); transform: scaleY(0); transition: transform .2s; }
.hole__ears {
  position: absolute; left: 50%; bottom: 100%; width: 40px; height: 12px; margin-left: -20px;
  transform: translateY(100%) scaleY(0); transform-origin: bottom; transition: transform .3s var(--ease-out);
}
.hole__ears::before, .hole__ears::after {
  content: ""; position: absolute; bottom: -2px; width: 14px; height: 14px; background: var(--ink);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.hole__ears::before { left: 0; transform: rotate(-12deg); } .hole__ears::after { right: 0; transform: rotate(12deg); }
.hole:hover, .hole:focus-visible { transform: translateY(-6px); }
.hole:hover .hole__eyes i, .hole:focus-visible .hole__eyes i { transform: scaleY(1); }
.hole:hover .hole__ears, .hole:focus-visible .hole__ears { transform: translateY(0) scaleY(1); }
.hole:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.hole.is-busy { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* раз на кілька секунд хтось визирає з нори: вушка, очі, роззирається */
  .hole:not(:hover):not(.is-busy) { animation: hole-peek 7.5s var(--ease-out) 3s infinite; }
  .hole:not(:hover):not(.is-busy) .hole__ears { animation: hole-ears 7.5s var(--ease-out) 3s infinite; }
  .hole:not(:hover):not(.is-busy) .hole__eyes { animation: hole-look 7.5s linear 3s infinite; }
  .hole:not(:hover):not(.is-busy) .hole__eyes i { animation: hole-blink 7.5s linear 3s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .hole__eyes i { transform: scaleY(1); }
}
@keyframes hole-peek {
  0%, 80%, 100% { transform: none; }
  83% { transform: translateY(-9px) rotate(-3deg); }
  86% { transform: translateY(-7px) rotate(3deg); }
  89%, 95% { transform: translateY(-8px); }
}
@keyframes hole-ears {
  0%, 80%, 98%, 100% { transform: translateY(100%) scaleY(0); }
  83%, 95% { transform: translateY(0) scaleY(1); }
}
@keyframes hole-look {
  0%, 85% { transform: translateX(-50%); }
  87%, 89% { transform: translateX(calc(-50% - 4px)); }
  91%, 93% { transform: translateX(calc(-50% + 4px)); }
  95%, 100% { transform: translateX(-50%); }
}
@keyframes hole-blink {
  0%, 81%, 97%, 100% { transform: scaleY(0); }
  83%, 92%, 95% { transform: scaleY(1); }
  93.5% { transform: scaleY(.1); }
}

.stamps { position: fixed; inset: 0; z-index: 130; pointer-events: none; overflow: hidden; }
.stamp { position: absolute; width: 0; height: 0; color: var(--ink); }
.stamp--light { color: var(--signal); }
.stamp__seal { position: absolute; left: -145px; top: -145px; width: 290px; height: 290px; overflow: visible; opacity: .94; transform: rotate(var(--rot)); }
.stamp__word { font: 900 30px var(--f-display); letter-spacing: -.03em; }
.stamp__small { font: 700 11px var(--f-mono); letter-spacing: .25em; }
.stamp__cracks { position: absolute; left: -320px; top: -320px; width: 640px; height: 640px; overflow: visible; opacity: .75; }
.stamp__cracks path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.stamp__cracks path.thin { stroke-width: 1.2; }
.stamp.is-in .stamp__cracks path { animation: crack .32s var(--ease-snap) forwards; animation-delay: var(--cd, 0s); }
.stamp.is-in .stamp__seal { animation: press .5s var(--ease-out) both; }
.stamp.is-out { animation: stamp-out .7s ease forwards; }
@keyframes crack { to { stroke-dashoffset: 0; } }
@keyframes press {
  0% { transform: rotate(var(--rot)) scale(1.4); opacity: 0; }
  35% { transform: rotate(var(--rot)) scale(.93); opacity: .95; }
  100% { transform: rotate(var(--rot)) scale(1); opacity: .9; }
}
@keyframes stamp-out { to { opacity: 0; transform: scale(.97); } }

/* лапа: контейнер-«рука» обертається довкола нори (низ по центру), лапа в ньому виїжджає й б'є.
   Фази удару (.paw.is-hit, .82s): замах убік і вглиб (0–45%) → напруга (45–56%) → різкий мах
   до цілі «на глядача» (56–72%, тут удар) → сплющення й віддача (72–100%) */
.paw {
  position: absolute; z-index: 2; width: 340px; margin-left: -170px;
  transform: rotate(var(--ang)); transform-origin: 50% 100%;
}
/* сховано = кисть повністю нижче нори (за екраном) — без видимого зрізу руки */
.paw__inner { position: absolute; inset: 0; transform: translateY(calc(100% + 160px)); }
.paw__arm {
  position: absolute; left: 50%; top: 200px; bottom: -700px; width: 66px; margin-left: -33px; /* рука йде далеко за край екрана */
  background: var(--ink); border: 3px solid var(--signal); border-bottom: 0; border-radius: 33px 33px 0 0;
}
.paw__hand {
  position: absolute; left: 50%; top: 70px; width: 210px; height: 210px; margin-left: -105px; overflow: visible; /* 70px запасу: лапа росте при ударі */
  transform-origin: 50% 72%;
}
.paw__fur { fill: var(--ink); stroke: var(--signal); stroke-width: 3; paint-order: stroke; }
.paw__beans { fill: var(--paper); }

.paw.is-hit { animation: paw-arc .82s linear forwards; }
.paw.is-hit .paw__inner { animation: paw-reach .82s linear forwards; }
.paw.is-hit .paw__hand { animation: paw-hit .82s linear forwards; }
@keyframes paw-arc {
  0% { transform: rotate(calc(var(--ang) + var(--wind) * .6)); animation-timing-function: var(--ease-out); }
  45% { transform: rotate(calc(var(--ang) + var(--wind))); animation-timing-function: ease-in-out; }
  56% { transform: rotate(calc(var(--ang) + var(--wind) * 1.08)); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  72% { transform: rotate(var(--ang)); animation-timing-function: var(--ease-out); }
  79% { transform: rotate(calc(var(--ang) - var(--wind) * .05)); }
  88% { transform: rotate(calc(var(--ang) + var(--wind) * .02)); }
  100% { transform: rotate(var(--ang)); }
}
@keyframes paw-reach {
  0% { transform: translateY(calc(100% + 160px)); animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  45% { transform: translateY(46%); animation-timing-function: ease-in-out; }
  56% { transform: translateY(52%); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  72% { transform: translateY(0); animation-timing-function: var(--ease-out); }
  100% { transform: translateY(1%); }
}
@keyframes paw-hit {
  0% { transform: scale(.6) rotate(-18deg); animation-timing-function: var(--ease-out); }
  45% { transform: scale(.72) rotate(-26deg); animation-timing-function: ease-in-out; }
  56% { transform: scale(.68) rotate(-30deg); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  68% { transform: scale(1.38) rotate(4deg); }
  72% { transform: scale(1.22, 1.02) rotate(0deg); animation-timing-function: var(--ease-out); }
  80% { transform: scale(1.06, 1.12); }
  100% { transform: scale(1.1); }
}
.paw.is-back { animation: none; }
.paw.is-back .paw__inner { animation: paw-back .45s cubic-bezier(.5, 0, .75, 0) forwards; }
.paw.is-back .paw__hand { transform: scale(1.1); }
@keyframes paw-back { from { transform: translateY(1%); } to { transform: translateY(calc(100% + 160px)); } }

/* ударна хвиля в точці удару */
.stamp__burst {
  position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%;
  border: 6px solid currentColor; opacity: 0; transform: scale(.5);
}
.stamp.is-in .stamp__burst { animation: burst .42s var(--ease-out) forwards; }
@keyframes burst {
  0% { opacity: .85; transform: scale(.5); border-width: 10px; }
  100% { opacity: 0; transform: scale(1.9); border-width: 1px; }
}
/* удар лапи: екран здригається вниз і трясеться, згасаючи */
.stomp { animation: stomp .55s linear; }
@keyframes stomp {
  0%, 100% { transform: none; }
  8% { transform: translate(0, 12px) rotate(.35deg); }
  18% { transform: translate(-9px, -5px) rotate(-.4deg); }
  30% { transform: translate(8px, 4px) rotate(.3deg); }
  42% { transform: translate(-6px, -3px) rotate(-.2deg); }
  56% { transform: translate(4px, 2px); }
  70% { transform: translate(-2px, -1px); }
  85% { transform: translate(1px, 0); }
}

/* ==================================================================
   ПЕРЕХІД МІЖ СТОРІНКАМИ — та сама жовта завіса з котом, що й у сцені вистави.
   Клік → завіса накриває (is-cover) → нова сторінка відкривається накритою (html.veil-in)
   → після рендеру злітає (is-reveal). Запобіжник: без JS-сигналу злітає сама через 2.5 с.
   ================================================================== */
.veil {
  position: fixed; inset: 0; z-index: 500; pointer-events: none;
  display: grid; place-items: center; background: var(--signal);
  clip-path: inset(0 0 100% 0);
}
.veil img { width: min(42vw, 260px); }
.veil.is-cover { pointer-events: auto; animation: curtain-out .45s var(--ease-snap) both; }
.veil.is-cover img { animation: curtain-cat-in .45s var(--ease-out) both; }
.veil-in .veil { clip-path: inset(0 0 0 0); animation: curtain-lift .6s var(--ease-snap) 2.5s both; }
.veil.is-reveal, .veil-in .veil.is-reveal { animation: curtain-lift .6s var(--ease-snap) .08s both; }
.veil.is-reveal img { animation: curtain-cat-out .6s var(--ease-out) .08s both; }

/* ==================================================================
   СТОРІНКА ЛЮДИНИ (person.html, рендер — assets/js/person.js)
   ================================================================== */
.who-hero { position: relative; overflow: hidden; padding-top: calc(env(safe-area-inset-top, 0px) + 104px); }
.who-hero > .hazard { margin-inline: 0; }
.who-back {
  display: inline-flex; align-items: center; gap: .5em; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  font: 700 var(--t-xs)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; text-decoration: none;
  padding: .6em 1em; border: 2px solid var(--ink); border-radius: 999px;
  transition: background .25s, color .25s;
}
.who-back i { font-style: normal; transition: transform .35s var(--ease-out); }
.who-back:hover { background: var(--ink); color: var(--signal); }
.who-back:hover i { transform: translateX(-4px); }
.who-eyebrow { margin: 0 0 .8rem; }
.who-name {
  margin: 0; display: flex; flex-wrap: wrap; gap: 0 .3em;
  font: 900 clamp(2.4rem, 10.5vw, 11rem)/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.05em;
  overflow-wrap: anywhere;
}
.who-name .wd { display: inline-block; white-space: nowrap; }
.who-name .ch { display: inline-block; }
.who-hero.is-intro .who-name .ch { animation: drop .9s var(--ease-out) both; animation-delay: calc(.15s + var(--i) * 55ms); }

.who-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(1.5rem, 4vw, 3rem);
}
.who-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; min-width: 0; }
.who-role { margin: 0; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: 1; transform: rotate(-4deg); transform-origin: left; }
.who-lead { margin: 0; max-width: 34ch; font-size: var(--t-lg); line-height: 1.3; font-weight: 500; text-wrap: pretty; }
.who-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.who-photo { position: relative; margin: 2.5rem 0 0; justify-self: center; width: min(100%, 400px); }
.who-photo__card {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--ink); color: var(--signal); border: var(--stroke) solid var(--ink); border-radius: 6px;
  box-shadow: 14px 14px 0 var(--ink); transform: rotate(2.5deg);
}
.who-photo__card > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transform: scale(var(--z, 1)); transition: filter .5s; }
.who-photo:hover .who-photo__card > img { filter: none; }
.who-photo__none { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); }
.who-photo__none img { width: 78%; opacity: .16; }
.who-photo__none b { position: absolute; font: 900 clamp(4.5rem, 12vw, 8rem)/1 var(--f-display); letter-spacing: -.05em; color: var(--ink); }
.who-photo__ears { position: absolute; z-index: 1; left: 0; right: 0; top: -36px; width: 100%; height: 42px; overflow: visible; transform: rotate(2.5deg); }
.who-photo__ears path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.who-photo__badge { right: -8%; left: auto; top: auto; bottom: -8%; width: clamp(96px, 30%, 132px); }
@media (prefers-reduced-motion: no-preference) {
  .who-hero.is-intro .who-photo__card { animation: who-slam .9s var(--ease-out) .35s both; }
  .who-hero.is-intro .who-photo__ears path { animation: who-ears .5s var(--ease-snap) 1.1s both; }
  .who-photo:hover .who-photo__card { animation: growl .35s linear 2; }
}
@keyframes who-slam { 0% { transform: translateY(30%) rotate(-10deg) scale(.85); } 100% { transform: rotate(2.5deg); } }
@keyframes who-ears { from { stroke-dashoffset: 1; } }

.who-facts { background: var(--ink); color: var(--paper); }
.who-facts__list {
  list-style: none; margin: 0 auto; padding-block: clamp(2.5rem, 6vw, 4rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 2rem;
}
.who-facts li { display: grid; gap: .5rem; align-content: start; }
.who-facts b { font: 900 clamp(3rem, 1.5rem + 5vw, 6rem)/.9 var(--f-display); letter-spacing: -.05em; color: var(--signal); font-variant-numeric: tabular-nums; }
.who-facts span { font: 700 var(--t-xs)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; max-width: 22ch; }

.who-bio { background: var(--paper); padding-block: clamp(3.5rem, 8vw, 6rem); }
.who-bio__grid { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1rem clamp(1.5rem, 4vw, 3rem); }
.who-bio .eyebrow { margin: .5em 0 0; }
.who-bio__text { display: grid; gap: 1.1rem; max-width: 46rem; }
.who-bio__text p { margin: 0; font-size: var(--t-lg); line-height: 1.4; text-wrap: pretty; }
.who-quote {
  justify-self: start; margin: .6rem 0 0; padding: .3em .6em;
  background: var(--signal); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-1.5deg);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.1;
}

.who-trail { background: var(--paper); padding-block: clamp(3.5rem, 8vw, 6rem); border-top: var(--stroke) solid var(--ink); }
.trail { list-style: none; margin: 0; padding: 0; border-top: var(--stroke) solid var(--ink); }
.trail__item { border-bottom: var(--stroke) solid var(--ink); }
.trail__link {
  position: relative; isolation: isolate;
  display: grid; align-items: center; gap: .6rem clamp(1rem, 3vw, 2.2rem);
  grid-template-columns: 2.4rem clamp(110px, 12vw, 160px) minmax(0, 1fr) auto auto;
  grid-template-areas: "num pic body as go";
  padding: clamp(1rem, 2.4vw, 1.6rem) 0; color: inherit; text-decoration: none;
  transition: color .3s, transform .9s var(--ease-out);
  transition-delay: 0s, calc(var(--k, 0) * 70ms);
}
.trail__link::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--gutter) * -1);
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-snap);
}
.trail__link:hover, .trail__link:focus-visible { color: var(--paper); }
.trail__link:hover::before, .trail__link:focus-visible::before { transform: scaleX(1); }
.trail__link:focus-visible { outline-offset: -3px; outline-color: var(--signal); }
.trail__num { grid-area: num; font: 700 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; }
.trail__pic {
  grid-area: pic; position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border: var(--stroke) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--ink);
  transform: rotate(-3deg); transition: transform .5s var(--ease-out), box-shadow .3s, border-color .3s;
}
.trail__pic > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transform: scale(var(--z, 1)); transition: filter .4s; }
.trail__pic > img.is-whole { object-fit: contain; transform: none; }
.trail__pic .ph img { width: 50%; }
.trail__link:hover .trail__pic { transform: rotate(3deg) scale(1.08); border-color: var(--signal); box-shadow: 6px 6px 0 var(--signal); }
.trail__link:hover .trail__pic > img { filter: none; }
.trail__body { grid-area: body; display: grid; gap: .4rem; min-width: 0; }
.trail__title {
  font: 900 var(--t-lg)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; overflow-wrap: anywhere;
  transition: transform .5s var(--ease-out), color .3s;
}
.trail__link:hover .trail__title { color: var(--signal); transform: translateX(.4rem) skewX(-7deg); }
.trail__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font: 500 var(--t-xs)/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ash); }
.trail__as { grid-area: as; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.trail__as span {
  padding: .45em .8em; border-radius: 999px; background: var(--signal); color: var(--ink);
  font: 700 .68rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.trail__go {
  grid-area: go; width: clamp(44px, 5vw, 60px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--signal);
  font: 900 1.3rem/1 var(--f-display); transition: transform .5s var(--ease-out), background .3s, color .3s;
}
.trail__link:hover .trail__go { background: var(--signal); color: var(--ink); transform: rotate(45deg) scale(1.1); }
.trail__item.pre .trail__link { transform: translateX(-10%) skewX(-10deg); }
.trail__item.pre.in .trail__link { transform: none; }
@media (max-width: 760px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-photo { width: min(78%, 340px); margin-inline: auto 30px; }
  .who-bio__grid { grid-template-columns: 1fr; }
  .trail__link {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas: "num body go" "num pic as";
    align-items: start;
  }
  .trail__pic { width: min(46vw, 180px); margin-top: .4rem; }
  .trail__title { font-size: clamp(1.1rem, 5.6vw, 1.6rem); overflow-wrap: break-word; } /* не рвати слова посередині */
  .who-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .trail__as { align-self: end; }
}

.who-pack { padding-block: clamp(3.5rem, 8vw, 6rem); }
.who-pack .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.who-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.who-chips a {
  display: inline-flex; align-items: baseline; gap: .7rem; padding: .7em 1.2em;
  border: var(--stroke) solid var(--ink); border-radius: 999px; text-decoration: none; background: var(--paper);
  transition: background .25s, color .25s, transform .35s var(--ease-out);
}
.who-chips b { font: 800 var(--t-sm)/1 var(--f-display); text-transform: uppercase; }
.who-chips .hand { font-size: 1.35rem; line-height: 1; }
.who-chips a:hover { background: var(--ink); color: var(--signal); transform: rotate(-2deg); }
.who-hero--lost .who-chips { margin: 2rem 0 0; }
.who-hero--lost .wrap { padding-bottom: clamp(3rem, 8vw, 6rem); }

/* ==================================================================
   Зменшений рух
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .preloader { display: none; }
  .badge { animation: none; }
}