/* ═══════════════════════════════════════════════════════════
   Б.О. — Богдан Орловський · ораторська майстерність
   HERO → Видих → Глава I «Зал» → Безкоштовний урок → Підвал
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Токени ─────────────────────────────────────────── */
:root {
  /* палітра */
  --ink:        #14110E;
  --ink-deep:   #0F0D0B;
  --cream:      #F6F3EC;
  --sand:       #EFEBE1;
  --paper:      #FBF9F4;
  --gold:       #B8924F;
  --gold-lit:   #C9A867;
  --gold-deep:  #8A6A2F;   /* для дрібного тексту на світлому — контраст 4.6:1 */

  /* помаранчевий узятий піпеткою з обкладинки книги — той самий,
     що й у крої мегафона, тому шва між ними не видно */
  --book-orange: #F57E20;
  --book-ink:    #2A1403;

  /* ритм */
  --gutter:     clamp(24px, 6vw, 112px);
  --stack:      clamp(84px, 13vh, 164px);

  /* тінь для тексту поверх відео */
  --lift:       0 2px 26px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);

  /* чорнило шапки — перемикається JS-ом */
  --nav-ink:    #FBF9F4;
  --nav-dim:    rgba(251,249,244,.66);
  --nav-lift:   var(--lift);

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ── 2. Скидання ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, dl, dd, dt, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

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

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 5px;
}


/* ── 3. Завіса ─────────────────────────────────────────── */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity .9s var(--ease) .25s, visibility 0s linear 1.15s;
}
.curtain.is-lifted { opacity: 0; visibility: hidden; }

.curtain__mark { display: grid; justify-items: center; gap: 18px; }

.curtain__initials {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: .14em;
  color: var(--paper);
  opacity: 0;
  animation: riseIn 1s var(--ease-out) .1s forwards;
}
.curtain__rule {
  width: 1px; height: 46px;
  background: var(--gold);
  transform: scaleY(0); transform-origin: top;
  animation: drawDown .8s var(--ease) .5s forwards;
}
.curtain__sub {
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251,249,244,.5);
  opacity: 0;
  animation: riseIn .9s var(--ease-out) .75s forwards;
}

@keyframes riseIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drawDown{ to   { transform: scaleY(1); } }


/* ── 4. Шапка ──────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(20px, 3.2vh, 36px) var(--gutter);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.nav__initials {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(21px, 2vw, 27px);
  letter-spacing: .13em;
  line-height: 1;
  color: var(--nav-ink);
  text-shadow: var(--nav-lift);
  transition: color .5s var(--ease);
}
.nav__tagline {
  display: block;
  margin-top: 7px;
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nav-dim);
  text-shadow: var(--nav-lift);
  transition: color .5s var(--ease);
}

.nav__right { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }

.nav__lang {
  font-size: 11px;
  letter-spacing: .24em;
  font-weight: 600;
  color: var(--nav-dim);
  text-shadow: var(--nav-lift);
  transition: color .5s var(--ease);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nav-ink);
  text-shadow: var(--nav-lift);
  transition: color .5s var(--ease);
}
.nav__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  transition: transform .4s var(--ease);
}
.nav__cta:hover .nav__dot { transform: scale(1.8); }


/* ── 5. HERO: закріплена сцена ─────────────────────────── */
.hero { position: relative; z-index: 1; height: 540vh; }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  background: var(--ink);
}
.panel[data-panel="0"] { transform: translate3d(0, 0, 0); }
.panel[data-panel="0"] { z-index: 0; }
.panel[data-panel="1"] { z-index: 1; }
.panel[data-panel="2"] { z-index: 2; }
.panel[data-panel="3"] { z-index: 3; }
.panel[data-panel="4"] { z-index: 4; background: var(--cream); }

.panel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
}
.panel__video.is-live {
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(0, -1.2%, 0); }
}

.panel__scrim {
  position: absolute;
  inset: 0;
  background:
    /* горизонтальний — під текстовий блок зліва */
    linear-gradient(95deg, rgba(8,6,4,.92) 0%, rgba(8,6,4,.55) 30%, rgba(8,6,4,.07) 57%, rgba(8,6,4,0) 73%),
    /* низ — під лічильник і підказку */
    linear-gradient(0deg,  rgba(8,6,4,.62) 0%, rgba(8,6,4,0) 42%),
    /* верх — щоб шапка читалась на світлих кадрах */
    linear-gradient(180deg, rgba(8,6,4,.5) 0%, rgba(8,6,4,.16) 12%, rgba(8,6,4,0) 24%);
}

