@font-face {
  font-family: Manrope; src: url("./assets/manrope-lat.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
}
@font-face {
  font-family: Manrope; src: url("./assets/manrope-cyr.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Oswald; src: url("./assets/oswald-lat.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: Oswald; src: url("./assets/oswald-cyr.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  color-scheme: dark;
  --bg: #090a09;
  --panel: #151611;
  --text: #f3f0e7;
  --muted: #b8b8ad;
  --line: #35372e;
  --lime: #bcff35;
  --paper: #e9e5db;
  --gutter: clamp(20px, 5.35vw, 102px);
  --header: 70px;
  --display: Oswald, "Arial Narrow", sans-serif;
  --mono: "Courier New", monospace;
  --ease: cubic-bezier(.21, .72, .24, 1);
  font-family: Manrope, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header);
  scroll-snap-type: y proximity;
}
:root.film-playing { scroll-snap-type: none; }
.chapter-section { scroll-snap-align: start; }
@supports (animation-timeline: view()) {
  :root[data-motion="enabled"] :is(.mag-heading, .archive-heading) {
    animation: chapter-arrival linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
}
@keyframes chapter-arrival {
  from { opacity: .38; transform: perspective(1100px) translateY(34px) rotateX(-24deg); }
  to { opacity: 1; transform: none; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 180px; }
body:has(dialog[open]) { overflow: hidden; }
::selection { background: var(--lime); color: var(--bg); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 1em; height: 1em; flex: none; }
h1, h2, h3, p, figure { margin: 0; }
.symbols { display: none; }
[hidden] { display: none !important; }
.shell { width: min(100% - var(--gutter) * 2, 1540px); margin-inline: auto; }
.accent { color: var(--lime); }
.skip { position: fixed; inset: 12px auto auto 12px; z-index: 30; background: var(--lime); color: var(--bg); padding: 12px; transform: translateY(-160%); }
.skip:focus { transform: none; }
.top { position: sticky; top: 0; z-index: 10; background: #0c0e0cf5; border-bottom: 1px solid #34372b; }
.top-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; height: calc(var(--header) - 1px); }
.logo { display: inline-flex; align-items: center; width: fit-content; gap: 9px; font: 700 24px/.93 var(--display); letter-spacing: -.025em; }
.logo > svg { color: var(--lime); width: 27px; height: 27px; transition: rotate .5s var(--ease); }
.logo:hover > svg { rotate: 60deg; }
.logo small { display: block; margin-top: 4px; font: 700 9px/1 var(--mono); letter-spacing: .17em; }
.nav { display: flex; align-items: center; gap: clamp(22px, 3.8vw, 54px); font-size: 13px; font-weight: 750; }
.nav a { color: var(--muted); transition: color .2s; }
.nav a:hover { color: var(--lime); }
.top-book, .button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; font-size: 13px; line-height: 1.35; font-weight: 800; white-space: nowrap; transition: color .22s, border-color .22s, background .22s; }
.top-book { justify-self: end; min-height: 39px; padding: 0 13px; border: 1px solid #565b45; }
.top-book svg { color: var(--lime); }
.top-book:hover { background: var(--lime); border-color: var(--lime); color: var(--bg); }
.top-book:hover svg { color: var(--bg); }
.button { min-height: 52px; padding: 0 17px; border: 1px solid transparent; }
.button svg { width: 17px; height: 17px; transition: translate .25s var(--ease); }
.button:hover svg { translate: 3px -2px; }
.primary { background: var(--lime); color: #171c0b; }
.primary:hover { background: #e1ff9c; }
.secondary { background: transparent; border-color: #535849; color: var(--text); }
.secondary:hover { color: var(--lime); border-color: var(--lime); }

.cinema { --frame-height: max(560px, calc(100svh - var(--header))); --travel: clamp(1900px, 260svh, 2800px); background: var(--bg); }
.cinema-enabled { min-height: calc(var(--frame-height) + var(--travel)); }
.cinema-stage { isolation: isolate; position: relative; height: var(--frame-height); min-height: 0; display: flex; align-items: center; overflow: clip; background: #090a09; }
.cinema-enabled .cinema-stage { position: sticky; top: var(--header); }
.film-depth {
  position: absolute;
  inset: -14% -16%;
  pointer-events: none;
  opacity: .52;
  background: radial-gradient(ellipse at 72% 50%, #10192540, #080b0de3 70%), url("./assets/ink-diffusion.webp") 55% 62% / cover;
  filter: grayscale(.72) brightness(.7);
  transform: translate3d(var(--depth-x, 0), 0, 0) scale(var(--depth-scale, 1));
}
.film-tone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.film-tone::before, .film-tone::after { content: ""; position: absolute; inset: 0; }
.film-tone::before {
  background: radial-gradient(ellipse at 61% 30%, #9ab9d248, #43638719 43%, transparent 69%);
  opacity: calc((1 - var(--lighting, 0)) * .68);
}
.film-tone::after {
  background: radial-gradient(ellipse at var(--lighting-position, 86%) 42%, #c0e84e3d, #64852c24 34%, transparent 68%);
  opacity: var(--lighting, 0);
}
.film-drops {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--drops, 0);
  perspective: 880px;
  perspective-origin: 67% 48%;
}
.film-drops i {
  position: absolute;
  left: var(--drop-left, 73%);
  top: var(--drop-top, 47%);
  width: var(--drop-size, 52px);
  aspect-ratio: 1;
  border-radius: 55% 45% 61% 39%;
  background:
    radial-gradient(ellipse at 28% 25%, #f2f8cdaa 0 2%, #7c98696b 7%, transparent 27%),
    radial-gradient(ellipse at 30% 25%, #354035 0, #121712 41%, #040604 75%);
  border: 1px solid #8094786e;
  box-shadow: 0 17px 38px #000a, inset -6px -5px 12px #020302b0;
  transform: translate3d(calc(var(--drop-x) * var(--drop-flight, 0)),
    calc(var(--drop-y) * var(--drop-flight, 0)), calc(var(--drop-z) * var(--drop-flight, 0)))
    rotate(calc(43deg * var(--drop-flight, 0)));
}
.film-drops i:nth-child(1) { --drop-x: -14vw; --drop-y: -19vh; --drop-z: 155px; --drop-size: clamp(26px, 4.5vw, 82px); }
.film-drops i:nth-child(2) { --drop-left: 68%; --drop-top: 57%; --drop-x: 21vw; --drop-y: -21vh; --drop-z: -155px; --drop-size: clamp(19px, 2.8vw, 51px); }
.film-drops i:nth-child(3) { --drop-left: 79%; --drop-top: 41%; --drop-x: 12vw; --drop-y: 20vh; --drop-z: 115px; --drop-size: clamp(17px, 2vw, 42px); }
.film-drops i:nth-child(4) { --drop-left: 59%; --drop-top: 43%; --drop-x: -6vw; --drop-y: 19vh; --drop-z: -40px; --drop-size: clamp(13px, 1.45vw, 28px); }
.film-photo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.film-photo img { width: 100%; height: 100%; object-fit: cover; }
.portrait-plane { left: 34%; opacity: var(--portrait-opacity, 1); }
.portrait-plane img { object-position: 57% 41%; filter: grayscale(1) contrast(1.17) brightness(.88); transform-origin: 57% 40%; transform: translate3d(var(--portrait-x, 0), var(--portrait-y, 0), 0) rotate(var(--portrait-roll, 0deg)) scale(var(--portrait-zoom, 1.03)); }
.portrait-plane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #090a09 0%, #090a09b6 14%, #090a091c 48%, #090a091a 75%, #090a0959 100%); }
.tattoo-plane { inset: -9% -4% -9% 7%; opacity: var(--tattoo-opacity, 0); }
.tattoo-plane img { object-position: 51% 60%; filter: grayscale(1) contrast(1.13) brightness(1.34); transform-origin: 68% 59%; transform: translate3d(var(--tattoo-x, 0), var(--tattoo-y, 0), 0) rotate(var(--tattoo-roll, 0deg)) scale(var(--tattoo-zoom, 1.35)); }
.tattoo-plane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #090a09, #090a09ac 26%, transparent 68%); opacity: calc(1 - .46 * var(--macro, 0)); }
.film-ink { position: absolute; inset: -22%; pointer-events: none; background: url("./assets/ink-diffusion.webp") 50% 53% / cover; opacity: var(--ink-opacity, 0); filter: grayscale(1) brightness(.77); transform: translate3d(var(--ink-x, 0), var(--ink-y, 0), 0) rotate(var(--ink-roll, 0deg)) scale(var(--ink-scale, 1)); }
.film-world {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--world-opacity, 0);
  perspective: 1150px;
  perspective-origin: 65% 43%;
}
.world-beam {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at var(--world-spot, 65%) 60%, #c3d48b27, #a6b58a0e 28%, transparent 62%);
}
.world-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translate3d(0, var(--world-y, 0px), var(--world-z, 0px))
    rotateX(calc(var(--world-pitch, 0deg) + var(--world-pointer-y, 0deg)))
    rotateY(calc(var(--world-yaw, 0deg) + var(--world-pointer-x, 0deg)));
  transform-origin: 62% 45%;
}
.world-floor {
  position: absolute;
  inset: 43% -18% -42%;
  transform: translate3d(0, 30%, -80px) rotateX(72deg);
  background:
    radial-gradient(ellipse at 67% 48%, #bac89956, #43503027 40%, transparent 66%),
    repeating-linear-gradient(90deg, #a5c37b27 0 1px, transparent 1px 86px),
    repeating-linear-gradient(0deg, #a5c37b27 0 1px, transparent 1px 86px);
  mask-image: radial-gradient(ellipse at 65% 50%, #000 12%, transparent 68%);
}
.world-panel {
  --panel-width: clamp(125px, min(21vw, 37svh), 325px);
  position: absolute;
  left: 63%;
  top: 47%;
  display: flex;
  flex-direction: column;
  width: var(--panel-width);
  aspect-ratio: .88;
  background: #11150d;
  border: 1px solid #a3ab87;
  border-left: 5px solid #87996b;
  box-shadow: 15px 28px 58px #000b, 0 0 28px #c2dc4d25;
  transform: translate(-50%, -50%)
    translate3d(calc(var(--panel-x) * var(--world-open, 0)),
      calc(var(--panel-y) + 100px * (1 - var(--world-open, 0))),
      calc(var(--panel-z) - 220px * (1 - var(--world-open, 0))))
    rotateY(calc(var(--panel-yaw) + 26deg * (1 - var(--world-open, 0)))) rotateZ(var(--panel-roll));
}
.world-panel-left { --panel-x: -15.5vw; --panel-y: 1.5vh; --panel-z: -99px; --panel-yaw: -31deg; --panel-roll: -8deg; }
.world-panel-right { --panel-x: 16vw; --panel-y: -1.7vh; --panel-z: -122px; --panel-yaw: 29deg; --panel-roll: 7deg; }
.world-panel-center { --panel-x: 0vw; --panel-y: 0vh; --panel-z: 93px; --panel-yaw: -8deg; --panel-roll: -3deg; }
.world-panel img { width: 100%; min-height: 0; height: 100%; flex: 1 1 0; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.world-panel-left img { object-position: 50% 37%; }
.world-panel-right img { object-position: 50% 48%; }
.world-panel-center img { object-position: 50% 54%; }
.world-panel figcaption { padding: 8px 9px; border-top: 1px solid #7b8c5666; color: var(--lime); font: 700 clamp(8px, .9vw, 13px)/1.3 var(--mono); letter-spacing: .1em; }
.film-mist { position: absolute; inset: -21% -31%; pointer-events: none; background: url("./assets/mist-layer.webp") center / 100% auto no-repeat; mix-blend-mode: screen; }
.film-mist-back { opacity: var(--mist-back-opacity, 0); transform: translate3d(var(--mist-back-x, 0), var(--mist-back-y, 0), 0) rotate(-9deg) scale(1.3); filter: blur(7px); }
.film-mist-front { opacity: var(--mist-front-opacity, 0); transform: translate3d(var(--mist-front-x, 0), var(--mist-front-y, 0), 0) rotate(8deg) scale(1.15); }
.film-mist-intro { opacity: 0; }
.cinema-enabled .film-mist-intro { animation: mist-open 2.4s var(--ease) both; }
.cinema-enabled .portrait-plane img { animation: portrait-open 2.4s var(--ease) both; }
@keyframes mist-open {
  0% { opacity: .48; transform: translate3d(3%, 40%, 0) scale(1.2); }
  35% { opacity: .42; }
  100% { opacity: 0; transform: translate3d(-10%, -6%, 0) scale(1.42); }
}
@keyframes portrait-open { from { scale: 1.12; } to { scale: 1; } }
.film-grain { position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.94' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h140v140H0z'/%3E%3C/svg%3E"); }
.film-matte { position: absolute; inset: 0; background: linear-gradient(0deg, #090a09 0%, #090a09be 11%, transparent 43%, transparent 73%, #090a096a 100%), radial-gradient(ellipse at 50% 50%, transparent 42%, #090a0974 100%); pointer-events: none; }
.film-guides { position: absolute; left: 0; right: 0; top: 23px; bottom: 27px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; pointer-events: none; }
.film-guides span { width: 13px; height: 13px; border: 1px solid #f3f0e776; }
.film-guides span:nth-child(1) { border-width: 1px 0 0 1px; }
.film-guides span:nth-child(2) { justify-self: end; border-width: 1px 1px 0 0; }
.film-guides span:nth-child(3) { align-self: end; border-width: 0 0 1px 1px; }
.film-guides span:nth-child(4) { justify-self: end; align-self: end; border-width: 0 1px 1px 0; }
.cinema-poster { position: relative; z-index: 2; padding-bottom: 13px; opacity: var(--poster-opacity, 1); visibility: var(--poster-visibility, visible); transform: translate3d(0, var(--poster-y, 0), 0); }
.film-kicker, .eyebrow, .section-rule, .film-footer, .issue-divider, .about-portrait figcaption { font: 700 11px/1.35 var(--mono); letter-spacing: .12em; }
.film-kicker { display: flex; align-items: center; gap: 10px; color: #e9e8db; }
.film-kicker > span:first-child { width: 9px; height: 9px; background: var(--lime); box-shadow: 0 0 15px #bcff3577; }
.film-slash { color: var(--lime); }
.cinema-poster h1, .film-display { font: 700 clamp(68px, 16.3vw, 242px)/.94 var(--display); letter-spacing: -.06em; }
.cinema-poster h1 { margin-top: 12px; text-shadow: 0 10px 70px #08090895; animation: poster-in .95s var(--ease) both; }
@keyframes poster-in { from { opacity: 0; transform: translateY(28px) scale(.97); clip-path: inset(65% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 -15px -12px 0); } }
.poster-rule { width: min(560px, 100%); height: 1px; margin: clamp(20px, 3vw, 45px) 0 18px; background: linear-gradient(90deg, var(--lime) 0 35px, #dfdfcd69 35px 100%); }
.poster-info { display: flex; align-items: end; gap: clamp(18px, 4vw, 67px); }
.poster-info p { font-size: clamp(14px, 1.5vw, 20px); font-weight: 750; line-height: 1.48; }
.film-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.film-actions > .primary svg { color: #27350b; width: 15px; }
.film-title { display: none; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.cinema-enabled .film-title { display: block; }
.film-title-detail { top: 38%; opacity: var(--detail-opacity, 0); transform: translate3d(0, var(--detail-y, 0), 0); }
.film-title-detail .film-display { margin-top: clamp(23px, 2.7vw, 41px); font-size: clamp(68px, 10.7vw, 174px); text-shadow: 0 4px 35px #090a09bd; }
.film-title-issue { top: 56%; opacity: var(--issue-opacity, 0); transform: translate3d(0, calc(-50% + var(--issue-y, 0px)), 0) scale(var(--issue-scale, .8)); transform-origin: left center; }
.film-title-issue .film-display { margin-top: 16px; font-size: clamp(50px, 8.2vw, 127px); text-shadow: 0 5px 44px #090a09, 0 10px 75px #090a09c9; }
.film-footer { position: absolute; z-index: 3; left: 0; right: 0; bottom: 37px; display: none; align-items: center; justify-content: space-between; gap: 10px; padding-inline: 12px; color: #dfded4; }
.cinema-enabled .film-footer { display: flex; }
.film-scroll, .film-counter, .film-toggle, .film-end { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.film-scroll { color: #e0e0d4; text-shadow: 0 0 12px #000; }
.film-toggle, .film-end { border: 1px solid #62674d; background: #10120ef1; color: var(--text); min-height: 38px; padding: 0 11px; font: 750 12px/1.1 Manrope, Arial, sans-serif; letter-spacing: 0; }
.film-toggle svg, .film-end svg { color: var(--lime); width: 14px; height: 14px; }
.film-toggle:hover, .film-end:hover { border-color: var(--lime); }
.film-counter b { color: var(--lime); font-weight: 700; }
.film-meter { width: clamp(30px, 9vw, 136px); height: 1px; background: #dadacd5a; overflow: hidden; }
.film-meter i { display: block; height: 100%; background: var(--lime); transform: scaleX(var(--film-progress, 0)); transform-origin: left; }
.issue-divider { background: var(--lime); color: #1c250b; }
.issue-divider > div { height: 41px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.issue-divider svg { width: 19px; height: 19px; }
.gallery-anchor { background: var(--paper); }
.gallery-anchor :focus-visible { outline-color: #36530a; }

.section { padding-block: clamp(58px, 7.9vw, 128px); }
.section-rule { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; color: var(--muted); }
.section-rule > span:first-child { color: var(--lime); }
.about-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 7vw, 112px); margin-top: 35px; }
.about-portrait img { width: 100%; aspect-ratio: 1.14; object-fit: cover; object-position: center 40%; filter: contrast(1.1); }
.about-portrait figcaption { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--muted); padding: 12px 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.eyebrow svg { color: var(--lime); }
.about-copy h2, .booking-copy h2 { margin-top: 13px; font: 700 clamp(48px, 7.5vw, 115px)/.96 var(--display); letter-spacing: -.044em; }
.about-copy > p:not(.eyebrow), .booking-copy > p:not(.eyebrow) { color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; margin-top: 16px; max-width: 440px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--lime); font-size: 14px; font-weight: 800; padding-bottom: 6px; border-bottom: 1px solid #67774b; margin-top: 22px; }
.text-link:hover { border-color: var(--lime); }
.instagram-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 17px 24px; padding: clamp(15px, 3.2vw, 44px); margin-top: clamp(36px, 6vw, 90px); border: 1px solid #414833; background: radial-gradient(ellipse at 0 50%, #243114, transparent 66%), #131710; }
.insta-icon { display: grid; place-items: center; width: clamp(48px, 7.5vw, 100px); aspect-ratio: 1; background: #11130d; border: 1px solid #566735; color: var(--lime); font-size: clamp(21px, 3.3vw, 46px); }
.instagram-copy h3 { font: 600 clamp(28px, 4.3vw, 63px)/1 var(--display); letter-spacing: -.025em; margin-block: 7px; overflow-wrap: anywhere; }
.instagram-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; font-size: 13px; }
.instagram-posts { grid-column: 2 / -1; color: var(--muted); font-size: 13px; }
.instagram-posts summary { cursor: pointer; width: fit-content; padding-block: 4px; }
.instagram-posts ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.instagram-posts li a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #4d563b; }
.instagram-posts li a:hover { color: var(--lime); border-color: var(--lime); }

.process { border-block: 1px solid #333c29; background: radial-gradient(ellipse at top right, #26311a 0, transparent 63%), #151913; }
.process h2 { max-width: 950px; margin-top: 22px; font: 700 clamp(42px, 7.4vw, 104px)/.99 var(--display); letter-spacing: -.043em; }
.process-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 27px 0 0; padding: 0; border: 1px solid #49543a; }
.process-steps li { padding: clamp(15px, 3vw, 39px); transition: background .25s; }
.process-steps li + li { border-left: 1px solid #49543a; }
.process-steps li:hover { background: #28351b; }
.process-steps li span { font: 700 11px/1.3 var(--mono); letter-spacing: .12em; color: var(--lime); }
.process-steps h3 { margin: 10px 0 7px; font: 600 clamp(24px, 2.7vw, 40px)/1.1 var(--display); }
.process-steps p, .process-faq details p { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 520px; }
.process-faq { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 20px; margin-top: clamp(27px, 5vw, 72px); }
.process-faq h3 { font: 600 clamp(27px, 3.3vw, 53px)/1.05 var(--display); }
.process-faq details { padding: 13px 0; border-top: 1px solid #49543a; }
.process-faq details:last-child { border-bottom: 1px solid #49543a; }
.process-faq summary { color: var(--text); cursor: pointer; font-size: 14px; font-weight: 750; }
.process-faq summary:hover { color: var(--lime); }
.process-faq details p { margin-top: 9px; }
.process-faq details a { display: inline-block; margin-top: 8px; color: var(--lime); font-size: 13px; font-weight: 750; }

.booking { background: radial-gradient(ellipse at 20% 100%, #23311a 0, transparent 58%), #121611; border-block: 1px solid #343b2b; }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); align-items: start; gap: clamp(32px, 7vw, 110px); margin-top: 34px; }
.booking-form { display: grid; gap: 8px; background: #10140f; border: 1px solid #404a34; padding: clamp(17px, 3vw, 37px); }
.booking-form label { font-size: 13px; font-weight: 800; }
.booking-form label span { color: var(--lime); }
input, textarea { width: 100%; min-width: 0; border: 1px solid #494f40; color: var(--text); padding: 12px; border-radius: 0; background: #1d211a; font-size: 16px; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: #a6a79a; }
textarea { resize: vertical; }
.booking-form input { margin-bottom: 8px; }
.booking-form .button { justify-content: space-between; text-align: left; white-space: normal; margin-top: 8px; }
.footer { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.footer a:not(.logo) { font-size: 12px; font-weight: 800; color: var(--muted); }
.footer a:hover { color: var(--lime); }

dialog { color: var(--text); background: #171b14; border: 1px solid #606651; width: min(530px, 100% - 30px); max-height: calc(100dvh - 30px); padding: clamp(15px, 4vw, 28px); }
dialog::backdrop { background: #070908dc; backdrop-filter: blur(5px); }
dialog[open] { animation: message-in .25s var(--ease) both; }
@keyframes message-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.message-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; gap: 8px; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; background: transparent; color: var(--text); border: 1px solid #555b47; }
.icon-button:hover { background: var(--lime); color: var(--bg); border-color: var(--lime); }
.message h3 { font: 600 clamp(26px, 5vw, 38px)/1.1 var(--display); }
.message > p { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.message textarea { margin-top: 15px; }
.message-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.message > .copy-status { color: var(--lime); min-height: 1.5em; }

@media (max-width: 760px) {
  :root { --header: 58px; }
  .top-inner { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .logo { font-size: 21px; }
  .logo > svg { width: 23px; height: 23px; }
  .top-book { gap: 8px; padding-inline: 10px; }
  .cinema { --frame-height: max(555px, calc(100svh - var(--header))); --travel: clamp(1900px, 260svh, 2800px); }
  .cinema-stage { align-items: end; }
  .cinema-poster { padding-bottom: clamp(92px, 15svh, 142px); }
  .cinema-poster h1 { font-size: clamp(48px, 16.8vw, 121px); }
  .film-kicker, .film-footer { font-size: 9px; letter-spacing: .06em; }
  .film-kicker { gap: 7px; }
  .poster-rule { margin-top: 20px; margin-bottom: 13px; }
  .poster-info { align-items: start; flex-direction: column; gap: 15px; }
  .film-actions .button { min-height: 45px; padding-inline: 10px; font-size: 12px; gap: 6px; }
  .portrait-plane { left: 0; }
  .portrait-plane img { object-position: 50% 30%; }
  .portrait-plane::after { background: linear-gradient(0deg, #090a09 3%, #090a09b8 22%, #090a0911 73%), linear-gradient(90deg, #090a0975, transparent 78%); }
  .tattoo-plane { inset: -6% -10%; }
  .tattoo-plane img { object-position: 50% 57%; transform-origin: 54% 56%; }
  .tattoo-plane::after { background: linear-gradient(0deg, #090a09d6, transparent 72%); }
  .film-mist { background-size: auto 100%; inset: -26% -50%; }
  .film-title-detail { top: auto; bottom: 17%; }
  .film-title-detail .film-display { font-size: clamp(53px, 14vw, 95px); }
  .film-title-issue { top: 69%; }
  .film-title-issue .film-display { font-size: clamp(43px, 13.2vw, 93px); }
  .film-world { perspective: 730px; perspective-origin: 50% 39%; }
  .world-rig { transform-origin: 50% 39%; }
  .world-panel { --panel-width: clamp(102px, min(37vw, 30svh), 235px); left: 50%; top: 38%; }
  .world-panel-left { --panel-x: -26vw; --panel-z: -70px; }
  .world-panel-right { --panel-x: 25vw; --panel-z: -80px; }
  .world-panel-center { --panel-z: 62px; }
  .film-footer { bottom: 35px; padding-inline: 5px; }
  .film-guides { top: 14px; bottom: 17px; }
  .film-guides span { width: 9px; height: 9px; }
  .film-scroll, .film-counter { gap: 5px; }
  .film-scroll { display: none; }
  .about-grid, .booking-grid { grid-template-columns: minmax(0, 1fr); margin-top: 25px; }
  .instagram-card { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .instagram-card > a { grid-column: 1 / -1; justify-content: space-between; }
  .instagram-posts { grid-column: 1 / -1; }
  .process-steps, .process-faq { grid-template-columns: minmax(0, 1fr); }
  .process-steps li + li { border-left: 0; border-top: 1px solid #49543a; }
  .to-top { display: none; }
}
@media (max-height: 540px) {
  .cinema { --frame-height: max(218px, calc(100svh - var(--header))); --travel: clamp(1900px, 260svh, 2800px); }
  .cinema-stage { align-items: center; }
  .cinema-poster { padding-bottom: 21px; }
  .cinema-poster h1 { font-size: clamp(39px, min(15vw, 17svh), 112px); margin-top: 8px; }
  .poster-rule { margin-block: 10px; }
  .poster-info { gap: 8px 22px; }
  .poster-info p { font-size: 13px; line-height: 1.2; }
  .film-actions .button { min-height: 38px; }
  .film-title-detail { top: 33%; bottom: auto; }
  .film-title-detail .film-display { font-size: clamp(34px, min(12vw, 14svh), 82px); margin-top: 12px; }
  .film-title-issue .film-display { font-size: clamp(31px, min(9vw, 13svh), 76px); margin-top: 9px; }
  .world-panel { --panel-width: clamp(73px, min(27vw, 35svh), 180px); }
  .film-footer { bottom: 12px; }
  .film-guides { top: 12px; bottom: 8px; }
}
@media (max-width: 360px) {
  .film-actions .button { padding-inline: 8px; font-size: 11px; }
  .film-meter { display: none; }
}
@media (max-width: 300px) {
  :root { --gutter: 12px; }
  .top-inner { gap: 6px; }
  .logo { font-size: 18px; gap: 6px; }
  .logo small { font-size: 7px; }
  .logo > svg { width: 20px; height: 20px; }
  .top-book { font-size: 0; gap: 0; min-width: 30px; padding-inline: 7px; }
  .top-book svg { width: 14px; height: 14px; }
  .film-kicker { font-size: 8px; flex-wrap: wrap; }
  .film-counter { display: none; }
  .film-toggle, .film-end { min-height: 32px; padding-inline: 7px; font-size: 11px; }
  .film-footer { padding-inline: 0; gap: 4px; }
  .film-title-detail .film-display, .film-title-issue .film-display { font-size: 37px; }
  .about-copy h2, .booking-copy h2 { font-size: 40px; }
  .footer { flex-wrap: wrap; padding-block: 18px; }
  .booking-form { padding: 12px; }
}
@media (max-width: 760px) and (max-height: 540px) {
  .film-title-issue { top: 65%; }
  .world-panel { --panel-width: clamp(68px, min(32vw, 26svh), 142px); top: 35%; }
}
@media (max-height: 340px) {
  .cinema-poster { padding-bottom: 32px; }
  .poster-info p { display: none; }
}
:root[data-motion="reduced"] { scroll-snap-type: none; }
:root[data-motion="reduced"],
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) { scroll-snap-type: none; }
  :root:not([data-motion]),
  :root:not([data-motion]) *,
  :root:not([data-motion]) *::before,
  :root:not([data-motion]) *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}