/* V10. Shared content measure, clearer navigation, quiet metadata and a usable reel. */
:root {--wide:1700px;--page-gutter:clamp(24px,5.2vw,92px);}
.container {width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--page-gutter);}
/* All screens use the same content edges. Backgrounds are intentionally full bleed. */
.site-nav {padding-block:30px 27px;}
.site-nav .brand-title {font-size:33px;}
.site-nav .brand-sub {font-size:8px;}
.site-nav .symbol {width:33px;height:35px;}
.site-nav .nav-links {gap:clamp(20px,2.45vw,42px);}
.site-nav .nav-links a {font-size:12px;letter-spacing:.16em;}
.site-nav .nav-link {min-height:44px;}
.site-nav .submenu-link {font-size:12px;min-height:56px;}
.site-nav .projects-toggle {min-height:44px;width:31px;}
.site-nav .menu-toggle {font-size:12px;}
.hero-bottom {gap:0;}
.hero-bottom .circle-link {width:65px;height:65px;}
/* Section links land at the chapter boundary, with the navigation occupying
   the chapter's own top padding instead of exposing the previous chapter. */
#projects,#feature-films,#short-films,#about,#arman,#contact {
 scroll-margin-top:calc(0px - var(--nav-height) - 18px);
}
.work-section#projects {padding-top:0;padding-bottom:0;}
.feature-section {
 min-height:100vh;min-height:100svh;min-height:100dvh;
 padding-top:calc(var(--nav-height) + 34px);
 padding-bottom:clamp(48px,7svh,105px);
}
.work-section .feature-heading {margin:30px 0 36px;}
.feature-heading .section-title {font-size:clamp(42px,5.7vw,94px);}
.feature-section > .feature-card {min-height:clamp(400px,49svh,680px);}
.feature-top {justify-content:flex-end;}
.feature-core h3 {margin-top:20px;}
.short-films-section {
 min-height:100vh;min-height:100svh;
 padding-top:calc(var(--nav-height) + 34px);
 padding-bottom:clamp(70px,9svh,140px);
}
.work-section .short-films-section > .shorts-heading {margin-top:0;margin-bottom:35px;}
.short-films-section .shorts-heading h3 {margin-top:0;}
.statement#about,.profile.has-biography#arman {
 min-height:100vh;min-height:100svh;min-height:100dvh;
}
.statement#about {padding-top:calc(var(--nav-height) + 36px);padding-bottom:clamp(85px,11svh,160px);}
.profile.has-biography#arman .profile-data {padding-top:calc(var(--nav-height) + 36px);padding-bottom:clamp(70px,8svh,130px);}
/* Contact copy/form is still pending. The last chapter nonetheless has enough
   real height for its anchor to reach the top of the viewport. */
.contact#contact {
 min-height:100vh;min-height:100svh;min-height:100dvh;
 display:flex;flex-direction:column;align-items:stretch;
 padding-top:calc(var(--nav-height) + 48px);padding-bottom:36px;
}
.contact#contact .contact-cta {margin-top:42px;margin-bottom:clamp(60px,10svh,145px);}
.contact#contact .site-footer {margin-top:auto;flex-wrap:wrap;}
.contact#contact .foot-right {flex-wrap:wrap;row-gap:20px;}
/* Never split a word in a project name. A small fitter protects long titles
   at intermediate widths, without changing the approved typeface. */
.detail-heading {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;}
.detail-heading h1 {
 min-width:0;max-width:100%;font-size:clamp(30px,9vw,146px);
 overflow-wrap:normal;word-break:normal;hyphens:none;line-height:.98;
}
.detail-heading .title-word {display:inline-block;white-space:nowrap;}
.detail-heading .right-side {min-width:44px;margin:0;align-self:end;padding-bottom:5px;}
.media-container {margin-bottom:0;}
.media-container .detail-hero.film-video,
.media-container .detail-hero.film-video.is-playing,
.film-page .media-container .detail-hero.film-video.is-playing {
 width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:16 / 9;
}
.media-container .film-video iframe {position:absolute;inset:0;width:100%;height:100%;}
.media-container .detail-hero {border:1px solid rgba(255,255,255,.14);}
.media-container .video-notice {padding-inline:20px;}
/* Five completely abstract redactions, aligned like a screenplay excerpt.
   Action is left-aligned, the character cue is centered, dialogue is indented. */