.panel__grain {
  position: absolute;
  inset: -60px;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: shimmer 1.1s steps(3) infinite;
}
@keyframes shimmer {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-14px, 9px, 0); }
  66%  { transform: translate3d(11px, -12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.panel__content {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(96px, 15vh, 150px);
  max-width: min(660px, 74vw);
  color: var(--paper);
  opacity: 0;
  will-change: opacity, transform;
}
.panel[data-panel="0"] .panel__content { opacity: 1; }


/* ── 6. Типографіка ────────────────────────────────────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: clamp(11px, .82vw, 13px);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  text-shadow: var(--lift);
}
.eyebrow__rule {
  width: 34px; height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--ink { color: var(--gold-deep); text-shadow: none; }

.display {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -.005em;
  text-shadow: var(--lift);
}
.display em { font-style: italic; color: var(--gold); }
.display--h2 { font-size: clamp(40px, 5.6vw, 84px); }

.hairline {
  display: block;
  width: 52px; height: 1px;
  margin-top: 26px;
  background: rgba(251,249,244,.4);
}

.lede {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.62;
  font-weight: 300;
  color: rgba(251,249,244,.9);
  text-shadow: var(--lift);
}


/* ── 7. Панель 5 · Видих ───────────────────────────────── */
.breath {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(88px, 14vh, 150px) var(--gutter) clamp(56px, 9vh, 96px);
  opacity: 0;
  will-change: opacity, transform;
}
.breath::before,
.breath::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  width: clamp(200px, 42vw, 620px);
  height: 1px;
  background: rgba(20,17,14,.11);
}
.breath::before { top: clamp(104px, 17vh, 156px); }
.breath::after  { bottom: clamp(44px, 7vh, 80px); }

/* монограма-привид тримає праву половину екрана */
.breath__ghost {
  position: absolute;
  right: -.05em;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(110px, 17vw, 290px);
  line-height: .78;
  letter-spacing: .02em;
  color: var(--ink);
  opacity: .055;
  pointer-events: none;
  user-select: none;
}

.display--breath {
  max-width: 20ch;
  font-size: clamp(34px, 4.8vw, 74px);
  line-height: 1.08;
  color: var(--ink);
  text-shadow: none;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4.4vw, 72px);
  margin-top: clamp(38px, 6vh, 72px);
}
.facts__item { min-width: 0; }

.facts__num {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1;
  color: var(--ink);
}
.facts__num span { color: var(--gold); }
.facts__num--word {
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  color: var(--gold-deep);
}

.facts__label {
  margin-top: 9px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(20,17,14,.5);
}


/* ── 8. HUD ────────────────────────────────────────────── */
.hud {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  will-change: opacity;
}
.hud > * { pointer-events: auto; }

.hud__dots {
  position: absolute;
  right: clamp(18px, 2.4vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.hud__dots button {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nav-ink);
  opacity: .42;
  /* без ореолу крапки зникають на світлих кадрах */
  box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 1px 7px rgba(0,0,0,.5);
  transition: opacity .45s var(--ease), transform .45s var(--ease), background .5s var(--ease);
}
.hud__dots button:hover { opacity: .8; }
.hud__dots li.is-on button { opacity: 1; transform: scale(1.55); }

/* на світлій панелі ореол міняється на м'яку тінь */
html[data-ink="light"] .hud__dots button {
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 1px 5px rgba(20,17,14,.2);
}

.hud__counter {
  position: absolute;
  right: clamp(18px, 2.4vw, 40px);
  bottom: clamp(28px, 5vh, 54px);
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--nav-dim);
  text-shadow: var(--nav-lift);
}
.hud__counter span { color: var(--nav-ink); }
.hud__counter i { font-style: normal; opacity: .5; }

.hud__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 44px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nav-dim);
  text-shadow: var(--nav-lift);
}
.hud__line {
  width: 1px; height: 44px;
  background: var(--nav-ink);
  opacity: .55;
  animation: sweep 2.4s ease-in-out infinite;
}
@keyframes sweep {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* ── 9. Глава I · Зал ──────────────────────────────────── */
.hall {
  position: relative;
  z-index: 2;
  /* верхній відступ тримає заголовок нижче фіксованої шапки */
  padding: clamp(108px, 13vh, 156px) 0 clamp(48px, 7vh, 84px);
  background: var(--cream);
}

.hall__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(28px, 5vw, 90px);
  padding: 0 var(--gutter) clamp(44px, 6vh, 76px);
  max-width: 1600px;
}
.hall .display--h2 { color: var(--ink); text-shadow: none; font-size: clamp(34px, 4.4vw, 64px); }

.hall__lede {
  max-width: 40ch;
  text-align: right;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.68;
  color: rgba(20,17,14,.62);
}

/* лічильник і стрілки живуть під стрічкою — щоб не їхали з екрана разом із заголовком */
.hall__foot {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(30px, 4.5vh, 54px) var(--gutter) 0;
}
.hall__controls { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); flex: none; }

.hall__counter {
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 600;
  color: rgba(20,17,14,.4);
  font-variant-numeric: tabular-nums;
}
.hall__counter span { color: var(--ink); }
.hall__counter i { font-style: normal; opacity: .5; margin: 0 2px; }

.hall__arrows { display: flex; gap: 10px; }
.arrow {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20,17,14,.2);
  border-radius: 50%;
  font-size: 15px;
  color: var(--ink);
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), opacity .3s var(--ease);
}
.arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.arrow[disabled] { opacity: .25; pointer-events: none; }

