/* ============================================================
   SCURO — BONE EDITION  ·  warm paper · heavy film grain ·
   Anton + Cormorant italic · big uncropped colour cinematography
   a fashion-film / gallery treatment. light, high-end, stylised.
   ============================================================ */

@font-face{font-family:'Anton';font-weight:400;font-display:block;src:url('../fonts/anton.woff2') format('woff2');}
@font-face{font-family:'Cormorant';font-weight:300;font-style:italic;font-display:swap;src:url('../fonts/cormorant-300-i.ttf') format('truetype');}
@font-face{font-family:'Cormorant';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/cormorant-400-i.ttf') format('truetype');}
@font-face{font-family:'Grotesk';font-weight:400;font-display:swap;src:url('../fonts/grotesk-400.ttf') format('truetype');}
@font-face{font-family:'Grotesk';font-weight:500;font-display:swap;src:url('../fonts/grotesk-500.ttf') format('truetype');}
@font-face{font-family:'Grotesk';font-weight:700;font-display:swap;src:url('../fonts/grotesk-700.ttf') format('truetype');}
@font-face{font-family:'Archivo';font-weight:400;font-display:swap;src:url('../fonts/archivo-400.ttf') format('truetype');}
@font-face{font-family:'Archivo';font-weight:600;font-display:swap;src:url('../fonts/archivo-600.ttf') format('truetype');}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/inter-400.ttf') format('truetype');}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../fonts/inter-500.ttf') format('truetype');}

:root{
  --bg:#ece5d8; --paper:#f4eee3; --panel:#e5ddcd;
  --ink:#16130f; --ink-2:#39332b; --mut:#857c6d; --faint:#bdb3a1;
  --accent:#1f3df2; --accent-2:#37a6ff;
  --line:rgba(22,19,15,.2); --line-soft:rgba(22,19,15,.1); --line-strong:rgba(22,19,15,.42);
  --display:'Anton','Arial Narrow',sans-serif;
  --serif:'Cormorant',Georgia,serif;
  --ui:'Archivo','Helvetica Neue',sans-serif;
  --grot:'Grotesk','Helvetica Neue',sans-serif;
  --body:'Inter','Helvetica Neue',sans-serif;
  --syne:'Syne','Helvetica Neue',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --shell:1460px; --rail:36px;
}
*{box-sizing:border-box}*,*::before,*::after{margin:0;padding:0}
html{background:var(--bg);color:var(--ink);overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;position:relative;overflow-x:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
.hidden{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}
:where(a,button,[role='button'],[tabindex]):focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}

/* ---------- HEAVY 1600-iso film grain on the paper ---------- */
/* dark specks multiplied onto the bone — large-cluster, organic, moving. */
/* STATIC kodak-1600 grain, BEHIND all content (z-index:-1). multiplies onto the
   paper only — never over footage, stills, thumbnails or text (those paint on top). */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.68;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:260px 260px}
