/* ── Reset + design tokens ─────────────────────────────── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} :root{ --bg:#090909; --fg:#f0ede8; --dim:rgba(240,237,232,.36); --mid:rgba(240,237,232,.58); --accent:#9b8ef2; --rule:rgba(240,237,232,.10); --maxw:1080px; --ease:cubic-bezier(0.16,1,0.3,1); } html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:none;} body{background:var(--bg);color:var(--fg);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;overflow-x:clip;cursor:none;} body.is-touch,body.is-touch *{cursor:auto!important;} body.is-touch{touch-action:pan-y;} nav,main,footer{position:relative;z-index:1;} /* ── Custom cursor ─────────────────────────────────────── */ #cur-dot{position:fixed;width:8px;height:8px;background:#fff;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .15s var(--ease),height .15s var(--ease);} #cur-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(255,255,255,.28);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .2s var(--ease),height .2s var(--ease),border-color .2s;} body.hov #cur-dot{width:4px;height:4px;} body.hov #cur-ring{width:50px;height:50px;border-color:rgba(155,142,242,.5);} /* Hide the native cursor over the Plyr video player (desktop) so only the custom cursor shows — no double cursor */ body:not(.is-touch) .plyr,body:not(.is-touch) .plyr *{cursor:none!important;} /* ── Nav ───────────────────────────────────────────────── */ nav{position:fixed;inset:0 0 auto;z-index:300;display:flex;align-items:center;justify-content:space-between;padding:24px 44px;pointer-events:none;mix-blend-mode:difference;} nav>*{pointer-events:all;} .nav-logo{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#fff;text-decoration:none;opacity:0;animation:fUp .6s var(--ease) .2s forwards;} .nav-links{display:flex;gap:26px;opacity:0;animation:fUp .6s var(--ease) .35s forwards;} .nav-links a{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#666;text-decoration:none;transition:color .2s;cursor:none;} .nav-links a:hover,.nav-links a.active{color:var(--fg);} .nav-burger{display:none;width:34px;height:30px;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;background:none;border:none;padding:0;cursor:none;opacity:0;animation:fUp .6s var(--ease) .35s forwards;} .nav-burger span{display:block;width:22px;height:1.5px;background:var(--fg);border-radius:2px;transition:transform .3s var(--ease),opacity .25s var(--ease);} .nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .nav-burger.open span:nth-child(2){opacity:0;} .nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} /* ── Shared layout helpers ─────────────────────────────── */ .sec-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;} .ruled{max-width:var(--maxw);margin:0 auto;padding:0 48px;overflow:hidden;} .rule-line{height:1px;background:var(--rule);-webkit-mask-image:linear-gradient(to right,transparent,#000 15px,#000 calc(100% - 15px),transparent);mask-image:linear-gradient(to right,transparent,#000 15px,#000 calc(100% - 15px),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);} .rule-line.on{transform:scaleX(1);} /* ── Scroll reveal ─────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .95s var(--ease),transform .95s var(--ease);} .reveal.in{opacity:1;transform:none;} .rd1{transition-delay:.09s;}.rd2{transition-delay:.18s;}.rd3{transition-delay:.27s;}.rd4{transition-delay:.36s;} /* ── Contact section ───────────────────────────────────── */ .contact-section{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;text-align:center;padding:0;} .contact-section::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:220%;height:62%;background:radial-gradient(ellipse at 50% 100%,rgba(0,210,200,0.36) 0%,rgba(0,185,185,0.19) 28%,rgba(0,150,160,0.07) 52%,transparent 70%);pointer-events:none;z-index:0;} .contact-section .sec-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;position:relative;z-index:1;max-width:var(--maxw);width:100%;margin:0 auto;} .c-eye{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:18px;} .c-head{font-size:clamp(26px,3.2vw,46px);font-weight:400;letter-spacing:-.022em;line-height:1.1;margin-bottom:40px;} .c-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;} .c-link{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border:1px solid var(--rule);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mid);text-decoration:none;cursor:none;transition:color .2s,border-color .2s;border-radius:2px;} .c-link:hover{color:var(--fg);border-color:rgba(255,255,255,.28);} /* ── Footer ────────────────────────────────────────────── */ footer{background:transparent;padding:18px 44px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;width:100%;position:relative;z-index:1;} .f-copy{font-size:10px;letter-spacing:.06em;color:var(--dim);} .f-s{font-size:14px;opacity:.25;} /* ── Keyframes ─────────────────────────────────────────── */ @keyframes fUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}} @keyframes mwSlideIn{from{opacity:0;transform:translateX(var(--mw-dir,40px));}to{opacity:1;transform:none;}} .cs-more-card.mw-in{animation:mwSlideIn .4s var(--ease) both;} .cs-more-card.mw-in:nth-child(2){animation-delay:.07s;} /* ── More-work card touch highlight (mirrors :hover for mobile) ── */ body.is-touch .cs-more-card.is-focused .cs-more-thumb img{opacity:1;transform:scale(1.06);} body.is-touch .cs-more-card.is-focused .cs-more-link-arrow{opacity:1;border-color:rgba(240,237,232,.5);color:rgba(240,237,232,1);} body.is-touch .cs-more-card.is-focused .cs-more-name{color:var(--accent);} /* ── Starfield canvas ──────────────────────────────────── */ #particle-wrap{position:fixed;top:0;left:0;right:0;height:100vh;z-index:0;pointer-events:none;isolation:isolate;} #particle-canvas{display:block;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;} body.is-touch #particle-wrap{height:100vh;} /* ── Touch / mobile nav ────────────────────────────────── */ body.is-touch nav{padding:18px 20px;} body.is-touch .nav-burger{display:flex;} body.is-touch .nav-links{ position:fixed;top:60px;right:16px;left:auto; flex-direction:column;gap:0;align-items:stretch; background:rgba(12,12,14,.94);backdrop-filter:blur(14px); border:1px solid var(--rule);border-radius:12px;padding:6px; min-width:168px;animation:none;opacity:0;transform:translateY(-8px) scale(.98); pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease); } body.is-touch .nav-links.open{opacity:1;transform:none;pointer-events:auto;} body.is-touch .nav-links a{padding:12px 18px;font-size:12px;color:var(--fg);border-radius:8px;} body.is-touch .nav-links a:active{background:rgba(155,142,242,.16);} body.is-touch .contact-section{overflow-x:clip;} /* ── Filmstrip: consistent 16:9 frame + border clip ─────── */ .cs-fs-thumb{overflow:hidden;aspect-ratio:16/9;} .cs-fs-thumb img{height:100%;object-fit:cover;} /* ── Credits: stack vertically + uniform size on mobile ────── */ @media(max-width:767px){ .cs-credits{flex-direction:column;gap:6px;} .cs-credit-item{white-space:normal;font-size:11px;} } /* ── Mobile filmstrip: scroll-in animation ──────────────── */ @media(max-width:760px){ .cs-fs-thumb{opacity:0;transform:scale(0.91);transition:opacity .45s ease,transform .55s var(--ease);} #fs-outer.stills-vis .cs-fs-thumb{opacity:1;transform:none;} } /* ── Plyr controls — match index video bar style ── */ .film-media .plyr{ --plyr-color-main:rgba(255,255,255,.8); --plyr-video-control-color:rgba(255,255,255,.72); --plyr-video-control-color-hover:#fff; --plyr-video-control-background-hover:transparent; --plyr-control-icon-size:15px; --plyr-control-padding:4px; --plyr-control-radius:0; --plyr-range-track-height:2px; --plyr-range-thumb-height:9px; --plyr-range-thumb-border:0; --plyr-range-thumb-shadow:none; --plyr-range-thumb-background:rgba(255,255,255,.85); --plyr-video-progress-buffered-background:rgba(255,255,255,.18); } .film-media .plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.5));padding:14px 28px 20px;gap:10px;} .film-media .plyr__time{font-size:10px;letter-spacing:.07em;color:rgba(255,255,255,.4);padding:0;text-shadow:none;} .film-media .plyr--video .plyr__time{text-shadow:none;} /* ── Mobile video player — always show Plyr controls (no :hover on touch) ── */ body.is-touch .film-media .plyr__controls{opacity:1;visibility:visible;} body.is-touch .film-media .plyr--video .plyr__controls{padding:10px 16px 14px;} /* ── Plyr CSS-fallback fullscreen — ff() sets position:absolute inline, need !important to override ── */ .plyr__fullscreen-fallback .film-media .plyr{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;z-index:10000000!important;} /* ── Desktop only: Plyr controls YouTube via API, block iframe pointer events so Plyr wins ── */ body:not(.is-touch) .film-media .plyr--youtube .plyr__video-embed iframe{pointer-events:none;} /* ── Stills lightbox (shared: desktop + mobile) ──────────── */ /* Stills lightbox — plain fixed overlay. CRITICAL: the image uses a FIXED 94vw×80vh stage (object-fit:contain letterboxes it), so EVERY slide occupies the same box and swapping is clean. Using max-width/max-height instead lets each image set its own size, which on mobile makes different aspect ratios appear to stack/overlap while swiping — that was the bug. Fixed stage = uniform slides. (Restored from the known-good _old/shared.css.) */ #mob-lb{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .28s ease;cursor:none;} #mob-lb.open{opacity:1;pointer-events:auto;} #mob-lb img{width:94vw;height:80vh;object-fit:contain;border-radius:4px;transition:opacity .14s ease;} #mob-lb-x{position:absolute;top:16px;right:16px;width:38px;height:38px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:none;-webkit-tap-highlight-color:transparent;z-index:2001;transition:background .22s,border-color .22s;} #mob-lb-x:hover{background:rgba(28,28,28,.92);border-color:rgba(155,142,242,.7);} .mob-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;font-size:26px;line-height:1;padding:0 0 3px;display:flex;align-items:center;justify-content:center;cursor:none;-webkit-tap-highlight-color:transparent;z-index:2001;transition:background .22s,border-color .22s;} .mob-lb-nav:hover{background:rgba(28,28,28,.92);border-color:rgba(155,142,242,.7);} #mob-lb-prev{left:24px;} #mob-lb-next{right:24px;} body.is-touch .mob-lb-nav{display:none;} /* touch pages page via swipe */ #mob-lb-n{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.12em;color:rgba(240,237,232,.45);white-space:nowrap;} /* ── More Work: section separation on mobile (A+B) ────── section.cs-more beats the page-level .cs-more specificity since shared.css loads before the inline