:root{--paper:#f3f0e9;--ink:#282922;--muted:#79796e;--line:#d8d5ca}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);margin:0;padding:0 4.1%;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,video:focus-visible{outline:2px solid #8a7455;outline-offset:5px}::selection{background:#d4cab8}[hidden]{display:none!important}.header{display:flex;align-items:center;justify-content:space-between;padding:42px 0 37px;border-bottom:1px solid var(--line);gap:30px}.identity h1{font-family:'Bodoni MT',Didot,'Times New Roman',serif;font-size:35px;letter-spacing:-1.25px;font-weight:400;line-height:1.05;margin:0 0 11px}.identity>span{font-size:10px;letter-spacing:1px}.contact-nav{font-size:11px;padding:9px 0;white-space:nowrap}.contact-nav span{margin-left:24px;font-size:17px}.contact-nav:hover,footer a:hover{color:#8a7455}main{padding:37px 0 69px}.collection-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;color:var(--muted);font-size:9px;letter-spacing:1.2px}.collection-label h2{margin:0;font:inherit}.collection-label>span{font-size:8px;letter-spacing:1px}.film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:49px 25px}.film{min-width:0}.media{position:relative;aspect-ratio:4/3;background:#181914;overflow:hidden}.poster{display:block;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:transparent;position:absolute;inset:0}.poster>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease,filter .5s ease;filter:brightness(.94)}.poster:hover>img{transform:scale(1.025);filter:brightness(1)}.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:49px;height:49px;border:1px solid #ffffffe0;display:grid;place-items:center;border-radius:50%;background:#00000012;backdrop-filter:blur(3px);transition:background .3s}.play svg{fill:#fff;width:20px;margin-left:2px}.poster:hover .play{background:#ffffff25}.media video{width:100%;height:100%;object-fit:contain;display:block;background:#11120f}.loading{position:absolute;left:14px;top:13px;color:#fff;background:#111b;font-size:10px;padding:7px 10px;pointer-events:none}.caption{padding-top:16px}.caption h3{font-size:13px;font-weight:400;line-height:1.55;margin:0 0 6px;overflow-wrap:anywhere;letter-spacing:.05px}.caption p{font-size:9px;color:var(--muted);line-height:1.6;margin:0;letter-spacing:.15px}.separator{padding:0 6px;color:#ada99b}.error{font-size:11px;color:#825b3b;line-height:1.6}.retry{border:0;background:transparent;text-decoration:underline;cursor:pointer;color:inherit;font-size:inherit;padding:0}footer{border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:25px;padding:30px 0 34px}footer .footer-name{font-family:'Times New Roman',serif;font-size:17px;letter-spacing:-.4px}footer a{font-size:10px}footer a>span{margin-left:12px}.copyright{color:var(--muted);font-size:9px;white-space:nowrap}.skip{position:absolute;top:-100px;left:20px;z-index:20;background:var(--paper);padding:16px}.skip:focus{top:12px}@media(min-width:1800px){body{max-width:1900px;margin:auto;padding-left:65px;padding-right:65px}.header{padding-top:55px}.film-grid{gap:55px 32px}.caption h3{font-size:15px}.caption p{font-size:10px}}@media(max-width:950px){.film-grid{gap:38px 18px}.identity h1{font-size:31px}.caption h3{font-size:12px}.caption p{font-size:9px}.play{width:43px;height:43px}.header{padding-top:34px}}@media(max-width:700px){body{padding:0 23px}.header{padding:30px 0 27px;gap:16px}.identity h1{font-size:27px;letter-spacing:-.9px;margin-bottom:9px}.identity>span{font-size:8px;letter-spacing:.65px}.contact-nav{font-size:10px}.contact-nav span{margin-left:8px;font-size:14px}main{padding:26px 0 44px}.collection-label{margin-bottom:18px;font-size:8px}.film-grid{grid-template-columns:1fr;gap:32px}.caption{padding-top:13px}.caption h3{font-size:13px;margin-bottom:5px}.caption p{font-size:10px}.play{width:50px;height:50px}footer{padding:25px 0;flex-wrap:wrap;gap:16px 15px}.footer-name{flex-basis:100%}footer a{font-size:10px}.copyright{margin-left:auto}}@media(max-width:360px){body{padding:0 17px}.identity h1{font-size:24px}.contact-nav{font-size:9px}.contact-nav span{margin-left:4px}.identity>span{font-size:7px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Contact */
.identity .brand-name{display:block;font-family:'Bodoni MT',Didot,'Times New Roman',serif;font-size:35px;letter-spacing:-1.25px;line-height:1.05;margin:0 0 11px}.header nav{display:flex;gap:32px;align-items:center}.current{color:var(--muted)}.contact-page{min-height:100dvh;display:flex;flex-direction:column}.contact-content{flex:1;padding:95px 0 115px}.contact-kicker{font-size:10px;letter-spacing:1px;color:var(--muted);margin:0 0 30px}.contact-content h1{font-family:'Bodoni MT',Didot,'Times New Roman',serif;font-size:clamp(85px,10vw,155px);font-weight:400;letter-spacing:-5px;line-height:1;margin:0 0 42px}.contact-content h1>span{color:#9f9780}.contact-email{display:inline-block;font-family:'Times New Roman',serif;font-size:clamp(23px,3.4vw,50px);letter-spacing:-.9px;line-height:1.35;padding-bottom:15px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;max-width:100%}.contact-email>span{font-family:Arial,sans-serif;font-size:.65em;margin-left:20px;display:inline-block}.contact-email:hover{color:#8a7455}.contact-details{display:flex;gap:110px;margin-top:65px}.detail-label{display:block;color:var(--muted);font-size:9px;letter-spacing:.8px;margin-bottom:13px}.contact-details p,.contact-details a{font-size:12px;margin:0;line-height:1.5}.contact-details a>span{font-size:11px;margin-left:17px}.contact-details a:hover{color:#8a7455}@media(max-width:950px){.identity .brand-name{font-size:31px}}@media(max-width:700px){.identity .brand-name{font-size:27px;letter-spacing:-.9px;margin-bottom:9px}.header nav{gap:17px}.header nav .contact-nav>span{display:none}.contact-content{padding:75px 0 90px}.contact-content h1{font-size:93px;letter-spacing:-3.5px;margin-bottom:34px}.contact-email{font-size:23px;letter-spacing:-.6px}.contact-email>span{margin-left:8px}.contact-details{gap:70px;margin-top:50px}.contact-kicker{font-size:9px;margin-bottom:25px}}@media(max-width:360px){.identity .brand-name{font-size:24px}.header nav{gap:11px}.contact-email{font-size:21px}}

/* Preserve each film’s original composition in the overview and player. */
.film-grid{align-items:start}.film[data-film="afternoon"] .media,.film[data-film="yona"] .media,.film[data-film="timlalin"] .media,.film[data-film="bad-habitz"] .media{aspect-ratio:9/16}.poster>img{object-fit:contain}.poster:hover>img{transform:none}

/* Film titles appear on the image, like the supplied reference. */
.film-grid{grid-auto-flow:row dense}.film[data-layout="wide"]{grid-column:span 2}
.media .caption{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background:rgba(0,0,0,.33);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:2}
.media .caption h3{font-size:14px;font-weight:600;text-transform:uppercase;line-height:1.5;margin:0 0 11px;letter-spacing:.2px;max-width:440px;text-wrap:balance}
.media .caption p{font-size:12px;color:#fff;line-height:1.6;letter-spacing:0;margin:0;max-width:440px}.media .caption .separator{color:#ffffffa0}
.film:not(.is-active):hover .caption,.film:not(.is-active):focus-within .caption{opacity:1}
.film:not(.is-active):hover .play,.film:not(.is-active):focus-within .play{opacity:0}
.film.is-active .caption{opacity:0!important}
@media(max-width:700px){.film[data-layout="wide"]{grid-column:auto}}
@media(hover:none),(pointer:coarse){.film:not(.is-active) .caption{opacity:1;justify-content:flex-end;padding:70px 20px 22px;background:linear-gradient(transparent 45%,rgba(0,0,0,.68))}.media .caption h3{font-size:12px;margin-bottom:7px}.media .caption p{font-size:10px}.film:not(.is-active) .play{opacity:1}}

/* Deliberate rows: three portrait films, two larger landscape films, then Timlalin. */
.film-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;align-items:start}
.film{grid-column:span 2}
.film[data-layout="wide"]{grid-column:span 3}
.film[data-film="timlalin"]{grid-column:3/span 2}
@media(max-width:700px){.film-grid{grid-template-columns:1fr}.film,.film[data-layout="wide"],.film[data-film="timlalin"]{grid-column:auto}}

/* Keep the model visible when using the supplied portrait cover for a 4:3 film. */
.film[data-film="summer"] .poster>img{object-fit:cover;object-position:center bottom}

/* Two centred portrait films complete the final row; Timlalin remains last. */
.film[data-film="gracy"] .media{aspect-ratio:9/16}.film[data-film="gracy"]{grid-column:2/span 2}.film[data-film="timlalin"]{grid-column:4/span 2}
@media(max-width:700px){.film[data-film="gracy"],.film[data-film="timlalin"]{grid-column:auto}}

/* Fill the 9:16 tile despite the supplied cover’s slightly wider aspect ratio. */
.film[data-film="gracy"] .poster>img{object-fit:cover;object-position:center}

/* Profile */
.about-page{min-height:100dvh;display:flex;flex-direction:column}
.about-content{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,85px);padding:85px 3% 100px;align-items:start}
.about-portrait{margin:0}.about-portrait img{display:block;width:100%;height:auto}
.about-copy{max-width:530px;padding-top:3px}.about-copy h1,.about-copy h2{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;font-weight:400;margin:0 0 22px}.about-copy p{font-size:14px;line-height:1.95;margin:0 0 23px;text-wrap:pretty}.about-copy p:last-child{margin-bottom:0}.about-copy a{font-size:13px;line-height:1.7;overflow-wrap:anywhere}.about-copy a span{margin-left:12px;color:var(--muted)}.about-copy a:hover{color:#8a7455}.about-contact{margin-top:36px}.about-social{margin-top:28px}.about-contact h2,.about-social h2{margin-bottom:12px}
@media(max-width:950px){.about-content{padding:65px 0 85px;gap:35px}.about-copy p{font-size:13px}}
@media(max-width:700px){.about-content{grid-template-columns:1fr;gap:36px;padding:38px 0 65px}.about-copy{padding-top:0;max-width:none}.about-copy p{font-size:13px;line-height:1.9}.about-contact{margin-top:32px}.header{flex-wrap:wrap}.header nav{gap:22px}.header .identity{flex-shrink:0}}


/* Name and navigation share one baseline; the role occupies a quiet second row. */
.header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:26px;row-gap:11px}
.header .identity{min-width:0;display:block}
.header .identity h1,.header .identity .brand-name{margin:0;font-size:35px;line-height:1.1;font-weight:400;letter-spacing:-1.1px;white-space:nowrap}
.header nav{display:flex;align-items:baseline;gap:26px;padding:0;margin-right:24px}
.header nav .contact-nav{display:block;font-size:14px;line-height:1.1;padding:8px 0;letter-spacing:.2px}
.header-role{grid-column:1/-1;margin:0;font-size:10px;letter-spacing:1px;line-height:1.4}
@media(max-width:950px){.header .identity h1,.header .identity .brand-name{font-size:31px}}
@media(max-width:700px){
 .header{padding:28px 0 25px;column-gap:18px;row-gap:12px}
 .header .identity h1,.header .identity .brand-name{font-size:clamp(20px,6vw,26px);letter-spacing:-.65px;line-height:1.1}
 .header nav{gap:18px;margin-right:12px;align-items:baseline}
 .header nav .contact-nav{font-size:13px;line-height:1.1;padding:8px 0}
 .header-role{font-size:8px;letter-spacing:.65px}
}
@media(max-width:360px){.header{column-gap:12px}.header nav{gap:13px;margin-right:4px}.header nav .contact-nav{font-size:12px}}