/* film-cover.css: the cover of /, /join and /for-makers (docs/join-redesign/spec.md 3.0a).

   The film is shown at its own 16:9 shape and never cropped: the window is aspect-ratio 16 / 9 and
   the video fills it with object-fit cover, which at equal shapes crops nothing. When space is short
   the window shrinks WHOLE (a max-inline-size); it never changes shape. That is the rule that makes a
   face cut in half impossible with any 16:9 film, and it is why swapping the film is a file operation
   with no crop, scrim or position to tune. Each page has its own film, named by the window's
   data-film: none is the landing's market (hero-film.*), "join" the workshop of /join (join-film-intro
   once, then the join-film loop, assets/film-chain.js), "makers" the factory of /for-makers
   (makers-film.*). Every poster is its film's frame 0 (the landing's too, re-cut 2026-09-26: it was
   frame 55 and the picture jumped when the film started), so the first frame of the film lands on
   the exact picture that was already there.

   Nothing is ever drawn over the film: no scrim, no gradient, no grid, no toolpath curve. The words
   sit beside it on their own ground (paper on /join, the navy enclosure on the landing), so their
   contrast is the ground's and never depends on a frame of the film. The pause control is the one
   thing on the window, and it is a control, not a wash.

   The poster is a CSS background of the window, so it paints before the video has a byte, and it is
   all there is under reduced motion (the video is never shown, and startFilm never loads it). */

.fc { position: relative; padding-block: 8px 20px; background: var(--g); color: var(--tx); }
.fc-in { max-inline-size: 1200px; margin-inline: auto; padding-inline: 16px; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: center; }
.fc-copy { min-inline-size: 0; }
.fc-film { position: relative; min-inline-size: 0; container-type: inline-size; }
.fc-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--sunk) url(img/hero-film-poster.webp) center / 100% 100% no-repeat; }
.fc-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the page's own poster. /join paints the intro's frame 0 (the door closed) first; .is-loop is set by
   film-chain.js only when the film cannot run (reduced motion, a refused autoplay, a failed intro), so
   the loop's poster is never fetched for a picture two films already cover */
.fc-frame[data-film="join"] { background-image: url(img/join-film-intro-poster.webp); }
.fc-frame[data-film="join"].is-loop { background-image: url(img/join-film-poster.webp); }
.fc-frame[data-film="makers"] { background-image: url(img/makers-film-poster.webp); }
/* the intro, once the loop has painted its first frame over the same picture (film-chain.js) */
.fc-frame video.fc-gone { visibility: hidden; }

/* the pause control (WCAG 2.2.2: the film loops past five seconds). Outside the aria-hidden frame,
   at the window's bottom inline-end corner. Cream on --dark-1 at .72 over any frame of the film:
   the disc is its own ground (the icon reads 11.9:1 on the disc at its lightest). The focus ring is
   two toned, cream between two navy bands, so it holds on any frame of any film: a one colour ring
   over moving pixels fell under 3:1 against its neighbours in 67 to 88% of samples. */
.film-toggle { position: absolute; z-index: 2; inset-block-end: 12px; inset-inline-end: 12px;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; cursor: pointer; color: var(--on-enc); background: rgba(var(--dark-1-rgb), .72);
  border: 1px solid rgba(var(--powder-rgb), .22); transition: background .2s; }
.film-toggle:hover, .film-toggle:focus-visible { background: rgba(var(--dark-1-rgb), .92); }
.film-toggle svg { width: 15px; height: 15px; }
.film-toggle:focus-visible { outline: 2px solid var(--on-enc); outline-offset: 2px; box-shadow: 0 0 0 6px var(--dark-1); }
/* a small window (a short phone, a narrow tablet column): a smaller disc, so the control does not
   cover the picture, with the same 44px hit area, extended invisibly around it */
@container (max-width: 279px) {
  .film-toggle { inset-block-end: 6px; inset-inline-end: 6px; width: 32px; height: 32px; }
  .film-toggle svg { width: 12px; height: 12px; }
  .film-toggle::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } /* 32 + 2 x (6 + its 1px border) = 44 */
}

/* a phone: the window runs edge to edge under the words (219px tall at 390, 180 at 320) */
@media (max-width: 599px) {
  .fc-film { margin-inline: -16px; }
}
/* a tablet or a landscape phone: a framed window, never taller than the screen allows */
@media (min-width: 600px) and (max-width: 899px) {
  .fc-film { inline-size: 100%; max-inline-size: calc(56svh * 16 / 9); margin-inline: auto; }
  .fc-frame { border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(74, 48, 28, .35); }
}
/* a desktop: two columns, the words at the inline start and the film framed on its mat beside them */
@media (min-width: 900px) {
  .fc { padding-block: 20px 44px; }
  .fc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); column-gap: 56px; }
  .fc-copy { grid-column: 1; grid-row: 1; }
  .fc-film { grid-column: 2; grid-row: 1; }
  .fc-frame { border-radius: 28px; box-shadow: 0 0 0 8px var(--card), 0 0 0 9px var(--line), 0 30px 60px -28px rgba(74, 48, 28, .45); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .fc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: 36px; }
}
@media (min-width: 1600px) {
  .fc-in { max-inline-size: 1320px; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); }
}
@media (min-width: 2200px) {
  .fc-in { max-inline-size: 1480px; grid-template-columns: minmax(0, 1fr) minmax(0, 820px); }
}

/* the landing: the same window on the navy enclosure, the words in its own inks */
.fc.enclosure { background: var(--enc); color: var(--on-enc); }
.fc.enclosure .fc-frame { box-shadow: 0 0 0 1px var(--enc-line), 0 30px 60px -28px rgba(0, 0, 0, .6); }
@media (min-width: 900px) {
  .fc.enclosure .fc-frame { box-shadow: 0 0 0 8px rgba(var(--powder-rgb), .06), 0 0 0 9px var(--enc-line), 0 30px 60px -28px rgba(0, 0, 0, .6); }
}
/* the landing's cover sits on the site's own column (index.html .inner: 1080 plus var(--wrap-x), and
   growing past 1600 by the same formula), so the headline's edge lines up with the bar's brand and every
   section heading below it. The film column is narrower there to keep the headline its measure */
.fc.enclosure .fc-in { max-inline-size: 1080px; padding-inline: var(--wrap-x, 20px); }
@media (max-width: 599px) { .fc.enclosure .fc-film { margin-inline: calc(-1 * var(--wrap-x, 20px)); } }
@media (min-width: 900px) {
  .fc.enclosure .fc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 40px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .fc.enclosure .fc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 32px; }
}
/* from 1600 the column grows by the site's formula; the film keeps 520 until 1800, so the headline
   keeps its two lines while the container is still close to 1080 (at 1600 a 580 film left it 412px
   and three lines) */
@media (min-width: 1600px) {
  .fc.enclosure .fc-in { max-inline-size: min(calc(1080px + (100vw - 1600px) * .3), 1320px); column-gap: 48px; }
}
@media (min-width: 1800px) {
  .fc.enclosure .fc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); }
}
@media (min-width: 2200px) {
  .fc.enclosure .fc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); }
}

/* no motion: the poster, and nothing of the film is ever fetched (startFilm returns first). The play
   control stays, because choosing to watch is the visitor's call: pressing it marks the frame
   .is-played and only then is the film shown */
@media (prefers-reduced-motion: reduce) {
  .fc-frame:not(.is-played) video { display: none; }
  /* /join: no door opening, only the open workshop (the loop's frame 0), before any script runs */
  .fc-frame[data-film="join"] { background-image: url(img/join-film-poster.webp); }
}