/* soft large-scale tonal mottle — gentle, smooth variation across the paper */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size:760px 760px}
/* soft flowing all-white/bone gradient wash behind everything (gentle drift) */
.bgwash{position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48% 44% at 20% 16%, #f7f1e3 0%, transparent 62%),
    radial-gradient(52% 48% at 84% 24%, #e8dfcb 0%, transparent 64%),
    radial-gradient(58% 54% at 62% 88%, #f4e9d4 0%, transparent 66%),
    radial-gradient(46% 44% at 12% 84%, #e5dbc4 0%, transparent 62%),
    radial-gradient(40% 38% at 72% 58%, #f2e5d0 0%, transparent 58%),
    var(--bg);
  animation:wash 60s ease-in-out infinite alternate}
@keyframes wash{0%{transform:translate3d(0,0,0) scale(1.02)}100%{transform:translate3d(-2.5%,1.8%,0) scale(1.1)}}

/* ---------- frame rules + registration marks ---------- */
.frame-rules{position:fixed;inset:0;z-index:30;pointer-events:none}
.frame-rules .v{position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft)}
.frame-rules .v.l{left:var(--rail)}.frame-rules .v.r{right:var(--rail)}
.reg{position:fixed;z-index:31;width:10px;height:10px;pointer-events:none;opacity:.5}
.reg::before,.reg::after{content:"";position:absolute;background:var(--line-strong)}
.reg::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.reg::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.reg.tl{top:13px;left:13px}.reg.tr{top:13px;right:13px}.reg.bl{bottom:13px;left:13px}.reg.br{bottom:13px;right:13px}
@media(max-width:900px){.frame-rules .v,.reg{display:none}}

/* ---------- side rails (vertical text) ---------- */
.rail{position:fixed;top:0;bottom:0;width:var(--rail);z-index:120;pointer-events:none}
.rail.l{left:0;border-right:1px solid var(--line-soft)}.rail.r{right:0;border-left:1px solid var(--line-soft)}
.rail .vtext{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--grot);font-weight:500;font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.rail .clock{position:absolute;bottom:16px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--grot);font-size:.58rem;letter-spacing:.22em;color:var(--mut)}
.rail.r .vtext{color:var(--accent)}
@media(max-width:900px){.rail{display:none}}

/* ---------- layout ---------- */
.shell{margin-inline:auto;width:min(100% - calc(var(--rail)*2 + 2px),var(--shell));padding-inline:clamp(12px,2.6vw,34px)}
@media(max-width:900px){.shell{width:min(100% - 32px,var(--shell));padding-inline:0}}
.hr{height:1px;background:var(--line)}.hr-soft{height:1px;background:var(--line-soft)}
.sec{padding-block:clamp(48px,7vw,100px)}
.sec-disc{padding-block:clamp(26px,3.4vw,52px)}
.sec-disc .sec-head{margin-bottom:clamp(14px,2vw,24px)}
.hero-frame:fullscreen,.hero-frame:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;max-height:none}
.hero-frame:fullscreen video,.hero-frame:-webkit-full-screen video{object-fit:contain;transform:none}

/* ---------- type ---------- */
.tag{font-family:var(--grot);font-weight:500;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mut)}
.cat-hero>.tag,.ab>.tag,.ct>.tag,.fr>.tag{display:block;margin-bottom:clamp(8px,1.1vw,14px)}
.cat-hero .big,.ct-head,.ab-state{margin-left:-.05em}
.disp{font-family:var(--display);text-transform:uppercase;font-weight:400;line-height:.92;letter-spacing:.005em;overflow-wrap:break-word}
.h-xl{font-size:clamp(2.8rem,11vw,9.5rem)}
.h-l{font-size:clamp(2.3rem,7vw,5.6rem)}
.h-m{font-size:clamp(1.7rem,4vw,3rem)}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:400}
.lead{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-2);font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:1.4}
.prose{font-family:var(--body);color:var(--ink-2);line-height:1.8;font-size:1.04rem}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:clamp(28px,4vw,52px)}
.sec-head .idx{font-family:var(--serif);font-style:italic;font-size:1.15rem;letter-spacing:.01em;color:var(--accent);white-space:nowrap}
.sec-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.9rem,4.6vw,3.8rem);line-height:.92;overflow-wrap:break-word}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 calc(var(--rail) + 16px);border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
@media(max-width:900px){.nav{padding-left:18px}}
.nav.solid{background:rgba(236,229,216,.82);border-color:var(--line-soft);backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);text-transform:uppercase;font-size:1.5rem;letter-spacing:.04em;line-height:1}
.brand .bx{font-family:var(--grot);font-weight:500;font-size:.52rem;letter-spacing:.16em;color:var(--mut);border:1px solid var(--line);padding:3px 6px;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{position:relative;display:inline-flex;align-items:baseline;gap:6px;padding:9px 13px;font-family:var(--grot);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color .25s}
.nav-links a .n{font-size:.54rem;color:var(--faint);transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-links a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;background:var(--accent)}
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line)}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}
@media(max-width:760px){.nav-links{display:none}.burger{display:flex}}
.menu{position:fixed;inset:0;z-index:190;background:rgba(236,229,216,.98);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:0 28px;backdrop-filter:blur(4px)}
.menu.open{opacity:1;pointer-events:auto}
.menu a{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,13vw,4.4rem);color:var(--ink)}
.menu a:hover{color:var(--accent)}
.menu a .n{font-family:var(--grot);font-size:.72rem;color:var(--mut);letter-spacing:.1em}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;overflow:hidden;border:1.5px solid var(--ink);
  font-family:var(--grot);font-weight:500;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:color .35s var(--ease),border-color .35s var(--ease)}
