/* «Закаты» — по постеру «sunsets»: тёмный красно-коричневый фон, огненные облака занимают низ,
   сверху три разреженные подписи прописными, огромное слово контрастной антиквой кремового цвета,
   под ним ряд точек (здесь — таймлайн) и маленькая ссылка «↗», справа короткий текст. */

:root {
  --display: "Yeseva One", "Playfair Display", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --cream: #ffd7a1;
  --bg: #3a1c16;
  --g: clamp(22px, 8vw, 150px);
  --swap-out: 360ms;
  --p-font: var(--sans); --p-radius: 6px; --p-bg: #241210; --p-ink: #ffe9cc; --p-dim: rgba(255, 233, 204, .62); --p-line: rgba(255, 233, 204, .1);
  --p-accent: #ffb070; --p-btn-bg: var(--cream); --p-btn-ink: #2a1410; --p-title-font: var(--display); --p-title-weight: 400;
  --p-top: calc(60px + var(--sat)); --p-right: var(--g);
  --g-bg: #1c0d0b; --g-accent: #ff9a52; --g-ink: rgba(255, 220, 180, .85);
}
html, body { background: var(--bg); }
body { font-family: var(--sans); color: var(--cream); background: linear-gradient(180deg, #4a241b 0%, var(--bg) 40%, #2a130f 100%); }

.photo { top: 30%; bottom: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%); background: transparent; transition: top .8s var(--ease-film), -webkit-mask-image .8s; }
.photo .ph.is-on img.is-ready { animation: none; }
.fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(14, 6, 4, .75) 100%); }
body.is-sky .photo { top: 0; -webkit-mask-image: none; mask-image: none; }
body.is-sky .fade { opacity: 0; }

/* ——— три подписи ——— */
.labels { position: fixed; z-index: 30; top: calc(clamp(26px, 6vh, 60px) + var(--sat)); left: var(--g); right: var(--g); display: flex; justify-content: space-between; }
.labels button { font: 500 10.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--cream); opacity: .9; padding: 6px 0; }
.labels button:hover, .labels button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* ——— постер ——— */
.screen { position: fixed; z-index: 10; top: calc(clamp(50px, 9vh, 92px) + var(--sat)); left: var(--g); right: var(--g); display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 14px); }
.word {
  margin: 0; width: 100%; text-align: center;
  font: 400 clamp(64px, 19vw, 260px)/.92 var(--display); letter-spacing: -.01em; color: var(--cream);
  text-transform: lowercase; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(40, 10, 0, .25);
}
.word [data-fit-line] { display: block; white-space: nowrap; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.left { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dots { display: flex; gap: 5px; }
.dots i, .tl-pin { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--cream); background: transparent; display: block; }
.dots i.on { background: var(--cream); }
.arch { font: 500 clamp(12px, 1vw, 14px)/1.3 var(--sans); color: var(--cream); text-align: left; }
.arch:hover { text-decoration: underline; text-underline-offset: 4px; }
.right { margin: 0; justify-self: end; max-width: 26ch; text-align: right; font: 500 clamp(14px, 1.15vw, 17px)/1.3 var(--sans); color: #ffe9cc; text-wrap: pretty; }
.right .dim { display: inline-block; margin-top: 6px; font-size: .84em; font-weight: 400; color: rgba(255, 233, 204, .72); }
[data-swap].is-out { transform: translateY(8px); filter: blur(5px); }

/* ——— точки-таймлайн ——— */
.tl { position: relative; }
.tl-line { display: none; }
.tl-track { gap: 5px; overflow: visible; }
.tl-dot { width: 16px; height: 22px; display: flex; align-items: center; justify-content: center; margin: 0 -4px 0 -4px; }
.tl-label { display: none; }
.tl-dot.is-active .tl-pin { background: var(--cream); }
.tl-dot:hover .tl-pin { background: rgba(255, 215, 161, .5); }
.tl-dot:focus-visible { outline-offset: 0; }

.credit { position: fixed; z-index: 20; left: var(--g); right: var(--g); bottom: calc(16px + var(--sab)); margin: 0; text-align: center; }
.credit button { font: 500 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 215, 161, .6); }

@media (max-width: 700px) {
  :root { --g: 28px; }
  .word { font-size: 92px; }
  .right { font-size: 13px; }
  .row { gap: 14px; }
  .photo { top: 34%; }
}
@media (min-width: 1000px) {
  .photo { top: 22%; }
}
@media (max-height: 520px) {
  .screen { top: calc(40px + var(--sat)); }
  .labels { top: calc(12px + var(--sat)); }
  .photo { top: 46%; }
  .right .dim { display: none; }
}