/* SAIXT: общий стиль главной и Studio (бумага в клетку, наклейки, плёнка) */
:root{
  --paper:#F3EFE4; --paper-2:#EAE4D4; --grid:rgba(20,20,19,.075);
  --ink:#141413; --ink-2:#3B3A36; --muted:#5E5B53;
  --coral:#FF5A3C; --coral-d:#E2421F; --lime:#D9F542;
  --panel:#141413; --on-panel:#ECE8DC; --on-panel-2:#A9A598;
  --ease:cubic-bezier(.2,.8,.2,1);
  --display:'Unbounded',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --body:'Golos Text',system-ui,sans-serif;
  --dark:#141413; --shadow:#141413; --cream:#F3EFE4;
}
/* тёмная тема: включается сама при заходе, светлая по кнопке */
:root[data-theme="dark"]{
  --paper:#131312; --paper-2:#1F1F1D; --grid:rgba(236,232,220,.045);
  --ink:#ECE8DC; --ink-2:#CFCBBF; --muted:#9E9A8E; --coral-d:#FF6B4F;
  --panel:#1C1C1A; --on-panel:#ECE8DC; --on-panel-2:#A9A598; --shadow:#36352F;
  color-scheme:dark;
}
.theme{width:38px;height:38px;display:inline-grid;place-items:center;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;padding:0;
  transition:transform .25s var(--ease),background .25s var(--ease)}
.theme:hover{transform:rotate(-12deg)}
.theme svg{width:18px;height:18px}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-40px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;animation:gridDrift 90s linear infinite}
@keyframes gridDrift{to{transform:translate(24px,24px)}}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,3vw,40px);
  background:var(--paper);border-bottom:2px solid var(--ink)}
.logo{font-family:var(--display);font-size:24px;letter-spacing:-.04em;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{width:10px;height:10px;border-radius:50%;background:var(--coral);display:inline-block;box-shadow:0 0 0 2px var(--ink)}
.nav nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em}
.nav nav a{text-decoration:none}
.nav nav a:not(.pill):hover,.nav nav a[aria-current]{color:var(--coral-d)}
.studio-link{background:var(--lime);color:var(--dark);border:2px solid var(--ink);padding:6px 10px;box-shadow:3px 3px 0 var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.studio-link:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
.studio-link sup{font-size:9px}
.pill{background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;transition:transform .3s var(--ease),background .3s var(--ease)}
.pill:hover{background:var(--coral-d);transform:translateY(-2px)}

.tag{display:inline-block;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.08em;padding:7px 14px;background:var(--lime);color:var(--dark);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);transform:rotate(-2.5deg);animation:wobble 7s var(--ease) infinite;animation-delay:-2s}
.tag.cream{background:var(--paper);color:var(--ink)}
@keyframes wobble{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(-1deg) translateY(-2px)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.04em;text-decoration:none;
  padding:16px 24px;border:2px solid var(--ink);background:var(--coral);color:var(--dark);box-shadow:6px 6px 0 var(--shadow);cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--shadow)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--shadow)}
.btn.lime{background:transparent;color:var(--lime);border-color:var(--lime);box-shadow:none;padding:12px 16px;font-size:13px}
.btn.lime:hover{background:var(--lime);color:var(--dark);transform:none}
@media (pointer:coarse){.btn,.pill{min-height:44px}}

h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.98;text-align:center;margin:0}
h1 .l1,h1 .l2{display:block}
.sticker{font-style:normal;color:var(--coral);text-shadow:.05em .05em 0 var(--ink);display:inline-block}
.sticker .c{display:inline-block;transform:translateY(calc((1 - var(--kc,1))*.35em)) rotate(calc((1 - var(--kc,1))*var(--jr,0deg)));opacity:var(--kc,1)}

section.block{padding:clamp(72px,11vw,140px) clamp(16px,4vw,56px);position:relative}
.wrap{max-width:1240px;margin:0 auto}
.kicker{margin-bottom:22px}
h2.big{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1;margin:0 0 clamp(28px,4vw,56px);font-size:clamp(34px,6vw,84px)}
[data-reveal] .r{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in .r{opacity:1;transform:none}
[data-reveal].in .r:nth-child(2){transition-delay:.08s}[data-reveal].in .r:nth-child(3){transition-delay:.16s}[data-reveal].in .r:nth-child(4){transition-delay:.24s}[data-reveal].in .r:nth-child(5){transition-delay:.32s}

.card{position:relative;display:block;text-decoration:none;background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);user-select:none}
.card:hover,.card:focus-visible{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--coral)}
.card .media{position:relative;aspect-ratio:4/5;overflow:hidden;border-bottom:2px solid var(--ink);background:#22252b}
.card .media img,.card .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .media video{opacity:0;transition:opacity .4s var(--ease)}
.card.playing .media video{opacity:1}
.card .no{position:absolute;top:10px;left:12px;z-index:2;font-family:var(--display);font-size:30px;color:var(--coral);text-shadow:2px 2px 0 var(--shadow)}
.card .play{position:absolute;right:10px;bottom:10px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--lime);color:var(--dark);border:2px solid var(--dark);padding:3px 7px}
.card .txt{padding:16px 18px 18px}
.card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:20px;margin:0 0 6px;letter-spacing:-.02em}
.card p{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--muted)}

.dark{background:var(--panel);color:var(--on-panel)}
.dark h2.big{color:var(--lime)}
.marquee{margin-top:56px;border:2px solid var(--lime);overflow:hidden;white-space:nowrap}
.marquee div{display:inline-block;padding:14px 0;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.12em;color:var(--lime);animation:mq 40s linear infinite}
.marquee b{color:var(--coral);margin:0 22px}
@keyframes mq{to{transform:translateX(-50%)}}
.lime-bg{background:var(--lime);color:var(--dark)}
:root[data-theme="dark"] .dark{border-top:2px solid var(--shadow);border-bottom:2px solid var(--shadow)}
.center{text-align:center}
.center .tag{margin-bottom:24px}
.cta h2.big{max-width:16ch;margin-left:auto;margin-right:auto}
.cta .note{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:26px}
footer{background:#0B0B0A;color:var(--on-panel-2);padding:26px clamp(16px,4vw,56px);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:13px}
footer .logo{color:var(--on-panel);font-size:20px}

@media (max-width:560px){.nav nav a:not(.pill):not(.studio-link){display:none}.logo{font-size:20px}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal] .r{opacity:1;transform:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}