/* ============================================================
   varnakov.ru — ретро-терминал VT-100, янтарный фосфор P3
   Токены и общие стили обеих страниц.
   Темы: amber (по умолчанию), green, white — см. [data-theme].
   ============================================================ */

:root {
  --fg: #ffb000;
  --fg-bright: #ffd166;
  --fg-dim: #8a6510;
  --bg: #0d0803;
  --bg2: #140c04;
  --border: #3a2a0c;
  --border-accent: #6b4d12;
  --scan: 0.7;
  /* --fsx — ручная подстройка кегля (1 = норма).
     --u — текучая «единица кегля»: размеры пишутся как calc(N * var(--u)),
     где N — базовый кегль в px. Растёт линейно от ~0.87 (360px)
     до ~1.07 (1320px), дальше плато 1.08. */
  --fsx: 1;
  --u: calc(var(--fsx) * clamp(0.85px, 0.79px + 0.021vw, 1.08px));
  --font: 'PT Mono', monospace;
  --glow: 0 0 6px rgba(255, 176, 0, 0.55), 0 0 18px rgba(255, 176, 0, 0.18);
}

[data-theme="green"] {
  --fg: #33ff66; --fg-bright: #aaffcc; --fg-dim: #1d8a3c;
  --bg: #03100a; --bg2: #04150c;
}
[data-theme="white"] {
  --fg: #d8e6f0; --fg-bright: #ffffff; --fg-dim: #6a7a86;
  --bg: #0a0d10; --bg2: #0e1216;
}

/* страница не скроллится: прокрутка живёт внутри .crt-scroll,
   чтобы фильтр искривления применялся к элементу размером с экран */
html, body { margin: 0; padding: 0; background: #050302; height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpolygon points='1,1 1,15 5,11 7,16 10,15 8,10 13,10' fill='%23000'/%3E%3Cpolygon points='0,0 0,14 4,10 6,15 9,14 7,9 12,9' fill='%23ffd166'/%3E%3C/svg%3E") 2 2, auto;
}

a, button, .cur-hand {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cg fill='%23000'%3E%3Crect x='6' y='1' width='3' height='6'/%3E%3Crect x='9' y='2' width='3' height='5'/%3E%3Crect x='12' y='4' width='2' height='4'/%3E%3Crect x='3' y='6' width='3' height='5'/%3E%3Crect x='5' y='6' width='9' height='7'/%3E%3Crect x='6' y='13' width='7' height='3'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='6' y='0' width='2' height='6'/%3E%3Crect x='9' y='1' width='2' height='5'/%3E%3Crect x='12' y='3' width='1' height='4'/%3E%3Crect x='3' y='5' width='2' height='5'/%3E%3Crect x='5' y='5' width='8' height='7'/%3E%3Crect x='6' y='12' width='6' height='3'/%3E%3C/g%3E%3C/svg%3E") 10 2, pointer;
}

[data-full], .cur-zoom {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpolygon points='5,1 11,1 14,4 14,10 11,13 5,13 2,10 2,4' fill='%23000'/%3E%3Cpolygon points='6,2 10,2 13,5 13,9 10,12 6,12 3,9 3,5' fill='%23ffd166'/%3E%3Crect x='7' y='4' width='2' height='6' fill='%23000'/%3E%3Crect x='5' y='6' width='6' height='2' fill='%23000'/%3E%3Crect x='11' y='11' width='2' height='2' fill='%23000'/%3E%3Crect x='12' y='12' width='2' height='2' fill='%23000'/%3E%3Crect x='13' y='13' width='3' height='3' fill='%23000'/%3E%3C/svg%3E") 9 8, zoom-in;
}

