/* ============================================================
   STAS KOROLIOV — EPK
   Айдентика з афіш «сезону 2»: помаранчева мальована текстура,
   колаж вікон Windows-XP, вирізані фігури, KyivType Sans у
   заголовках. Пласкі «крафтові» блоки без тіней (прохання Стаса).
   Відео — «плеєри» у вікнах з титлбаром, текст — білим на мальовці.
   ============================================================ */

:root {
  --orange:    #F08704;
  --orange-hi: #F79A1F;
  --ink:       #161311;
  --paper:     #FFFFFF;
  --red:       #E02A22;
  --yellow:    #F5D912;
  --xp-blue:   #0B50D0;
  --xp-blue-2: #3E8DFF;
  --muted:     #6B6157;
  --shadow:    rgba(43, 22, 2, .42);

  --font-display: "KyivType Sans", "Arial Black", sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;

  /* Повний цикл зміни кольору мальованого тла: старт з рідного
     оранжевого (hue-rotate 0deg) → все коло палітри → назад в оранж */
  --bg-hue-cycle: 120s;
}

*, *::before, *::after { box-sizing: border-box; }

/* Без CSS scroll-behavior: smooth — він ламає ScrollTrigger.refresh() з пінами.
   Плавні якорі робить JS (scrollIntoView). */
html {
  -webkit-text-size-adjust: 100%;
}

.section[id] { scroll-margin-top: 3.5rem; }

body {
  margin: 0;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: clip;
}

/* Фіксований шар з мальованою текстурою — контент скролиться поверх.
   hue-rotate дуже повільно проганяє мальовку по всій палітрі,
   зберігаючи яскравість і насиченість (прохання Стаса). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--orange) url("../img/texture-2600.jpg") center / cover no-repeat;
  background-image: image-set(
    url("../img/texture-2600.webp") type("image/webp"),
    url("../img/texture-2600.jpg") type("image/jpeg")
  );
  will-change: filter;
  animation: bg-hue var(--bg-hue-cycle) linear infinite;
}

@keyframes bg-hue {
  to { filter: hue-rotate(360deg); }
}

@media (max-width: 900px) {
  body::before {
    background-image: image-set(
      url("../img/texture-1600.webp") type("image/webp"),
      url("../img/texture-1600.jpg") type("image/jpeg")
    );
  }
}

::selection { background: var(--ink); color: var(--orange); }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--xp-blue); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap       { width: min(1160px, 94vw); margin-inline: auto; }
.strip      { width: min(720px, 92vw);  margin-inline: auto; }
.strip-wide { width: min(940px, 94vw);  margin-inline: auto; }

/* ---------- Лоадер ---------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--orange);
  transition: opacity .45s ease;
}

#loader.is-done {
  opacity: 0;
  pointer-events: none;
}

/* Бут-скрін XP: кругла іконка-портрет + сегментований прогрес-бар,
   яким біжать зелені блоки */
#loader {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.loader__count {
  min-width: 3.2ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--paper);
}

.loader__bar {
  position: relative;
  width: 220px;
  height: 18px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 9px;
  overflow: hidden;
}

.loader__bar i {
  position: absolute;
  top: 3px;
  left: 0;
  width: 10px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(#7CE28A, #2FA842);
  animation: loader-run 1.5s cubic-bezier(.4, 0, .6, 1) infinite;
}

.loader__bar i:nth-child(2) { animation-delay: .13s; }
.loader__bar i:nth-child(3) { animation-delay: .26s; }

@keyframes loader-run {
  0%   { transform: translateX(-16px); }
  100% { transform: translateX(222px); }
}

.site { transition: opacity .7s ease; }
html.is-loading .site { opacity: 0; }
html.is-loading { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .loader__bar i { animation: none; }
  .loader__bar i:nth-child(1) { width: 60%; }
}

/* ---------- Навігація ---------- */

/* visibility в парі з transform: прихована навігація не має лишатися
   в tab-порядку та дереві доступності */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform .35s ease, visibility 0s .35s;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.nav.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .35s ease, visibility 0s;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .55rem;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  text-decoration: none;
}

.nav__square {
  width: 15px;
  height: 15px;
  background: var(--red);
  border-radius: 3px;
  flex: none;
}

.nav__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  color: var(--ink);
}

