/* AI case pages: the night room from ../index.html */
html{
  --bg:#0b0b0d;--fg:#f4f1ea;--fg2:rgba(244,241,234,.74);--fg3:rgba(244,241,234,.58);
  --line:rgba(255,255,255,.13);--mat:rgba(22,22,26,.74);--mat-edge:rgba(255,255,255,.15);
  --press:rgba(255,255,255,.09);--accent:#C9D2DA;--shell:rgba(255,255,255,.05);--core:#141417;--shadow:rgba(0,0,0,.6);
  --gut:clamp(16px,3.6vw,56px);
  --title:"Gloock",Georgia,"Times New Roman",serif;
  --text:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --ease:cubic-bezier(.32,.72,0,1);--spring:cubic-bezier(.22,1,.36,1);
  background:var(--bg);color-scheme:dark;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;
}
html.lock{overflow:hidden}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.5 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img,video,svg{display:block}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0;padding:0}
h1,h2,h3{font-weight:400}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.eyebrow{font:500 12.5px/1.3 var(--mono);letter-spacing:.02em;color:var(--fg3)}

.cta{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:5px 5px 5px 24px;border-radius:99px;background:var(--fg);color:var(--bg);font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:transform .45s var(--spring)}
.cta i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg);color:var(--fg);transition:transform .45s var(--spring)}
.cta svg{width:15px;height:15px}
.cta:active{transform:scale(.97);transition-duration:.08s}
@media(hover:hover){.cta:hover i{transform:translate(2px,-2px) scale(1.06)}}
.link{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px;color:var(--fg2);box-shadow:inset 0 -1px 0 var(--line);transition:color .3s}
@media(hover:hover){.link:hover{color:var(--fg)}}

.bar{position:fixed;z-index:30;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;width:max-content;max-width:calc(100vw - 16px);height:56px;padding:0 6px 0 18px;border-radius:99px;background:var(--mat);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:inset 0 0 0 1px var(--mat-edge),0 10px 34px -16px var(--shadow)}
.bar .name{display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;letter-spacing:-.01em;margin-right:14px;white-space:pre}
.bar nav{display:flex;margin-right:6px}
.bar nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:14.5px;color:var(--fg2);border-radius:99px;transition:color .25s}
.bar nav a[aria-current=page]{color:var(--fg)}
@media(hover:hover){.bar nav a:hover{color:var(--fg)}}
.bar .cta{min-height:44px;padding:0 0 0 16px;gap:4px;font-size:14px}
.bar .cta i{width:44px;height:44px;background:transparent;color:inherit}
.burger{display:none;position:relative;width:44px;height:44px;border-radius:50%}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .45s var(--spring),top .45s var(--spring)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21.5px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:29;display:flex;flex-direction:column;justify-content:center;padding:90px 24px 40px;background:var(--bg);visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu.on{visibility:visible;opacity:1;transition:opacity .35s var(--ease)}
.menu a{display:flex;align-items:center;min-height:64px;font-family:var(--title);font-size:38px;line-height:1.1;box-shadow:inset 0 -1px 0 var(--line);opacity:0;transform:translateY(22px);transition:opacity .4s var(--ease),transform .5s var(--spring)}
.menu.on a{opacity:1;transform:none;transition-delay:calc(var(--i)*45ms + 60ms)}
@media(max-width:980px){.bar nav{display:none}.burger{display:block}.bar .name{margin-right:auto}.bar{width:calc(100vw - 16px);padding-left:16px}}