.redaction-stage.screenplay-redaction {
 width:78%;max-width:740px;padding:30px 0;container-type:inline-size;
}
.screenplay-redaction .redaction-field {gap:15px;}
.screenplay-redaction .cipher-line {
 width:auto;height:clamp(13px,2.25vw,30px);margin:0;
}
.screenplay-redaction .cipher-line.script-action-long {width:96%;margin-left:0;}
.screenplay-redaction .cipher-line.script-action-short {width:76%;margin-left:0;}
.screenplay-redaction .cipher-line.script-character {
 width:22%;min-width:35px;margin:22px auto 5px;
}
.screenplay-redaction .cipher-line.script-dialogue-long {width:53%;margin-left:24%;}
.screenplay-redaction .cipher-line.script-dialogue-short {width:40%;margin-left:24%;}
.screenplay-redaction .cipher-glyphs {opacity:.5;filter:blur(8px);}
.screenplay-redaction .censor-bar {height:72%;top:14%;left:0;right:0;background:#070709;}
.screenplay-redaction .script-character .cipher-glyphs {animation-delay:-1.2s;}
.screenplay-redaction .script-dialogue-long .cipher-glyphs {animation-delay:-4.1s;}
.screenplay-redaction .script-dialogue-short .cipher-glyphs {animation-delay:-2.5s;}
.screenplay-redaction .script-dialogue-long .censor-bar:after {animation-delay:-3.2s;}
.screenplay-redaction .script-dialogue-short .censor-bar:after {animation-delay:-1.5s;}
.detail-hero.feature {min-height:clamp(340px,44vw,630px);}
.detail-hero.feature .screenplay-redaction {width:min(67%,780px);}
.detail-hero.feature .screenplay-redaction .cipher-line {height:clamp(15px,2.7vw,38px);}
.detail-hero.feature .screenplay-redaction .script-character {margin-top:32px;}
/* Enhanced reels use native scrollLeft, retaining a non-JavaScript CSS loop.
   9 Oct 2026: touch-action was pan-y pinch-zoom (scripted swipes: no momentum, and phones could cut them short);
   manipulation lets the browser scroll the reel sideways itself, with momentum. */
.project-ticker.is-interactive .ticker-viewport {
 overflow-x:auto;overflow-y:hidden;touch-action:manipulation;
 overscroll-behavior-x:contain;scroll-behavior:auto!important;cursor:grab;
 scrollbar-width:none;-ms-overflow-style:none;
}
.project-ticker.is-interactive .ticker-track {
 animation:none!important;transform:none!important;
 will-change:auto;user-select:none;-webkit-user-select:none;
}
.project-ticker.is-interactive.is-dragging .ticker-viewport {cursor:grabbing;}
.project-ticker.is-interactive .ticker-link {-webkit-user-drag:none;}
/* Decorative loop copies stay visible with reduced motion, but the JS
   controller never starts automatic motion in that mode. */
.project-ticker.is-interactive .ticker-duplicate {display:flex!important;}
.project-ticker.is-interactive .ticker-viewport:focus-visible {outline:2px solid #d66b7e;outline-offset:-3px;}
.project-ticker.is-interactive.is-keyboard .ticker-track {transform:none!important;}
@media(max-width:1100px) and (min-width:761px) {
 .site-nav {gap:16px;}
 .site-nav .nav-links {gap:clamp(12px,1.75vw,21px);}
 .site-nav .nav-links a {font-size:11px;letter-spacing:.10em;}
 .site-nav .hub-nav {padding-left:14px;gap:7px;}
 .site-nav .brand-title {font-size:30px;}
 .site-nav .symbol {width:29px;}
}
@media(max-width:760px) {
 .site-nav {padding-block:21px 20px;}
 .site-nav .brand-title {font-size:28px;}
 .site-nav .brand-sub {font-size:7px;}
 .site-nav .symbol {width:29px;height:31px;}
 .site-nav .nav-links a.nav-link {font-size:15px;min-height:56px;padding:18px 0;}
 .site-nav .submenu-link {font-size:13px;min-height:54px;}
 .site-nav .projects-toggle {height:56px;min-width:48px;}
 .site-nav .nav-links {max-height:calc(100dvh - var(--nav-height));}
 .detail-heading {grid-template-columns:minmax(0,1fr);gap:22px;}
 .detail-heading .right-side {justify-self:start;padding:0;}
 .feature-heading .section-title {font-size:clamp(34px,7.2vw,54px);}
 .feature-section > .feature-card {min-height:0;flex:none;}
 .feature-section .feature-art {min-height:275px;}
 .redaction-stage.screenplay-redaction {width:76%;padding-block:28px;}
 .screenplay-redaction .redaction-field {gap:13px;}
 .screenplay-redaction .cipher-line {height:17px;}
 .screenplay-redaction .cipher-line.script-character {margin-top:20px;}
 .detail-hero.feature .screenplay-redaction {width:78%;}
 .detail-hero.feature .screenplay-redaction .cipher-line {height:19px;}
 .feature-section,.short-films-section {padding-top:calc(var(--nav-height) + 28px);}
 .statement#about {padding-top:calc(var(--nav-height) + 35px);padding-bottom:80px;}
 .profile.has-biography#arman .profile-data {padding-top:calc(var(--nav-height) + 32px);padding-bottom:65px;}
 .contact#contact {padding-top:calc(var(--nav-height) + 36px);padding-bottom:28px;}
 .contact#contact .contact-cta {align-items:flex-start;flex-direction:column;gap:30px;}
 .contact#contact .site-footer {row-gap:25px;}
 .detail-header {padding-top:35px;}
 .detail-heading {padding-top:35px;padding-bottom:34px;}
 .video-play {width:56px;height:56px;}
 .video-play-label {font-size:8px;right:12px;bottom:12px;}
}
@media(prefers-reduced-motion:reduce) {
 .screenplay-redaction .cipher-glyphs,.screenplay-redaction .censor-bar:after {animation:none!important;}
}
/* Match the specificity of the earlier chapter rules. */
.statement#about,.profile.has-biography#arman,.contact#contact {
 scroll-margin-top:calc(0px - var(--nav-height) - 18px);
}
.feature-heading .section-title,.shorts-heading h3 {word-spacing:.12em;}