/* ==========================================================================
   The film, played (film3.js, Ben 2026-09-30). One stage pinned at the top of the page: the film's
   picture (its first frame as an image, the video over it), the hero over the picture, and the film's
   own controls at its foot. The section after it slides up over the stage like a page (.cinema).
   Stage composition uses physical left/right on purpose: it is a picture.
   ========================================================================== */

/* ---------------- the storyboard: no script, or no motion ---------------- */
/* the page opens as the cinema does, still: the hero over the film's first frame (the closed book), and
   the film's story told under it in words and pictures */
.film3 { position: relative; }
html:not(.js) .film3__video, html:not(.js) .film3__controls, html:not(.js) .film3__cue, html:not(.js) .film3__glow { display: none; }
html:not(.js) .film3__stage { position: relative; block-size: 100vh; block-size: 100svh; min-block-size: 560px; overflow: hidden; background: #141312; --zr: 7vw; }
@media (max-aspect-ratio: 1/1) { html:not(.js) .film3__stage { --zr: 6vw; } }
html:not(.js) .film3__told { display: block; }
.film3__told .beat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 24px 56px; align-items: center; padding: 72px var(--gutter); }
.film3__told .beat > :not(.still) { grid-column: 1; }
.film3__told .still { margin: 0; grid-column: 2; grid-row: 1 / span 8; }
.film3__told .still img { display: block; inline-size: 100%; block-size: auto; }
.film3__told .dish__nums { color: var(--cream-2); }
/* each half keeps its number: "במגש מהספר" never ends a line with its 415 on the next */
.film3__told .dish__nums > span { white-space: nowrap; }
.film3__told .dish__nums b { font-family: var(--num); font-weight: 700; font-size: 28px; color: var(--gold); }
.film3__told .dish__nums s { font-family: var(--num); font-weight: 700; color: var(--cream-3); }
.film3__told .say p { margin: 0; }
.film3__told .say__big { font-weight: 900; font-size: clamp(34px, 4vw, 64px); line-height: 1.05; text-wrap: balance; }
.film3__told .say__mid { font-weight: 800; font-size: clamp(20px, 2vw, 30px); line-height: 1.25; }
.film3__told .say__mid bdi { font-family: var(--num); font-weight: 700; }
.film3__told .swaps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.film3__told .swaps li { display: flex; align-items: baseline; gap: 14px; font-weight: 700; font-size: 18px; line-height: 1.35; }
.film3__told .swaps .cut, .film3__told .tag2 em, .film3__told .more b { font-family: var(--num); font-weight: 700; color: var(--gold); direction: ltr; unicode-bidi: isolate; }
.film3__told .tags2 { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.film3__told .tag2 { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.film3__told .tag2 > b { font-size: 17px; }
.film3__told .tag2 > b:first-child:not(:only-of-type)::after { content: " ←"; color: var(--cream-3); font-weight: 400; }
.film3__told .tag2 b i { font-style: normal; font-size: 15px; margin-inline-start: 10px; color: var(--cream-3); font-weight: 500; }
.film3__told .tag2__new { color: var(--cream); }
.film3__told .more { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px 28px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); font-size: 17px; color: var(--cream-2); }
.film3__told .more s { color: var(--cream-3); font-family: var(--num); }
@media (max-width: 760px) {
  .film3__told .beat { grid-template-columns: minmax(0, 1fr); }
  .film3__told .still { grid-column: 1; grid-row: auto; order: -1; }
}
/* in the cinema the storyboard is still there for a screen reader, but not drawn */
.js .film3__told { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------- the cinema ---------------- */
/* the film is pinned; the section after it scrolls up over it (the curtain) */
.js .cinema { position: relative; }
.js .film3 { position: sticky; top: 0; z-index: 0; block-size: 100vh; block-size: 100svh; }
.js .cinema > .film3 + * { position: relative; z-index: 1; box-shadow: 0 -40px 80px -20px rgba(0, 0, 0, .75); }
.js .film3__stage {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #141312;
  --zr: 7vw;
}
@media (max-aspect-ratio: 1/1) { .js .film3__stage { --zr: 6vw; } }

.film3__screen { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 40%; will-change: transform; }
.film3__poster, .film3__poster img, .film3__video, .film3__stills, .film3__stills img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.film3__poster img, .film3__video, .film3__stills img { object-fit: cover; }
/* a phone's film is anchored to its top: the words and the book live there, the foot is the buy bar's */
@media (max-aspect-ratio: 1/1) { .film3__poster img, .film3__video, .film3__stills img { object-position: 50% 0%; } }
/* a computer squarer than 16:10 (4:3, 5:4, a tablet on its side) sees the whole wide film between bars, as in
   a cinema, and never its sides cut away (Amit, 2026-10-01: the numbers went off his screen) */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 159/100) {
  .js .film3__stage { background: #000; }
  .film3__poster img, .film3__video, .film3__stills img { object-fit: contain; }
}
.film3__video { opacity: 0; }
/* the video takes over from the picture once it truly plays (the two are the same frame) */
.film3__stage.is-rolling .film3__video, .film3__stage.is-ended .film3__video { opacity: 1; }
/* a warm light breathing behind the closed book while the page waits */
.film3__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(30% 34% at var(--gx, 29%) var(--gy, 51%), rgba(243, 190, 98, .26), rgba(243, 190, 98, .07) 55%, transparent 75%);
}
/* (where the film's first frame has the book: tools/film3/film.js, L.hero) */
@media (max-aspect-ratio: 1/1) { .film3__glow { --gx: 50%; --gy: 21%; background: radial-gradient(48% 24% at var(--gx) var(--gy), rgba(243, 190, 98, .26), rgba(243, 190, 98, .07) 55%, transparent 75%); } }
.film3__stage.is-hero .film3__glow { animation: breathe 2.8s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .25 } to { opacity: .9 } }
.film3__veil { position: absolute; inset: 0; background: #0c0b0a; opacity: 0; pointer-events: none; }
/* the hero's words need their ground: a soft dark behind them, on the side where they stand */
.film3__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to left, rgba(20, 19, 18, .72), rgba(20, 19, 18, .35) 38%, transparent 62%); transition: opacity .8s var(--ease); }
@media (max-aspect-ratio: 1/1) { .film3__shade { background: linear-gradient(to top, rgba(20, 19, 18, .92), rgba(20, 19, 18, .6) 42%, transparent 64%); } }
.film3__stage.is-playing .film3__shade { opacity: 0; }

