:root{--focus:#f2f1ed}
html{scroll-padding-top:82px}
body{overflow-wrap:break-word}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus,#f2f1ed)!important;outline-offset:4px}

.recognition{border-top:1px solid var(--line,#292927)}
.recognition-grid{display:grid;grid-template-columns:minmax(190px,1fr) 3fr;gap:clamp(25px,5vw,80px)}
.recognition h2{margin:0;font-size:clamp(2.3rem,5vw,5.4rem);font-weight:500;line-height:.92;letter-spacing:-.015em}
.recognition-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line,#292927)}
.recognition-list li{border-bottom:1px solid var(--line,#292927);padding:18px 0;color:var(--soft,#bbb9b1)}
.recognition-list a{display:flex;justify-content:space-between;gap:20px}
.recognition-list a:hover,.recognition-list a:focus-visible{color:var(--fg,#f2f1ed)}
.external-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.media,.portrait,.photo-grid figure,.video-facade,.project-media{background:#181818}
img{background:#181818}
img.image-pending{opacity:0}
img.image-loaded{opacity:1;transition:opacity .32s ease}
.video-facade{position:relative;width:100%;aspect-ratio:16/9;border:0;padding:0;overflow:hidden;background:#181818;color:#fff;cursor:pointer;display:grid;place-items:center}
.video-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}
.video-facade::after{content:"Play";position:relative;z-index:1;border:1px solid rgba(255,255,255,.8);background:rgba(0,0,0,.72);padding:12px 19px;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem}
.video-facade:hover img,.video-facade:focus-visible img{opacity:.58}
.video-wrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#111}
.project-nav{position:sticky!important;bottom:0!important;z-index:25!important;background:rgba(9,9,9,.94)!important;backdrop-filter:blur(14px);padding:16px 0!important;margin-top:70px!important}
.privacy-link{color:var(--dim,#777570);text-decoration:underline;text-underline-offset:3px}
.privacy-copy{max-width:70ch;color:var(--soft,#bbb9b1);font-size:.9rem;line-height:1.6}
iframe.video,iframe.hero{display:block;width:min(100%,1000px)!important;height:auto;aspect-ratio:16/9}
@media(max-width:1500px) and (min-width:761px){
  .about-grid{grid-template-columns:minmax(0,1.65fr) minmax(280px,.72fr)!important;column-gap:clamp(36px,5vw,76px)!important;row-gap:clamp(28px,3vw,44px)!important}
  .about-grid h2{grid-column:1!important;grid-row:1!important;white-space:normal;word-break:normal;overflow-wrap:normal;font-size:clamp(3.7rem,6.2vw,6.2rem)!important}
  .about-grid .bio{grid-column:1!important;grid-row:2!important;max-width:68ch}
  .about-grid>div:last-child{grid-column:2!important;grid-row:1/3!important;align-self:start}
  .recognition-grid{grid-template-columns:minmax(300px,.85fr) 2.15fr}
  .recognition h2{white-space:normal;word-break:normal;overflow-wrap:normal;font-size:clamp(2.8rem,4.4vw,4.6rem)}
  main>section{padding-top:clamp(58px,6vw,88px);padding-bottom:clamp(58px,6vw,88px)}
  .intro{padding-top:clamp(58px,6vw,88px);padding-bottom:clamp(44px,5vw,70px)}
}
@media(max-width:1200px){
  .nav{display:none!important}
  .menu{display:block!important}
  .nav.open{position:absolute;display:flex!important;flex-direction:column;top:57px;left:0;right:0;background:#090909;padding:25px var(--pad) 32px;border-bottom:1px solid var(--line);font-size:1rem}
}
@media(max-width:1199px) and (min-width:761px){#film-grid.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.recognition-grid{grid-template-columns:1fr}.recognition-list a{display:block}.intro{padding-bottom:32px}.intro p{margin-top:32px}.tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px!important;overflow:visible!important}.tabs button{white-space:normal!important;min-height:48px;text-align:left}.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.card .label{opacity:1!important;transform:none!important;background:linear-gradient(transparent 40%,rgba(0,0,0,.9))!important}.card .label strong{font-size:clamp(.88rem,4vw,1.1rem)!important}.project-nav{font-size:.68rem!important}.top-project-nav+main h1,body>main>h1{font-size:clamp(2rem,10vw,2.75rem)!important;white-space:normal!important;overflow-wrap:break-word;max-width:16ch}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.video-facade img{transition:none!important}}

/* Keep About consistent across desktop widths. */
@media(min-width:761px){
 #about .about-grid{grid-template-columns:minmax(0,1.65fr) minmax(260px,.72fr)!important;column-gap:clamp(36px,5vw,76px)!important;row-gap:32px!important}
 #about .about-grid h2{grid-column:1!important;grid-row:1!important;font-size:clamp(3.5rem,5.5vw,6rem)!important;line-height:1.05;white-space:nowrap;overflow-wrap:normal;word-break:normal}
 #about .about-grid .bio{grid-column:1!important;grid-row:2!important;max-width:68ch}
 #about .about-grid>div:last-child{grid-column:2!important;grid-row:1/3!important;align-self:start}
}
#about .bio p .siamese-link{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#about .bio p .siamese-link::after{display:none}
#about .bio p .siamese-link:hover{text-decoration:underline;text-underline-offset:4px}

/* Keep the About copy and portrait connected on wide desktop displays. */
@media(min-width:1201px){
 #about .about-grid{width:min(100%,1240px);margin-left:0;margin-right:0;grid-template-columns:minmax(0,760px) minmax(320px,400px)!important;column-gap:clamp(48px,4vw,60px)!important}
 #about .about-grid .bio{max-width:none!important}
}

/* Fit the complete section labels on a single line. */
#film-editing h1,.section-head h2,#script h2{white-space:nowrap!important;max-width:none;font-size:clamp(2rem,6vw,6.3rem)!important;line-height:1.05}
@media(max-width:760px){#film-editing h1,.section-head h2,#script h2{font-size:clamp(1.5rem,8vw,3.45rem)!important}}

/* Shared project overlays, using the feature-editing treatment. */
@media(min-width:761px){
 .card .label{padding:clamp(15px,2vw,28px);padding-bottom:clamp(30px,3.5vw,58px);background:linear-gradient(transparent 20%,rgba(0,0,0,.88));opacity:0;transform:translateY(34px);transition:opacity .4s,transform .55s;justify-content:flex-end}
 .card .label strong{font-size:clamp(1.25rem,2vw,2.2rem);font-weight:500;line-height:1.12;letter-spacing:-.01em;overflow-wrap:normal}
 .card .label span{display:block;color:var(--soft);font-size:.75rem;line-height:1.45;margin-top:9px}
 .card .label .studio{color:var(--fg);font-size:.62rem;letter-spacing:.12em;margin-top:5px}
 .card .label:not(:has(.studio))::after{content:"";display:block;height:.9rem;margin-top:5px;flex-shrink:0}
 .card .media img{transition:opacity .38s,transform .55s}
 .card:hover .media img,.card:focus-within .media img{opacity:.42;transform:scale(1.025)}
 .card.thumbnail-stump:hover .media img,.card.thumbnail-stump:focus-within .media img{transform:scale(1.27)}
 .card:hover .label,.card:focus-within .label{opacity:1;transform:none}
 .card:hover .label strong::after,.card:focus-within .label strong::after{transform:scaleX(1)}
}

@media(min-width:761px){#directing .duo{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* One clear scale and rhythm for the name and every discipline heading. */
#about .about-grid h2,
#film-editing h1,
#vfx .section-head h2,
#design .section-head h2,
#directing .section-head h2,
#script h2,
#photography .section-head h2{
  font-size:clamp(2.6rem,6vw,6.3rem)!important;
  line-height:.95!important;
  letter-spacing:-.015em!important;
  font-weight:500!important;
  white-space:normal!important;
  margin:0!important;
}
#about.discipline,#vfx.discipline,#design.discipline,#directing.discipline,#script.discipline,#photography.discipline{
  padding-top:clamp(72px,8vw,128px);
  padding-bottom:clamp(72px,8vw,128px);
}
#film-editing.intro{
  padding-top:clamp(72px,8vw,128px);
  padding-bottom:clamp(54px,7vw,100px);
}
.about-links{gap:10px clamp(20px,2.4vw,34px);margin-top:18px}
.about-links .about-cta{margin-top:10px}
@media(max-width:760px){
  #about .about-grid h2,
  #film-editing h1,
  #vfx .section-head h2,
#design .section-head h2,
  #directing .section-head h2,
  #script h2,
  #photography .section-head h2{font-size:clamp(2.5rem,12vw,3.45rem)!important}
  #about.discipline,#vfx.discipline,#design.discipline,#directing.discipline,#script.discipline,#photography.discipline{padding-top:64px;padding-bottom:64px}
  #film-editing.intro{padding-top:64px;padding-bottom:40px}
  .about-links{gap:8px 20px}
}

#design .section-head h2{font-size:clamp(2rem,5vw,5rem)!important;line-height:1.05!important}
@media(min-width:761px){#design .duo{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:1200px){.nav.open{top:100%!important;max-height:calc(100dvh - 64px);overflow-y:auto}}

/* About text begins alongside the portrait without a name heading. */
#about .about-grid .bio{grid-row:1!important}

/* Main-page photography preview. Preserve complete photographs in a stable frame. */
.photo-slideshow{max-width:1200px;margin:0 auto}
.photo-stage{display:block;position:relative;aspect-ratio:3/2;background:#181818;overflow:hidden}
.photo-stage .photo-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .8s ease;pointer-events:none}
.photo-stage .photo-slide.is-active{opacity:1}
.photo-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px;color:var(--soft);font-size:.8rem}
.photo-controls button{border:0;background:transparent;color:inherit;cursor:pointer;min-width:44px;min-height:44px;padding:8px}
.photo-controls button:hover{color:var(--fg)}
@media(prefers-reduced-motion:reduce){.photo-stage .photo-slide{transition:none}}