.btn .lbl,.btn svg{position:relative;z-index:1}.btn svg{transition:transform .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .4s var(--ease)}
.btn:hover{color:#fff;border-color:var(--accent)}.btn:hover::before{transform:translateY(0)}.btn:hover svg{transform:translateX(3px)}
.btn.accent{border-color:var(--accent);color:var(--accent)}.btn.accent::before{background:var(--accent)}.btn.accent:hover{color:var(--bg)}
.ulink{font-family:var(--grot);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-bottom:1.5px solid var(--line);padding-bottom:3px;transition:color .3s,border-color .3s}
.ulink:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- HERO (showreel, contained 16:9, uncropped) ---------- */
.hero{min-height:100svh;padding:72px var(--rail) 16px;display:flex;flex-direction:column;align-items:center;justify-content:center}
@media(max-width:900px){.hero{min-height:auto;padding:84px 0 26px}}
.masthead{width:100%;max-width:1600px;margin:0 auto;text-align:center;padding:clamp(4px,1.4vh,16px) 0 clamp(10px,1.6vh,20px)}
.mh-title{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(3rem,11vw,9rem);line-height:.82;letter-spacing:.012em;color:var(--ink)}
.mh-tag{font-family:var(--syne);font-weight:600;font-size:clamp(.92rem,1.5vw,1.28rem);letter-spacing:-.006em;line-height:1.35;color:var(--ink-2);margin-top:8px}
/* frame matches the footage's true 2.35 content (file is 16:9 with baked letterbox);
   object-fit:cover trims exactly the black bars, nothing more. width-driven, sized to
   stay within the first screen while being as wide/big as possible. */
.hero-frame{position:relative;aspect-ratio:47/20;width:min(100%,1700px,calc((100svh - 300px) * 2.35));margin-inline:auto;overflow:hidden;background:#000;border:1px solid var(--ink)}
@media(max-width:900px){.hero-frame{width:100%}}
.hero-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;transform:scale(1.012) translateZ(0);backface-visibility:hidden}
.hero-frame .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 26%,transparent 60%,rgba(0,0,0,.5))}
.hero-word{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;padding:0 6%}
.hero-word svg{width:100%;height:auto;filter:drop-shadow(0 6px 40px rgba(0,0,0,.45))}
.hero.sound-on .hero-word{opacity:0;transition:opacity .6s var(--ease)}
.hud{position:absolute;font-family:var(--grot);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,252,246,.9)}
.hud.tl{top:15px;left:18px}.hud.tr{top:15px;right:18px;text-align:right}
.hud .dim{color:rgba(255,252,246,.6)}
.hud .rec{display:inline-flex;align-items:center;gap:7px}
.hud .rec i{width:7px;height:7px;border-radius:50%;background:var(--accent-2);animation:blink 1.6s steps(2) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.hero-cta{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);white-space:nowrap;color:#fff;border-color:rgba(255,255,255,.7)}
.hero-cta::before{background:#fff}.hero-cta:hover{color:#000;border-color:#fff}
.hero.sound-on .hero-cta{opacity:0;pointer-events:none;transition:opacity .4s}
.pbar{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .4s}
.hero.sound-on .pbar{opacity:1;pointer-events:auto}
.pbar button{display:flex;width:22px;height:22px;align-items:center;justify-content:center;color:#fff}
.bar{position:relative;flex:1;height:24px;display:flex;align-items:center;touch-action:none}
.bar .trk{position:relative;width:100%;height:2px;background:rgba(255,255,255,.3);transition:height .2s var(--ease)}
.bar:hover .trk,.bar.dragging .trk{height:4px}
.bar .fil{position:relative;height:100%;width:0%;background:#fff}
.bar .fil::after{content:"";position:absolute;right:-5px;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;transform:translateY(-50%) scale(.3);opacity:0;transition:.2s var(--ease)}
.bar:hover .fil::after,.bar.dragging .fil::after{opacity:1;transform:translateY(-50%) scale(1)}
.pbar .tc{font-family:var(--grot);font-size:.6rem;letter-spacing:.1em;color:rgba(255,255,255,.8);white-space:nowrap}
/* film player: Bunny stream in our own player */
.player.playing{cursor:default}
.player .pv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block;cursor:pointer;transform:translateZ(0);backface-visibility:hidden}
.player.playing>img{opacity:0}
.player.playing .pc,.player.playing .note{opacity:0;pointer-events:none}
.player.playing .pbar{opacity:1;pointer-events:auto}
/* quality selector */
.pbar .q{position:relative;display:flex;align-items:center}
.pbar .q-btn{width:auto;height:auto;font-family:var(--grot);font-weight:500;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:3px 7px;border:1px solid rgba(255,255,255,.5);white-space:nowrap}
.pbar .q-btn:hover{border-color:#fff}
.q-menu{position:absolute;right:0;bottom:calc(100% + 8px);display:none;flex-direction:column;min-width:84px;background:rgba(0,0,0,.88);border:1px solid rgba(255,255,255,.24);padding:4px}
.q-menu.open{display:flex}
.q-menu button{width:100%;height:auto;justify-content:flex-end;font-family:var(--grot);font-weight:500;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);padding:6px 10px}
.q-menu button:hover{color:#fff;background:rgba(255,255,255,.1)}
.q-menu button.on{color:var(--accent)}
.hero-meta{width:100%;max-width:1600px;margin:16px auto 0;display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between;
  font-family:var(--grot);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.hero-meta b{color:var(--ink);font-weight:500}

/* ---------- HOVER-PREVIEW INDEX ---------- */
.index{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:920px){.index{grid-template-columns:1.05fr .95fr;gap:clamp(34px,4vw,72px);align-items:start}}
.idx-list{border-top:1px solid var(--line)}
.idx-row{position:relative;display:block;padding:clamp(20px,2.2vw,30px) 4px;border-bottom:1px solid var(--line-soft);transition:padding-left .4s var(--ease),background .4s}
.idx-row .top{display:flex;align-items:baseline;gap:16px}
.idx-row .no{font-family:var(--grot);font-size:.64rem;color:var(--mut);letter-spacing:.1em;flex:none;width:2.4em}
.idx-row .t{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,5vw,3rem);line-height:.95;color:var(--ink);transition:color .35s var(--ease);overflow-wrap:break-word}
@media(min-width:920px){.idx-row .t{font-size:clamp(2rem,3vw,3.1rem)}}
.idx-row .yr{margin-left:auto;font-family:var(--grot);font-size:.62rem;color:var(--mut);letter-spacing:.08em;flex:none}
.idx-row .sub{margin-top:8px;margin-left:calc(2.4em + 16px);font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--mut)}
@media(min-width:920px){.idx-row:hover{padding-left:20px}.idx-row:hover .t,.idx-row.active .t{color:var(--accent)}}
.idx-row .m{margin-top:16px;display:block}
.idx-row .m img{width:100%;height:auto;display:block;border:1px solid var(--line-soft)}
@media(min-width:920px){.idx-row .m{display:none}}
.idx-preview{display:none}
@media(min-width:920px){.idx-preview{display:block;position:sticky;top:90px}
  .idx-preview .frame{position:relative;width:100%;overflow:hidden;background:var(--panel);border:1px solid var(--ink)}
  .idx-preview .frame img{width:100%;height:auto;display:block}
  .idx-preview .cap{margin-top:14px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
  .idx-preview .cap b{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:1.1rem;color:var(--ink)}
  .idx-preview .cap .idx-cap-s{font-family:var(--serif);font-style:italic;color:var(--mut);font-size:1rem}}

/* ---------- FEATURE ---------- */
.feature{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,44px);align-items:center}
@media(min-width:960px){.feature{grid-template-columns:1.55fr 1fr}}
.feature .media{overflow:hidden;background:#000;border:1px solid var(--ink)}
.feature .media img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease)}
.feature:hover .media img{transform:scale(1.02)}
.feature .info .lab{font-family:var(--grot);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.feature .info h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.9;margin-top:14px;overflow-wrap:break-word}
.feature .info p{font-family:var(--serif);font-style:italic;color:var(--ink-2);line-height:1.5;margin-top:18px;max-width:38ch;font-size:1.3rem}
.feature .info .btn{margin-top:28px}

/* ---------- work grid (even, aligned, 16:9 boxes) ---------- */
.works{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.6vw,40px) clamp(16px,1.8vw,26px)}
@media(min-width:600px){.works{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.works{grid-template-columns:1fr 1fr 1fr}}
@media(min-width:600px){.works.four{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.works.four{grid-template-columns:repeat(4,1fr)}}
.work{display:flex;flex-direction:column}
.w-media{aspect-ratio:16/9;overflow:hidden;background:var(--panel);border:1px solid var(--ink)}
.w-media img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s var(--ease),transform 1.1s var(--ease)}
.work:hover .w-media img{transform:scale(1.04)}
.work:hover .w-media img{opacity:.9}
.w-info{margin-top:13px;display:flex;flex-direction:column;gap:8px}
.w-info .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.w-info .no{font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.w-info .yr{font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-align:right}
.w-info .t{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,2.1vw,2rem);line-height:.95;color:var(--ink);overflow-wrap:break-word}
.w-info .go{margin-top:2px;font-family:var(--grot);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);transition:color .3s}
.work:hover .w-info .go{color:var(--ink)}

/* ---------- wild summon feature ---------- */
.ws-head{margin-bottom:clamp(24px,3vw,44px);border-bottom:1px solid var(--line);padding-bottom:16px}
.ws-eyebrow{display:block;color:var(--accent);font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.ws-title{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:.88;margin-top:8px}
.ws-top{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,52px);align-items:stretch}
@media(min-width:880px){.ws-top{grid-template-columns:1.32fr .68fr}}
.ws-top .ws-player{margin-top:0;height:100%;align-self:stretch}
.ws-top .ws-player>img{height:100%;object-fit:cover;object-position:50% 42%}
.ws-info{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,2.4vw,34px)}
.ws-info-foot{display:flex;flex-direction:column;gap:14px}
.ws-blurb{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.45;color:var(--ink-2);margin-top:-.34em}
.ws-blurb i{color:var(--ink)}
.ws-watch{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.ws-watch .wl{font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);width:100%}
.btn-sm{height:40px;padding:0 15px;font-size:.62rem;border-width:1px}
.ws-studio{align-self:flex-start}
.ws-awards{margin-top:clamp(44px,5vw,76px)}
.laurel-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,28px);padding-bottom:clamp(16px,2vw,28px)}
.laurel-top img{height:clamp(70px,8vw,110px);width:auto;display:block}
.ws-osc{text-align:center;margin:clamp(14px,2vw,24px) 0 clamp(20px,2.6vw,34px);font-family:var(--grot);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border-top:1px solid var(--line);padding-top:clamp(18px,2.4vw,30px)}
.laurel-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(16px,2vw,28px) clamp(10px,1.2vw,18px)}
.laurel-grid .lr img{height:clamp(54px,5.6vw,80px);width:auto;display:block;opacity:.92}

