/* ==========================================================================
   NNP RAISINS — PRODUCTION PAGE, v4 THE FILM (2026-09-21). Loaded by
   production/index.html only, after site.css.

   His verdicts: the wheel "nice try tho, try better concepts"; the road
   "still so so"; three more concepts in words, "i dont see wow effect
   here". So the page is his own film. One full-screen cinema, pinned; the
   scroll plays the season through ten clips cut from the company film —
   the vineyard from the air, then the eight stages, then the raisins — each
   full-bleed under a veil, with the stage's name at ~100px, its number the
   height of the screen filling as the stage passes, and the eight frames
   along the foot as the timeline. Then the film with sound, the six
   machines over the line photograph, quality control, the figures, the ask.

   v1 (paper) archives/production-index-v1-2026-09-21.html; v2 (the wheel)
   archives/production-v2-cycle-2026-09-21/; v3 (the road)
   archives/production-v3-road-2026-09-21/.

   ⚠ EVERY MOTION RULE IS `.js`-GATED. On a phone, under reduced motion and
   without a script the beats are a column: poster, name, sentence, checks.
   No clip is fetched there (the script never sets a src).
   ⚠ HIS LAPTOP IS 1270×680. Sizes are in vh and checked there.
   ⚠ NO CSS TRANSITION ON ANYTHING GSAP TWEENS (GOTCHAS): the layers, the
     copy and the numerals are GSAP's; only the strip's frames transition.
   ========================================================================== */

/* ------------------------------------------------------------- page ---- */
.pc { --pc-bg: #08060e; --pc-line: rgba(242,237,248,.14); --pc-glass: rgba(242,237,248,.06); --pc-r: 14px;
      background: var(--pc-bg); color: var(--chalk); overflow-x: clip; }
.pc-dark-page, .pc-dark-page body { background: #08060e; }
.pc-dark-page body { padding-top: 0; }

/* ------------------------------------------------------- masthead ---- */
.pc-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.pc-dark-page .masthead.is-stuck { background: rgba(14,7,28,.42); border-bottom-color: rgba(242,237,248,.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .pc-dark-page .masthead.is-stuck { background: rgba(14,7,28,.86); }
}
.pc-dark-page .masthead .brand { color: #fff; }
.pc-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
@media (min-width: 1001px) {
  .pc-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .pc-dark-page .masthead .mainnav a:not(.btn):hover,
  .pc-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  .pc-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .pc-dark-page .masthead .btn-primary::before { background: #fff; }
  .pc-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.pc-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 16px; }
.pc-word { display: inline-block; overflow: hidden; vertical-align: top; }
.pc-word > span { display: inline-block; will-change: transform; }
.pc-glass { background: var(--pc-glass); border: 1px solid var(--pc-line); border-radius: var(--pc-r);
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 30px 60px -30px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.btn-ghost-light { background: transparent; color: var(--chalk); border: 1px solid rgba(242,237,248,.38); }
.btn-ghost-light:hover { border-color: var(--chalk); background: rgba(242,237,248,.08); }
.pc-h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(34px, 6.4vh, 60px); line-height: .96; letter-spacing: -.04em; margin: 0 0 14px; max-width: 14ch; }
.pc-lead { margin: 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--chalk-dim); max-width: 54ch; }
.js .pc [data-rv] { opacity: 0; transform: translateY(26px); }
.js .pc [data-rv].is-rv { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .pc [data-rv] { opacity: 1; transform: none; } }

/* ============================================================ CINEMA ==== */
.pf-cinema { position: relative; background: var(--pc-bg); }
.pf-scene { position: relative; }
.pf-pin { position: relative; overflow: hidden; background: #08060e; }

/* THE SCREEN: the ten layers, stacked; the script lights one at a time */
.pf-screen { position: absolute; inset: 0; z-index: 0; }
.pf-layer { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.pf-layer img, .pf-layer video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.pf-layer video { opacity: 0; }                 /* lit by the script once it plays */
.pf-layer video.is-live { opacity: 1; transition: opacity .5s ease; }
/* the veil: deep at the left where the words sit, thin at the right where the film shows, dark at the foot for the strip */
.pf-veil { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,6,14,.86) 0%, rgba(8,6,14,.62) 34%, rgba(8,6,14,.18) 62%, rgba(8,6,14,.06) 100%),
    linear-gradient(180deg, rgba(8,6,14,.55) 0%, rgba(8,6,14,0) 22%, rgba(8,6,14,0) 62%, rgba(8,6,14,.82) 100%); }

/* THE BEATS: the copy, one beat lit at a time, over the screen */
.pf-beats { position: absolute; inset: 0; z-index: 2; }   /* inset, not relative: a relative box of absolute children is 0 tall and every beat spilled above the masthead (first build) */
.pf-beat { position: absolute; left: var(--spine); right: var(--spine); top: 0; bottom: 0; display: grid; align-content: center; padding: 96px 0 118px; pointer-events: none; opacity: 0; }
.pf-beat.is-on { pointer-events: auto; }
.pf-beat > * { will-change: transform, opacity; }

/* the opening */
.pf-open { max-width: 760px; }
.pf-h1 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(52px, 12.5vh, 124px); line-height: .88; letter-spacing: -.05em; margin: 0 0 22px; text-shadow: 0 12px 50px rgba(0,0,0,.55); }
.pf-h1 .accent { color: var(--violet-lt); }
/* the word wrappers clip at line-height .88: room for the descenders of "by" and "Perfected" */
.pf-h1 .pc-word { padding-bottom: .16em; margin-bottom: -.16em; }
.pf-open .pc-lead { color: var(--chalk); max-width: 46ch; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 26px; }
.pf-go { display: inline-flex; align-items: center; gap: 12px; margin: 34px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--chalk-dim); }
.pf-go i { display: block; width: 64px; height: 1px; background: var(--chalk-dim); position: relative; }
.pf-go i::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--chalk-dim); border-right: 1px solid var(--chalk-dim); transform: rotate(45deg); }