a { color: var(--fg-bright); text-decoration: none; }
a:hover { color: #fff; text-shadow: 0 0 8px var(--fg); }
::selection { background: var(--fg); color: #0d0803; }

@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes lbOpen {
  0%   { transform: scaleY(0.01) scaleX(0.4); filter: brightness(5); opacity: 0 }
  45%  { transform: scaleY(0.01) scaleX(1);   filter: brightness(5); opacity: 1 }
  75%  { transform: scale(1); filter: brightness(1.8) }
  100% { transform: scale(1); filter: brightness(1) }
}
@keyframes lbFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes flicker { 0%, 100% { opacity: 1 } 92% { opacity: 1 } 93% { opacity: 0.92 } 94% { opacity: 1 } 97% { opacity: 0.96 } }
@keyframes poweron {
  0%   { transform: scaleY(0.004) scaleX(0.6); filter: brightness(6) }
  35%  { transform: scaleY(0.004) scaleX(1);   filter: brightness(6) }
  60%  { transform: scale(1); filter: brightness(2.2) }
  100% { transform: scale(1); filter: brightness(1) }
}

/* ---------- каркас экрана ----------
   .crt-page и .crt-frame зафиксированы по размеру вьюпорта — это «стекло» ЭЛТ.
   Контент прокручивается внутри .crt-scroll, поэтому фильтр искривления,
   сканлайны и виньетка неподвижны относительно экрана, как на живой трубке. */

.crt-page {
  position: fixed;
  inset: 0;
  background: #050302;
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.crt-frame {
  position: relative;
  width: 100%;
  max-width: 1320px;
  height: 100%;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, var(--bg2) 0%, var(--bg) 55%, #070401 100%);
  overflow: hidden;
  animation: poweron 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) both, flicker 6s linear 1.2s infinite;
}

/* Контент завёрнут в inline-SVG с foreignObject: фильтр искривления висит
   на <g> и обрабатывается SVG-путём рендеринга. CSS-фильтр на HTML-элементе
   в ряде сборок Blink семплирует карту смещения с паразитным перекосом
   (проверено покадрово), SVG-путь — корректно. */
.crt-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crt-inner { position: relative; width: 100%; height: 100%; overflow: hidden; }

.crt-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;           /* полосы прокрутки у терминала нет */
}
.crt-scroll::-webkit-scrollbar { display: none; }

.scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  opacity: var(--scan);
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.28) 3px, rgba(0,0,0,0) 4px);
}

.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(ellipse 95% 88% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.55) 100%);
}

/* медиа поднимаются выше сканлайнов */
.above-scan { position: relative; z-index: 7; }

/* настроечная таблица для отладки искривления: CRT.grid() из консоли.
   Лежит внутри .crt-curve, поэтому гнётся тем же фильтром, что и контент. */
