@font-face{font-family:"Barlow";src:url("assets/fonts/Barlow-Medium.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
:root{color-scheme:light;--bg:#fff;--fg:#181818;--muted:#707070;--line:#dedede}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:"Barlow",Arial,sans-serif;font-weight:500;font-size:16px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:5px}.header{position:fixed;z-index:5;inset:0 0 auto;display:flex;justify-content:space-between;align-items:start;padding:10px 12px;pointer-events:none}.header>*{pointer-events:auto}.identity{font-size:14px;line-height:1.15;font-weight:500;letter-spacing:-.2px}.identity span{display:block;font-style:italic;letter-spacing:0}.contact-toggle{font-size:14px;padding:0 0 12px 20px}.contact-toggle:hover{text-decoration:none;text-underline-offset:3px}main{height:100dvh}.projects{display:flex;align-items:flex-end;gap:2px;height:100%;overflow-x:auto;overflow-y:hidden;padding:75px 0 9px;scrollbar-width:thin;scrollbar-color:#bdbdbd transparent;overscroll-behavior-x:contain}.projects:focus-visible{outline:none}.project{flex:0 0 auto;display:block;text-align:left;width:calc(var(--frame-height) * var(--aspect,1.67));max-width:88vw;position:relative}.frame{display:block;position:relative;height:var(--frame-height);max-height:calc(100dvh - 120px);overflow:hidden;background:#f2f2f2}.frame img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}.project:hover .frame img{opacity:.9}.play-label{position:absolute;bottom:14px;left:14px;color:#fff;font-size:14px;opacity:0;text-shadow:0 1px 6px #0008;transition:opacity .2s}.project:hover .play-label,.project:focus-visible .play-label{opacity:1}.caption{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding:9px 10px 0;font-size:14px;line-height:1.25;min-height:29px}.caption small{font-size:12px;color:var(--muted);text-align:right}.project:focus-visible{outline-offset:-2px}.project:last-child{margin-right:12px}dialog{border:none;padding:0;max-width:none;max-height:none;color:inherit}dialog::backdrop{background:transparent}dialog[open]{animation:enter .25s ease-out}.contact-dialog{position:fixed;inset:auto 0 0;width:100%;margin:0;background:#fff;color:#181818;padding:12px 12px 28px;box-shadow:0 -1px 0 #0000000a}.contact-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.contact-top h2{font-weight:500;font-size:14px;margin:0}.close{display:flex;align-items:center;gap:16px;min-height:28px;font-size:14px}.close span{font-size:21px;font-weight:300}.close:hover{text-decoration:none;text-underline-offset:3px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;max-width:940px}.bio{font-size:16px;line-height:1.3;margin:0;max-width:470px}.bio a{text-decoration:none;text-decoration-thickness:1px;text-underline-offset:3px}.bio em{font-style:italic}.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px;font-size:14px}.contact-links a:hover{text-decoration:none;text-underline-offset:3px}.email{font-size:16px}.contact-location{font-size:14px;color:var(--muted);margin-top:6px}.viewer{position:fixed;inset:0;margin:0;width:100%;height:100dvh;background:#fff;padding:12px;overflow:auto}.viewer-top{display:flex;justify-content:space-between;align-items:start;gap:24px;min-height:62px}.viewer-top h2{font-size:14px;font-weight:500;margin:0 0 6px}.viewer-top span{font-size:12px;color:var(--muted)}.viewer-top .close span{font-size:21px;color:inherit}#media{height:calc(100dvh - 170px);display:flex;justify-content:center;align-items:center;background:#fff}#media video,#media img{width:100%;height:100%;object-fit:contain;display:block}#media video{background:#000}.viewer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:10px;min-height:45px;font-size:14px;color:var(--muted)}#variants{display:flex;gap:25px}#variants button{min-height:32px}#variants button[aria-pressed=true]{color:var(--fg);text-decoration:none;text-underline-offset:4px}#media-status{margin:0;text-align:center;font-size:14px;color:var(--muted)}body.modal-open{overflow:hidden}#project-details{display:grid;grid-template-columns:1.4fr 1fr;gap:10vw;padding:24px 0 30px;border-top:1px solid var(--line);margin-top:15px}.project-description{font-size:18px;line-height:1.4;margin:0;max-width:750px}.project-note{font-size:16px;line-height:1.4;color:var(--muted);margin:18px 0 0;max-width:700px}#project-details dl{margin:0;font-size:14px;line-height:1.4}#project-details dt{color:var(--muted);margin-top:18px}#project-details dt:first-child{margin-top:0}#project-details dd{margin:4px 0 0}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.header{padding:12px}.projects{padding-top:85px;padding-bottom:18px;gap:3px;scroll-snap-type:x proximity}.project{width:88vw;max-width:none;scroll-snap-align:start}.frame{height:auto;aspect-ratio:4/3}.project:nth-child(2n) .frame{aspect-ratio:16/9}.caption{padding:10px 9px 0;font-size:14px;min-height:43px;align-items:start}.caption small{max-width:46%;font-size:12px}.play-label{opacity:1;font-size:12px;bottom:10px;left:10px}.contact-dialog{padding:12px 16px 28px;max-height:80dvh;overflow:auto}.contact-top{margin-bottom:22px}.contact-grid{grid-template-columns:1fr;gap:25px}.bio{font-size:18px;line-height:1.3}.contact-links{gap:17px}.contact-location{margin-top:0}.viewer{padding:12px}.viewer-top{min-height:70px}#media{height:calc(65dvh - 85px)}#project-details{grid-template-columns:1fr;gap:25px}.project-description{font-size:18px}.viewer-top h2{max-width:240px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.bio p{margin:0 0 18px}.bio p:last-child{margin-bottom:0}.contact-dialog{max-height:90dvh;overflow:auto}

#media.natural-ratio video{width:auto;height:auto;max-width:100%;max-height:100%;background:transparent}

#project-details{grid-template-columns:1fr;gap:0}#project-details>div{max-width:780px}

.frame,.project:nth-child(2n) .frame{height:auto;max-height:none;aspect-ratio:var(--aspect,1.67)}.frame img{object-fit:contain}

#media video{width:auto;height:auto;max-width:100%;max-height:100%;background:transparent;object-fit:contain}.project-format{font-size:14px;line-height:1.4;margin:18px 0;color:var(--muted)}

.festivals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px;margin-top:34px;max-width:1100px}.festivals a{display:flex;flex-direction:column;align-items:flex-start;font-size:14px;line-height:1.3;gap:12px}.festivals img{height:46px;width:105px;object-fit:contain;object-position:left center}.festivals .invert-logo{filter:brightness(0)}.festivals small{color:var(--muted);font-size:12px}.festivals a:hover span{text-decoration:none}@media(max-width:700px){.festivals{grid-template-columns:1fr 1fr;gap:28px}}

/* Wide film frames can fill the viewport without cropping their contents. */
@media(min-width:701px){.project{width:calc(min(var(--frame-height),calc(100dvh - 115px)) * var(--aspect,1.67));max-width:none}}
.projects{scrollbar-width:none;scroll-snap-type:none;cursor:grab}.projects::-webkit-scrollbar{display:none}.projects.dragging,.projects.dragging .project{cursor:grabbing}.projects.dragging{user-select:none}

@media(max-width:700px){.project{width:calc(88vw * var(--frame-height) / 84vh);min-width:52vw;max-width:94vw}}

/* Phone layout follows the reference's tall, bottom-aligned moving strip. */
@media(max-width:700px){
 .header{padding:9px 8px}.identity,.contact-toggle{font-size:14px}
 .projects{padding:65px 0 max(10px,env(safe-area-inset-bottom));gap:2px}
 .project{width:calc(var(--frame-height) * .72 * var(--aspect,1.67));min-width:0;max-width:none}
 .caption{font-size:12px;min-height:34px;padding:8px 8px 0}.caption small{font-size:11px}
 .contact-dialog{padding:10px 8px max(24px,env(safe-area-inset-bottom));max-height:86dvh}
 .contact-grid{gap:22px}.bio{font-size:14px;line-height:1.2;max-width:none}.bio p{margin-bottom:16px}
 .contact-links,.email{font-size:14px}.contact-top{margin-bottom:14px}
 .viewer-top .close{min-height:44px}.viewer{padding:8px}.viewer-top{min-height:60px}
 #media{height:min(60dvh,calc(100vw / 1.33));min-height:180px}
 #variants{gap:20px;flex-wrap:wrap}#variants button{min-height:44px}
 .project-description{font-size:16px}.project-note{font-size:14px}
}

/* Sombra Pictures */
:root{--bg:#d8d8d8;--fg:#202020;--muted:#5a5a5a;--line:#bcbcbc}
.contact-dialog,.viewer,#media{background:var(--bg)}.frame{background:transparent}.identity img{width:260px;height:auto;display:block;filter:none}.header{padding:18px 20px}.contact-toggle{padding-top:0}.landing{position:fixed;inset:0;z-index:20;background:#151515;color:#aaa}.landing video{width:100%;height:100%;object-fit:cover;display:block}.landing:after{content:"";position:absolute;inset:0;background:#0002;pointer-events:none}.landing-logo{position:absolute;z-index:1;top:25px;left:25px;width:min(42vw,520px);height:auto}.enter-site{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);border:0;border-radius:50%;color:#ddd;width:210px;height:51px;font-size:14px;transition:background .2s}.enter-site:hover{background:transparent}.landing-footer{position:absolute;z-index:2;bottom:20px;left:25px;right:25px;display:flex;justify-content:space-between;color:#ddd;font-size:14px}.landing[hidden]{display:none}#portfolio[inert]{visibility:hidden}.contact-dialog .bio{max-width:600px}.contact-grid{grid-template-columns:minmax(0,600px) 1fr;max-width:1100px}.bio{font-size:16px;line-height:1.35}@media(max-width:700px){.header{padding:12px 10px}.identity img{width:190px}.landing-logo{width:calc(100% - 32px);left:16px;top:20px}.landing-footer{left:16px;right:16px;bottom:max(20px,env(safe-area-inset-bottom));font-size:12px}.enter-site{width:180px;height:48px}.contact-grid{grid-template-columns:1fr}.bio{font-size:16px;line-height:1.3}.project{width:min(92vw,calc(var(--frame-height) * .72 * var(--aspect,1.67)))}.caption{font-size:14px}.caption small{font-size:12px}.play-label{display:none}}

/* Mobile is a single, naturally proportioned vertical portfolio. */
@media(max-width:700px){
 main{height:auto;min-height:100dvh}
 .header{background:var(--bg);align-items:center;min-height:62px}
 .projects{display:flex;flex-direction:column;align-items:stretch;gap:34px;height:auto;overflow:visible;padding:86px 12px max(32px,env(safe-area-inset-bottom));cursor:auto}
 .project{width:100%;min-width:0;max-width:none;flex:none}
 .project:last-child{margin-right:0}
 .project.loop-copy{display:none}
 .frame,.project:nth-child(2n) .frame{width:100%;height:auto;max-height:none;aspect-ratio:var(--aspect,1.67)}
 .caption{padding:10px 0 0;min-height:0;font-size:14px;gap:12px}
 .caption small{font-size:12px;max-width:48%}
 .play-label{display:none}
}

.identity img{width:129.5px}.landing-logo{width:min(45.5vw,546px)}
@media(max-width:700px){.identity img{width:101.5px}.landing-logo{width:calc(70% - 16.8px);left:12px}}

/* All interaction states change lettering only. */
.enter-site{border:0;background:none;color:#ddd}
.enter-site:hover,.enter-site:focus-visible,.enter-site:active{background:none;color:inherit;border:0;box-shadow:none}
a:focus-visible,button:focus-visible{outline:none}
a:hover,button:hover,a:focus-visible,button:focus-visible{box-shadow:none;text-decoration:none}

.identity img{width:287px}@media(max-width:700px){.identity img{width:225px}}

.contact-toggle:hover,.close:hover,.contact-links a:hover,#variants button[aria-pressed=true]{text-decoration:none;background:transparent;box-shadow:none}

/* Black wordmarks on the landing and portfolio pages. */
.landing-logo,.identity img{filter:brightness(0);opacity:1}
.identity:hover img,.identity:focus-visible img,.identity:active img{opacity:1}

/* Keep the wordmark anchored through the entrance transition. */
.landing-logo{width:287px;top:18px;left:20px}
.enter-site:hover,.enter-site:focus-visible,.enter-site:active{color:#ddd}
@media(max-width:700px){.landing-logo{width:225px;top:12px;left:10px}}

/* Preserve the signature entrance oval without color effects. */
.enter-site,.enter-site:hover,.enter-site:focus-visible,.enter-site:active{border:1px solid #ddd;border-radius:50%;background:transparent;color:#ddd;box-shadow:none}

@media(min-width:701px){.landing-logo,.identity img{width:200.9px}}

/* Keep the original green entrance outline; other interactions stay neutral. */
.enter-site,.enter-site:hover,.enter-site:focus-visible,.enter-site:active{border-color:#b0dc98}

/* Match the reduced header logo size on both screens. */
.landing-logo,.identity img{width:294.43182769px}
@media(max-width:700px){.landing-logo,.identity img{width:253.655325px}}

@media(min-width:701px){.project[aria-label^="Watch Santiago del Palacio"]{min-width:280px}.project[aria-label^="Watch Santiago del Palacio"] .caption{white-space:nowrap}}

/* Reserve room for Contact on narrower screens. */
.landing-logo,.identity img{max-width:calc(70vw - 73.5px)}

/* A24 sits within the film image, centered over the hallway. */
.project-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.frame .project-brand img{width:26.6112%;height:auto;object-fit:contain;opacity:1;filter:none}
.project:hover .project-brand img{opacity:1}



@media(max-width:700px){.frame .project-brand{display:flex;position:absolute;inset:0;z-index:1}.frame .project-brand img{display:block;width:26.6112%;height:auto}}

/* Desktop project index, matching the existing contact panel. */
.header-nav{display:flex;align-items:flex-start;gap:24px;pointer-events:auto}
.header-nav .contact-toggle{padding-left:0}
.archive-toggle{font-size:14px;padding:0 0 12px}
.archive-toggle:hover{text-decoration:none}
.archive-dialog{background:var(--bg);max-height:80dvh;overflow:auto}
.archive-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.archive-item{display:flex;justify-content:space-between;gap:24px;align-items:baseline;text-align:left;padding:12px 0;border-top:1px solid var(--line);line-height:1.4}
.archive-item small{font-size:14px;color:var(--muted);text-align:right}
.archive-item:hover>span{text-decoration:none}
@media(max-width:700px){.archive-toggle{display:none}.header-nav{gap:0}}

/* Keep all navigation and links free of underlines in every state. */
a,button,a:hover,button:hover,a:focus,button:focus,a:active,button:active{text-decoration:none}

#project-details{grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.project-signature{display:block;width:144px;height:auto;align-self:end;justify-self:end;filter:brightness(0)}
@media(max-width:700px){#project-details{grid-template-columns:1fr;gap:24px}.project-signature{width:115.2px}}

.project-home{display:block;align-self:end;justify-self:end}

.project-player{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px}
.project-player #media{min-width:0}
.project-prev,.project-next{font-size:28px;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;align-self:center}
@media(max-width:700px){.project-player{grid-template-columns:32px minmax(0,1fr) 32px;gap:0}.project-prev,.project-next{min-width:32px;min-height:44px;font-size:24px}}

/* Long, straight project arrows matching the supplied reference. */
.project-player{grid-template-columns:80px minmax(0,1fr) 80px}
.project-prev svg,.project-next svg{display:block;width:35.28px;height:9.8px}
@media(max-width:700px){.project-player{grid-template-columns:44px minmax(0,1fr) 44px}.project-prev svg,.project-next svg{width:19.6px;height:7.84px}}

#contact,#archive{background:#87f381;color:#000;--muted:#000;--line:rgba(0,0,0,.25)}
#contact .contact-location,#archive .archive-item small{color:#000}

.enter-site,.enter-site:hover,.enter-site:focus-visible,.enter-site:active{color:#b0dc98}

@media(max-width:700px){.project-home{justify-self:center}.project-signature{justify-self:center}}

/* Match the landing footer text while retaining the green entrance. */
.landing-logo{filter:brightness(0) invert(86.6667%)}

/* Center the mobile wordmark and Contact on the same header axis. */
@media(max-width:700px){.header,.header-nav{align-items:center}.header-nav .contact-toggle{padding:0;min-height:38px;display:flex;align-items:center}.header .identity{display:flex;align-items:center}}

/* Give the STAUD caption room to stay on one line in the desktop gallery. */
@media(min-width:701px){.project[aria-label^="Watch STAUD,"]{min-width:300px}.project[aria-label^="Watch STAUD,"] .caption{white-space:nowrap}}