/* The launch film and the trailer, one player on two pages (owner order, 27 Oct 2026; design A, approved in the question
   box): under the Partner Program page's title (and so on /apply and /resign), and on the home page under the live show
   and its LIVE BUYS strip, above HOW TO BUY (owner, 29 Oct 2026, placement B, approved in the question box).
   tools/quit-site/films.mjs writes the markup and runtime/quit/films.js plays it. Real HTML in the site's own materials:
   the riveted gunmetal bay, the green phosphor glass and the arcade keys are the site's deck plates (runtime/quit/deck-art,
   laid as 9-slice border-images), and every word is live text in the site's faces, through the theme's tokens.
   The player's rules use its own class names only. Its tokens and resets come from the page around it: .qp on the
   Partner Program page (partners.css), .q-films on the home page (below, with the same values), so the two draw alike. */

/* ---------------------------------------------------------------- the home page's room for the player: what .qp gives it
   on the Partner Program page, the same tokens, face, resets and side padding at every width, and the room above and
   below it that the approved placement draws (desktop-B, phone-B). Before the player's rules, so the player's own
   margins and padding win over the resets. */
.q-films{
 --qp-green:var(--t-green,#25dc71);--qp-orange:var(--t-orange,#ff610b);--qp-ink:var(--t-ink,#f4e7cb);--qp-red:var(--t-red,#ff6860);
 --qp-focus:var(--t-focus,#fff0ad);
 --qp-display:var(--t-font-display,"QUIT Display",monospace);--qp-pixel:var(--t-font-pixel,"QUIT Pixel",monospace);
 --qp-body:var(--t-font-body,"IBM Plex Mono",monospace);
 --qp-pad:clamp(12px,1.6vw,24px);
 --qp-bay:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/18px 20px stretch;
 box-sizing:border-box;width:100%;margin:24px 0;padding:16px var(--qp-pad) 40px;
 color:var(--qp-ink);font:400 22px/1.35 var(--qp-body);text-align:left;overflow-wrap:break-word
}
.q-films *,.q-films *::before,.q-films *::after{box-sizing:border-box}
.q-films :where(h1,h2,h3,p,ol,ul,fieldset,legend,figure){margin:0;padding:0}
.q-films :focus-visible{outline:3px solid var(--qp-focus);outline-offset:3px}
@media(max-width:359px){.q-films{padding-inline:8px}}

/* ---------------------------------------------------------------- the core promise above the player (the owner, 30 Oct
   2026, the home copy audit's H-006): the war room's own title and lede under LIVE BUYS (tools/quit-site/org-chart.mjs
   renderPromise), in the war room's colours and the site's faces (the pixel face for the title, the body face for the
   lede), its left edge on the films' heading below: the room's pad, the bay's border and padding, the heading's 4 px. */
.q-promise{--qr-pad:clamp(12px,1.6vw,24px);box-sizing:border-box;width:100%;margin:16px 0 0;padding:0 calc(var(--qr-pad) + 42px);color:#f4e7cb;text-align:left}
.q-promise :where(p){margin:0;padding:0}
.q-promise__title{font:700 clamp(30px,3.3vw,54px)/1.05 var(--t-font-pixel,"QUIT Pixel",monospace);letter-spacing:.02em;text-shadow:3px 3px 0 #000}
.q-promise__quit{color:#efe3c4}
.q-promise__ai{color:#ff6a13;text-shadow:3px 3px 0 #6b2200,4px 4px 0 #000}
.q-promise__lede{max-width:64ch;margin-top:8px;font:400 clamp(18px,1.5vw,24px)/1.3 var(--t-font-body,"IBM Plex Mono",monospace)}
/* MEET THE STAFF: the site's own key (the c-btn component in the arcade skin, as GET ON THE ORG CHART), on its own row. */
.q-promise .c-btn.q-promise__key{margin-top:14px;letter-spacing:.04em;white-space:nowrap}
@media(max-width:767px){
 .q-promise{margin-top:14px;padding-inline:34px 22px}
 .q-promise__title{font-size:min(7.2vw,34px);line-height:1.06}
 .q-promise__title>span{display:block}
 .q-promise__lede{margin-top:6px;font-size:17px;line-height:1.3}
 .q-promise .c-btn.q-promise__key{margin-top:12px}
}
@media(max-width:359px){.q-promise{padding-inline:22px 12px}}

/* ---------------------------------------------------------------- the player: the launch film centred in a riveted screen
   with a lit green edge, the trailer the second slide, peeking at both sides as the carousel's neighbours, and the two keys
   under them. One film is centred at a time (scroll snap); the ghosts at the track's two ends are pictures of the film
   that is not centred, so it shows on both sides.
   A desktop plays the 16:9 film, a phone the 9:16 one; films.js makes the <video> only when PLAY is pressed, so
   nothing downloads before that. --qp-fw is one slide, bezel included: 62% of the stage on a desktop (80% on a phone),
   and never so tall that the picture, the keys and the header pass the window's height (--qp-fchrome). */
.qp-films{position:relative;margin:0 0 16px;padding:14px 18px 12px;border:solid transparent;border-width:18px 20px;border-image:var(--qp-bay)}
.qp-films__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:0 4px 14px}
.qp-films__kicker{padding:6px 9px 5px;border:2px solid var(--qp-green);color:var(--qp-green);font:700 clamp(13px,1.1vw,17px)/1 var(--qp-display);letter-spacing:.04em}
.qp-films__title{color:var(--qp-orange);font:700 clamp(26px,3vw,48px)/1.05 var(--qp-pixel);letter-spacing:.02em;text-shadow:3px 3px 0 #6b2200,4px 4px 0 #000}
/* on a phone the heading breaks as the comp draws it: THE QUIT FACTORY over IS LIVE. */
.qp-films__row{display:inline}
.qp-films__line{color:var(--qp-ink);font:400 clamp(20px,1.6vw,25px)/1.3 var(--qp-body)}
.qp-films__stage{container-type:inline-size;margin:0 -8px}
.qp-films__track{
 --qp-fr:16/9;--qp-fchrome:330px;--qp-fbez:30px;
 --qp-fw:min(62cqi,calc((100svh - var(--qp-fchrome)) * 16 / 9 + var(--qp-fbez)));
 position:relative;display:flex;gap:clamp(10px,1.4cqi,22px);margin:0;padding:6px 0 10px;list-style:none;
 overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qp-films__track::-webkit-scrollbar{display:none}
.qp-film,.qp-films__ghost{flex:none;width:var(--qp-fw);margin:0;padding:0;scroll-snap-align:center}
.qp-film__screen{position:relative;border:solid transparent;border-width:13px 15px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/13px 15px stretch;
 transition:transform .35s ease-out}
.qp-film__glass{position:relative;aspect-ratio:var(--qp-fr);overflow:hidden;background:#000;box-shadow:0 0 0 2px var(--qp-green),0 0 26px 3px #25dc7166}
.qp-film__poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:filter .35s linear}
.qp-film__poster--tall{display:none}
.qp-film__video{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* the film that is not centred: smaller, dimmed, its edge unlit, shrunk toward the centred one, and a press centres it */
.qp-film:not([data-on]) .qp-film__screen,.qp-films__ghost .qp-film__screen{transform:scale(.86);cursor:pointer}
.qp-film:not([data-on]) .qp-film__poster,.qp-film:not([data-on]) .qp-film__video,.qp-films__ghost .qp-film__poster{filter:brightness(.45) saturate(.85)}
.qp-film:not([data-on]) .qp-film__video{pointer-events:none}
.qp-film:not([data-on]) .qp-film__glass,.qp-films__ghost .qp-film__glass{box-shadow:0 0 0 2px #1d2a22}
[data-side="before"] .qp-film__screen{transform-origin:100% 50%}
[data-side="after"] .qp-film__screen{transform-origin:0 50%}
/* PLAY: the site's orange key, square, with the play sign and its word */
.qp-film__play{position:absolute;z-index:3;left:50%;top:64%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,.7cqi,10px);
 width:clamp(92px,10.5cqi,150px);aspect-ratio:1.08;margin:0;padding:6px 8px 14px;border:0 solid transparent;border-radius:0;
 border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/10px 11px 15px stretch;background:none;color:#1d0800;cursor:pointer;
 touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out,filter .12s linear}
.qp-film__glyph{display:block;width:clamp(26px,3cqi,44px);aspect-ratio:.9;background:#1d0800;clip-path:polygon(10% 0,100% 50%,10% 100%)}
.qp-film__word{font:700 clamp(18px,2.1cqi,30px)/1 var(--qp-display);letter-spacing:.08em}
.qp-film__play:active{border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp);transform:translateY(2px)}
.qp-film__play:focus-visible{outline-offset:4px}
@media(hover:hover){.qp-film__play:hover{filter:brightness(1.08)}}
.qp-film:not([data-on]) .qp-film__play{visibility:hidden}
/* the film's tag: its length on the centred film, its name and length on a neighbour, on the side that shows */
.qp-film__tag{position:absolute;z-index:3;left:12px;bottom:12px;margin:0;padding:6px 10px 5px;border:2px solid var(--qp-green);background:#030805e6;
 color:var(--qp-green);font:700 clamp(14px,1.3cqi,19px)/1 var(--qp-display);letter-spacing:.04em;white-space:nowrap}
.qp-film[data-on] .qp-film__name{display:none}
.qp-film[data-side="before"] .qp-film__tag{left:auto;right:12px}
.qp-film[data-live] .qp-film__play,.qp-film[data-live] .qp-film__tag{display:none}
.qp-film__fail{position:absolute;z-index:4;left:12px;right:12px;bottom:12px;padding:10px 12px;border:2px solid var(--qp-red);background:#030805e6;color:var(--qp-ink);
 font:700 15px/1.25 var(--qp-display);letter-spacing:.02em;text-align:center}
.qp-film__fail[hidden]{display:none}
/* the keys under the films: the centred one lit orange, the other dark with its words in green */
.qp-films__keys{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;margin:6px 0 0}
.qp-films__key{display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,18px);min-width:min(100%,330px);min-height:60px;margin:0;padding:5px 22px 11px;
 border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;background:none;
 color:var(--qp-green);font:700 clamp(17px,1.5vw,23px)/1 var(--qp-display);letter-spacing:.06em;cursor:pointer;touch-action:manipulation;
 -webkit-tap-highlight-color:transparent;transition:transform .12s ease-out,filter .12s linear}
.qp-films__n{position:relative;top:-.07em;font:700 1.45em/.8 var(--qp-pixel)}
.qp-films__label{flex:1;text-align:left}
.qp-films__key[aria-pressed="true"]{border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
.qp-films__key:active{transform:translateY(2px)}
@media(hover:hover){.qp-films__key:hover{filter:brightness(1.1)}}
.qp-films__pips{display:flex;justify-content:center;gap:10px;margin:12px 0 2px}
.qp-films__pips i{display:block;width:11px;height:11px;border:2px solid #3f5446}
.qp-films__pips i[data-on]{border-color:var(--qp-green);background:var(--qp-green);box-shadow:0 0 7px #25dc71aa}
@media(max-width:767px){
 .qp-films{margin-bottom:12px;padding:10px 6px;border-width:12px;border-image-width:12px}
 .qp-films__head{display:block;padding:0 4px 12px}
 .qp-films__kicker{display:inline-block;margin-bottom:10px;font-size:14px}
 .qp-films__title{font-size:min(8vw,36px);line-height:1.08}
 .qp-films__row{display:block}
 .qp-films__line{margin-top:8px;font-size:20px}
 /* the track runs to the plate's outer edges, so the neighbours show at both sides of the phone */
 .qp-films__stage{margin:0 -18px}
 .qp-films__track{--qp-fr:9/16;--qp-fchrome:300px;--qp-fbez:24px;--qp-fw:max(min(70cqi,220px),min(80cqi,calc((100svh - var(--qp-fchrome)) * 9 / 16 + var(--qp-fbez))));gap:10px}
 .qp-film__screen{border-width:10px 12px;border-image-width:10px 12px}
 .qp-film__poster--wide{display:none}
 .qp-film__poster--tall{display:block}
 .qp-film__play{width:clamp(84px,30cqi,120px)}
 /* the launch film's phone cut has open sky under its 50,000%; the trailer's phone card keeps Gary clear, its key over the smoke */
 #qp-film-launch .qp-film__play{top:50%}
 .qp-film__glyph{width:clamp(24px,8cqi,34px)}
 .qp-film__word{font-size:clamp(17px,5.6cqi,24px)}
 .qp-film__tag{left:10px;bottom:10px;font-size:14px}
 /* a neighbour shows too little of itself on a phone for its tag */
 .qp-film:not([data-on]) .qp-film__tag{display:none}
 .qp-films__keys{flex-wrap:nowrap;gap:8px}
 /* the words stay inside the key's lit frame (about 10 px in) */
 .qp-films__key{flex:1 1 0;min-width:0;min-height:54px;padding:4px 13px 10px;gap:5px;font-size:clamp(11px,3.4vw,15px);letter-spacing:0}
 .qp-films__n{font-size:1.25em}
 .qp-films__label{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
 .qp-films__track{scroll-behavior:auto}
 .qp-film__screen,.qp-film__poster,.qp-film__play,.qp-films__key{transition:none}
}