/* Layout: 12-column asymmetric grid. Sticky bracket label in cols 1-3, content offset to the right, media breaking the column. Dark bands carry the generated moon and stone backgrounds. */
:root{
  --bg:#0b0b0b; --fg:#f1f1ee; --mute:#8c8c87; --line:rgba(255,255,255,.14); --frame:rgba(255,255,255,.18);
  --accent:#FFC100; --ink:#0b0b0b;
  --display:"Unbounded","Montserrat",system-ui,sans-serif; --body:"Montserrat",system-ui,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#f3f3f0; --fg:#0b0b0b; --mute:#6c6c67; --line:rgba(0,0,0,.14); --frame:rgba(0,0,0,.2); color-scheme:light}}
:root[data-theme="light"]{--bg:#f3f3f0; --fg:#0b0b0b; --mute:#6c6c67; --line:rgba(0,0,0,.14); --frame:rgba(0,0,0,.2); color-scheme:light}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
.wrap{max-width:1120px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.dk{--bg:#0b0b0b;--fg:#f1f1ee;--mute:#9a9a95;--line:rgba(255,255,255,.16);--frame:rgba(255,255,255,.2);background:#0b0b0b;color:var(--fg)}
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);display:none;z-index:20}

/* hero: full-bleed portrait in orange light, huge red condensed word, white brush script across it */
.hero{position:relative;min-height:100svh;overflow:clip;isolation:isolate;color:#fff;background:#050303;--red:#e2301f;--fs:min(30vw,56svh);--wb:clamp(52px,9.5svh,104px)}
.hero > *{position:absolute}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bg{position:absolute;inset:-4% 0 0 0;background:url(../media/hero_kaztom.jpg) center 14%/cover no-repeat;animation:kb 2.6s cubic-bezier(.2,.7,.2,1) both;z-index:0}
.shade{inset:0;z-index:1;background:linear-gradient(to bottom,rgba(5,3,3,.5) 0,transparent 22%,transparent 46%,rgba(5,3,3,.78) 78%,#050303 100%)}
.nav{left:0;right:0;top:max(18px,calc(env(safe-area-inset-top,0px) + 14px));z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:max(18px,env(safe-area-inset-left,0px)) max(18px,env(safe-area-inset-right,0px));font-size:clamp(12px,1.25vw,15px);animation:down .9s .2s both}
.nav a{color:#fff;text-decoration:none}
.nav .links{display:flex;justify-content:flex-end;gap:clamp(14px,2.4vw,30px)}
.nav .links a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.mark{display:block;width:34px;height:20px}
.cap{left:0;right:0;z-index:3;text-align:center;font-size:clamp(10px,1.15vw,14px);letter-spacing:.03em;text-transform:uppercase;margin:0;padding-inline:16px;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.85);white-space:nowrap;animation:fade 1s 1.2s both}
.cap.t{bottom:calc(var(--wb) + var(--fs) * .88 + 10px)}
.cap.b{bottom:max(clamp(14px,3.4svh,32px),calc(env(safe-area-inset-bottom,0px) + 10px))}
.word{left:0;right:0;bottom:var(--wb);z-index:2;display:flex;justify-content:center;font-family:"Anton","Oswald",Impact,sans-serif;font-weight:400;color:var(--red);font-size:var(--fs);line-height:.86;letter-spacing:-.005em;text-transform:uppercase;overflow:clip;padding-top:.06em}
.word span{display:inline-block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 80ms + 250ms)}
.script{left:50%;bottom:calc(var(--wb) + var(--fs) * .33);z-index:3;margin:0;font-family:"Mr Dafoe","Segoe Script",cursive;font-weight:400;font-size:min(17vw,30svh);line-height:1;white-space:nowrap;color:#fff;transform:translateX(-50%) rotate(-9deg);text-shadow:0 6px 30px rgba(0,0,0,.35);animation:ink 1.4s 1.1s cubic-bezier(.4,.1,.2,1) both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes ink{from{clip-path:inset(-10% 100% -10% -4%)}to{clip-path:inset(-10% -4% -10% -4%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.bgwrap{inset:0;z-index:0;overflow:clip}
@supports (animation-timeline: scroll()){
  .bgwrap{animation:bgp linear both;animation-timeline:scroll(root);animation-range:0 100svh}
  @keyframes bgp{to{transform:translateY(9svh) scale(1.05)}}
}
@media (max-width:760px){
  .nav .links a:nth-child(n+3){display:none}
  .cap.t{display:none}
  .hero{--fs:min(36vw,40svh)}
  .script{font-size:min(22vw,22svh);bottom:calc(var(--wb) + var(--fs) * .36)}
}
@media (prefers-reduced-motion: reduce){.bg,.nav,.cap,.word span,.script{animation:none!important}}

/* sections on a shifted grid */
.sec{border-top:1px solid var(--line);padding-block:clamp(56px,11vh,110px)}
.sec .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.side{grid-column:1/4;align-self:start;position:sticky;top:calc(28px + env(safe-area-inset-top,0px))}
.lab{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0}
.lab b{color:var(--accent);font-weight:500}
.num{font-family:var(--display);font-weight:200;font-size:clamp(64px,9vw,120px);line-height:1;letter-spacing:-.05em;margin-top:14px;color:transparent;-webkit-text-stroke:1px var(--frame)}
.main{grid-column:5/-1;min-width:0}
.main.wide{grid-column:4/-1}
h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,4.4vw,48px);line-height:1.1;letter-spacing:-.035em;margin:0 0 26px;text-wrap:balance}
h3{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.6vw,28px);line-height:1.2;letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
p{margin:0 0 16px;max-width:60ch}
.mute{color:var(--mute)}
mark{background:var(--accent);color:var(--ink);padding:0 .25em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
a{color:var(--fg);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
figure{margin:34px 0 0}
figure img,figure video{display:block;width:100%;height:auto;border:1px solid var(--frame)}
.pull{margin-left:calc(-1 * (100% / 8.2))}  /* image pulls left under the label column */
.push{width:86%;margin-left:auto}
.cap{font-size:12px;color:var(--mute);margin:8px 0 0;letter-spacing:.06em}

/* reel: narrow video on the left, text offset on the right */
.reelrow{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px;align-items:start}
.reelrow .vid{grid-column:1/6;margin:0}
.reelrow .txt{grid-column:7/-1}
.reelrow .vid video{width:100%;aspect-ratio:9/16;object-fit:cover}

.qa{border-top:1px solid var(--line);padding-block:20px}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa .q{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.qa p:last-child{margin:0}

/* stories strip: staggered cards */
.strip{grid-column:1/-1;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px 2px 24px;scrollbar-width:thin}
.strip figure{margin:0;flex:0 0 min(250px,64vw);scroll-snap-align:start}
.strip figure:nth-child(even){transform:translateY(36px)}
.strip img,.strip video{aspect-ratio:9/16;object-fit:cover}

/* carousel band over stone texture */
.stone{position:relative;border-top:1px solid var(--line);padding-block:clamp(64px,12vh,120px);overflow:clip}
.stone::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0b0b0b,rgba(11,11,11,.72) 30%,rgba(11,11,11,.8) 70%,#0b0b0b),url(../media/texture.jpg) center/cover no-repeat}
.stone .wrap{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.slide{display:grid;grid-template-columns:90px 1fr;gap:6px 22px;border-top:1px solid var(--line);padding-block:26px}
.slide .n{font-size:12px;letter-spacing:.14em;color:var(--mute);padding-top:7px;text-transform:uppercase}
.slide .n b{color:var(--accent);font-weight:500}
.slide > div{min-width:0}
.slide p{margin:0;color:var(--mute)}

/* ending */
.end{position:relative;overflow:clip;min-height:min(80vh,640px);display:flex;align-items:flex-end}
.end .bgm{position:absolute;inset:0;background:url(../media/moon.jpg) center top/cover no-repeat;transform:scaleY(-1)}
.end .bgm::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0b0b0b 0,transparent 35%,transparent 65%,#0b0b0b 100%)}
.end .wrap{position:relative;width:100%;padding-block:clamp(72px,14vh,140px)}
.end h2{font-size:clamp(40px,10vw,120px);font-weight:200;letter-spacing:-.05em;line-height:.95;margin-bottom:28px}
.dot{display:inline-block;width:.18em;height:.18em;border-radius:50%;background:var(--accent);margin-right:.2em;vertical-align:.38em}

@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 4% cover 26%}
  .bar{display:block;animation:prog linear both;animation-timeline:scroll(root)}
  @keyframes rv{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes prog{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion: reduce){.rv,.bar,.mqt{animation:none!important}.bar{display:none}}
@media (max-width:860px){
  .sec .wrap,.stone .wrap{display:block}
  .side{position:static;margin-bottom:22px;display:flex;align-items:baseline;gap:16px}
  .num{margin:0;font-size:56px}
  .pull{margin-inline:0}.push{width:100%}
  .reelrow .vid{grid-column:1/-1;width:min(300px,100%)}
  .reelrow .txt{grid-column:1/-1}
  .strip figure:nth-child(even){transform:none}
  .slide{grid-template-columns:1fr}
  .slide .n{padding-top:0}
}
a:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* sitewide: same language as the first screen. Condensed red headlines, white brush script, orange-lit photography */
:root{--accent:#e2301f;--ink:#ffffff;--cond:"Anton","Oswald",Impact,sans-serif;--script:"Mr Dafoe","Segoe Script",cursive}
mark{background:var(--accent);color:#fff}
h2{font-family:var(--cond);font-weight:400;text-transform:uppercase;font-size:clamp(40px,6.6vw,88px);line-height:.95;letter-spacing:.003em;margin:0 0 24px}
h3{font-family:var(--cond);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3.6vw,42px);line-height:1;letter-spacing:.005em;margin:0 0 12px}
.num{font-family:var(--cond);font-weight:400;font-size:clamp(96px,14vw,210px);line-height:.82;letter-spacing:0;color:var(--accent);-webkit-text-stroke:0;margin-top:8px}
.brush{display:block;position:relative;z-index:1;font-family:var(--script);font-weight:400;font-size:clamp(36px,5vw,66px);line-height:1;white-space:nowrap;color:#fff;transform:rotate(-8deg);margin:-.62em 0 0 .5em;text-shadow:0 4px 22px rgba(0,0,0,.55)}
.slide .n b,.lab b{color:var(--accent)}
.stone::before{background:linear-gradient(to bottom,#0b0b0b,rgba(11,11,11,.7) 28%,rgba(11,11,11,.78) 72%,#0b0b0b),url(../media/hero_kaztom.jpg) center 25%/cover no-repeat}
.end .bgm{background:url(../media/hero_kaztom.jpg) center 22%/cover no-repeat;transform:none}
.end h2{font-size:clamp(52px,12vw,160px);font-weight:400;letter-spacing:0;line-height:.9;color:var(--accent)}
.end .dot{background:#fff}
.thx{display:inline-block;margin:0 0 0 -.9em;position:relative;top:-.28em;font-size:.62em;color:#fff;transform:rotate(-8deg)}
.thx{line-height:1}
@media (max-width:860px){.brush{margin-left:.2em}.side{flex-wrap:wrap}.brush{margin-top:0;margin-left:-.4em}}

/* round 3: smaller headlines and numbers, one frame size for all screenshots, stories as a grid (no nested scrolling), fixed minimal menu */
h2{font-size:clamp(26px,4vw,52px)}
h3{font-size:clamp(20px,2.6vw,30px)}
.num{font-size:clamp(58px,8.4vw,126px)}
.brush{font-size:clamp(24px,3.2vw,42px);margin:-.55em 0 0 .45em}
.end h2{font-size:clamp(34px,7.2vw,96px)}
.main figure,.main.wide figure.plain{margin-top:30px}
.main figure:not(.reel):not(.vid) img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#130b0b;border:1px solid var(--frame)}
.pull,.push{width:100%;margin-left:0;margin-right:0}
.strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;overflow:visible;scroll-snap-type:none;padding:36px 0 40px}
.strip figure{flex:none;min-width:0}
.strip figure:nth-child(even){transform:translateY(28px)}
@media (max-width:980px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}.strip figure:nth-child(even){transform:none}}
@media (max-width:560px){.strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.nav{position:fixed;z-index:30;top:0;left:0;right:0;padding-top:max(14px,calc(env(safe-area-inset-top,0px) + 10px));padding-bottom:12px;background:linear-gradient(to bottom,rgba(5,3,3,.7),transparent);animation:none;opacity:1}
.nav a{opacity:.92}
.nav a:hover{opacity:1}
.nav > a:first-child{justify-self:start}
.side{top:calc(68px + env(safe-area-inset-top,0px))}
html{scroll-padding-top:64px}

/* second block: centered statement, sans with serif-italic accents, words light up as it scrolls into view */
.statement{background:#0b0b0b;color:#f1f1ee;padding-block:clamp(90px,20vh,220px)}
.st{margin:0 auto;max-width:min(900px,100%);text-align:center;font-family:var(--body);font-weight:500;font-size:clamp(24px,3.7vw,48px);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.st .it{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:0}
@supports (animation-timeline: view()){
  .st span{animation:wd linear both;animation-timeline:view();animation-range:entry calc(var(--w) * .7%) entry calc(50% + var(--w) * .7%)}
  @keyframes wd{from{opacity:.16}to{opacity:1}}
}
@media (prefers-reduced-motion: reduce){.st span{animation:none!important}}

/* round 4: Inter for text, tighter tracking, calmer line-height; smaller statement with fewer lines */
:root{--body:"Inter","Montserrat",system-ui,sans-serif}
p,.lead,.slide p,.qa p{letter-spacing:-.025em;line-height:1.3}
.st{font-family:var(--body);font-weight:500;font-size:clamp(20px,2.7vw,34px);line-height:1.18;letter-spacing:-.02em;max-width:min(1000px,100%)}
.st .it{letter-spacing:-.005em}
.statement{padding-block:clamp(80px,16vh,170px)}

/* round 5: statement in the regular font; stage labels removed; brush words back */
.st .it{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
.side{display:block}
@media (max-width:860px){.side{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}}

/* round 6: attention animations */
.tickwrap{background:#0b0b0b;overflow:clip;padding-block:22px 6px}
.ticker{background:var(--accent);color:#fff;transform:rotate(-1.6deg);margin-inline:-3%;padding:12px 0;overflow:hidden}
.tk{display:flex;width:max-content;font-family:var(--cond);font-size:clamp(28px,4.6vw,60px);line-height:1.1;text-transform:uppercase;white-space:nowrap;animation:tk 24s linear infinite}
.tk span,.tk i{padding-right:.45em}
.tk i{font-style:normal;opacity:.85}
@keyframes tk{to{transform:translateX(-50%)}}
.st.typing .ch{opacity:0}
.st.typing .ch.on{opacity:1}
.st.typing span{animation:none!important;opacity:1}
.ch{font-style:inherit}
.ch.cur::after{content:"";display:inline-block;width:.07em;height:1.02em;margin-left:.06em;background:var(--accent);vertical-align:-.14em;animation:blink .9s steps(2,jump-none) infinite}
.st.done .ch.cur::after{animation-iteration-count:4}
@keyframes blink{50%{opacity:0}}
@supports (animation-timeline: view()){
  h2{animation:h2in linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
  .num{animation:numin linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .brush{animation:ink2 linear both;animation-timeline:view();animation-range:entry 25% entry 85%}
  .main figure,.reelrow .txt{animation:figin linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  .strip figure > :first-child{animation:figin linear both;animation-timeline:view();animation-range:entry calc(var(--k,0) * 7%) entry calc(45% + var(--k,0) * 7%)}
  .strip figure:nth-child(1){--k:0}.strip figure:nth-child(2){--k:1}.strip figure:nth-child(3){--k:2}.strip figure:nth-child(4){--k:3}.strip figure:nth-child(5){--k:4}
  .slide,.qa{animation:rowin linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  mark{background:linear-gradient(var(--accent),var(--accent)) left center/0% 100% no-repeat;animation:mk linear both;animation-timeline:view();animation-range:entry 35% entry 100%}
  .end h2{animation:h2in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes h2in{from{opacity:0;transform:translateY(46px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
  @keyframes numin{from{opacity:0;transform:translateY(34px) scale(.86)}to{opacity:1;transform:none}}
  @keyframes ink2{from{clip-path:inset(-20% 100% -20% -5%);opacity:.3}to{clip-path:inset(-20% -5% -20% -5%);opacity:1}}
  @keyframes figin{from{opacity:0;transform:translateY(54px) scale(.955)}to{opacity:1;transform:none}}
  @keyframes rowin{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
  @keyframes mk{to{background-size:100% 100%}}
}
@media (prefers-reduced-motion: reduce){.tk,h2,.num,.brush,.main figure,.reelrow .txt,.strip figure > :first-child,.slide,.qa,mark,.end h2{animation:none!important}.ch.cur::after{display:none}}

/* round 7: statement pinned while its words light up with the scroll; second ticker before the thanks */
.tickwrap.rev{padding-block:6px 22px}
.tickwrap.rev .ticker{transform:rotate(1.5deg)}
.tickwrap.rev .tk{animation-direction:reverse}
@supports (animation-timeline: view()){
  .statement{view-timeline:--stm block;height:260svh;padding:0}
  .pin{position:sticky;top:0;height:100svh;display:grid;place-items:center}
  .st span{animation:wlight linear both;animation-timeline:--stm;animation-range:cover calc(31% + var(--w) * .75%) cover calc(37% + var(--w) * .75%)}
  @keyframes wlight{
    from{opacity:.12;filter:blur(7px);color:var(--accent);transform:translateY(.25em)}
    55%{opacity:1;filter:blur(0);color:var(--accent);transform:none}
    to{opacity:1;filter:none;color:inherit;transform:none}
  }
}
@media (prefers-reduced-motion: reduce){.st span{animation:none!important}.statement{height:auto;padding-block:clamp(80px,16vh,170px)}.pin{position:static;height:auto}}

/* round 8: menu edges follow the first and last letter of the hero word (measured in script, safe fallback) */
.nav{padding-left:var(--el,max(18px,env(safe-area-inset-left,0px)));padding-right:var(--er,max(18px,env(safe-area-inset-right,0px)))}

/* round 9: tighter KAZTOM, no personal photos in the last blocks, funny stock sticker on the right of the thanks block */
.word{letter-spacing:-.02em}
.stone::before{background:linear-gradient(to bottom,#0b0b0b,#120a0a 50%,#0b0b0b)}
.end .bgm{background:none}
.end .bgm::after{display:none}
.end .wrap{position:relative}
.sticker{position:absolute;right:max(16px,3vw);bottom:clamp(24px,6vh,70px);width:clamp(210px,27vw,390px);height:auto;transform:rotate(6deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));animation:wob 5.5s ease-in-out infinite;pointer-events:none}
@keyframes wob{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-14px)}}
@supports (animation-timeline: view()){
  .sticker{animation:stk linear both,wob 5.5s ease-in-out 1s infinite;animation-timeline:view(),auto;animation-range:entry 0% entry 80%,normal}
  @keyframes stk{from{opacity:0;transform:translateY(80px) rotate(18deg) scale(.7)}to{opacity:1;transform:rotate(6deg)}}
}
@media (max-width:860px){.sticker{position:relative;right:auto;bottom:auto;display:block;margin:28px 0 0 auto;width:min(300px,76vw)}}
@media (prefers-reduced-motion: reduce){.sticker{animation:none!important;transform:rotate(6deg)}}

/* round 10: heavier menu */
.nav,.nav a,.nav span{font-weight:600}
.nav{font-size:clamp(13px,1.35vw,16px)}

/* round 11: questions in the Q&A blocks use the regular text style */
.qa .q{text-transform:none;letter-spacing:-.025em;font-size:clamp(15px,1.4vw,18px);font-weight:600;line-height:1.3;color:var(--fg);margin:0 0 8px}

/* round 12: red plate behind each question */
.qa .q{display:inline-block;max-width:100%;background:var(--accent);color:#fff;padding:.55em .85em;border-radius:3px;margin:0 0 14px}

/* round 13: Figma link button, click-to-enlarge lightbox for pictures and videos */
.linkbtn{display:inline-block;background:var(--accent);color:#fff;padding:.7em 1.1em;border-radius:3px;text-decoration:none;font-weight:600;letter-spacing:-.01em}
.linkbtn:hover{filter:brightness(1.1)}
.main figure img,.strip figure img{cursor:zoom-in}
figure{position:relative}
.vx{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border:0;border-radius:3px;background:rgba(0,0,0,.62);color:#fff;font:600 18px/1 var(--body);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.vx:hover{background:var(--accent)}
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,3,3,.94);display:grid;place-items:center;overflow:auto;overscroll-behavior:contain;padding:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));animation:lbin .25s ease both}
.lb img,.lb video{display:block;max-width:100%;max-height:calc(100svh - 36px);width:auto;height:auto;margin:auto;cursor:zoom-in;border:0;background:#000}
.lb video{cursor:auto;max-height:calc(100svh - 80px)}
.lb.z{display:block}
.lb.z img{max-width:none;max-height:none;cursor:zoom-out;margin:0 auto}
.lbx{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:101;width:44px;height:44px;border:0;border-radius:3px;background:var(--accent);color:#fff;font:600 22px/1 var(--body);cursor:pointer}
.lbh{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:101;margin:0;padding:.4em .8em;border-radius:3px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;letter-spacing:-.01em;pointer-events:none;white-space:nowrap}
@keyframes lbin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.lb{animation:none}}

/* round 14: carousel block (8): slide headlines in Inter, slightly emphasised; tracking -3% */
.slide .n{letter-spacing:-.03em}
.slide h3{font-family:var(--body);text-transform:none;font-weight:600;font-size:clamp(18px,2vw,24px);line-height:1.25;letter-spacing:-.03em;margin:0 0 8px}
.slide p{letter-spacing:-.03em}

/* round 15: centered minimal thanks, stage reveal effects, mobile fixes */
.end{min-height:min(72vh,580px);align-items:center;justify-content:center;text-align:center}
.end .wrap{display:flex;flex-direction:column;align-items:center;padding-block:clamp(64px,12vh,120px)}
.end h2{margin:0 0 18px;text-align:center;font-size:clamp(34px,7.2vw,96px)}
.end .lead{margin:0 auto;max-width:46ch;text-align:center;color:var(--mute)}
h2.split{animation:none!important;clip-path:none!important;opacity:1!important;transform:none!important}
h2.split .w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
h2.split .w > span{display:inline-block;transform:translateY(112%);transition:transform .85s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d) * 75ms)}
h2.split.in .w > span{transform:none}
figure.curtain{overflow:hidden}
.main figure.curtain{animation:none!important;opacity:1!important;transform:none!important}
figure.curtain::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:100% 50%;transition:transform .95s cubic-bezier(.7,0,.2,1);z-index:2;pointer-events:none}
figure.curtain.in::after{transform:scaleX(0)}
figure.curtain img,figure.curtain video{transform:scale(1.12);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
figure.curtain.in img,figure.curtain.in video{transform:none}
@media (max-width:860px){
  .sec{padding-block:clamp(44px,8vh,72px)}
  .num{font-size:clamp(54px,18vw,92px)}
  .side{margin-bottom:14px}
  .main figure,.reelrow .vid{margin-top:22px}
  .reelrow{gap:26px}
  .qa .q{font-size:15px}
  .slide{padding-block:20px}
}
@media (max-width:560px){
  h2{font-size:clamp(26px,8vw,38px)}
  .nav{grid-template-columns:1fr auto 1fr}
  .statement .st{font-size:clamp(19px,5.6vw,26px)}
  .end h2{font-size:clamp(30px,10vw,52px)}
}
@media (prefers-reduced-motion: reduce){figure.curtain::after{display:none}h2.split .w > span{transform:none;transition:none}figure.curtain img,figure.curtain video{transform:none;transition:none}}

/* round 16: phone layout. Photo on top, KAZTOM below; calmer, shorter intro text */
@media (max-width:760px){
  .hero{--fs:min(34vw,30svh);--wb:clamp(46px,8svh,80px);--ph:calc(100svh - var(--wb) - var(--fs) * .62)}
  .bgwrap{inset:0 0 auto 0;height:var(--ph)}
  .bg{inset:0;background-image:url(../media/hero_mobile.jpg);background-position:center top;background-size:cover}
  .shade{inset:0 0 auto 0;height:var(--ph);background:linear-gradient(to bottom,rgba(5,3,3,.4),transparent 18%,transparent 60%,#050303 100%)}
  .script{font-size:min(23vw,20svh)}
  .statement{height:210svh}
  .statement .st{font-size:clamp(15px,4.3vw,18px);line-height:1.25;letter-spacing:-.03em;max-width:none;text-wrap:pretty;text-align:center}
}

/* round 17: no header, sticky labels back to the top */
.side{top:calc(28px + env(safe-area-inset-top,0px))}
html{scroll-padding-top:16px}