.crt-testgrid {
  position: absolute; inset: 0; pointer-events: none; z-index: 8;
  background:
    linear-gradient(rgba(255, 209, 102, 0.95), rgba(255, 209, 102, 0.95)) 50% 0 / 2px 100% no-repeat,
    linear-gradient(rgba(255, 209, 102, 0.95), rgba(255, 209, 102, 0.95)) 0 50% / 100% 2px no-repeat,
    repeating-linear-gradient(to right, rgba(255, 176, 0, 0.45) 0, rgba(255, 176, 0, 0.45) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(to bottom, rgba(255, 176, 0, 0.45) 0, rgba(255, 176, 0, 0.45) 1px, transparent 1px, transparent 60px);
  border: 2px solid rgba(255, 209, 102, 0.9);
  box-sizing: border-box;
}

.crt-content {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  padding: 36px 44px 44px;
  color: var(--fg);
  text-shadow: var(--glow);
}

@media (max-width: 640px) {
  .crt-page { padding: 8px; }
  .crt-content { padding: 22px 18px 28px; }
  .statusbar, .header-login { margin-left: -18px !important; margin-right: -18px !important; padding-left: 18px !important; padding-right: 18px !important; }
  .menubar { margin-left: -18px !important; margin-right: -18px !important; }
}

/* ---------- статус-бар ---------- */

.statusbar {
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  font-size: calc(15 * var(--u));
  color: var(--fg);
  margin: -36px -44px 0;
  background: rgba(255, 176, 0, 0.14);
  border-bottom: 1px solid rgba(255, 176, 0, 0.3);
  padding: 12px 44px;
}
.statusbar .spacer, .menubar .spacer, .crt-footer .spacer { flex: 1; }
.statusbar .crumb { color: var(--fg-dim); }
.statusbar a { letter-spacing: 1px; color: var(--fg-bright); }
.statusbar a:hover { color: #fff; }

/* ---------- меню Turbo Pascal ---------- */

.menubar {
  margin: 0 -44px;
  background: rgba(255, 176, 0, 0.16);
  border-bottom: 1px solid rgba(255, 176, 0, 0.3);
  padding: 0 10px;
  display: flex; flex-wrap: wrap; align-items: stretch;
  font-size: calc(16 * var(--u));
}

.menubar .mi-icon {
  padding: 0 14px; display: flex; align-items: center;
  color: var(--fg-bright);
}
.menubar .mi-icon:hover { background: var(--fg); color: #0d0803; text-shadow: none; }
.menubar .mi-icon:active { background: var(--fg-bright); color: #0d0803; }

.menubar .mi {
  padding: 7px 16px; letter-spacing: 1px; text-shadow: none;
  color: var(--fg); display: block;
}
.menubar .mi .hot { color: var(--fg-bright); }
.menubar .mi:hover, .menubar .mi.sel { background: var(--fg); color: #0d0803; }
.menubar .mi:hover .hot, .menubar .mi.sel .hot { color: #0d0803; }

.menubar .f10hint {
  padding: 7px 14px; color: var(--fg-dim); text-shadow: none;
  font-size: calc(13 * var(--u)); letter-spacing: 2px; align-self: center;
}

/* выпадающее подменю «Файл» (страница события) */
.filemenu-wrap { position: relative; }
.filemenu {
  position: absolute; top: 100%; left: 0; z-index: 20; min-width: 180px;
  background: #140c04; border: 1px solid var(--fg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
  padding: 4px 0;
}
.filemenu a {
  display: block; padding: 6px 18px; letter-spacing: 1px; text-shadow: none;
  color: var(--fg);
}
.filemenu a:hover, .filemenu a.sel { background: var(--fg); color: #0d0803; }

/* ---------- шапка ---------- */

.header-login {
  margin: 0 -44px;
  background: rgba(255, 176, 0, 0.07);
  border-bottom: 1px solid rgba(255, 176, 0, 0.16);
  padding: 7px 44px 9px;
  font-size: calc(16 * var(--u));
  color: var(--fg-dim); text-shadow: none;
}

.prompt { font-size: calc(18 * var(--u)); }
.prompt .ps1 { color: var(--fg-dim); }
.prompt .note { color: var(--fg-dim); font-size: calc(14 * var(--u)); }

h1.crt-h1 {
  margin: 10px 0 0;
  font-size: clamp(calc(32 * var(--u)), 5.4vw, calc(54 * var(--u)));
  font-weight: 500; letter-spacing: 1px;
  color: var(--fg-bright); line-height: 0.95;
}
.cursor-block {
  display: inline-block; width: 0.5em; height: 0.9em;
  background: var(--fg-bright); margin-left: 10px; vertical-align: -0.08em;
  animation: blink 1.1s step-end infinite;
}
.cursor-block.dim { background: var(--fg-dim); width: 0.5em; height: 0.9em; margin-left: 6px; vertical-align: -0.1em; }

.slogan {
  font-size: clamp(calc(17 * var(--u)), 2.5vw, calc(24 * var(--u)));
  margin-top: 14px; letter-spacing: 3px;
}

.sec { margin-top: 44px; }

.badge {
  font-size: calc(12 * var(--u)); letter-spacing: 3px;
  color: var(--fg-dim); text-shadow: none;
}

/* ---------- кнопки-ссылки ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 22px; font-size: calc(18 * var(--u));
  color: var(--fg-bright);
}
.btn:hover { border-color: var(--border-accent); background: rgba(255, 176, 0, 0.08); }
.btn small { font-size: calc(14 * var(--u)); color: var(--fg-dim); }

.btn-accent {
  gap: 12px; padding: 14px 26px; font-size: calc(20 * var(--u));
  border-color: var(--border-accent);
  background: rgba(255, 176, 0, 0.1);
}
.btn-accent:hover { background: rgba(255, 176, 0, 0.18); box-shadow: 0 0 22px rgba(255, 176, 0, 0.25); color: #fff; }

/* ---------- новости ---------- */

.news-card {
  margin-top: 16px;
  border: 1px solid var(--border-accent); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 176, 0, 0.08), rgba(255, 176, 0, 0.02));
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.news-card-compact { gap: 10px; }
.news-card-compact .body { max-width: 880px; }
.news-title { font-size: calc(24 * var(--u)); line-height: 1.2; }
.news-title a { color: var(--fg-bright); }
.news-title a:hover { color: #fff; text-shadow: 0 0 10px var(--fg); }

.news-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
  gap: 22px;
  align-items: stretch;
  margin-top: 4px;
}
.news-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  background: #000;
  box-shadow: 0 0 24px rgba(255, 176, 0, 0.14);
}
.news-video iframe { width: 100%; height: 100%; border: none; display: block; }
.news-feature-copy { display: flex; flex-direction: column; min-width: 0; }
.news-feature-copy .body { font-size: calc(15 * var(--u)); line-height: 1.5; opacity: 0.88; }
.news-feature-copy .video-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  color: var(--fg-bright);
  opacity: 1;
}

@media (max-width: 760px) {
  .news-feature { grid-template-columns: 1fr; }
}

.thumbstrip {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: #0a0602;
}
.thumbstrip img {
  height: 88px; flex: 1 1 120px; min-width: 90px;
  object-fit: cover; display: block;
}

.news-cols { display: flex; gap: 22px; flex-wrap: wrap; }
.news-text { flex: 1 1 340px; min-width: 260px; display: flex; flex-direction: column; }
.news-text .body { font-size: calc(15 * var(--u)); opacity: 0.85; line-height: 1.5; }
.news-actions { display: flex; gap: 12px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.news-actions .btn { padding: 11px 22px; font-size: calc(17 * var(--u)); border-color: var(--border-accent); background: rgba(255,176,0,0.12); }
.news-actions .btn:hover { background: rgba(255,176,0,0.2); box-shadow: 0 0 22px rgba(255,176,0,0.25); color: #fff; }
.news-actions .btn.ghost { padding: 11px 18px; font-size: calc(15 * var(--u)); color: var(--fg-dim); border-color: var(--border); background: transparent; }
.news-actions .btn.ghost:hover { border-color: var(--border-accent); color: var(--fg-bright); box-shadow: none; }

.news-slides { flex: 1 1 260px; min-width: 240px; max-width: 340px; }
.slide-frame {
  margin-top: 8px; aspect-ratio: 16 / 9;
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: #0a0602;
  display: block;
}
.slide-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* заглушка, пока нет картинки слайда */
.slide-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.slide-ph .icon { font-size: 30px; color: var(--fg-dim); }
.slide-ph .cap { font-size: calc(13 * var(--u)); letter-spacing: 3px; color: var(--fg-dim); text-shadow: none; }

/* ---------- интересы ---------- */

.grid-hobbies {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 16px;
}
.hobby {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; background: rgba(255, 176, 0, 0.04);
}
.hobby:hover { border-color: var(--border-accent); background: rgba(255, 176, 0, 0.09); }
.hobby .code { font-size: calc(13 * var(--u)); color: var(--fg-dim); text-shadow: none; letter-spacing: 2px; }
.hobby .name { font-size: calc(19 * var(--u)); color: var(--fg-bright); margin-top: 4px; }
.hobby .desc { font-size: calc(14 * var(--u)); color: var(--fg); opacity: 0.8; margin-top: 6px; line-height: 1.35; }

/* ---------- карусель проектов ---------- */

.carousel-clip {
  margin-top: 16px; overflow: hidden;
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  padding: 16px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.carousel-track {
  display: flex; gap: 16px; width: max-content;
  touch-action: pan-y; will-change: transform;
}
.proj-card {
  width: 250px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 10px; padding: 14px;
  background: linear-gradient(180deg, rgba(255, 176, 0, 0.06), rgba(255, 176, 0, 0.02));
}
.proj-card:hover { border-color: #7a5813; box-shadow: 0 0 18px rgba(255, 176, 0, 0.15); }
.proj-card-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.proj-card-link:focus-visible { outline: 2px solid var(--fg-bright); outline-offset: 4px; }
.proj-photo {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  background: #0a0602; border: 1px solid var(--border);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.proj-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-photo .ph { font-size: 13px; letter-spacing: 2px; color: var(--fg-dim); text-shadow: none; }
.proj-card .tag { font-size: calc(12 * var(--u)); letter-spacing: 3px; color: var(--fg-dim); text-shadow: none; margin-top: 12px; }
.proj-card .name { font-size: calc(19 * var(--u)); color: var(--fg-bright); margin-top: 6px; line-height: 1.15; }
.proj-card .desc { font-size: calc(14 * var(--u)); opacity: 0.8; margin-top: 8px; line-height: 1.35; }
.proj-card .project-url { display: block; margin-top: 7px; color: var(--fg-bright); text-decoration: underline; }

/* ---------- работа, текст ---------- */

.work-text { font-size: calc(17 * var(--u)); margin-top: 14px; line-height: 1.55; max-width: 720px; }
.work-text a { color: var(--fg-bright); border-bottom: 1px dashed var(--fg-dim); }

/* ---------- футер ---------- */

.crt-footer {
  margin-top: 48px; border-top: 1px solid #2e2008; padding-top: 14px;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: calc(15 * var(--u));
  color: var(--fg-dim); text-shadow: none;
}
.crt-footer a { color: var(--fg); letter-spacing: 1px; }
.crt-footer a:hover { color: #fff; }

/* ---------- страница события: видео-эмбеды с раскрытием ----------
   Два ролика YouTube стоят рядом. Клик по ролику плавно растягивает его во всю
   ширину контента (анимируем flex-basis), сосед сжимается в ноль; затем через
   IFrame API стартует воспроизведение, а второй ролик встаёт на паузу. */

.vt-stage {
  margin-top: 16px; display: flex; gap: 16px; align-items: flex-start;
  transition: gap 1.2s cubic-bezier(0.15, 0.8, 0.25, 1);
}
.vt-embed {
  position: relative; min-width: 0;
  flex: 0 1 calc(50% - 8px);
  aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  border: 1px solid var(--border-accent); border-radius: 10px;
  transition: flex-basis 1.2s cubic-bezier(0.15, 0.8, 0.25, 1);
}
.vt-embed iframe { width: 100%; height: 100%; border: none; display: block; }

/* раскрытый ролик — на всю ширину, сосед схлопывается */
.vt-stage.vt--exp0, .vt-stage.vt--exp1 { gap: 0; }
.vt-stage.vt--exp0 .vt-embed[data-i="0"],
.vt-stage.vt--exp1 .vt-embed[data-i="1"] { flex-basis: 100%; }
.vt-stage.vt--exp0 .vt-embed[data-i="1"],
.vt-stage.vt--exp1 .vt-embed[data-i="0"] { flex-basis: 0; }

/* постер-заглушка поверх ролика: гасит воспроизведение и ловит клик */
.vt-cover {
  position: absolute; inset: 0; z-index: 3; border: none; margin: 0; padding: 0;
  cursor: pointer; background: #000; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); transition: opacity 0.25s ease;
}
.vt-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.vt-cover .play { position: relative; font-size: calc(46 * var(--u)); line-height: 1; color: var(--fg-bright); text-shadow: 0 0 16px rgba(255, 176, 0, 0.9); }
.vt-cover .lbl { position: relative; font-size: calc(14 * var(--u)); letter-spacing: 3px; color: var(--fg-bright); text-shadow: var(--glow); }
.vt-cover:hover .play { color: #fff; }
/* активный (играющий) ролик — заглушка убрана, доступны родные контролы */
.vt-embed.vt--live .vt-cover { opacity: 0; pointer-events: none; }

/* вспышка яркости при раскрытии — ощущение включения кинескопа */
.vt-embed.vt--flash { animation: vtFlash 1.2s cubic-bezier(0.15, 0.8, 0.25, 1) both; }
@keyframes vtFlash {
  0%  { filter: brightness(3.2) }
  40% { filter: brightness(1.6) }
  100%{ filter: brightness(1) }
}

/* вкладки-переключатели: всегда во всю ширину, всегда кликабельны */
.vt-tabs {
  margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.vt-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer; user-select: none;
  white-space: nowrap; overflow: hidden;
  border: 1px solid var(--border-accent); border-radius: 8px;
  background: rgba(255, 176, 0, 0.06);
  color: var(--fg-bright); font-size: calc(14 * var(--u)); letter-spacing: 2px;
  transition: background 0.15s, border-color 0.15s;
}
.vt-tab:hover { background: rgba(255, 176, 0, 0.13); }
.vt-tab.vt--on { background: rgba(255, 176, 0, 0.16); border-color: var(--fg); }
.vt-tab .ic { flex-shrink: 0; text-shadow: var(--glow); }
.vt-tab .ic::before { content: '⛶'; }
.vt-tab.vt--on .ic::before { content: '▢'; }
.vt-tab .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .vt-stage { flex-direction: column; }
  .vt-embed { flex-basis: auto; width: 100%; }
  .vt-stage.vt--exp0 .vt-embed[data-i="1"],
  .vt-stage.vt--exp1 .vt-embed[data-i="0"] { flex-basis: auto; }
  .vt-tabs { grid-template-columns: 1fr; }
}

.gallery {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: #0a0602;
}
.gallery img {
  height: 240px; min-width: 0; object-fit: cover; display: block;
}
.gallery .video-tile { position: relative; height: 240px; flex: 1 1 30%; min-width: 0; }
.gallery .video-tile video { height: 100%; width: 100%; object-fit: cover; display: block; }
.gallery .video-tile .play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 46px; color: #ffd166; text-shadow: 0 0 16px rgba(255, 176, 0, 0.9);
  pointer-events: none;
}
@media (max-width: 640px) {
  .gallery img, .gallery .video-tile { height: 150px; }
}

/* ---------- страница события: слайды ---------- */

.slides-row { margin-top: 16px; display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.slides-cover {
  width: min(440px, 100%); aspect-ratio: 16 / 9;
  border: 1px solid var(--border-accent); border-radius: 10px;
  overflow: hidden; background: #0a0602; position: relative;
  transition: width 1.2s cubic-bezier(0.15, 0.8, 0.25, 1);
}
.slides-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slides-info { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; align-self: stretch; }
.slides-info .title { font-size: calc(20 * var(--u)); color: var(--fg-bright); line-height: 1.25; }
.slides-info .desc { font-size: calc(14 * var(--u)); opacity: 0.8; margin-top: 8px; line-height: 1.45; }
.slides-info .btn { align-self: flex-start; margin-top: auto; }
.slides-info .btn-dl {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-accent); border-radius: 10px;
  padding: 12px 24px; font-size: calc(17 * var(--u));
  background: rgba(255, 176, 0, 0.12);
  align-self: flex-start; margin-top: auto;
}
.slides-info .btn-dl:hover { background: rgba(255, 176, 0, 0.2); box-shadow: 0 0 22px rgba(255, 176, 0, 0.25); color: #fff; }
.slides-info .btn-dl-top-gap { padding-top: 16px; }

/* обложка кликабельна: миниатюра разъезжается на всю ширину контента,
   в том же фрейме проявляется PDF */
.slides-cover.doc-toggle { cursor: pointer; }
.slides-cover.doc-toggle.doc--on { width: 100%; border-color: var(--fg); }

.slides-cover .doc-frame {
  position: absolute; inset: 0; z-index: 2; background: #0a0602;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.slides-cover.doc--on .doc-frame { opacity: 1; pointer-events: auto; }
.slides-cover .doc-frame iframe { width: 100%; height: 100%; border: none; display: block; }

/* ---------- лайтбокс (DOM создаётся из crt.js) ---------- */

.lb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(3, 2, 1, 0.92);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  animation: lbFade 0.25s ease both;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpolygon points='5,1 11,1 14,4 14,10 11,13 5,13 2,10 2,4' fill='%23000'/%3E%3Cpolygon points='6,2 10,2 13,5 13,9 10,12 6,12 3,9 3,5' fill='%23ffd166'/%3E%3Crect x='5' y='6' width='6' height='2' fill='%23000'/%3E%3Crect x='11' y='11' width='2' height='2' fill='%23000'/%3E%3Crect x='12' y='12' width='2' height='2' fill='%23000'/%3E%3Crect x='13' y='13' width='3' height='3' fill='%23000'/%3E%3C/svg%3E") 9 8, zoom-out;
}
.lb-box { display: flex; flex-direction: column; align-items: stretch; }
.lb-box.opening { animation: lbOpen 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.lb-media {
  background: #0a0602; border: 1px solid var(--border-accent);
  box-shadow: 0 0 60px rgba(255, 176, 0, 0.25);
  display: block; box-sizing: border-box;
  animation: lbFade 0.2s ease both;
}
.lb-caption {
  box-sizing: border-box; width: 100%; min-width: 0; overflow-wrap: break-word;
  background: #140c04; border: 1px solid var(--border-accent); border-top: none;
  padding: 14px 20px 16px; text-align: left;
  font-family: var(--font);
}
.lb-caption .tag { font-size: 12px; letter-spacing: 3px; color: var(--fg-dim); }
.lb-caption .name { font-size: 20px; color: var(--fg-bright); margin-top: 4px; }
.lb-caption .desc { font-size: 14px; color: var(--fg); opacity: 0.85; margin-top: 6px; line-height: 1.4; }
.lb-arrow {
  font-family: var(--font); font-size: 44px; line-height: 1;
  color: var(--fg); user-select: none; flex-shrink: 0;
  text-shadow: 0 0 10px rgba(255, 176, 0, 0.5);
}
.lb-arrow:hover { color: var(--fg-bright); text-shadow: 0 0 16px rgba(255, 209, 102, 0.9); }
.lb-hint {
  position: absolute; bottom: 2vmin; left: 0; right: 0; text-align: center;
  color: var(--fg-dim); font-family: var(--font);
  font-size: 14px; letter-spacing: 2px;
}