/* unconfirmed facts stay visible until the client answers */
.tc{font:500 13.5px/1.5 var(--mono);color:var(--accent);background:rgba(240,200,140,.1);padding:2px 7px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* covers */
.cov{display:block;min-width:0;--pos:50% 50%}
.cov-m{position:relative;display:block;overflow:hidden;border-radius:18px;background:#1d1f22;aspect-ratio:var(--a)}
.cov-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);transition:transform 1.1s var(--ease)}
.cov-go{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(10,10,12,.66);color:#fff}
.cov-go svg{width:15px;height:15px}
a.cov:hover .cov-m img{transform:scale(1.035)}
.cov-t{display:block;margin-top:12px;font:400 clamp(26px,2.5vw,38px)/1.1 var(--title);letter-spacing:-.01em}
.cov-s{display:block;margin-top:5px;font-size:15.5px;line-height:1.35;color:var(--fg2);max-width:34em}
.cov-f{display:block;margin-top:6px;font:500 13px/1.3 var(--mono);color:var(--fg3)}
.cov.soon .cov-m img{opacity:.42;filter:saturate(.55)}
.soon-l{position:absolute;left:12px;top:12px;display:flex;align-items:center;min-height:32px;padding:0 12px;border-radius:99px;background:rgba(10,10,12,.72);color:#f4f1ea;font:500 13px var(--mono)}

/* all cases */
.head{padding:clamp(120px,18vh,170px) var(--gut) clamp(20px,3vh,32px)}
.head h1{font-family:var(--title);font-size:clamp(66px,12.4vw,200px);line-height:.96;letter-spacing:-.018em;margin-top:8px}
.head .lead{margin-top:18px;color:var(--fg2);font-size:clamp(17px,1.45vw,21px);line-height:1.45;max-width:36em}
.filters{display:flex;flex-wrap:wrap;gap:2px 4px;padding:8px var(--gut) 12px;box-shadow:0 1px 0 var(--line)}
.filters button{flex:none;min-height:44px;padding:0 16px;border-radius:99px;font-size:14.5px;color:var(--fg2);white-space:nowrap;transition:color .25s,background-color .35s var(--ease)}
.filters button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
@media(hover:hover){.filters button:not([aria-pressed=true]):hover{color:var(--fg)}}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,5vh,56px) clamp(12px,1.4vw,20px);padding:clamp(24px,4vh,40px) var(--gut) clamp(60px,10vh,110px)}
.grid .cov.wide{grid-column:1/-1}
.grid .cov.wide .cov-m{max-height:min(82vh,760px);width:100%}
.grid .cov.hide{display:none}
.grid .cov:not(.wide) .cov-m{--a:4/5}