/* — відео-знайомство: вертикальний кадр + слово праворуч —
   Відео знімалося на телефон (9:16), тому на весь екран його не розтягнути:
   блок звужений і центрований, кадр тримає колонку зліва, текст із кнопкою —
   справа. Ширина кадру обмежена clamp'ом, інакше 9:16 виростає вище екрана. */
.announce {
  display: grid;
  grid-template-columns: clamp(280px, 32vw, 452px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 88px);
  max-width: 1240px;
  margin: 0 auto clamp(36px, 5.5vh, 68px);
  padding: 0 var(--gutter);
}

.announce__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.announce__cover,
.announce__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.announce__cover { transition: transform 1.2s var(--ease-out); }
.announce__frame:hover .announce__cover { transform: scale(1.03); }
.announce__video { opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }

/* тільки віньєтка: нижню затемнену смугу тепер малює сам підпис */
.announce__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 62% at 50% 46%, rgba(8,6,4,0) 0%, rgba(8,6,4,.22) 100%);
  transition: opacity .5s var(--ease);
}
.announce__frame.is-live .announce__scrim { opacity: .4; }

/* бейдж «Дивитись» зверху зліва — як у книги, щоб не тіснитися з підписом */
.announce__cta {
  position: absolute;
  left: clamp(14px, 1.4vw, 18px);
  top: clamp(14px, 1.4vw, 18px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 22px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background: rgba(251,249,244,.94);
  border-radius: 100px;
  transition: transform .4s var(--ease), background .4s var(--ease), opacity .4s var(--ease);
}
.announce__cta i { font-style: normal; font-size: 10px; }
.announce__frame:hover .announce__cta { transform: scale(1.05); background: #fff; }
.announce__frame.is-live .announce__cta { opacity: 0; transform: translateY(8px); }

.announce__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 46px 18px 15px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: linear-gradient(0deg, rgba(8,6,4,.68) 0%, rgba(8,6,4,0) 100%);
  transition: opacity .4s var(--ease);
}
.announce__frame.is-live .announce__label { opacity: 0; }

/* — колонка зі словом і кнопкою — */
.announce__copy { align-self: center; }

.announce__quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(25px, 2.4vw, 38px);
  line-height: 1.16;
  color: var(--ink);
}
.announce__quote em { font-style: italic; color: var(--gold-deep); }

.announce__list {
  margin: clamp(26px, 3.4vh, 38px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(20,17,14,.16);
}
.announce__list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(13px, 1.7vh, 18px) 0;
  border-bottom: 1px solid rgba(20,17,14,.16);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: rgba(20,17,14,.66);
}
.announce__list li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-3px);
}

.announce .btn { margin-top: clamp(26px, 3.6vh, 38px); }


/* — стрічка — */
.reel {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.8vw, 32px);
  padding: 0 var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.reel::-webkit-scrollbar { display: none; }
.reel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.reel.is-dragging * { pointer-events: none; }
.reel:focus-visible { outline-offset: -4px; }

.reel__item,
.reel__note {
  flex: none;
  scroll-snap-align: center;
  height: min(66vh, 620px);
}

.reel__item {
  position: relative;
  margin: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.reel__item img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  display: block;
  pointer-events: none;              /* фото — лише поверхня для скролу */
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 1.1s var(--ease-out);
}
.reel__item:hover img { transform: scale(1.028); }

/* кнопка розгортання — єдиний спосіб відкрити фото (не конфліктує зі скролом) */
.reel__zoom,
.off__zoom {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--paper);
  background: rgba(8,6,4,.4);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.reel__item:hover .reel__zoom,
.off__item:hover .off__zoom { opacity: 1; transform: scale(1); }
.reel__zoom:hover,
.off__zoom:hover { background: var(--gold); color: var(--ink); }

.reel__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 20px 16px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: linear-gradient(0deg, rgba(8,6,4,.62) 0%, rgba(8,6,4,0) 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.reel__item:hover figcaption { opacity: 1; transform: none; }

/* — текстова зупинка всередині стрічки — */
.reel__note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  width: clamp(250px, 27vw, 400px);
  padding: 0 clamp(20px, 2.4vw, 40px);
  border-top: 1px solid rgba(20,17,14,.16);
  border-bottom: 1px solid rgba(20,17,14,.16);
}
.reel__quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(24px, 2.3vw, 36px);
  line-height: 1.18;
  color: var(--ink);
}
.reel__sub {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(20,17,14,.5);
}

/* — смуга прогресу — */
.hall__rail {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: rgba(20,17,14,.12);
}
.hall__rail span {
  position: absolute;
  inset: -1px auto;
  height: 3px;
  width: 12%;
  background: var(--gold);
  transform-origin: left;
  transition: left .25s linear, width .25s linear;
  left: 0;
}


/* ── 9b. Лайтбокс ──────────────────────────────────────── */
.lb {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(48px, 8vh, 90px) clamp(52px, 9vw, 130px);
  background: rgba(11,9,7,.965);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }

