/* Дом Культуры «Веер» — стили. Все цвета/шрифты — только через tokens.css */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1 !important; transform:none !important; transition:none !important}
}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
.display{font-family:var(--font-display)}
.ui{font-family:var(--font-ui)}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:none}
/* нажимаемые надписи (реш. владельца 17.09.2026): без подчёркивания, чуть растут при наведении */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:2px;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

/* ── навигация ── */
nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{max-width:1120px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:22px}
.nav-brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-size:14px; letter-spacing:.08em; text-transform:uppercase}
.nav-brand svg{width:30px; height:auto; color:var(--blue-deep)}
.nav-brand:hover{text-decoration:none}
.nav-links{margin-left:auto; display:flex; gap:4px 18px; flex-wrap:wrap; justify-content:flex-end}
.nav-links a{display:inline-block; transition:transform .25s ease, color .18s; color:var(--ink-soft); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-family:var(--font-ui); padding:4px 2px}
.nav-links a:hover{color:var(--ink); transform:scale(1.06)}
#theme-btn{
  margin-left:14px; flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color .18s, border-color .18s;
}
#theme-btn:hover{color:var(--gold); border-color:var(--gold)}
#theme-btn svg{width:17px; height:17px}
#theme-btn .moon{display:none}
:root[data-theme="dark"] #theme-btn .moon{display:block}
:root[data-theme="dark"] #theme-btn .sun{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #theme-btn .moon{display:block}
  :root:not([data-theme]) #theme-btn .sun{display:none}
}

/* ── hero ── */
header.hero{
  position:relative; min-height:92vh;
  display:flex; flex-direction:column; justify-content:center;
  background-position:center 62%; background-size:cover; background-repeat:no-repeat;
}
header.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--veil) 0%, transparent 34%, var(--veil-deep) 100%);
}
.hero-in{position:relative; text-align:center; color:#FDFBF6; padding:96px 24px 120px; text-shadow:0 1px 22px rgba(20,22,28,.45)}
.hero-in svg{width:88px; height:auto; color:#FDFBF6; filter:drop-shadow(0 1px 10px rgba(20,22,28,.4))}
.hero-kicker{font-size:13px; letter-spacing:.34em; text-transform:uppercase; margin:26px 0 10px; opacity:.92}
h1{font-size:clamp(44px,7.5vw,84px); line-height:1.02; font-weight:400; letter-spacing:.06em; margin:0 0 22px; text-wrap:balance}
.hero-mission{font-style:italic; font-size:clamp(18px,2.4vw,23px); max-width:34em; margin:0 auto 14px}
.hero-meta{font-size:13.5px; letter-spacing:.22em; text-transform:uppercase; opacity:.9}
.hero-cta{display:flex; gap:14px; justify-content:center; margin-top:44px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:13px 30px; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  font-family:var(--font-ui); border:1px solid transparent; cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{text-decoration:none}
.btn-solid{background:var(--teal); color:var(--teal-ink)}
.btn-solid:hover{background:color-mix(in srgb, var(--teal) 86%, var(--ink))}
.btn-ghost{border-color:rgba(253,251,246,.75); color:#FDFBF6}
.btn-ghost:hover{background:rgba(253,251,246,.14)}

/* ── секции ── */
section{padding:96px 0 8px}
.eyebrow{
  display:flex; align-items:center; gap:16px; margin-bottom:18px;
  color:var(--gold); font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; font-family:var(--font-ui);
}
.eyebrow::after{content:""; height:1px; flex:0 0 64px; background:var(--gold); opacity:.5}
h2{font-size:clamp(30px,4.4vw,46px); font-weight:400; line-height:1.12; letter-spacing:.02em; margin:0 0 14px; text-wrap:balance}
.lead{font-size:clamp(17px,2vw,20px); font-style:italic; color:var(--ink-soft); margin:0 0 44px}

.rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}

/* ── афиша ── */
.ev-date{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-deep); font-family:var(--font-ui)}
.ev-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; border-top:1px solid var(--line-soft); padding-top:16px}
.ev-price{font-size:14px; color:var(--ink-soft)}
.btn-ghost-ink{border-color:var(--line); color:var(--ink-soft)}
.btn-ghost-ink:hover{border-color:var(--gold); color:var(--ink)}
.tab-empty{font-style:italic; color:var(--ink-soft); padding:12px 0 30px}
.badge{display:inline-block; align-self:flex-start; margin-bottom:2px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold); padding:3px 9px; border-radius:99px; font-family:var(--font-ui)}


