/* One Sound (copied from 111_WHOLE_HORN_CANON/web_player/css/one-sound.css; tokens, fonts, body rules live in style.css).
   Section-level layout overrides for the landing page are at the end of style.css. */

.os{padding:56px 0 64px;background:linear-gradient(180deg,var(--navy) 0%,#0e1a38 100%);border-top:1px solid var(--line)}
.os-wrap{max-width:1160px;margin:0 auto;padding:0 16px;text-align:center}
.os-title{font:600 clamp(30px,6.4vw,48px)/1.08 var(--display);letter-spacing:.08em;margin:0;color:var(--cream)}
.os-line{margin:12px auto 0;font:400 clamp(18px,4.6vw,22px)/1.35 var(--display);color:#d8dce6;max-width:30em}
/* the film: the same look as the curriculum films (.twh-films .twh-lp): 9:16, 14px corners, black, soft shadow.
   Desktop: at most 420 px wide and never taller than 80% of the window; phone: the full content width. */
.os-film{margin:28px auto 0;width:min(100%,420px,calc(80svh * 9 / 16));min-width:min(100%,240px)}
.os-vp{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.os-vp video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.os-prod{margin:16px auto 0;max-width:40em;font-size:13px;color:var(--muted)}
/* a clear play button on the poster (the native bar covered the score); controls appear once it plays */
.os-vp{border:1px solid rgba(246,239,224,.18)}
.os-play{position:absolute;left:50%;top:31%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(14,26,56,.78);box-shadow:0 6px 24px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .15s ease}
.os-play span{display:block;width:0;height:0;margin-left:7px;border-style:solid;border-width:14px 0 14px 23px;border-color:transparent transparent transparent #f6efe0}
.os-play:hover,.os-play:focus-visible{background:rgba(232,168,56,.92);transform:translate(-50%,-50%) scale(1.06);outline:none}
.os-play:focus-visible{box-shadow:0 0 0 3px #f6efe0}
.os-vp.is-on .os-play{display:none}
/* the subtitle: balanced lines, no lone last word */
.os-line{max-width:34em;text-wrap:balance}