.nav__links {
  display: flex;
  gap: clamp(.4rem, 2vw, 1.5rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__links::-webkit-scrollbar { display: none; }

.nav__links a {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: .5em .2em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.nav__links a:hover,
.nav__links a.is-active { color: var(--xp-blue); border-bottom-color: var(--xp-blue); }

/* Бургер: видимий лише на мобілці */
.nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .4s cubic-bezier(.22, .9, .3, 1.2);
}

.nav__burger span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2.5px;
  margin: -1.25px 0 0 -11px;
  background: var(--ink);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}

.nav__burger span:nth-child(1) { transform: translateY(-7px); }
.nav__burger span:nth-child(3) { transform: translateY(7px); }

.menu-open .nav__burger { transform: rotate(90deg); }
.menu-open .nav__burger span:nth-child(1) { transform: rotate(45deg); }
.menu-open .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.menu-open .nav__burger span:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 767px) {
  .nav__burger { display: block; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: .5rem 5vw 1rem;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    overflow: visible;
  }

  .menu-open .nav__links {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }

  .nav__links a {
    font-size: .92rem;
    padding: .85em .2em;
    border-bottom: 1px solid rgba(22, 19, 17, .12);
  }

  .nav__links a:last-child { border-bottom: 0; }
}

/* ---------- Hero ---------- */

/* .hero — обгортка (на мобілці жанровий рядок виходить із сцени в потік),
   .hero__stage — власне перший екран з колажем і фігурою */
.hero { position: relative; }

.hero__stage {
  position: relative;
  height: 100vh;   /* фолбек для браузерів без svh */
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero__bg picture,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__name {
  position: absolute;
  top: clamp(1.2rem, 7vh, 4.5rem);
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding-inline: 4.5vw;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 8.4vw, 8.4rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--paper);
  /* та сама жорстка тінь, що в .h2, але в em — масштабується з великим кеглем */
}

.hero__name-part { display: inline-block; }

.hero__cutout {
  position: absolute;
  /* піднято над краєм: запас більший за хід паралакса вниз (~35px),
     тож кросівок ніколи не ріжеться межею сцени */
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  will-change: transform;
}

.hero__cutout img {
  height: min(80vh, 130vw);
  height: min(80svh, 130vw);
  width: auto;
  /* глобальний img { max-width:100% } в абсолютному контейнері зі
     width:auto створює циклічну залежність і плющить пропорції */
  max-width: none;
}

.hero__genres {
  position: absolute;
  left: 4.5vw;
  bottom: 4vh;
  bottom: 4svh;
  z-index: 3;
  margin: 0;
  max-width: 34vw;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(.72rem, 1.3vw, .95rem);
  line-height: 2.1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  /* теги можуть лягати на фігуру — легка підкладка для читабельності */
}

.hero__scroll {
  position: absolute;
  right: 4.5vw;
  bottom: 4vh;
  bottom: 4svh;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(.72rem, 1.3vw, .95rem);
  letter-spacing: .18em;
  color: var(--paper);
  text-decoration: none;
}