/* a stage: the number the height of the screen at the right, the words at the left */
.pf-stage .pf-copy { max-width: min(560px, 46vw); }
.pf-copy h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(44px, 10.5vh, 104px); line-height: .9; letter-spacing: -.05em; margin: 0 0 18px; text-shadow: 0 10px 40px rgba(0,0,0,.55); }
.pf-copy .pc-kick { margin-bottom: 14px; }
.pf-copy > p { margin: 0; font-size: clamp(15px, 2.3vh, 18px); line-height: 1.55; color: var(--chalk); max-width: 50ch; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.pf-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; }
.pf-checks li { position: relative; padding-left: 24px; font-size: clamp(13px, 1.9vh, 15px); line-height: 1.45; color: var(--chalk-dim); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.pf-checks li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--violet-lt); border-bottom: 2px solid var(--violet-lt); transform: rotate(-45deg); }
/* THE NUMBER: outlined, and its filled twin revealed from the foot as the
   stage passes (the script drives the clip-path; one text element, cheap) */
/* right: 0, not the spine: the beat already sits at the spine, so the spine here
   counted twice and pushed the numeral into the copy on a 1920 screen */
.pf-num { position: absolute; right: 0; bottom: 21vh; font-family: var(--display); font-weight: 800; font-size: max(200px, min(62vh, 34vw, 520px)); line-height: .8; letter-spacing: -.07em; pointer-events: none; }   /* 34vw too: on a tall window the height alone let the numeral run under the copy (his PC, 2026-09-22) */
.pf-num span { display: block; }
.pf-num-line { color: transparent; -webkit-text-stroke: 1.5px rgba(242,237,248,.28); }
/* ⚠ THE BOX IS WIDER THAN THE TEXT ON THE RIGHT: background-clip: text paints
   the gradient only inside the element's box, and the last glyph's ink hangs
   .07em past it (the negative letter-spacing), so the fill ended short of the
   outline there — his flag twice, "you can see the space in the right". */
