@font-face{font-family:Muli;src:url('assets/muli-light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:Muli;src:url('assets/muli-regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--inset:clamp(22px,3.3vw,42px);--ink:#202020;--categories-height:38svh}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:#f4f4f4;font-family:Muli,Arial,sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.hero{position:relative;height:26svh;overflow:hidden;background:#fff;color:var(--ink)}
.hero-image,.hero-shade{display:none}
.hero header{position:absolute;top:25px;left:var(--inset);right:var(--inset);display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:1}
.hero header:after{content:'';position:absolute;left:0;right:0;bottom:-17px;height:1px;background:var(--ink);opacity:.7}
.social-links,nav{display:flex;align-items:center;gap:26px;font-size:9px;letter-spacing:.17em;line-height:1.6}
nav{gap:32px}
nav a:hover{opacity:.6}
.hero-title{position:absolute;left:var(--inset);right:var(--inset);top:76px;bottom:24px;display:flex;flex-direction:column;justify-content:center;text-align:left}
.hero-title h1{font-size:clamp(26px,min(3.6vw,4.2svh),46px);font-weight:300;letter-spacing:.12em;line-height:1.12;margin:0}
.hero-title h1 span{display:block}
.hero-title p{font-size:8px;letter-spacing:.25em;line-height:1.7;margin:14px 0 0}
.hero-title p:before{content:'';display:block;width:34px;height:1px;margin-bottom:10px;background:var(--ink);opacity:.75}
.categories{height:var(--categories-height);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.category{position:relative;display:block;height:100%;overflow:hidden}
.category>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.shade{position:absolute;inset:0;background:linear-gradient(0deg,#0006,transparent 43%);pointer-events:none}
.category-copy{position:absolute;left:var(--inset);right:18px;bottom:22px}
.category-copy h2,.stills-section>h2{font-size:15px;letter-spacing:.1em;font-weight:300;line-height:1.5;margin:0}
/* Crop only the letterbox in presentation; the original Adidas file stays intact. */
.commercial-photo{position:absolute;inset:0;overflow:hidden}
.commercial-photo img{position:absolute;left:50%;top:50%;width:max(100%,calc(var(--categories-height) * 16 / 9));height:auto;transform:translate(-50%,-50%)}
.stills-section{position:relative;width:100%;height:36svh;margin:0;padding:0;overflow:hidden}
.stills-opening{height:100%;margin:0}
.stills-opening img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:saturate(1.15)}
.stills-section>h2{position:absolute;left:var(--inset);bottom:22px;z-index:1;text-shadow:0 1px 10px #0008}
.category-work{padding:60px var(--inset) 70px;max-width:1080px;margin:auto;scroll-margin-top:20px}
.category-work>h2{font-size:18px;font-weight:300;letter-spacing:.12em;margin:0 0 32px}
.project-row{margin:0 0 22px}
.project-cover{display:block;position:relative}
.cover-stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cover-frame{display:block;overflow:hidden}
.cover-frame img{display:block;width:100%;height:auto}
.project-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#0009;opacity:0;transition:opacity .2s}
.project-cover:hover .project-overlay,.project-cover:focus-visible .project-overlay{opacity:1}
.project-overlay h2{font-size:22px;font-weight:300;letter-spacing:.065em;text-align:center;margin:0}
.project-director{font-size:12px;letter-spacing:.04em;margin:0}
.frame-without-bars{position:relative;aspect-ratio:16/9}
.frame-without-bars img{position:absolute;width:100%;height:100%;object-fit:cover}
.frame-fantasmi{position:relative;aspect-ratio:3840/1608}
.frame-fantasmi img{position:absolute;top:0;left:0;width:100%;height:auto;transform:translateY(-12.824074074%)}
a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.category:focus-visible{outline:2px solid white;outline-offset:-5px}
@media(max-width:900px){.social-links{gap:20px}nav{gap:24px}.category-copy h2,.stills-section>h2{font-size:14px}}
@media(max-width:600px){
.hero header{top:19px;gap:14px}.hero header:after{bottom:-12px}.social-links{gap:13px;font-size:7px;letter-spacing:.1em}nav{gap:18px;font-size:7px;letter-spacing:.13em}
.hero-title{top:61px;bottom:16px}.hero-title h1{font-size:clamp(21px,min(6.5vw,3.8svh),32px);letter-spacing:.09em}.hero-title p{font-size:6px;letter-spacing:.18em;margin-top:10px}.hero-title p:before{width:26px;margin-bottom:7px}
.category-copy{left:13px;right:8px;bottom:14px}.category-copy h2{font-size:11px;letter-spacing:.055em}.stills-section>h2{bottom:14px;font-size:12px}
.category-work{padding:36px 18px 44px}.cover-stills{gap:6px}.project-overlay h2{font-size:15px}.project-director{font-size:10px}
}
@media(max-height:700px) and (min-width:601px){.hero header{top:18px}.hero header:after{bottom:-12px}.hero-title{top:60px;bottom:12px}.hero-title h1{font-size:clamp(18px,3.8svh,26px)}.hero-title p{font-size:7px;margin-top:8px}.hero-title p:before{margin-bottom:6px;width:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.music-photo{position:absolute;inset:0;overflow:hidden}.music-photo img{position:absolute;left:50%;top:50%;width:max(100%,calc(var(--categories-height) * 3584 / 1934));height:auto;transform:translate(-50%,-50%)}



/* White project browsing, consistent with the identity panel. */
body{background:#fff;color:#202020}
.category,.stills-section{color:#f4f4f4}
.music-photo img{filter:none}
.category-work{background:#fff;color:#202020;max-width:1060px;padding-top:40px;padding-bottom:54px}
.category-work>h2{font-size:15px;margin:0 0 14px;letter-spacing:.1em;padding-bottom:16px;border-bottom:1px solid #aaa}
.film-selection{text-align:right;margin:0 0 18px}
.film-selection select{font:300 11px Muli,Arial,sans-serif;letter-spacing:.025em;color:#202020;background:#fff;border:0;border-bottom:1px solid #999;border-radius:0;padding:7px 22px 7px 2px;max-width:100%}
.featured-film{position:relative;width:100%;aspect-ratio:var(--film-aspect,16/9);background:#fff}
.featured-film iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
.film-poster img{display:block;width:100%;height:auto}
.featured-caption{display:flex;align-items:start;justify-content:space-between;gap:20px;margin:16px 0 24px;font-size:11px;line-height:1.7}
.film-title{font-size:13px;letter-spacing:.06em}
.featured-caption p{font-size:10px;letter-spacing:.025em;margin:3px 0 0;color:#777}
.vimeo-link{font-size:10px;color:#777;text-decoration:underline;text-underline-offset:3px}
.other-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.other-work{display:block;position:relative;align-self:start;border:0;border-radius:0;background:#fff;padding:0;color:#202020;font:300 13px Muli,Arial,sans-serif;cursor:pointer;overflow:hidden}
.other-work-image{display:block;position:relative;overflow:hidden}
.other-work-image img{display:block;width:100%;height:auto}
.other-work-image.frame-without-bars{aspect-ratio:16/9}
.other-work-image.frame-without-bars img{height:100%;position:absolute;inset:0;object-fit:cover}
.other-work-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:15px;background:#ffffffee;opacity:0;transition:opacity .2s;font-size:13px;letter-spacing:.055em;text-align:center}
.other-work-overlay small{font-size:10px;letter-spacing:.025em}
.other-work:hover .other-work-overlay,.other-work:focus-visible .other-work-overlay{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.project-overlay{background:#ffffffed;color:#202020}
.category-page{margin-bottom:0}
@media(max-width:600px){.category-work{padding-top:26px;padding-bottom:34px}.other-work-grid{gap:7px}.other-work-overlay{font-size:10px;padding:7px}.other-work-overlay small{font-size:8px}.featured-caption{margin-bottom:18px}.film-title{font-size:11px}}
.category-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.category-toolbar .film-selection{margin:0}.return-home{border:0;border-bottom:1px solid #aaa;padding:5px 0;background:#fff;color:#777;font:300 10px Muli,Arial,sans-serif;letter-spacing:.03em;cursor:pointer}.return-home:hover{color:#202020;border-color:#202020}

.return-name{font:300 12px Muli,Arial,sans-serif;letter-spacing:.1em;color:#202020;line-height:1.6}.return-name:hover{opacity:.6}.hero-title h1 a{display:block}.category-work,.category-page{background:#fff;color:#202020}

.music-photo{background:#000;inset:-1px}.music-photo img{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none}

/* A contained home preview, with the same white margins as the project pages. */
body>main{width:calc(100% - 2 * var(--inset));max-width:1060px;margin:0 auto 42px}
:root{--categories-height:clamp(260px,32vw,340px)}
.hero{height:220px}
.hero header{left:0;right:0}
.hero-title{left:0;right:0}
.hero-title h1{font-size:32px}
.stills-section{height:auto;aspect-ratio:2/1}
.commercial-photo,.music-photo{inset:-1px;background:#000}
.commercial-photo img{width:max(100%,calc(var(--categories-height) * 16 / 9 + 2px))}
@media(max-width:600px){
:root{--categories-height:240px}
.hero{height:190px}
.hero-title h1{font-size:26px}
.stills-section{aspect-ratio:3/2}
}

/* Give the moving-image work the leading place on the home page. */
:root{--categories-height:clamp(350px,40vw,450px)}
.stills-section{height:clamp(180px,21vw,230px);aspect-ratio:auto}
@media(max-width:600px){:root{--categories-height:310px}.stills-section{height:160px}}

.stills-section{height:clamp(260px,30vw,340px)}
@media(max-width:600px){.stills-section{height:220px}}

/* Refine the previous home proportions. */
:root{--categories-height:clamp(340px,39vw,440px)}
.hero-title p{font-size:9.5px;letter-spacing:.22em}
.categories{background:#000;gap:0}
.category:not(:last-child){width:calc(100% + 1px)}
.narrative>img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none}
@media(max-width:600px){:root{--categories-height:300px}.hero-title p{font-size:8px}}