.lb__stage { margin: 0; display: grid; gap: 18px; justify-items: center; min-height: 0; }
.lb__stage img {
  max-width: 100%;
  max-height: calc(100vh - clamp(150px, 22vh, 230px));
  object-fit: contain;
}
.lb__stage figcaption {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251,249,244,.62);
}
.lb__count { color: rgba(251,249,244,.38); font-variant-numeric: tabular-nums; }
.lb__count b { color: var(--gold); font-weight: 600; }

.lb__close,
.lb__nav {
  position: absolute;
  display: grid;
  place-items: center;
  color: rgba(251,249,244,.7);
  transition: color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.lb__close {
  top: clamp(18px, 3vh, 34px);
  right: clamp(20px, 3vw, 44px);
  width: 44px; height: 44px;
  font-size: 17px;
}
.lb__close:hover { color: var(--gold); transform: rotate(90deg); }

.lb__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  border: 1px solid rgba(251,249,244,.22);
  border-radius: 50%;
  font-size: 16px;
}
.lb__nav:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lb__nav--prev { left: clamp(12px, 2.4vw, 40px); }
.lb__nav--next { right: clamp(12px, 2.4vw, 40px); }


/* ── 9c. Глава II · Книга ──────────────────────────────── */
.book { position: relative; z-index: 2; background: var(--ink); }

/* — А. Помаранчеве поле — */
.book__flag {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(112px, 15vh, 170px) var(--gutter) clamp(72px, 10vh, 120px);
  background: var(--book-orange);
  overflow: hidden;
}

.book__mega {
  position: absolute;
  right: 3%;
  bottom: 6%;
  /* цілком у кадрі: якщо зрізати розтруб, лишається невпізнавана ребриста
     деталь — мегафон читається тільки повністю */
  width: min(44%, 620px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ширину міряємо у відсотках, а не в ch: тут дрібний базовий кегль,
   і 17ch дали б смужку в 130px, у яку заголовок не влазить */
.book__flagText { position: relative; z-index: 1; max-width: min(60%, 780px); }

.eyebrow--orange { color: var(--book-ink); text-shadow: none; opacity: .72; }

/* білий заголовок повторює саму обкладинку — це цитата, не текст для читання;
   усе, що треба справді прочитати, нижче йде темним чорнилом */
.book__title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: #FFF;
}
.book__title em { font-style: italic; }

.book__sub {
  margin-top: clamp(24px, 3.4vh, 40px);
  max-width: 30ch;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--book-ink);
}
.book__author {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--book-ink);
  opacity: .68;
}

/* — Б. Темний розворот — */
.book__spread {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(84px, 12vh, 150px) var(--gutter) clamp(88px, 13vh, 165px);
  background: var(--ink);
}

.book__shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.book__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.book__shot:hover img { transform: scale(1.035); }

.book__shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 18px 15px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: linear-gradient(0deg, rgba(8,6,4,.68) 0%, rgba(8,6,4,0) 100%);
}

.book__shot--shelf { grid-column: 1 / span 5; aspect-ratio: 3 / 4; }

/* книжкове фото з відео: постер лишається базою, відео випливає зверху */
.book__shot--video { cursor: pointer; }
.book__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.book__shot--video.is-live .book__video { opacity: 1; }

/* специфічність через батька — інакше .rev__badge (нижче у файлі) нав'язує
   свій bottom:14px, і бейдж, маючи і top, і bottom, тягнеться на всю висоту */
.book__shot--video .book__badge {
  position: absolute;
  left: 16px;
  top: 16px;
  bottom: auto;
  z-index: 3;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.book__shot--video.is-live .book__badge { opacity: 0; transform: translateY(8px); }
/* поки грає відео — ховаємо статичний підпис «Про книгу» */
.book__shot--video figcaption { z-index: 2; transition: opacity .4s var(--ease); }
.book__shot--video.is-live figcaption { opacity: 0; }
/* пропорція — рівно як у файлу обкладинки: при object-fit:cover будь-яка
   інша зрізала б автора зверху або мегафон знизу */
.book__shot--cover {
  grid-column: 6 / span 3;
  aspect-ratio: 1286 / 1800;
  margin-top: clamp(40px, 14vh, 150px);   /* збиває рядок — інакше два фото стоять як у каталозі */
}

.book__copy {
  grid-column: 9 / span 4;
  align-self: center;
}

/* колонка з текстом вужчає швидше за фото — нижче 1150px вона вже
   не тримає рядок, тому розворот переходить у два ряди */
@media (max-width: 1150px) {
  .book__spread { grid-template-columns: repeat(6, 1fr); }
  .book__shot--shelf { grid-column: 1 / span 4; }
  .book__shot--cover { grid-column: 5 / span 2; margin-top: clamp(30px, 10vh, 90px); }
  .book__copy { grid-column: 1 / span 6; margin-top: clamp(34px, 5vh, 60px); }
  .book .display--h2 { font-size: clamp(30px, 3.6vw, 46px); }
  .book__text { max-width: 52ch; }
}
.book__note {
  margin-bottom: 18px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 26px);
  color: var(--book-orange);
}
.book .display--h2 {
  font-size: clamp(28px, 2.9vw, 44px);
  color: var(--paper);
  text-shadow: none;
}
.book .display--h2 em { color: var(--book-orange); }

