/* ==========================================================================
   khursevich.com
   Desktop: the original Readymag 1024px canvas, scaled to the window width
   (1u = window width / 1024, frozen above 2200px). Phones: Readymag phone canvas (320).
   ========================================================================== */

/* --- Font --------------------------------------------------------------
   The original site uses Nekst (TypeToday). Once you have a web licence, put
   Nekst-Regular/SemiBold/Black .woff2 into src/static/fonts/, uncomment the
   block below and change --font to: "Nekst", "Manrope", sans-serif;          */
/*
@font-face{font-family:"Nekst";src:url(/fonts/Nekst-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nekst";src:url(/fonts/Nekst-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Nekst";src:url(/fonts/Nekst-Black.woff2) format("woff2");font-weight:900;font-display:swap}
*/
@font-face{font-family:"Manrope";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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url(/fonts/manrope-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";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}

:root{
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#000;
  --text:#e4e4e4;
  --dim:rgba(255,255,255,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
  --t:.55s;
  --cw:min(var(--vw,100vw),2200px);
  --u:calc(var(--cw) / 1024);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:400;
  overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:opacity var(--t) var(--ease),color var(--t) var(--ease),text-decoration-color var(--t) var(--ease)}
a:hover{text-decoration-color:rgba(255,255,255,.3)}
::selection{background:rgba(255,255,255,.85);color:#000}
:focus-visible{outline:1px solid rgba(255,255,255,.8);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* --- Page transitions --------------------------------------------------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.32s var(--ease) both vt-out}
::view-transition-new(root){animation:.5s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
.hdr{view-transition-name:hdr}
.ftr{view-transition-name:ftr}
::view-transition-group(hdr),::view-transition-group(ftr){animation-duration:0s}
html.js.no-vt body{animation:page-in .55s var(--ease) both}
@keyframes page-in{from{opacity:0}}

/* --- Images: soft fade-in when decoded ---------------------------------- */
/* one shared transition for every image on the site (fade-in, hover zoom, brightness, shadow) */
main img{transition:opacity .9s var(--ease),transform 1.6s var(--ease-out),filter .9s var(--ease),box-shadow 1s var(--ease-out)}
html.js main img[loading=lazy]{opacity:0}
html.js main img.ld{opacity:1}
/* reveal on scroll */
html.js .rv{opacity:0;translate:0 22px;transition:opacity 1s var(--ease-out),translate 1.1s var(--ease-out)}
html.js .rv.in{opacity:1;translate:0 0}

/* --- Header -------------------------------------------------------------- */
.hdr{position:fixed;z-index:50;top:0;left:50%;width:calc(1024 * var(--u));height:calc(96 * var(--u));
  transform:translateX(-50%);pointer-events:none;font-weight:600;line-height:1}
.hdr-shade{position:absolute;left:50%;top:0;width:100vw;height:calc(100 * var(--u));transform:translateX(-50%);
  background:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.35) 65%,rgba(0,0,0,0) 100%);
  opacity:.85;pointer-events:none}
.hdr a,.hdr .role,.hdr button{pointer-events:auto}
.brand{position:absolute;left:calc(24 * var(--u));top:calc(22 * var(--u));font-size:max(calc(20 * var(--u)),17px);
  font-weight:700;color:#fff;text-decoration:none;letter-spacing:-.015em}
.role{position:absolute;left:max(calc(223 * var(--u)),calc(24 * var(--u) + 172px));top:calc(24 * var(--u));font-size:max(calc(18 * var(--u)),15px);
  font-weight:400;color:var(--dim);cursor:default}
.hdr ul{list-style:none;margin:0;padding:0}
.hdr li{position:absolute;top:calc(48 * var(--u));transform:translateX(-50%)}
.hdr .m0{left:calc(161 * var(--u))}
.hdr .m1{left:calc(356 * var(--u))}
.hdr .m2{left:calc(568 * var(--u))}
.hdr .m3{left:calc(764 * var(--u))}
.hdr .m4{left:calc(904 * var(--u))}
.hdr nav a{display:block;padding:calc(4 * var(--u)) calc(8 * var(--u));font-size:max(calc(17 * var(--u)),14px);font-weight:600;letter-spacing:-.005em;
  color:var(--dim);text-decoration:none;white-space:nowrap;position:relative;transition:color var(--t) var(--ease)}
.hdr nav a::after{content:"";position:absolute;left:calc(8 * var(--u));right:calc(8 * var(--u));bottom:calc(-1 * var(--u));height:max(calc(2 * var(--u)),1.5px);
  background:currentColor;border-radius:2px;transform:scaleX(0);transform-origin:50% 50%;transition:transform .6s var(--ease-out)}
.hdr nav a:hover,.hdr nav a[aria-current]{color:#fff}
@media (hover:hover){.hdr nav a:hover::after{transform:scaleX(1)}}
.brand{transition:opacity var(--t) var(--ease)}
.brand:hover{opacity:.75}
.role{transition:color var(--t) var(--ease)}

/* --- Footer (social) --------------------------------------------------- */
.ftr{position:fixed;z-index:40;left:50%;bottom:calc(14 * var(--u));transform:translateX(-50%);display:flex;
  gap:calc(22 * var(--u));transition:opacity .45s var(--ease),translate .45s var(--ease)}
.ftr a{display:flex;align-items:center;gap:calc(8 * var(--u));color:var(--dim);text-decoration:none;transition:color var(--t) var(--ease);
  font-size:max(calc(14 * var(--u)),13px);letter-spacing:.01em;text-shadow:0 0 12px rgba(0,0,0,.6)}
.ftr a:hover{color:#fff}
.ftr svg,.nav-social svg{transition:transform .6s var(--spring)}
.ftr a:hover svg,.nav-social a:hover svg{transform:scale(1.15)}
.ftr svg{width:max(calc(14 * var(--u)),13px);height:max(calc(14 * var(--u)),13px);flex:none}
.ftr.hide{opacity:0;translate:0 12px;pointer-events:none}

main{display:block;position:relative;overflow-x:clip}

/* --- Canvas helpers ------------------------------------------------------ */
.collage,.grid,.ct{position:relative;width:calc(1024 * var(--u));margin:0 auto;height:calc(var(--ch) * var(--u))}
.cell,.poster,.ct-block{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));z-index:var(--z,1)}
.cell img{width:100%;height:100%;object-fit:cover}

/* zoomable images */
img.zoom{cursor:zoom-in}
.cell{overflow:hidden;background:#0a0a0a}
.cell img.zoom{transition:opacity .9s var(--ease),transform 1.6s var(--ease-out),filter .9s var(--ease)}
@media (hover:hover){.cell:hover img.zoom{transform:scale(1.035);filter:brightness(1.06)}}

/* --- Video --------------------------------------------------------------- */
.vid{position:relative;width:100%;height:100%;background:#000;overflow:hidden}
.vid-btn{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .6s var(--ease)}
.vid-btn img{width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--ease),transform 1.6s var(--ease-out),filter .9s var(--ease)}
@media (hover:hover){.vid-btn:hover img{transform:scale(1.03);filter:brightness(.82)}}
.play{position:absolute;left:50%;top:50%;height:min(36%,190px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 14.5c0-4.6 5-7.5 9-5.2l50 31.3c3.8 2.4 3.8 8 0 10.4l-50 31.3c-4 2.3-9-.6-9-5.2z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.35));transition:transform .7s var(--spring),opacity .4s var(--ease)}
@media (hover:hover){.vid-btn:hover .play{transform:translate(-50%,-50%) scale(1.12)}}
.vid-btn:active .play{transform:translate(-50%,-50%) scale(.94);transition-duration:.15s}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .7s var(--ease)}
.vid.playing iframe{opacity:1}
.vid.playing .vid-btn{opacity:0;pointer-events:none}
.vid.loading .play{opacity:.5;animation:pulse 1s var(--ease) infinite alternate}
@keyframes pulse{to{opacity:.15}}

/* --- Main: slideshow ----------------------------------------------------- */
.p-main{height:100svh;overflow:hidden}
.slideshow{position:fixed;inset:0;background:#000}
.slide{position:absolute;inset:0;opacity:0;transition:opacity var(--fade) ease-in-out;will-change:opacity}
.slide img{width:100%;height:100%;object-fit:cover;opacity:1 !important;transform:scale(1.045);
  transition:transform calc(var(--delay) + var(--fade) * 2) linear}
.slide.on{opacity:1}
.slide.on img,.slide.was img{transform:scale(1)}
html.js .slideshow{opacity:0;transition:opacity 1.2s var(--ease)}
html.js .slideshow.ready{opacity:1}

/* --- Film page ------------------------------------------------------------- */
.film{width:calc(1024 * var(--u));margin:0 auto;padding-bottom:calc(72 * var(--u))}
.f-head{display:flex;align-items:flex-start;gap:calc(40 * var(--u));padding:calc(128 * var(--u)) 0 0 calc(64 * var(--u))}
.f-poster{flex:none;width:calc(280 * var(--u))}
.f-poster img{width:100%;height:auto}
.f-text{flex:none;width:calc(576 * var(--u));padding-top:calc(20 * var(--u))}
.f-title{margin:0 0 calc(16 * var(--u));font-size:max(calc(18 * var(--u)),16px);line-height:1.15;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.f-title a{text-decoration:none}
.f-year{font-weight:400;color:rgba(228,228,228,.62);margin-left:.3em}

/* prev / next film */
.f-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(24 * var(--u));
  margin:calc(88 * var(--u)) calc(64 * var(--u)) 0;padding-top:calc(28 * var(--u));border-top:1px solid rgba(255,255,255,.12)}
.f-nav a{text-decoration:none;color:var(--text)}
.fn-prev,.fn-next{display:flex;align-items:center;gap:calc(16 * var(--u))}
.fn-next{justify-self:end;text-align:right}
.fn-t{display:flex;flex-direction:column;gap:calc(4 * var(--u));font-size:max(calc(18 * var(--u)),15px);font-weight:600;transition:color var(--t) var(--ease)}
.fn-t small{font-size:max(calc(11 * var(--u)),10px);font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.fn-arr{font-size:max(calc(26 * var(--u)),20px);line-height:1;color:rgba(255,255,255,.6);transition:transform .7s var(--spring),color var(--t) var(--ease)}
.fn-all{font-size:max(calc(13 * var(--u)),12px);color:rgba(255,255,255,.55)!important;transition:color var(--t) var(--ease)}
.fn-all:hover{color:#fff!important}
.f-nav a:hover .fn-arr{color:#fff}
.fn-prev:hover .fn-arr{transform:translateX(calc(-8 * var(--u)))}
.fn-next:hover .fn-arr{transform:translateX(calc(8 * var(--u)))}
.fn-prev:hover .fn-t,.fn-next:hover .fn-t{color:#fff}

/* about */
.about{display:grid;grid-template-columns:calc(280 * var(--u)) calc(576 * var(--u));gap:calc(40 * var(--u));
  width:calc(1024 * var(--u));margin:0 auto;padding:calc(148 * var(--u)) 0 calc(96 * var(--u)) calc(64 * var(--u))}
.a-side{position:sticky;top:calc(148 * var(--u));align-self:start}
.a-name{margin:0 0 calc(14 * var(--u));font-size:max(calc(18 * var(--u)),16px);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.a-role,.a-place{margin:0 0 calc(10 * var(--u));font-size:max(calc(14 * var(--u)),13px);line-height:1.45;color:rgba(228,228,228,.62)}
.a-contact{margin-top:calc(22 * var(--u));font-size:max(calc(14 * var(--u)),13px);font-weight:600}
.a-contact a{text-decoration:none}
.a-contact a:hover{text-decoration:underline}
.a-bio{margin:0 0 calc(16 * var(--u));font-size:max(calc(16 * var(--u)),15px);line-height:1.55;text-wrap:pretty}
.a-bio:first-child{font-size:max(calc(18 * var(--u)),16px);line-height:1.5;color:#f0f0f0}
.a-h{margin:calc(44 * var(--u)) 0 calc(12 * var(--u));font-size:max(calc(11 * var(--u)),10px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.a-films{list-style:none;margin:0;padding:0;font-size:max(calc(14 * var(--u)),13px)}
.a-films li{display:grid;grid-template-columns:calc(52 * var(--u)) 1fr auto;gap:calc(12 * var(--u));padding:calc(8 * var(--u)) 0;
  border-bottom:1px solid rgba(255,255,255,.08);transition:background-color var(--t) var(--ease)}
.a-films li:hover{background:rgba(255,255,255,.03)}
.a-films .fy{color:rgba(228,228,228,.62)}
.a-films a{text-decoration:none;font-weight:600}
.a-films a:hover{text-decoration:underline}
.a-films .fd{color:rgba(228,228,228,.6);text-align:right}
.f-desc{margin:0 0 calc(8 * var(--u));font-size:max(calc(16 * var(--u)),14px);line-height:1.18;text-wrap:pretty}
.f-awards{margin:calc(14 * var(--u)) 0 0;font-size:max(calc(16 * var(--u)),14px);line-height:1.18}
.f-crew{margin:calc(14 * var(--u)) 0 0;font-size:max(calc(12 * var(--u)),11px);line-height:1.17;text-wrap:pretty}
.f-imdb{display:inline-flex;align-items:center;gap:calc(9 * var(--u));margin-top:calc(16 * var(--u));
  font-size:max(calc(12 * var(--u)),11px);color:rgba(255,255,255,.8);text-decoration:none}
.f-imdb svg{width:max(calc(13 * var(--u)),12px);height:max(calc(13 * var(--u)),12px)}
.f-imdb{transition:color var(--t) var(--ease)}
.f-imdb svg{transition:transform .9s var(--ease-out)}
.f-imdb:hover{color:#fff}
.f-imdb:hover svg{transform:rotate(60deg)}
.f-imdb:hover span{text-decoration:underline}
.f-video{margin-top:calc(16 * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.f-media{margin-top:calc(var(--gap) * var(--u))}
.film .collage{width:100%}

/* --- Movies grid ----------------------------------------------------------- */
.poster{display:block;text-decoration:none;color:var(--text)}
.poster img{width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--ease),transform 1s var(--ease-out),filter .8s var(--ease),box-shadow 1s var(--ease-out)}
.poster::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,0);transition:box-shadow .5s var(--ease)}
@media (hover:hover){.poster:hover img{transform:translateY(calc(-8 * var(--u)));filter:brightness(1.07);box-shadow:0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.6)}}
.poster .cap{position:absolute;left:0;right:0;top:calc(100% + 14 * var(--u));line-height:1.25;color:rgba(228,228,228,.78);
  transition:color var(--t) var(--ease),translate .8s var(--ease-out)}
.poster .cap b{display:block;font-size:max(calc(15 * var(--u)),13px);font-weight:600}
.poster .cap small{display:block;margin-top:calc(3 * var(--u));font-size:max(calc(12 * var(--u)),11px);color:rgba(255,255,255,.62);transition:color var(--t) var(--ease)}
.poster:hover .cap,.poster:focus-visible .cap{color:#fff}
.poster:hover .cap small{color:rgba(255,255,255,.75)}
.p-movies main{padding-bottom:calc(40 * var(--u))}

/* --- Color grading ------------------------------------------------------- */
.p-collage .collage{margin-top:calc(112 * var(--u));margin-bottom:calc(70 * var(--u))}

/* --- Commercial ---------------------------------------------------------- */
.c-list{width:calc(1024 * var(--u));margin:0 auto;padding:calc(97 * var(--u)) 0 calc(64 * var(--u))}
.c-row h2{margin:0 0 calc(16 * var(--u));font-size:max(calc(24 * var(--u)),18px);line-height:1;font-weight:600;text-align:center;color:var(--text)}
.c-row .vid{height:auto;aspect-ratio:1024/384}
.c-row+.c-row{margin-top:calc(24 * var(--u))}

/* --- Contact --------------------------------------------------------------- */
.ct-bg{position:fixed;inset:0;z-index:0}
.ct-bg img{width:100%;height:100%;object-fit:cover}
.p-contact .ct{z-index:1;min-height:100svh}
.ct-block{height:auto;width:auto;white-space:nowrap;font-size:max(calc(17 * var(--u)),15px);line-height:1.5;font-weight:500;color:var(--text)}
.ct-block{text-shadow:0 1px 14px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.5)}
.ct-block a{text-decoration:none}
.ct-block a:hover{text-decoration:underline}

/* --- 404 ------------------------------------------------------------------- */
.nf{min-height:100svh;display:grid;place-content:center;text-align:center;font-size:max(calc(18 * var(--u)),17px);font-weight:500}
.nf p{margin:.3em}

/* --- Lightbox -------------------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(0,0,0,.94);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s;touch-action:pan-y}
.lb.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.lb-stage{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.lb img{max-width:calc(100vw - 120px);max-height:calc(100svh - 96px);width:auto;height:auto;object-fit:contain;
  opacity:0;transform:scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease-out);user-select:none;-webkit-user-drag:none}
.lb img.ld{opacity:1;transform:none}
.lb button{position:absolute;color:rgba(255,255,255,.6);transition:color var(--t) var(--ease),transform .6s var(--spring)}
.lb button:hover{color:#fff}
.lb-prev:hover{transform:translateX(-4px)}.lb-next:hover{transform:translateX(4px)}.lb-x:hover{transform:rotate(90deg)}
.lb-x{top:14px;right:18px;width:44px;height:44px;font-size:30px;line-height:44px}
.lb-prev,.lb-next{top:50%;width:56px;height:96px;margin-top:-48px;font-size:34px}
.lb-prev{left:6px}.lb-next{right:6px}
.lb-n{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.06em}
html.lb-lock{overflow:hidden}

/* ==========================================================================
   Burger menu (phones only)
   ========================================================================== */
.burger{display:none}
.nav-social{display:none}

/* ==========================================================================
   Phones (< 640px): the Readymag phone layout — a 320px canvas scaled to the
   screen width (1u = screen width / 320). Tablets use the desktop canvas.
   ========================================================================== */
@media (max-width:639px){
  :root{--u:calc(var(--vw,100vw) / 320)}

  /* header */
  .hdr{left:0;width:100%;height:calc(64 * var(--u));transform:none;pointer-events:auto}
  .hdr-shade{left:0;width:100%;height:calc(84 * var(--u));transform:none;opacity:1;
    background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.92) 55%,rgba(0,0,0,0) 100%)}
  .brand{left:calc(26 * var(--u));top:calc(16 * var(--u));font-size:calc(18 * var(--u));z-index:3}
  .role{left:calc(27 * var(--u));top:calc(38 * var(--u));font-size:calc(13.5 * var(--u));z-index:3}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:calc(6 * var(--u));position:absolute;z-index:5;
    right:calc(14 * var(--u));top:calc(12 * var(--u));width:calc(40 * var(--u));height:calc(34 * var(--u));padding:0 calc(3 * var(--u))}
  .burger i{display:block;width:100%;height:calc(4.5 * var(--u));border-radius:9px;background:#fff;
    transition:transform .5s var(--ease-out),opacity .35s var(--ease)}
  .menu-open .burger i:nth-child(1){transform:translateY(calc(10.5 * var(--u))) rotate(45deg)}
  .menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(.3)}
  .menu-open .burger i:nth-child(3){transform:translateY(calc(-10.5 * var(--u))) rotate(-45deg)}

  .hdr nav{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
  .menu-open .hdr nav{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
  .hdr ul{display:flex;flex-direction:column;align-items:center;gap:calc(26 * var(--u))}
  .hdr li{position:static;transform:none;opacity:0;translate:0 14px;transition:opacity .5s var(--ease),translate .7s var(--ease-out)}
  .menu-open .hdr li{opacity:1;translate:0 0}
  .menu-open .hdr li:nth-child(2){transition-delay:.05s}
  .menu-open .hdr li:nth-child(3){transition-delay:.1s}
  .menu-open .hdr li:nth-child(4){transition-delay:.15s}
  .hdr nav a{font-size:calc(22 * var(--u));padding:calc(6 * var(--u)) calc(14 * var(--u));color:rgba(255,255,255,.72)}
  .nav-social{display:flex;gap:calc(24 * var(--u));position:absolute;bottom:max(calc(26 * var(--u)),env(safe-area-inset-bottom))}
  .hdr .nav-social a{display:flex;align-items:center;gap:8px;font-size:calc(14 * var(--u));font-weight:400;padding:0;color:var(--dim)}
  .nav-social svg{width:calc(15 * var(--u));height:calc(15 * var(--u))}
  html.menu-open{overflow:hidden}

  /* social footer: only on the main page (elsewhere it lives in the menu) */
  .ftr{display:none}
  .p-main .ftr{display:flex;bottom:max(calc(16 * var(--u)),env(safe-area-inset-bottom));gap:calc(22 * var(--u))}
  .p-main .ftr a{font-size:calc(13 * var(--u))}

  /* collage on the phone canvas */
  .collage,.grid,.ct{width:calc(320 * var(--u))}
  .collage.p-abs{height:calc(var(--pch) * var(--u))}
  .collage.p-abs .cell{left:calc(var(--px) * var(--u));top:calc(var(--py) * var(--u));
    width:calc(var(--pw) * var(--u));height:calc(var(--ph) * var(--u))}
  .collage.p-auto{height:auto;display:grid;grid-template-columns:1fr 1fr}
  .collage.p-auto .cell{position:relative;left:auto;top:auto;width:auto;height:auto;aspect-ratio:4/3}
  .collage.p-auto .cell.is-video{grid-column:1/-1;aspect-ratio:16/9}
  .cell:hover img.zoom{transform:none}

  /* film */
  .film{width:auto;padding-bottom:calc(56 * var(--u))}
  .f-head{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:calc(80 * var(--u)) 0 0}
  .f-poster{order:2;width:calc(280 * var(--u));margin:0 auto}
  .f-text{display:contents}
  .f-title{order:1;margin:0 calc(16 * var(--u)) calc(12 * var(--u));text-align:center;font-size:calc(18 * var(--u))}
  .f-text>:not(.f-title){order:3;margin-left:calc(22 * var(--u));margin-right:calc(18 * var(--u))}
  .f-desc{font-size:calc(16 * var(--u));line-height:1.25;margin-top:calc(14 * var(--u));margin-bottom:0}
  .f-desc+.f-desc{margin-top:calc(8 * var(--u))}
  .f-awards{font-size:calc(16 * var(--u));line-height:1.2;margin-top:calc(14 * var(--u))}
  .f-crew{font-size:calc(12 * var(--u));line-height:1.2;margin-top:calc(14 * var(--u))}
  .f-imdb{align-self:flex-start;font-size:calc(12 * var(--u));gap:calc(8 * var(--u));margin-top:calc(14 * var(--u))}
  .f-imdb svg{width:calc(13 * var(--u));height:calc(13 * var(--u))}
  .f-text>.f-video{order:4;width:auto;height:auto;aspect-ratio:var(--ar);margin:calc(20 * var(--u)) 0 0}
  .f-media{margin-top:calc(24 * var(--u))}

  /* movies: one column like the original phone version */
  .grid{height:auto;display:flex;flex-direction:column;align-items:center;gap:calc(40 * var(--u));padding:calc(72 * var(--u)) 0 calc(56 * var(--u))}
  .poster{position:relative;left:auto;top:auto;width:calc(256 * var(--u));height:auto;aspect-ratio:254/360}
  .poster .cap{top:calc(100% + 8 * var(--u));font-size:calc(13 * var(--u));opacity:.75;translate:none;white-space:normal}
  .poster:hover img{transform:none}

  .poster .cap{top:calc(100% + 8 * var(--u))}
  .poster .cap b{font-size:calc(14 * var(--u))}
  .poster .cap small{font-size:calc(11 * var(--u))}
  .grid{gap:calc(64 * var(--u))}

  .f-nav{grid-template-columns:1fr 1fr;margin:calc(48 * var(--u)) calc(16 * var(--u)) 0;padding-top:calc(20 * var(--u));gap:calc(18 * var(--u)) calc(12 * var(--u))}
  .fn-all{grid-column:1/-1;grid-row:2;justify-self:center}
  .fn-t{font-size:calc(14 * var(--u))}
  .fn-t small{font-size:calc(9.5 * var(--u))}
  .fn-arr{font-size:calc(20 * var(--u))}
  .fn-prev,.fn-next{gap:calc(10 * var(--u))}

  .about{display:block;width:auto;padding:calc(84 * var(--u)) calc(20 * var(--u)) calc(56 * var(--u))}
  .a-side{position:static;margin-bottom:calc(24 * var(--u))}
  .a-name{font-size:calc(20 * var(--u))}
  .a-role,.a-place{font-size:calc(13 * var(--u));margin-bottom:calc(6 * var(--u))}
  .a-contact{margin-top:calc(12 * var(--u));font-size:calc(13 * var(--u))}
  .a-bio{font-size:calc(15 * var(--u));line-height:1.5}
  .a-bio:first-child{font-size:calc(16.5 * var(--u))}
  .a-films{font-size:calc(13 * var(--u))}
  .a-films li{grid-template-columns:calc(40 * var(--u)) 1fr;gap:calc(2 * var(--u)) calc(10 * var(--u))}
  .a-films .fd{grid-column:2;text-align:left;font-size:calc(11.5 * var(--u))}
  .a-h{font-size:calc(10 * var(--u))}

  /* color grading */
  .p-collage .collage{margin:calc(64 * var(--u)) 0 calc(48 * var(--u))}

  /* commercial */
  .c-list{width:auto;padding:calc(72 * var(--u)) 0 calc(48 * var(--u))}
  .c-row h2{font-size:calc(18 * var(--u));margin-bottom:calc(10 * var(--u));padding:0 calc(16 * var(--u));line-height:1.1}
  .c-row .vid{aspect-ratio:var(--pr)}
  .c-row+.c-row{margin-top:calc(16 * var(--u))}

  /* contact */
  .ct{height:max(100svh,calc(var(--pch) * var(--u)))}
  .ct-block{left:calc(var(--px) * var(--u));top:calc(var(--py) * var(--u));font-size:calc(14 * var(--u));line-height:calc(19 * var(--u))}
  .ct-bg img{object-position:28% 50%}
  .ct-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.2) 60%,rgba(0,0,0,.35))}

  .lb img{max-width:100vw;max-height:100svh}
  .lb-prev,.lb-next{display:none}
}

@media (hover:none){
  .cell:hover img.zoom,.vid-btn:hover img,.poster:hover img{transform:none;filter:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html.js .rv{opacity:1;translate:none}
  .slide img{transform:none !important}
}