.detail-hero-online { grid-template-columns:1.2fr .8fr; gap:clamp(40px,7vw,100px); padding-block:34px 78px; }
.detail-hero-online .detail-copy { max-width:580px; }
.detail-hero-online h1 { font-size:clamp(58px,6.1vw,86px); line-height:1.04; }
.detail-hero-online .detail-copy>p { font-size:16px; max-width:500px; }
.detail-hero-online .action-note { max-width:500px; font-size:14px; line-height:1.6; }
.online-film { width:min(100%,360px); margin:0; justify-self:center; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:3px; box-shadow:0 22px 55px #1a2b2814; }
.film-heading,.online-film figcaption { display:flex; justify-content:space-between; align-items:center; gap:15px; color:var(--accent); font-size:8px; letter-spacing:.13em; line-height:1.5; }
.film-heading { padding:2px 2px 13px; }
.film-heading>span:first-child { font-weight:650; color:var(--text); }
.online-film figcaption { padding:14px 2px 2px; }
.online-film figcaption>span:last-child { font-variant-numeric:tabular-nums; color:var(--muted); }
.film-player { position:relative; background:var(--ink); aspect-ratio:9/16; }
.film-player video { display:block; width:100%; height:100%; aspect-ratio:9/16; object-fit:contain; }
.film-player video::-webkit-media-controls-mute-button,
.film-player video::-webkit-media-controls-volume-slider,
.film-player video::-webkit-media-controls-volume-control-container { display:none; }
.film-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; border:1px solid var(--mist, #F4F2ED); border-radius:50%; display:grid; place-items:center; color:var(--mist, #F4F2ED); background:var(--pine, #7A7654); box-shadow:0 5px 25px #0004; transition:background .2s; }
.film-play svg { width:27px; height:27px; margin-left:3px; }
.film-play:hover { background:var(--pine-dark, #5C5940); }
.film-play:focus-visible { outline:3px solid var(--mist, #F4F2ED); outline-offset:6px; }
@media(max-width:900px) {
 .detail-hero-online { gap:32px; grid-template-columns:1fr .85fr; }
 .detail-hero-online h1 { font-size:55px; }
 .detail-hero-online .detail-copy>p { font-size:14px; }
}
@media(max-width:620px) {
 .detail-hero-online { grid-template-columns:1fr; gap:36px; padding-block:32px 55px; }
 .detail-hero-online h1 { font-size:58px; }
 .detail-hero-online .detail-copy>p { font-size:15px; }
 .online-film { width:min(100%,350px); padding:10px; }
 .film-play { width:64px; height:64px; }
}