.hero__scroll span {
  display: inline-block;
  animation: scroll-bob 1.8s ease-in-out infinite;
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

.hero__scroll:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
  /* Сцена трохи нижча за екран — під нею жанровий рядок у потоці */
  .hero__stage { height: 92vh; height: 92svh; min-height: 460px; }

  /* Постерний блок: кожне слово з нового рядка на всю ширину;
     кеглі підібрані за метриками KyivType Heavy (STAS 2.98em/симв.,
     KOROLIOV 5.87em/симв.) — обидва рядки візуально однакової ширини */
  .hero__name {
    top: 3.5vh;
    flex-direction: column;
    align-items: flex-start;
    letter-spacing: 0;
    line-height: .92;
  }
  .hero__name-part--left  { font-size: 30vw; }
  .hero__name-part--right { font-size: 15.3vw; }

  /* Колаж без cover-зума: смуга природних пропорцій по центру героя —
     без апскейлу (розмиття), текстура тла видна зверху і знизу */
  .hero__bg picture {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__bg img {
    width: 150vw;
    height: auto;
    max-width: none;
    object-fit: unset;
  }

  .hero__cutout { bottom: 5vh; bottom: 5svh; }
  .hero__cutout img { height: min(60vh, 140vw); height: min(60svh, 140vw); }

  /* Жанри — не оверлей поверх фігури, а тултіп-стрічка під сценою */
  .hero__genres {
    position: static;
    display: block;
    width: max-content;
    max-width: 92vw;
    margin: .9rem auto 0;
    padding: .6em 1em;
    text-align: center;
    line-height: 1.9;
    letter-spacing: .14em;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 6px;
  }

  .hero__scroll { display: none; }
}

/* ---------- Секції та типографіка ---------- */

.section { padding-block: clamp(2.2rem, 6vh, 4rem); }

.section > * + * { margin-top: clamp(2rem, 5vh, 3.2rem); }

.act > * + * { margin-top: clamp(1.8rem, 4.5vh, 2.8rem); }

.act + .act { margin-top: clamp(4rem, 10vh, 6.5rem); }

/* Мобілка: рівний щільний ритм — vh-кламп на телефонах дає завеликі дірки
   перед тайтлами секцій та актів */
@media (max-width: 767px) {
  .section { padding-block: 1.5rem; }
  .section > * + * { margin-top: 1.8rem; }
  .act > * + * { margin-top: 1.6rem; }
  .act + .act { margin-top: 3.2rem; }
  .h2 { margin-bottom: 1.2rem; }
}

/* ---------- Акти: вертикальний потік ---------- */

.acts > * + * { margin-top: clamp(2rem, 5vh, 3.2rem); }

.act__info {
  width: min(720px, 92vw);
  margin-inline: auto;
}

.act__info > * + * { margin-top: 1.3rem; }

.act__info .h3 { margin-bottom: 0; }

/* Відео тієї ж ширини, що й текстовий блок (прохання Стаса) */
.act__media {
  width: min(720px, 92vw);
  margin-inline: auto;
}

/* ЦУ: чотири лайви як один блок — компактна сітка 2×2 на всіх ширинах */
.act__media--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4vw, 14px);
}

/* min-width: 0 — інакше довгий тайтл вікна розпирає колонку сітки */
.act__media--grid .player { min-width: 0; }

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 clamp(1.4rem, 3.5vh, 2.2rem);
  color: var(--paper);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 1.1rem;
  color: var(--paper);
  /* як .h2: білий тайтл — чорна жорстка тінь (в em, масштабується з кеглем) */
}

/* Текст іде просто на мальовці, білим — без прямокутних підложок
   (вимога Стаса: «приборкати стилістично сторінку») */
.prose { color: var(--paper); }

.prose p {
  margin: 0 0 1.2em;
  font-size: clamp(1.04rem, 1.9vw, 1.18rem);
}
.prose p:last-child { margin-bottom: 0; }

.prose--lead p {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.6;
  font-weight: 550;
}

/* Жанровий рядок над біо — лише мобілка
   (на десктопі жанри лежать оверлеєм у hero) */
.prose p.about__genres {
  display: none;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.9;
}

@media (max-width: 767px) {
  .prose p.about__genres { display: block; }
  .hero__genres { display: none; }
}

.sep { color: var(--red); font-weight: 700; padding-inline: .16em; }

/* ---------- Зображення ---------- */

/* Тільки inline-центрування: блочні відступи задає .section > * + *
   (margin: 0 тут перебивав би секційний відступ — правило нижче у файлі) */
.figure {
  margin-inline: auto;
}

.figure img {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 8px;
}

.figure--wide { width: min(940px, 94vw); }

/* ---------- Вікна (XP) ---------- */

/* Як у Luna: верхні кути скруглені, нижні прямі;
   overflow обрізає титлбар по радіусу */
