/* deck.css — общая оболочка презентаций сайта preza.
 *
 * Дека-модуль подключает этот файл и настраивает тему переменными в :root
 * (палитра, шрифт, глифы). Тематические стили слайдов дека пишет в своём
 * <style> ПОСЛЕ подключения deck.css — они просто перекрывают общие.
 *
 * Переменные темы (значения ниже — тема по умолчанию «тёмное золото»):
 *   --bg --bg2 --panel --ink --dim --gold --gold2 --red --line  — палитра
 *   --stage-bg  — фон холста (градиенты), --font — шрифт
 *   --kicker-glyph — глиф перед kicker-ом, --fact-glyph — маркер списка фактов
 */
:root{
  --bg:#171114; --bg2:#221820; --panel:#2a1e26; --ink:#f3e9d6; --dim:#c9b795;
  --gold:#d9a94e; --gold2:#b8862f; --red:#a34040; --line:rgba(217,169,78,.35);
  --font:Georgia,'Times New Roman',serif;
  --kicker-glyph:'❦'; --fact-glyph:'✦';
  --stage-bg:
    radial-gradient(1100px 700px at 78% -10%,rgba(217,169,78,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 110%,rgba(163,64,64,.12),transparent 55%),
    linear-gradient(160deg,var(--bg2),var(--bg) 55%);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);
  font-family:var(--font);overflow:hidden}
#stage{position:absolute;top:50%;left:50%;width:1280px;height:720px;
  transform-origin:center;background:var(--stage-bg)}
.slide{position:absolute;inset:0;padding:70px 84px;display:none;flex-direction:column}
.slide.active{display:flex;animation:fadein .45s ease}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kicker{font-size:15px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);
  font-weight:normal;margin-bottom:14px}
.kicker::before{content:var(--kicker-glyph);margin-right:12px;color:var(--gold2)}
h1{font-size:64px;line-height:1.08;font-weight:normal;letter-spacing:.01em}
h2{font-size:42px;line-height:1.12;font-weight:normal;margin-bottom:26px}
.lead{font-size:21px;line-height:1.55;color:var(--dim)}
ul.facts{list-style:none;margin-top:6px}
ul.facts li{font-size:20px;line-height:1.5;padding:10px 0 10px 34px;position:relative;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 14%,transparent)}
ul.facts li:last-child{border-bottom:none}
ul.facts li::before{content:var(--fact-glyph);position:absolute;left:2px;color:var(--gold);
  font-size:15px;top:13px}
ul.facts b{color:var(--ink);font-weight:normal}
.cols{display:flex;gap:56px;flex:1;min-height:0;align-items:center}
.col-txt{flex:1.15}
.col-img{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
figure{max-width:100%;text-align:center}
figure img{max-width:100%;max-height:440px;border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.55);padding:8px;background:var(--panel);
  border-radius:10px}
figcaption{font-size:14px;color:var(--dim);margin-top:12px;line-height:1.45;font-style:italic}
.src{font-size:13px;color:var(--dim);line-height:1.5;margin-top:auto;padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--gold) 14%,transparent)}
/* финальный слайд: большое «Спасибо за внимание» */
.thanks{align-items:center;justify-content:center;text-align:center}
.thanks .big{font-size:88px;line-height:1.1;letter-spacing:.02em;
  background:linear-gradient(120deg,var(--gold) 30%,#f3e0a8 50%,var(--gold) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.thanks .sub{margin-top:18px;font-size:20px;color:var(--dim);font-style:italic}
.thanks .src{margin-top:44px;border-top:none;position:relative;width:100%;max-width:900px}
/* прогресс и низ — fixed к вьюпорту: на экранах выше 16:9 не висят в воздухе */
#track{position:fixed;top:0;left:0;right:0;height:4px;
  background:color-mix(in srgb,var(--gold) 10%,transparent);z-index:39}
#bar{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--gold2),var(--gold));
  width:0;transition:width .35s ease;z-index:40;border-radius:0 3px 3px 0;
  box-shadow:0 0 9px color-mix(in srgb,var(--gold) 50%,transparent)}
#hud{position:fixed;bottom:0;left:0;right:0;height:52px;display:flex;align-items:center;
  justify-content:space-between;padding:0 26px;font-size:14px;color:var(--dim);
  border-top:1px solid color-mix(in srgb,var(--gold) 16%,transparent);
  background:rgba(0,0,0,.22);z-index:40}
#hud .brand{letter-spacing:.18em;text-transform:uppercase;font-size:12px}
#hud .ctr{font-variant-numeric:tabular-nums;letter-spacing:.2em}
#hud .nav{display:flex;gap:10px;align-items:center}
.btn{cursor:pointer;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  color:var(--gold);background:color-mix(in srgb,var(--bg) 35%,transparent);
  font-family:inherit;font-size:15px;line-height:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border-radius:50%;user-select:none;white-space:nowrap;
  transition:background .2s,transform .15s,border-color .2s,box-shadow .2s}
.btn:hover{background:color-mix(in srgb,var(--gold) 15%,transparent);
  border-color:color-mix(in srgb,var(--gold) 62%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 7%,transparent),0 6px 14px rgba(0,0,0,.45);
  transform:translateY(-1px)}
.btn:active{transform:scale(.9)}
.btn svg{width:16px;height:16px;display:block}
/* режим чтения: текст доклада текущего слайда — на телефоне и на ПК;
   листается стрелками/свайпами/кнопками HUD, текст следует за слайдом */
.btn.rtoggle{display:inline-flex;width:auto;padding:0 16px;border-radius:999px;
  line-height:1;font-size:14px;letter-spacing:.02em}