/* the fallback: the film's frames, each for a while, crossfading */
.film3__stills img { opacity: 0; animation: still-in var(--per, 2.2s) linear both; }
.film3__stills img:last-child { animation-fill-mode: forwards; animation-name: still-last; }
@keyframes still-in { 0% { opacity: 0; transform: scale(1.04) } 12% { opacity: 1 } 88% { opacity: 1 } 100% { opacity: 0; transform: scale(1) } }
@keyframes still-last { 0% { opacity: 0; transform: scale(1.04) } 12% { opacity: 1 } 100% { opacity: 1; transform: scale(1) } }

/* ---------------- frame zero: the hero ---------------- */
.film3 .hero { position: absolute; z-index: 6; right: var(--zr); top: 50%; translate: 0 -50%; inline-size: min(44vw, 700px); }
.hero__title { margin: 0 0 26px; font-weight: 900; font-size: clamp(56px, 6.8vw, 124px); line-height: .95; }
/* the logo as the title: its two lines are two images of one width, each in a word mask */
.brand-lines { display: block; inline-size: 4.2em; max-inline-size: 100%; line-height: 0; }
.brand-lines .w { display: block; padding: 0; margin: 0; }
.brand-lines .w > span { display: block; }
.brand-lines img { display: block; inline-size: 100%; block-size: auto; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero__sub { max-inline-size: 20em; font-size: clamp(21px, 1.85vw, 33px); font-weight: 700; line-height: 1.32; color: var(--cream); margin: 0 0 32px; text-wrap: balance; }
.hero__sub bdi { font-family: var(--num); font-weight: 700; letter-spacing: .01em; color: var(--gold); }
.hero__proof { color: var(--gold); }
.hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.hero__assure { margin-top: 18px; font-size: 16px; color: var(--cream-3); }

@media (max-aspect-ratio: 1/1) {
  .film3 .hero { left: var(--zr); inline-size: auto; top: auto; translate: none; bottom: calc(max(4svh, 22px) + env(safe-area-inset-bottom, 0px)); }
  .hero__title { font-size: clamp(40px, 12.2vw, 64px); margin-bottom: 14px; }
  .hero__sub { font-size: clamp(18px, 5.1vw, 23px); line-height: 1.34; margin-bottom: 18px; }
  .hero__buy { gap: 12px; }
  .hero__buy .btn { flex: 1 1 100%; }
  .hero__buy .tag { flex: 1 1 100%; justify-content: center; }
  .hero__assure { margin-top: 10px; font-size: 13px; text-align: center; }
}
/* a short phone screen (a small phone, or a phone's browser with its bars out): the hero tightens so its words
   stay under the book, not over its cover (an SE in Safari, 375×553, had the title on the book) */
@media (max-aspect-ratio: 1/1) and (max-height: 620px) {
  .hero__title { font-size: clamp(32px, 6.6svh, 44px); margin-bottom: 10px; }
  .hero__sub { font-size: clamp(15px, 2.9svh, 18px); line-height: 1.3; margin-bottom: 12px; }
  .hero__buy { gap: 8px; }
  .hero .btn { min-block-size: 44px; }
  .hero__assure { display: none; }
}
/* a phone on its side: everything tightens */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .hero__sub { font-size: clamp(14px, 4.4vh, 19px); line-height: 1.3; margin-bottom: 12px; max-inline-size: 26em; }
  .hero__title { font-size: clamp(30px, 10.5vh, 56px); margin-bottom: 10px; }
  .hero__assure { display: none; }
  .hero .btn { min-block-size: 46px; font-size: 15px; }
}