.window {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.window__bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .6rem;
  background: linear-gradient(180deg, var(--xp-blue-2) 0%, var(--xp-blue) 22%, #1666E0 60%, var(--xp-blue) 100%);
  border-bottom: 2px solid var(--ink);
}

.window__sq {
  width: 12px;
  height: 12px;
  background: var(--red);
  flex: none;
}

.window__title {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.window__btns {
  display: flex;
  gap: 5px;
  flex: none;
}

.window__btns i {
  display: grid;
  place-items: center;
  width: 25px;
  height: 22px;
  font: 700 13px/1 var(--font-body);
  font-style: normal;
  color: #4a4a4a;
  background: linear-gradient(#fefefe, #d6d3ce);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 3px;
}

.window__btns i:nth-child(1)::after { content: "–"; }
.window__btns i:nth-child(2)::after { content: "□"; }

.window__btns .window__x {
  color: #fff;
  background: linear-gradient(#F2846C, var(--red));
}
.window__btns .window__x::after { content: "✕"; }

/* Кнопки вікон «працюють»: клік — і вікно вередує (main.js) */
.window__btns i { cursor: pointer; }

/* Істерика вікна: стартовий глітч із RGB-розщепленням, хаотичне
   тремтіння із загасанням амплітуди і мʼяке вмощування на місце */
.window.is-tantrum {
  animation: window-tantrum 1s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes window-tantrum {
  0%  { transform: none; filter: none; }
  4%  { transform: translate(-12px, 4px) rotate(-1.8deg) skewX(-4deg);
        /* RGB-розщеплення — глітч-ефект істерики, не оформлювальна тінь */
        filter: drop-shadow(4px 0 0 rgba(224, 42, 34, .85)) drop-shadow(-4px 0 0 rgba(11, 80, 208, .85)); }
  9%  { transform: translate(11px, -5px) rotate(1.5deg) skewX(3deg);
        filter: drop-shadow(-3px 0 0 rgba(224, 42, 34, .7)) drop-shadow(3px 0 0 rgba(11, 80, 208, .7)); }
  15% { transform: translate(-9px, -3px) rotate(-1.2deg);
        filter: drop-shadow(2px 0 0 rgba(224, 42, 34, .5)) drop-shadow(-2px 0 0 rgba(11, 80, 208, .5)); }
  22% { transform: translate(8px, 4px) rotate(1deg) skewX(-2deg); filter: none; }
  30% { transform: translate(-6px, -2px) rotate(-.8deg); }
  39% { transform: translate(5px, 2px) rotate(.6deg); }
  49% { transform: translate(-4px, 1px) rotate(-.45deg); }
  60% { transform: translate(3px, -1px) rotate(.3deg); }
  72% { transform: translate(-2px, 1px) rotate(-.2deg); }
  84% { transform: translate(1px, 0) rotate(.1deg); }
  100% { transform: none; filter: none; }
}

.window__body { padding: clamp(1.2rem, 3vw, 1.8rem); }

/* ---------- Плеєри (відео у вікнах) ---------- */

.player .window__media { position: relative; }

/* min-width: 0 — у грід/флекс-елементів дефолтний auto-мінімум не дає
   стиснутися менше за min-content, і довгий тайтл вікна робить колонки
   різної ширини. Без цього відео в сітках «їдуть» по розміру. */
.player { min-width: 0; }

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 92vw), 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.4rem);
  align-items: start;
}

/* 6 кліпів — рівна сітка 3×2 на десктопі */
@media (min-width: 1000px) {
  .videos { grid-template-columns: repeat(3, 1fr); }
}

.video__facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink);
  cursor: pointer;
}

.video__facade img { width: 100%; }

.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  background: var(--red);
  border-radius: 8px;
  transition: transform .2s ease;
}

.video__play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
  translate: 3px 0;
}

.video__facade:hover .video__play { transform: scale(1.1) rotate(2deg); }

/* Мобілка: кнопка Play компактніша */
@media (max-width: 767px) {
  .video__play { width: 54px; height: 54px; }
  .video__play::after { border-width: 10px 0 10px 17px; }
}

.video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  text-align: center;
  padding: .68em 1.4em;
  border: 2px solid var(--ink);
  border-radius: 3px; /* як у кнопок Luna */
  transition: background .18s ease;
}

.btn:hover {
  color: var(--ink);
  background: var(--yellow);
}

.btn:active { transform: translate(1px, 1px); }

.btn--ok {
  min-width: 120px;
  font-size: .74rem;
  padding: .55em 1.2em;
}

/* ---------- Галерея: «відкрита папка» з фото + лайтбокс ---------- */

.folder__bar-icon {
  flex: none;
  display: block;
}

.folder__bar-icon svg {
  display: block;
  width: 22px;
  height: auto;
}

.folder__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: clamp(.8rem, 2vw, 1.2rem);
}

@media (max-width: 900px) { .folder__grid { grid-template-columns: repeat(4, 1fr); } }

/* Мобілка: фото в папці — горизонтальний свайп усередині вікна.
   scroll-padding — інакше снап притискає перше фото до краю
   і «зʼїдає» лівий падінг контейнера */
