/* Coming-soon page. Loads after site.css. One centred screen: the loose papers from the home page sit around the text
   (static, with one gentle entrance), the waitlist form sits under the lede. No scripts are needed to see any of it. */
:root {
  --sheet: #fbf9f3; --sheet-ink: #2b3f3e; --sheet-soft: #76837f; --sheet-line: #dbd5c6;
  --paper-edge: rgba(0, 0, 0, .06); --sheet-shadow: rgba(0, 0, 0, .09);
  --ok: #2f6b4f; --err: #a23a29;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sheet: #e5dfcf; --sheet-line: #cbc4b2; --sheet-soft: #6c7975; --paper-edge: rgba(0, 0, 0, .3); --sheet-shadow: rgba(0, 0, 0, .34); --ok: #86c9a6; --err: #f0a08d; }
}
:root[data-theme="dark"] { --sheet: #e5dfcf; --sheet-line: #cbc4b2; --sheet-soft: #6c7975; --paper-edge: rgba(0, 0, 0, .3); --sheet-shadow: rgba(0, 0, 0, .34); --ok: #86c9a6; --err: #f0a08d; }

.defs { position: absolute; width: 0; height: 0; }
/* the language switch stays visible at every width (site.css hides .nav on phones) */
.top .nav { display: flex !important; }
.top { position: static; }
.nav a[aria-current="true"] { color: var(--ink); text-decoration: underline; }

/* ---------- the screen ---------- */
.soon { position: relative; overflow-x: clip; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; --sh: 100svh; --wb: min(clamp(112px, 13vw, 250px), 22svh); --fs: min(clamp(2.2rem, 1.2rem + 3.2vw, 5.4rem), 9svh); --tz: calc(var(--fs) * 4.2); }
html:lang(es) .soon { --fs: min(clamp(2.1rem, 1.1rem + 2.9vw, 4.8rem), 8.4svh); --tz: calc(var(--fs) * 4.6); }
.soon > header, .soon > main, .soon > footer { position: relative; z-index: 2; }
.soon > header { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.soon main { display: grid; place-items: center; padding: clamp(16px, 4svh, 56px) 20px; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); text-align: center; }
.soon-in { display: grid; justify-items: center; width: 100%; max-width: 640px; }
.soon-in > * { animation: rise 520ms var(--ease) both; }
.soon-in > :nth-child(2) { animation-delay: 60ms; } .soon-in > :nth-child(3) { animation-delay: 120ms; } .soon-in > :nth-child(4) { animation-delay: 180ms; } .soon-in > :nth-child(5) { animation-delay: 240ms; }
/* the waitlist block (form + yarn) enters with the hero's rhythm, one beat behind the lede */
.soon-in > .wl-block { animation: none; }
.wl-block > .wl-box { animation: rise 520ms var(--ease) 180ms both; }
.wl-block > .yarn { animation: rise 520ms var(--ease) 240ms both; }
.soon .eyebrow { display: inline-block; margin-bottom: 18px; padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: 600 .8125rem/1.3 var(--sans); color: var(--ink-soft); }
.soon h1 { font-size: var(--fs); line-height: 1.04; letter-spacing: -.03em; max-width: 11em; }
.soon .lede { max-width: 40ch; margin: 20px auto 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.35rem); text-wrap: balance; }
.yarn { max-width: 44ch; margin: 28px auto 0; font: italic 400 1rem/1.5 var(--serif); color: var(--ink-soft); text-wrap: balance; }
.soon .foot { border-top: 0; }
.soon .foot .wrap { justify-content: center; text-align: center; padding-block: 16px 24px; }
.soon .foot .legal { flex-basis: auto; }
.soon .foot nav { justify-content: center; }