/* the way in: a hairline with a drop of gold falling down it, and what a scroll here does */
.film3__cue {
  position: absolute; z-index: 6; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-inline-size: 44px; min-block-size: 44px; padding: 6px 12px;
  border: 0; background: none; color: var(--cream-2); font: 600 14px/1 var(--he); letter-spacing: .02em; cursor: pointer; opacity: 0;
}
.film3__cue:hover { color: var(--gold); }
.film3__cue-line { position: relative; display: block; inline-size: 1px; block-size: 38px; background: linear-gradient(rgba(242, 234, 219, 0), rgba(242, 234, 219, .35)); overflow: hidden; }
.film3__cue-line i { position: absolute; left: -2px; top: -8px; inline-size: 5px; block-size: 8px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 10px rgba(243, 190, 98, .8); animation: drop 1.9s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes drop { 0% { transform: translateY(0); opacity: 0 } 20% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translateY(46px); opacity: 0 } }
.film3__stage.is-playing .film3__cue { visibility: hidden; }
.film3__cue-again { display: none; align-items: center; gap: 8px; }
.film3__cue-again svg { inline-size: 12px; block-size: 12px; fill: currentColor; }
.film3__stage.is-ended .film3__cue-in, .film3__stage.is-ended .film3__cue-line { display: none; }
.film3__stage.is-ended .film3__cue-again { display: inline-flex; }
.film3__stage.is-ended .film3__cue { padding: 0 16px; box-shadow: inset 0 0 0 1px var(--line-2); background: rgba(20, 19, 18, .45); color: var(--cream-2); }
.film3__stage.is-ended .film3__cue:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
/* on a phone the hero fills the foot of the screen: the cue stands just under the book, wherever the film's
   picture puts it (its first frame has the book's foot at y = 660 of 1920, the picture covering the screen
   from its top) */
