/* Система по рефу boilerroom.tv. Токены сняты Dembrandt (output/boilerroom.tv):
   чёрный фон, белый текст, один акцент; серые #ADADAD / #8C8C8C / #333;
   шкала 8px; радиусы 0 (кнопки) и 2px (ссылки-плитки); без рамок и теней;
   ховер = изменение opacity; переходы мгновенные, только модалка 0.4s. */
:root{
  --bg:#000;--ink:#fff;--accent:#e30b0b;
  --muted:#adadad;--muted-2:#8c8c8c;--line:#333;--ink-dim:#1a1a1a;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:40px;--s7:56px;
  --gutter:clamp(16px,2.5vw,40px);
  --display:Oswald,Inter,sans-serif;--text:Inter,Arial,sans-serif;
  --overlay:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.25) 100%);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html.lenis{scroll-behavior:auto}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:14px;line-height:1.25}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
img{display:block}
svg{width:14px;height:14px;flex:none}
p{margin:0}
:focus-visible{outline:2px solid #70b3ff;outline-offset:2px}

/* типографическая шкала BR: 24/700 lh1 · 20/700 lh1 · 16/400 lh1.56 · 14/700 caps · 12/700 caps */
.t-h2{font-size:24px;font-weight:700;line-height:1}
.t-h4{font-size:20px;font-weight:700;line-height:1}
.t-body{font-size:16px;font-weight:400;line-height:1.56}
.t-ui{font-size:14px;font-weight:700;text-transform:uppercase;line-height:1.25}
.t-cap{font-size:12px;font-weight:700;text-transform:uppercase;line-height:1.43}

/* ---------- topbar: лого, капс-навигация 14/700, активный пункт подчёркнут ---------- */
.topbar{position:fixed;z-index:30;top:0;left:0;right:0;height:72px;padding:0 var(--gutter);display:flex;align-items:center;gap:var(--s3);background:var(--bg)}
.logo img{width:110px}
.topbar nav{display:flex;gap:var(--s4);height:100%}
.topbar nav a{display:flex;align-items:center;height:72px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;transition:opacity .001s ease}
.topbar nav a:hover{opacity:.7}
.topbar-right{margin-left:auto}

/* ---------- кнопки: BR — прямоугольник 40px, 14/700 caps, радиус 0; второй тип — белая обводка 1px ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:40px;min-width:220px;padding:0 var(--s5);background:var(--accent);color:var(--ink);font-size:14px;font-weight:700;text-transform:uppercase;line-height:1;transition:opacity .001s ease}
.btn:hover{opacity:.85}
.btn svg{width:14px;height:14px}
.btn-outline{background:transparent;border:1px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bg);opacity:1}
.textlink{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:400;line-height:1.25;transition:opacity .001s ease}
.textlink:hover{opacity:.7}

/* ---------- hero: центр, огромный wordmark, подзаголовок 20px, кнопка 300px, текстовая ссылка ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:120px var(--gutter) 80px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(.9);will-change:transform}
.hero-3d{position:absolute;inset:0;pointer-events:none;filter:brightness(.68) contrast(1.15) saturate(.7);opacity:.92;mix-blend-mode:screen}
.hero{cursor:grab}.hero.is-dragging{cursor:grabbing;user-select:none}
.hero-3d canvas{display:block;width:100%;height:100%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.55) 70%,#000 100%),radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.75) 100%)}
.hero-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(64px,13vw,200px);line-height:.88;letter-spacing:-.01em;margin:0}
.hero-sub{font-size:clamp(18px,2.2vw,28px);font-weight:400;line-height:1.25}
.hero .btn{width:300px;min-width:0;margin-top:var(--s2)}

/* ---------- секции: заголовок 24/700, отступы 56 / 16 ---------- */
.section{padding:var(--s7) var(--gutter) 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3)}
.section-head h2{font-size:24px;font-weight:700;line-height:1;margin:0}