/* ---------- animated electric-blue gradient on hover ---------- */
@keyframes hue{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.nav-links a:hover,.menu a:hover,.work:hover .w-info .t,.disc a:hover .h,
.pd-nav a:hover .t,.foot .col a:hover,.ulink:hover,.pd-back:hover,.cf-note a:hover,
.ct-card .mail:hover,.fullc>summary:hover,.w-info .go:hover,.work:hover .w-info .go{
  background-image:linear-gradient(100deg,#1f3df2 0%,#37a6ff 28%,#7b46ff 52%,#37a6ff 76%,#1f3df2 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:hue 3.6s linear infinite}

/* ---------- disciplines ---------- */
.disc{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(min-width:760px){.disc{grid-template-columns:repeat(3,1fr)}}
.disc a{background:var(--bg);padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:9px;min-height:0;justify-content:space-between;transition:background .35s var(--ease)}
.disc a:hover{background:var(--paper)}
.disc a .h{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:.9}
.disc a:hover .h{color:var(--accent)}
.disc a .d{font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:1.15rem;line-height:1.5}
.disc a .go{font-family:var(--grot);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.disc a:hover .go{color:var(--accent)}

/* laurels */
.laurels{display:flex;flex-wrap:wrap;gap:10px}
.laurels span{font-family:var(--grot);font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);padding:9px 15px}
.home-laurels{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:clamp(18px,2.4vw,30px)}
.home-laurels img{height:clamp(38px,3.8vw,54px);width:auto;display:block;opacity:.9}
/* breathing films band (narrative) */
.bf{margin-top:clamp(44px,6vw,86px);padding-top:clamp(32px,4vw,54px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,46px);align-items:center}
@media(min-width:760px){.bf{grid-template-columns:1.1fr .9fr}}
.bf-media{position:relative;display:block;overflow:hidden;border:1px solid var(--ink);aspect-ratio:16/9}
.bf-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.bf-media:hover img{transform:scale(1.03)}
.bf-badge{position:absolute;top:12px;left:12px;font-family:var(--grot);font-weight:500;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:6px 10px}
.bf-info{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.bf-eyebrow{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:clamp(1.05rem,1.5vw,1.3rem)}
.bf-h{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.8rem,3.4vw,3rem);line-height:.92}
.yt-logo{height:.58em;width:auto;margin-left:.3em;vertical-align:-.02em;display:inline-block}
.bf-body{font-family:var(--body);color:var(--ink-2);line-height:1.62;font-size:1.02rem;max-width:46ch}
.bf-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.statpop{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,18,14,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.statpop.open{opacity:1;pointer-events:auto}
.statpop[hidden]{display:none}
.statpop-card{position:relative;width:min(580px,100%);background:var(--bg);border:1px solid var(--ink);padding:clamp(24px,3vw,40px);transform:translateY(10px);transition:transform .3s var(--ease)}
.statpop.open .statpop-card{transform:none}
.statpop-x{position:absolute;top:13px;right:13px;font-family:var(--grot);font-weight:500;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);padding:7px 11px;background:none;cursor:pointer;transition:color .3s,border-color .3s}
.statpop-x:hover{color:var(--accent);border-color:var(--accent)}
.statpop-eyebrow{display:flex;align-items:center;font-family:var(--grot);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.statpop-eyebrow .yt-logo{height:.95em;margin-left:.4em;vertical-align:middle}
.statpop-h{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.5rem);line-height:.95;margin:7px 0 clamp(16px,2.4vw,26px)}
.statpop-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:520px){.statpop-grid{grid-template-columns:repeat(3,1fr)}}
.statpop-grid .sp{background:var(--bg);padding:16px 14px;display:flex;flex-direction:column;gap:5px}
.statpop-grid .sp .n{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.statpop-grid .sp .l{font-family:var(--grot);font-weight:500;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);line-height:1.35}
.statpop-card>.btn{margin-top:clamp(18px,2.4vw,26px)}
.note{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--mut)}
.note i{color:var(--ink-2)}

/* contact band */
.sec-cta{padding-block:clamp(26px,3.4vw,48px)}
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:clamp(40px,4.4vw,60px)}
.band>div{position:relative}
.band .tag{position:absolute;bottom:calc(100% + 6px);left:0;margin:0}
.band .h{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:.9;margin-top:0;overflow-wrap:break-word}

/* ---------- category hero ---------- */
.cat-hero{padding-top:clamp(80px,10vh,118px)}
.cat-hero .big{font-family:var(--display);text-transform:uppercase;font-size:clamp(3rem,16vw,13rem);line-height:.86;overflow-wrap:break-word}
.cat-hero .sub{margin-top:12px;max-width:none;font-family:var(--syne);font-weight:600;font-style:normal;font-size:clamp(1rem,1.65vw,1.4rem);letter-spacing:-.006em;line-height:1.38;color:var(--ink-2)}
.cat-works{margin-top:clamp(16px,2.2vw,32px)}
/* aerial capabilities */
.aero-quals{list-style:none;display:flex;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--line);padding-bottom:clamp(22px,2.6vw,34px);margin-bottom:clamp(26px,3.2vw,44px)}
.aero-quals li{display:flex;align-items:baseline;gap:10px;border:1px solid var(--line);padding:8px 14px}
.aero-quals .q{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:1.02rem;letter-spacing:.02em;line-height:1;color:var(--ink)}
.aero-quals .d{font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.aero-gear{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,32px)}
@media(min-width:640px){.aero-gear{grid-template-columns:repeat(3,1fr)}}
.aero-gear .ag{display:flex;align-items:flex-start;gap:13px;padding-top:16px;border-top:1px solid var(--line-soft)}
.aero-gear .ag-ic{flex:none;color:var(--ink);line-height:0}
.aero-gear .ag-ic svg{display:block;width:36px;height:36px}
.aero-gear .ag h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1rem,1.5vw,1.24rem);line-height:1.02;margin-bottom:7px}
.aero-gear .ag p{font-family:var(--grot);font-weight:500;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);line-height:1.5}

