:root{
  --bg:#0A0908; --ink:#F5F2EC; --ox:#6E1F23; --brass:#C9A36B; --brass-2:#A8844D; --slate:#3B4048; --slate-2:#A9AEB7;
  --card:rgba(18,15,13,.66); --line:rgba(201,163,107,.24); --on-brass:#150F07;
  --display:'Prata',Georgia,serif; --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --gut:clamp(18px,4.4vw,64px); --top:76px; --hud:76px;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-snap-type:y proximity}
body{overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:400 clamp(15px,.5vw + 12px,17px)/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea,summary{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip{position:fixed;left:-999px;top:8px;background:var(--brass);color:var(--on-brass);padding:10px 16px;z-index:100}
.skip:focus{left:8px}
#gl{position:fixed;top:0;left:0;width:100vw;height:100lvh;z-index:0;display:block;pointer-events:none}
.no-gl body{background:radial-gradient(90% 60% at 75% 10%,#2a1114 0%,var(--bg) 60%)}
.no-gl #gl{display:none}

/* ---------- верхняя строка ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--top);padding:0 var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:linear-gradient(rgba(10,9,8,.88),rgba(10,9,8,0));pointer-events:none}
.top>*{pointer-events:auto}
.menu-btn{justify-self:start;display:flex;align-items:center;gap:14px;min-height:44px;background:none;border:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.menu-btn[aria-expanded=true] .bars i:first-child{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] .bars i:last-child{top:4px;transform:rotate(-45deg)}
.logo{font:400 clamp(17px,1.9vw,22px) var(--display);letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center}
.top-r{justify-self:end;display:flex;align-items:center;gap:14px}
.phone{font-weight:700;color:var(--brass);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
/* ---------- меню ---------- */
.menu{position:fixed;inset:0;z-index:35;background:rgba(10,9,8,.96);display:grid;place-items:center;padding:calc(var(--top) + 10px) var(--gut) calc(var(--hud) + 10px);clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease);overflow:auto}
.menu[hidden]{display:none}
.menu.open{clip-path:inset(0 0 0 0)}
.menu ol{list-style:none;padding:0;width:min(760px,100%)}
.menu a{display:flex;align-items:baseline;gap:22px;padding:7px 0;border-bottom:1px solid var(--line);font:400 clamp(20px,3.4vw,34px)/1.25 var(--display);transition:color .3s,padding .5s var(--ease)}
.menu a i{font:600 12px var(--body);letter-spacing:.2em;color:var(--brass);min-width:2ch;font-style:normal}
.menu a:hover,.menu a[aria-current=true]{color:var(--brass);padding-left:14px}

/* ---------- слайды ---------- */
.stage{position:fixed;inset:0;z-index:10;overflow:hidden}
.slide{position:absolute;inset:0;will-change:transform,opacity;visibility:hidden;pointer-events:none}
.slide.vis{visibility:visible}
.slide.on{pointer-events:auto}
.body{height:100%;overflow-y:auto;overflow-x:hidden;padding:var(--top) var(--gut) var(--hud);display:flex;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.body::-webkit-scrollbar{display:none}
.inner{margin-block:auto;width:min(580px,100%);padding-block:24px}
.inner.left{margin-left:var(--gut)}
.inner.right{margin-left:auto;margin-right:var(--gut)}
.inner.wide{width:min(1100px,100%)}
.inner.bottom{width:min(720px,100%);margin-top:auto;margin-bottom:0;margin-left:var(--gut)}
.inner.bottom.wide{width:min(980px,100%)}
.inner.center{margin-inline:auto;text-align:center}
.title{font:400 clamp(30px,4.6vw,62px)/1.1 var(--display);margin-bottom:.55em;color:var(--ink)}
.h1{font:400 clamp(34px,5vw,64px)/1.05 var(--display);letter-spacing:.04em;margin-bottom:.2em;color:var(--brass)}
.ln{display:block;overflow:hidden;padding-bottom:.12em}
.ln>*{display:inline-block;transform:translateY(112%)}
.room.on .ln>*{transform:none;transition:transform 1.15s var(--ease) .25s}
h3{font:400 clamp(18px,1.7vw,22px)/1.3 var(--display);margin-bottom:6px;color:var(--ink)}
p{color:var(--slate-2);max-width:58ch}
.inner.center p{margin-inline:auto}
.lead{font-size:clamp(16px,1.5vw,19px)}
.tagline{font:400 clamp(20px,2.2vw,28px)/1.2 var(--display);color:var(--ink);margin:0 auto 6px}
.years{font:400 clamp(18px,1.8vw,24px)/1.2 var(--display);color:var(--brass);letter-spacing:.08em;margin:0 auto 14px}
.sub{max-width:54ch;margin:0 auto 22px;color:var(--ink);font-size:.98em}
small{color:var(--slate-2);font-size:13px;display:block;margin-top:12px}
.r{opacity:0;transform:translate3d(36px,0,0);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.room.on .r{opacity:1;transform:none;transition-delay:calc(.35s + var(--i,0) * .07s)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;font:700 12px var(--body);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--brass);border-radius:0;transition:transform .45s var(--ease),background .3s,color .3s,box-shadow .45s}
.btn-gold{background:var(--brass);color:var(--on-brass)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(201,163,107,.6)}
.btn-line:hover{border-color:var(--brass);color:var(--brass);box-shadow:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.actions.center{justify-content:center}

/* цифры и регалии */
.num-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.num{padding:22px 18px 20px 0;border-bottom:1px solid var(--line)}
.num:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}
.num b{display:block;font:400 clamp(30px,3.6vw,48px)/1 var(--display);color:var(--brass);margin-bottom:8px}
.num span{color:var(--slate-2);font-size:14px}
.regalia{list-style:none;padding:0;margin-top:22px;display:grid;gap:10px;font-size:14px}
.regalia li::before{content:'◆';color:var(--brass);font-size:9px;vertical-align:middle;margin-right:10px}

/* обо мне */
.about-part{padding:14px 0;border-top:1px solid var(--line)}
.about-part h3{color:var(--brass);font-size:18px}
.about-part p{font-size:.95em}

/* форматы */
.repertoire{margin-top:6px;border-top:1px solid var(--line);display:grid}
.rep{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;color:var(--ink);transition:color .3s,padding .5s var(--ease)}
.rep h3{margin:0;font-size:clamp(20px,2.2vw,28px);transition:color .3s}
.rep::after{content:'→';color:var(--brass);opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .5s var(--ease)}
.rep:hover,.rep[aria-pressed=true]{padding-left:14px}
.rep:hover h3,.rep[aria-pressed=true] h3{color:var(--brass)}
.rep[aria-pressed=true]::after,.rep:hover::after{opacity:1;transform:none}

/* видео */
.videos{list-style:none;padding:0;margin-top:20px;display:grid;gap:10px}
.video{display:flex;align-items:center;gap:18px;padding:14px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.video h3{margin:0}
.video span{font-size:13px;color:var(--slate-2)}
.play{position:relative;flex:0 0 52px;height:52px;border-radius:50%;background:transparent;border:1px solid var(--brass);transition:background .25s}
.play::after{content:'';position:absolute;left:21px;top:16px;border-left:13px solid var(--brass);border-top:9px solid transparent;border-bottom:9px solid transparent}
.play:hover{background:rgba(201,163,107,.15)}

/* принципы */
.words{font:400 clamp(17px,1.9vw,24px)/1.45 var(--display);color:var(--brass);margin-bottom:26px;max-width:40ch}
.pr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.pr{padding-top:12px;border-top:1px solid var(--line)}
.pr p{font-size:.94em}

/* акты */
.acts{list-style:none;counter-reset:act;margin-top:4px}
.acts li{counter-increment:act;display:grid;grid-template-columns:78px 1fr;gap:2px 16px;padding:13px 0;border-top:1px solid var(--line);align-items:baseline}
.acts li:last-child{border-bottom:1px solid var(--line)}
.acts li::before{content:'Акт ' counter(act,upper-roman);grid-row:span 2;font:400 14px/1.6 var(--display);color:var(--brass)}
.acts h3{margin:0}
.acts p{color:var(--slate-2);font-size:15px}

/* пакет */
.package{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:6px}
.pack{background:rgba(10,9,8,.86);padding:18px 22px}
.pack ul{list-style:none;margin-top:8px}
.pack li{padding:6px 0;border-bottom:1px solid rgba(201,163,107,.12);font-size:.94em}
.pack li::before{content:'◆';color:var(--brass);font-size:9px;vertical-align:middle;margin-right:10px}
.pack-total{margin-top:16px;font:400 clamp(17px,1.9vw,24px)/1.35 var(--display);color:var(--brass);max-width:36ch}

/* FAQ */
.faq{margin-top:4px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:15px 40px 15px 0;font:400 clamp(16px,1.5vw,19px)/1.35 var(--display);position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:10px;font:300 28px var(--body);color:var(--brass);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 16px;font-size:.95em}

/* финал */
.agency{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.agency h3{margin:0}
.agency p{font-size:14px}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;font-size:13px;color:var(--slate-2)}
.foot a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s}
.foot a:hover{color:var(--brass)}

/* HUD */
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* диалог отзывов */
dialog{border:1px solid var(--line);background:#12100E;color:var(--ink);width:min(1100px,94vw);max-height:90vh;overflow:auto;padding:56px 28px 28px;margin:auto}
dialog::backdrop{background:rgba(10,9,8,.88)}
.q-close{position:absolute;top:10px;right:16px;background:none;border:0;font-size:32px;color:var(--brass);width:48px;height:48px}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.rv-grid img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border:1px solid var(--line)}

@media (min-width:901px){
  .inner.bottom{padding:28px 32px 20px;margin-left:calc(var(--gut) - 32px);background:linear-gradient(to top,rgba(10,9,8,.86) 55%,rgba(10,9,8,0))}
  .inner.bottom.center{margin-inline:auto}
}

/* ---------- телефоны: объект сверху, текст снизу ---------- */
@media (max-width:900px){
  :root{--top:60px;--hud:64px}
  .top{grid-template-columns:auto 1fr auto}
  .logo{justify-self:center;font-size:15px;letter-spacing:.08em}
  .menu-lbl,  .phone{font-size:13px}
    .body{padding-inline:0;padding-top:calc(var(--top) + 32svh)}
  .inner,.inner.left,.inner.right,.inner.bottom,.inner.bottom.wide,.inner.wide{width:100%;margin:auto 0 0;padding:26px var(--gut) 12px;background:linear-gradient(to top,rgba(10,9,8,.95) 68%,rgba(10,9,8,0));min-height:max-content}
  .title{font-size:clamp(25px,7.2vw,36px);margin-bottom:.4em}
  .h1{font-size:clamp(28px,8.4vw,40px)}
  p{font-size:14px;line-height:1.55}
  .sub{font-size:14px;margin-bottom:14px}
  .btn{min-height:44px;padding:0 18px;font-size:11px}
  .actions{margin-top:14px;gap:8px}
  .num{padding:14px 10px 12px 0}.num:nth-child(even){padding-left:12px}
  .num b{font-size:26px}
  .regalia{margin-top:14px;font-size:13px;gap:6px}
  .about-part{padding:10px 0}
  .rep{padding:11px 0}
  .video{padding:10px;gap:12px}
  .play{flex-basis:44px;height:44px}.play::after{left:17px;top:12px}
  .words{font-size:16px;margin-bottom:14px}
  .pr-grid{grid-template-columns:1fr;gap:12px}
  .pr p{font-size:13px}
  .acts li{grid-template-columns:62px 1fr;padding:9px 0}
  .package{grid-template-columns:1fr}
  .pack{padding:12px 16px}
  .pack li{padding:4px 0;font-size:13px}
  .faq summary{padding:12px 36px 12px 0}
  dialog{padding:52px 14px 14px}
  .rv-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px) and (max-height:700px){.body{padding-top:calc(var(--top) + 22svh)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .ln>*,.r{transform:none;opacity:1}
}
/* имя уже собрано частицами в 3D: заголовок остаётся для поисковиков и скринридеров */
.gl-ready #hero .h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{font:700 11px/1.6 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.inner.center .eyebrow{margin-inline:auto}
.menu a i{min-width:3ch}

/* ---------- арочные переходы между слайдами ---------- */
.arch{position:fixed;z-index:12;pointer-events:none;border:1px solid var(--brass);border-bottom:0;opacity:0;box-shadow:0 0 40px rgba(201,163,107,.18)}
.slide{background-color:transparent}

/* ---------- золотой градиент заголовков: только первый слайд ---------- */
:root{--gold-text:linear-gradient(100deg,#8C6A1F 0%,#F3E3B3 42%,#C9A36B 58%,#8C6A1F 100%)}
#hero .h1,#hero .tagline,#hero .years{width:fit-content;max-width:100%;margin-inline:auto;background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.title,h3{background:none;-webkit-text-fill-color:currentColor}

/* ---------- после Зала V: обычная прокрутка вниз ---------- */
.body.rest{display:block}
.block{display:flex;min-height:calc(100svh - var(--top) - var(--hud))}
.block .inner{margin-block:auto}
#rest .r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease),transform 1s var(--ease)}
#rest .block.seen .r{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * .07s)}
#rest .ln>*{transform:translateY(112%)}
#rest .block.seen .ln>*{transform:none;transition:transform 1.1s var(--ease) .1s}

/* «Как я веду»: структура блока из pavel-loiko-3d */
.vcard{position:relative;display:block;width:100%;max-width:min(680px,calc((100svh - 340px) * 1.7778));min-width:min(100%,320px);aspect-ratio:16/9;margin-top:22px;overflow:hidden;border:1px solid var(--line);background:#12100E}
.vcard img{width:100%;height:100%;object-fit:cover;filter:brightness(.78);transition:transform 1.2s var(--ease),filter .4s}
.vcard:hover img{transform:scale(1.04);filter:brightness(.9)}
.vplay{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid var(--brass);background:rgba(10,9,8,.3)}
.vplay::after{content:'';position:absolute;left:30px;top:23px;border-left:19px solid var(--brass);border-top:14px solid transparent;border-bottom:14px solid transparent}
.vcap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(to top,rgba(10,9,8,.85),rgba(10,9,8,0))}
.vcap b{display:block;font:400 clamp(22px,2.6vw,34px)/1.15 var(--display);color:var(--ink)}
.vcap small{display:block;color:var(--slate-2);font-size:14px;margin-top:2px}
.vlinks{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:14px}
.vlinks a{display:inline-flex;align-items:center;min-height:44px;color:var(--brass);border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.vlinks a:hover{color:var(--ink);border-color:var(--brass)}
@media (max-width:900px){
  .body.rest{padding-top:var(--top)}
  .block{padding-top:32svh}
  .vplay{width:60px;height:60px;margin:-30px 0 0 -30px}
  .vplay::after{left:24px;top:18px;border-left-width:15px;border-top-width:11px;border-bottom-width:11px}
  .vcap{padding:14px 16px}
}
@media (max-width:900px) and (max-height:700px){.block{padding-top:22svh}}

/* блок «Ведущий и DJ» внутри обычной прокрутки: панель снизу, фото в 3D выше (как на сайте) */
#rest .block .inner.bottom{margin-top:auto;margin-bottom:0}
#package{align-items:flex-end}

/* ---------- залы I–V: нативная прокрутка + «залипающая» сцена (как на loiko.netlify.app) ---------- */
main{position:relative;z-index:10}
#gallery{position:relative;height:calc(var(--R,5) * 100vh);height:calc(var(--R,5) * 100svh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.panels{position:absolute;inset:0;pointer-events:none}
.snap{position:absolute;left:0;width:1px;height:100vh;height:100svh;scroll-snap-align:start}
.room{position:absolute;inset:0;display:flex;padding:var(--top) var(--gut) var(--hud);will-change:transform,opacity;pointer-events:none;visibility:hidden}
.room .inner{pointer-events:auto}

/* блоки после Зала V — обычная прокрутка, 3D-сцена едет вместе со скроллом */
.block{display:flex;box-sizing:border-box;min-height:100vh;min-height:100svh;padding:var(--top) var(--gut) var(--hud)}
.block .inner{margin-block:auto}
.block .inner.bottom{margin-top:auto;margin-bottom:0}
.block .r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.block.seen .r{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * .07s)}
.block .ln>*{transform:translateY(112%)}
.block.seen .ln>*{transform:none;transition:transform 1.1s var(--ease) .1s}
.block{scroll-margin-top:0}

/* ---------- навигация по залам внизу экрана ---------- */
.halls{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;display:flex;justify-content:center;align-items:center;gap:2px;padding:0 var(--gut);pointer-events:none}
.halls::before{content:'';position:absolute;left:0;right:0;bottom:calc(-14px - env(safe-area-inset-bottom));height:96px;background:linear-gradient(rgba(10,9,8,0),rgba(10,9,8,.88));z-index:-1}
.halls button{pointer-events:auto;position:relative;min-height:44px;background:none;border:0;color:var(--slate-2);font:500 13px var(--body);padding:0 12px;cursor:pointer;white-space:nowrap;transition:color .3s}
.halls button::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.halls button:hover{color:var(--ink)}
.halls button[aria-current="true"]{color:var(--ink)}
.halls button[aria-current="true"]::after{transform:scaleX(1)}
.halls em{font:400 12px var(--display);color:var(--brass);font-style:normal;margin-right:6px}
.halls .sep{width:1px;height:18px;background:var(--line);margin:0 8px;pointer-events:none}

/* подсказка на первом экране (телефон) */
.swipe-hint{display:none}
.swipe-hint b{display:inline-block;color:var(--brass);animation:nudge 1.6s ease-in-out infinite}
@media (max-width:1180px) and (min-width:901px){.halls button span{display:none}.halls button[aria-current="true"] span{display:inline}.halls em{margin-right:0}.halls .rest em{display:none}.halls .rest span{display:inline}}
@media (max-width:900px){
  .room{padding-inline:0;padding-top:calc(var(--top) + 30svh)}
  .block{padding-inline:0;padding-top:calc(var(--top) + 30svh)}
  .swipe-hint{display:flex;align-items:center;gap:8px;position:absolute;top:calc(var(--top) + 12px);left:var(--gut);z-index:3;font-size:13px;color:var(--slate-2);transition:opacity .4s;pointer-events:none}
  .halls{bottom:calc(10px + env(safe-area-inset-bottom));gap:0}
  .halls button{font-size:0;padding:0 5px;min-width:32px}
  .halls button::after{left:5px;right:5px;bottom:14px;background:var(--line);transform:scaleX(1)}
  .halls button[aria-current="true"]::after{background:var(--brass);height:2px}
  .halls em,.halls span{display:none}
  .halls .sep{margin:0 4px;height:14px}
}
@media (max-width:900px) and (max-height:700px){.room,.block{padding-top:calc(var(--top) + 22svh)}}

/* телефон: пока зал уезжает вбок, его текст виден целиком */
@media (max-width:900px){
  .room.near .r{opacity:1;transform:none;transition:none}
  .room.near .ln>*{transform:none;transition:none}
}
/* низкие экраны: текст залов компактнее, чтобы помещаться под шапкой */
@media (max-width:900px) and (max-height:760px){
  .room .inner p,.room .inner li{font-size:13px;line-height:1.45}
  .room .about-part{padding:7px 0}
  .room .who{margin-bottom:8px}.room .who img{width:44px;height:44px}
  .room .acts li{padding:6px 0}
  .room .eyebrow{margin-bottom:8px}
  .room .title{margin-bottom:.25em}
}

/* навигация по залам: компьютер — «I II III IV V», телефон — ряд штрихов */
.halls{gap:4px;transition:opacity .4s}
.halls button{min-width:48px;padding:0 14px;text-align:center}
.halls button em{margin:0;font:400 16px var(--display);color:var(--slate-2);letter-spacing:.06em;transition:color .3s}
.halls button:hover em,.halls button[aria-current="true"] em{color:var(--brass)}
.halls button::after{left:14px;right:14px;bottom:7px;height:2px;background:var(--brass)}
@media (max-width:900px){
  .halls{gap:0}
  .halls button{min-width:48px;min-height:44px;padding:0}
  .halls button em{display:none}
  .halls button::after{left:11px;right:11px;bottom:19px;height:2px;background:var(--line);transform:scaleX(1)}
  .halls button[aria-current="true"]::after{background:var(--brass);height:3px}
}


/* общий фон: near-black с тёплыми oxblood- и slate-отсветами */
body{background:radial-gradient(70% 55% at 88% 6%,rgba(110,31,35,.34),transparent 70%),radial-gradient(60% 50% at 6% 94%,rgba(59,64,72,.38),transparent 70%),radial-gradient(50% 40% at 50% 50%,rgba(201,163,107,.05),transparent 75%),#0A0908;background-attachment:fixed}

/* ---------- Apple-стиль: отклик, материалы, типографика ---------- */
:root{--spring:linear(0,.18 6%,.52 15%,.78 25%,.93 36%,1.01 49%,1.01 60%,1 75%,1)}
/* отклик на нажатие — мгновенный, на pointer-down */
.btn,.halls button,.menu-btn,.vcard,.vlinks a,[data-ev],.phone{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active,.menu-btn:active,.vcard:active,[data-ev]:active,.vlinks a:active{transform:scale(.97);transition-duration:90ms}
.halls button:active{transform:scale(.94);transition:transform 90ms ease-out}
/* типографика: чем крупнее кегль, тем плотнее трекинг и интерлиньяж */
.title{letter-spacing:-.018em;line-height:1.06;font-optical-sizing:auto;text-wrap:balance}
.h1{letter-spacing:-.01em}
.lead,.pack li,.num span,p{letter-spacing:.005em}
.num b{letter-spacing:-.015em}
/* материалы: верхняя панель и навигация — полупрозрачное стекло, без жёсткой линии */
.top{background:linear-gradient(rgba(10,9,8,.72),rgba(10,9,8,.28));backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom-color:rgba(201,163,107,.12);-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.pack{background:rgba(10,9,8,.86)}
/* диалог и меню «материализуются»: размытие + масштаб */
dialog[open]{animation:materialize .45s var(--ease)}
dialog::backdrop{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@keyframes materialize{from{opacity:0;transform:scale(.96);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.menu{backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
/* доступность: движение, прозрачность, контраст */
@media (prefers-reduced-motion:reduce){
  dialog[open]{animation:none}
  .btn:active,.vcard:active{transform:none}
  .vcard img{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .top,.pack,.menu,dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
  .top{background:#0A0908}.pack{background:#12100E}.menu{background:#0A0908}
}
@media (prefers-contrast:more){
  :root{--line:rgba(201,163,107,.7)}
  .pack,.top{background:#0A0908}
}

/* низкий/узкий экран: если текст выше свободной области, он растёт вверх (под фигуру), а не вниз под навигацию */
@media (max-width:900px){.room .inner{margin:0;align-self:flex-end}}
.room{align-items:flex-end}
@media (min-width:901px){.room .inner{max-height:calc(100svh - var(--top) - var(--hud));overflow:visible}}

@media (max-width:380px){.logo{font-size:12.5px;letter-spacing:.04em;white-space:nowrap}.phone,.menu-lbl{font-size:12px}.top{padding:0 12px}}

/* телефон в альбомной ориентации: фигура слева, текст справа */
@media (max-width:900px) and (max-height:480px) and (min-aspect-ratio:3/2){
  .room:not(#hero),.room:not(#hero) .body{padding-top:var(--top)}
  .room:not(#hero){justify-content:flex-end}
  .room:not(#hero) .inner{width:56%;margin:0;align-self:center;padding:10px var(--gut) 8px 0;background:none;min-height:0}
  .room:not(#hero) .title{font-size:clamp(20px,3.6vw,28px)}
}

/* ---------- «дорогие» фоны блоков после Зала V и ручные микро-взаимодействия ---------- */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .93  0 0 0 0 .8  0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.block{position:relative;isolation:isolate}
.block::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--glow,none),var(--grain);background-size:auto,180px 180px;opacity:1;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.block::after{content:'';position:absolute;left:var(--gut);right:var(--gut);top:0;height:9px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(201,163,107,.42) 22%,rgba(201,163,107,.42) 78%,transparent) center 4px/100% 1px no-repeat,
    linear-gradient(45deg,transparent 38%,#C9A36B 40% 60%,transparent 62%) center 0/9px 9px no-repeat;
  opacity:.8}
#video{--glow:radial-gradient(60% 55% at 90% 8%,rgba(110,31,35,.30),transparent 70%),radial-gradient(45% 40% at 4% 95%,rgba(59,64,72,.22),transparent 70%)}
#rules{--glow:radial-gradient(55% 50% at 6% 20%,rgba(59,64,72,.34),transparent 70%),radial-gradient(40% 40% at 96% 90%,rgba(110,31,35,.22),transparent 70%)}
#package{--glow:radial-gradient(70% 45% at 50% 100%,rgba(110,31,35,.28),transparent 72%)}
#numbers{--glow:radial-gradient(50% 55% at 80% 50%,rgba(201,163,107,.10),transparent 70%),radial-gradient(45% 45% at 0% 100%,rgba(59,64,72,.26),transparent 70%)}
#contacts{--glow:radial-gradient(65% 55% at 50% 100%,rgba(110,31,35,.40),transparent 72%),radial-gradient(40% 35% at 85% 0%,rgba(201,163,107,.09),transparent 70%)}
.block::before{opacity:.9}
.block::before{background-blend-mode:normal}
/* карточки: тёплый свет следует за курсором */
.pr,.num,.pack,.agency,.regalia li,.vlinks a{--mx:50%;--my:-60%;background-image:radial-gradient(240px circle at var(--mx) var(--my),rgba(201,163,107,.12),transparent 70%);transition:background-position .3s,border-color .4s}
.pr:hover,.num:hover,.agency:hover{border-color:rgba(201,163,107,.55)}
.pack{background-image:radial-gradient(260px circle at var(--mx) var(--my),rgba(201,163,107,.13),transparent 70%)}
/* линия под заголовком «рисуется» при появлении блока */
.block .title::after{content:'';display:block;width:56px;height:1px;margin-top:.55em;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .55s}
.block.seen .title::after{transform:scaleX(1)}
/* маркеры и линии отвечают на наведение */
.pack li::before,.regalia li::before{display:inline-block;transition:transform .5s var(--ease)}
.pack li:hover::before,.regalia li:hover::before{transform:rotate(90deg) scale(1.35)}
.pr h3{position:relative;display:inline-block}
.pr h3::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.pr:hover h3::after{transform:scaleX(1)}
/* золотая кнопка: блик проходит один раз при наведении */
.btn{position:relative;overflow:hidden}
.btn-gold::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,248,225,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
.btn-gold:hover::after{transform:translateX(120%)}
.num b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.block .title::after{transform:scaleX(1);transition:none}.btn-gold::after{display:none}}

/* ---------- ещё штрихи ручной работы ---------- */
::selection{background:rgba(201,163,107,.35);color:#F5F2EC}
html{scrollbar-width:thin;scrollbar-color:rgba(201,163,107,.45) #0A0908}
.foot a,.vlinks a{background-image:linear-gradient(var(--brass),var(--brass));background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size .5s var(--ease),color .3s}
.foot a:hover,.vlinks a:hover{background-size:100% 1px;color:var(--brass)}
.btn{will-change:transform}
.vcard img{transform:scale(1.02) translate3d(var(--px,0),var(--py,0),0);transition:transform .6s var(--ease),filter .4s}
.vcard:hover img{transform:scale(1.06) translate3d(var(--px,0),var(--py,0),0)}
.vplay,.vcard .vplay{transition:transform .5s var(--ease)}
.vcard:hover .vplay{transform:scale(1.08)}