/* Baito hand-drawn films (26 Sep 2026). Shared by the homepage (Rayo, 1rem = 10px) and /workshops/ (1rem = 16px),
   so sizes are px. Colours come from each page's own tokens: Rayo --accent/--base-tint, workshops --blue/--surface.
   The frame reserves the film's aspect ratio (no layout shift); phones in portrait get the 9:16 cut. */
.baito-film{margin:0}
.baito-film__frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--_radius-m,24px);background:var(--base-tint,var(--surface))}
.baito-film__video,.baito-film__poster,.baito-film__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.baito-film__video{background:transparent}
.baito-film__poster{transition:opacity .4s}
.baito-film__play{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;color:inherit}
.baito-film__cue,.baito-film__toggle{position:absolute;align-items:center;gap:10px;min-height:48px;padding:10px 22px 10px 16px;border-radius:999px;background:var(--accent,var(--blue));color:#fff;font:600 16px/1.2 'Funnel Sans',sans-serif;letter-spacing:0;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.baito-film__cue{display:inline-flex;left:50%;bottom:6%;transform:translateX(-50%);white-space:nowrap}
.baito-film__cue::before,.baito-film__toggle::before{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor}
.baito-film__cue small{font-size:14px;opacity:.8}
.baito-film__play:hover .baito-film__cue{filter:brightness(1.1)}
.baito-film__play:focus-visible{outline:none}
.baito-film__play:focus-visible .baito-film__cue,.baito-film__toggle:focus-visible{outline:3px solid var(--accent,var(--blue));outline-offset:4px}
.baito-film.is-playing .baito-film__play{display:none}
.baito-film.is-playing .baito-film__poster{opacity:0;pointer-events:none}
.baito-film__toggle{right:16px;bottom:16px;border:0;cursor:pointer;padding:10px 18px 10px 14px;font-size:14px}
.baito-film__toggle[aria-label^="Pause"]::before{width:4px;height:14px;border-width:0 4px;border-color:currentColor;border-style:solid;background:none}
.baito-film__caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
/* Full-film dialog (/workshops/) */
.film-dialog{width:min(1200px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--_radius-m,24px);background:#000;overflow:visible}
.film-dialog::backdrop{background:rgba(0,10,30,.82)}
.film-dialog video{display:block;width:100%;max-height:calc(100dvh - 32px);aspect-ratio:16/9;border-radius:inherit;background:#000}
.film-dialog form{position:absolute;top:-8px;right:-8px;z-index:1;margin:0}
.film-dialog__close{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--surface,#fff);color:var(--ink,#000);font:600 28px/1 sans-serif;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.film-dialog__close:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (orientation:portrait){
 .baito-film__frame{aspect-ratio:9/16;width:min(100%,calc(80vh * 9 / 16));width:min(100%,calc(80svh * 9 / 16));margin-inline:auto}
 .film-dialog{width:min(calc(100vw - 32px),calc((100dvh - 32px) * 9 / 16))}
 .film-dialog video{aspect-ratio:9/16}
 .film-dialog form{top:8px;right:8px}
}
@media (max-width:480px){.baito-film__cue{font-size:15px;bottom:4%}}
@media (min-width:1200px){.baito-film__cue{font-size:18px;min-height:56px;padding:12px 28px 12px 22px}}
@media (prefers-reduced-motion:reduce){.baito-film__poster{transition:none}}