/* Alternate design: /design-v2.html. The original entry point does not load
   this file. Keep playback, media sizing in theater, and the catalog shared. */
:root{
 --editorial-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --editorial-rule:#ffffff2b;
 --editorial-track:#ffffff30;
 --header-fade-middle:#000c;
 --film-gap:18px;
 --header-height:76px;
}
:root[data-theme="light"]{--editorial-rule:#d9d9d6;--editorial-track:#d5d5d1;--header-fade-middle:#fffc}
html,body{font-family:var(--editorial-font)}

/* A single typographic voice, with quieter secondary information. */
.masthead{padding-top:18px;padding-bottom:18px}
/* A visual veil softens the feed edge without changing video geometry or
   intercepting controls. It clears completely at the opening scroll position. */
body:not(.theater-mode) .masthead::after{
 content:"";position:absolute;top:100%;left:0;right:0;height:48px;
 background:linear-gradient(to bottom,var(--paper) 0%,var(--header-fade-middle) 28%,transparent 100%);
 opacity:var(--header-fade,0);pointer-events:none;
}
.wordmark{font-family:var(--editorial-font);font-size:30px;font-weight:600;letter-spacing:-1.7px;line-height:1}
.wordmark span{margin-top:8px;font-size:9px;line-height:1.35;font-weight:450;letter-spacing:1.55px;word-spacing:2px;opacity:1;color:var(--muted)}
nav{font-weight:450;letter-spacing:.15px}
.text-button span{opacity:1;color:var(--muted);font-variant-numeric:tabular-nums}
.contact-button{padding-bottom:2px}
.position{font-family:var(--editorial-font);z-index:16}

/* Each film ends with a quiet rule and a brief pause before the next image.
   The short solid leader distinguishes this divider from the seek track. */
body:not(.theater-mode) .film::after{
 content:"";position:absolute;left:80px;right:80px;bottom:0;height:1px;
 background:linear-gradient(to right,var(--ink) 0 26px,var(--editorial-rule) 26px 100%);
 pointer-events:none;z-index:6;
}
body:not(.theater-mode) .film-details{bottom:16px}
body:not(.theater-mode) .project-caption{
 top:0;margin:0 0 4px;padding-top:10px;gap:5px;
}
.caption-title{
 font:500 23px/1.24 var(--editorial-font);letter-spacing:-.65px;
 text-wrap:balance;overflow-wrap:break-word;
}
.caption-title,.index-row strong{text-transform:lowercase}
.caption-roles{
 font:450 10.5px/1.5 var(--editorial-font);letter-spacing:1.05px;
}
body:not(.theater-mode) .control-button svg{width:19px;height:19px;stroke-width:1.35}
body:not(.theater-mode) .play-control svg{width:14px;height:14px}
:root[data-theme] body:not(.theater-mode) .timeline::-webkit-slider-runnable-track{
 height:2px;background:linear-gradient(to right,var(--ink) var(--progress),var(--editorial-track) var(--progress));
}
:root[data-theme] body:not(.theater-mode) .timeline::-moz-range-track{height:2px;background:var(--editorial-track)}
:root[data-theme] body:not(.theater-mode) .timeline::-moz-range-progress{height:2px;background:var(--ink)}
:root[data-theme] body:not(.theater-mode) .timeline::-webkit-slider-thumb{width:7px;height:7px;margin-top:-2.5px;background:var(--ink)}
:root[data-theme] body:not(.theater-mode) .timeline::-moz-range-thumb{width:7px;height:7px;background:var(--ink)}

/* The full-screen surface keeps its original geometry and dismissal behavior. */
body.theater-mode .caption-title{font-size:19px;line-height:1.2;letter-spacing:-.45px}
body.theater-mode .caption-roles{font-size:10px;letter-spacing:.75px}
body.theater-mode #theater-bio{font-family:var(--editorial-font);font-weight:600}

/* Carry the same type into the existing contact and film-index surfaces. */
dialog h2{font-family:var(--editorial-font);font-weight:500;letter-spacing:-1.7px;line-height:1.08}
.dialog-header{letter-spacing:1.5px;font-weight:500}
.dialog-brandline{display:flex;flex:1;min-width:0;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.dialog-brand{font:600 23px/1.1 var(--editorial-font);letter-spacing:-1.2px}
.dialog-section{font:450 8px/1.5 var(--editorial-font);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dialog-close{flex-shrink:0}
.index-row strong{font-family:var(--editorial-font);font-weight:500;letter-spacing:-.2px}
.index-row small{letter-spacing:.3px;opacity:.75}
#contact-dialog p{font-size:15px;line-height:1.7}
.contact-detail{font-weight:400;letter-spacing:-.35px}
.closing-contact h2{font-family:var(--editorial-font);font-weight:500;letter-spacing:-1.9px;line-height:1.08}
.closing-eyebrow{display:none}
.private-submit{font-weight:500}

@media(max-width:700px){
 :root{--film-gap:14px;--header-height:68px}
 .masthead{padding-top:16px;padding-bottom:16px}
 body:not(.theater-mode) .masthead::after{height:32px}
 .wordmark{font-size:28px;letter-spacing:-1.5px}
 .wordmark span{font-size:8px;letter-spacing:1.25px;margin-top:8px}
 body:not(.theater-mode) .film-details{bottom:14px}
 body:not(.theater-mode) .film::after{left:20px;right:20px}
 body:not(.theater-mode) .project-caption{padding-top:9px;gap:4px;margin-bottom:3px}
 .caption-title{font-size:20px;line-height:1.25;letter-spacing:-.45px}
 .caption-roles{font-size:10px;line-height:1.5;letter-spacing:.8px}
 dialog h2{letter-spacing:-1.25px}
 .dialog-brand{font-size:21px;letter-spacing:-1.1px}
 .dialog-brandline{gap:5px 10px}
 .dialog-section{font-size:7.5px;letter-spacing:1px}
 .closing-contact h2{letter-spacing:-1.4px}
}
@media(orientation:landscape) and (max-height:600px){
 :root{--film-gap:10px;--header-height:44px}
 .masthead{padding-top:0;padding-bottom:0}
 body:not(.theater-mode) .masthead::after{height:24px}
 .wordmark{font-size:23px;letter-spacing:-1.2px}
 body:not(.theater-mode) .film-details{bottom:10px}
 body:not(.theater-mode) .film::after{left:var(--edge);right:var(--edge)}
 body:not(.theater-mode) .project-caption{padding-top:4px;gap:2px;margin-bottom:1px}
 .caption-title{font-size:18px;letter-spacing:-.4px}
 .caption-roles{font-size:9px;letter-spacing:.7px}
 body.theater-mode .caption-title{font-size:18px}
 body.theater-mode .caption-roles{font-size:10px}
}