.pf-num-fill { position: absolute; inset: 0 -.35em 0 0; color: #fff;   /* right only: a taller box slid the fill up .1em against the outline (his 2nd flag) */
  background: linear-gradient(180deg, #fff 0%, #f2edf8 40%, var(--violet-lt) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  /* negative side insets: the last glyph's ink overhangs the box by the
     letter-spacing (-.07em) and the fill was cut off there while the outline
     was not (his flag: "there is a space on the right") */
  clip-path: inset(100% -.25em -.25em -.25em); }
/* the close */
.pf-end { max-width: 640px; }
.pf-end h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(44px, 11vh, 112px); line-height: .9; letter-spacing: -.05em; margin: 0 0 18px; text-shadow: 0 10px 40px rgba(0,0,0,.55); }
.pf-end > p { margin: 0; font-size: clamp(15px, 2.3vh, 18px); line-height: 1.55; color: var(--chalk); max-width: 44ch; }

/* THE STRIP along the foot: the eight frames as the timeline, the line
   above them filling as the season plays; the current frame lit */
.pf-strip { position: absolute; left: var(--spine); right: var(--spine); bottom: 22px; z-index: 3; }
.pf-strip-line { position: relative; height: 1px; background: rgba(242,237,248,.18); margin-bottom: 12px; }
.pf-strip-line i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--violet-lt); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 10px rgba(226,183,255,.7); }
.pf-frames { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.pf-frame { display: grid; gap: 7px; justify-items: start; background: none; border: 0; padding: 0; cursor: pointer; color: var(--chalk-dim); text-align: left; opacity: .5; transition: opacity .35s ease, transform .45s var(--ease-out); }
.pf-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 6px; border: 1px solid rgba(242,237,248,.22); }
.pf-frame span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.pf-frame:hover { opacity: .85; }
.pf-frame.is-done { opacity: .7; }
.pf-frame.is-on { opacity: 1; color: #fff; transform: translateY(-6px); }
.pf-frame.is-on img { border-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.4); }
.pf-frame:focus-visible { outline: 2px solid #fff; outline-offset: 3px; opacity: 1; }
/* the running timecode, top right under the masthead */
.pf-tc { position: absolute; right: var(--spine); top: 92px; z-index: 3; margin: 0; display: grid; justify-items: end; gap: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); pointer-events: none; }
.pf-tc b { font-weight: 500; font-size: 22px; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; }

/* ==================================================== pinned motion ==== */
@media (prefers-reduced-motion: no-preference) {
  .js .pf-scene { height: var(--film-h, 1000vh); }
  .js .pf-pin { position: sticky; top: 0; height: 100vh; }
}
/* Short laptops: his is 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .pf-h1 { font-size: 80px; margin-bottom: 16px; }
  .pf-copy h2 { font-size: 66px; margin-bottom: 12px; }
  .pf-copy > p { font-size: 15px; }
  .pf-checks { gap: 4px; margin-top: 12px; }
  .pf-checks li { font-size: 12.5px; }
  .pf-end h2 { font-size: 72px; }
  .pf-num { font-size: 400px; bottom: 150px; }   /* clear of the strip (133px at 680) */
  .pf-tc { top: 84px; }
  .pf-beat { padding-bottom: 112px; }
  .pf-frames { gap: 6px; }
  .pf-frame span { font-size: 9px; }
}

/* ============================================================== FILM ==== */
.pc-film { position: relative; padding: clamp(64px, 10vh, 112px) 0 0; }
.pc-film .videoframe { border-radius: var(--pc-r); overflow: hidden; box-shadow: 0 60px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(242,237,248,.14); margin-top: clamp(24px, 4vh, 40px); }
.pc-film .video-poster { aspect-ratio: 16 / 9; height: auto; }

/* ============================================================== LINE ==== */
.pc-line { position: relative; overflow: hidden; margin-top: clamp(64px, 10vh, 112px); padding: clamp(72px, 11vh, 120px) 0; }
.pc-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pc-bg img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.pc-bg-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,14,.92) 0%, rgba(8,6,14,.72) 45%, rgba(8,6,14,.9) 100%); }
.pc-line > .wrap { position: relative; z-index: 1; }
.pc-machines { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pc-machines li { padding: 22px 22px 24px; display: grid; gap: 8px; }
/* the maker's mark on a white plate, at the icon's height, so the six tiles line up */
.pc-machines .pc-plate-sm { width: auto; justify-self: start; height: 44px; padding: 8px 14px; margin-bottom: 6px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.pc-machines .pc-plate-sm img { max-height: 28px; max-width: 120px; }
.pc-machines .f-icon { width: 28px; height: 28px; margin-top: 8px; margin-bottom: 14px; stroke: var(--violet-lt); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.pc-machines span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }
.pc-machines b { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.8vh, 22px); letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.pc-machines p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--chalk-dim); }