/* case head */
.chead{padding:clamp(88px,12vh,116px) var(--gut) clamp(16px,2.6vh,26px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 24px}
.chead h1{font:400 clamp(46px,7.4vw,118px)/1 var(--title);letter-spacing:-.018em;margin-top:6px}

/* 1. film */
.stage{padding:0 var(--gut);display:grid;gap:clamp(24px,4vh,44px) clamp(28px,4vw,72px)}
.film{position:relative;overflow:hidden;border-radius:18px;background:#000;scroll-margin-top:80px}
.film video{width:100%;height:100%;object-fit:contain;background:#000}
.film.w{aspect-ratio:16/9;width:min(100%,calc((100vh - 96px)*16/9));margin:0 auto}
.film.v{aspect-ratio:9/16;height:min(calc(100vh - 96px),860px);min-height:520px}
.film-play{position:absolute;inset:0;width:100%;display:grid;place-items:center;align-content:center;gap:12px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 44%)}
.film-play[hidden]{display:none}
html:not(.js) .film-play{display:none}
.fp-c{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#f4f1ea;color:#0b0b0d;transition:transform .45s var(--spring)}
.fp-c svg{width:30px;height:30px}
@media(hover:hover){.film-play:hover .fp-c{transform:scale(1.07)}}
.film-play:active .fp-c{transform:scale(.95);transition-duration:.08s}
.fp-t{display:flex;gap:9px;align-items:baseline;padding:7px 14px;border-radius:99px;background:rgba(10,10,12,.66);font-size:15px;font-weight:500}
.fp-n{font:500 13px var(--mono);color:rgba(255,255,255,.76)}

.stage.is-v{grid-template-columns:auto minmax(0,1fr);align-items:start}
.stage.is-v .film-col{position:sticky;top:84px}
.stage.is-w .film-col{grid-column:1/-1}
.stage.is-w{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.side{display:grid;gap:clamp(28px,4vh,44px);min-width:0}
.main-col{display:grid;gap:clamp(28px,4vh,44px);min-width:0}

/* series switcher */
.eps{display:grid}
.ep{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:76px;width:100%;padding:8px 10px 8px 8px;text-align:left;border-radius:14px;color:var(--fg2);transition:background-color .3s,color .3s}
.ep img{width:44px;height:60px;border-radius:7px;object-fit:cover}
.ep b{display:block;font-weight:500;font-size:16px;line-height:1.25;color:var(--fg)}
.ep em{display:block;font-style:normal;font-size:14.5px;line-height:1.3;color:var(--fg2)}
.ep small{font:500 13px var(--mono);color:var(--fg3)}
.ep[aria-pressed=true]{background:var(--press)}
.ep[aria-pressed=true] small{color:var(--accent)}
@media(hover:hover){.ep:not([aria-pressed=true]):hover{background:rgba(255,255,255,.05)}}

/* 2. passport */
.pass div{display:grid;grid-template-columns:minmax(92px,3fr) minmax(0,8fr);gap:4px 16px;padding:11px 0;box-shadow:inset 0 -1px 0 var(--line)}
.pass div:first-child{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.pass dt{font:500 13px/1.6 var(--mono);color:var(--fg3)}
.pass dd{font-size:16.5px;line-height:1.35}

/* 3-4. copy */
.blk h2,.sec h2,.next h2{font:400 clamp(30px,3.2vw,50px)/1.08 var(--title);letter-spacing:-.012em}
.blk p{margin-top:10px;color:var(--fg2);line-height:1.5;max-width:40em}
.blk p .tc{display:inline}
.did{counter-reset:d;margin-top:10px}
.did li{counter-increment:d;display:grid;grid-template-columns:30px minmax(0,1fr);padding:11px 0;line-height:1.4;box-shadow:inset 0 -1px 0 var(--line)}
.did li::before{content:counter(d);font:500 12.5px/1.9 var(--mono);color:var(--accent)}

/* 5-6. sections */
.sec{padding:clamp(52px,9vh,92px) var(--gut) 0}
.sec>h2+*{margin-top:clamp(16px,2.6vh,26px)}
.sec .note{margin-top:14px;color:var(--fg2)}
.shots{display:grid;gap:clamp(10px,1.2vw,18px)}
.shots.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.shots+.shots{margin-top:clamp(10px,1.2vw,18px)}
.shot{min-width:0}
.shot-m{position:relative;display:block;width:100%;overflow:hidden;border-radius:14px;background:#1d1f22;aspect-ratio:var(--a,16/9)}
.shot-m img,.shot-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.shot-m.sheet{background:#fff}
.shot-m.sheet img{object-fit:contain}
.shot-p{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(10,10,12,.66);color:#fff;transition:opacity .25s}
.shot-p svg{width:15px;height:15px}
button.shot-m.on .shot-p{opacity:0}
figcaption{margin-top:8px;font-size:14.5px;line-height:1.3;color:var(--fg2)}
.slot{display:grid;place-items:center;text-align:center;padding:22px 18px;min-height:120px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px)}
.shots+.slot{margin-top:clamp(10px,1.2vw,18px)}
.rf{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;gap:clamp(8px,1.4vw,20px)}
.rf .slot{aspect-ratio:var(--a,16/9);min-height:0}
.rf-go{display:grid;place-items:center;color:var(--fg3)}
.rf-go svg{width:26px;height:26px}
.rf-l{margin-bottom:8px;font:500 13px var(--mono);color:var(--fg3)}
.rf-solo{max-width:640px}
.rf.tall{max-width:820px}

/* 7. next */
.next{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(60px,10vh,110px) var(--gut) clamp(60px,10vh,110px)}
.next-c h2{font-size:clamp(46px,6.6vw,104px);line-height:1}
.next-c .cta{margin-top:clamp(18px,3vh,28px)}
.next-p .eyebrow{margin-bottom:10px}
.next-p .cov-m{max-height:46vh}

footer{padding:0 var(--gut) 34px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;font-size:14.5px;color:var(--fg3)}
.dock{display:none}

@media(max-width:1100px) and (min-width:761px){
  .stage.is-v{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .film.v{height:auto;width:100%;min-height:0}
}
@media(max-width:760px){
  body{font-size:16px}
  .bar>.cta{display:none}
  .eyebrow,.pass dt{font-size:13px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid .cov.wide .cov-m{aspect-ratio:4/3;--pos:32% 50%}
  .stage.is-v,.stage.is-w{grid-template-columns:minmax(0,1fr)}
  .stage.is-v .film-col{position:static}
  .film.v{width:100%;height:auto;min-height:0;max-height:none}
  .film.w{width:100%}
  .fp-c{width:72px;height:72px}
  .shots.c2{grid-template-columns:minmax(0,1fr)}
  .shots.c3,.shots.c5{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1);padding:0 var(--gut);scroll-padding:0 var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .shots.c3::-webkit-scrollbar,.shots.c5::-webkit-scrollbar{display:none}
  .shots.c3 .shot,.shots.c5 .shot{flex:0 0 46vw;scroll-snap-align:start}
  .rf .slot{aspect-ratio:auto;min-height:150px}
  .rf{grid-template-columns:minmax(0,1fr)}
  .rf-go svg{transform:rotate(90deg)}
  .rf-go{height:44px}
  .next{grid-template-columns:minmax(0,1fr)}
  .next-c{order:-1}
  .next-p .cov-m{max-height:none}
  .dock{display:flex;position:fixed;z-index:25;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));justify-content:space-between;box-shadow:0 16px 36px -12px rgba(0,0,0,.6),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .3s var(--ease),transform .45s var(--spring),visibility 0s .3s}
  .dock.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .45s var(--spring)}
  footer{padding-bottom:calc(34px + 78px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}}
@media(prefers-reduced-transparency:reduce){.bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}}

/* 12.11: Real → Film в три шага (фото → карта → кадр) */
.rf.r3{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr);margin-bottom:22px}
.rf.r3 .shot-m{aspect-ratio:4/5}
.rf.r3 .shot-m.sheet img{object-fit:cover}
@media (max-width:760px){.rf.r3{grid-template-columns:minmax(0,1fr)}.rf.r3 .shot-m{aspect-ratio:4/3}}