@font-face{font-family:"Brandon Grotesque";src:url("/assets/fonts/brandon-grotesque-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
.brand{font-family:"Brandon Grotesque",Arial,Helvetica,sans-serif!important;font-size:clamp(1.22rem,1.5vw,1.52rem)!important;font-weight:700!important;line-height:1!important;letter-spacing:.12em!important;text-transform:uppercase}
.nav a,.tabs button{font-family:"Brandon Grotesque",Arial,Helvetica,sans-serif!important;font-size:.82rem!important;font-weight:700!important;letter-spacing:.09em!important;text-transform:uppercase}
.menu{width:30px;height:24px;display:none;flex-direction:column;justify-content:space-between;align-items:stretch;border:0;background:transparent;padding:2px 0!important;cursor:pointer}
.menu span{display:block;width:100%;height:2px;background:currentColor;transform-origin:center;transition:transform .25s ease,opacity .2s ease}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media(max-width:1200px){.menu{display:flex!important}.nav.open a{font-size:.82rem!important}}
@media(max-width:760px){.brand{font-size:1.2rem!important;letter-spacing:.13em!important}}
html body main>h1,html body main h1.project-title{font-family:"Brandon Grotesque",Arial,Helvetica,sans-serif!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.12em!important;font-size:clamp(2.75rem,5vw,4.75rem)!important;line-height:1.04!important;max-width:100%!important;overflow-wrap:anywhere;padding-bottom:0}
html body main h1 .project-subtitle{display:block;font-size:.6em!important;font-weight:700!important;line-height:1.04!important;letter-spacing:.12em!important;margin-top:2px;color:#f2f1ed;text-wrap:balance}
html body .discipline .section-head h1,html body .discipline .section-head h2,html body #about h2,html body .contact-title{font-family:"Brandon Grotesque",Arial,Helvetica,sans-serif!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.12em!important;overflow-wrap:anywhere}

/* Override legacy section rules consistently, including plain section headings. */
html body #main #film-editing h1,html body #main #vfx h2,html body #main #directing h2,html body #main #design h2,html body #main #script h2,html body #main #photography h2,html body .credits-main h1,html body .credits-section h2,html body main>h1{font-family:"Brandon Grotesque",Arial,Helvetica,sans-serif!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase;white-space:normal!important;text-wrap:balance;overflow-wrap:normal}

@media(max-width:760px){
html body #main #film-editing h1,html body #main #vfx h2,html body #main #directing h2,html body #main #script h2,html body #main #photography h2{font-size:clamp(2rem,9.6vw,2.76rem)!important}
html body #main #design h2{font-size:clamp(1.6rem,4vw,4rem)!important}
html body main>h1,html body main h1.project-title,html body .credits-main h1{font-size:clamp(2.2rem,4vw,3.8rem)!important}
html body .contact-title{font-size:clamp(2.24rem,6.4vw,6.8rem)!important}
html body .credits-section h2{font-size:clamp(1.12rem,1.76vw,2rem)!important}
}

/* Discipline headings at half their previous size. */
html body #main #film-editing h1,html body #main #vfx h2,html body #main #directing h2,html body #main #script h2,html body #main #photography h2{font-size:clamp(1.3rem,3vw,3.15rem)!important}
html body #main #design h2{font-size:clamp(1rem,2.5vw,2.5rem)!important}
@media(max-width:760px){
html body #main #film-editing h1,html body #main #vfx h2,html body #main #directing h2,html body #main #script h2,html body #main #photography h2{font-size:clamp(1rem,4.8vw,1.38rem)!important}
html body #main #design h2{font-size:clamp(.8rem,2vw,2rem)!important}
}

/* Shared scale for every homepage section title, including contact. */
html body #main #film-editing h1,
html body #main #vfx h2,
html body #main #directing h2,
html body #main #design h2,
html body #main #script h2,
html body #main #photography h2,
html body #contact .contact-title{
 font-size:clamp(1.3rem,3vw,3.15rem)!important;
 line-height:1.05!important;
}
@media(max-width:760px){
 html body #main #film-editing h1,
 html body #main #vfx h2,
 html body #main #directing h2,
 html body #main #design h2,
 html body #main #script h2,
 html body #main #photography h2,
 html body #contact .contact-title{font-size:clamp(1rem,4.8vw,1.38rem)!important}
}

/* Script description follows the standard section introduction scale. */
html body #main #script .service p{font-size:clamp(1.05rem,1.55vw,1.4rem)!important;line-height:1.45;max-width:48ch}

/* Compact editorial rhythm around the smaller section headings. */
html body #about.discipline,
html body #vfx.discipline,
html body #design.discipline,
html body #directing.discipline,
html body #script.discipline,
html body #photography.discipline{
 padding-top:clamp(48px,5.3vw,85px);
 padding-bottom:clamp(48px,5.3vw,85px);
}
html body #film-editing.intro{padding-top:clamp(48px,5.3vw,85px);padding-bottom:28px}
html body #main .work{padding-top:0}
html body #main .section-head{gap:24px;margin-bottom:28px}
html body #script .service{grid-template-columns:1fr;gap:28px}
html body #contact{padding-top:clamp(54px,7vw,105px)}
html body #contact .contact-title{margin-bottom:30px}
html body #contact .fine{margin-top:clamp(54px,8vw,110px)}
html body #about .bio p .siamese-link{color:var(--fg)}
html body #about .bio p .siamese-link:hover,
html body #about .bio p .siamese-link:focus-visible{text-decoration:underline;text-underline-offset:4px;color:var(--fg)}
html body .photo-stage{background:#090909}
html body .photo-stage .photo-slide{background:#090909}
@media(max-width:760px){
 html body #about.discipline,
 html body #vfx.discipline,
 html body #design.discipline,
 html body #directing.discipline,
 html body #script.discipline,
 html body #photography.discipline{padding-top:44px;padding-bottom:44px}
 html body #film-editing.intro{padding-top:44px;padding-bottom:24px}
 html body #main .section-head{gap:20px;margin-bottom:24px}
 html body #script .service{gap:24px}
 html body #contact{padding-top:48px}
 html body #contact .contact-title{margin-bottom:28px}
}

/* Readable, broader introduction measure with a consistent left edge. */
html body #main #script .service p,
html body #main .section-head p{max-width:72ch;text-align:left;text-wrap:pretty;letter-spacing:normal}
html body #main #script .service>div{min-width:0;width:100%}

/* Credits uses the same restrained title scale and tighter page rhythm. */
html body .credits-main{padding-top:clamp(44px,5.3vw,85px);padding-bottom:72px}
html body .credits-main h1{font-size:clamp(1.3rem,3vw,3.15rem)!important;line-height:1.05!important;margin-bottom:28px}
html body .credits-main .credits-jump{margin:0 0 28px;gap:clamp(16px,2.5vw,36px)}
html body .credits-main .credits-section{grid-template-columns:minmax(210px,1fr) 3fr;padding:28px 0 44px}
html body .credits-main .credits-section h2{font-size:clamp(1rem,1.3vw,1.3rem)!important;line-height:1.3}
@media(max-width:760px){html body .credits-main h1{font-size:clamp(1rem,4.8vw,1.38rem)!important}}
@media(max-width:700px){html body .credits-main .credits-section{display:block}html body .credits-main .credits-section h2{margin-bottom:20px}}

/* Mobile landscape cards: clear images with readable captions below. */
@media(max-width:760px){
 html body #main .card.landscape .media,html body #main .card[data-cat="documentary"] .media{display:flex;flex-direction:column;aspect-ratio:auto;overflow:visible;background:transparent}
 html body #main .card.landscape .media img,html body #main .card[data-cat="documentary"] .media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#111;opacity:1;transform:none}
 html body #main .card.landscape .label,html body #main .card[data-cat="documentary"] .label{position:static;display:block;padding:10px 0 0;background:none!important;opacity:1!important;transform:none!important;transition:none}
 html body #main .card.landscape .label strong,html body #main .card[data-cat="documentary"] .label strong{display:block;font-size:clamp(.8rem,3.4vw,1rem)!important;line-height:1.3;letter-spacing:normal;font-weight:500;padding:0;overflow-wrap:break-word}
 html body #main .card.landscape .label strong::after,html body #main .card[data-cat="documentary"] .label strong::after{display:none}
 html body #main .card.landscape .label span,html body #main .card[data-cat="documentary"] .label span{display:none}
 html body #main #directing .duo,html body #main #design .duo{column-gap:15px;row-gap:24px;align-items:start}
 html body #main .grid{row-gap:24px}
}

/* Documentary thumbnails share one frame, regardless of source artwork. */
@media(max-width:760px){
 html body #main .card[data-cat="documentary"] .media img{aspect-ratio:auto;object-fit:contain;object-position:center;height:auto}
}

/* About navigation matches the work category labels. */
html body #about .about-links .about-cta{
 font-family:"Brandon Grotesque",Arial,Helvetica,sans-serif;
 font-size:.82rem;
 font-weight:700;
 letter-spacing:.09em;
 text-transform:uppercase;
 line-height:1.45;
}

/* Project, Photography and Credits titles use the current section scale. */
html body main>h1,
html body main h1.project-title{
 font-size:clamp(1.3rem,3vw,3.15rem)!important;
 line-height:1.15!important;
 margin-top:0;
 margin-bottom:24px;
 text-wrap:balance;
 overflow-wrap:break-word;
}
html body main h1 .project-subtitle{
 font-size:.75em!important;
 line-height:1.25!important;
 margin-top:8px;
}
@media(max-width:760px){
 html body main>h1,
 html body main h1.project-title{font-size:clamp(1rem,4.8vw,1.38rem)!important}
 html body main h1 .project-subtitle{font-size:.82rem!important}
}

/* Project navigation has explicit layout even on older page templates. */
html body .top-project-nav{display:flex;align-items:center;gap:clamp(16px,2.5vw,32px);flex-wrap:wrap}
html body .top-project-nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-size:.76rem!important}
html body .project-nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px!important;align-items:center}
html body .project-nav>a{grid-row:1!important;min-width:0;min-height:44px;display:flex;align-items:center;white-space:nowrap}
html body .project-nav>.project-link-previous{grid-column:1!important;justify-content:flex-start}
html body .project-nav>.project-link-all{grid-column:2!important;justify-content:center}
html body .project-nav>.project-link-next{grid-column:3!important;justify-content:flex-end}
html body .credits-block h2{font-family:"Brandon Grotesque",Arial,Helvetica,sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.3}
@media(max-width:760px){
 html body header:has(.top-project-nav){flex-wrap:wrap;column-gap:20px;row-gap:8px;padding-top:14px;padding-bottom:8px}
 html body header .top-project-nav{width:100%;justify-content:space-between;gap:12px;font-size:.72rem}
 html body .project-nav{padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
 html body .project-nav>a{font-size:.68rem!important}
 html body .credits-block{display:block;padding-top:24px;padding-bottom:32px}
 html body .credits-block h2{margin:0 0 20px}
 html body .credits-block .meta{display:grid;grid-template-columns:1fr;gap:20px;font-size:.9rem;line-height:1.5;margin-top:0}
 html body .copy{font-size:1rem;line-height:1.6}
 html body .copy p{font-size:1rem;line-height:1.6}
 html body #main .card .media{display:flex;flex-direction:column;aspect-ratio:auto;overflow:visible;background:transparent}
 html body #main .card:not(.landscape) .media img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;opacity:1;transform:none}
 html body #main .card .label{position:static;display:block;padding:10px 0 0;background:none!important;opacity:1!important;transform:none!important;transition:none}
 html body #main .card .label strong{display:block;font-size:clamp(.8rem,3.4vw,1rem)!important;line-height:1.3;font-weight:500;letter-spacing:normal;padding:0;overflow-wrap:break-word}
 html body #main .card .label strong::after,html body #main .card .label span{display:none}
 html body #main .grid,html body #main .duo{align-items:start;row-gap:24px}
 html body .contact-form input,html body .contact-form textarea{font-size:16px}
}