/* =========================================================== QUALITY ==== */
.pc-quality { position: relative; overflow: hidden; margin-top: 0; padding: clamp(72px, 11vh, 120px) 0; }   /* no gap to the machines band above: his flag */
.pc-quality > .wrap { position: relative; z-index: 1; }
.pc-quality .pc-bg-veil { background: linear-gradient(180deg, rgba(8,6,14,.9) 0%, rgba(8,6,14,.7) 50%, rgba(8,6,14,.92) 100%); }
.pc-quality-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pc-qc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pc-qc li { padding: 20px 20px 22px; display: grid; gap: 6px; }
.pc-qc .f-icon { width: 26px; height: 26px; stroke: var(--violet-lt); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.pc-qc b { font-family: var(--display); font-weight: 800; font-size: clamp(17px, 2.6vh, 20px); letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.pc-qc p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--chalk-dim); }
/* the laboratories, highlighted (his instruction 2026-09-22) */
.pc-labs { margin: clamp(28px, 4.5vh, 44px) 0 0; padding: clamp(22px, 3.4vh, 32px) clamp(22px, 2.8vw, 36px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px 40px; align-items: center;
  border-color: rgba(226,183,255,.35); box-shadow: 0 1px 0 rgba(242,237,248,.08) inset, 0 0 0 1px rgba(226,183,255,.12), 0 40px 80px -30px rgba(0,0,0,.9), 0 0 60px -20px rgba(226,183,255,.35); }
.pc-labs-copy h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(26px, 4.6vh, 40px); line-height: .98; letter-spacing: -.035em; }
.pc-labs-copy p:last-child { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--chalk-dim); max-width: 52ch; }
.pc-labs-marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pc-labs-marks li { display: grid; gap: 6px; justify-items: start; }
.pc-plate { display: grid; place-items: center; width: 100%; height: clamp(72px, 11vh, 96px); background: #fff; border-radius: 10px; padding: 12px 18px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
/* a pixel cap on the height, not 100%: a percentage max-height against the
   plate's clamp() height did not hold and the TLR mark spilled out (his flag) */
.pc-plate img { max-width: 84%; max-height: clamp(44px, 7vh, 62px); width: auto; height: auto; object-fit: contain; display: block; }
.pc-labs-marks b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: #fff; margin-top: 4px; }
.pc-labs-marks em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); }
.pc-figs { list-style: none; margin: clamp(48px, 8vh, 80px) 0 0; padding: clamp(22px, 3.4vh, 32px) 0 0; border-top: 1px solid var(--pc-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pc-figs li { display: grid; gap: 6px; }
.pc-figs b { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 7vh, 64px); letter-spacing: -.05em; line-height: .9; color: #fff; }
.pc-figs span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }

/* =============================================================== ASK ==== */
.pc-ask { padding: clamp(64px, 10vh, 112px) 0 clamp(72px, 11vh, 120px); }
.pc-ask-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 40px; align-items: center; padding: clamp(24px, 3.6vh, 36px) clamp(24px, 2.8vw, 40px); }
.pc-ask-panel h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(26px, 4.4vh, 38px); line-height: 1; letter-spacing: -.035em; margin: 0; }
.pc-ask-panel p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--chalk-dim); max-width: 50ch; }
.pc-ask-panel .pc-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: flex-end; }

/* ------------------------------------------------------------- phone ----
   THE CINEMA, PORTRAIT (2026-09-22, his note: the hero "could have been
   adapted better even keeping the original concept"). The same pinned
   screen and the same script: the clip full-bleed under a veil that is
   deep at the foot, the words at the foot, the numeral small at the top
   right, the eight frames as a thin strip. The pane is 100dvh, so it
   follows the address bar (the products lesson on the home page). */
