/* A.K-Studio v5 — cinematic stage. One family (Heebo), thin display / regular body.
   Accent lives in ONE place (--accent) and is used only for tiny marks (logo dot, focus, slider handle). */
@font-face{font-family:"Heebo";src:url(../media/heebo_cf24a7da65.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --accent:#e39a4c;                         /* ← change the accent here only */
  --b0:#0c0c0c;                             /* media band / page */
  --b1:#171717;                             /* title band */
  --w:rgba(255,255,255,.92);--w67:rgba(255,255,255,.67);--g:#a9a9a9;--g2:#7d7d7d;--g3:#555;
  --line:rgba(255,255,255,.08);
  --ind:clamp(24px,10.4vw,150px);           /* text column start indent */
  --gut:clamp(16px,4.9vw,70px);             /* media margin */
  --col:1150px;                             /* text measure */
  --f:"Heebo",system-ui,sans-serif;
  --e:cubic-bezier(.25,.6,.3,1);
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vto .35s ease both}
::view-transition-new(root){animation:vti .5s ease both}
@keyframes vto{to{opacity:0}}@keyframes vti{from{opacity:0}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--b0);color-scheme:dark}
body{font-family:var(--f);font-weight:400;font-size:16px;line-height:1.65;color:var(--g);background:var(--b0);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:0}
ul,ol{list-style:none}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:16px;top:16px;z-index:99;background:#fff;color:#000;padding:8px 14px}
html.pre-en body{opacity:0}
[dir=ltr] .up{text-transform:uppercase}
.lat{unicode-bidi:isolate}

/* ---------- preloader (JS only, first page of a session) ---------- */
#pre{display:none}
html.js.pre #pre{display:flex;position:fixed;inset:0;z-index:100;background:var(--b0);align-items:center;justify-content:center;transition:opacity .5s ease}
#pre span{font-weight:200;font-size:15px;letter-spacing:.2em;color:var(--g2)}
#pre i{display:block;width:120px;height:1px;background:var(--line);margin-top:14px;position:relative;overflow:hidden}
#pre i::after{content:"";position:absolute;inset:0;background:var(--w67);transform:scaleX(0);transform-origin:right;animation:ld .9s var(--e) forwards}
[dir=ltr] #pre i::after{transform-origin:left}
@keyframes ld{to{transform:scaleX(1)}}
html.js.pre.done #pre{opacity:0;pointer-events:none}

