/* ==========================================================================
   МУН — design tokens
   ========================================================================== */
:root{
  --c-eclipse: #0D1420;      /* цвет затмения — тёмно-синий (не чёрный) base bg */
  --c-panel:   #121C2E;      /* slightly lifted panel bg */
  --c-panel-2: #182338;      /* card bg */
  --c-milk:    #F1E8DA;      /* тёплый молочный — primary text */
  --c-mineral: #D3C1AE;      /* минеральный бежевый — secondary */
  --c-ember:   #B84B2F;      /* тлеющий уголь — accent */
  --c-ember-soft: #B84B2F33;
  --c-graphite:#9099AC;      /* холодный серо-синий — вторичный текст */
  --c-graphite-line: #3A4258;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1240px;
  --radius: 2px;
  --header-h: 84px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
  --transition-pop: 420ms cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
body{
  margin:0;
  background: var(--c-eclipse);
  color: var(--c-milk);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-open{ scroll-snap-type: none; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--font-display); font-weight:500; margin:0 0 .5em; color: var(--c-milk); }
p{ margin:0 0 1em; color: var(--c-mineral); }
ul{ list-style:none; margin:0; padding:0; }
button{
  font-family: inherit; cursor:pointer; color: inherit;
  background: none; border: none; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
}

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.slide .wrap{ position:relative; z-index:1; width:100%; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.section-label{
  font-size: .75rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-ember);
  margin: 0 0 .9em;
}
.section-label.light{ color: var(--c-mineral); }

/* Line — ring — line, echoing the printed bar-card's divider motif */
.divider{
  position: relative;
  width: 10px; height: 10px;
  border: 1.5px solid var(--c-ember);
  border-radius: 50%;
  margin: 24px auto;
}
.divider::before, .divider::after{
  content:''; position:absolute; top:50%; width: 56px; height:1px;
  background: var(--c-ember); transform: translateY(-50%);
}
.divider::before{ right: 100%; margin-right: 10px; }
.divider::after{ left: 100%; margin-left: 10px; }

/* subtle film-grain / shadow texture overlay across the whole page */
.noise{
  position: fixed; inset:0; pointer-events:none; z-index: 0;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex; align-items:center; justify-content:center;
  position: relative; overflow: hidden;
  padding: 14px 30px;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn::after{
  content:''; position:absolute; top:0; left:-75%; width:45%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); transition: left .65s ease;
  pointer-events: none;
}
.btn:hover::after{ left:130%; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--c-ember); color: var(--c-milk); }
.btn-primary:hover{ background:#a2431f; box-shadow: 0 10px 26px rgba(184,75,47,.35); }
.btn-outline{ border-color: var(--c-graphite-line); color: var(--c-milk); }
.btn-outline:hover{ border-color: var(--c-milk); }
.btn-ghost{ background: transparent; color: var(--c-milk); border-color: var(--c-milk); }
.btn-ghost:hover{ background: var(--c-milk); color: var(--c-eclipse); }

/* ==========================================================================
   Logo — with an eclipse-phase shadow that recedes as you scroll deeper
   into the site, so the mark visually "waxes" from hidden to fully whole.
   ========================================================================== */
.logo{ display:flex; align-items:center; }
.logo-mark{
  height: 46px; width:auto;
  display:block;
  transition: transform var(--transition), filter var(--transition);
}
.logo:hover .logo-mark{ transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(184,75,47,.4)); }
.logo-phase{ position:relative; display:inline-flex; }
.logo-phase-shadow{
  position:absolute; left:0; right:0; bottom:0;
  background: var(--c-eclipse);
  height: calc((1 - var(--moon-phase, 0)) * 100%);
  transition: height .7s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.footer-logo .logo-phase-shadow{ background: var(--c-panel); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 40;
  background: rgba(13,20,32,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-row{
  display:flex; align-items:center; gap: 32px;
  height: var(--header-h);
}
.main-nav{ display:flex; gap: 28px; margin-right:auto; margin-left: 48px; }
.main-nav a{
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-mineral);
  position: relative;
  padding: 4px 0;
  transition: color var(--transition);
}
.main-nav a:hover{ color: var(--c-milk); }
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--c-ember); transform: scaleX(0); transform-origin:left;
  transition: transform var(--transition);
}
.main-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap: 22px; }
.phone-link{ font-size:.85rem; letter-spacing:.03em; color: var(--c-milk); }
.header-actions .btn{ padding: 11px 22px; }

.burger{ display:none; background:none; border:none; width:32px; height:22px; position:relative; margin-left:auto; }
.burger span{
  position:absolute; left:0; right:0; height:1.5px; background: var(--c-milk);
  transition: transform var(--transition), opacity var(--transition);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:50%; margin-top:-.75px; }
