/* Шаблон веб-презентации студии. Палитра: фон + один акцент (BAZA.md). Менять только :root. */
@font-face{font-family:U;src:url(../fonts/Unbounded-cyrillic.woff2) format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:U;src:url(../fonts/Unbounded-latin.woff2) format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
/* контурное слово: статичный 900 — у переменного шрифта обводка рисует внутренние перекрытия контуров */
@font-face{font-family:U9;src:url(../fonts/Unbounded900-cyrillic.woff2) format('woff2');font-weight:900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:U9;src:url(../fonts/Unbounded900-latin.woff2) format('woff2');font-weight:900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:M;src:url(../fonts/Manrope-cyrillic.woff2) format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:M;src:url(../fonts/Manrope-latin.woff2) format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  --bg:#0c0b0d; --ink:#f2f0eb; --mute:rgba(242,240,235,.56); --line:rgba(242,240,235,.16);
  --accent:#ff5a36;                      /* один акцент: цвет бренда или мира клипа */
  --pad:clamp(20px,4.4vw,88px);
  --fs:clamp(15px,1.15vw,22px);           /* основной текст */
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font:500 var(--fs)/1.45 M,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.deck{height:100svh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:none;scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.slide{position:relative;height:100svh;min-height:520px;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;padding:calc(var(--pad)*1.5) var(--pad) calc(var(--pad)*1.4);display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate}  /* minmax(0): широкое слово не растягивает колонку за край */
html.js:not(.print):not(.rm) [data-a]{opacity:0}

/* рамка слайда: бренд, номер 03/07, подпись автора — на каждом экране (JS) */
.chrome{position:absolute;inset:calc(var(--pad)*.5) var(--pad);pointer-events:none;z-index:5;display:grid;grid-template:auto 1fr auto/1fr auto;font:600 clamp(10px,.72vw,13px)/1 M;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.chrome .num{grid-column:2;color:var(--ink)}
.chrome .num b{color:var(--accent);font-weight:700}
.chrome .sign{grid-row:3;grid-column:1/3;display:flex;justify-content:space-between}
.progress{position:fixed;left:0;bottom:0;height:2px;background:var(--accent);width:0;z-index:9;transition:width .5s var(--ease)}

/* типографика */
.kicker{font:700 clamp(11px,.8vw,14px)/1.2 M;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.display{font:800 clamp(40px,7.4vw,150px)/.9 U;letter-spacing:-.02em;text-transform:uppercase}
.lead{font:400 clamp(22px,2.6vw,52px)/1.18 M;letter-spacing:-.01em;max-width:30ch}
.lead em{font-style:normal;color:var(--accent)}
.note{color:var(--mute);max-width:42ch}
.rule{height:1px;background:var(--line);border:0}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:inline-block}

/* 1. обложка: живой шейдер под текстом */
.cover{align-content:end;gap:calc(var(--pad)*.5)}
.cover canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.cover .display{font-size:clamp(28px,9.6vw,196px);max-width:10ch}
.cover .meta{display:flex;gap:clamp(16px,3vw,56px);flex-wrap:wrap;color:var(--mute);border-top:1px solid var(--line);padding-top:18px}
.cover .meta b{display:block;color:var(--ink);font-weight:700}

/* 2. вступление от первого лица */
.intro{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--pad);align-items:center}
.intro figure{aspect-ratio:3/4;overflow:hidden}
.intro figure img{width:100%;height:100%;object-fit:cover}
.intro .who{margin-top:2.2em;display:flex;gap:14px;align-items:center;color:var(--mute)}
.intro .who i{width:48px;height:1px;background:var(--accent)}

/* 3. раздел: огромное слово, кадр проходит под контурной частью */
.section{place-items:center;padding:0}
.section .w{grid-area:1/1;font:900 clamp(90px,24vw,470px)/.8 U9,U;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;z-index:1}
.section .w.stroke{z-index:3;filter:url(#outline)}   /* контур фильтром: text-stroke рисует внутренние перекрытия глифов */
.section figure{grid-area:1/1;z-index:2;width:min(46vw,760px);aspect-ratio:16/10;overflow:hidden}
.section figure img{width:100%;height:100%;object-fit:cover}
.section .cap{position:absolute;left:var(--pad);bottom:calc(var(--pad)*1.4);max-width:34ch;z-index:4}

/* 4. ингредиенты — полароиды */
.ingr{grid-template-rows:auto 1fr;gap:calc(var(--pad)*.6)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,40px);align-items:center}
.card{background:#f4f1ea;color:#16151a;padding:clamp(8px,.8vw,14px) clamp(8px,.8vw,14px) clamp(14px,1.4vw,26px);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.card:nth-child(odd){rotate:-2.2deg}.card:nth-child(even){rotate:1.8deg;translate:0 4%}
.card img{aspect-ratio:1;width:100%;object-fit:cover}
.card b{display:block;margin-top:.8em;font:800 clamp(13px,1vw,19px)/1.1 U;text-transform:uppercase}
.card span{display:block;margin-top:.35em;font-size:.86em;color:#55525c;line-height:1.3}

/* 5. 3D-макет площадки */
.maq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--pad);align-items:center}
.maq .stage{position:relative;height:100%;min-height:300px;border:1px solid var(--line);touch-action:pan-y}
.maq canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.maq .tag{position:absolute;left:0;top:0;font:700 11px/1 M;letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;background:var(--bg);border:1px solid var(--line);white-space:nowrap;pointer-events:none;will-change:transform}
.maq .tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
.maq ol{list-style:none;margin-top:1.6em;border-top:1px solid var(--line)}
.maq li{padding:.8em 0;border-bottom:1px solid var(--line);display:flex;gap:1em}
.maq li b{color:var(--accent);font:700 .8em/1.8 U}

/* 6. цифры — карточками */
.nums{grid-template-rows:auto 1fr auto;gap:calc(var(--pad)*.5)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);align-self:center}
.grid3>div{padding:clamp(16px,2vw,40px) clamp(12px,1.6vw,32px) 0 0;border-right:1px solid var(--line)}
.grid3>div+div{padding-left:clamp(12px,1.6vw,32px)}
.grid3>div:last-child{border-right:0}
.big{font:800 clamp(54px,8.4vw,172px)/.9 U;letter-spacing:-.03em;white-space:nowrap}
.big small{font-size:.38em;color:var(--accent);margin-left:.08em}
.todo{display:inline-block;background:#ffd84a;color:#141317;font:700 .78em/1 M;padding:.5em .7em;letter-spacing:.04em}

/* 7. финал */
.final{place-content:center;text-align:center;gap:calc(var(--pad)*.5);background:var(--accent);color:#141317}
.final .display{font-size:clamp(30px,11vw,230px)}
.final .chrome,.final .chrome .num{color:rgba(20,19,23,.66)}
.final .chrome .num b{color:#141317}
.final .sig{font:400 clamp(18px,1.6vw,30px)/1.3 M}

/* телефон и узкие окна: одна мысль на экран, сетки — стопкой */
@media (max-aspect-ratio:1/1){
  .intro,.maq{grid-template-columns:minmax(0,1fr);align-content:center}
  .intro figure{aspect-ratio:16/10;order:-1}
  .cards{grid-template-columns:repeat(2,1fr)}
  .section .w{font-size:27vw}
  .section figure{width:40vw;aspect-ratio:3/4}   /* узкий вертикальный кадр — края слова видны */
  .grid3{grid-template-columns:1fr}
  .grid3>div{border-right:0;border-bottom:1px solid var(--line);padding:16px 0!important}
  .maq .stage{height:46svh}
}
@media (prefers-reduced-motion:reduce){.progress{transition:none}}

/* печать / PDF: слайд = страница 1920×1080, всё в конечном виде */
@page{size:1920px 1080px;margin:0}
html.print .deck{height:auto;overflow:visible;scroll-snap-type:none}
html.print .slide{width:1920px;height:1080px;break-after:page;page-break-after:always}
html.print .slide:last-child{break-after:auto;page-break-after:auto}
html.print .progress{display:none}
html.export .deck{scroll-snap-type:none;scroll-behavior:auto}