/* Brand films: hero preview, film cards, shop clips, the player dialog and the corner reminder. Tokens from site.css.
   Cards read as stickers on the page (navy cel line, hard shadow); the player is a dim screening room where rose marks
   the action and cyan stays a signal (focus, "new"). Every cover has one play mark, in a corner, off the faces (Ice). */

/* The round play mark shared by every card: rose disc, navy line, ink triangle. */
.film-play{position:absolute;left:12px;bottom:12px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--rose);border:var(--line);box-shadow:3px 3px 0 rgb(47 44 70 / .35);transition:transform 200ms var(--ease-out)}
.film-play::before{content:"";width:0;height:0;margin-left:5px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--ink)}
.film-dur{position:absolute;right:8px;bottom:8px;padding:1px 9px;border-radius:var(--r-pill);background:rgb(47 44 70 / .84);color:var(--white);font:500 .8rem/1.6 var(--font-display);font-variant-numeric:tabular-nums}
.film-new{position:absolute;left:10px;top:10px;padding:1px 10px;border-radius:var(--r-pill);background:var(--cyan);border:1.5px solid var(--navy);color:var(--ink);font:600 .8rem/1.6 var(--font-display)}

/* Hero, 1321 px and wider: a film sticker at the character's feet, anchored to her stage so it stays beside her boots
   at every width. The three share one grid row: copy, the character, and this sticker. */
.hero:has(> .film-teaser) .hero-copy{grid-column:1;grid-row:1}
.hero:has(> .film-teaser) .hero-stage{grid-column:2;grid-row:1}
.film-teaser{position:relative;z-index:3;grid-column:2;grid-row:1;align-self:end;justify-self:center;width:min(100%,318px);margin:0 0 -30px;translate:-190px 0;rotate:-2.5deg;transition:rotate 240ms var(--ease-out)}
@media (min-width:1321px){.hero:has(> .film-teaser) .sticker-c{display:none}} /* its place is the film's */
/* Laptop screens are short (1366×768 shows about 640 px inside a browser): lift the sticker into the first screen. */
@media (min-width:1321px) and (max-height:860px){.film-teaser{width:280px;margin-bottom:70px}}
.film-teaser:hover,.film-teaser:focus-within{rotate:-1deg}
.film-teaser-link{display:block;padding:9px 9px 12px;background:var(--white);border:var(--line);border-radius:var(--r-card);box-shadow:var(--drop-lg);color:var(--ink);text-decoration:none;transition:translate 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.film-teaser-link:hover{color:var(--ink);translate:-2px -3px;box-shadow:9px 10px 0 rgb(75 74 103 / .24)}
.film-teaser-link:active{translate:1px 1px;box-shadow:3px 3px 0 rgb(75 74 103 / .24)}
.film-teaser-screen{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--ink)}
.film-teaser-screen img,.film-teaser-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-teaser-video{opacity:0;transition:opacity 500ms ease}
.film-teaser.is-live .film-teaser-video{opacity:1}
.film-teaser-screen .film-play{width:48px;height:48px}
.film-teaser-link:hover .film-play{transform:scale(1.08)}
.film-teaser-copy{display:grid;gap:1px;padding:9px 4px 0}
.film-teaser-kicker{font:500 .84rem/1.45 var(--font-display);color:var(--rose-ink)}
.film-teaser-title{font:600 1.12rem/1.35 var(--font-display)}
.film-teaser .film-new{left:auto;right:10px}
/* The preview's own pause: a 44 px target, a 32 px mark; once stopped it offers a replay (↻), never a second ▶. */
.film-teaser-motion{position:absolute;left:12px;top:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.film-teaser-motion::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px solid rgb(255 255 255 / .7);background:rgb(47 44 70 / .62)}
.film-teaser-motion::before{content:"";position:relative;z-index:1;width:10px;height:12px;background:linear-gradient(90deg,var(--white) 0 35%,transparent 35% 65%,var(--white) 65%)}
.film-teaser-motion[aria-pressed="true"]::before{content:"↻";width:auto;height:auto;background:none;color:var(--white);font:600 17px/1 var(--font-body)}
.film-teaser-motion[hidden]{display:none}
/* Laptops and tablets held sideways (861-1320 px): the columns are too close for the sticker, so a small cover card
   (no preview) sits under the bullets and the character moves down only by its height. */