.book__text {
  margin-top: 24px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.72;
  color: rgba(251,249,244,.66);
}

.btn--orange {
  margin-top: 32px;
  padding: 17px 30px;
  background: none;
  border: 1px solid var(--book-orange);
  color: var(--book-orange);
}
.btn--orange::before { background: var(--book-orange); }
.btn--orange:hover { color: var(--ink); }


/* ── 9d. Глава III · Голос назовні ─────────────────────── */
.media {
  position: relative;
  z-index: 2;
  padding: clamp(104px, 13vh, 156px) var(--gutter) clamp(88px, 12vh, 150px);
  background: var(--cream);
}

.media__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(28px, 5vw, 90px);
  margin-bottom: clamp(48px, 7vh, 90px);
}
.media .display--h2 { color: var(--ink); text-shadow: none; font-size: clamp(34px, 4.4vw, 64px); }
.media__lede {
  max-width: 38ch;
  text-align: right;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.68;
  color: rgba(20,17,14,.62);
}

.media__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.6vw, 46px) clamp(18px, 2.2vw, 40px);
  align-items: start;
}

.media__item { margin: 0; }

/* «слейт» — технічний підпис над кадром, як на знімальному майданчику */
.slate {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(20,17,14,.5);
}
.slate b { color: var(--gold-deep); font-weight: 700; }
.slate i { flex: 1; height: 1px; background: rgba(20,17,14,.16); }

.media__frame {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.media__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.media__item:hover .media__frame img { transform: scale(1.035); }

.media__item--air   { grid-column: 1 / span 7; }
.media__item--air   .media__frame { aspect-ratio: 1700 / 785; }

.media__copy {
  grid-column: 9 / span 4;
  align-self: end;
  padding-bottom: 6px;
}
.media__text {
  max-width: 34ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.75;
  color: rgba(20,17,14,.6);
}

.media__item--shoot { grid-column: 1 / span 4; }
.media__item--shoot .media__frame { aspect-ratio: 3 / 4; }

.media__item--stage { grid-column: 6 / span 7; margin-top: clamp(30px, 7vh, 84px); }
.media__item--stage .media__frame { aspect-ratio: 3 / 2; }

/* — велике YouTube-відео на всю ширину блоку — */
.ytwrap { margin-top: clamp(44px, 7vh, 96px); }
.slate--wide { margin-bottom: 18px; }

/* — лінк-виноска секції: «Усі ефіри — на YouTube-каналі» тощо — */
.seclink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .04em;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 146, 79, .35);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.seclink:hover { color: var(--gold); border-color: var(--gold); }
.seclink i { font-style: normal; font-size: .85em; }
/* темні секції (Поза сценою) — світле золото */
.off .seclink { margin-top: 0; color: var(--gold-lit); border-color: rgba(201, 168, 103, .35); }
.off .seclink:hover { color: var(--paper); border-color: var(--paper); }

.yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.yt__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.yt:hover .yt__cover { transform: scale(1.03); }

.yt__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(8,6,4,.12) 0%, rgba(8,6,4,.42) 100%);
  transition: background .5s var(--ease);
}
.yt:hover .yt__scrim { background: radial-gradient(60% 60% at 50% 50%, rgba(8,6,4,.06) 0%, rgba(8,6,4,.3) 100%); }

.yt__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background: rgba(251,249,244,.94);
  border-radius: 100px;
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.yt__play i { font-style: normal; font-size: 11px; }
.yt:hover .yt__play { transform: translate(-50%, -50%) scale(1.05); background: #fff; }

/* коли завантажили плеєр — фасад ховаємо, iframe заповнює блок */
.yt.is-playing { cursor: default; background: #000; }
.yt.is-playing .yt__cover,
.yt.is-playing .yt__scrim,
.yt.is-playing .yt__play { opacity: 0; pointer-events: none; }
.yt__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}


/* ── 9e. Глава IV · Відгуки ────────────────────────────── */
.revs {
  position: relative;
  z-index: 2;
  padding: clamp(88px, 12vh, 150px) 0 clamp(64px, 9vh, 104px);
  background: var(--ink);
  color: var(--paper);
}

.revs__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(28px, 5vw, 90px);
  padding: 0 var(--gutter) clamp(44px, 6vh, 76px);
}
.revs .display--h2 { color: var(--paper); text-shadow: none; font-size: clamp(34px, 4.4vw, 64px); }
.revs__lede {
  max-width: 34ch;
  text-align: right;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.68;
  color: rgba(251,249,244,.6);
}