.burger span:nth-child(3){ bottom:0; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction: column;
  padding: 8px clamp(20px,5vw,48px) 28px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mobile-nav a{
  padding: 14px 0; font-size: .95rem; letter-spacing:.05em;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--c-mineral);
}
.mobile-nav a:last-child{ border-bottom:none; color: var(--c-milk); margin-top: 6px; }

/* ==========================================================================
   Side slide navigation — one dot per full-screen section
   ========================================================================== */
.slide-nav{
  position: fixed; right: clamp(18px, 3vw, 34px); top:50%; z-index: 40;
  transform: translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap: 16px;
}
.slide-dot{
  width: 22px; height:22px; padding:0; background:none; border:none;
  display:flex; align-items:center; justify-content:center;
}
.slide-dot span{
  width:7px; height:7px; border-radius:50%;
  border: 1.5px solid var(--c-graphite-line);
  transition: background var(--transition), border-color var(--transition), transform var(--transition-pop);
}
.slide-dot:hover span{ border-color: var(--c-mineral); }
.slide-dot.is-active span{
  background: var(--c-ember); border-color: var(--c-ember);
  transform: scale(1.5);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  text-align:center;
}
.hero-bg{
  position:absolute; inset:-4%; z-index:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,75,47,.16), transparent 60%),
    linear-gradient(160deg, #172038 0%, #0D1420 55%, #070A12 100%);
  animation: heroBgDrift 22s ease-in-out infinite;
}
.hero-bg::before{
  content:'';
  position:absolute; inset:0;
  background-image: linear-gradient(115deg, transparent 40%, rgba(0,0,0,.35) 48%, transparent 56%),
                     linear-gradient(75deg, transparent 60%, rgba(0,0,0,.25) 68%, transparent 78%);
  background-size: 220% 220%;
  opacity:.8;
  animation: heroSweep 16s ease-in-out infinite;
}
/* "Затмение": мягкая тень медленно проходит через центр, где висит луна */
.hero-bg::after{
  content:'';
  position:absolute; left:50%; top:44%;
  width: min(70vw, 820px); height: min(70vw, 820px);
  border-radius:50%;
  transform: translate(-160%, -50%);
  background: radial-gradient(circle, rgba(3,5,10,.75), transparent 65%);
  filter: blur(36px);
  mix-blend-mode: multiply;
  animation: eclipseDrift 19s ease-in-out infinite;
}
@keyframes heroBgDrift{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-1.5%,-1%,0) scale(1.04); }
}
@keyframes heroSweep{
  0%{ background-position: 20% 10%; }
  50%{ background-position: 80% 90%; }
  100%{ background-position: 20% 10%; }
}
@keyframes eclipseDrift{
  0%{ transform: translate(-160%, -50%); opacity:.35; }
  45%{ transform: translate(-50%, -50%); opacity:.9; }
  55%{ transform: translate(-50%, -50%); opacity:.9; }
  100%{ transform: translate(60%, -50%); opacity:.35; }
}

/* Ночное небо: звёзды, созвездия, падающие лучи лунного света */
.hero-sky{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
.hero-constellations path{
  fill:none; stroke: var(--c-mineral); stroke-width:1; opacity:.16;
}
.ray{ stroke: url(#rayGrad); stroke-width:1.4; stroke-linecap:round; animation: rayFall 9s linear infinite; }
.ray-a{ animation-delay: 0s; }
.ray-b{ animation-delay: 1.8s; }
.ray-c{ animation-delay: 3.6s; }
.ray-d{ animation-delay: 5.4s; }
.ray-e{ animation-delay: 7.2s; }
@keyframes rayFall{
  0%{ transform: translate(0, -60px); opacity:0; }
  15%{ opacity:.75; }
  75%{ opacity:.55; }
  100%{ transform: translate(-40px, 260px); opacity:0; }
}
.star{ animation: starTwinkle 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hero-stars .star:nth-child(3n){ animation-duration: 5.5s; animation-delay: .4s; }
.hero-stars .star:nth-child(3n+1){ animation-duration: 3.8s; animation-delay: 1.1s; }
.hero-stars .star:nth-child(3n+2){ animation-duration: 6.2s; animation-delay: 2s; }
@keyframes starTwinkle{
  0%,100%{ opacity:.2; transform: scale(.85); }
  50%{ opacity:1; transform: scale(1.15); }
}

.hero-inner{ position:relative; z-index:1; padding-top: 112px; padding-bottom: 48px; }
.hero-inner > *{
  opacity: 0;
  animation: heroRise .9s cubic-bezier(.16,.8,.24,1) forwards;
}
.hero-inner > *:nth-child(1){ animation-delay: .1s; }
.hero-inner > *:nth-child(2){ animation-delay: .28s; }
.hero-inner > *:nth-child(3){ animation-delay: .5s; }
.hero-inner > *:nth-child(4){ animation-delay: .6s; }
.hero-inner > *:nth-child(5){ animation-delay: .78s; }
@keyframes heroRise{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform: none; }
}
@keyframes heroRiseCenter{
  from{ opacity:0; transform: translateX(-50%) translateY(14px); }
  to{ opacity:1; transform: translateX(-50%); }
}
.eyebrow{
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color: var(--c-graphite);
  margin-bottom: 34px;
}
.hero-logo{ position:relative; margin: 0 0 8px; }
.hero-logo h1{ position:relative; z-index:1; margin:0; }
.hero-logo-img{
  width: min(240px, 46vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.35)) brightness(1) saturate(1);
  transition: transform .35s cubic-bezier(.16,.8,.24,1), filter .9s ease;
  will-change: transform;
}
/* Когда герой не в фокусе (проскроллили дальше), луна тускнеет — как будто её
   снова закрывает тень, и полностью раскрывается, когда возвращаешься к ней. */
.hero.slide:not(.is-active) .hero-logo-img{
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.35)) brightness(.4) saturate(.6);
  transform: scale(.94);
}
/* Тёплая корона за луной — как ореол света на закате/затмении */
.hero-corona{
  position:absolute; left:50%; top:-4%;
  width: min(900px, 175vw); height: min(900px, 175vw);
  transform: translateX(-50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(232,150,92,.4) 0%, rgba(184,75,47,.26) 32%, rgba(120,44,60,.12) 55%, rgba(120,44,60,0) 72%);
  filter: blur(24px);
  z-index:0;
  pointer-events:none;
  animation: coronaPulse 15s ease-in-out infinite;
}
@keyframes coronaPulse{
  0%,100%{ opacity:.65; transform: translateX(-50%) scale(1); }
  50%{ opacity:1; transform: translateX(-50%) scale(1.07); }
}