@media (max-aspect-ratio: 1/1) {
  .film3__cue { bottom: auto; top: calc(max(100vw / 1080, 100svh / 1920) * 676); flex-direction: row-reverse; gap: 8px; font-size: 13px; }
  .film3__cue-line { block-size: 22px; }
  /* a short screen: film3.js lifts the cue onto the book's foot, clear of the title, on a ground of its own */
  .film3__cue.is-lifted:not(.film3__cue--watch) { border-radius: 999px; padding: 0 14px; background: rgba(20, 19, 18, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  @keyframes drop { 0% { transform: translateY(0); opacity: 0 } 20% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translateY(30px); opacity: 0 } }
}

/* ---------------- the film's own controls ---------------- */
.film3__controls {
  position: absolute; z-index: 7; inset-inline: 0; bottom: 0; padding: 0 var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s;
}
.film3__stage.is-playing .film3__controls { opacity: 1; visibility: visible; transition: opacity .8s var(--ease) .5s, visibility 0s; }
.film3__progress { order: 2; position: relative; flex: 1 1 auto; block-size: 2px; background: rgba(242, 234, 219, .16); }
.film3__progress i { display: block; block-size: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; }
/* the film's chapters, where each begins: the pizza, the pasta, the book's other dishes, the book again */
.film3__progress b { position: absolute; inset-inline-start: var(--at); top: -2px; inline-size: 2px; block-size: 6px; background: rgba(242, 234, 219, .38); }
/* the line is also the film's handle: a tap or a drag takes the film there (a finger's worth of line to hit),
   and its knob shows where it is while a hand or the keyboard is on it — on a phone always, having no hover */
.film3__progress { cursor: pointer; touch-action: none; transition: block-size .2s var(--ease); }
.film3__progress::before { content: ""; position: absolute; inset: -16px 0; }
.film3__progress:hover, .film3__progress:focus-visible, .film3__stage.is-seeking .film3__progress { block-size: 4px; }
.film3__progress:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; }
.film3__thumb {
  position: absolute; top: 50%; inset-inline-start: calc(var(--p, 0) * 100%); inline-size: 14px; block-size: 14px; margin-inline-start: -7px;
  translate: 0 -50%; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(230, 165, 59, .22); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.film3__progress:hover .film3__thumb, .film3__progress:focus-visible .film3__thumb, .film3__stage.is-seeking .film3__thumb { opacity: 1; }
@media (hover: none) { .film3__thumb { opacity: .9; inline-size: 12px; block-size: 12px; margin-inline-start: -6px; } }
/* five seconds back: the arrow round, the five inside it */
.film3__ctl text { font: 700 7.5px var(--num); fill: currentColor; stroke: none; }
.film3__ctl {
  order: 1; flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0;
  background: rgba(20, 19, 18, .55); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--cream); cursor: pointer;
  transition: box-shadow .25s, color .25s;
}
.film3__ctl:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.film3__ctl svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.film3__ctl .on, .film3__ctl[aria-pressed="true"] .off { display: none; }
/* the sound says it is there, once, as the film starts (and never after it is turned on) */
.film3__sound { position: relative; }
.film3__hint {
  position: absolute; inset-inline-start: 0; bottom: calc(100% + 10px); white-space: nowrap; pointer-events: none;
  font: 700 13px/1 var(--he); color: var(--cream-2); opacity: 0;
}
.film3__stage.is-playing .film3__hint { animation: hint 3.6s var(--ease) 1.4s both; }
.film3__sound[aria-pressed="true"] .film3__hint { display: none; }
@keyframes hint { 0% { opacity: 0; transform: translateY(6px) } 12% { opacity: 1; transform: none } 80% { opacity: 1 } 100% { opacity: 0 } }
.film3__ctl[aria-pressed="true"] .on { display: block; }
.film3__skip {
  order: 3; flex: none; display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 4px 0 0; border: 0; background: none;
  color: var(--cream-2); font: 700 15px/1 var(--he); cursor: pointer; transition: color .25s;
}
.film3__skip:hover { color: var(--gold); }
.film3__skip span { display: inline-block; font-size: 17px; }
/* a scroll the film took while it was starting: the way down shows itself */
.film3__stage.is-nudge .film3__skip { animation: nudge .9s var(--ease); }
@keyframes nudge { 0%, 100% { color: var(--cream-2) } 30% { color: var(--gold); transform: translateY(4px) } 60% { transform: translateY(0) } }
/* waiting for the network: the line breathes */
.film3__stage.is-waiting .film3__progress { animation: wait 1.2s ease-in-out infinite; }
@keyframes wait { 50% { background: rgba(242, 234, 219, .34) } }
/* on a phone the buy bar is under the film: the controls stand above it (a phone on its side has no room
   for both: there the top bar carries the button, as on a computer) */