/* ---------- the waitlist form ---------- */
.wl-box { width: 100%; margin-top: 28px; }
.wl-row { display: flex; gap: 10px; align-items: stretch; justify-content: center; }
.wl-row input[type="email"] { flex: 1 1 auto; min-width: 0; max-width: 340px; min-height: 52px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-light); color: var(--ink); font: 400 1.0625rem/1.3 var(--sans); }
.wl-row input[type="email"]::placeholder { color: color-mix(in srgb, var(--ink-soft) 80%, transparent); }
.wl-row input[type="email"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wl-row input[aria-invalid="true"] { border-color: var(--err); }
.wl-row .btn { min-height: 52px; padding-inline: 22px; font-size: 1.0625rem; white-space: nowrap; }
.wl-row .btn[disabled] { opacity: .7; cursor: progress; }
.wl-lab { display: block; margin-bottom: 8px; font: 600 .9375rem/1.3 var(--sans); color: var(--ink); }
.wl-err { min-height: 1.5em; margin-top: 8px; font-size: .9375rem; color: var(--err); }
.wl-consent { max-width: 46ch; margin: 4px auto 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-soft); text-wrap: balance; }
.wl-consent a { color: var(--ink); }
.wl-ok { max-width: 460px; margin-inline: auto; display: grid; justify-items: center; gap: 10px; padding: 18px 20px; border-radius: 14px; background: var(--paper-light); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.0625rem; color: var(--ink); }
.wl-ok svg { width: 34px; height: 34px; color: var(--ok); }
.wl-ok b { overflow-wrap: anywhere; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .wl-row { flex-direction: column; } .wl-row input[type="email"] { max-width: none; } }
.thanks .wl-ok { margin-top: 28px; }