/* Лучи света, пробивающие тьму по диагонали от луны */
.hero-beam{
  position:absolute; left:50%; top:10%;
  width: 130px; height: 620px;
  transform-origin: top center;
  background: linear-gradient(to bottom, rgba(241,232,218,.4), rgba(232,150,92,.16) 45%, transparent 82%);
  filter: blur(22px);
  mix-blend-mode: screen;
  z-index:0;
  pointer-events:none;
}
.hero-beam-a{
  transform: translateX(-72%) rotate(-16deg);
  animation: beamFlicker 9s ease-in-out infinite;
}
.hero-beam-b{
  transform: translateX(-28%) rotate(11deg);
  width: 100px;
  animation: beamFlicker 11s ease-in-out infinite 2s;
}
@keyframes beamFlicker{
  0%,100%{ opacity:.35; }
  50%{ opacity:.7; }
}

/* Дымка вокруг луны: медленно дрейфует, расходится и периодически исчезает */
.hero-mist{
  position:absolute; left:50%; top:6%;
  width: min(760px, 160vw); height: min(760px, 160vw);
  transform: translateX(-50%);
  z-index:0;
  pointer-events:none;
  overflow:visible;
  transition: transform .6s cubic-bezier(.16,.8,.24,1);
}
.mist-blob{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle, rgba(226,222,232,.4), rgba(226,222,232,0) 68%);
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity:0;
}
.mist-a{
  width:52%; height:52%; left:8%; top:18%;
  animation: mistDriftA 17s ease-in-out infinite;
}
.mist-b{
  width:46%; height:46%; left:46%; top:8%;
  background: radial-gradient(circle, rgba(184,146,109,.32), rgba(184,146,109,0) 70%);
  animation: mistDriftB 22s ease-in-out infinite;
  animation-delay: -7s;
}
.mist-c{
  width:58%; height:58%; left:24%; top:30%;
  animation: mistDriftC 26s ease-in-out infinite;
  animation-delay: -15s;
}
@keyframes mistDriftA{
  0%{ transform: translate(0,0) scale(.85); opacity:0; }
  18%{ opacity:.4; }
  45%{ transform: translate(7%,-5%) scale(1.15); opacity:.32; }
  70%{ transform: translate(-5%,4%) scale(1.3); opacity:.14; }
  88%{ opacity:0; }
  100%{ transform: translate(0,0) scale(.85); opacity:0; }
}
@keyframes mistDriftB{
  0%{ transform: translate(0,0) scale(.9); opacity:0; }
  22%{ opacity:.34; }
  50%{ transform: translate(-8%,6%) scale(1.2); opacity:.26; }
  75%{ transform: translate(5%,-4%) scale(1.05); opacity:.12; }
  90%{ opacity:0; }
  100%{ transform: translate(0,0) scale(.9); opacity:0; }
}
@keyframes mistDriftC{
  0%{ transform: translate(0,0) scale(1); opacity:0; }
  15%{ opacity:.24; }
  50%{ transform: translate(4%,5%) scale(1.35); opacity:.2; }
  78%{ transform: translate(-6%,-3%) scale(1.1); opacity:.1; }
  92%{ opacity:0; }
  100%{ transform: translate(0,0) scale(1); opacity:0; }
}
.hero-tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--c-milk);
  max-width: 30ch; margin: 0 auto 42px;
}
.hero-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

