/* The film, in the home page's demo section and at the top of /demo: one frame, captions drawn in the page's own type
   from the film's caption file, and three quiet controls. The frame stays dark in both themes; the film is. Its still
   is the frame's background, so each screen size downloads only its own: phones get the vertical film, recomposed for
   a tall screen. */
.film{display:grid;gap:18px;margin:0}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#05070C url(/assets/film/getsetkeys-film-v1.jpg) center/cover no-repeat;border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.film-video{display:block;width:100%;height:100%;object-fit:cover;background:transparent}

.film-cap{position:absolute;left:0;right:0;bottom:clamp(62px,9%,86px);display:flex;justify-content:center;margin:0;padding:0 16px;pointer-events:none;opacity:0;transition:opacity .18s ease}
.film-cap.on{opacity:1}
.film-cap span{max-width:min(92%,900px);padding:.3em .72em .34em;border-radius:10px;background:rgba(5,7,12,.74);color:#F6F8FC;font:500 clamp(.875rem,1.5vw,1.3rem)/1.35 var(--f-body);letter-spacing:-.005em;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.film-ui{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:clamp(10px,1.6vw,18px);background:linear-gradient(to top,rgba(5,7,12,.55),rgba(5,7,12,0))}
.film-gap{flex:1}
.film-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(16,21,31,.64);color:#F6F8FC;font:600 .875rem/1 var(--f-body);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .15s ease}
.film-btn:hover{background:rgba(16,21,31,.86)}
.film-btn:focus-visible,.film-start:focus-visible{outline:2px solid #8FA6FF;outline-offset:2px}
.film-btn .ico{width:18px;height:18px}
.film-icon{width:40px;padding:0;justify-content:center}
.film-icon[aria-pressed="false"]{color:rgba(246,248,252,.55)}
.film-on,.film-off,.film-pause,.film-resume{display:inline-flex;align-items:center;gap:8px}
.film-off,.film.is-sound .film-on,.film-resume,.film.is-paused .film-pause{display:none}
.film.is-sound .film-off,.film.is-paused .film-resume{display:inline-flex}

.film-start{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;border:0;background:rgba(5,7,12,.3);color:#F6F8FC;cursor:pointer}
.film-start[hidden]{display:none}
.film-start-ico{display:grid;place-items:center;width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border-radius:50%;background:var(--acc);color:var(--acc-glyph);box-shadow:0 18px 50px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.25)}
.film-start-ico .ico{width:38%;height:38%;margin-left:7%}
.film-start-txt{font:600 1rem/1 var(--f-body);text-shadow:0 1px 10px rgba(0,0,0,.55)}

.film-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.film-len{color:var(--muted);font-size:.9375rem}
.film-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.film-link{color:var(--ink-2);font-weight:500;font-size:.9375rem;text-decoration:underline;text-underline-offset:.2em}
.film-transcript{max-width:70ch;color:var(--muted);font-size:.9375rem;line-height:1.6}
.film-transcript summary{width:max-content;max-width:100%;cursor:pointer;color:var(--ink-2);font-weight:600}
.film-transcript p{margin:.55em 0 0}

/* Chapters, on /demo: jump to a moment; the one playing is marked. */
.film-chapters{margin-top:clamp(20px,2.6vw,30px)}
.film-chapters ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:4px 14px}
.film-chapters button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:3.1em minmax(0,1fr);gap:8px;width:100%;padding:9px 12px;border-radius:12px;cursor:pointer;color:var(--ink-2);font:500 .9375rem/1.35 var(--f-body);transition:background-color .15s ease}
.film-chapters button:hover{background:var(--acc-soft)}
.film-chapters button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.film-chapters .tc{font:500 .8125rem/1.6 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.film-chapters li.now button{background:var(--acc-soft);color:var(--ink)}
.film-chapters li.now .tc{color:var(--acc-text)}

/* Phones: the vertical film, sized so the whole frame fits on screen, with captions clear of the controls. Keep the
   width in step with the tall query in film.js. */
@media (max-width:640px){
  .film-frame{aspect-ratio:9/16;width:min(100%,calc((100vh - 120px) * 9 / 16));width:min(100%,calc((100svh - 120px) * 9 / 16));justify-self:center;border-radius:20px;background-image:url(/assets/film/getsetkeys-film-vertical-v1.jpg)}
  .film-btn{min-height:36px;padding:0 12px;font-size:.8125rem}
  .film-icon{width:36px;padding:0}
  .film-cap{bottom:62px}
  .film-cap span{max-width:88%;font-size:.9rem}
  .film-links{width:100%}
}
@media (prefers-reduced-motion:reduce){.film-chapters button{transition:none}}