.revs__row {
  display: flex;
  gap: clamp(16px, 1.8vw, 30px);
  padding: 0 var(--gutter) clamp(6px, 1vh, 12px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}
.revs__row::-webkit-scrollbar { display: none; }
.revs__row.is-dragging { cursor: grabbing; }
.revs__row.is-dragging * { pointer-events: none; }

.rev {
  flex: none;
  width: clamp(230px, 22vw, 300px);
  margin: 0;
  scroll-snap-align: start;
}

.rev__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #0B0907;
  cursor: pointer;
}
.rev__video,
.rev__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* тонка рамка й затемнення, поки не грає */
.rev__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(251,249,244,.08);
  background: linear-gradient(0deg, rgba(8,6,4,.5) 0%, rgba(8,6,4,0) 42%);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.rev.is-live .rev__frame::after { opacity: .35; }

.rev__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background: rgba(251,249,244,.92);
  border-radius: 100px;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.rev__badge i { font-style: normal; font-size: 9px; }
.rev.is-live .rev__badge { opacity: 0; transform: translateY(8px); }

.rev__playing {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: rgba(8,6,4,.5);
  backdrop-filter: blur(4px);
  border-radius: 100px;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.rev__playing::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-lit);
  animation: revPulse 1.6s ease-in-out infinite;
}
.rev.is-live .rev__playing { opacity: 1; }
@keyframes revPulse { 0%,100%{opacity:.3} 50%{opacity:1} }

.rev__cap { padding: 18px 2px 0; }
.rev__quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.32;
  color: rgba(251,249,244,.9);
}
.rev__name {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251,249,244,.42);
}

.revs__rail {
  position: relative;
  height: 1px;
  margin: clamp(30px, 4.5vh, 54px) var(--gutter) 0;
  background: rgba(251,249,244,.12);
}
.revs__rail span {
  position: absolute;
  inset: -1px auto;
  height: 3px;
  width: 20%;
  background: var(--gold);
  left: 0;
  transition: left .2s linear, width .2s linear;
}


/* ── 9f. Відео-лайтбокс ────────────────────────────────── */
.vlb {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vh, 54px) clamp(52px, 9vw, 130px);
  background: rgba(11,9,7,.975);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.vlb[hidden] { display: none; }
.vlb.is-open { opacity: 1; }

.vlb__stage { margin: 0; display: grid; gap: 18px; justify-items: center; min-height: 0; }
.vlb__video {
  max-height: calc(100vh - clamp(150px, 22vh, 210px));
  background: #000;
  border-radius: 3px;
}
/* вертикаль (відгуки, книга) — тримаємо ширину; горизонталь (анонс) — ширше */
.vlb--portrait  .vlb__video { max-width: min(100%, 440px);  aspect-ratio: 9 / 16; }
.vlb--landscape .vlb__video { max-width: min(96vw, 1080px); aspect-ratio: 16 / 9; }
.vlb__stage figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 40ch;
}
#vlbQuote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.3;
  color: rgba(251,249,244,.92);
}
.vlb__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251,249,244,.42);
}
.vlb__meta i { font-style: normal; }
.vlb__meta b { color: var(--gold); font-weight: 600; }


/* ── 10. Безкоштовний урок ─────────────────────────────── */
.urok {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(0, 46%);
  align-items: stretch;
  min-height: 100vh;
  background: var(--sand);
}

/* фото не диктує висоту секції — інакше воно розтягує екран під себе */
.urok__media { position: relative; overflow: hidden; }
.urok__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% 30%;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.urok__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,  var(--sand) 0%, rgba(239,235,225,0) 24%),
    /* верхній розчин — щоб шапка не сідала на фото */
    linear-gradient(180deg, var(--sand) 0%, rgba(239,235,225,.55) 9%, rgba(239,235,225,0) 20%);
}

.urok__body {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: clamp(104px, 14vh, 150px) 0 clamp(64px, 9vh, 110px) var(--gutter);
}
.urok .display--h2 { font-size: clamp(38px, 4.7vw, 68px); }

.urok__text {
  margin-top: 28px;
  max-width: 42ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.66;
  color: rgba(20,17,14,.66);
}
.urok .display--h2 { color: var(--ink); text-shadow: none; }

.urok__note {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(20,17,14,.38);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
  padding: 19px 34px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 2px;
  isolation: isolate;
  transition: color .45s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: translateY(0); }

.btn__arrow {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  line-height: 0;
  transition: transform .45s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(6px); }


/* ── 10b. Поза сценою — темна кінематографічна карусель ── */
.off {
  position: relative;
  z-index: 2;
  padding: clamp(84px, 12vh, 148px) 0 clamp(56px, 8vh, 92px);
  background: var(--ink);
  color: var(--paper);
}

.off__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(28px, 5vw, 90px);
  padding: 0 var(--gutter) clamp(44px, 6vh, 76px);
}
.eyebrow--dim { color: rgba(251,249,244,.42); text-shadow: none; }
.off .display--h2 { color: var(--paper); text-shadow: none; font-size: clamp(32px, 4.2vw, 60px); }
.off__lede {
  max-width: 32ch;
  text-align: right;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.68;
  color: rgba(251,249,244,.58);
}

.off__row {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 1.8vw, 32px);
  padding: 0 var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}
.off__row::-webkit-scrollbar { display: none; }
.off__row.is-dragging { cursor: grabbing; }