/* ---------- the papers (decoration) ---------- */
.g-papers { position: absolute; z-index: 0; inset: 0; pointer-events: none; animation: g-fade 700ms var(--ease) 120ms both; }
@keyframes g-fade { from { opacity: 0; } }
@keyframes settle { from { opacity: 0; transform: translate3d(0, 18px, 0) rotate(calc(var(--r) - 2deg)) scale(var(--sc)); } }
.g-p { position: absolute; z-index: var(--z, 1); width: var(--w); left: calc(50% + var(--x) - var(--w) / 2); top: calc(50% + var(--y) - var(--w) * var(--ar) / 2); }
.g-sheet { position: relative; width: 100%; height: calc(var(--w) * var(--ar)); overflow: hidden; background: var(--sheet); color: var(--sheet-ink); border-radius: 2px; padding: 1.25em 1.2em; font: 400 calc(var(--w) / 16)/1.3 var(--sans);
  box-shadow: 0 0 0 1px var(--paper-edge), 0 1px 2px var(--sheet-shadow), 0 calc(5px + 14px * var(--d)) calc(12px + 26px * var(--d)) var(--sheet-shadow);
  transform: translate3d(0, 0, 0) rotate(var(--r)) scale(var(--sc)); animation: settle 700ms var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
/* the paper text is drawn as generated content: it is decoration (the sheets are aria-hidden), not copy to read */
.cl::before, .tt::before, .dt::before, .row em::before { content: attr(data-t); }
.cl { font-size: .62em; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sheet-soft); line-height: 1.25; }
.tt { margin-top: .5em; font: 600 1.18em/1.15 var(--serif); letter-spacing: -.01em; }
.dt { margin-top: .2em; font-size: .68em; color: var(--sheet-soft); }
.rule { height: 1px; background: var(--sheet-line); margin: .8em 0 .45em; }
.ln { height: .34em; border-radius: .3em; background: var(--sheet-line); margin-top: .72em; width: 100%; }
.ln.m { width: 84%; } .ln.s { width: 62%; } .ln.xs { width: 36%; }
.sig { width: 42%; margin-top: .8em; overflow: visible; fill: none; stroke: var(--sheet-ink); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.row { display: flex; align-items: center; gap: .8em; margin-top: .62em; }
.row .ln { margin-top: 0; flex: 1; } .row .ln.v { flex: none; width: 24%; }
.row.hit { margin-inline: -.5em; padding: .32em .5em; background: #dfe7dd; border-radius: 2px; font-size: .68em; font-weight: 600; color: var(--sheet-ink); }
.row.hit em { font-style: normal; }
.letter .ln { margin-top: .78em; }
.folded::after { content: ""; position: absolute; left: 0; right: 0; top: 36%; height: 1px; background: rgba(0, 0, 0, .07); box-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.stapled::before { content: ""; position: absolute; left: .9em; top: .8em; width: 1.5em; height: .16em; border-radius: .1em; background: #8f9693; transform: rotate(-24deg); box-shadow: 0 .05em .05em rgba(0, 0, 0, .3); }
.scan .img { position: relative; height: 0; padding-bottom: 54%; margin-top: .9em; background: #262a2b; border-radius: 2px; overflow: hidden; }
.scan .img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: radial-gradient(circle at 50% -10%, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, 0) 60%); clip-path: polygon(50% 0, 96% 100%, 4% 100%); }
.scan .ln:first-of-type { margin-top: .9em; }
.snap { padding: .42em; background: var(--sheet); }
.photo { height: 100%; border-radius: 1px; background: #d7cfba; box-shadow: inset 0 0 2.2em rgba(0, 0, 0, .2); padding: 1.1em .9em; }
.photo svg { width: 100%; height: 100%; stroke: #3b474c; stroke-width: 2.2; opacity: .85; }
.slip { padding-inline: 1em; }
.slip .tt { font-size: 1.05em; }
.g-sheet > * { display: block; }

/* positions around the text (centre of the screen is 0,0). --x --y offset of the paper's centre, --w width, --ar height / width, --r tilt, --sc scale, --d shadow depth */
.p1 { --gap: 70px; --x: calc(-1 * (var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap))); --y: calc(var(--sh) * -.24); --w: calc(var(--wb) * .92); --ar: 1.32; --r: -7deg; --sc: .9;  --d: .15; --z: 1; --i: 0; }
.p2 { --gap: 24px; --x: calc(-1 * (var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap))); --y: calc(var(--sh) * -.02); --w: calc(var(--wb) * 1.1);  --ar: 1.32; --r: 4deg;  --sc: 1.04; --d: 1;   --z: 4; --i: 2; }
.p3 { --gap: 90px; --x: calc(-1 * (var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap))); --y: calc(var(--sh) * .3);  --w: calc(var(--wb) * .98); --ar: 1.32; --r: -3deg; --sc: 1;    --d: .55; --z: 2; --i: 4; }
.p4 { --gap: 50px; --x: calc(var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap));  --y: calc(var(--sh) * -.26); --w: calc(var(--wb) * .94); --ar: 1.32; --r: 6deg;  --sc: .92; --d: .2;  --z: 1; --i: 1; }
.p5 { --gap: 20px; --x: calc(var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap));  --y: calc(var(--sh) * 0);  --w: calc(var(--wb) * .98); --ar: 1.2;  --r: -5deg; --sc: 1.05; --d: .9;  --z: 4; --i: 3; }
.p6 { --gap: 100px; --x: calc(var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap)); --y: calc(var(--sh) * .27); --w: calc(var(--wb) * .66); --ar: 1.9;  --r: 4deg;  --sc: .96; --d: .45; --z: 2; --i: 5; }
@media (max-width: 1100px) { .p3 { --gap: 50px; } .p6 { --gap: 60px; } }
/* upright tablets and narrow windows: no room at the sides, so four papers sit in the corners */
@media (max-aspect-ratio: 1/1) {
  .soon { --wb: clamp(96px, 18vw, 180px); }
  .p3, .p6 { display: none; }
  .p1 { --x: calc(var(--wb) * -.2 - 28vw); --y: calc(var(--sh) * -.4); }
  .p4 { --x: calc(var(--wb) * .2 + 28vw);  --y: calc(var(--sh) * -.4); }
  .p2 { --x: calc(var(--wb) * -.1 - 30vw); --y: calc(var(--sh) * .4); }
  .p5 { --x: calc(var(--wb) * .1 + 30vw);  --y: calc(var(--sh) * .4); }
}
/* phones: one tight centred block — badge, headline, lede, form, yarn, pill.
   The roll-up morph runs whenever the block fits a screen (html.morph), plain flow otherwise. */