/* ---------- project detail ---------- */
.pd{padding-top:clamp(94px,13vh,156px)}
.pd-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pd-back{font-family:var(--grot);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);transition:color .3s}
.pd-back:hover{color:var(--accent)}
.pd-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.6rem,10vw,8.5rem);line-height:.88;margin-top:16px;overflow-wrap:break-word}
.pd-laur{display:inline-flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.pd-laur .l{font-family:var(--grot);font-weight:500;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:6px 11px}
.player{position:relative;width:100%;margin-top:clamp(30px,4vw,52px);overflow:hidden;background:#000;border:1px solid var(--ink)}
.player>img{width:100%;height:auto;display:block}
.player .pc{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.player .pc .c{display:grid;place-items:center;width:auto;height:auto;border:0;border-radius:0;background:none}
.player .pc .c svg{width:30px;height:auto;margin:0;fill:#fff;opacity:.9;filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));transition:opacity .4s var(--ease),transform .5s var(--ease)}
.player:hover .pc .c svg{opacity:1;transform:scale(1.16)}
.player .note{position:absolute;left:14px;bottom:12px;font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.player .ifr{position:relative;width:100%;aspect-ratio:16/9}.player .ifr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.filmstrip{margin-top:14px;overflow:hidden}
.fs-track{display:flex;gap:8px;width:max-content;will-change:transform}
.filmstrip .t{flex:none;height:clamp(170px,26vh,300px);border:1px solid var(--line-soft);background:#0a0a0a;cursor:zoom-in}
.filmstrip .t img{height:100%;width:auto;display:block}
.credits{display:grid;grid-template-columns:1fr;gap:1px;margin-top:clamp(44px,6vw,76px);background:var(--line-soft);border:1px solid var(--line-soft)}
@media(min-width:680px){.credits{grid-template-columns:repeat(3,1fr)}}
.credits .cl{background:var(--bg);padding:22px 16px}
.credits .cl .k{font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.credits .cl .v{margin-top:9px;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ink)}
.fullc{margin-top:14px;border:1px solid var(--line-soft)}
.fullc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;font-family:var(--grot);font-weight:500;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);transition:color .3s,background .3s}
.fullc>summary::-webkit-details-marker{display:none}
.fullc>summary:hover{color:var(--accent);background:var(--paper)}
.fullc>summary .ind{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.fullc[open]>summary .ind{transform:translateY(1px) rotate(-135deg)}
.fullc .rows{border-top:1px solid var(--line-soft)}
.fullc .rows .r{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.fullc .rows .r:last-child{border-bottom:0}
.fullc .rows .r .k{font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.fullc .rows .r .v{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-2);text-align:right}
.synopsis{margin-top:clamp(50px,7vw,96px);display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.synopsis{grid-template-columns:.34fr .66fr;gap:clamp(28px,4vw,64px)}}
.synopsis h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.3rem);line-height:.95}
.synopsis .body p{font-family:var(--syne);font-weight:500;font-style:normal;color:var(--ink-2);line-height:1.56;font-size:clamp(1.02rem,1.55vw,1.3rem);letter-spacing:-.004em}
.synopsis .body p+p{margin-top:.7em}
.synopsis .body i{color:var(--ink)}
.prov{display:block;margin-top:14px;font-family:var(--grot);font-weight:500;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-style:normal}
.pd-nav{margin-top:clamp(60px,8vw,110px);display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.pd-nav{grid-template-columns:1fr 1fr;gap:14px}}
.pn{position:relative;display:block;aspect-ratio:2.4/1;overflow:hidden;background:#000;border:1px solid var(--ink)}
.pn .pn-media{position:absolute;inset:0}
.pn .pn-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.pn::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.2) 55%,transparent);transition:opacity .4s}
.pn.nx::after{background:linear-gradient(270deg,rgba(0,0,0,.7),rgba(0,0,0,.2) 55%,transparent)}
.pn:hover .pn-media img{transform:scale(1.05)}
.pn-cap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:clamp(16px,2.4vw,32px)}
.pn.nx .pn-cap{align-items:flex-end;text-align:right}
.pn-cap .k{font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pn-cap .t{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:.95;color:#fff;overflow-wrap:break-word}

/* ---------- about ---------- */
.ab{padding-top:clamp(82px,9vh,116px)}
.ab-state{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.6rem,7vw,5.6rem);line-height:.9;max-width:18ch;overflow-wrap:break-word}
.ab-role{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.7rem);color:var(--accent)}
.ab-cols{margin-top:clamp(22px,3vw,40px);display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:start}
@media(min-width:880px){.ab-cols{grid-template-columns:1fr clamp(300px,31vw,440px);align-items:start}}
.ab-body p{font-family:var(--body);color:var(--ink-2);line-height:1.62;font-size:1.02rem;margin-bottom:.72em;max-width:56ch}
.ab-body p:last-child{margin-bottom:0}
.ab-body i{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.15em}
.ab-portrait{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--ink);aspect-ratio:4/5}
@media(min-width:880px){.ab-portrait{aspect-ratio:3/4;height:auto}}
.ab-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 16%;display:block}
.ab-pcap{position:absolute;left:12px;bottom:11px;font-family:var(--grot);font-weight:500;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.ab-portrait .ph2{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ab-portrait .ph2 .t{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--mut)}
.ab-portrait .ph2 .s{font-family:var(--grot);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ab-portrait .corner{position:absolute;width:14px;height:14px}
.ab-portrait .corner.tl{top:8px;left:8px;border-top:1.5px solid var(--line-strong);border-left:1.5px solid var(--line-strong)}
.ab-portrait .corner.br{bottom:8px;right:8px;border-bottom:1.5px solid var(--line-strong);border-right:1.5px solid var(--line-strong)}
.list{border-top:1px solid var(--line)}
.list .r{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.list .r .p{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.2rem,2vw,1.7rem);color:var(--ink)}
.list .r .d{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--mut);text-align:right}
.two{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,64px)}
@media(min-width:720px){.two{grid-template-columns:1fr 1fr}}

