:root{--bg:#1b1c1d;--fg:#fff;--muted:rgba(255,255,255,.62);--gap:clamp(12px,1.6vw,24px);--pad:clamp(16px,5vw,83px)}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{font-family:Cormorant,Georgia,serif;font-size:18px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header{display:grid;justify-items:center;gap:6px;padding:clamp(28px,5vw,56px) var(--pad) clamp(24px,4vw,44px);position:relative}
.brand{font-size:clamp(22px,2.4vw,30px);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-weight:500}
.tagline{font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.78);padding-left:.35em}
.site-header nav{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%)}
.site-header nav a{font-family:"Barlow Condensed",sans-serif;font-size:17px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.9);padding:8px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.site-header nav a:hover,.site-header nav a[aria-current]{border-color:currentColor}
@media (max-width:640px){.site-header nav{position:static;transform:none;margin-top:10px}}
.intro img{width:100%;max-height:88vh;object-fit:cover}
.work{padding:clamp(40px,6vw,80px) var(--pad) 0}
.grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
.tile{all:unset;cursor:zoom-in;display:block;aspect-ratio:2/3;overflow:hidden;background:#111;width:100%}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s}
.tile:hover img{transform:scale(1.03)}
.tile:focus-visible{outline:2px solid #fff;outline-offset:3px}
.videos{padding:clamp(40px,6vw,80px) var(--pad);display:grid;gap:clamp(24px,4vw,48px)}
.video{position:relative;aspect-ratio:16/9;background:#000;width:100%}
.video iframe,.video video,.video .play{position:absolute;inset:0;width:100%;height:100%;border:0}
.video video{object-fit:contain}
.play{all:unset;position:absolute;inset:0;cursor:pointer}
.play img{width:100%;height:100%;object-fit:cover}
.play-icon{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(0,0,0,.55);transition:background .2s}
.play-icon::after{content:"";position:absolute;left:34px;top:26px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff}
.play:hover .play-icon,.play:focus-visible .play-icon{background:rgba(0,0,0,.8)}
.contact{display:grid;place-content:center;text-align:center;gap:16px;padding:12vh var(--pad)}
.contact h1{font-family:"Barlow Condensed",sans-serif;font-weight:400;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.contact a{font-size:clamp(24px,3vw,36px);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.contact a:hover{border-color:#fff}
.site-footer{padding:32px var(--pad);text-align:center;font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lightbox{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:rgba(10,10,10,.96);color:#fff}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:rgba(0,0,0,.9)}
.lightbox img{max-width:min(92vw,1400px);max-height:90vh;object-fit:contain}
.lightbox button{all:unset;cursor:pointer;position:absolute;font-size:44px;line-height:1;padding:12px 18px;color:rgba(255,255,255,.8)}
.lightbox button:hover,.lightbox button:focus-visible{color:#fff}
.lightbox .close{top:8px;right:12px}
.lightbox .prev{left:8px;top:50%;transform:translateY(-50%)}
.lightbox .next{right:8px;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