/* ---------- header: hamburger + logo only ---------- */
.hd{position:fixed;top:0;inset-inline:0;z-index:40;height:64px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--ind);transition:background .4s ease}
.hd.s{background:rgba(12,12,12,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hd .l{display:flex;align-items:center;gap:22px}
.logo{font-weight:600;font-size:19px;letter-spacing:.01em;color:#fff;line-height:1}
.logo i{font-style:normal;color:var(--accent)}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:24px;height:32px}
.burger b{display:block;height:1px;background:var(--w);width:18px}
.burger:hover b{background:#fff}
.lang{font-size:12.5px;letter-spacing:.14em;color:var(--g2);display:inline-flex;gap:8px;align-items:center;padding:6px 0}
.lang b{font-weight:400;transition:color .3s}.lang b.on{color:#fff}.lang i{font-style:normal;color:var(--g3)}
.lang:hover b{color:var(--w)}

/* ---------- stage (home + overlay menu) ---------- */
.stage{position:fixed;inset:0;z-index:60;overflow:hidden;background:#000;display:flex;flex-direction:column}
body.home .stage{position:relative;height:100vh;height:100svh;z-index:1}
.menu[hidden]{display:none}
html.js .menu{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
html.js .menu.on{opacity:1;visibility:visible;transition:opacity .45s ease}
.reel{position:absolute;inset:0}
.reel .sl{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.reel .sl.on{opacity:1}
.reel img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.62)}
.reel .sl.on img{animation:kb 14s linear both}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translateX(-1.5%)}}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,6,.25),rgba(6,6,6,.62) 75%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 30%,rgba(0,0,0,.55))}
[dir=ltr] .reel::after{background:linear-gradient(270deg,rgba(6,6,6,.25),rgba(6,6,6,.62) 75%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 30%,rgba(0,0,0,.55))}
.stage .top{position:relative;z-index:2;height:64px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--ind)}
.stage .top .l{display:flex;align-items:center;gap:22px}
.close{font-size:12.5px;letter-spacing:.16em;color:var(--w67);display:inline-flex;align-items:center;gap:10px}
.close::before{content:"×";font-size:22px;font-weight:200;line-height:1;color:#fff}
.close:hover{color:#fff}
.sin{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding-inline:var(--ind);padding-bottom:4vh}
.big li{line-height:1}
.big a{display:inline-block;font-weight:100;font-size:clamp(40px,4.6vw,68px);letter-spacing:.01em;line-height:1.28;color:var(--w67);transition:color .35s ease}
[dir=ltr] .big a{text-transform:uppercase;font-weight:200}
.big a:hover,.big a[aria-current]{color:#fff}
.plist{margin-top:clamp(26px,4.4vh,44px);display:flex;flex-wrap:wrap;gap:6px 26px;font-size:12.5px;letter-spacing:.14em;color:var(--g2)}
[dir=ltr] .plist{text-transform:uppercase}
.plist a{transition:color .3s}.plist a:hover{color:#fff}
.plist .k{color:var(--g3);margin-inline-end:4px}
.reel-link{margin-top:clamp(26px,4vh,40px);display:inline-flex;align-items:center;gap:14px;font-size:12.5px;letter-spacing:.16em;color:var(--w67);align-self:flex-start}
.reel-link::before{content:"";width:34px;height:1px;background:var(--w67);transition:width .4s var(--e),background .3s}
.reel-link:hover{color:#fff}.reel-link:hover::before{width:54px;background:var(--accent)}
.who{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;padding:0 var(--ind) 26px;font-size:12px;letter-spacing:.1em;color:var(--g2)}
.who b{font-weight:500;color:var(--g)}
.who a:hover{color:#fff}

/* ---------- inner template: banner → title band → media band ---------- */
.banner{position:relative;height:34vh;min-height:220px;max-height:360px;overflow:hidden;background:#000}
.banner img,.banner video{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.78)}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 40%,rgba(0,0,0,.3))}
.tband{background:var(--b1);padding:clamp(44px,7vh,64px) var(--ind) clamp(48px,8vh,74px)}
.tband>*{max-width:var(--col)}
.ttl{font-weight:200;font-size:clamp(30px,3.9vw,56px);line-height:1.12;letter-spacing:.01em;color:var(--w)}
[dir=ltr] .ttl{text-transform:uppercase}
.ttl .dim{color:var(--g2)}
.cred{margin-top:clamp(36px,6vh,58px);display:flex;flex-wrap:wrap;gap:6px 34px;font-size:14px;letter-spacing:.04em}
[dir=ltr] .cred{text-transform:uppercase}
.cred i{font-style:normal}.cred i>span{color:var(--g2)}.cred i>span::after{content:":"}
.cred b{font-weight:400;color:var(--w);margin-inline-start:6px}
.cred .me b{color:#fff}
.intro{margin-top:20px;font-size:16px;line-height:1.7;color:var(--g);max-width:68ch}
.ai{margin-top:14px;font-size:13.5px;letter-spacing:.02em;color:var(--g2)}
.mband{background:var(--b0);padding:clamp(40px,7vh,72px) 0 clamp(80px,12vh,140px)}
.pad{padding-inline:var(--ind)}

/* ---------- work grid ---------- */
.filters{display:flex;gap:28px;padding-inline:var(--ind);margin-bottom:clamp(28px,5vh,48px);font-size:13px;letter-spacing:.12em}
.filters button{color:var(--g2);padding:4px 0;transition:color .3s}
[dir=ltr] .filters button{text-transform:uppercase}
.filters button:hover{color:var(--w)}.filters button.on{color:#fff}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-inline:var(--gut)}
.wc{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.wc.hide{display:none}
.wc img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.wc::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .35s ease}
.wc .t{position:absolute;z-index:2;inset-inline-start:clamp(18px,2.4vw,34px);bottom:clamp(16px,2.2vw,30px);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s var(--e)}
.wc .t b{display:block;font-weight:200;font-size:clamp(24px,2.5vw,38px);line-height:1.1;color:#fff;letter-spacing:.01em}
[dir=ltr] .wc .t b{text-transform:uppercase}
.wc .t small{display:block;margin-top:6px;font-size:12.5px;letter-spacing:.12em;color:rgba(255,255,255,.7)}
[dir=ltr] .wc .t small{text-transform:uppercase}
.wc:hover::after,.wc:focus-visible::after{background:rgba(0,0,0,.55)}
.wc:hover .t,.wc:focus-visible .t{opacity:1;transform:none}
.wc:hover img{transform:scale(1.025)}
@media (hover:none){.wc::after{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}.wc .t{opacity:1;transform:none}}
html:not(.js) .wc::after{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}
html:not(.js) .wc .t{opacity:1;transform:none}

/* ---------- series rows: heading + 1–2 lines + ONE big frame ---------- */
.row{margin-top:clamp(70px,12vh,130px)}
.row:first-child{margin-top:0}
.rh{padding-inline:var(--ind);max-width:calc(var(--col) + 2*var(--ind))}
.rh .n{display:block;font-size:12px;letter-spacing:.16em;color:var(--g3);margin-bottom:10px}
.rh h2{font-weight:400;font-size:clamp(17px,1.35vw,20px);letter-spacing:.03em;color:var(--w)}
[dir=ltr] .rh h2{text-transform:uppercase}
.rh h2 .dim{color:var(--g2);font-weight:300}
.rh p{margin-top:12px;font-size:15.5px;color:var(--g2);max-width:72ch}
.frame{margin:clamp(26px,4vh,40px) var(--gut) 0;position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;cursor:zoom-in}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.fcap{padding-inline:var(--gut);margin-top:12px;font-size:13px;color:var(--g3);letter-spacing:.02em}
.thumbs{margin:14px var(--gut) 0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.th{position:relative;aspect-ratio:4/3;overflow:hidden;background:#111;cursor:zoom-in}
.th img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .35s ease}
.th:hover img{opacity:1}
.th .pl{position:absolute;inset-inline-end:8px;bottom:6px;font-size:10px;letter-spacing:.14em;color:#fff;text-shadow:0 1px 6px #000}
.th .more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);font-weight:200;font-size:22px;color:#fff}
/* graphics: small print row */
.thumbs.tall{grid-template-columns:repeat(5,1fr)}
.thumbs.tall .th{aspect-ratio:3/4}.thumbs.tall .th img,.thumbs.tall .th video{object-position:top;width:100%;height:100%;object-fit:cover;opacity:.9}
.thumbs.tall .th figcaption{position:absolute;inset-inline:0;bottom:0;padding:22px 10px 8px;font-size:12px;color:#ddd;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))}

/* graphics: print & brand sets (posters / newspapers / logos / packaging) */
.gset{margin:clamp(26px,4vh,40px) var(--gut) 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.gset .th img{opacity:.92}.gset .th:hover img{opacity:1}
.gset.p .th{aspect-ratio:11/16}.gset.n .th{aspect-ratio:12/17}
.gset.l{grid-template-columns:1fr 1fr}.gset.l .th{aspect-ratio:16/10}
.gset .pk{display:flex;flex-direction:column;gap:14px}
.gset .pk .th:first-child{aspect-ratio:1/1}
.gset .th.lab{aspect-ratio:auto;background:none}.gset .th.lab img{height:auto;object-fit:contain}

/* before / after — 16:9 stage */
.ba{margin:clamp(26px,4vh,40px) var(--gut) 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba figure .fm{aspect-ratio:16/9;overflow:hidden}.ba figure img{width:100%;height:100%;object-fit:cover}
.ba figcaption{margin-top:10px;font-size:13px;color:var(--g3)}
.ba .bal{display:block;font-size:11px;letter-spacing:.2em;color:var(--g2);direction:ltr;margin-bottom:2px}
.ba.on{display:block}.ba.on>figure{display:none}
.ba-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-stage .ba-top{position:absolute;inset:0;z-index:2}
[dir=ltr] .ba-stage .ba-top{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
[dir=rtl] .ba-stage .ba-top{clip-path:inset(0 0 0 calc(100% - var(--p,50%)))}
.ba-h{position:absolute;top:0;bottom:0;inset-inline-start:var(--p,50%);width:1px;background:rgba(255,255,255,.85);z-index:3;transform:translateX(-50%)}
[dir=rtl] .ba-h{transform:translateX(50%)}
.ba-h::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--accent)}
.ba-l{position:absolute;top:16px;z-index:5;font-size:11px;font-weight:500;letter-spacing:.22em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.8);pointer-events:none;direction:ltr}
[dir=ltr] .ba-l.b,[dir=rtl] .ba-l.a{left:18px}[dir=ltr] .ba-l.a,[dir=rtl] .ba-l.b{right:18px}
.ba-caps{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:12px;font-size:13px;color:var(--g3)}
.ba-caps div:last-child{text-align:end}
.ba-caps .bal{display:block;margin-bottom:2px;direction:inherit}

/* prev / next */
.pn{margin-top:clamp(90px,14vh,150px);padding:clamp(44px,7vh,64px) var(--ind);background:var(--b1);display:grid;grid-template-columns:1fr 1fr;gap:30px}
.pn a{display:block}
.pn a+a{text-align:end}
.pn span{display:block;font-size:12.5px;letter-spacing:.14em;color:var(--g2)}
[dir=ltr] .pn span{text-transform:uppercase}
.pn b{display:block;margin-top:10px;font-weight:200;font-size:clamp(24px,2.6vw,40px);line-height:1.15;color:var(--w67);transition:color .35s}
[dir=ltr] .pn b{text-transform:uppercase}
.pn a:hover b{color:#fff}

/* credits */
.cv{padding-inline:var(--ind);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px;max-width:calc(1240px + 2*var(--ind))}
.cv h3{font-weight:400;font-size:12.5px;letter-spacing:.14em;color:var(--g2);margin-bottom:22px}
[dir=ltr] .cv h3{text-transform:uppercase}
[dir=ltr] .cv h3 span{display:none} /* EN: h3 already shows the English title */
.cv h3 span{display:block;margin-top:4px;letter-spacing:.04em;color:var(--g3)}
.cv li{font-weight:300;font-size:clamp(18px,1.5vw,22px);line-height:1.75;color:var(--w)}
.cv li small{unicode-bidi:isolate;font-size:12.5px;color:var(--g3);margin-inline-start:10px;letter-spacing:.04em}
.cv li a{border-bottom:1px solid rgba(255,255,255,.25);transition:border-color .3s}
.cv li a:hover{border-color:var(--accent)}
/* credits · crew reveal (hidden by default; hover / focus / tap) */
.cv li.hc{position:relative}
.cv .cvr{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}
.cv .cvr small{margin-inline-start:0}
.cv .cx{all:unset;cursor:pointer;position:absolute;inset-inline-start:-30px;top:calc(.875em - 11px);width:22px;height:22px;border-radius:50%;transition:background .3s}
.cv .cx i,.cv .cx i::before{position:absolute;inset:50% auto auto 50%;width:9px;height:1px;background:var(--accent);transform:translate(-50%,-50%);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.cv .cx i::before{content:"";transform:translate(-50%,-50%) rotate(90deg)}
.cv .cx:hover,.cv .cx:focus-visible{background:rgba(227,154,76,.12)}
.cv .cx:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.cv .cw{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.cv .cwi{overflow:hidden;min-height:0}
.cv .cw dl{display:grid;grid-template-columns:max-content 1fr;gap:7px 20px;margin:10px 0 18px;padding-inline-start:16px;border-inline-start:1px solid rgba(227,154,76,.45);line-height:1.35}
.cv .cw dl>div{display:contents}
.cv .cw dt{font-weight:400;font-size:12.5px;letter-spacing:0;color:var(--g2);padding-top:1px}
[dir=ltr] .cv .cw dt{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;padding-top:3px}
.cv .cw dd{font-weight:300;font-size:14.5px;color:var(--w);letter-spacing:.01em}
.cv li.hc.open .cw,.cv li.hc:focus-within .cw{grid-template-rows:1fr;opacity:1}
.cv li.hc.open .cx i::before,.cv li.hc:focus-within .cx i::before{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
@media (hover:hover){.cv li.hc:hover .cw{grid-template-rows:1fr;opacity:1}.cv li.hc:hover .cx i::before{transform:translate(-50%,-50%) rotate(0deg);opacity:0}}
.cv li.hc .cvr>bdi{transition:color .3s}
@media (hover:hover){.cv li.hc:hover .cvr>bdi{color:#fff}}
@media (max-width:900px){.cv .cx{inset-inline-start:-28px}}
@media (prefers-reduced-motion:reduce){.cv .cw,.cv .cx i,.cv .cx i::before{transition:none}}
/* contact */
.mail{display:inline-block;margin-top:clamp(36px,6vh,58px);font-weight:200;font-size:clamp(26px,3.3vw,48px);color:#fff;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:6px;transition:border-color .35s;direction:ltr;unicode-bidi:isolate}
.mail:hover{border-color:var(--accent)}

/* footer */
.ft{background:var(--b0);border-top:1px solid var(--line);padding:30px var(--ind) 34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;font-size:12.5px;letter-spacing:.08em;color:var(--g3)}
.ft nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.ft a{color:var(--g2);transition:color .3s}.ft a:hover{color:#fff}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(6,6,6,.97);display:none;align-items:center;justify-content:center;padding:6vh 6vw;cursor:zoom-out}
.lb.on{display:flex}
.lb img,.lb video{max-width:100%;max-height:82vh}
.lb .t{position:absolute;bottom:3vh;inset-inline:0;text-align:center;color:var(--g2);font-size:13px}
.lb .nv{position:absolute;top:50%;transform:translateY(-50%);padding:14px;color:var(--w67);font-weight:200;font-size:34px;line-height:1}
.lb .nv:hover{color:#fff}
.lb .nv.pr{right:2vw}.lb .nv.nx{left:2vw}
[dir=ltr] .lb .nv.pr{right:auto;left:2vw}[dir=ltr] .lb .nv.nx{left:auto;right:2vw}

/* calm fades */
.fd{transition:opacity .6s ease}
html.js .fd:not(.in){opacity:0}
html.rvall .fd{opacity:1}

@media (max-width:900px){
  .hd,.stage .top{height:56px}
  .wgrid{grid-template-columns:1fr;gap:12px;padding-inline:0}
  .thumbs{grid-template-columns:repeat(3,1fr);gap:8px}
  .thumbs.tall{grid-template-columns:repeat(2,1fr)}
  .gset{margin-inline:0;gap:8px}
  .gset.p,.gset.n{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72vw;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--ind);scrollbar-width:none}
  .gset.p::-webkit-scrollbar,.gset.n::-webkit-scrollbar{display:none}
  .gset.p .th,.gset.n .th{scroll-snap-align:center}
  .gset.k{grid-template-columns:1fr;gap:18px;padding-inline:var(--ind)}
  .gset .pk{display:grid;grid-template-columns:2fr 3fr;align-items:center;gap:8px}
  .frame,.ba{margin-inline:0}.fcap{padding-inline:var(--ind)}
  .ba-caps{padding-inline:var(--ind)}
  .cv{grid-template-columns:1fr}
  .pn{grid-template-columns:1fr}.pn a+a{text-align:start}
  .banner{height:28vh;min-height:200px}
  .filters{gap:22px}
  .who{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.js .fd:not(.in){opacity:1}
}