@media (max-width: 600px) {
  .soon { --fs: min(clamp(2.1rem, 1.15rem + 5vw, 2.9rem), 13svh); }
  html:lang(es) .soon { --fs: min(clamp(2rem, 1.1rem + 4.6vw, 2.75rem), 12.4svh); }

  /* centred while the block fits, top-anchored when it doesn't */
  .soon main { place-items: start center; padding: 0 0 20px; }
  @supports (place-items: safe center) { .soon main { place-items: safe center; } }
  .hero-copy { padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px)); }
  .wl-block { box-sizing: border-box; width: 100%; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .wl-block > * { width: 100%; max-width: 430px; margin-inline: auto; }

  .soon h1 { text-wrap: balance; }
  .soon .eyebrow { margin-bottom: 14px; font-size: .8125rem; padding: 6px 12px; }
  .soon .lede { margin-top: 16px; font-size: 1rem; line-height: 1.5; max-width: 21em; }

  /* the waitlist inside the block, with safe touch targets */
  .wl-lab { font-size: 1rem; margin-bottom: 8px; }
  .wl-row input[type="email"], .wl-row .btn { min-height: 58px; font-size: 1.0625rem; }
  .wl-row input[type="email"] { padding: 12px 16px; }
  .wl-row .btn { padding-inline: 22px; }
  .wl-err { min-height: 0; margin-top: 4px; font-size: .875rem; }
  .wl-consent { margin-top: 8px; font-size: .8125rem; line-height: 1.45; max-width: 44ch; }
  .yarn { margin-top: 16px; font-size: .9375rem; line-height: 1.45; max-width: 36ch; }
  .film-btn { margin-top: 16px; min-height: 58px; font-size: 1rem; }
  .film-btn .thumb { width: 46px; height: 46px; }

  /* papers peek from the bottom corners, clear of the block — only when the
     roll-up morph actually runs; the flow fallback (short phones) has none */
  .g-p { display: none; }
  html.morph .g-p { display: block; --z: 0; }
  .p2 { left: -52px; top: auto; bottom: -48px; --w: 104px; }
  .p5 { left: auto; right: -48px; top: auto; bottom: -48px; --w: 96px; }

  /* flow fallback (short windows): the card sits under the block */
  .film-card { margin: 20px auto 12px; }
  .film-cap { margin-bottom: 48px; }
  .soon > footer, .home > footer { padding-bottom: 24px; }

  /* captions stay background text below the card; 64px strip so two lines never clip */
  .pin { --cap: 64px; }
}
@media (max-height: 560px) { .p2, .p3, .p5, .p6 { display: none; } .p1 { --x: calc(-50vw + var(--w) / 2 + 24px); --y: calc(var(--sh) * -.1); } .p4 { --x: calc(50vw - var(--w) / 2 - 24px); --y: calc(var(--sh) * .1); } }
@media (max-height: 560px) and (max-width: 1000px) { .g-papers { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .g-sheet, .g-papers { animation: none; }
  .soon-in > * { animation: g-fade 300ms linear both; }
}
.wl-ok .ok-h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); max-width: none; letter-spacing: -.02em; }
.thanks .yarn { font-style: normal; font: 600 1rem/1.5 var(--sans); }
.thanks .yarn a { padding: 12px 8px; display: inline-block; }

/* ---------- Launch film: a button that rolls up into the film card as you scroll ----------
   Layout: .scene is tall, .pin sticks for the length of the scroll, .film-card is laid out at its final size and film.js maps it
   onto the button (transform + clip-path + opacity only). Without JS the card is a plain <video controls> under the hero. */