@media (min-width:861px) and (max-width:1320px){
  .hero:has(> .film-teaser) .hero-copy{padding-bottom:var(--space-4)}
  .hero:has(> .film-teaser) .hero-stage{grid-row:1 / span 2}
  .film-teaser{grid-column:1;grid-row:2;align-self:start;justify-self:start;width:min(100%,430px);margin:0 0 clamp(36px,5vw,64px);translate:none;rotate:-1deg}
  .film-teaser-link{display:flex;align-items:center;gap:14px;padding:8px 18px 8px 8px}
  .film-teaser-screen{flex:none;width:136px;border-radius:10px}
  .film-teaser-video,.film-teaser-motion,.film-teaser .film-new{display:none}
  .film-teaser-screen .film-play{left:8px;bottom:8px;width:34px;height:34px}
  .film-teaser-screen .film-play::before{border-width:7px 0 7px 11px;margin-left:3px}
  .film-teaser-screen .film-dur{right:5px;bottom:5px;padding:0 6px;font-size:.72rem}
  .film-teaser-copy{padding:0}
}

/* #control: the film moment that proves the promise, inside the ink room (rose label, quiet white line). */
.control-film{display:flex;align-items:center;gap:18px;max-width:34rem;margin-top:var(--space-6);padding:10px 18px 10px 10px;border:1.5px solid rgb(255 255 255 / .3);border-radius:var(--r-card);color:var(--surface);text-decoration:none;transition:background-color 200ms ease,border-color 200ms ease}
.control-film:hover{color:var(--white);background:rgb(255 255 255 / .06);border-color:rgb(255 255 255 / .6)}
.control-film-screen{position:relative;flex:none;width:clamp(150px,16vw,210px);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.control-film-screen img{width:100%;height:100%;object-fit:cover}
.control-film-screen .film-play{left:8px;bottom:8px;width:40px;height:40px}
.control-film-screen .film-play::before{border-width:8px 0 8px 13px;margin-left:4px}
.control-film:hover .film-play{transform:scale(1.08)}
.control-film-copy{display:grid;gap:2px;line-height:1.6}
.control-film-copy b{font:500 1rem/1.4 var(--font-display);color:var(--rose)}

/* The film shelf (#films): the newest episode leads, the others stand in a column; the column of four runs longer
   than the lead, so the lead stays in view beside it (as the FAQ heading does). */
.films{position:relative;padding:var(--space-section) var(--gutter);background:var(--white);border-block:var(--line)}
.films::before,.films::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 50% 50%,var(--rose-soft) 0 3px,transparent 3.5px) 0 0/22px 10px repeat-x;opacity:.9}
.films::before{top:10px}.films::after{bottom:10px}
.films-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);max-width:1180px;margin:0 auto;align-items:start}
.film-card{display:grid;align-content:start;gap:12px;color:var(--ink);text-decoration:none}
.film-card:hover{color:var(--ink)}
.film-card-screen{position:relative;display:block;aspect-ratio:16/9;border:var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--ink);box-shadow:var(--drop);transition:translate 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.film-card-screen img{width:100%;height:100%;object-fit:cover;transition:scale 600ms var(--ease-out)}
.film-card:hover .film-card-screen{translate:-2px -3px;box-shadow:7px 8px 0 rgb(75 74 103 / .26)}
.film-card:hover .film-card-screen img{scale:1.035}
.film-card:hover .film-play{transform:scale(1.08)}
.film-card:active .film-card-screen{translate:1px 1px;box-shadow:2px 2px 0 rgb(75 74 103 / .26)}
.film-card-copy{display:grid;gap:4px}
.film-card-ep{font:500 .88rem/1.45 var(--font-display);color:var(--rose-ink)}
.film-card-title{font:600 1.25rem/1.3 var(--font-display)}
.film-card-line{max-width:36em;line-height:1.75}
.film-card-lead{position:sticky;top:96px}
.film-card-lead .film-card-screen{box-shadow:var(--drop-lg)}
.film-card-lead .film-play{left:16px;bottom:16px;width:64px;height:64px}
.film-card-lead .film-play::before{border-width:12px 0 12px 19px;margin-left:6px}
.film-card-lead .film-card-title{font-size:clamp(1.45rem,1.1rem + 1.3vw,2rem)}
.film-list{display:grid;gap:22px}
.film-list .film-card{grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);align-items:center;gap:18px}
.film-list li:nth-child(1) .film-card-screen{rotate:-1.2deg}.film-list li:nth-child(2) .film-card-screen{rotate:.9deg}.film-list li:nth-child(3) .film-card-screen{rotate:-.7deg}.film-list li:nth-child(4) .film-card-screen{rotate:1.1deg}.film-list li:nth-child(5) .film-card-screen{rotate:-.9deg}
.film-list .film-play{left:8px;bottom:8px;width:36px;height:36px}
.film-list .film-play::before{border-width:7px 0 7px 11px;margin-left:3px}
.film-list .film-dur{top:8px;bottom:auto} /* the covers' title art sits low: keep the chip up top */
.film-list .film-new{left:8px;top:6px;padding:0 8px;font-size:.72rem} /* a list card is short: the new chip stays clear of the play mark (phones: 79 px tall covers) */
.film-list .film-card-title{font-size:1.12rem}
.film-list .film-card-line{font-size:.93rem;line-height:1.65}
/* iPad landscape (1081-1240 px): a narrower cover keeps the captions to 3-5 lines and the lead's pin short (Ice). */
@media (min-width:1081px) and (max-width:1240px){.film-list .film-card{grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:14px}}
.films-note{max-width:1180px;margin:var(--space-6) auto 0;font-size:var(--text-small);color:var(--muted);text-align:center}
/* "made with ♡ by pngoung": the films are the owner's own work (Pngoung 2026-09-27, instead of any "made by AI" line). */
.film-credit{display:inline-flex;align-items:center;gap:.3em;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--rose-ink);font:500 .82rem/1.7 var(--font-display);letter-spacing:.02em;white-space:nowrap;vertical-align:baseline}
.film-credit-heart{color:var(--rose-deep)}
.film-end-note .film-credit,.foot .film-credit{border-color:rgb(255 255 255 / .28);background:transparent;color:var(--rose-soft)}
.film-end-note .film-credit-heart,.foot .film-credit-heart{color:var(--rose)}