/* ---------- карточка события: квадратная плитка + подпись, радиус 2px, ховер по opacity ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.card{display:flex;flex-direction:column;gap:var(--s3);width:100%;transition:opacity .001s ease}
.card:hover{opacity:.85}
.tile{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink-dim);border-radius:2px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.tile-photo::after{content:"";position:absolute;inset:0;background:var(--overlay)}
.tile-red{background:var(--accent)}
.tile-ink{background:var(--ink-dim)}
.tile-art{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--s2);padding:var(--s4);text-align:center}
.tile-city{font-family:var(--display);font-weight:700;font-size:clamp(48px,6.5vw,104px);line-height:.9;letter-spacing:-.01em}
.tile-line{font-family:var(--display);font-weight:600;font-size:clamp(14px,1.4vw,20px);text-transform:uppercase;letter-spacing:.06em}
.tile-red .tile-line{color:#000}
.card-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.card-meta>div{display:flex;flex-direction:column;gap:5px}
.card-title{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
.card-date{color:var(--accent);font-size:14px;font-weight:400;line-height:1.3}
.card-place{color:var(--ink);font-size:14px;font-weight:400;line-height:1.3;opacity:.9}
.card-action{display:inline-flex;align-items:center;gap:6px;color:var(--muted-2);font-size:13px;font-weight:600;text-transform:uppercase;line-height:1.56;white-space:nowrap}
.card-action svg{width:16px;height:16px}
.card:hover .card-action{color:var(--ink)}

/* ---------- вайб: лента 16:10, подпись поверх BR-градиента (0.8 → 0.25) ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.media{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;scroll-snap-align:start;background:var(--ink-dim);border-radius:2px;transition:opacity .001s ease}
.media:hover{opacity:.85}
.media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.media figcaption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s3);background:var(--overlay);font-size:14px;line-height:1.5}
.media figcaption strong{display:block;font-size:20px;font-weight:700;line-height:1;margin-bottom:var(--s2)}

/* ---------- о нас: body 16/1.56 + мультяшный огонь по низу ---------- */
.about{position:relative;padding-bottom:280px;overflow:hidden}
.about-cols{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);max-width:1100px;font-size:16px;line-height:1.56}
.fire{position:absolute;left:0;right:0;bottom:0;height:320px;width:100%;pointer-events:none;display:block;filter:blur(8px);opacity:.03}

/* ---------- футер: разделитель #333, капс-ссылки 14/700 ---------- */
footer{margin-top:0;padding:var(--s5) var(--gutter);display:flex;align-items:center;gap:var(--s5);color:var(--muted);border-top:1px solid var(--line)}
footer img{width:110px}
footer nav{display:flex;gap:var(--s4)}
footer nav a{font-size:14px;font-weight:700;text-transform:uppercase;color:var(--ink);transition:opacity .001s ease}
footer nav a:hover{opacity:.7}
footer>span{margin-left:auto;font-size:12px;line-height:1.43}

/* ---------- модалка: BR — 0.4s ease, opacity + transform, тень 0 8px 48px ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.modal.show{opacity:1;visibility:visible}
.modal-box{width:min(460px,100%);background:var(--ink);color:#000;padding:var(--s6);position:relative;box-shadow:0 8px 48px rgba(0,0,0,.15);transform:translateY(16px);transition:transform .4s ease}
.modal.show .modal-box{transform:none}
.modal-box h3{font-family:var(--display);font-weight:700;font-size:56px;line-height:.95;margin:0 0 var(--s2)}
.modal-box p{font-size:16px;line-height:1.56;color:#333;margin:0 0 var(--s4)}
.modal-box .btn{width:100%}
.modal-close{position:absolute;right:var(--s2);top:var(--s2);width:36px;height:36px;display:grid;place-items:center;color:#000}
.modal-close svg{width:18px;height:18px}

/* брейкпоинты BR: 640 / 992 */
@media(max-width:992px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .about-cols{grid-template-columns:1fr}
}
@media(max-width:640px){
  .topbar{height:60px;gap:var(--s3)}.topbar nav a{height:60px;font-size:13px}.topbar nav{gap:var(--s3)}.logo img{width:92px}
  .hero{padding-top:100px}.hero .btn{width:100%}
  .grid{grid-template-columns:1fr}
  .rail{grid-auto-columns:82vw}
  footer{flex-wrap:wrap}footer>span{margin-left:0;width:100%}
}