.home { display: block; min-height: 0; }
.pin { position: relative; display: grid; grid-template-rows: auto minmax(calc(100svh - 66px), auto) auto; min-height: 100svh; }
.pin > header, .pin > main { position: relative; z-index: 2; }
.pin > header { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.home .g-papers { inset: 0 0 auto 0; height: 100svh; }
.home .g-p { will-change: transform; }
.home > footer { position: relative; z-index: 2; }
@media (max-width: 600px) { .home > footer { padding-bottom: 0; } }
.hero-copy { display: grid; justify-items: center; width: 100%; }
.soon-in > .hero-copy { animation: none; }
.hero-copy > * { animation: rise 520ms var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; } .hero-copy > :nth-child(3) { animation-delay: 120ms; } .hero-copy > :nth-child(4) { animation-delay: 180ms; } .hero-copy > :nth-child(5) { animation-delay: 240ms; }
.soon-in > .film-btn { animation: g-fade 520ms var(--ease) 320ms both; }
@media (prefers-reduced-motion: reduce) { .hero-copy > * { animation: g-fade 300ms linear both; } .soon-in > .film-btn { animation: none; } }

/* the trigger: a pill with a poster thumbnail, the label, and the length in a quieter tone */
.film-btn { margin-top: 22px; display: inline-flex; align-items: center; min-height: 56px; padding: 6px 22px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-light); color: var(--ink); font: 600 1rem/1.2 var(--sans); cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05); transition: transform 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease); -webkit-tap-highlight-color: transparent; }
.film-btn:active { transform: scale(.97); }
.film-btn .face { display: inline-flex; align-items: center; gap: 12px; }
.film-btn .thumb { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--paper-deep); box-shadow: 0 0 0 1px var(--outline); }
.film-btn .thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.3); transform-origin: 36% 49%; }
.film-btn .thumb svg { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; padding: 5px 4px 5px 6px; box-sizing: content-box; border-radius: 50%; color: #fbf9f3; background: rgba(21, 61, 60, .86); }
.film-btn .dur { font-weight: 500; font-size: .9375rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .film-btn:hover { border-color: var(--ink-soft); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 26px rgba(0, 0, 0, .08); } }
html:not(.js) .film-btn, html:not(.js) .film-cue { display: none; }
.film-cue { display: none; }

/* the card, laid out at its final size: 4:5, up to 82svh tall, nearly full width on phones */
.pin { --cap: 48px; --strip: 64px; --vh: min(calc(80svh - var(--strip)), calc(100svh - 66px - var(--cap) - 54px - var(--strip)), calc((100vw - 32px) * 1.25)); --cw: calc(var(--vh) * .8); --ch: calc(var(--vh) + var(--strip)); }
.film-card { --fg: #fbf9f3;
  position: relative; z-index: 3; width: var(--cw); height: var(--ch); margin: 8px auto 14px; border-radius: 20px;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .16)) drop-shadow(0 3px 8px rgba(0, 0, 0, .08)); }