.scroll-hint{
  position:absolute; left:50%; bottom:34px;
  width:1px; height:52px; z-index:1;
  opacity:0;
  animation: heroRiseCenter .9s cubic-bezier(.16,.8,.24,1) forwards;
  animation-delay: 1.1s;
}
.scroll-hint span{
  position:absolute; inset:0; background: var(--c-graphite-line);
}
.scroll-hint span::after{
  content:''; position:absolute; top:0; left:-2.5px; width:6px; height:6px; border-radius:50%;
  background: var(--c-ember);
  animation: scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ top:0; opacity:0; } 20%{ opacity:1; } 100%{ top:100%; opacity:0; }
}

/* ==========================================================================
   Slides — every section below the hero is a full-screen "page" that snaps
   into place as you scroll. scroll-margin-top keeps the sticky header from
   overlapping the snapped edge. Sections stay in normal document flow (no
   nested scroll containers, no JS scroll hijacking) so mobile touch
   scrolling behaves exactly like plain native scrolling everywhere.
   ========================================================================== */
section{ position: relative; z-index:1; }
.slide{
  position:relative;
  min-height: 100svh;
  display:flex; align-items:center;
  overflow:hidden;
  scroll-snap-align: start;
  scroll-margin-top: var(--header-h);
  padding: clamp(120px, 15vw, 170px) 0 clamp(70px, 9vw, 110px);
}
.hero.slide{ padding:0; }

/* Oversized ghost numerals — the "typography meets background" layer sitting
   behind each slide's heading. Purely decorative, low-contrast, subtly
   settles/relaxes when its slide becomes active. */
.slide-ghost{
  position:absolute; z-index:0; pointer-events:none;
  top:50%; left:50%;
  transform: translate(-50%,-42%) scale(.96);
  font-family: var(--font-display);
  font-size: clamp(9rem, 34vw, 24rem);
  line-height:1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241,232,218,.09);
  opacity:.5;
  transition: transform 1.4s cubic-bezier(.16,.8,.24,1), opacity 1.4s ease;
  white-space: nowrap;
}
.slide.is-active .slide-ghost{ transform: translate(-50%,-42%) scale(1); opacity:.85; }

/* Headings reveal (blur + rise) each time their slide becomes active again —
   replayable, so scrolling back up feels as alive as scrolling down. */
.slide-heading{
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  line-height: 1.15;
  max-width: 16ch;
  opacity:0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1), filter .9s cubic-bezier(.16,.8,.24,1);
}
.slide.is-active .slide-heading{ opacity:1; transform:none; filter:blur(0); }

/* ==========================================================================
   Scroll reveal (secondary elements within a slide)
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  transition-delay: .1s;
}
[data-reveal].is-visible{ opacity:1; transform:none; }
.gallery-grid [data-reveal]:nth-child(2){ transition-delay: .1s; }
.gallery-grid [data-reveal]:nth-child(3){ transition-delay: .16s; }
.gallery-grid [data-reveal]:nth-child(4){ transition-delay: .22s; }
.gallery-grid [data-reveal]:nth-child(5){ transition-delay: .28s; }
.gallery-grid [data-reveal]:nth-child(6){ transition-delay: .34s; }
.contacts-grid [data-reveal].contacts-map{ transition-delay: .18s; }

/* About */
.about-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center;
}
.about-tags{
  display:flex; flex-wrap:wrap; gap: 10px 14px; margin-top: 22px;
}
.about-tags li{
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--c-milk); border: 1px solid var(--c-graphite-line);
  padding: 9px 16px; border-radius: 999px;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.about-tags li:hover{ border-color: var(--c-ember); background: rgba(184,75,47,.1); transform: translateY(-2px); }

.about-media{ display:grid; gap: 16px; }

/* Stories / news slide — circular "story" avatars, click opens the
   vertical story viewer modal below */
