.hero{min-height:690px;height:calc(100svh - 117px);max-height:950px;position:relative;overflow:hidden;padding:74px 7% 95px;background:radial-gradient(ellipse at 75% 44%,#58401c45,transparent 57%),linear-gradient(100deg,#1a1714,#211b15)}
.hero-type{position:relative;z-index:2;width:55%;max-width:700px}
.hero .eyebrow{display:flex;gap:14px;align-items:center}
.hero-detail{color:var(--muted);font-size:14px;max-width:370px;margin:16px 0 27px}
.play-link{display:flex;gap:10px;align-items:center;font-size:12px}
.play-circle{border:1px solid #a48d66;border-radius:50%;width:31px;height:31px;display:grid;place-items:center;font-size:9px}
.hero-art{position:absolute;right:2%;bottom:65px;width:47%;height:94%;max-width:680px}
.hero-art img{position:absolute;bottom:0;height:91%;width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(-20px 15px 30px #0008);z-index:1}
.hero-bottom{position:absolute;bottom:0;left:5%;right:5%;border-top:1px solid var(--border);display:flex;justify-content:space-between;padding:22px 0;font:9px monospace;letter-spacing:2px;color:#bba886}
.hero-bottom b{padding-left:20px}
.cinema{display:grid;grid-template-columns:1.6fr 1fr;border:1px solid var(--border);background:#13110e}
.player{display:flex;align-items:center;background:#000}
.player video{display:block;width:100%;aspect-ratio:17/11;object-fit:contain}
.film-menu{padding:25px 35px;display:flex;flex-direction:column;justify-content:center}
.film-menu>.eyebrow{margin-bottom:12px}
.film-choice{text-align:left;background:none;border:0;border-bottom:1px solid var(--border);padding:18px 0 18px 20px;color:var(--cream)}
.film-choice.selected{border-left:2px solid var(--gold);background:linear-gradient(90deg,#b08a3e17,transparent)}
.film-choice span{font:9px monospace;letter-spacing:2px;color:#b3a080;display:block;margin-bottom:5px}
.film-choice b{font:22px Georgia;display:block}
.film-choice small{font-size:11px;color:#a99b83}
.transcript{text-align:center;font:italic 22px Georgia;margin-top:25px}
.screening>.fine{text-align:center}
@media(min-width:1600px){
.hero{padding-top:110px}
}
@media(max-width:900px){
.hero{min-height:680px}
.hero-type{width:60%}
.hero-art{right:-7%;width:53%;opacity:.8}
.hero-type h1{font-size:78px}
.film-menu{padding:20px}
.film-choice b{font-size:19px}
}
@media(max-width:650px){
.hero{height:auto;min-height:920px;padding:44px 6% 400px}
.hero-type{width:100%}
.hero-type h1{font-size:76px;letter-spacing:-4px;margin:24px 0}
.hero .eyebrow{font-size:9px;letter-spacing:1.8px}
.hero-detail{font-size:13px;max-width:330px}
.hero-art{height:370px;width:94%;right:0;bottom:55px;opacity:1}
.hero-art img{height:100%}
.hero-art .arch{inset:0 15%}
.hero-bottom{padding:20px 0;font-size:7px;letter-spacing:1px}
.hero-bottom>a{font-size:8px}
.hero-bottom b{padding-left:5px}
.cinema{grid-template-columns:1fr}
.film-menu{padding:22px}
.film-choice{padding:15px 10px}
.film-choice small{display:none}
.film-choice b{font-size:20px}
.transcript{font-size:19px;line-height:1.4}
.play-link{font-size:11px}
}
.hero{isolation:isolate;background:#080706;min-height:720px;display:flex;align-items:center;padding:65px 7% 140px}
.hero-backdrop,.hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-backdrop{z-index:-2}
.hero-backdrop video{width:100%;height:100%;object-fit:cover;object-position:65% 42%;display:block}
.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(8,7,6,.94) 0%,rgba(8,7,6,.81) 29%,rgba(8,7,6,.38) 58%,rgba(8,7,6,.08) 100%),linear-gradient(0deg,#080706 0%,transparent 30%,rgba(8,7,6,.2) 100%)}
.hero-type{width:57%;max-width:700px}
.hero-type h1{font-size:clamp(72px,7.7vw,120px);text-shadow:0 3px 30px #0008}
.hero .hero-detail{color:#d2c7b6}
.hero .requirements{color:#c6b79e}
.hero .button{box-shadow:0 6px 28px #0007}
.hero .actions{flex-direction:row;align-items:center}
.hero-playback{position:absolute;right:5%;bottom:87px;display:flex;align-items:center;gap:10px;z-index:3}
.hero-playback button,.hero-playback a{background:#100d0bd9;border:1px solid #b08a3e66;color:#e2d4ba;padding:10px 13px;font:10px Arial;min-height:38px;backdrop-filter:blur(8px)}
.hero-playback button:hover,.hero-playback a:hover{background:#3c3020}
.hero-bottom{z-index:3}
@media(max-width:900px) and (min-width:651px){
.hero{padding:65px 5% 145px}
.hero-type{width:75%}
.hero-type h1{font-size:80px}
.hero-backdrop video{object-position:62% 40%}
.hero-shade{background:linear-gradient(90deg,#080706e8,#080706a6 40%,#08070624),linear-gradient(0deg,#080706,transparent 35%)}
.hero-playback{right:auto;left:5%}
}
@media(max-width:650px){
.hero{height:calc(100svh - 101px);min-height:820px;max-height:none;padding:255px 6% 155px;align-items:flex-end}
.hero-type{width:100%}
.hero-type h1{font-size:68px;letter-spacing:-3px;margin:20px 0}
.hero .lead{font-size:19px}
.hero-detail{font-size:12px;margin:12px 0 22px}
.hero-backdrop video{object-position:58% 20%}
.hero-shade{background:linear-gradient(0deg,#080706 0%,#080706eb 26%,#080706b3 54%,#08070618 90%),linear-gradient(90deg,#08070666,transparent)}
.hero-playback{left:6%;right:6%;bottom:80px;gap:6px;flex-wrap:wrap}
.hero-playback button,.hero-playback a{font-size:9px;padding:9px 10px}
.hero .eyebrow{font-size:8px;letter-spacing:1.4px}
.hero .requirements{font-size:10px}
.hero-bottom{font-size:7px}
.hero .actions{gap:14px}
.hero .actions .button{padding:16px 18px}
}
@media(prefers-contrast:more){
.hero-shade{background:#080706dc}
}

/* Preserve the approved link appearance on the corrected hero button. */
button.play-link{background:none;border:0;color:inherit;padding:0}

/* Keep the establishing image when a decoder or media request fails. */
.hero-backdrop{background:url('assets/porter-hell-gate.jpg') 65% 42% / cover no-repeat}
.hero-backdrop video.media-unavailable{visibility:hidden}
#hero-media-status,#gallery-media-status{font:12px/1.5 Arial;color:var(--cream)}
#hero-media-status{flex-basis:100%;max-width:370px;background:#100d0bf2;padding:8px 12px}
#gallery-media-status{margin-top:12px}
@media(max-width:900px) and (min-width:651px){
.hero-backdrop{background-position:62% 40%}
}
@media(max-width:650px){
.hero-backdrop{background-position:58% 20%}
}

/* Flow-based control rows keep zoomed text and playback failures reachable. */
.hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto;gap:24px;height:auto;min-height:calc(100svh - 117px);max-height:none;padding:65px 7% 0}
.hero-type{align-self:center;min-width:0}
.hero .actions{flex-wrap:wrap}
.hero-playback{position:relative;inset:auto;justify-self:end;display:flex;flex-wrap:wrap;max-width:100%}
.hero-playback button,.hero-playback a{min-height:44px}
.hero-bottom{position:relative;inset:auto;width:100%;gap:15px;flex-wrap:wrap}
.film-choice{min-width:0}
.film-choice b{overflow-wrap:anywhere}
@media(max-width:900px) and (min-width:651px){
.hero{padding:65px 5% 0}
.hero-playback{justify-self:start}
}
@media(max-width:650px){
.hero{min-height:820px;padding:255px 6% 0;gap:24px}
.hero-type{align-self:end}
.hero-type h1{font-size:clamp(48px,14vw,68px);letter-spacing:-2px}
.hero-playback{justify-self:start}
.hero-playback button,.hero-playback a{font-size:11px}
.hero .actions .button{gap:20px}
.hero-bottom{font-size:9px;letter-spacing:.5px}
}

.player .media-poster{width:100%;aspect-ratio:17/11;object-fit:contain}
.player [hidden]{display:none}