@media (max-width: 767px) {
  .folder__grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px;
    scroll-padding-left: clamp(.8rem, 2vw, 1.2rem);
    scrollbar-width: none;
  }
  .folder__grid::-webkit-scrollbar { display: none; }

  .folder__thumb {
    flex: none;
    width: 62vw;
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* Мініатюра — «файл» у провіднику: квадратний кроп, клік відкриває перегляд */
.folder__thumb {
  display: block;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  cursor: zoom-in;
  overflow: hidden;
}

.folder__thumb picture,
.folder__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .25s ease;
}

.folder__thumb:hover img { transform: scale(1.05); }

/* ---------- Лайтбокс (без бібліотек) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 8, 6, .93);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[hidden] { display: none; }

.lightbox__stage img {
  display: block;
  max-width: 90vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  border: 2px solid var(--paper);
  border-radius: 6px;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font: 700 18px/1 var(--font-mono);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}

.lightbox__btn:hover { background: var(--yellow); }

.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev  { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 12px; top: 50%; transform: translateY(-50%); }

.lightbox__count {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .12em;
  color: var(--paper);
}

@media (max-width: 640px) {
  .lightbox__btn { width: 40px; height: 40px; }
  .lightbox__stage img { max-width: 96vw; max-height: 78vh; }
}

/* ---------- Релізи ---------- */

.releases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 86vw), 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: stretch;
}

.release {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 1rem;
}

/* Мобілка: релізи — горизонтальний свайп-слайдер зі снепом;
   картка вужча за екран, наступна визирає праворуч */
@media (max-width: 767px) {
  .releases {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: .9rem;
    /* виліт за межі .wrap на всю ширину вьюпорта — картки ріжуться
       краєм екрана, як у галереї, а не рамкою контейнера */
    margin-inline: calc(50% - 50vw);
    padding: 4px 4vw 12px;
    scroll-padding-inline: 4vw;
    scrollbar-width: none;
  }
  .releases::-webkit-scrollbar { display: none; }

  .release {
    flex: none;
    width: 76vw;
    min-width: 0;
    scroll-snap-align: center;
  }
}

.release__cover img {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
}

.release__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  margin: .9rem 0 .15rem;
}

.release__kind {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.release__links {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

/* ---------- Дискографія ---------- */

.singles { margin-top: clamp(2.6rem, 6vh, 4rem); }

/* Заголовок відділяє великі релізи від повної дискографії */
.singles__heading {
  margin: 0 0 clamp(1rem, 2.5vh, 1.6rem);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Матриця 6 в ряд дрібними іконками: глядач має побачити «розсип релізів»,
   а не розглядати кожну обкладинку. Рядки по 3 зберігають триптихи. */
.singles__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.4rem, 1vw, .8rem);
}

@media (max-width: 899px) { .singles__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .singles__grid { grid-template-columns: repeat(3, 1fr); } }

.singles__item {
  margin: 0;
  min-width: 0;
  transition: transform .2s ease;
}

.singles__item img {
  border: 2px solid var(--ink);
  border-radius: 5px;
}

.singles__item:hover { transform: translate(-2px, -2px) rotate(-1deg); }

/* Лінки на стримінги — кнопки, а не плитка в сітці */
.singles__links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: clamp(1.2rem, 3vh, 1.8rem);
}

/* ---------- Міжнародні виступи: простий текстовий список ---------- */

.intl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--paper);
}

.intl-list li {
  display: flex;
  align-items: center;
  gap: .7em;
  font-size: clamp(1.15rem, 2.2vw, 1.38rem);
  line-height: 1.5;
  padding: .34em 0;
}

/* Прапор — на білій скругленій підкладці, як іконка у списку */
.intl-list__flag {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 1.65em;
  font-size: .92em;
  line-height: 1;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
}

.intl-list__label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(.8rem, 1.5vw, .92rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 1.4rem 0 .6rem;
}

@media (max-width: 767px) {
  #international .h2 { text-align: center; }
}

/* ---------- Склад ---------- */

.band {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.band__art img {
  width: 100%;
}

@media (max-width: 767px) {
  .band { grid-template-columns: 1fr; }
  .band__art { max-width: 230px; margin-inline: auto; }
}

/* ---------- Лінки / контакти ---------- */

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 2rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--ink);
  text-decoration: none;
  padding: .5em 1.1em;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.pill svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill:hover {
  background: var(--xp-blue);
  color: #fff;
}