/* #cases: the five shop clips (EP.3), one after another in the player. */
.shop-films{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);max-width:1120px;margin:var(--space-7) auto 0}
.shop-films-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.shop-films-head h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem)}
.shop-films-head p{font-size:var(--text-small);color:var(--navy)}
.shop-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,26px);min-width:0;padding:4px 2px 8px}
.shop-card{display:grid;gap:10px;justify-items:center;color:var(--ink);text-decoration:none;text-align:center}
.shop-card:hover{color:var(--ink)}
.shop-card .film-card-screen{width:100%;aspect-ratio:9/16;border-radius:var(--r-card)}
.shop-row li:nth-child(odd) .film-card-screen{rotate:-1.4deg}.shop-row li:nth-child(even) .film-card-screen{rotate:1.2deg}
.shop-card .film-play{left:10px;bottom:10px;width:46px;height:46px}
.shop-card .film-play::before{border-width:8px 0 8px 13px;margin-left:4px}
.shop-card:hover .film-card-screen{translate:-2px -3px;box-shadow:7px 8px 0 rgb(75 74 103 / .26)}
.shop-card:hover .film-play{transform:scale(1.08)}
.shop-card-name{font:500 1rem/1.4 var(--font-display)}

/* /platforms: the 15-second EP.4 ads beside TikTok (the ink room) and Instagram (a white card). */
.pf-film{display:flex;align-items:center;gap:14px;max-width:27rem;margin-top:var(--space-5);padding:8px 16px 8px 8px;border:var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--ink);text-decoration:none;transition:translate 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.pf-film:hover{color:var(--ink);translate:-2px -2px;box-shadow:var(--drop)}
.pf-film-screen{position:relative;flex:none;width:76px;aspect-ratio:9/16;border-radius:var(--r-control);overflow:hidden;background:var(--ink)}
.pf-film-screen img{width:100%;height:100%;object-fit:cover}
.pf-film-screen .film-play{left:6px;bottom:6px;width:28px;height:28px}
.pf-film-screen .film-play::before{border-width:5px 0 5px 8px;margin-left:2px}
.pf-film:hover .film-play{transform:scale(1.08)}
.pf-film-copy{display:grid;gap:2px;line-height:1.6}
.pf-film-copy b{font:500 .95rem/1.4 var(--font-display);color:var(--rose-ink)}
.pf-tiktok .pf-film{background:transparent;border-color:rgb(255 255 255 / .3);color:var(--surface)}
.pf-tiktok .pf-film:hover{color:var(--white);background:rgb(255 255 255 / .06);border-color:rgb(255 255 255 / .6);box-shadow:none}
.pf-tiktok .pf-film-copy b{color:var(--rose)}