.off__item {
  position: relative;
  flex: none;
  margin: 0;
  height: min(64vh, 600px);
  scroll-snap-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.off__item img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 1.1s var(--ease-out);
}
.off__item:hover img { transform: scale(1.03); }

.off__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 18px 16px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: linear-gradient(0deg, rgba(8,6,4,.72) 0%, rgba(8,6,4,0) 100%);
  pointer-events: none;
}

.off__foot {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(30px, 4.5vh, 54px) var(--gutter) 0;
}
.off__rail {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: rgba(251,249,244,.14);
}
.off__rail span {
  position: absolute;
  inset: -1px auto;
  height: 3px;
  width: 16%;
  background: var(--gold);
  left: 0;
  transition: left .2s linear, width .2s linear;
}
.off__counter {
  flex: none;
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 600;
  color: rgba(251,249,244,.4);
  font-variant-numeric: tabular-nums;
}
.off__counter span { color: var(--paper); }
.off__counter i { font-style: normal; opacity: .5; margin: 0 2px; }


/* ── 11. Підвал ────────────────────────────────────────── */
.foot {
  position: relative;
  z-index: 2;
  padding: clamp(64px, 10vh, 120px) var(--gutter);
  background: var(--ink-deep);
  color: var(--paper);
}

.foot__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 44px;
  max-width: 1400px;
  margin: 0 auto;
}

.foot__initials {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: .13em;
}
.foot__tagline {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251,249,244,.5);
}
.foot__about {
  margin-top: 22px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(251,249,244,.6);
}

.foot__cols { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 90px); }
.foot__col { display: flex; flex-direction: column; gap: 12px; }
.foot__head {
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251,249,244,.4);
}
.foot__col a {
  font-size: 14px;
  letter-spacing: .08em;
  transition: color .35s var(--ease);
}
.foot__col a:hover { color: var(--gold-lit); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  max-width: 1400px;
  margin: clamp(48px, 7vh, 80px) auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(251,249,244,.12);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(251,249,244,.45);
}


/* ── 12. Планшет ───────────────────────────────────────── */
@media (max-width: 980px) {
  .hall__head { grid-template-columns: 1fr; align-items: start; }
  .hall__lede { text-align: left; max-width: none; }
  .hall__foot { gap: 20px; }

  /* анонс у стовпчик: кадр → слово → кнопка. Кадр обмежений по ширині,
     інакше 9:16 на планшеті витягується на два екрани заввишки */
  .announce {
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vh, 44px);
    max-width: none;
  }
  .announce__frame { max-width: 460px; }
  .announce__copy  { max-width: 560px; }

  .book__flagText { max-width: min(78%, 620px); }

  /* медіа: заголовок у стовпчик, текст переїжджає під широкий кадр */
  .media__head { grid-template-columns: 1fr; align-items: start; }
  .media__lede { text-align: left; max-width: none; }
  .media__item--air   { grid-column: 1 / span 12; }
  .media__copy        { grid-column: 1 / span 12; align-self: start; }
  .media__item--shoot { grid-column: 1 / span 5; }
  .media__item--stage { grid-column: 6 / span 7; margin-top: clamp(24px, 5vh, 60px); }

  .revs__head { grid-template-columns: 1fr; align-items: start; }
  .revs__lede { text-align: left; max-width: none; }
  .book__mega { width: min(74%, 620px); right: -12%; bottom: -14%; opacity: .8; }

  .urok { grid-template-columns: 1fr; min-height: 0; }
  .urok__media { order: 2; height: 62vh; }
  .urok__media img {
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .urok__media::after {
    background: linear-gradient(0deg, rgba(239,235,225,0) 60%, var(--sand) 100%);
  }
  .urok__body {
    grid-column: 1;
    grid-row: 1;
    order: 1;
    max-width: none;
    padding: clamp(110px, 16vh, 150px) var(--gutter) clamp(40px, 6vh, 64px);
  }
}