.pill--sm {
  font-size: .7rem;
  padding: .35em .85em;
}

.riders {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2.6rem;
}

.contact {
  max-width: 620px;
  margin-left: auto; /* вікно контактів — до правого краю секції */
}

.contact__who {
  margin: 0 0 .7rem;
  font-size: 1.08rem;
}

.contact__who strong { font-weight: 700; }

.contact__lines {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .95rem;
}

/* ---------- Футер ---------- */

.footer {
  padding: 2.5rem 0 3rem;
  color: var(--ink);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center;
}

.footer p { margin: 0; }

.footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .1em;
}

.footer__dev {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .04em;
}

.footer__dev a { font-weight: 600; }

/* ---------- Пасхалка: «система падає» шлейфом XP-помилок ----------
   10 швидких кліків по фігурі в hero (main.js, десктоп) */

.xp-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
}

/* Поки «система падає», виділення тексту на сторінці заборонене */
html.is-glitching * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Червоний 3D-куб — чистий CSS 3D, без бібліотек:
   зовнішній шар (__aim) слухається мишки (main.js),
   внутрішній (__spin) безкінечно перекидається сам */
.xp-cube {
  position: absolute;
  left: 60%;
  top: 22%;
  width: 190px;
  height: 190px;
  perspective: 900px;
  pointer-events: none;
}

.xp-cube__aim,
.xp-cube__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.xp-cube__spin { animation: cube-tumble 18s linear infinite; }

@keyframes cube-tumble {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(720deg); }
}

.xp-cube__face {
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--ink);
}

/* грані з різною яскравістю червоного — обʼєм читається без освітлення */
.xp-cube__face:nth-child(1) { transform: rotateY(0deg)   translateZ(95px); background: #F0392E; }
.xp-cube__face:nth-child(2) { transform: rotateY(90deg)  translateZ(95px); background: #D62A20; }
.xp-cube__face:nth-child(3) { transform: rotateY(180deg) translateZ(95px); background: #C4231A; }
.xp-cube__face:nth-child(4) { transform: rotateY(270deg) translateZ(95px); background: #D62A20; }
.xp-cube__face:nth-child(5) { transform: rotateX(90deg)  translateZ(95px); background: #FF4A3D; }
.xp-cube__face:nth-child(6) { transform: rotateX(-90deg) translateZ(95px); background: #A81D15; }

.xp-err {
  position: absolute;
  width: 340px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.xp-err__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem .55rem;
  background: linear-gradient(180deg, var(--xp-blue-2), var(--xp-blue));
  border-bottom: 2px solid var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
}

.xp-err__dot {
  width: 10px;
  height: 10px;
  background: var(--red);
  flex: none;
}

.xp-err__bar i {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 17px;
  height: 15px;
  font: 700 9px/1 var(--font-body);
  font-style: normal;
  color: #fff;
  background: linear-gradient(#F2846C, var(--red));
  border-radius: 2px;
}

.xp-err__body {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem .9rem;
  font-family: var(--font-mono);
  font-size: .88rem;
  text-align: left;
}

.xp-err__body b {
  flex: none;
  width: 32px;
  height: 32px;
  background: var(--red);
  color: #fff;
  font: 800 18px/32px var(--font-display);
  text-align: center;
  border-radius: 5px;
}

.xp-err--final {
  left: auto;
  top: auto;
  right: 22px;
  bottom: 26px;
  width: min(430px, 92vw);
}

.xp-err--final .xp-err__body {
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.5;
  align-items: flex-start;
  padding: .9rem .9rem .3rem;
}

.xp-err__actions {
  display: flex;
  justify-content: center;
  padding: .5rem .9rem .9rem;
}

.xp-err__actions .btn { cursor: pointer; }

/* ---------- Анімаційні стани (JS додає рух, CSS — кінцевий стан) ---------- */

.reveal, .reveal-img, .reveal-card, .reveal-quote { opacity: 1; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Мобільні уточнення ---------- */

@media (max-width: 640px) {





  .window__quote { padding: 1.1rem 1.1rem .4rem; }

  .dialog__icon { width: 36px; height: 36px; font-size: 20px; line-height: 36px; }

  .window__btns i { width: 21px; height: 19px; font-size: 11px; }
}