@font-face { font-family: Forum; src: url(fonts/forum-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; font-display: swap; }
@font-face { font-family: Forum; src: url(fonts/forum-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC; font-display: swap; }
@font-face { font-family: Golos; font-weight: 400; src: url(fonts/golos-text-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; font-display: swap; }
@font-face { font-family: Golos; font-weight: 400; src: url(fonts/golos-text-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC; font-display: swap; }
@font-face { font-family: Golos; font-weight: 500; src: url(fonts/golos-text-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; font-display: swap; }
@font-face { font-family: Golos; font-weight: 500; src: url(fonts/golos-text-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC; font-display: swap; }

:root {
  --night: #060606;
  --ink: #efe9df;
  --ink-2: #b9b3a8;
  --line: #2c2a26;
  --gold: #d9ad6a;
  --gold-hi: #f0cf98;
  --gut: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 clamp(16px, 1.05vw + 12px, 19px)/1.5 Golos, system-ui, sans-serif; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
h1, h2, h3 { font-family: Forum, Georgia, serif; font-weight: 400; margin: 0; letter-spacing: .035em; text-transform: uppercase; }
b, strong { font-weight: 400; color: var(--gold); }
mark { background: none; color: var(--gold-hi); border-bottom: 1px dashed var(--gold); }

#gl { position: fixed; inset: 0; width: 100vw; height: 100lvh; display: block; }
.fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.static .fb { display: block; opacity: .9; }
.static #gl { display: none; }

.bar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gut); transition: background .25s; }
.bar.solid { background: var(--night); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: Forum, serif; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.bar nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); font-size: 15px; }
.bar nav a { text-decoration: none; color: var(--ink-2); padding: 12px 0; transition: color .2s; }
.bar nav a:hover { color: var(--ink); }
.bar nav .tel { color: var(--gold); }

.pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero { height: 170svh; position: relative; z-index: 1; }
.polish { height: 480svh; position: relative; z-index: 1; }
.seat { height: 240svh; position: relative; z-index: 1; }

.hero-text { position: absolute; left: var(--gut); bottom: clamp(88px, 11vh, 120px); max-width: min(42rem, 62vw); }
h1 { font-size: clamp(30px, 3.7vw, 60px); line-height: 1.08; }
.hint { margin: 18px 0 0; color: var(--ink-2); transition: opacity .6s; }
.hint.off { opacity: 0; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.go { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; background: var(--gold); color: #120d05; text-decoration: none; font-weight: 500; border-radius: 2px; transition: background .2s; }
.go:hover { background: var(--gold-hi); }
.quiet { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); text-underline-offset: 5px; text-decoration-color: var(--gold); }

.rail { position: absolute; left: var(--gut); top: 18vh; bottom: 18vh; width: 1px; background: rgba(239,233,223,.18); }
.rail i { display: block; width: 1px; height: 100%; background: var(--gold); transform: scaleY(0); transform-origin: top; }
.steps { position: absolute; left: calc(var(--gut) + 28px); right: var(--gut); bottom: clamp(88px, 13vh, 130px); height: 15rem; }
.step { position: absolute; left: 0; bottom: 0; width: min(38rem, 100%); opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; pointer-events: none; }
.step.on { opacity: 1; transform: none; }
.step h2, .seat-text h2 { font-size: clamp(27px, 3vw, 48px); line-height: 1.1; }
.step h2 b, .seat-text h2 b { white-space: nowrap; margin-left: .25em; }
.step p, .seat-text p { margin: 12px 0 0; max-width: 32rem; color: var(--ink); text-shadow: 0 1px 14px #000, 0 0 3px #000; }

.seat-text { position: absolute; left: var(--gut); bottom: clamp(88px, 13vh, 130px); max-width: 34rem; text-shadow: 0 1px 18px #000, 0 0 4px #000; }

.works, .prices, .contact { position: relative; z-index: 2; background: var(--night); padding: clamp(64px, 9vw, 130px) var(--gut); }
.works h2, .prices h2, .contact h2 { font-size: clamp(30px, 4.2vw, 68px); }
.works-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px; margin-top: 36px; align-items: end; }
figure { margin: 0; }
figure img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
figcaption { margin-top: 10px; color: var(--ink-2); font-size: .88em; }

.prices { padding-top: 0; }
.packs { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0 clamp(20px, 3.4vw, 56px); margin-top: 28px; align-items: start; }
.pack { border-top: 1px solid var(--line); padding-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.pack h3 { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.15; }
.pack strong { font-family: Forum, serif; font-size: clamp(30px, 3vw, 46px); line-height: 1; }
.pack ul { grid-column: 1 / -1; list-style: none; margin: 14px 0 12px; padding: 0; color: var(--ink-2); }
.pack li { padding: 3px 0; }
.pick { grid-column: 1 / -1; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 5px; text-decoration-color: var(--gold); justify-self: start; }
.pack-top { border-top-color: var(--gold); }
.pack-top strong { font-size: clamp(38px, 4.2vw, 66px); }

.h-list { margin-top: clamp(56px, 7vw, 96px); }
.list { list-style: none; margin: 24px 0 0; padding: 0; columns: 2; column-gap: clamp(20px, 3.4vw, 56px); }
.list li { break-inside: avoid; border-top: 1px solid var(--line); }
.list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 0; text-decoration: none; transition: color .2s; }
.list a:hover { color: var(--gold-hi); }
.list small { display: block; font-size: .84em; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.list b { font-family: Forum, serif; font-size: 1.5em; white-space: nowrap; }

.contact { padding-top: 0; padding-bottom: clamp(110px, 10vw, 150px); }
.contact > p { max-width: 32rem; margin: 14px 0 0; color: var(--ink-2); }
dl { margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(20px, 3.4vw, 56px); }
dl div { border-top: 1px solid var(--line); padding-top: 12px; }
dt { color: var(--ink-2); font-size: .88em; }
dd { margin: 4px 0 0; }
dd a { text-decoration: none; }

.dock { display: none; }

@media (max-width: 860px) {
  .bar { padding: 8px 16px; }
  .bar nav a:not(.tel) { display: none; }
  .brand span { display: none; }
  .hero-text { max-width: none; right: var(--gut); bottom: 84px; }
  h1 { font-size: clamp(27px, 8.2vw, 40px); }
  .hero-text .acts { display: none; }
  .rail { top: 14vh; bottom: 84px; }
  .steps { left: calc(var(--gut) + 16px); bottom: 84px; }
  .step h2 b, .seat-text h2 b { display: block; margin: 4px 0 0; }
  .seat-text { right: var(--gut); bottom: 84px; }
  .works-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .w-main { grid-column: 1 / -1; }
  .w-main img { aspect-ratio: 4/4.4; }
  figcaption { font-size: .78em; }
  .packs { grid-template-columns: 1fr; gap: 28px; }
  .list { columns: 1; }
  dl { grid-template-columns: 1fr; }
  .contact .acts { display: flex; }
  .dock { display: flex; position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; gap: 16px; align-items: center; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(6,6,6,.95) 62%, rgba(6,6,6,0)); transition: transform .25s; }
  .dock .go { flex: 1; justify-content: center; min-height: 48px; }
  .dock .quiet { padding: 0 8px; }
  .dock.off { transform: translateY(110%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .step, .hint, .dock { transition: none; }
}

.polish .pin::after, .seat .pin::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(6,6,6,.88), rgba(6,6,6,.55) 45%, rgba(6,6,6,0)); pointer-events: none; }
.steps, .seat-text, .rail { z-index: 1; }
.works, .prices, .contact { scroll-margin-top: 72px; }