@media (max-width: 900px) {
  .js .pf-pin { height: 100svh; height: 100dvh; }
  .pf-veil { background:
    linear-gradient(180deg, rgba(8,6,14,.62) 0%, rgba(8,6,14,.12) 26%, rgba(8,6,14,.2) 52%, rgba(8,6,14,.94) 100%); }
  .pf-beat { left: var(--gut); right: var(--gut); padding: 84px 0 86px; align-content: end; }
  .pf-open { max-width: none; }
  .pf-h1 { font-size: clamp(40px, 12vw, 56px); margin-bottom: 14px; }
  .pf-open .pc-lead { font-size: 14.5px; max-width: none; }
  .pf-actions { margin-top: 18px; }
  .pf-go { display: none; }
  .pf-stage .pf-copy { max-width: none; }
  .pf-copy h2 { font-size: clamp(32px, 9.6vw, 44px); margin-bottom: 10px; }
  .pf-copy .pc-kick { margin-bottom: 8px; }
  .pf-copy > p { font-size: 14.5px; line-height: 1.5; }
  .pf-checks { margin-top: 10px; gap: 4px; }
  .pf-checks li { font-size: 12.5px; }
  .pf-num { right: var(--gut); top: 74px; bottom: auto; font-size: min(34vw, 150px); }
  .pf-end { max-width: none; }
  .pf-end h2 { font-size: clamp(34px, 10vw, 46px); }
  .pf-end > p { font-size: 14.5px; }
  .pf-tc { display: none; }
  .pf-strip { left: var(--gut); right: var(--gut); bottom: 12px; }
  .pf-strip-line { margin-bottom: 8px; }
  .pf-frames { gap: 4px; }
  .pf-frame span { display: none; }
  .pf-frame img { border-radius: 3px; }
  .pf-frame.is-on { transform: translateY(-3px); }
  .pc-machines, .pc-qc { grid-template-columns: minmax(0, 1fr); }
  .pc-quality-grid { grid-template-columns: minmax(0, 1fr); }
  .pc-labs { grid-template-columns: minmax(0, 1fr); }
  .pc-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-ask-panel { grid-template-columns: minmax(0, 1fr); }
  .pc-ask-panel .pc-actions { justify-content: flex-start; }
  .pc-kick { font-size: 12px; }
}
/* Reduced motion, and no script: the cinema stands up into a column, each
   beat with its poster (the shape every phone had until 2026-09-22). */
@media (prefers-reduced-motion: reduce) {
  .js .pf-scene { height: auto; }
  .js .pf-pin { position: relative; height: auto; padding: 96px 0 24px; }
  .pf-screen, .pf-strip, .pf-tc, .pf-go, .pf-num { display: none !important; }
  .pf-beats { position: static; padding: 0 var(--gut); }
  .pf-beat { position: static; display: grid; padding: 0 0 40px; opacity: 1 !important; pointer-events: auto; transform: none !important; }
  .pf-beat > * { opacity: 1 !important; transform: none !important; }
  .pf-stage::before { content: ''; display: block; aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 18px; background: #14101d center / cover no-repeat; background-image: var(--poster); }
  .pf-h1 { font-size: clamp(40px, 12vw, 56px); }
  .pf-copy h2, .pf-end h2 { font-size: clamp(32px, 9vw, 44px); }
  .pf-open, .pf-stage .pf-copy, .pf-end { max-width: none; }
}
html:not(.js) .pf-pin { padding: 96px 0 24px; }
html:not(.js) .pf-screen, html:not(.js) .pf-strip, html:not(.js) .pf-tc, html:not(.js) .pf-go, html:not(.js) .pf-num { display: none; }
html:not(.js) .pf-beats { position: static; padding: 0 var(--gut); }
html:not(.js) .pf-beat { position: static; display: grid; padding: 0 0 40px; opacity: 1; pointer-events: auto; }
html:not(.js) .pf-open, html:not(.js) .pf-stage .pf-copy, html:not(.js) .pf-end { max-width: none; }