/* ── лента афиш (реш. владельца 17.09.2026): центр крупно, соседи меньше и глубже;
   прошедшие приглушены «серебром» (обесцвечивание + холод + мягкий контраст) ── */
.strip{position:relative; --w:300px; --h:400px}
.strip-track{position:relative; height:var(--h); margin:0 auto}
.strip-item{position:absolute; top:50%; left:50%; width:var(--w); height:var(--h); margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  display:block; background:var(--paper-2); box-shadow:var(--shadow-card); overflow:hidden;
  transition:transform .55s cubic-bezier(.22,.8,.3,1), opacity .45s, filter .45s; will-change:transform}
.strip-item img,.strip-ph{display:block; width:100%; height:100%; object-fit:cover; transition:filter .45s}
.strip-item.past img,.strip-item.past .strip-ph{filter:grayscale(.9) brightness(1.06) contrast(.88) sepia(.06) hue-rotate(185deg) saturate(.7)}
.strip-item.past.pos-0 img,.strip-item.past.pos-0 .strip-ph{filter:grayscale(.35) brightness(1.02) contrast(.95)}
.strip-item.past:hover img,.strip-item.past:hover .strip-ph{filter:none}
.strip-item.pos-0{transform:translateX(0) scale(1); z-index:5; cursor:pointer}
.strip-item.pos-m1{transform:translateX(-86%) scale(.8); z-index:4; opacity:.92}
.strip-item.pos-p1{transform:translateX(86%) scale(.8); z-index:4; opacity:.92}
.strip-item.pos-m2{transform:translateX(-150%) scale(.62); z-index:3; opacity:.7}
.strip-item.pos-p2{transform:translateX(150%) scale(.62); z-index:3; opacity:.7}
.strip-item.pos-out{transform:translateX(0) scale(.4); opacity:0; pointer-events:none; z-index:1}
.strip-item.pos-out.left{transform:translateX(-190%) scale(.4)}
.strip-item.pos-out.right{transform:translateX(190%) scale(.4)}
.strip-ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
  background:#DCE9F2; color:#1F4E5F; font-family:var(--font-display)}
.strip-ph-fan{width:110px; opacity:.85}
.strip-ph-date{font-size:34px; letter-spacing:.04em}
.strip-ph-title{font-size:19px; line-height:1.25; font-style:italic}
.strip-arrow{position:absolute; top:50%; z-index:6; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font:26px/1 var(--font-body); cursor:pointer; transition:border-color .18s, color .18s}
.strip-arrow:hover{border-color:var(--gold); color:var(--gold)}
.strip-arrow[disabled]{opacity:.3; cursor:default}
.strip-prev{left:0} .strip-next{right:0}
.strip-dots{display:flex; justify-content:center; gap:8px; margin-top:22px}
.strip-dots button{width:7px; height:7px; border-radius:50%; border:0; padding:0; background:var(--line); cursor:pointer; transition:transform .2s, background .2s}
.strip-dots button.future{background:var(--ink-soft)}
.strip-dots button[aria-current="true"]{background:var(--gold); transform:scale(1.5)}
.strip-info{max-width:640px; margin:26px auto 0; text-align:center}
.strip-title{font-size:32px; line-height:1.15; letter-spacing:.02em; margin:8px 0 14px; font-weight:400; text-wrap:balance}
/* заголовок под лентой: золотой блик шириной в 2–3 буквы перекатывается слева направо — намёк на свайп/нажатие
   (реш. владельца 17.09.2026); текст красится градиентом, полоса — --shine из tokens.css */
.strip-title a{display:inline-block; color:var(--ink); -webkit-text-fill-color:transparent;
  background-image:linear-gradient(90deg, var(--ink) 0, var(--ink) calc(50% - 48px), var(--shine) 50%, var(--ink) calc(50% + 48px), var(--ink) 100%);
  background-size:300% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text;
  animation:shine 7s ease-in-out infinite; transition:transform .25s ease}