/* ---------- about: recognition (tight) ---------- */
.ab-rec{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,36px);margin-top:clamp(24px,3vw,40px)}
@media(min-width:760px){.ab-rec{grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,56px)}}
.ab-h{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.3rem,2.2vw,1.9rem);border-bottom:1px solid var(--line);padding-bottom:12px}
.reclist{margin-top:2px}
.reclist .rr{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.reclist .rr .a{font-family:var(--ui);font-weight:600;font-size:.96rem;color:var(--ink);max-width:58%}
.reclist .rr .b{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--mut);text-align:right;flex:none}
.ab-cv{margin-top:clamp(20px,2.6vw,32px);display:inline-flex}
.ab-laurels{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,26px);margin-top:clamp(26px,3.2vw,44px);padding-top:clamp(18px,2.4vw,30px);border-top:1px solid var(--line)}
.ab-laurels img{height:clamp(38px,3.6vw,50px);width:auto;display:block;opacity:.85}
.ab-contact{margin-top:clamp(30px,3.6vw,52px)}
/* narrative grid only: crop-to-fill for uniform 16:9 */
.works.crop .w-media img{object-fit:cover}

/* ---------- contact ---------- */
.ct{padding-top:clamp(100px,14vh,176px)}
.ct-head{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.6rem,9vw,8rem);line-height:.9;overflow-wrap:break-word}
.ct-cols{margin-top:clamp(42px,6vw,76px);display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,72px)}
@media(min-width:880px){.ct-cols{grid-template-columns:1.4fr .6fr;align-items:start}}
.ct-prompt{max-width:30ch}
.cform{margin-top:clamp(28px,4vw,40px)}
.cf-row{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,24px)}
@media(min-width:560px){.cf-row{grid-template-columns:1fr 1fr}}
.cf-f{display:block;margin-top:clamp(18px,3vw,24px)}.cf-row .cf-f{margin-top:0}
.cf-f>span{display:block;font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.cf-f input,.cf-f textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);color:var(--ink);font-family:var(--body);font-size:1.05rem;padding:10px 2px;transition:border-color .3s}
.cf-f textarea{resize:vertical;min-height:120px}
.cf-f input::placeholder,.cf-f textarea::placeholder{color:var(--faint)}
.cf-f input:focus,.cf-f textarea:focus{outline:none;border-color:var(--accent)}
.cf-hp{position:absolute;left:-9999px}
.cf-foot{margin-top:clamp(30px,4vw,40px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cf-note{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--mut)}
.cf-note a{color:var(--ink-2);border-bottom:1px solid var(--line)}.cf-note a:hover{color:var(--accent)}
.ct-card{border:1px solid var(--line-soft);padding:22px;background:var(--paper)}
.ct-card .st{display:flex;align-items:center;gap:9px;font-family:var(--grot);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ct-card .st i{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:blink 2s steps(2) infinite}
.ct-card .mail{display:inline-block;margin-top:18px;font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--ink);border-bottom:1.5px solid var(--line);padding-bottom:5px;transition:border-color .3s,color .3s;overflow-wrap:anywhere}
.ct-card .mail:hover{border-color:var(--accent);color:var(--accent)}
.ct-card .rows{margin-top:22px;border-top:1px solid var(--line-soft)}
.ct-card .rows .r{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.ct-card .rows .r .k{font-family:var(--grot);font-weight:500;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ct-card .rows .r .v{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink)}

/* ---------- frames + lightbox ---------- */
.fr{padding-top:clamp(86px,11vh,138px)}
.fg{margin-top:clamp(36px,4.6vw,60px)}
.fg-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.fg-h .l{display:flex;gap:14px;align-items:baseline;min-width:0}
.fg-h .num{font-family:var(--grot);font-size:.66rem;color:var(--accent);letter-spacing:.1em;flex:none}
.fg-h .nm{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.2rem,1.9vw,1.7rem);overflow-wrap:break-word}
.fg-h .sub{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--mut);flex:none}
.fg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:680px){.fg-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.fg-grid{grid-template-columns:repeat(4,1fr)}}
.ft{position:relative;overflow:hidden;background:var(--panel);line-height:0;cursor:zoom-in;border:1px solid var(--line-soft)}
.ft img{width:100%;height:auto;display:block;transition:opacity .4s}
.ft:hover img{opacity:.88}
.lb{position:fixed;inset:0;z-index:9600;background:rgba(18,15,11,.97);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:66vw;max-height:66vh;width:auto;height:auto;object-fit:contain}
.lb .x{position:absolute;top:16px;right:18px;font-family:var(--grot);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,252,246,.7);border:1px solid rgba(255,252,246,.3);padding:7px 12px}
.lb .x:hover{color:#fff}
.lb .a{position:absolute;top:50%;transform:translateY(-50%);font-size:26px;color:rgba(255,252,246,.6);padding:20px}.lb .a:hover{color:#fff}
.lb .prev{left:6px}.lb .next{right:6px}
.lb .cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:1rem;color:rgba(255,252,246,.7)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:10;padding:clamp(28px,3.6vw,50px) 0 22px}
.foot .top{display:grid;grid-template-columns:1fr;gap:26px;border-top:1px solid var(--line);padding-top:32px}
@media(min-width:760px){.foot .top{grid-template-columns:1.4fr 1fr 1fr}}
.foot .bword{font-family:var(--display);text-transform:uppercase;font-size:clamp(3rem,10vw,6.5rem);line-height:.82}
.foot .col .k{font-family:var(--grot);font-weight:500;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.foot .col a,.foot .col p{display:block;font-family:var(--grot);font-size:.78rem;letter-spacing:.04em;color:var(--ink-2);padding:4px 0;overflow-wrap:anywhere;text-transform:uppercase}
.foot .col a:hover{color:var(--accent)}
.foot .copy{margin-top:34px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--grot);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}

/* ---------- reveals + curtain ---------- */
[data-rv]{opacity:0;transform:translateY(22px);will-change:opacity,transform;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
[data-rv].in{opacity:1;transform:none}
html.no-js [data-rv]{opacity:1;transform:none;clip-path:none}
.curtain{position:fixed;inset:0;z-index:9700;background:var(--bg);pointer-events:none;transform-origin:top;display:grid;place-items:center}
.curtain .lw{font-family:var(--display);text-transform:uppercase;font-size:14vw;color:var(--panel)}
body.loaded .curtain{transform:scaleY(0);transition:transform .7s var(--ease-io) .1s}
body.loaded .curtain .lw{opacity:0;transition:opacity .35s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  body::before,.grain{animation:none}
}

/* ================================================================
   MOBILE REFINEMENTS  (max-width:600px)  — phone only
   Every rule below is gated by this media query, so it is inert at
   tablet/desktop widths and CANNOT change the desktop design.
   Goal: let the cinematography breathe, strip accents layered over
   media, remove duplicated chrome, fix header collisions.
   Added 2026-07-06 (mobile pass).
   ================================================================ */
@media(max-width:600px){
  /* 1 — strip decorative corner labels off the hero reels */
  .hud{display:none}

  /* 2 — drop the duplicated meta strip (repeats the tagline, ran to the edges) */
  .hero-meta{display:none}

  /* 3 — remove the text note layered on players; the play button is enough */
  .player .note{display:none}

  /* 4 — clean the hero: a touch less top gap now the labels are gone,
         a slightly larger, lower CTA that clears the frame edge */
  .hero{padding-top:76px}
  /* smaller, lighter reel CTA on phones */
  .hero-cta{bottom:14px;height:38px;padding:0 15px;gap:7px;font-size:.56rem;letter-spacing:.1em}
  .hero-cta svg{width:8px;height:10px}

  /* 5 — stack the two-part section headers so the italic index label and
         the big display heading never crowd each other */
  .sec-head{flex-direction:column;align-items:flex-start;gap:6px}
  .sec-head .idx{font-size:1rem}
  .sec-head h2{font-size:clamp(2.1rem,9vw,3rem);line-height:.9;text-align:left}

  /* 6 — a little more air between stacked film cards + gallery rows */
  .works{gap:26px}
  .fg-grid{gap:6px}
}

/* Collapsible menu: the burger overlay only exists <=760px, so sizing it
   here never touches the desktop nav. Halve the oversized display type. */
@media(max-width:760px){
  .menu{padding:0 24px;gap:2px}
  .menu a{font-size:clamp(1.6rem,6.4vw,2.2rem);padding:11px 0;gap:12px}
  .menu a .n{font-size:.62rem}
}