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

/* --- 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", "Onest", 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:"Outfit";src:url(/fonts/outfit-latin.woff2) format("woff2");font-weight:100 900;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:"Outfit";src:url(/fonts/outfit-latin-ext.woff2) format("woff2");font-weight:100 900;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:"Onest";src:url(/fonts/onest-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --font:"Outfit","Onest",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);
  --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 .25s var(--ease),text-decoration-color .25s var(--ease)}
a:hover{text-decoration-color:rgba(255,255,255,.35)}
::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 ---------------------------------- */
html.js main img{opacity:0;transition:opacity .9s var(--ease)}
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:900;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}
.hdr a,.hdr .role{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:900;color:#fff;text-decoration:none;letter-spacing:-.005em}
.role{position:absolute;left:calc(223 * var(--u));top:calc(24 * var(--u));font-size:max(calc(18 * var(--u)),15px);
  font-weight:600;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(380 * var(--u))}
.hdr .m2{left:calc(636 * var(--u))}
.hdr .m3{left:calc(864 * var(--u))}
.hdr nav a{display:block;padding:calc(4 * var(--u)) calc(8 * var(--u));font-size:max(calc(18 * var(--u)),15px);font-weight:900;
  color:var(--dim);text-decoration:none;white-space:nowrap;transition:color .3s var(--ease)}
.hdr nav a:hover,.hdr nav a[aria-current]{color:#fff}
.brand:hover{opacity:.85}

/* --- 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;
  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{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}

/* --- 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.2s var(--ease-out),filter .6s var(--ease)}
.cell:hover img.zoom{transform:scale(1.025)}

/* --- 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.2s var(--ease-out),filter .6s var(--ease)}
.vid-btn:hover img{transform:scale(1.02);filter:brightness(.85)}
.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 .45s var(--ease-out),opacity .3s var(--ease)}
.vid-btn:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.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.12;font-weight:600;color:var(--text)}
.f-title a{text-decoration:none}
.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:hover{color:#fff}
.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 .9s var(--ease-out),filter .6s var(--ease)}
.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)}
.poster:hover img{transform:translateY(calc(-4 * var(--u)));filter:brightness(1.06)}
.poster .cap{position:absolute;left:0;top:calc(100% + 14 * var(--u));font-size:max(calc(16 * var(--u)),14px);font-weight:600;
  opacity:0;translate:0 -6px;transition:opacity .45s var(--ease),translate .45s var(--ease-out);white-space:nowrap}
.poster:hover .cap,.poster:focus-visible .cap{opacity:1;translate:0 0}
.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(18 * var(--u)),15px);line-height:1.45;font-weight:600;color:var(--text)}
.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:18px;font-weight:600}
.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,.7);transition:color .25s var(--ease)}
.lb button:hover{color:#fff}
.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}

/* ==========================================================================
   Phones & small tablets: flowing layout
   ========================================================================== */
@media (max-width:820px){
  :root{--u:1px}
  .hdr{left:0;width:100%;height:86px;transform:none}
  .hdr-shade{left:0;width:100%;height:110px;transform:none;opacity:1}
  .brand{left:16px;top:16px;font-size:18px}
  .role{left:auto;right:16px;top:18px;font-size:15px}
  .hdr ul{position:absolute;left:8px;right:8px;top:46px;display:flex;justify-content:space-between}
  .hdr li{position:static;transform:none}
  .hdr nav a{padding:6px 8px;font-size:15.5px;font-weight:800}

  .ftr{bottom:max(14px,env(safe-area-inset-bottom));gap:22px}
  .ftr a{font-size:13px;gap:7px}

  main{padding-top:96px}
  .p-main main{padding-top:0}

  .collage,.grid,.ct{width:auto;height:auto}
  .cell,.poster,.ct-block{position:relative;left:auto;top:auto;width:auto;height:auto}

  .collage{display:flex;flex-direction:column;gap:4px}
  .cell{aspect-ratio:var(--ar);z-index:auto}
  .cell.is-video{aspect-ratio:16/9}
  .cell:hover img.zoom{transform:none}

  .film{width:auto;padding-bottom:72px}
  .f-head{display:block;padding:16px 16px 0}
  .f-poster{width:min(68vw,300px);margin:0 auto}
  .f-text{width:auto;padding-top:28px}
  .f-title{font-size:23px;margin-bottom:14px}
  .f-desc{font-size:16px;line-height:1.45}
  .f-awards{font-size:15px;line-height:1.4;margin-top:16px;font-weight:600}
  .f-crew{font-size:13px;line-height:1.5;margin-top:18px}
  .f-imdb{font-size:13px;margin-top:18px;gap:8px}
  .f-imdb svg{width:14px;height:14px}
  .f-video{width:auto;height:auto;aspect-ratio:var(--ar);margin:24px -16px 0}
  .f-media{margin-top:40px}

  .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 12px;padding:16px 16px 72px}
  .poster{aspect-ratio:254/360}
  .poster .cap{position:static;display:block;margin-top:8px;font-size:13px;opacity:1;translate:none;white-space:normal;line-height:1.25}
  .poster:hover img{transform:none}

  .p-collage .collage{margin:8px 0 72px}

  .c-list{width:auto;padding:12px 0 72px}
  .c-row h2{font-size:18px;margin-bottom:12px;padding:0 16px}
  .c-row .vid{aspect-ratio:16/9}
  .c-row+.c-row{margin-top:36px}

  .p-contact main{padding-top:0}
  .ct-bg img{object-position:30% 50%}
  .ct-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 25%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.85) 100%)}
  .ct{display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding:120px 20px 96px}
  .ct-block{white-space:normal;font-size:18px;line-height:1.45}

  .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}
}