@media (max-width: 899px) and (min-height: 501px) {
  .film3__controls { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
}
/* on a narrow screen the line has a row of its own, the whole width, over the buttons: wide enough to take */
@media (max-width: 899px) {
  .film3__controls { flex-wrap: wrap; row-gap: 14px; }
  .film3__progress { order: 0; flex: 1 0 100%; }
  .film3__skip { margin-inline-start: auto; }
}
@media (max-height: 500px) { .film3__controls { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } }

/* ---------------- the chrome around the film ---------------- */
/* while the film plays, the top bar's button is the gold one (a computer's call to action) */
html.film-on:not(.film-covered) .topbar__cta { background: var(--gold); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(230, 165, 59, .55); }
/* a phone has one button at a time: the hero's or the buy bar's while the film is on screen (the top bar's
   sat on the book), the buy bar's when it is there */
@media (max-width: 899px) { html.has-buybar .topbar__cta { opacity: 0; visibility: hidden; } }
@media (max-width: 899px) and (min-height: 501px) { html.js:not(.film-covered) .topbar__cta, html:not(.js) .topbar:not(.is-solid) .topbar__cta { opacity: 0; visibility: hidden; } }
.topbar__cta { transition: opacity .4s, visibility .4s, background-color .4s, color .4s, box-shadow .4s; }

@media (prefers-reduced-motion: reduce) {
  .film3__glow, .film3__cue-line i { animation: none; }
}

/* ---------------- the rolling counter (odometer.js): the week, the 95, the price ---------------- */
/* (these lived in film.css with the scroll film's own counter) */
.odo__col { position: relative; display: block; block-size: 1em; inline-size: .62em; overflow: hidden; transition: inline-size .45s var(--ease), opacity .45s; }
.odo__col.is-off { inline-size: 0; opacity: 0; }
.odo__strip { display: flex; flex-direction: column; will-change: transform; }
.odo__strip span { display: block; block-size: 1em; line-height: 1; text-align: center; }
.odo__comma { display: block; inline-size: .26em; block-size: 1em; line-height: 1; transition: inline-size .45s var(--ease), opacity .45s; }
.odo__comma.is-off { inline-size: 0; opacity: 0; }

/* ---------------- /new, the second cut (2026-10-01): watch it with its sound ---------------- */
/* the way in is a button: a touch may start a film with its sound (a scroll may not) */
.film3__cue--watch {
  flex-direction: row; gap: 12px; min-block-size: 50px; padding: 0 22px 0 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(20, 19, 18, .58); box-shadow: inset 0 0 0 1.5px rgba(230, 165, 59, .75), 0 12px 32px -14px rgba(0, 0, 0, .85);
  color: var(--cream); font: 800 16px/1 var(--he); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.film3__cue--watch:hover { box-shadow: inset 0 0 0 1.5px var(--gold), 0 12px 32px -14px rgba(0, 0, 0, .85); color: var(--gold-hi); }
.film3__cue--watch .film3__cue-line, .film3__cue--watch .film3__cue-again svg { display: none; }
.film3__cue-play { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--gold); color: var(--ink); flex: none; }
.film3__cue-play svg { inline-size: 12px; block-size: 12px; fill: currentColor; margin-inline-end: -2px; }
.film3__cue--watch small { margin-inline-start: 8px; font-weight: 500; font-size: 13px; color: var(--cream-2); }
.film3__stage.is-ended .film3__cue--watch { padding: 0 22px 0 10px; background: rgba(20, 19, 18, .58); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(230, 165, 59, .75); }
@media (max-aspect-ratio: 1/1) { .film3__cue--watch { flex-direction: row; gap: 10px; font-size: 15px; min-block-size: 46px; } }

/* a film a scroll started plays muted: in the middle of the screen, once, one tap brings the sound in */
.film3__unmute {
  position: absolute; z-index: 8; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 12px; min-block-size: 56px; padding: 0 26px 0 20px; border: 0; border-radius: 999px;
  background: rgba(20, 19, 18, .74); box-shadow: inset 0 0 0 1.5px rgba(230, 165, 59, .8), 0 16px 40px -14px rgba(0, 0, 0, .9);
  color: var(--cream); font: 800 17px/1 var(--he); white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: unmute-in .5s var(--ease) both, unmute-glow 2.2s ease-in-out .5s infinite;
}
.film3__unmute[hidden] { display: none; }
.film3__unmute svg { inline-size: 24px; block-size: 24px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes unmute-in { from { opacity: 0; scale: .9; } }
@keyframes unmute-glow { 50% { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 9px rgba(230, 165, 59, .12), 0 16px 40px -14px rgba(0, 0, 0, .9); } }
@media (prefers-reduced-motion: reduce) { .film3__unmute { animation: none; } }

/* the smart start (film3.js, Ben 2026-10-18): over the film's first frame, while it gathers enough to run on, a gold
   ring fills — only on a line slow enough to need it (it shows after a third of a second) */
.film3__load {
  position: absolute; z-index: 7; inset: 50% auto auto 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 12px;
  color: var(--cream-2); font: 600 14px/1 var(--he); letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; pointer-events: none;
}
.film3__stage.is-loading .film3__load { opacity: 1; visibility: visible; transition: opacity .45s ease .35s, visibility 0s .35s; }
.film3__load svg { inline-size: 64px; block-size: 64px; transform: rotate(-90deg); overflow: visible; }
.film3__load-track { fill: rgba(20, 19, 18, .45); stroke: rgba(242, 234, 219, .2); stroke-width: 3; }
.film3__load-arc { fill: none; stroke: var(--gold); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 7px rgba(243, 190, 98, .65)); }

/* a browser that plays no video inside the page (html.no-inline, index.html: TikTok's on an iPhone, 2026-11-01): the
   film is drawn on a canvas there (html.film-canvas, film-canvas.js), with its sound and all its controls; where even
   that cannot be it is its frames, so there is no sound to bring in, and nothing to pause or wind back; the line
   under it and the way down stay */
.no-inline:not(.film-canvas) .film3__cue--watch small, .no-inline:not(.film-canvas) .film3__sound, .no-inline:not(.film-canvas) .film3__ctl[data-pause], .no-inline:not(.film-canvas) .film3__ctl[data-back], .no-inline:not(.film-canvas) .film3__unmute { display: none; }
.no-inline:not(.film-canvas) .film3__progress { pointer-events: none; }

/* a wait that runs long (film3.js, Ben 2026-11-05): under the ring, word that the page can be read meanwhile and a
   button down; down the page, a pill at the foot fills as the film loads and says when it is ready (its tap: back up) */
.film3__slow {
  position: absolute; z-index: 7; left: 50%; top: calc(50% + 62px); translate: -50% 0; inline-size: min(84vw, 340px);
  display: grid; justify-items: center; gap: 14px; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
}
.film3__stage.is-loading.is-slow .film3__slow { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s var(--ease, ease), visibility 0s; }
.film3__slow p { margin: 0; color: var(--cream-2); font: 500 15px/1.5 var(--he); text-shadow: 0 2px 12px rgba(0, 0, 0, .85); text-wrap: balance; }
.film3__slow-go {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20, 19, 18, .62); box-shadow: inset 0 0 0 1.5px rgba(230, 165, 59, .7); color: var(--cream); font: 700 15px/1 var(--he);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.film3__slow-go svg { inline-size: 18px; block-size: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: slow-down 1.8s ease-in-out infinite; }
@keyframes slow-down { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

.film-pill {
  position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  display: inline-flex; align-items: center; gap: 10px; min-block-size: 46px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20, 19, 18, .86); box-shadow: inset 0 0 0 1px rgba(242, 234, 219, .14), 0 14px 36px -12px rgba(0, 0, 0, .9);
  color: var(--cream-2); font: 600 15px/1 var(--he); white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: pill-in .5s var(--ease, ease) both;
}
.film-pill[hidden] { display: none; }
html.has-buybar .film-pill { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.film-pill__ring { inline-size: 24px; block-size: 24px; overflow: visible; }
.film-pill__track { fill: none; stroke: rgba(242, 234, 219, .2); stroke-width: 2.4; }
.film-pill__arc { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 12px 12px; transition: stroke-dashoffset .25s linear; }
.film-pill__play { fill: var(--gold); opacity: 0; transition: opacity .3s ease; }
.film-pill.is-ready { color: var(--cream); font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(230, 165, 59, .85), 0 14px 36px -12px rgba(0, 0, 0, .9); animation: pill-in .5s var(--ease, ease) both, unmute-glow 2.2s ease-in-out .5s infinite; }
.film-pill.is-ready .film-pill__play { opacity: 1; }
@keyframes pill-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .film-pill, .film-pill.is-ready, .film3__slow-go svg { animation: none; } }