.stories-inner{ text-align:center; max-width: 900px; margin: 0 auto; }
.stories-inner .slide-heading{ margin-left:auto; margin-right:auto; }
.stories-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 22px 26px;
  margin-top: 28px;
}
.story-circle{
  display:flex; flex-direction:column; align-items:center; gap: 10px;
  width: 92px; background:none; border:none; padding:0;
}
.story-ring{
  width: 76px; height:76px; border-radius:50%; padding: 3px;
  background: linear-gradient(135deg, var(--c-ember), var(--c-mineral));
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--transition);
}
.story-circle:hover .story-ring{ transform: scale(1.06); }
.story-thumb{
  width:100%; height:100%; border-radius:50%;
  border: 2px solid var(--c-eclipse);
}
.story-thumb.tint-ember{ background: radial-gradient(circle at 32% 24%, #e8965c, #b84b2f 60%, #5c2013 100%); }
.story-thumb.tint-mineral{ background: radial-gradient(circle at 32% 24%, #e8ded0, #9099ac 62%, #333b4d 100%); }
.story-thumb.tint-graphite{ background: radial-gradient(circle at 32% 24%, #9099ac, #333b4d 62%, #0d1420 100%); }
.story-label{
  font-size:.72rem; letter-spacing:.02em; color: var(--c-mineral); line-height:1.3;
}

/* Story viewer */
.story-modal-panel{
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  padding: 24px;
}
.story-close{ position:absolute; top:18px; right: clamp(18px,4vw,32px); z-index:3; }
.story-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.06); color: var(--c-milk);
  font-size:1.7rem; line-height:1; display:flex; align-items:center; justify-content:center;
  z-index:3; transition: background var(--transition);
}
.story-nav:hover{ background: rgba(255,255,255,.14); }
.story-prev{ left: clamp(6px,3vw,28px); }
.story-next{ right: clamp(6px,3vw,28px); }

.story-card{
  position:relative;
  width: min(420px, 92vw);
  aspect-ratio: 9/16;
  max-height: 88svh;
  border-radius: 14px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background: var(--c-panel-2);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.story-card.tint-ember{ background: radial-gradient(circle at 30% 22%, rgba(232,150,92,.55), rgba(184,75,47,.5) 45%, #180d09 88%), var(--c-eclipse); }
.story-card.tint-mineral{ background: radial-gradient(circle at 30% 22%, rgba(232,222,208,.35), rgba(144,153,172,.35) 45%, #0f131c 88%), var(--c-eclipse); }
.story-card.tint-graphite{ background: radial-gradient(circle at 30% 22%, rgba(144,153,172,.4), rgba(24,35,56,.6) 45%, #060810 88%), var(--c-eclipse); }

.story-progress{
  position:absolute; top:14px; left:14px; right:14px; z-index:2;
  display:flex; gap:6px;
}
.story-progress span{
  flex:1; height:3px; border-radius:999px; background: rgba(255,255,255,.25); overflow:hidden;
}
.story-progress span::after{ content:''; display:block; height:100%; width:0; background: var(--c-milk); }
.story-progress span.is-done::after, .story-progress span.is-current::after{ width:100%; }

.story-content{
  position:relative; z-index:1;
  padding: 30px clamp(20px,5vw,32px) clamp(28px,6vw,36px);
  background: linear-gradient(to top, rgba(7,10,18,.9), rgba(7,10,18,.15) 68%, transparent);
}
.story-content h3{ font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 10px; }
.story-content p{ color: var(--c-mineral); margin: 0 0 22px; font-size:.92rem; }
.story-content .btn{ width:100%; }

@media (max-width: 600px){
  .story-modal-panel{ padding: 14px; }
  .story-card{ width:100%; max-height: 92svh; }
}

/* Formats intro — short transitional slide before the dedicated
   Karaoke/VIP slides */
.highlights-lead-inner{ text-align:center; max-width: 620px; margin: 0 auto; }
.highlights-lead-inner .slide-heading{ margin-left:auto; margin-right:auto; }
.highlights-lead-text{
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--c-mineral);
  margin-top: 6px;
}

/* Karaoke & VIP — each gets its own full slide for emphasis, photo and
   text side by side (order alternates between the two for rhythm) */
.hall-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
}
.hall-photo{ aspect-ratio: 4/5; }
.hall-text .slide-heading{ margin-bottom: 14px; }
.hall-text p{ margin:0; max-width: 46ch; }
.highlight-card-tag{
  display:inline-block;
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--c-ember); border: 1px solid var(--c-ember-soft);
  background: rgba(184,75,47,.1);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 14px;
}

/* placeholder photo blocks */
.ph-block{
  position:relative; overflow:hidden; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--c-panel-2), var(--c-panel) 60%, #0F1826);
  display:flex; align-items:center; justify-content:center;
  min-height: 140px;
  transition: transform .6s cubic-bezier(.16,.8,.24,1);
}
.ph-block::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(184,75,47,.14), transparent 55%);
  transition: opacity .6s ease;
}
.ph-block:hover{ transform: scale(1.025); z-index:1; }
.ph-block:hover::before{ opacity: 1.6; }
.ph-block span{
  position:relative; font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; color: var(--c-graphite);
  border: 1px solid var(--c-graphite-line); padding: 8px 16px; border-radius:999px;
  transition: border-color var(--transition), color var(--transition);
}
.ph-block:hover span{ border-color: var(--c-ember); color: var(--c-mineral); }
.about-media .ph-1{ aspect-ratio: 4/5; }

/* Menu CTA / Reviews band */
.menu-cta{
  background: radial-gradient(ellipse 70% 55% at 50% 30%, rgba(184,75,47,.1), transparent 65%), var(--c-panel);
}
.menu-cta-inner{ text-align:center; max-width: 680px; margin: 0 auto; }
.menu-cta-inner .slide-heading{ margin-left:auto; margin-right:auto; }
.menu-cta-text{ margin-bottom: 30px; }

.reviews{ background: radial-gradient(ellipse 70% 55% at 50% 30%, rgba(184,75,47,.08), transparent 65%), var(--c-eclipse); }
.reviews-stars{ display:flex; justify-content:center; gap:8px; margin-bottom: 22px; }
.reviews-stars svg{ width:18px; height:18px; fill: var(--c-ember); }

/* Gallery */
.gallery-intro{ text-align:center; margin-bottom: 36px; }
.gallery-intro .slide-heading{ margin-left:auto; margin-right:auto; }
.gallery-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
}
.gallery-grid .ph-block{ min-height: 0; aspect-ratio: 1/1; border-radius:0; }
.gallery-grid .g1{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery-grid .g4{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* Booking */
.booking .wrap{ max-width: 680px; text-align:center; }
.booking .slide-heading{ margin-left:auto; margin-right:auto; }
.booking .wrap > p{ max-width: 56ch; margin-left:auto; margin-right:auto; }
.booking .wrap > .btn{ margin-top: 10px; }

/* Contacts + footer */
.contacts{ background: var(--c-panel); align-items:flex-start; }
.contacts .wrap{ padding-top: 4px; }
.contacts-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items:stretch; }
.contact-list{ margin: 30px 0; display:grid; gap: 22px; }
.contact-list dt{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--c-graphite); margin-bottom:6px;
}
.contact-list dd{ margin:0; font-size: 1.02rem; color: var(--c-milk); }
.contact-list dd a:hover{ color: var(--c-ember); }
.contact-list .muted{ color: var(--c-graphite); font-size:.9rem; }
.social-row{ display:flex; gap: 14px; }
.social-icon{
  width: 40px; height:40px; border:1px solid var(--c-graphite-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--c-milk); transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.social-icon svg{ width:18px; height:18px; }
.social-icon:hover{ border-color: var(--c-ember); color: var(--c-ember); transform: translateY(-3px); }
.contact-cta{ display:flex; gap:16px; flex-wrap:wrap; }

.contacts-map{
  min-height: 280px; border: 1px solid var(--c-graphite-line); overflow:hidden; border-radius: var(--radius);
  filter: grayscale(.4) invert(.92) contrast(.9);
}
.contacts-map iframe{ width:100%; height:100%; min-height:280px; border:0; }

.contacts-footer{
  margin-top: clamp(50px, 7vw, 84px);
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap: 16px;
}
.footer-logo .logo-mark{ height: 40px; }
.footer-motto{
  font-family: var(--font-display); font-style: italic; color: var(--c-mineral); font-size:1rem;
}
.footer-bottom{
  display:flex; gap: 22px; flex-wrap:wrap; justify-content:center;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--c-graphite);
}

/* ==========================================================================
   Menu page (menu.html) — the menu used to live in a popup; it's now a
   real page of its own, so this is plain document flow throughout (no
   modal takeover, no locked scroll) with the site's usual sticky header.
   ========================================================================== */
.menu-page-head{
  padding: clamp(130px, 16vw, 180px) 0 40px;
  text-align: center;
}
.menu-page-intro{ max-width: 56ch; margin: 0 auto 30px; font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--c-milk); }
.menu-page-head .menu-segment{ margin-left:auto; margin-right:auto; }

.menu-page-list{ padding: 8px 0 clamp(90px, 10vw, 130px); }

.cart-view{ padding: clamp(130px, 16vw, 180px) 0 clamp(70px, 9vw, 110px); min-height: 100svh; }
.cart-view-inner{ max-width: 720px; }
.cart-view-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cart-view-head h2{ margin:0; font-size: 1.6rem; }

.menu-page-footer{
  padding: 50px 0 clamp(90px, 10vw, 110px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.menu-page-footer .wrap{
  display:flex; flex-direction:column; align-items:center; gap: 20px; text-align:center;
}
.menu-page-footer-info{
  display:flex; gap: 20px; flex-wrap:wrap; justify-content:center;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--c-graphite);
}

/* ==========================================================================
   Mobile sticky action bar
   ========================================================================== */
.sticky-actions{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index: 45;
  grid-template-columns: 1fr 1fr;
  background: rgba(13,20,32,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px clamp(14px,4vw,24px);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  gap: 10px;
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.16,.8,.24,1);
}
.sticky-actions.is-visible{ transform: translateY(0); }
.sticky-btn{
  text-align:center; padding: 13px; border-radius: var(--radius);
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
}
.sticky-call{ border: 1px solid var(--c-graphite-line); color: var(--c-milk); }
.sticky-book{ background: var(--c-ember); color: var(--c-milk); }

/* ==========================================================================
   Floating cart bar — lives only on menu.html, the "one place" summary of
   everything added from the menu, so a guest can hand the total + list to
   a waiter. Hidden while the order view itself is open (redundant there).
   ========================================================================== */
.cart-bar{
  display:flex; align-items:center; gap: 12px;
  position: fixed; left:50%; bottom: 20px; z-index: 46;
  transform: translate(-50%, 160%);
  background: var(--c-ember); color: var(--c-milk); border:none;
  border-radius: 999px;
  padding: 15px 24px;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  white-space: nowrap;
  box-shadow: 0 16px 34px rgba(0,0,0,.4);
  transition: transform .35s cubic-bezier(.16,.8,.24,1);
}
.cart-bar.is-visible{ transform: translate(-50%, 0); }
.cart-bar-count{
  background: rgba(255,255,255,.24); border-radius: 999px;
  min-width: 20px; padding: 3px 8px; font-size:.75rem;
}
.cart-bar-total{ font-weight:500; letter-spacing:.02em; }
@media (max-width: 760px){
  .cart-bar{ bottom: calc(16px + env(safe-area-inset-bottom)); padding: 13px 20px; }
}

/* ==========================================================================
   Menu / booking modal — full-page takeover, native document scroll
   ==========================================================================
   Earlier versions used position:fixed with an internally scrolling div.
   That combination is a well-known source of touch-scroll dead zones on
   mobile Safari, and two rounds of targeted fixes for it didn't resolve
   real-device reports. So instead of fighting that pattern, the modal now
   simply replaces the page content in normal document flow — the actual
   page/window scrolls it, which every mobile browser handles natively
   without any of those quirks. The head + segment toggle use
   position:sticky (also plain, native, no known mobile bugs) to stay put
   while the body scrolls underneath.
   ========================================================================== */
.menu-modal{ display:none; }
.menu-modal.is-open{ display:block; }

body.modal-open > .noise,
body.modal-open > .site-header,
body.modal-open > .slide-nav,
body.modal-open > main,
body.modal-open > .sticky-actions{
  display:none;
}

.menu-modal-panel{
  min-height: 100svh;
  background: var(--c-eclipse);
  display:flex; flex-direction:column;
  animation: menuModalIn .3s cubic-bezier(.16,.8,.24,1);
}
@keyframes menuModalIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.menu-modal-inner{
  width:100%; max-width: 1440px; margin:0 auto;
  display:flex; flex-direction:column; flex:1;
}

.menu-modal-sticky{
  position:sticky; top:0; z-index:2;
  background: var(--c-eclipse);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.menu-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(20px,4vw,48px) 18px;
}
.menu-modal-head h3{ margin:0; font-size:1.6rem; }
.menu-modal-close{
  background:none; border:none; color: var(--c-milk); font-size:1.8rem; line-height:1;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition: background var(--transition), transform var(--transition);
}
.menu-modal-close:hover{ background: rgba(255,255,255,.08); transform: rotate(90deg); }

.menu-segment{
  position: relative;
  display:flex; gap: 4px;
  margin: 0 clamp(20px,4vw,48px) 18px;
  max-width: 360px;
  padding: 4px;
  background: var(--c-panel-2); border: 1px solid var(--c-graphite-line); border-radius: 999px;
}
.menu-segment-indicator{
  position:absolute; top:4px; bottom:4px; left:0; width:0;
  background: var(--c-milk); border-radius: 999px;
  transition: transform var(--transition-pop), width var(--transition-pop);
  z-index:0;
}
.menu-segment-btn{
  position:relative; z-index:1; flex:1;
  background: transparent; border: none; color: var(--c-mineral);
  padding: 10px 16px; border-radius: 999px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  transition: color var(--transition);
}
.menu-segment-btn.is-active{ color: var(--c-eclipse); }

.menu-modal-body{
  flex:1;
  padding: 20px clamp(20px,4vw,48px) 40px;
  opacity:1; transition: opacity .2s ease;
  display:grid;
  grid-template-columns: 1fr;
  align-items:start;
  column-gap: clamp(32px, 4vw, 56px);
}
.menu-modal-body.is-fading{ opacity:0; }
.menu-loading, .menu-error{ color: var(--c-graphite); text-align:center; padding: 60px 0; }

.menu-category-title{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--c-ember);
  margin: 26px 0 14px;
}
.menu-category:first-child .menu-category-title{ margin-top: 6px; }

.menu-item{ padding: 14px 0; border-bottom: 1px dashed rgba(255,255,255,.09); }
.menu-item:last-child{ border-bottom:none; }
.menu-item-row{ display:flex; align-items:center; gap:8px; }
.menu-item-name{ color: var(--c-milk); font-size:.98rem; }
.menu-item-leader{ flex:1; border-bottom: 1px dotted var(--c-graphite-line); align-self:center; margin-top: -2px; }
.menu-item-price{ color: var(--c-ember); font-size:.95rem; white-space:nowrap; }
.menu-item-desc{ margin: 4px 0 0; font-size:.85rem; color: var(--c-graphite); }

/* Add-to-order control on each item — a round "+" that turns into a
   [− qty +] stepper once the item is in the cart. */
.menu-qty{ display:flex; align-items:center; flex-shrink:0; }
.menu-qty-add{
  width: 27px; height:27px; border-radius:50%;
  border: 1px solid var(--c-graphite-line); background: transparent; color: var(--c-milk);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; line-height:1;
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
}
.menu-qty-add:hover{ border-color: var(--c-ember); color: var(--c-ember); }
.menu-qty-add:active{ transform: scale(.9); }
.menu-qty-stepper{
  display:flex; align-items:center; gap:2px;
  border: 1px solid var(--c-ember-soft); background: rgba(184,75,47,.1);
  border-radius: 999px; padding: 3px;
}
.menu-qty-stepper button{
  width:23px; height:23px; border-radius:50%; border:none; background:transparent; color: var(--c-milk);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; line-height:1;
  transition: background var(--transition), color var(--transition);
}
.menu-qty-stepper button:hover{ background: rgba(184,75,47,.28); color: var(--c-ember); }
.menu-qty-count{ min-width:18px; text-align:center; font-size:.82rem; color: var(--c-milk); }

.menu-note{
  margin:0; padding: 14px clamp(20px,4vw,48px); font-size:.72rem; color: var(--c-graphite);
  border-top: 1px solid rgba(255,255,255,.07); text-align:center;
}

.booking-modal-inner{ max-width: 900px; }
.booking-modal-body{
  flex:1;
  padding: 24px clamp(20px,4vw,48px) 40px;
}
.booking-modal-body iframe{ display:block; width:100%; height:900px; }
.booking-modal-fallback{
  margin: 16px 0 0; font-size:.8rem; color: var(--c-graphite); text-align:center;
}
.booking-modal-fallback a:hover{ color: var(--c-ember); }

/* Cart modal — the itemised list + total meant to be shown to the waiter */
.cart-modal-inner{ max-width: 720px; }
.cart-modal-body{ flex:1; padding: 24px clamp(20px,4vw,48px) 8px; }
.cart-empty{ color: var(--c-graphite); text-align:center; padding: 60px 0; }
.cart-item{
  display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap: 14px;
  padding: 16px 0; border-bottom: 1px dashed rgba(255,255,255,.09);
}
.cart-item:last-child{ border-bottom:none; }
.cart-item-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cart-item-name{ color: var(--c-milk); font-size:.98rem; }
.cart-item-line{ color: var(--c-ember); font-size:.85rem; }
.cart-item-stepper{ flex-shrink:0; }
.cart-item-remove{
  background:none; border:none; color: var(--c-graphite); font-size:1.3rem; line-height:1;
  width:28px; height:28px; flex-shrink:0;
  transition: color var(--transition);
}
.cart-item-remove:hover{ color: var(--c-ember); }
.cart-modal-footer{
  padding: 20px clamp(20px,4vw,48px) clamp(28px,5vw,44px);
  border-top: 1px solid rgba(255,255,255,.07);
}
.cart-total-row{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--c-milk);
  margin-bottom: 14px;
}
.cart-total-row span:last-child{ color: var(--c-ember); }
.cart-hint{ font-size:.82rem; color: var(--c-graphite); margin-bottom: 20px; }
.cart-modal-actions{ display:flex; gap: 14px; flex-wrap:wrap; }

@media (min-width: 640px){
  .menu-modal-body{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px){
  .menu-modal-body{ grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .main-nav{ display:none; }
  .header-actions .btn{ display:none; }
  .burger{ display:block; }
  .slide-nav{ display:none; }
}

@media (max-width: 760px){
  :root{ --header-h: 68px; }
  .header-row{ height: var(--header-h); }
  .header-actions .phone-link{ display:none; }
  .mobile-nav.is-open{ display:flex; }

  .slide{ padding: clamp(100px, 20vw, 130px) 0 60px; }

  .about-grid, .contacts-grid{ grid-template-columns: 1fr; gap: 28px; }
  .about-media .ph-1{ aspect-ratio: 16/9; }
  .hall-grid{ grid-template-columns: 1fr; gap: 24px; }
  .hall-photo{ aspect-ratio: 16/9; }

  .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .gallery-grid .g1, .gallery-grid .g4{ grid-column: span 1; grid-row: span 1; aspect-ratio: 1/1; }

  .booking-modal-body iframe{ height: 700px; }

  .sticky-actions{ display:grid; }
  .contacts-footer{ padding-bottom: 90px; }

  .hero-inner{ padding-top: 96px; padding-bottom: 36px; }
  .slide-ghost{ opacity:.3; }
  .slide.is-active .slide-ghost{ opacity:.5; }
}

@media (min-width: 1081px){
  .mobile-nav{ display:none !important; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html{ scroll-snap-type: none; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero-inner > *, .scroll-hint{ opacity:1; }
  .hero-bg, .hero-bg::before{ animation:none; }
  .slide-heading, .slide-ghost{ opacity:1; transform:none; filter:none; }
  .hero.slide:not(.is-active) .hero-logo-img{ filter:none; transform:none; }
}