/*
Theme Name: Diego Ante — Screen
Description: Private portfolio prototype for Diego Ante.
Version: 1.7.3
*/
@font-face{font-family:"Noto Serif JP";src:url(assets/noto-serif-400.woff2) format("woff2");font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#10100f;--text:#f5f2eb;--soft:#b7b1a5;--accent:#e8f992;--line:#ffffff2d;--display:"Noto Serif JP",Georgia,serif;--body:var(--display);--gutter:clamp(16px,2.7vw,70px);--title:clamp(29px,3.65vw,60px);--mark-width:clamp(124px,13vw,225px);--header:clamp(73px,6vw,112px);--mono:ui-monospace,Menlo,monospace;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:var(--body)}
[id]{scroll-margin-top:var(--header)}
html{scrollbar-gutter:stable}
html:has(dialog[open]){overflow:hidden}
h1,h2,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
.kicker{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.top{height:var(--header);position:fixed;inset:0 0 auto;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 var(--gutter);color:#fff;background:transparent;text-shadow:0 1px 8px #000,0 1px 3px #000}
body.admin-bar .top{top:32px}
.mark{display:grid;align-content:center;gap:1px;flex:none;margin-left:calc(var(--mark-width) * -.0558)}
.directed{font:600 clamp(8px,.76vw,12px)/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;margin-left:5.58%}
.signature{display:block;width:var(--mark-width);aspect-ratio:26/7;background:url(assets/signature-loop.svg) 0 0 / 400% 300% no-repeat;animation:signature-loop 1.43s step-end infinite;filter:drop-shadow(0 1px 3px #000)}
@keyframes signature-loop{
 0.00000%{background-position:0.000000% 0%}
 9.09091%{background-position:33.333333% 0%}
 18.18182%{background-position:66.666667% 0%}
 27.27273%{background-position:100.000000% 0%}
 36.36364%{background-position:0.000000% 50%}
 45.45455%{background-position:33.333333% 50%}
 54.54545%{background-position:66.666667% 50%}
 63.63636%{background-position:100.000000% 50%}
 72.72727%{background-position:0.000000% 100%}
 81.81818%{background-position:33.333333% 100%}
 90.90909%{background-position:66.666667% 100%}
 100%{background-position:0 0}
}
.section-head h1 span,.section-head h2 span{color:var(--accent)}
.top nav{display:flex;gap:clamp(14px,3.5vw,58px);font:500 clamp(10px,.75vw,13px) var(--mono);text-transform:uppercase;letter-spacing:.1em}
.top nav a:hover,.foot a:hover,.hero-caption button:hover{color:var(--accent)}
.hero{height:100svh;min-height:450px;position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;background:#0a0a09}
.hero-frame,.hero-motion,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-poster{transition:opacity .28s}
.hero.has-video .hero-poster{opacity:0}
.hero-frame{object-fit:cover;object-position:50% 44%}
 .hero-motion{container-type:size;overflow:hidden;opacity:0;transition:opacity .35s ease;pointer-events:none}
.hero-motion.is-playing{opacity:1}
.hero-motion iframe{opacity:0;transition:opacity .25s ease;position:absolute;left:50%;top:50%;border:0;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%) scale(1.15)}
.hero-motion iframe.is-current{opacity:1}
.hero-shade{background:linear-gradient(180deg,#080807b0,transparent 24%,transparent 54%,#080807eb)}
.top-home .mark{cursor:default}
.hero-content{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:15px;padding:0 var(--gutter)}
.hero-mark{display:grid;justify-items:center;width:100%}
.hero-mark .directed{margin:0;letter-spacing:.28em;font-size:clamp(11px,1.2vw,18px)}
.hero-mark .signature{width:min(78vw,620px);background-image:url(assets/signature-center.svg)}
.hero-role{color:var(--text);text-shadow:0 1px 7px #000}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:9px}
.hero-caption{position:absolute;z-index:1;bottom:clamp(20px,4vh,64px);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:12px}
.scene-controls{display:flex;gap:6px}
.scene-controls button{background:#10100f60;border:1px solid #fff6;border-radius:50%;height:34px;width:34px;font-size:10px}
.scene-controls button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.pill{background:#1717156b;border:1px solid #fff8;border-radius:100px;padding:14px 19px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill.primary{background:var(--accent);color:#181a0b;border-color:var(--accent)}
.pill{transition:background .2s,border-color .2s,color .2s}
.pill:hover{background:var(--text);border-color:var(--text);color:#131310}
.wrap{width:calc(100% - 2 * var(--gutter));margin-inline:auto}
.work{padding:clamp(28px,5vw,100px) 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:10px;margin:0 0 clamp(16px,2.4vw,46px)}
.section-head .kicker,.foot .kicker{color:var(--soft)}
.section-head h1,.section-head h2{font:400 var(--title)/1.04 var(--display);letter-spacing:0;margin-top:8px}
.count{white-space:nowrap;padding-bottom:4px}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.65vw,14px)}
.tile{border:0;padding:0;background:#201d1b;position:relative;text-align:left;overflow:hidden;aspect-ratio:1.6;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.045)}
.tile-preview{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .2s;pointer-events:none}
.tile-preview.is-playing{opacity:1}
.tile-preview iframe,.tile-preview video{position:absolute;width:100%;height:100%;inset:0;border:0;object-fit:cover}
.tile-preview iframe{transform:scale(1.14)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080807ec,transparent 66%);z-index:0}
.tile-index,.tile-copy,.tile-play{position:absolute;z-index:1}
.tile-index{left:20px;top:17px}
.tile-play{right:20px;bottom:20px;border:1px solid #fff9;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:13px}
.tile-play,.close,.scene-controls button{transition:color .2s,border-color .2s,background .2s}
.tile:hover .tile-play,.tile:focus-visible .tile-play,.close:hover,.scene-controls button:hover{color:var(--accent);border-color:var(--accent);background:#10100f90}
.tile-copy{bottom:18px;left:20px;right:72px;display:grid;gap:4px}
.tile-copy strong{font:400 clamp(20px,2vw,44px)/1.13 var(--display);letter-spacing:0}
.tile-copy .kicker{color:var(--accent)}
.about{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:16px;border-block-start:1px solid var(--line);padding:50px 0}
.about>p{font-size:clamp(16px,2.2vw,23px);color:var(--soft);line-height:1.55}
.foot{border-top:1px solid var(--line);padding:30px 0 52px;display:flex;align-items:center;gap:20px}
.foot{justify-content:flex-end}
.footer-email{transition:color .2s}
 .follow,.follow-links>div{display:flex;align-items:center;gap:20px}
.follow-toggle{display:none;background:none;border:0;color:var(--soft);padding:8px 0;white-space:nowrap;transition:color .2s}
.follow-toggle span{display:inline-block;transition:transform .25s ease}
.follow-toggle:hover,.follow.is-open .follow-toggle{color:var(--accent)}
.follow.is-open .follow-toggle span{transform:rotate(45deg)}
@media(hover:hover) and (pointer:fine) and (min-width:651px){
 .follow{gap:0}
 .follow-toggle{display:block}
 .follow-links{display:grid;grid-template-columns:0fr;opacity:0;visibility:hidden;transform:translateX(-8px);transition:grid-template-columns .28s ease,opacity .22s ease,transform .28s ease,visibility 0s linear .28s}
 .follow-links>div{min-width:0;overflow:hidden;white-space:nowrap}
 .follow-links a:first-child{margin-left:20px}
 .follow.is-open .follow-links{grid-template-columns:1fr;opacity:1;visibility:visible;transform:none;transition-delay:0s}
}
.work-end{display:flex;justify-content:flex-end;margin-top:30px}
.work-end a{padding:8px 0}
 .next-film{position:relative;isolation:isolate;width:100%;min-height:clamp(145px,22vw,280px);overflow:hidden;border:0;border-top:1px solid var(--line);background:none;color:var(--accent);padding:28px 16px;display:grid;place-items:center;text-align:center}
.next-film-copy{display:grid;gap:9px;position:relative;z-index:1;transition:transform .35s ease}
.next-film-media{position:absolute;inset:12px 0 0;display:block;pointer-events:none;opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .5s ease}
.next-film-media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#10100fa0 0%,#10100f5c 47%,#10100f 96%)}
.next-film-media img{width:100%;height:100%;object-fit:cover;display:block}
.next-film:focus-visible .next-film-media{opacity:1;transform:scale(1)}
.next-film strong{color:var(--text);font:400 clamp(23px,3.3vw,40px)/1.2 var(--display);transition:color .25s}
@media(hover:hover){
 .next-film:hover .next-film-media{opacity:1;transform:scale(1)}
 .next-film:hover .next-film-copy{transform:translateY(-2px)}
}
.next-film:focus-visible strong,.next-film:hover strong{color:var(--accent)}
dialog{border:1px solid var(--line);background:#161614;color:var(--text);width:94vw;max-width:none;max-height:94dvh;padding:0;overscroll-behavior:contain}
#viewer{--viewer-pad:clamp(16px,2vw,38px);overflow:hidden}
.viewer-scroll{max-height:calc(94dvh - 2px);overflow:auto;scrollbar-width:none;overscroll-behavior:contain}
.viewer-scroll::-webkit-scrollbar{display:none}
.reel-viewer .viewer-scroll{overflow:hidden}
.viewer-scroll-indicator{position:absolute;inset:7px 4px 7px auto;width:4px;opacity:0;pointer-events:none;transition:opacity .18s ease}
#viewer.is-scrolling .viewer-scroll-indicator{opacity:1}
.viewer-scroll-indicator span{position:absolute;top:var(--thumb-top,0);height:var(--thumb-height,0);width:100%;border-radius:4px;background:#f5f2eb66}
#viewer.single-film{width:min(94vw,calc(max(205px,94dvh - 213px) * var(--film-ratio,1.77778) + 2 * var(--viewer-pad)))}
#viewer.reel-viewer{width:min(94vw,calc(max(40px,94dvh - 112px - 2 * var(--viewer-pad)) * var(--film-ratio,1.77778) + 2 * var(--viewer-pad)));overflow:hidden;scrollbar-width:none}
dialog::backdrop{background:#090908dc;backdrop-filter:blur(9px)}
.viewer-shell{padding:var(--viewer-pad);position:relative}
.viewer-head{min-height:44px;margin-bottom:clamp(14px,1.65vw,24px);padding-right:50px}
#film-kicker{color:var(--accent);margin-bottom:8px}
#film-kicker:empty{display:none}
.close{position:absolute;top:var(--viewer-pad);right:var(--viewer-pad);background:none;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;flex:none}
#film-title{font:400 var(--title)/1.04 var(--display);letter-spacing:0}
#screen{width:100%;aspect-ratio:var(--film-ratio,1.77778);background:#080807;display:grid;place-items:center;position:relative}
.reel-viewer .viewer-head>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px}
.reel-viewer #film-title{font-size:clamp(25px,3vw,49px)}
.reel-viewer .viewer-head .source{margin:0}
.viewer-links{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.viewer-links .source{margin:0}
.details-jump{border:0;background:none;color:var(--accent);padding:0;display:inline-flex;align-items:center;gap:8px;text-align:left;transition:color .2s}
.details-jump:hover{color:#fff}
.details-jump .scroll-ring{width:64px}
.scroll-ring{display:block;width:clamp(70px,8vw,112px);overflow:visible;color:inherit;transition:transform .28s}
.scroll-ring text{fill:currentColor;font-family:var(--display);font-size:9px;animation:scroll-spin 18s linear infinite;transform-origin:50% 50%}
.scroll-arrow{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes scroll-spin{to{transform:rotate(360deg)}}
.details-jump:hover .scroll-ring,.about-scroll:hover .scroll-ring{transform:translateY(4px) scale(1.06)}
#film-info{scroll-margin-top:16px;margin-top:clamp(25px,3vw,62px)}
#film-info:empty{display:none}
.film-section{display:grid;grid-template-columns:minmax(115px,.65fr) minmax(0,1.7fr);gap:clamp(14px,5vw,76px);max-width:980px;margin:0 auto;padding:clamp(25px,4vw,65px) 0;border-top:1px solid var(--line)}
.film-section h3{font:400 clamp(20px,2.2vw,32px)/1.3 var(--display);margin:0;color:var(--text)}
.film-section .story-copy,.film-section ul{font:400 clamp(13px,1.12vw,17px)/1.8 var(--body);color:#c5c0b7;margin:0;max-width:68ch}
.story-copy p+p{margin-top:1.25em}
.story-copy strong,.story-copy b{font-weight:600;color:var(--text)}
.story-copy a{color:var(--accent)}
.film-section ul{padding-left:18px}
.film-section li+li{margin-top:8px}
#screen iframe,#screen img,#screen video,#screen button{width:100%;height:100%;border:0;position:absolute;inset:0}
#screen img{object-fit:contain}
#screen iframe{background:#080807}
#screen button{background:#08080735;display:grid;place-items:center}
#screen button:hover span,#screen button:focus-visible span{background:var(--accent);border-color:var(--accent);color:#181a0b}
#screen button span{transition:color .2s,border-color .2s,background .2s;border:1px solid #fff9;border-radius:999px;background:#171715bd;padding:14px 22px;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.source{display:inline-block;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.source:hover{color:var(--text);border-color:var(--accent)}
#chapter-selector{margin-top:22px}
#chapter-label{color:var(--soft);margin:0 0 10px}
.chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.chapter{background:#23231e;border:1px solid var(--line);padding:0;text-align:left;min-width:0;overflow:hidden;transition:border-color .2s,background .2s,color .2s}
.chapter:hover{border-color:var(--accent);color:var(--accent);background:#383a29}
.chapter[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.chapter img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s,filter .3s}
.chapter:hover img{transform:scale(1.035);filter:brightness(1.12)}
.chapter span{display:block;padding:12px;font:500 clamp(11px,1vw,15px)/1.3 var(--mono)}
.credits dl{columns:132px 3;column-gap:clamp(28px,3.5vw,52px);margin:0;font-size:14px}
.credits dl>div{break-inside:avoid;margin:0 0 14px}
.credits dt{color:var(--soft);font-size:12px;margin-bottom:4px}
.credits dd{margin:0;line-height:1.35}
details{border-top:1px solid var(--line);padding:14px 0;line-height:1.55}
details summary{cursor:pointer;font:600 13px/1.45 var(--mono)}
details p{margin-top:10px}
body:not(.home) .top{background:#10100fbd}
.top nav a[aria-current=page]{color:var(--accent)}
.inner-page{padding-top:calc(var(--header) + clamp(24px,4vw,68px));min-height:calc(100svh - 100px)}
 .work-filters{display:grid;gap:12px;margin-bottom:22px}
.filter-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:baseline;min-width:0;margin:0;padding:0;border:0}
.filter-row legend{float:left;padding:7px 0;color:var(--soft)}
.filter-options{display:flex;flex-wrap:wrap;column-gap:clamp(12px,1.8vw,28px);row-gap:5px}
.filter-options label{position:relative;cursor:pointer}
.filter-options input{position:absolute;opacity:0;width:1px;height:1px}
.filter-options span{display:block;padding:5px 0;border-bottom:1px solid transparent;font:500 12px/1.4 var(--mono);color:var(--soft);transition:color .2s,border-color .2s}
.filter-options label:hover span,.filter-options input:checked + span{color:var(--accent)}
.filter-options input:checked + span{border-color:currentColor}
.filter-options input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.filter-count{color:var(--soft);margin-left:92px}
.no-results{padding:30px 0}
.work-link{color:var(--accent);transition:color .2s}
.work-link:hover,.work-link:focus-visible{color:var(--text)}
body,#viewer,.site-menu{background-color:var(--bg);background-image:linear-gradient(#10100f80,#10100f80),url(assets/grain.png);animation:grain-shift 1.35s steps(1) infinite}
#viewer{background-color:#161614}
@keyframes grain-shift{
 0%,100%{background-position:0 0}
 18%{background-position:-26px 17px}
 39%{background-position:31px -12px}
 57%{background-position:-16px -33px}
 78%{background-position:22px 29px}
}
#viewer[open]{animation:grain-shift 1.35s steps(1) infinite,viewer-in .38s cubic-bezier(.2,.72,.26,1) both}
#viewer.is-closing{animation:grain-shift 1.35s steps(1) infinite,viewer-out .22s ease-in both}
#viewer[open]::backdrop{animation:viewer-backdrop-in .38s ease-out both}
#viewer.is-closing::backdrop{animation:viewer-backdrop-out .22s ease-in both}
@keyframes viewer-in{from{opacity:0;transform:translateY(20px)}}
@keyframes viewer-out{to{opacity:0;transform:translateY(9px)}}
@keyframes viewer-backdrop-in{from{opacity:0}}
@keyframes viewer-backdrop-out{to{opacity:0}}
.about-page{padding-bottom:clamp(26px,5vw,80px)}
.about-cover{position:relative;isolation:isolate;display:grid;place-items:center;overflow:clip;padding:calc(var(--header) + clamp(10px,3svh,36px)) var(--gutter) clamp(30px,6svh,68px)}
.about-portrait{display:block;width:clamp(190px,23vw,420px);height:auto;max-height:60svh;object-fit:cover;filter:brightness(.72) grayscale(1)}
.about-ghost{position:absolute;z-index:-1;inset:0;display:grid;place-items:center;white-space:nowrap;color:#f5f2eb15;font:400 clamp(80px,17vw,350px)/1 var(--display)}
.about-title{position:absolute;text-align:center;color:#fff}
.about-title h1{font:400 clamp(55px,8vw,142px)/1.1 var(--display)}
.about-title p{font:400 clamp(16px,2.3vw,32px)/1.2 var(--display);margin-top:17px}
.about-scroll{position:absolute;bottom:clamp(12px,3svh,38px);left:var(--gutter);color:var(--soft);transition:color .2s}
.about-scroll:hover{color:var(--accent)}
.about-body{max-width:1150px;padding-top:clamp(16px,2.6vw,38px)}
.about-editorial{max-width:720px;margin-inline:auto}
.about-editorial figure{display:none}
.bio-copy,.about-section{font-size:clamp(14px,1.12vw,17px);line-height:1.6}
.bio-copy p+p,.about-section p+p{margin-top:1em}
.about-section{margin-top:clamp(26px,5vw,80px);padding-top:24px;border-top:1px solid var(--line)}
.about-section h2{font:400 clamp(27px,3vw,48px)/1.08 var(--display);margin-bottom:16px}
.about-section details li{margin-block:.38em;font-size:clamp(13px,1vw,15px);line-height:1.45}
.talent-list{columns:2;column-gap:28px;margin:0;padding:0;list-style:none;max-width:900px}
.talent-list li{break-inside:avoid;padding:5px 0}
.about-section a:hover{color:var(--accent)}
.about-section details summary{transition:color .2s}
.about-section details summary:hover,.about-section details summary:focus-visible{color:var(--accent)}
.about-section details[open]>:not(summary){animation:lift-in .3s ease-out both}
.rep-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px}
.rep-links a:hover,.rep-links a:focus-visible{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.rep-links a{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.client-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));padding:0;gap:1px}
.client-grid li{display:grid;place-items:center;background:transparent;aspect-ratio:1.7;padding:12px}
.client-grid img{display:block;width:100%;height:100%;max-height:78px;object-fit:contain}
.menu-toggle{background:none;border:0;color:var(--text);display:inline-flex;align-items:center;gap:12px;padding:12px 0 12px 12px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
.menu-toggle:hover{color:var(--accent)}
.menu-icon{width:21px;height:10px;position:relative;border-top:1px solid currentColor}
.menu-icon::after{position:absolute;content:"";inset:4px auto auto 0;width:14px;border-top:1px solid currentColor;transition:width .2s}
.menu-toggle:hover .menu-icon::after{width:21px}
dialog.site-menu{width:100%;height:100dvh;max-height:none;max-width:none;margin:0;border:0;padding:var(--header) var(--gutter);overflow:auto}
.site-menu[open]{display:grid;place-content:center}
.site-menu .menu-close{position:absolute;top:calc((var(--header) - 44px) / 2);right:var(--gutter)}
.site-menu[open]{animation:grain-shift 1.35s steps(1) infinite,menu-in .34s cubic-bezier(.2,.75,.2,1) both}
.site-menu.is-closing{animation:grain-shift 1.35s steps(1) infinite,menu-out .28s ease both}
.site-menu::backdrop{background:transparent;backdrop-filter:none}
@keyframes menu-in{from{opacity:0;transform:translateY(16px)}}
@keyframes menu-out{to{opacity:0;transform:translateY(12px)}}
.menu-pages{display:grid;gap:.18em;font:400 clamp(36px,5.3vw,81px)/1.18 var(--display);text-align:center}
.menu-loading{grid-area:1/1;align-self:center;justify-self:center;text-align:center;opacity:.5}
.menu-loading{animation:preloader-in .36s ease-out both}
@keyframes preloader-in{from{opacity:0}to{opacity:var(--preloader-opacity,1)}}
.menu-loading{--preloader-opacity:.5}
.menu-loading>.signature{animation:signature-loop 1.43s step-end infinite}
.menu-loading .signature{width:min(64vw,430px)}
.site-menu.is-loading .menu-pages{grid-area:1/1;opacity:0;visibility:hidden}
.site-menu.is-loading .menu-close{visibility:hidden}
.menu-pages a{animation:lift-in .45s both;transition:color .2s}
.menu-pages a:nth-child(2){animation-delay:.08s}
.menu-pages a:nth-child(3){animation-delay:.16s}
.menu-pages a:hover,.menu-pages a[aria-current=page]{color:var(--accent)}
.menu-pages a:nth-child(4){animation-delay:.24s}
@keyframes lift-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.reveal-ready{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s ease}
.reveal-ready.is-visible{opacity:1;transform:translateY(0)}
@media(min-width:1050px){
 .player-layout:has(#chapter-selector:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,26%);gap:clamp(16px,2vw,40px);align-items:start}
 .player-layout #chapter-selector{margin-top:0}
 .player-layout .chapters{grid-template-columns:1fr}
 .player-layout .chapter{position:relative}
 .player-layout .chapter img{aspect-ratio:2}
 .player-layout .chapter:has(img) span{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#0b0b0bef);padding-top:22px;text-shadow:0 1px 3px #000}
}
@media(max-width:960px){
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
 body.admin-bar .top{top:46px}
 .hero{min-height:390px}
 .hero-frame{object-position:74% center}
 .hero-shade{background:linear-gradient(180deg,#080807b0,transparent 25%,transparent 52%,#080807ef)}
 .section-head{align-items:start;flex-direction:column}
 .count{display:none}
 .work-grid,.about,.about-editorial{grid-template-columns:1fr}
 .tile{aspect-ratio:1.5}
 .tile-copy strong{font-size:clamp(22px,6.4vw,29px)}
 .tile-copy .kicker{font-size:10px}
 .about{padding:32px 0}
 .foot{flex-wrap:wrap}
 #viewer{--viewer-pad:14px}
 #viewer:not(.reel-viewer){width:calc(100% - 16px)}
 .film-section{grid-template-columns:1fr;gap:10px}
 .viewer-head{gap:8px}
 .viewer-head .close{width:38px;height:38px}
 .filter-row{display:block}
 .filter-row legend{float:none;padding:0 0 3px}
 .filter-count{margin:0}
 .chapters{grid-template-columns:1fr;gap:9px}
 .chapter{display:grid;grid-template-columns:50% 1fr;align-items:center}
 .chapter span{padding:10px}
 .credits dl{columns:115px 2;column-gap:25px}
 .follow,.follow-links>div{gap:14px}
 .next-film{min-height:125px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .reveal-ready{opacity:1;transform:none}
}

 .arrival-cover{display:none;position:fixed;inset:0;z-index:8;place-items:center;background:#10100f url(assets/grain.png) center;color:var(--text);pointer-events:none}
.menu-arrival .arrival-cover{display:grid;animation:preloader-in .36s ease-out both}
.arrival-cover .hero-mark{opacity:.5}
.arrival-cover .signature{width:min(64vw,430px)}
.menu-arrival .arrival-cover.is-dissolving{animation:page-dissolve .46s ease both}
@keyframes page-dissolve{to{opacity:0}}
.credit-signature{width:min(100%,245px);margin:0 0 18px;line-height:0}
.credit-signature img{width:100%;height:auto;margin-left:-5.58%}
.credit-signature span{display:none}
@media(prefers-reduced-motion:reduce){
 .menu-arrival .arrival-cover{display:none}
 .credit-signature img{display:none}
 .credit-signature span{display:block;font:400 20px/1.3 var(--display)}
}

.client-grid a{display:grid;place-items:center;width:100%;height:100%}
.about-cover:not(:has(.about-portrait)){min-height:65svh}

.representatives-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:26px 34px;margin-top:18px}
.representative-card{min-width:0;border-top:1px solid var(--line);padding-top:20px;overflow-wrap:anywhere}
.representative-card:only-child{border:0;padding-top:0}
.representative-card:not(:only-child) h2{font-size:clamp(23px,2.2vw,32px);margin-bottom:12px}
.representative-card .rep-territory{color:var(--soft);margin:0 0 10px}
.representative-card .rep-person{margin:0;line-height:1.5}
.representative-card .rep-role{margin:3px 0 0;color:var(--soft);font-size:.92em}
.representative-card .rep-links{gap:10px 16px}
@media(max-width:650px){.representatives-grid{grid-template-columns:1fr;gap:26px}}

.film-page{max-width:1320px;margin-inline:auto;padding-top:calc(var(--header) + 32px)}
.film-page .section-head{margin-bottom:24px}
.film-page .project-player{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.film-page .film-section{margin-block:32px}
.film-page .project-chapter{margin-block:38px}
.film-page .project-chapter h2{margin-bottom:14px;font-size:clamp(20px,3vw,34px)}
.project-permalink{display:inline-block;margin-top:8px}

.player-start-hint{margin-top:10px;color:var(--soft);font:400 12px/1.45 var(--mono)}

.tile-play::before,.reel-play::before,#screen button:not(:disabled) span::before{
 content:"";display:inline-block;width:10px;height:12px;background:currentColor;
 clip-path:polygon(0 0,100% 50%,0 100%);vertical-align:-1px
}
.tile-play::before{transform:translateX(1px)}
.reel-play::before,#screen button:not(:disabled) span::before{margin-right:9px}

.scroll-mobile-outline{display:none}
@media (max-width: 760px) {
 .scroll-mobile-outline{display:block}
 .scroll-ring,.details-jump .scroll-ring{width:44px;height:44px;flex:none}
 .scroll-ring text{display:none}
 .scroll-ring .scroll-arrow{transform:scale(1.35);transform-origin:50% 50%}
}