/* The player: a screening room over the page. The page behind stays still (film-lock keeps the scrollbar's width). */
html.film-lock{overflow:hidden}
html.film-lock body{padding-right:var(--film-gap,0)}
.film-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(10px,2.5vw,36px);border:0;background:rgb(47 44 70 / .96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);overscroll-behavior:contain;opacity:0;transition:opacity 200ms ease}
.film-dialog[open]{display:grid;place-items:center}
.film-dialog.is-in{opacity:1}
.film-dialog.is-out{opacity:0;transition-duration:160ms}
.film-dialog::backdrop{background:transparent}
.film-dialog :focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.film-shell{display:grid;gap:12px;width:min(100%,1280px,calc((100dvh - 150px) * 16 / 9));translate:0 12px;scale:.985;transition:translate 280ms var(--ease-out),scale 280ms var(--ease-out)}
/* An upright clip: the bar and the shop row keep a comfortable width, the picture takes the height that is left. */
.film-shell.is-tall{width:min(100%,760px)}
.film-dialog.is-in .film-shell{translate:0 0;scale:1}
.film-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px}
.film-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.film-ep{padding:1px 10px;border-radius:var(--r-pill);background:var(--rose);border:1.5px solid var(--navy);color:var(--ink);font:600 .8rem/1.6 var(--font-display)}
.film-name{font:500 clamp(1rem,.92rem + .45vw,1.25rem)/1.35 var(--font-display);color:var(--white);text-wrap:balance}
.film-count{color:var(--rose-soft);font-size:.9rem;font-variant-numeric:tabular-nums}
.film-tools{display:flex;align-items:center;gap:8px;flex:none}
/* Quiet while the film plays (Ice): the offer belongs to the end card, where this one steps aside. */
.film-start{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r-pill);border:1.5px solid rgb(243 145 169 / .7);color:var(--rose-soft);font:500 .9rem/1.2 var(--font-display);text-decoration:none;transition:background-color 160ms ease}
.film-start:hover{color:var(--white);background:rgb(243 145 169 / .16)}
.film-dialog.is-ended .film-start{visibility:hidden}
.film-copy{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid rgb(255 255 255 / .38);background:transparent;color:var(--white);font:500 .88rem/1.2 var(--font-display);cursor:pointer}
.film-copy:hover{background:rgb(255 255 255 / .1)}
.film-copy svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.film-x{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid rgb(255 255 255 / .38);background:rgb(255 255 255 / .08);cursor:pointer}
.film-x:hover{background:rgb(255 255 255 / .2)}
.film-x svg{width:20px;height:20px;fill:none;stroke:var(--white);stroke-width:2.2;stroke-linecap:round}
.film-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 90px rgb(0 0 0 / .5),0 0 0 1.5px rgb(255 255 255 / .12)}
.film-shell.is-tall .film-stage{justify-self:center;width:auto;max-width:100%;height:calc(100dvh - 200px);aspect-ratio:9/16}
.film-shell.is-tall .film-queue{justify-content:safe center}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.film-wait{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.film-wait svg{width:76px;height:76px;overflow:visible}
.film-wait circle{fill:none;stroke-linecap:round;transform-origin:50% 50%;transform-box:fill-box}
.film-wait circle:first-child{stroke:var(--rose);stroke-width:5;stroke-dasharray:62 180;animation:spin 900ms linear infinite}
.film-wait circle:last-child{stroke:rgb(255 255 255 / .55);stroke-width:1.5;stroke-dasharray:2 8;animation:spin 7s linear infinite reverse}
.film-big-play{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:0;border:0;background:linear-gradient(rgb(47 44 70 / .1),rgb(47 44 70 / .55));color:var(--white);font:500 1.05rem/1.3 var(--font-display);cursor:pointer}
.film-big-play .film-play{position:relative;left:auto;bottom:auto;width:86px;height:86px}
.film-big-play .film-play::before{border-width:16px 0 16px 25px;margin-left:8px}
.film-big-play:hover .film-play{transform:scale(1.06)}
/* The overlays scroll from the top when a short screen cannot hold them; the auto margins centre them otherwise. */
.film-next,.film-end,.film-error{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(16px,4%,44px);overflow:auto;text-align:center;background:rgb(47 44 70 / .88);backdrop-filter:blur(8px)}
/* The column never grows past the card: on a 320 px phone the credit pill (about 200 px) used to widen it past the
   stage (175 px inside), cutting the buttons at the edges; now a wider item overflows alone, centred, into the padding. */
.film-card-in{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px;width:100%;margin:auto}
.film-next[hidden],.film-end[hidden],.film-error[hidden],.film-wait[hidden],.film-big-play[hidden],.film-queue[hidden]{display:none}
.film-next-thumb{width:90px;height:160px;object-fit:cover;border-radius:var(--r-control);border:1.5px solid rgb(255 255 255 / .3)}
.film-next-label{color:var(--rose-soft);font-size:.9rem}
.film-next-name{font:500 1.3rem/1.35 var(--font-display)}
.film-next-ring{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--rose) var(--p,0%),rgb(255 255 255 / .18) 0);-webkit-mask:radial-gradient(circle,transparent 55%,#000 57%);mask:radial-gradient(circle,transparent 55%,#000 57%);animation:film-count 3s linear both}
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes film-count{to{--p:100%}}
.film-next-actions,.film-end-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.film-next-go,.film-end-start,.film-retry{display:inline-flex;align-items:center;min-height:46px;white-space:nowrap;padding:10px 22px;border-radius:var(--r-pill);border:1.5px solid var(--navy);background:var(--rose);color:var(--ink);font:500 1rem/1.2 var(--font-display);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 rgb(0 0 0 / .35)}
.film-next-go:hover,.film-end-start:hover,.film-retry:hover{color:var(--ink);background:var(--rose-soft)}
/* An upright stage on a small phone is about 200 px wide: the offer may use the card's 16 px side padding, and wraps
   between its phrases only when it is wider than that (the partner clip's "ขอคำเชิญทาง LINE @nongkao"; the shops'
   "เริ่มใช้ฟรี 30 เครดิต" stays on one line, so both buttons stay in view on a 375×553 screen). */
.film-shell.is-tall .film-end-actions{max-width:100%}
.film-shell.is-tall .film-end-start{flex-shrink:0;max-width:calc(100% + 24px);padding-inline:18px;white-space:normal;justify-content:center;text-align:center}
.film-next-stop,.film-end-again{display:inline-flex;align-items:center;min-height:46px;white-space:nowrap;padding:10px 20px;border-radius:var(--r-pill);border:1.5px solid rgb(255 255 255 / .45);background:transparent;color:var(--white);font:500 1rem/1.2 var(--font-display);cursor:pointer}
.film-next-stop:hover,.film-end-again:hover{background:rgb(255 255 255 / .1)}
.film-end-face{width:64px;height:64px;border-radius:50%;border:2px solid var(--rose);background:var(--white)}
.film-end-title{font:500 clamp(1.15rem,1rem + 1vw,1.6rem)/1.35 var(--font-display);text-wrap:balance}
.film-end-sub{color:var(--rose-soft);text-wrap:balance}
.film-end-more{display:grid;gap:8px;justify-items:center;margin-top:10px}
.film-end-more-label{color:var(--rose-soft);font-size:.88rem}
.film-end-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.film-shell.is-tall .film-end-list{display:grid;width:min(100%,19rem)}
.film-end-link{display:flex;align-items:center;gap:10px;max-width:16rem;padding:6px 12px 6px 6px;border-radius:var(--r-control);border:1.5px solid rgb(255 255 255 / .25);color:var(--white);text-decoration:none;text-align:left}
.film-end-link:hover{color:var(--white);background:rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .5)}
.film-end-link img{flex:none;width:96px;height:54px;object-fit:cover;border-radius:8px}
.film-end-link-text{display:grid;line-height:1.35}
.film-end-link-text b{font:500 .88rem/1.35 var(--font-display)}
.film-end-link-text small{color:var(--rose-soft);font-size:.8rem}
.film-end-note{max-width:30em;margin-top:6px;color:var(--rose-soft);font-size:.8rem;line-height:1.6;opacity:.85}
.film-error-title{font:500 1.25rem/1.35 var(--font-display)}
.film-error-sub{color:var(--rose-soft)}
.film-direct{color:var(--rose-soft);font-size:.92rem}
.film-queue{display:flex;gap:8px;margin:0;padding:2px 2px 4px;overflow-x:auto;scrollbar-width:none}
.film-queue li{flex:none}
.film-chip{min-height:44px;white-space:nowrap;padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid rgb(255 255 255 / .35);background:transparent;color:var(--white);font:500 .9rem/1.2 var(--font-display);cursor:pointer}
.film-chip:hover{background:rgb(255 255 255 / .1)}
.film-chip[aria-current="true"]{background:var(--rose);border-color:var(--navy);color:var(--ink)}
.film-status,.film-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The corner reminder (home page): once per visitor, after a while, away from the hero and the prices. */
.film-bubble{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:6px;animation:film-bubble-in 420ms var(--ease-out) both}
.film-bubble[hidden]{display:none}
.film-bubble.is-gone{opacity:0;translate:0 10px;transition:opacity 200ms ease,translate 200ms ease}
.film-bubble-open{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 16px 6px 6px;border:var(--line);border-radius:var(--r-pill);background:var(--white);color:var(--ink);box-shadow:var(--drop);font:500 .95rem/1.2 var(--font-display);cursor:pointer;transition:translate 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.film-bubble-open:hover{translate:-1px -2px;box-shadow:5px 6px 0 rgb(75 74 103 / .28)}
.film-bubble-open img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 20%;border:var(--line);background:var(--rose-soft)}
.film-bubble-play{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rose);border:1.5px solid var(--navy)}
.film-bubble-play::before{content:"";margin-left:2px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink)}
.film-bubble.is-small .film-bubble-open{padding-right:10px}
.film-bubble.is-small .film-bubble-text{display:none}
.film-bubble.is-small .film-bubble-open:hover .film-bubble-text,.film-bubble.is-small .film-bubble-open:focus-visible .film-bubble-text{display:inline}
.film-bubble-x{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:var(--line);background:var(--white);color:var(--ink);font:500 1.25rem/1 var(--font-display);cursor:pointer;box-shadow:2px 2px 0 rgb(75 74 103 / .25)}
.film-bubble-x:hover{background:var(--rose-soft)}
@keyframes film-bubble-in{from{opacity:0;translate:0 14px;scale:.96}}