.film-clip { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; background: var(--paper-light); isolation: isolate; }
.film-clip video { position: absolute; left: 0; top: 0; width: 100%; height: var(--vh); max-width: none; object-fit: cover; background: var(--paper-deep); }
html.morph .film-card { position: absolute; left: 50%; top: 50%; margin: calc(var(--ch) / -2 + 33px - (14px + var(--cap)) / 2) 0 0 calc(var(--cw) / -2); opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
html.morph .film-card.is-live { pointer-events: auto; }
html.morph .film-clip { will-change: clip-path; }
html.morph .scene { height: 290svh; }
html.morph .pin { position: sticky; top: 0; height: 100svh; min-height: 0; grid-template-rows: auto 1fr; }
html.morph .film-cue { display: flex; position: absolute; z-index: 2; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: center; gap: 6px; font: 500 .8125rem/1.2 var(--sans); color: var(--ink-soft); pointer-events: none; animation: g-fade 700ms var(--ease) 900ms both; }
html.morph .film-cue i { width: 1px; height: 22px; background: linear-gradient(var(--ink-soft), transparent); opacity: .7; }
@media (max-width: 600px) { html.morph .film-cue { display: none; } }
@media (max-height: 700px) { html.morph .film-cue { display: none; } }
::cue { font: 600 18px/1.35 var(--sans); color: #fff; background: rgba(0, 0, 0, .6); }

/* caption line under the card, on the page background */
.film-cap { z-index: 3; width: var(--cw); min-height: var(--cap); margin: 0 auto clamp(40px, 8svh, 88px); text-align: center; font: italic 400 1rem/1.45 var(--serif); color: var(--ink-soft); text-wrap: balance; opacity: 0; transition: opacity 200ms var(--ease); pointer-events: none; }
.film-cap.on { opacity: 1; }
html.morph .film-cap { position: absolute; left: 50%; margin: 0 0 0 calc(var(--cw) / -2); top: calc(50% + 33px - (14px + var(--cap)) / 2 + var(--ch) / 2 + 14px); height: var(--cap); overflow: hidden; }

/* custom player (built by film.js) */
.film-ui { --bar: color-mix(in srgb, var(--paper-light) 92%, transparent); --hair: color-mix(in srgb, var(--ink) 14%, transparent); position: absolute; inset: 0; color: var(--ink); font: 500 .8125rem/1 var(--sans); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.film-ui button { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; margin: 0; cursor: pointer; }
.film-ui :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
.film-poster { position: absolute; left: 0; top: 0; width: 100%; height: var(--vh); max-width: none; object-fit: cover; transition: opacity 300ms var(--ease); pointer-events: none; }
.film-poster.gone { opacity: 0; }
.film-surface { position: absolute; left: 0; top: 0; width: 100%; height: var(--vh); border-radius: 0 !important; outline-offset: -4px !important; }
.film-ui .film-big { position: absolute; left: 50%; top: calc(var(--vh) / 2); width: clamp(52px, calc(var(--cw) * .15), 72px); height: clamp(52px, calc(var(--cw) * .15), 72px); margin: calc(clamp(52px, calc(var(--cw) * .15), 72px) / -2) 0 0 calc(clamp(52px, calc(var(--cw) * .15), 72px) / -2); display: grid; place-items: center; border-radius: 50%; background: var(--bar); box-shadow: 0 0 0 1px var(--hair), 0 8px 24px rgba(0, 0, 0, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: scale(.92); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; }
.film-big svg { width: 30px; height: 30px; }
.film-ui.is-open.is-paused .film-big { opacity: 1; transform: none; pointer-events: auto; }
.film-ui .film-big:active { transform: scale(.96); }
.film-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: var(--strip); padding: 14px 8px 6px; background: var(--paper-light); }
.film-bar { position: relative; display: flex; align-items: center; gap: 2px; }
.film-bar button { flex: none; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; transition: transform 140ms var(--ease), background-color 140ms var(--ease); }
.film-bar button:active { transform: scale(.94); }
.film-bar svg { width: 22px; height: 22px; }
.film-bar .vol.lbl { padding: 0 12px 0 8px; font: 600 .875rem/1 var(--sans); background: var(--ink); color: var(--paper-light); border-radius: 22px; margin-right: 4px; }
.film-bar [aria-pressed="false"].cc { opacity: .5; }
.film-time { margin-left: 6px; margin-right: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.film-time span { color: var(--ink-soft); }
.film-seek { position: absolute; left: 0; right: 0; top: -10px; display: block; height: 20px; margin: 0; cursor: pointer; touch-action: none; border-radius: 0; }
.film-seek::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 0; background: var(--hair); transition: transform 140ms var(--ease); }
.film-seek .fill { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.film-seek .knob { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); transform: translateX(0) scale(.6); opacity: 0; transition: opacity 140ms var(--ease); }
.film-seek:hover .knob, .film-seek:focus-visible .knob, .film-seek.is-drag .knob { opacity: 1; }
.film-seek:hover::before, .film-seek.is-drag::before { transform: scaleY(1.7); }
@media (hover: hover) and (pointer: fine) { .film-bar button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); } .film-bar .vol.lbl:hover { background: var(--ink); opacity: .92; } }
@media (prefers-reduced-motion: reduce) { .film-scrim, .film-big, .film-cap, .film-poster { transition-duration: 1ms; } }
@media (max-width: 340px) { .film-time span { display: none; } }
.film-time b { font-weight: inherit; }
.film-bar .cc-m { font: 700 11px/1 var(--sans); letter-spacing: .02em; padding: 3px 4px; border: 1.6px solid currentColor; border-radius: 5px; }
/* laptop-height windows: a tighter hero so it still fits one screen and the film can roll up */
@media (max-height: 880px) and (min-aspect-ratio: 5/4) {
  .home .soon-in { max-width: 780px; }
  .home h1 { max-width: 16em; }
  .home .eyebrow { margin-bottom: 12px; }
  .home .lede { max-width: 58ch; margin-top: 14px; }
  .home .wl-box { margin-top: 18px; }
  .home .wl-err { min-height: 0; margin-top: 4px; }
  .home .yarn { max-width: 66ch; margin-top: 14px; }
  .home .film-btn { margin-top: 14px; }
  .home .pin > main { padding-block: 8px 12px; }
}
@media (max-height: 460px) { .film-time span { display: none; } }