/* Вариант 3 — «Плакат». Референс: YNIQ — снимок в дуотоне (тёплый свет, холодные тени) с плёночным зерном,
   огромный жирный гротеск с переливом жёлтого-бирюзового-белого-оранжевого, узкие цифры «(17)» и «©19-24»,
   мелкое меню прописными по верху, столбик услуг справа, маленький абзац слева внизу. */

:root {
  --grot: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --cond: "Oswald", "Arial Narrow", sans-serif;
  --gutter: clamp(14px, 2.4vw, 40px);
  --swap-out: 320ms;
}
body { font-family: var(--grot); }

/* ——— дуотон ——— */
.duo .ph { background: var(--duo-light); isolation: isolate; }
.duo .ph img { filter: grayscale(1) contrast(1.28) brightness(1.08); mix-blend-mode: multiply; }
.duo .ph .ph-tiny { filter: blur(18px) grayscale(1) contrast(1.28) brightness(1.08); mix-blend-mode: multiply; }
.duo .ph::after { content: ""; position: absolute; inset: 0; background: var(--duo-dark); mix-blend-mode: lighten; pointer-events: none; }
.grain {
  position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, transparent 16%, transparent 50%, rgba(0, 0, 0, .3) 100%); transition: opacity .6s; }
body.is-sky .shade { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ——— верх ——— */
.top {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: start;
  padding: calc(8px + var(--sat)) calc(var(--gutter) + var(--sar)) 0 calc(var(--gutter) + var(--sal));
  text-transform: uppercase;
}
.logo { justify-self: start; font: 600 clamp(30px, 3.4vw, 52px)/.9 var(--cond); letter-spacing: -.01em; color: #fff; margin-top: 4px; }
.logo sup { font-size: .32em; vertical-align: top; position: relative; top: .1em; margin-left: 2px; }
.nav { justify-self: center; margin-top: 14px; font: 650 13px/1 var(--grot); letter-spacing: .02em; color: #fff; }
.nav:hover { text-decoration: underline; text-underline-offset: 4px; }
.big-index { justify-self: center; font: 500 clamp(54px, 6.6vw, 104px)/1 var(--cond); letter-spacing: -.02em; color: var(--comp); opacity: .88; margin-top: 14px; }
.menu { justify-self: end; display: inline-flex; align-items: center; gap: 12px; font: 600 clamp(22px, 2.4vw, 40px)/.9 var(--cond); color: #fff; margin-top: 6px; }
.menu i { width: 34px; height: 9px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu[aria-pressed="true"] { color: var(--comp); }

/* ——— экраны ——— */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(110px + var(--sat)) calc(var(--gutter) + var(--sar)) calc(64px + var(--sab)) calc(var(--gutter) + var(--sal));
}
.poster { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; width: 100%; }
.poster > *, .row, .t2 { min-width: 0; }
.year { grid-column: 1; margin: 0 0 .1em; font: 600 clamp(36px, 4.4vw, 72px)/.9 var(--cond); letter-spacing: -.02em; color: #fff; text-transform: uppercase; }
.facts { grid-column: 2; grid-row: 1; justify-self: end; margin: 0 clamp(0px, 10vw, 220px) 1.2em 0; padding: 0; list-style: none; font: 550 clamp(15px, 1.25vw, 20px)/1.45 var(--grot); color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .3); }
.facts button { font: inherit; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.title { grid-column: 1 / -1; margin: 0; display: block; }
.t1, .t2, .title--finale {
  display: block;
  font: 800 clamp(40px, 13vw, 260px)/.86 var(--grot); letter-spacing: -.055em;
  background: linear-gradient(100deg, #ffe58a 0%, var(--warm) 14%, var(--comp) 34%, #ffffff 50%, var(--comp2) 64%, #ffd36b 80%, var(--warm) 100%);
  background-size: 100vw 100%; background-attachment: fixed;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .18));
  overflow-wrap: normal;
}
.t1 { padding-bottom: .04em; }
.title [data-fit-line] { display: block; white-space: nowrap; overflow: hidden; padding-right: .06em; }
.row { display: flex; align-items: flex-end; gap: 3vw; }
.note { flex: 0 0 25%; margin: 0 0 .5em; font: 500 clamp(14px, 1.05vw, 17px)/1.4 var(--grot); color: #fff; letter-spacing: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.t2 { flex: 1 1 auto; min-width: 0; padding-bottom: .06em; }
.title--finale { max-width: 100%; }
.go {
  grid-column: 1 / -1; justify-self: start; margin-top: clamp(14px, 2.4vh, 28px);
  display: inline-flex; align-items: center; gap: .35em;
  font: 600 clamp(26px, 3vw, 48px)/1 var(--cond); text-transform: uppercase; color: #fff;
  border-bottom: 3px solid var(--comp); padding-bottom: 6px;
}
.go i { font-style: normal; color: var(--comp); transition: transform .3s var(--ease); }
.go:hover i { transform: translateX(6px); }
.intro .go { justify-self: end; grid-row: 2; margin: 0 clamp(0px, 10vw, 220px) 0 0; }

/* положение текста */
body[data-ty="top"] .scene { justify-content: flex-start; }
body[data-ty="middle"] .scene { justify-content: center; }
body[data-tx="right"] .scene .row { flex-direction: row-reverse; }
body[data-tx="right"] .scene .t1, body[data-tx="right"] .scene .t2 { text-align: right; }
body[data-tx="right"] .scene .note { text-align: right; }
body[data-tx="center"] .scene .t1, body[data-tx="center"] .scene .t2 { text-align: center; }

[data-swap].is-out { transform: translateY(24px); filter: blur(4px); }
body[data-dir="prev"] [data-swap].is-out { transform: translateY(-24px); }

.credit { position: fixed; z-index: 20; right: calc(var(--gutter) + var(--sar)); bottom: calc(44px + var(--sab)); margin: 0; }
.credit button { font: 500 11px/1.2 var(--grot); color: rgba(255, 255, 255, .7); text-transform: uppercase; letter-spacing: .04em; }
body[data-mode="intro"] .credit { bottom: calc(14px + var(--sab)); }

/* ——— таймлайн ——— */
.tl { position: fixed; z-index: 20; left: 0; right: 0; bottom: calc(6px + var(--sab)); padding: 0 calc(var(--gutter) + var(--sar)) 0 calc(var(--gutter) + var(--sal)); }
.tl-line { display: none; }
.tl-track { gap: 0; }
.tl-dot { flex: 1 0 auto; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 22px 0 0; color: rgba(255, 255, 255, .62); text-transform: uppercase; }
.tl-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .45); }
.tl-pin { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none; transition: transform .3s var(--ease), background .3s; }
.tl-label { position: relative; z-index: 1; padding: 0 8px 0 2px; font: 650 11.5px/1 var(--grot); letter-spacing: .05em; white-space: nowrap; background: none; text-shadow: 0 0 8px rgba(0, 0, 0, .6); }
.tl-date { margin-right: 6px; }
.tl-dot.is-active { color: #fff; }
.tl-dot.is-active .tl-pin { background: var(--comp); transform: scale(1.5); }
.tl-dot:hover { color: #fff; }

/* ——— панели: чёрные плашки, прописные ——— */
.panel {
  left: 10px; right: 10px; bottom: calc(10px + var(--sab));
  max-height: calc(100svh - 90px - var(--sat)); overflow: auto; overscroll-behavior: contain;
  padding: 18px 20px 20px; background: #0d0c10; color: #fff; font: 500 15px/1.45 var(--grot);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
}
.panel-close { position: absolute; top: 14px; right: 16px; font: 650 12px/1 var(--grot); text-transform: uppercase; letter-spacing: .05em; padding: 8px 0; color: var(--comp); }
.panel-kicker { margin: 0 70px 8px 0; font: 650 12px/1.2 var(--grot); text-transform: uppercase; letter-spacing: .06em; color: var(--comp); }
.panel-title { margin: 0 0 10px; font: 800 34px/.95 var(--grot); letter-spacing: -.04em; }
.panel-lead { margin: 0 0 4px; font-weight: 650; }
.panel-small { margin: 0 0 12px; color: rgba(255, 255, 255, .66); font-size: 14px; }
.panel-list { display: grid; grid-template-columns: 112px 1fr; gap: 7px 12px; margin: 12px 0 16px; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 12px; }
.panel-list dt { color: rgba(255, 255, 255, .55); text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; padding-top: 2px; }
.panel-list dd { margin: 0; }
.panel-link { font: 600 22px/1 var(--cond); text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 2px solid var(--comp); padding-bottom: 4px; }
.panel--where { text-align: left; }
.panel--where canvas { width: min(240px, 64vw); margin: 4px auto 10px; --globe-bg: #18161f; --globe-ink: rgba(255, 255, 255, .92); --globe-line: rgba(255, 255, 255, .16); --globe-accent: var(--comp); }
.panel-coords { font-size: 12.5px; margin-bottom: 0; }
@media (min-width: 760px) {
  .panel { left: auto; right: calc(var(--gutter) + var(--sar)); top: calc(96px + var(--sat)); bottom: auto; width: 440px; }
  .panel--where { width: 340px; }
}

/* ——— телефон ——— */
@media (max-width: 700px) {
  .top { grid-template-columns: 1fr auto 1fr; }
  .nav { display: none; }
  .big-index { font-size: 50px; margin-top: 6px; }
  .menu i { display: none; }
  .menu { font-size: 22px; gap: 8px; margin-top: 10px; }
  .menu span { max-width: 4.6em; text-align: right; line-height: .95; }
  .menu i { width: 24px; height: 8px; }
  .screen { padding-bottom: calc(60px + var(--sab)); }
  .poster { grid-template-columns: minmax(0, 1fr); }
  .go { order: 4; }
  .facts { grid-column: 1; grid-row: auto; justify-self: start; margin: 0 0 14px; font-size: 14px; line-height: 1.4; order: 3; }
  .year { order: 1; }
  .title { order: 2; }
  .row { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  body[data-tx="right"] .scene .row { flex-direction: column-reverse; }
  .note { flex: none; max-width: 32ch; margin: 0 0 6px; font-size: 15px; }
  .intro .go { justify-self: start; grid-row: auto; margin: 18px 0 0; order: 4; }
  .intro .facts { display: none; }
  .tl-dot { padding-right: 18px; }
}
@media (max-height: 520px) {
  .top { padding-top: calc(4px + var(--sat)); }
  .big-index { font-size: 44px; }
  .screen { padding-top: calc(70px + var(--sat)); padding-bottom: calc(48px + var(--sab)); }
  .facts { font-size: 13px; margin-bottom: .4em; }
  .note { font-size: 13px; }
  .year { font-size: 30px; }
  .go { font-size: 24px; margin-top: 10px; }
}