/* Tailored Roots: display the approved upper-panel artwork without redrawing it. */
.plf-logo{display:block;position:relative;width:100%;aspect-ratio:650 / 469;overflow:hidden;mix-blend-mode:lighten;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(0deg,transparent,#000 2%,#000 98%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(0deg,transparent,#000 2%,#000 98%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.plf-logo img{display:block;position:absolute;width:236.3076923%;max-width:none;height:auto;left:-68.9230769%;top:-12.3667377%}
/* Blend at each animated group too, so its stacking context keeps a clean edge. */
.site-header,.hero-copy,.credits-roll,.footer-mark,.social-disc b{mix-blend-mode:lighten}
.wordmark{display:flex;align-items:center;width:88px;min-height:44px;flex-shrink:0}
.hero-copy h1{font-size:0;line-height:1;letter-spacing:0;padding:0;text-shadow:none}
.hero-copy h1 .plf-logo{width:clamp(198px,18.5vw,247px);max-width:100%}
.footer-mark{display:block;width:126px;line-height:1}
.credits-opening .cinema-title .plf-logo{width:250px;max-width:72%;margin:0 auto}

.social-disc b .plf-logo{width:21%;opacity:.65}
@media(min-width:761px) and (max-height:720px){
 .wordmark{width:74px}
 .hero-copy h1 .plf-logo{width:172px}
}
@media(min-width:761px) and (max-height:600px){.hero-copy{top:74%}}
@media(max-width:760px){
 .wordmark{width:70px}
 .hero-copy{top:calc(100% - 248px)}
 .hero-copy h1 .plf-logo{width:155px;margin:0 auto}
 .credits-opening .cinema-title .plf-logo{width:192px}
 
 .footer-mark{width:110px}
}
@media(max-width:400px){
 .wordmark{width:64px}
 .site-header nav{gap:13px;margin-right:14px}
}
@media(max-width:360px){
 .site-header{padding-inline:4vw}
 .site-header nav{gap:9px;margin-right:8px}
 .site-header nav a{letter-spacing:.02em;white-space:nowrap}
}