/* Smaller screens: compose, do not shrink. */
@media (max-width:1080px){
  .films-grid{grid-template-columns:minmax(0,1fr)}
  .film-card-lead{position:static}
  .film-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .film-list .film-card{grid-template-columns:minmax(0,10rem) minmax(0,1fr);align-items:start}
}
@media (max-width:860px){
  .film-teaser{grid-column:1;grid-row:2;justify-self:start;width:min(100%,400px);margin:var(--space-6) 0 0;translate:none;rotate:-1.5deg}
  .hero:has(> .film-teaser) .hero-stage{grid-column:1;grid-row:3}
  .control-film{margin-top:var(--space-5)}
  .film-list{grid-template-columns:minmax(0,1fr)}
  .film-list .film-card{grid-template-columns:minmax(0,10rem) minmax(0,1fr);align-items:center}
  /* contain:paint keeps phones from zooming the whole page out to fit the scrolling row (Chrome on Android does) */
  .shop-row{display:flex;gap:14px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;overflow-x:auto;contain:paint;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
  .shop-row li{flex:0 0 clamp(128px,36vw,168px);scroll-snap-align:start}
}
@media (max-width:720px){
  .film-start{display:none}
  .film-dialog{padding:10px}
  .film-stage{border-radius:14px}
}
@media (max-width:520px){
  .film-teaser{width:100%}
  .film-list .film-card{grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:14px}
  .film-list .film-card-line{display:none}
  .film-card-lead .film-play{left:12px;bottom:12px;width:52px;height:52px}
  .film-card-lead .film-play::before{border-width:10px 0 10px 16px;margin-left:5px}
  .control-film{gap:14px;padding-right:12px}
  .film-bubble-text{font-size:.9rem}
  .shop-films-sep{display:none}
  .shop-films-head h3>.nb{display:block}
  .shop-card .film-play{left:8px;bottom:8px;width:36px;height:36px}
  .shop-card .film-play::before{border-width:6px 0 6px 10px;margin-left:3px}
}
/* The copy button becomes a 44 px icon so the film's title keeps the room. */
@media (max-width:400px){
  .film-copy{width:44px;padding:0;justify-content:center}
  .film-copy-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:360px){
  .control-film{flex-direction:column;align-items:stretch;padding:10px}
  .control-film-screen{width:100%}
}
/* A short screen (an iPhone SE shows about 553 px, a laptop about 700-800 px): an upright film's end card drops the face
   and keeps one more episode, so the offer, the note and the credit fit without scrolling. */
@media (max-height:860px){
  .film-shell.is-tall .film-end-face{display:none}
  .film-shell.is-tall .film-end-title{font-size:1.05rem}
  .film-shell.is-tall .film-end-list li:nth-child(n+2){display:none}
}
@media (max-height:520px){.film-end-face,.film-end-more-label,.film-end-sub,.film-end-note{display:none}.film-end-more{margin-top:0}}
@media (prefers-reduced-motion:reduce){
  .film-teaser,.film-teaser-link,.film-card-screen,.film-card-screen img,.film-shell,.film-dialog,.film-play,.film-bubble-open{transition:none}
  .film-teaser:hover,.film-teaser:focus-within{rotate:-2.5deg}
  .film-card:hover .film-card-screen,.shop-card:hover .film-card-screen,.film-teaser-link:hover{translate:none}
  .film-card:hover .film-card-screen img{scale:1}
  .film-bubble{animation:none}
  .film-next-ring{animation:none;--p:100%}
  .film-wait circle:first-child{animation-duration:2.4s}
  .film-wait circle:last-child{animation:none}
}
@media (prefers-reduced-transparency:reduce){.film-next,.film-end,.film-error{backdrop-filter:none;background:var(--ink)}.film-dialog{background:var(--ink)}}