/* фон втрое шире текста: в крайних точках блик за пределами букв, поэтому въезжает слева и уходит вправо плавно, перескок цикла не виден */
@keyframes shine{0%{background-position:100% 0} 75%{background-position:0 0} 100%{background-position:0 0}}
.strip-title a:hover{transform:scale(1.04); animation:none; background-image:none; -webkit-text-fill-color:var(--gold); color:var(--gold)}
@media (prefers-reduced-motion:reduce){.strip-title a{animation:none; background-image:none; -webkit-text-fill-color:var(--ink)}}
.strip-foot{display:flex; align-items:center; justify-content:center; gap:22px}
@media (max-width:860px){
  .strip{--w:58vw; --h:72vw}
  .strip-track{display:flex; gap:10px; height:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 21vw 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .strip-track::-webkit-scrollbar{display:none}
  .strip-item{position:static; flex:0 0 var(--w); height:var(--h); margin:0; scroll-snap-align:center; transform:none !important; opacity:1 !important}
  .strip-item:not(.pos-0){transform:scale(.94) !important}
  .strip-arrow{display:none}
  .strip-dots{margin-top:8px}
  .strip-title{font-size:26px}
}

/* ── кофейня ── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.ph{position:relative; margin:0; overflow:hidden; box-shadow:var(--shadow); background:var(--paper-2)}
.ph img{display:block; width:100%; height:100%; aspect-ratio:3/2; object-fit:cover}
/* Номер фото — бейдж для владельца («фото 04 заменить»); убрать, когда фото станут финальными */
.ph-no{position:absolute; right:10px; bottom:10px; z-index:2; padding:4px 8px; border-radius:3px; background:rgba(20,22,28,.55); color:#FDFBF6; font:11px/1 var(--font-ui); letter-spacing:.14em; pointer-events:none}
header.hero .ph-no{right:16px; bottom:16px}

/* ── карусель фото (_carousel.html) ── */
.car{position:relative; box-shadow:var(--shadow); background:var(--paper-2)}
.car-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%; position:relative; margin:0; scroll-snap-align:start}
.car-slide img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover}
.car-btn{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid rgba(253,251,246,.7); background:rgba(20,22,28,.35); color:#FDFBF6; font:26px/1 var(--font-body); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 3px; transition:background .18s}
.car-btn:hover{background:rgba(20,22,28,.65)}
.car-prev{left:12px}
.car-next{right:12px}
.car-dots{position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:7px}
.car-dots button{width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(253,251,246,.5); cursor:pointer}
.car-dots button[aria-current="true"]{background:#FDFBF6}
.hours{display:inline-flex; align-items:center; gap:10px; margin:6px 0 18px; border:1px solid var(--line); padding:8px 18px; border-radius:99px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-ui)}
.hours b{color:var(--teal); font-weight:600}

/* ── залы ── */
.halls{display:grid; grid-template-columns:repeat(12,1fr); gap:20px}
.hall{position:relative; min-height:340px; display:flex; align-items:flex-end; background-position:center; background-size:cover; box-shadow:var(--shadow); overflow:hidden}
.hall::before{content:""; position:absolute; inset:0; background:linear-gradient(200deg, transparent 30%, rgba(22,24,30,.78) 100%)}
.hall-body{position:relative; padding:26px 26px 22px; color:#FDFBF6; width:100%}
.hall-name{font-size:29px; letter-spacing:.03em; font-weight:400}
.hall-meta{font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.85; margin:4px 0 8px; font-family:var(--font-ui)}
.hall-desc{font-size:15px; line-height:1.55; opacity:.95}
.hall-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; border-top:1px solid rgba(253,251,246,.28); padding-top:12px}
.hall-price{font-size:14.5px; letter-spacing:.06em}
.hall-price sup{color:var(--gold)}
a.hall{color:#FDFBF6}
a.hall:hover{text-decoration:none}
a.hall:hover .hall-more{color:var(--gold)}
.hall-more{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-ui); transition:color .18s}
.halls-note{margin-top:26px; font-style:italic; color:var(--ink-soft)}

/* ── форматы ── */
.formats{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0; border:1px solid var(--line-soft); background:var(--card); box-shadow:var(--shadow)}
.fmt{padding:38px 32px 34px; border-left:1px solid var(--line-soft)}
.fmt:first-child{border-left:none}
.fmt-no{font-size:13px; letter-spacing:.28em; color:var(--gold); text-transform:uppercase; font-family:var(--font-ui)}
.fmt h3{font-size:26px; font-weight:400; margin:10px 0 12px; letter-spacing:.02em}
.fmt p{font-size:15.5px; color:var(--ink-soft); margin:0 0 10px}
.fmt em{color:var(--ink)}

/* ── пространство ── */
.cap{font-size:14px; color:var(--ink-soft); font-style:italic; line-height:1.5}


/* ── контакты ── */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:start; margin-top:26px}
/* карта под адресом (реш. владельца 17.09.2026): виджет Яндекс Карт; в тёмной теме приглушена «серебром» */
.map{margin:18px 0 22px; aspect-ratio:16/10; background:var(--paper-2); box-shadow:var(--shadow-card); overflow:hidden}
.map-link{margin:-12px 0 22px; font-size:13px; letter-spacing:.06em; font-family:var(--font-ui); color:var(--ink-soft)}
.map iframe{display:block; width:100%; height:100%; border:0; transition:filter .3s}
:root[data-theme="dark"] .map iframe{filter:grayscale(.5) brightness(.82) contrast(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .map iframe{filter:grayscale(.5) brightness(.82) contrast(.9)}}
.addr{display:flex; flex-direction:column; gap:4px}
.addr .big{font-size:26px; letter-spacing:.02em; line-height:1.3}
.addr p{color:var(--ink-soft); margin:8px 0}
.social{display:flex; gap:12px; margin:14px 0 4px}
.social a{width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:color .18s, border-color .18s}
.social a:hover{color:var(--gold); border-color:var(--gold); text-decoration:none}
.social svg{width:19px; height:19px}
footer .social{margin:0}
footer .social a{width:32px; height:32px}
footer .social svg{width:15px; height:15px}
form.lead-form{display:flex; flex-direction:column; gap:14px; background:var(--card); border:1px solid var(--line-soft); box-shadow:var(--shadow); padding:34px 32px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:flex; flex-direction:column; gap:6px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-family:var(--font-ui)}
input,select,textarea{border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:11px 13px; font-size:15.5px; font-family:var(--font-body); border-radius:0}
textarea{resize:vertical; min-height:74px}
input::placeholder,textarea::placeholder{color:var(--ink-soft); opacity:.6}
form.lead-form .btn{margin-top:8px}
.form-note{font-size:12.5px; color:var(--ink-soft); font-style:italic; margin:2px 0 0}
.form-error{font-size:13.5px; color:var(--rose); margin:2px 0 0; display:none}
.ok{display:none; text-align:center; padding:30px 10px; font-size:19px; font-style:italic}
.ok.show{display:block}
form.sent .fields{display:none}

/* ── подстраницы: событие, зал ── */
.page{padding:56px 0 8px}
.back{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-ui); color:var(--ink-soft)}
.page-h1{font-size:clamp(34px,5vw,58px); font-weight:400; line-height:1.08; letter-spacing:.03em; margin:6px 0 12px; text-wrap:balance}
.page-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; margin-top:22px}
.prose p{margin:0 0 14px; line-height:1.6}
.prose ul{margin:0 0 14px; padding-left:1.2em; line-height:1.6}
.prose li{margin:4px 0}
/* страница события: шапка на всю ширину с пунктирной чертой, афиша целиком слева, текст справа */
.ev-head{border-bottom:1px dashed var(--line); padding-bottom:18px}
.ev-meta{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; margin-top:4px}
.ev-venue{font-size:14px; color:var(--ink-soft)}
.ev-grid{grid-template-columns:minmax(240px,400px) 1fr; gap:48px; margin-top:30px}
.poster{margin:0; box-shadow:var(--shadow); background:var(--paper-2)}
.poster img{display:block; width:100%; height:auto}
.hall-price-big{font-size:26px; letter-spacing:.02em; margin-top:10px}
.hall-price-big sup{color:var(--gold); font-size:.6em}
.hall-grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin-top:64px}
.hall-block h3{font-size:22px; font-weight:400; letter-spacing:.02em; margin:0 0 14px}
.plan img{aspect-ratio:auto; object-fit:contain; background:#fff}
.seat{width:100%; border-collapse:collapse; font-size:15px}
.seat td{padding:9px 0; border-bottom:1px solid var(--line-soft)}
.seat td:last-child{text-align:right; color:var(--ink-soft); white-space:nowrap}
.seat sup{color:var(--gold)}
.evl{list-style:none; padding:0; margin:0; font-size:15px}
.evl li{padding:9px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); line-height:1.5}
.evl b{color:var(--ink); font-weight:600}

/* ── подвал ── */
footer{margin-top:110px; border-top:1px solid var(--line-soft); padding:36px 0 46px; color:var(--ink-soft); font-size:13.5px}
.foot-in{max-width:1120px; margin:0 auto; padding:0 24px; display:flex; gap:14px 34px; flex-wrap:wrap; align-items:center}
.foot-in svg{width:26px; color:var(--blue-deep)}

@media (max-width:860px){
  section{padding:70px 0 6px}
  .split,.contact-grid{grid-template-columns:1fr; gap:30px}
  .hall{grid-column:span 12 !important}
  .page-grid{grid-template-columns:1fr; gap:28px}
  .fmt{border-left:none; border-top:1px solid var(--line-soft)}
  .fmt:first-child{border-top:none}
  .nav-links{display:none}
  header.hero{min-height:78vh}
  .row2{grid-template-columns:1fr}
}