/* Approved three-line hero: brand-inspired Jost, not a proprietary brand font.
   Fonts are self-hosted; preserve chapters.mjs's stable viewport sizing.
   Layers stay local to the isolated hero: film -2, text 1. */
@font-face{font-family:'Invitation Jost';src:url('../fonts/jost-20260925.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Invitation Noto Sans KR';src:url('../fonts/noto-sans-kr-500-20260925.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}

.theme-modern .hero-cinema{position:relative;isolation:isolate;container-type:inline-size;display:block;height:var(--chapter-height,100svh);min-height:var(--chapter-height,100svh);padding:0;background:#343c3c;color:#f5f5ed;overflow:hidden}
.hero-cinema .hero-media{position:absolute;inset:0;z-index:-2;margin:0;border-radius:0;height:100%;transform:none;will-change:auto}
.hero-cinema .hero-media:after{inset:0;background:linear-gradient(180deg,rgba(14,25,30,.6),rgba(14,25,30,.44) 33%,rgba(14,25,30,.12) 50%,transparent 68%)}
.hero-cinema .hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* Flow the date/time and one-line venue directly below the title. */
.hero-cinema .hero-details{position:absolute;z-index:1;top:max(12%,calc(env(safe-area-inset-top) + 24px));left:5%;right:5%;text-align:center;text-shadow:0 1px 8px rgb(11 18 17 / .3)}
.theme-modern .hero-cinema .hero-invitation{margin:0;font-family:'Invitation Jost',Arial,sans-serif;font-size:clamp(24px,10.2cqw,40px);font-weight:600;font-synthesis:none;letter-spacing:.105em;line-height:1.25;white-space:nowrap;text-shadow:0 2px 12px rgb(10 18 19 / .35)}
.hero-cinema .hero-when{margin-top:22px}
.hero-cinema .hero-date{margin:0;font-family:'Invitation Jost',Arial,sans-serif;font-size:clamp(16px,4.62cqw,18px);font-weight:500;letter-spacing:.1em;font-variant-numeric:lining-nums tabular-nums;line-height:1.35;white-space:nowrap}
.hero-cinema .hero-location{margin:14px 0 0;color:inherit;font-family:'Invitation Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:clamp(12px,3.4cqw,13px);font-weight:500;letter-spacing:.045em;line-height:1.6;white-space:nowrap}
.theme-modern .hero-playback{position:absolute;bottom:max(23px,env(safe-area-inset-bottom));right:8px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:22px;background:transparent;color:#fff5e6;font:inherit;font-size:15px;text-shadow:0 1px 8px #0008}

/* Use the existing stable short-viewport flag, not changing browser chrome. */
html[data-short-viewport] .hero-cinema .hero-details{top:max(10%,calc(env(safe-area-inset-top) + 24px))}
html[data-short-viewport] .hero-cinema .hero-when{margin-top:16px}
html[data-short-viewport] .hero-cinema .hero-location{margin-top:12px}

/* text-motion.mjs owns the approved gather sequence; no competing CSS entrance. */
@media(forced-colors:active){.hero-cinema .hero-details{background:Canvas;color:CanvasText;text-shadow:none}.theme-modern .hero-cinema .hero-invitation{text-shadow:none}}