/* ── 13. Мобільний HERO: підйом панелей на липкому позиціонуванні ── */
@media (max-width: 720px) {
  .hero { height: auto; }
  .hero__stage {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  /* панелі липнуть до верху, а наступна напливає знизу й накриває попередню —
     той самий підйом, що на десктопі, але рахує його сам браузер.
     Ніякої математики по vh на кожен кадр, тож адресний рядок, який на
     телефоні їздить туди-сюди, більше нічого не зсуває. */
  .panel {
    position: sticky;
    /* Тільки top. Базовий inset: 0 лишив би ще й bottom: 0, а для липкого
       елемента це окрема умова — «не опускай низ нижче низу екрана».
       Через неї всі панелі пришпилювались до вікна одразу, з першого
       кадру, і кремова п'ята накривала сцену з найвищим z-index. */
    inset: 0 auto auto auto;
    height: 100svh;
    transform: none !important;   /* десктопний translate3d тут не керує */
    will-change: auto;            /* панелі більше не рухаються — не тримаємо
                                     п'ять повноекранних шарів у пам'яті */
  }
  /* z-index 0…4 з базових правил лишається — саме він кладе наступну поверх */

  /* Текст проявляється, коли панель стала активною; клас вішає JS.
     Селектор із [data-panel] — щоб переважити базове правило, яке
     тримає текст першої панелі завжди видимим (там та сама вага). */
  .panel[data-panel] .panel__content,
  .panel[data-panel] .breath {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
  }
  .panel.is-in .panel__content,
  .panel.is-in .breath {
    opacity: 1;
    transform: none;
  }

  .breath {
    position: relative;
    inset: auto;
    min-height: 100svh;
  }

  .panel__content {
    bottom: clamp(112px, 17vh, 170px);
    max-width: none;
    right: var(--gutter);
  }
  .display    { font-size: clamp(40px, 12.5vw, 62px); }
  .display--h2{ font-size: clamp(37px, 11.5vw, 58px); }
  .lede       { font-size: 15px; }

  .hud { transition: opacity .5s var(--ease); }
  .hud__dots {
    top: auto;
    bottom: clamp(26px, 5vh, 44px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 11px;
  }
  .hud__counter { bottom: auto; top: clamp(84px, 12vh, 110px); }
  .hud__hint { display: none; }

  .breath { padding-top: clamp(104px, 16vh, 140px); }
  .breath__ghost { top: auto; bottom: -.08em; transform: none; font-size: 62vw; opacity: .04; }
  .display--breath { font-size: clamp(30px, 9vw, 46px); }
  .facts { gap: 22px 34px; }
  .facts__num { font-size: clamp(30px, 9vw, 42px); }

  .nav__tagline { display: none; }
  .nav__lang { display: none; }
  .nav__cta { font-size: 10px; letter-spacing: .14em; }

  /* стрічка на телефоні: нижча, підписи завжди видно, тягнеться пальцем */
  .reel__item,
  .reel__note { height: min(58vh, 460px); }
  .reel { scroll-snap-type: x mandatory; cursor: default; }
  .reel__item figcaption { opacity: 1; transform: none; padding: 34px 14px 12px; }
  /* кадр не має бути ширшим за екран — інакше підпис і половина фото
     лишаються за межами вікна, а снап нікуди не «клацає» */
  .reel__item img { max-width: 84vw; }
  /* на тачі кнопка завжди видима (наведення немає) */
  .reel__zoom, .off__zoom { opacity: 1; transform: none; }
  .reel__note { width: 74vw; }
  .reel__quote { font-size: 24px; }

  .arrow { width: 42px; height: 42px; }

  /* книга на телефоні: фото одне під одним, мегафон іде у фон */
  .book__flag { min-height: 88svh; align-items: flex-end; }
  .book__flagText { max-width: none; }
  .book__title { font-size: clamp(34px, 10.5vw, 52px); }
  /* на вузькому екрані мегафон або лізе на текст, або зрізається до
     невпізнаваного — помаранчеве поле й так тримає удар саме */
  .book__mega { display: none; }

  /* медіа на телефоні: усе в один стовпчик, кадри на всю ширину */
  .media__grid { grid-template-columns: 1fr; gap: clamp(30px, 5vh, 46px); }
  .media__item--air,
  .media__item--shoot,
  .media__item--stage,
  .media__copy { grid-column: 1; margin-top: 0; }
  .media__item--shoot .media__frame { aspect-ratio: 4 / 5; }
  .media__text { max-width: none; }

  .book__spread { grid-template-columns: 1fr; }
  .book__shot--shelf,
  .book__shot--cover,
  .book__copy { grid-column: 1; }
  .book__shot--cover { margin-top: 0; width: 68%; }
  .book__copy { margin-top: clamp(28px, 5vh, 44px); }
  .lb { padding: 64px 16px 74px; }
  .lb__nav { width: 44px; height: 44px; }
  .lb__nav--prev { left: 8px; }
  .lb__nav--next { right: 8px; }
  .lb__stage img { max-height: calc(100svh - 190px); }

  /* поза сценою на телефоні */
  .off__head { grid-template-columns: 1fr; align-items: start; }
  .off__lede { text-align: left; max-width: none; }
  .off__item { height: min(58vh, 460px); }
  .off__item img { max-width: 86vw; }
  .off__row { scroll-snap-type: x mandatory; cursor: default; }
  .off__foot { gap: 20px; }

  /* відгуки на телефоні: широкі картки, свайп пальцем, тап → лайтбокс */
  .rev { width: 70vw; }
  .revs__row { scroll-snap-type: x mandatory; cursor: default; }
  .rev__badge { opacity: 1 !important; transform: none !important; }
  .vlb { padding: 20px 12px; }
  .vlb__video { max-width: 100%; max-height: calc(100svh - 150px); }
  .vlb__nav, .vlb .lb__nav { width: 44px; height: 44px; }
}


/* ── 14. Повага до налаштувань руху ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel__video.is-live { animation: none; }
  .panel__grain { animation: none; }
  .hud__line { animation: none; opacity: .35; }
  .curtain__initials,
  .curtain__sub { animation: riseIn .01s forwards; }
  .curtain__rule { animation: drawDown .01s forwards; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}