#read{display:none}
#read .rhint{font-size:13px;color:var(--dim);text-align:center;margin-bottom:14px;line-height:1.5}
#read section{border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);
  background:rgba(0,0,0,.25);border-radius:14px;padding:20px 20px;margin-bottom:12px}
#read h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  font-weight:normal;margin-bottom:12px}
#read h3 .no{color:var(--gold2);margin-right:6px}
#read p{font-size:19px;line-height:1.75}
/* ——— режим чтения на ПК: небольшое окно ПОВЕРХ презентации,
       дека остаётся на фоне; стрелки/кнопки/клик по слайду листают,
       текст в окне следует за слайдом, Esc — закрыть ——— */
body.reading #read{
  display:block;position:fixed;z-index:50;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(640px,88vw);max-height:min(72vh,640px);
  overflow-y:auto;margin:0;padding:24px 26px 16px;
  background:color-mix(in srgb,var(--bg2) 90%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb,var(--gold) 36%,transparent);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.4)}
body.reading #read section{background:rgba(0,0,0,.22)}
body.reading #read p{font-size:20px;line-height:1.78}
/* ——— телефоны и узкие экраны: рефлоу вместо масштабирования ———
   stage перестаёт быть холстом 1280x720: слайд занимает экран целиком,
   текст в родных 17-18px, фото сверху, внутренний скролл если не влезает */
body.mobile{overflow:hidden;-webkit-text-size-adjust:100%}
body.mobile #stage{position:static;width:auto;height:auto;min-height:100vh;min-height:100dvh;
  transform:none !important}
body.mobile .slide{position:relative;inset:auto;height:100vh;height:100dvh;
  padding:24px 18px calc(100px + env(safe-area-inset-bottom,0px));
  display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.mobile .slide.active{display:flex}
body.mobile .kicker{font-size:12px;letter-spacing:.2em;margin-bottom:10px;padding-right:70px}
body.mobile h1{font-size:34px;line-height:1.12}
body.mobile h2{font-size:24px;line-height:1.22;margin-bottom:16px}
body.mobile .lead{font-size:16.5px}
body.mobile .cols{flex-direction:column;gap:18px;align-items:stretch;
  flex:none;min-height:auto}   /* натуральная высота: контент скроллится слайдом, а не сжимается */
body.mobile .col-img{order:-1}          /* фото сверху — текст ниже читается первым */
body.mobile figure img{max-height:34vh;width:auto;max-width:100%}
body.mobile figcaption{font-size:12.5px;margin-top:8px}
body.mobile ul.facts li{font-size:17px;line-height:1.55;padding:10px 0 10px 26px}
body.mobile ul.facts li::before{top:12px;font-size:13px}
body.mobile .src{font-size:11.5px}
body.mobile .thanks .big{font-size:44px}
body.mobile .thanks .sub{font-size:16px}
body.mobile .thanks .src{margin-top:26px;font-size:11.5px}
/* HUD — фиксированная нижняя панель, кнопки под палец (>=44px) */
body.mobile #track{position:fixed;z-index:60}
body.mobile #bar{position:fixed;z-index:60}
body.mobile #hud{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
  height:auto;border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);
  border-radius:18px;padding:8px 10px;gap:8px;
  background:color-mix(in srgb,color-mix(in srgb,var(--bg2) 85%,#000) 85%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
body.mobile #hud .brand{display:none}
body.mobile #hud .ctr{font-size:13px}
body.mobile #hud .nav{gap:6px;flex:1;justify-content:center}
body.mobile .btn{font-size:15px;width:auto;height:auto;padding:11px 13px;
  min-height:44px;min-width:44px;border-radius:999px;line-height:1}
body.mobile .btn svg{width:17px;height:17px}
body.mobile #rtgl{font-size:14.5px;padding:11px 12px}
/* телефон: режим чтения — полноэкранный текст текущего слайда (не окошко):
   слайды спрятаны, body скроллится, запас под фиксированную панель кнопок */
body.mobile.reading{overflow-y:auto;-webkit-overflow-scrolling:touch}
body.mobile.reading .slide{display:none !important}
body.mobile.reading #track,body.mobile.reading #bar{display:none}
body.mobile.reading #read{
  position:static;transform:none;width:auto;max-width:760px;max-height:none;
  overflow:visible;margin:0 auto;border:none;border-radius:0;box-shadow:none;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:16px 14px calc(110px + env(safe-area-inset-bottom,0px))}
body.mobile.reading #read p{font-size:19px;line-height:1.75}
/* совсем узкие экраны (≤340px): чуть компактнее, чтобы не вылезало */
@media (max-width:340px){
  body.mobile #hud .nav{gap:4px}
  body.mobile #rtgl{font-size:12.5px;padding:11px 8px}
  body.mobile .btn{padding:11px 9px}
}
/* превью-режим (?pv=N): миниатюра слайда для пульта докладчика —
   без HUD и прогресса, слайд переключается postMessage-ом */
body.pv #hud,body.pv #track,body.pv #bar{display:none !important}
body.pv .slide.active{animation:none}
/* полноэкранный режим на ПК: HUD спрятан для чистой картины;
   проявляется при наведении на нижнюю кромку или фокусе с клавиатуры.
   Телефоны (body.mobile, нет hover) и режим чтения — HUD остаётся */
html:fullscreen body:not(.reading):not(.mobile) #hud{opacity:0;transition:opacity .25s ease}
html:fullscreen body:not(.reading):not(.mobile) #hud:hover,
html:fullscreen body:not(.reading):not(.mobile) #hud:focus-within{opacity:1}
html:-webkit-full-screen body:not(.reading):not(.mobile) #hud{opacity:0;transition:opacity .25s ease}
html:-webkit-full-screen body:not(.reading):not(.mobile) #hud:hover,
html:-webkit-full-screen body:not(.reading):not(.mobile) #hud:focus-within{opacity:1}