/* film2: additions and overrides, loaded after v3.css. Owned by one workstream (see HANDOFF §5.28).
   On the white site (19 Oct) the films are white too: see "the films on white" at the end of this file.
   The films and the read: shots and cuts, the letterbox, progress, captions, the odometer, the year board, and the
   templates made for the real work (phone, map, calendar, comment sheet, bracket). Sizes inside a stage are container
   units, so every scene lays itself out for a wide film, full screen or a tall phone. */

/* ---------- shots: the layer a cut moves; the scene inside keeps its own camera ---------- */
.sc-shot { position: absolute; inset: 0; z-index: 1; visibility: hidden; perspective: 1400px; transform-origin: 50% 50%; }
.sc-shot > .sc { visibility: inherit; }

/* the aura, without a blur filter: soft gradients cost nothing to redraw */
.f3-aura { filter: none; inset: -18%; opacity: 0.6; }
.f3-aura i { width: 84cqmin; height: 84cqmin; margin: -19cqmin 0 0 -19cqmin; border-radius: 0; background: radial-gradient(closest-side, var(--a1, var(--acc)) 0%, color-mix(in srgb, var(--a1, var(--acc)) 50%, transparent) 42%, transparent 100%); opacity: 0.55; }
.f3-aura i:nth-child(2) { width: 100cqmin; height: 100cqmin; background: radial-gradient(closest-side, var(--acc-2) 0%, color-mix(in srgb, var(--acc-2) 50%, transparent) 42%, transparent 100%); opacity: 0.45; }
.f3-aura i:nth-child(3) { width: 44cqmin; height: 44cqmin; margin: 0; background: radial-gradient(closest-side, #fff, transparent); opacity: 0.07; }

/* ---------- cuts and the letterbox ---------- */
.f3-lb { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.f3-lb i { position: absolute; left: 0; right: 0; height: 11%; background: #050507; }
.f3-lb i:first-child { top: 0; transform-origin: 50% 0; }
.f3-lb i:last-child { bottom: 0; transform-origin: 50% 100%; }
.f3-slices { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-rows: repeat(3, 1fr); pointer-events: none; }
.f3-slices i { display: block; }
.f3-iris { position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none; visibility: hidden; }

/* ---------- the player ---------- */
/* story-style progress across the top: one segment a scene */
.f3-segs { position: absolute; z-index: 8; left: clamp(14px, 1.6vw, 24px); right: clamp(14px, 1.6vw, 24px); top: 7px; display: flex; gap: 4px; pointer-events: none; opacity: 0; transition: opacity 0.35s; }
.f3.has-started .f3-segs { opacity: 1; }
/* drawn in white with a difference blend: dark on a white scene, light on a dark one, never lost on either */
.f3-segs { mix-blend-mode: difference; }
.f3-segs i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
.f3-segs b { display: block; height: 100%; background: rgba(255, 255, 255, 0.92); transform-origin: 0 50%; transform: scaleX(0); }
/* captions: the scene's line, in plain words */
.f3-cc { position: absolute; z-index: 7; left: 50%; bottom: clamp(12px, 2.4vw, 28px); transform: translateX(-50%); width: max-content; max-width: min(88%, 60ch); margin: 0; padding: 0.42em 0.8em; border-radius: 10px; background: rgba(255, 255, 255, 0.94); color: var(--ink, #0b0b0d); box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.1), 0 6px 18px -8px rgba(11, 11, 13, 0.3); font: 600 clamp(12.5px, 1.2vw, 18px)/1.4 var(--f-sans); letter-spacing: -0.005em; text-align: center; text-wrap: balance; pointer-events: none; display: none; transition: bottom 0.35s var(--ease); }
.f3.has-cc.has-started .f3-cc:not(:empty) { display: block; }
.f3.has-cc:hover .f3-cc, .f3.has-cc:focus-within .f3-cc, .f3.has-cc.has-started:not(.is-playing) .f3-cc, .f3.has-cc.is-scrubbing .f3-cc { bottom: 72px; }
@media (pointer: coarse) { .f3.has-cc.has-started .f3-cc { bottom: 64px; } }
.f3-btn.is-cc { font: 800 10.5px/1 var(--f-sans); letter-spacing: 0.04em; }
.f3-btn.is-cc[aria-pressed="true"] { background: var(--ink, #0b0b0d); color: #fff; }
.f3-btn:focus-visible, .f3-track:focus-visible, .f3-play:focus-visible, .f3-chip:focus-visible, .k-endacts > *:focus-visible { outline: 2px solid var(--acc-tx, #3d55ff); outline-offset: 3px; }
.f3-track:focus-visible { border-radius: 6px; }
/* the chapter chips sit on the paper, under the film: their ring takes the accent's on-paper variant */
.f3-chip:focus-visible { outline-color: var(--acc-tx, var(--focus)); }
.f3-track:focus-visible::after { content: attr(aria-valuetext); position: absolute; bottom: 28px; left: 0; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: rgba(11, 11, 13, 0.9); color: #fff; font: 600 12px/1 var(--f-sans); pointer-events: none; }
/* full screen where the browser has none for elements (iPhone): the film fills the window */
.f3.is-pfs { position: fixed; inset: 0; z-index: 160; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; display: grid; place-items: center; background: #fff; color: inherit; box-shadow: none; }
.f3.is-pfs::backdrop { background: #fff; }
.f3.is-pfs .f3-stage { width: 100vw; height: 100dvh; aspect-ratio: auto; }
html.f3-pfs-open, html.f3-pfs-open body { overflow: hidden; }
/* export: only the stage */
.f3.is-export { border-radius: 0; box-shadow: none; }
.f3.is-export .f3-play, .f3.is-export .f3-ui, .f3.is-export .f3-chap, .f3.is-export .f3-hud, .f3.is-export .f3-segs { display: none !important; }
.f3.is-export .sc-shot[data-i="0"] { filter: none; }

/* ---------- the year board (About): split-flap letters ---------- */
.f3-board { position: absolute; z-index: 6; right: 6cqw; top: max(10cqmin, 60px); display: flex; gap: 0.9cqmin; pointer-events: none; font: 800 8cqmin/1 var(--f-sans); font-variant-numeric: tabular-nums; }
.k-flap { position: relative; display: grid; place-items: center; width: 0.8em; height: 1.16em; border-radius: 0.9cqmin; background: linear-gradient(#1b1b21 0 49.5%, #0e0e12 50.5% 100%); color: #f5f2ec; box-shadow: 0 0.8cqmin 2cqmin -0.6cqmin rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.07); overflow: hidden; }
.k-flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.9); }
.k-flap b { display: block; font-weight: inherit; transform: scaleY(calc(1 - 1.4 * min(var(--f, 0), 1 - var(--f, 0)))); }
@container (aspect-ratio < 1) { .f3-board { font-size: 5.6cqmin; top: max(8cqmin, 50px); right: 5cqw; } }

/* ---------- type ---------- */
/* the odometer: a strip per digit, clipped to one digit's height */
.k-odo { display: inline-flex; align-items: flex-start; white-space: nowrap; line-height: 1; }
.k-odo-c { display: inline-block; height: 1em; overflow: hidden; }
/* digits never shrink to fit a narrow box (they would be cut in half); fitNum() makes the type smaller instead */
.k-odo > * { flex: none; }
/* a label rule on the parent must not reach the odometer's own spans */
.k-vault b span, .k-stat b span, .k-cm-s b span, .k-ph-pc b span { font: inherit; letter-spacing: inherit; opacity: 1; }
.k-odo-s { display: flex; flex-direction: column; }
.k-odo-s i { display: block; height: 1em; line-height: 1; font-style: normal; }
.k-odo-x { display: inline-block; height: 1em; line-height: 1; }
.k-num.k-odo { display: flex; margin: -0.04em 0 -0.05em; }
/* a stat's rule draws itself as the number lands */
.k-stat { border-top: 0; position: relative; }
.k-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: color-mix(in srgb, currentColor 25%, transparent); transform: scaleX(var(--line, 1)); transform-origin: 0 50%; }
.k-stat.is-hot::before { background: var(--acc); }
.sc.is-acc .k-stat::before, .sc.is-acc .k-stat.is-hot::before { background: color-mix(in srgb, currentColor 40%, transparent); }

/* ---------- the work, with depth ---------- */
.t-cards.is-fan .k-card { translate: calc(var(--pan, 0) * var(--d, 1) * 2.6cqw) 0; }

/* a phone, swiping a carousel */
.sc.t-phone { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; column-gap: 4cqw; }
.k-ph-copy { display: flex; flex-direction: column; gap: 2.4cqmin; min-width: 0; }
.k-ph-stage { --pan: 0; position: relative; align-self: stretch; display: grid; place-items: center; perspective: 1200px; min-height: 0; }
.k-ph { position: relative; z-index: 3; height: 76cqh; width: auto; aspect-ratio: 9 / 19; border-radius: 5.4cqmin; padding: 1.1cqmin; background: #101014; box-shadow: 0 0 0 0.35cqmin #2c2c33, 0 5cqmin 10cqmin -3cqmin rgba(0, 0, 0, 0.75), inset 0 0 0 0.2cqmin #45454f; translate: calc(var(--pan) * 1.2cqw) 0; }
.k-ph-island { position: absolute; z-index: 2; top: 2.2cqmin; left: 50%; width: 26%; height: 2.4cqmin; margin-left: -13%; border-radius: 99px; background: #000; }
.k-ph-scr { position: relative; height: 100%; border-radius: 4.4cqmin; overflow: hidden; background: #fff; color: #111; display: flex; flex-direction: column; }
.k-ph-top { display: flex; align-items: center; gap: 1.2cqmin; padding: 6cqmin 1.8cqmin 1.3cqmin; font: 700 clamp(8px, 1.7cqmin, 17px)/1 var(--f-sans); }
.k-ph-top .k-ig-av { width: 3.8cqmin; height: 3.8cqmin; padding: 0.3cqmin; }
.k-ph-top .k-ig-av::after { border-width: 0.3cqmin; }
.k-ph-top span { margin-left: auto; opacity: 0.55; letter-spacing: 0.1em; }
.k-ph-view { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ececec; flex: none; }
.k-ph-track { --n: 1; display: flex; height: 100%; width: calc(var(--n) * 100%); }
.k-ph-track img { width: calc(100% / var(--n)); height: 100%; object-fit: cover; flex: none; display: block; }
.k-ph-pill { position: absolute; top: 1.3cqmin; right: 1.3cqmin; padding: 0.7cqmin 1.2cqmin; border-radius: 99px; background: rgba(0, 0, 0, 0.62); color: #fff; font: 600 clamp(7px, 1.5cqmin, 15px)/1 var(--f-sans); font-variant-numeric: tabular-nums; }
.k-ph-acts { display: flex; gap: 1.8cqmin; padding: 1.5cqmin 1.8cqmin 1cqmin; }
.k-ph-acts svg { width: 3.4cqmin; height: 3.4cqmin; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.k-ph-acts svg:last-child { margin-left: auto; }
.k-ph-cap { display: flex; flex-direction: column; gap: 0.9cqmin; padding: 0.4cqmin 1.8cqmin; }
.k-ph-cap i { height: 1.1cqmin; border-radius: 9px; background: #e7e7ea; }
.k-ph-cap i:nth-child(2) { width: 82%; }
.k-ph-cap i:nth-child(3) { width: 46%; }
.k-ph-back { --k: 1; position: absolute; z-index: 1; height: 50%; aspect-ratio: 4 / 5; filter: brightness(0.62) saturate(0.85); translate: calc(var(--pan) * var(--d, 1) * -3.2cqw) 0; }
.k-ph-back:nth-child(1) { left: 2%; top: 6%; transform: translateY(calc((1 - var(--k)) * 18cqh)) rotate(calc(-9deg * var(--k))) scale(calc(0.7 + 0.3 * var(--k))); }
.k-ph-back:nth-child(2) { right: 0; top: 28%; transform: translateY(calc((1 - var(--k)) * 18cqh)) rotate(calc(8deg * var(--k))) scale(calc(0.7 + 0.3 * var(--k))); }
.k-ph-back:nth-child(3) { left: 14%; bottom: 2%; height: 40%; transform: translateY(calc((1 - var(--k)) * 18cqh)) rotate(calc(5deg * var(--k))) scale(calc(0.7 + 0.3 * var(--k))); }
@container (aspect-ratio < 1) {
  .sc.t-phone { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); row-gap: 2.4cqmin; align-content: stretch; }
  .t-phone .k-ph-copy .k-sub { display: none; }
  /* the phone takes the height the copy leaves, never more */
  .k-ph-stage { display: flex; align-items: center; justify-content: center; }
  .k-ph { height: min(58cqh, 100cqw); max-height: 100%; }
  .k-ph-back { height: 54%; }
}

/* the US and India, side by side */
.sc.t-map { justify-content: flex-start; }
.k-map { position: relative; align-self: stretch; flex: 1; min-height: 0; margin-top: 1cqmin; }
.k-map svg { position: absolute; left: 0; top: 0; overflow: visible; }
.k-map-coast { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.k-map-div { stroke: currentColor; stroke-width: 1; opacity: 0.22; }
.k-map-name { fill: currentColor; font-weight: 800; letter-spacing: -0.04em; }
.k-map-name.is-in { fill: var(--acc); }
.k-map-list { fill: currentColor; font-weight: 600; opacity: 0.78; }
.k-map-arc { fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; }
.k-map-glyph { fill: currentColor; }
.k-map-pin.is-home .k-map-glyph { fill: var(--acc); }
.k-map-pin text { fill: currentColor; font-weight: 700; letter-spacing: -0.01em; }
.k-map-pin tspan { font-weight: 500; opacity: 0.68; }
.k-map-ring { fill: none; stroke: var(--acc); stroke-width: 2; }
/* labels get a halo in the ground colour, so a coastline or an arc never runs through the words */
.k-map-pin text, .k-map-name, .k-map-list { paint-order: stroke fill; stroke: var(--halo, #0b0b0d); stroke-width: 0.32em; stroke-linejoin: round; }
.sc.is-paper .k-map-pin text, .sc.is-paper .k-map-name, .sc.is-paper .k-map-list { --halo: #f3efe7; }
.sc.is-deep { --halo: #0a0a10; }

/* a calendar for a posting run */
.sc.t-cal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 5cqw; }
.k-cal-copy { display: flex; flex-direction: column; gap: 2.4cqmin; min-width: 0; }
.k-cal-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 1cqmin 3.4cqmin; font: 650 clamp(10px, 2.1cqmin, 22px)/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.k-cal-meta span { opacity: 0.8; }
.k-cal-meta b { font-weight: 800; color: color-mix(in srgb, var(--acc) 62%, #000); }
.sc:not(.is-paper) .k-cal-meta b { color: var(--acc); }
.k-cal-meta i { font-style: normal; }
.k-cal { --rows: 7; height: min(80cqh, 100%); display: flex; flex-direction: column; transform-origin: 50% 60%; }
.k-cal-wk { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 0 1cqmin; font: 700 clamp(8px, 1.6cqmin, 16px)/1 var(--f-sans); letter-spacing: 0.14em; text-align: center; opacity: 0.5; }
.k-cal-g { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(var(--rows), 1fr); }
.k-cal-c { --on: 0; position: relative; padding: 0.4cqmin; min-width: 0; min-height: 0; }
.k-cal-in { position: relative; display: block; width: 100%; height: 100%; border-radius: 0.9cqmin; overflow: hidden; background: color-mix(in srgb, currentColor 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent); }
.k-cal-in img, .k-cal-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.k-cal-blank { background: linear-gradient(140deg, color-mix(in srgb, var(--acc) 50%, #fff), color-mix(in srgb, var(--acc-2) 40%, #fff)); }
.k-cal-n { position: absolute; z-index: 1; left: 0.6cqmin; top: 0.6cqmin; font: 700 clamp(7px, 1.35cqmin, 15px)/1 var(--f-sans); font-style: normal; white-space: nowrap; opacity: 0.55; }
.k-cal-c.is-post .k-cal-n { color: #fff; opacity: calc(0.55 + 0.45 * var(--on)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); }
.k-cal-cur { position: absolute; z-index: 2; left: 0; top: 0; width: calc(100% / 7); height: calc(100% / var(--rows)); box-sizing: border-box; border: 0.35cqmin solid var(--acc); border-radius: 1.1cqmin; box-shadow: 0 0 2.4cqmin color-mix(in srgb, var(--acc) 55%, transparent); pointer-events: none; }
.sc.is-paper .k-cal-cur { border-color: color-mix(in srgb, var(--acc) 70%, #000); }
.k-cal-tag { position: absolute; z-index: 3; left: 50%; bottom: -0.6cqmin; translate: -50% 0; white-space: nowrap; padding: 0.5cqmin 1cqmin; border-radius: 99px; background: #121212; color: #fff; font: 700 clamp(7px, 1.3cqmin, 14px)/1 var(--f-sans); box-shadow: 0 0.6cqmin 1.4cqmin rgba(0, 0, 0, 0.3); }
/* side by side only on a clearly wide stage; the read's squarer stage and phones stack it */
@container (aspect-ratio < 1.3) {
  .sc.t-cal { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); row-gap: 2cqmin; align-content: center; }
  .t-cal .k-cal { height: 100%; max-width: 100%; justify-self: center; }
}
@container (aspect-ratio < 1.3) and (height < 600px) { .t-cal .k-cal-copy .k-sub { display: none; } }

/* a comment sheet beside the campaign's counts */
.sc.t-cm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); align-items: center; column-gap: 5cqw; }
.k-cm-copy { display: flex; flex-direction: column; gap: 2.4cqmin; min-width: 0; }
.k-cm-stats { display: flex; flex-direction: column; gap: 2cqmin; margin-top: 1cqmin; }
.k-cm-s { display: flex; align-items: baseline; gap: 2.2cqmin; padding-top: 1.6cqmin; border-top: 2px solid color-mix(in srgb, currentColor 18%, transparent); }
.k-cm-s.is-hot { border-top-color: var(--acc); }
.k-cm-s b { font: 800 min(9cqmin, 7.4cqw)/1 var(--f-sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.k-cm-s.is-hot b { color: var(--acc); }
.k-cm-s > span { font: 600 clamp(11px, 2.5cqmin, 26px)/1.2 var(--f-sans); opacity: 0.75; }
.k-cm-sheet { position: relative; justify-self: center; width: min(100%, 50cqh); border-radius: 3cqmin; background: #fff; color: #111; box-shadow: 0 4cqmin 10cqmin -3cqmin rgba(0, 0, 0, 0.6); overflow: hidden; display: flex; flex-direction: column; }
.k-cm-hd { position: relative; padding: 2.8cqmin 2.4cqmin 1.6cqmin; text-align: center; border-bottom: 1px solid #ececef; }
.k-cm-hd b { font: 700 clamp(10px, 2.1cqmin, 21px)/1 var(--f-sans); }
.k-cm-hd i { position: absolute; left: 50%; top: 1.1cqmin; width: 6cqmin; height: 0.6cqmin; margin-left: -3cqmin; border-radius: 9px; background: #d4d4d8; }
.k-cm-body { --rows: 7; position: relative; height: calc(var(--rows) * 6.4cqmin); overflow: hidden; }
.k-cm-body::before, .k-cm-body::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3cqmin; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
.k-cm-body::after { top: auto; bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.k-cm-list { list-style: none; margin: 0; padding: 0 2.4cqmin; }
.k-cm-list li { display: flex; align-items: center; gap: 1.8cqmin; height: 6.4cqmin; }
.k-cm-av { flex: none; width: 4cqmin; height: 4cqmin; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h, 20) 70% 64%), hsl(calc(var(--h, 20) + 50) 65% 46%)); }
.k-cm-list span { flex: 1; display: flex; flex-direction: column; gap: 0.8cqmin; min-width: 0; }
.k-cm-list u { display: block; height: 1cqmin; border-radius: 9px; background: #e4e4e7; }
.k-cm-list b { font: 700 clamp(10px, 2.3cqmin, 24px)/1 var(--f-sans); }
.k-cm-list svg { flex: none; width: 2.6cqmin; height: 2.6cqmin; fill: none; stroke: #a1a1aa; stroke-width: 2; }
.k-cm-ft { display: flex; align-items: center; gap: 1.6cqmin; padding: 1.6cqmin 2.4cqmin; border-top: 1px solid #ececef; font: 500 clamp(9px, 1.9cqmin, 19px)/1 var(--f-sans); color: #9a9aa2; }
.k-cm-note { margin: 0; padding: 0.6cqmin 2.4cqmin 1.6cqmin; font: 650 clamp(7px, 1.3cqmin, 13px)/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: #a1a1aa; }
@container (aspect-ratio < 1) {
  .sc.t-cm { grid-template-columns: 1fr; row-gap: 3cqmin; align-content: center; }
  .k-cm-stats { flex-direction: row; gap: 3cqw; }
  .k-cm-s { flex: 1; flex-direction: column; align-items: flex-start; gap: 0.8cqmin; }
  .k-cm-s b { font-size: 6.6cqw; }
  .k-cm-sheet { width: 100%; }
  .k-cm-ft { display: none; }
}

/* creatives cut down round by round */
.sc.t-bracket { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; column-gap: 4cqw; }
.k-br-copy { display: flex; flex-direction: column; gap: 2cqmin; min-width: 0; }
.t-bracket .k-h { font-size: 7cqmin; max-width: 15ch; line-height: 0.98; }
.k-br { position: relative; align-self: stretch; margin-block: 3cqmin 5cqmin; min-height: 0; }
.k-br-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.k-br-ln { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.3; }
.k-br-ln.is-win { opacity: 1; stroke-width: 2.4; }
.k-ad3 { --glow: 0; --c1: var(--acc-2); --c2: var(--acc-ink); position: absolute; display: flex; flex-direction: column; gap: 0.45cqmin; padding: 0.6cqmin; border-radius: 0.9cqmin; background: #fff; color: #111; box-shadow: 0 0.8cqmin 2cqmin -0.6cqmin rgba(0, 0, 0, 0.35), 0 0 calc(var(--glow) * 6cqmin) calc(var(--glow) * 0.8cqmin) color-mix(in srgb, var(--acc-ink) 55%, transparent); overflow: hidden; box-sizing: border-box; }
.k-ad3 > i { display: block; }
.k-ad3-img { flex: 1; min-height: 0; border-radius: 0.5cqmin; background: var(--c1); }
.k-ad3-l { flex: none; height: 0.55cqmin; width: 82%; border-radius: 9px; background: #d4d4d8; }
.k-ad3-l.is-s { width: 56%; }
.k-ad3-cta { flex: none; height: 0.9cqmin; width: 42%; border-radius: 99px; background: var(--c2); }
.k-ad3.is-l1 .k-ad3-img { order: 3; }
.k-ad3.is-v1 { --c1: var(--acc-ink); --c2: var(--acc-2); }
.k-ad3.is-v2 { --c1: linear-gradient(135deg, var(--acc-2), var(--acc)); }
.k-ad3.is-v3 { --c1: #2f3528; --c2: var(--acc-2); }
.k-ad3-x { position: absolute; left: -6%; right: -6%; top: 48%; height: 0.45cqmin; background: #e23b2e; rotate: -26deg; transform-origin: 0 50%; transform: scaleX(0); }
.k-br-note { position: absolute; right: 0; bottom: -4cqmin; margin: 0; font: 650 clamp(7px, 1.3cqmin, 13px)/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
@container (aspect-ratio < 1) {
  .sc.t-bracket { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); row-gap: 2cqmin; }
  .t-bracket .k-h { font-size: 7.4cqmin; }
}

/* ---------- reduced motion: nothing pulses ---------- */
@media (prefers-reduced-motion: reduce) { .r3-rail i.is-on::after { animation: none; } }
html.motion-off .r3-rail i.is-on::after { animation: none; }

/* the newspaper on a tall stage: a smaller page, so the kicker, the page and both answers fit */
@container (aspect-ratio < 1) { .t-paper { gap: 1.6cqh; } .t-paper .k-news { width: min(50cqw, 30cqh); } }
/* in portrait the kicker sits in the flow; drop the offsets it carries from its landscape position */
@container (aspect-ratio < 1) { .t-paper > .k-kicker { top: auto; left: auto; } }
@container (aspect-ratio < 1) and (height < 560px) {
  /* a short tall stage (the read on a phone): the two answers sit side by side under the page */
  .sc.t-paper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 2.4cqw; row-gap: 2cqh; justify-items: center; align-content: center; }
  .t-paper > .k-kicker { grid-column: 1 / -1; justify-self: start; }
  .t-paper .k-news { grid-column: 1 / -1; width: auto; height: min(46cqh, 70cqw); min-height: 0; }
  .t-paper .k-branch { width: 100%; min-width: 0; padding: 1.4cqh 3cqw; align-self: start; }
  .t-paper .k-branch.is-0 { grid-column: 1; }
  .t-paper .k-branch.is-1 { grid-column: 2; }
  .t-paper .k-branch b { font-size: 4.8cqw; }
  .t-paper .k-branch span { font-size: 3cqw; }
}
/* the masthead's small print keeps to its corner on a small page */
.k-news-mast { gap: 1.2cqmin; }
.k-news-mast b { flex: 1 1 auto; overflow-wrap: normal; word-break: normal; }
.k-news-mast span { flex: 0 1 30%; text-align: right; line-height: 1.25; }
/* the newspaper on a wide stage: the kicker gets its own row above the page and the two answers
   (a generic ".sc > *" rule made the floating kicker relative, so it used to drop below the page) */
@container (aspect-ratio >= 1) {
  .sc.t-paper { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); }
  .sc.t-paper > .k-kicker { position: relative; left: auto; top: auto; grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .t-paper .k-news { grid-row: 2 / 4; width: min(44cqw, 64cqh); }
  .t-paper .k-branch.is-0 { grid-row: 2; }
  .t-paper .k-branch.is-1 { grid-row: 3; }
}

/* ---------- impact numbers, the chain, and the trailer's pieces ---------- */
/* an impact number: odometer and label, in a copy column or beside a prop */
.k-hit { display: flex; flex-direction: column; gap: 1.2cqmin; min-width: 0; align-self: stretch; }
.k-hit-n { font-size: min(22cqmin, 15cqw); line-height: 0.84; transform-origin: 0 70%; }
.sc.is-acc .k-hit-n { color: var(--acc-ink); }
.k-hit-l { max-width: 20ch; }
/* a chain of steps under a number; a light runs along it and lands on the last */
.k-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4cqmin 1.2cqmin; margin-top: 2.4cqmin; }
.k-chain-n { --lit: 0; padding: 1.1cqmin 2.2cqmin; border-radius: 99px; border: 0.3cqmin solid currentColor; font: 700 clamp(10px, 2.5cqmin, 26px)/1 var(--f-sans); letter-spacing: -0.01em; white-space: nowrap; background: color-mix(in srgb, currentColor calc(var(--lit) * 22%), transparent); scale: calc(1 + var(--lit) * 0.1); }
.k-chain-n.is-hot { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.sc.is-acc .k-chain-n.is-hot { background: var(--acc-ink); border-color: var(--acc-ink); color: var(--acc); }
.k-chain-a { position: relative; flex: none; width: 2.6cqmin; height: 0.32cqmin; background: currentColor; opacity: 0.55; transform-origin: 0 50%; }
.k-chain-a::after { content: ""; position: absolute; right: -0.1cqmin; top: 50%; width: 1.1cqmin; height: 1.1cqmin; border-top: 0.32cqmin solid currentColor; border-right: 0.32cqmin solid currentColor; transform: translateY(-50%) rotate(45deg); }
/* the phone keeps a slow push of its own */
.k-ph { scale: calc(1 + var(--push, 0) * 0.035); }
/* a profile on the phone: the count runs, the grid assembles */
.k-ph-prof { display: flex; align-items: center; gap: 2.2cqmin; padding: 1.2cqmin 1.8cqmin 1cqmin; }
.k-ph-prof .k-ig-av { width: 8cqmin; height: 8cqmin; padding: 0.45cqmin; }
.k-ph-prof .k-ig-av::after { border-width: 0.45cqmin; }
.k-ph-pc { display: flex; flex-direction: column; gap: 0.5cqmin; min-width: 0; }
.k-ph-pc b { font: 800 4.6cqmin/1 var(--f-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.k-ph-pc span { font: 500 clamp(7px, 1.6cqmin, 16px)/1 var(--f-sans); opacity: 0.6; }
.k-ph-bio { display: flex; flex-direction: column; gap: 0.7cqmin; padding: 0.2cqmin 1.8cqmin 1.6cqmin; }
.k-ph-bio b { display: block; width: 42%; height: 1.3cqmin; border-radius: 9px; background: #d4d4d8; }
.k-ph-bio i { display: block; height: 1cqmin; border-radius: 9px; background: #e7e7ea; }
.k-ph-bio i:last-child { width: 68%; }
.k-ph-grid { --gap: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(0.25cqmin + var(--gap) * 1.4cqmin); padding-inline: calc(var(--gap) * 1.4cqmin); }
.k-ph-grid i { display: block; aspect-ratio: 1; overflow: hidden; background-color: color-mix(in srgb, var(--acc) 26%, #fff); }
.k-ph-grid i.is-cut { background-size: 300% 300%; background-repeat: no-repeat; }
.k-ph-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the merged card with a number */
.k-vault.is-num { --flash: 0; align-items: flex-start; text-align: left; padding: 3.6cqmin 6cqmin 4.2cqmin; box-shadow: 0 0 calc(12cqmin + var(--flash) * 26cqmin) calc(-2cqmin + var(--flash) * 3cqmin) var(--acc); }
.k-vault.is-num small { font: 750 clamp(9px, 2.1cqmin, 22px)/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
.k-vault.is-num b { font-size: min(17cqmin, 13cqw); line-height: 0.86; font-variant-numeric: tabular-nums; }
.k-vault.is-num > span { font-size: clamp(11px, 3.3cqmin, 34px); }
/* the newspaper with a number beside it */
.k-news { scale: calc(1 + var(--push, 0) * 0.03); }
.t-paper.has-hit .k-hit { justify-content: center; }
@container (aspect-ratio >= 1) {
  .t-paper.has-hit .k-news { width: min(38cqw, 60cqh); }
  .t-paper.has-hit .k-hit { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}
@container (aspect-ratio < 1) {
  .t-paper.has-hit .k-hit { align-items: center; text-align: center; align-self: stretch; grid-column: 1 / -1; justify-self: stretch; }
  .t-paper.has-hit .k-hit-n { justify-content: center; transform-origin: 50% 70%; }
}

/* ---------- the reel: a trailer, so the type is bigger and the labels read at a glance ---------- */
.f3[data-look="trailer"] .k-kicker { font-size: clamp(10px, 2.5cqmin, 26px); letter-spacing: 0.15em; opacity: 0.86; }
.f3[data-look="trailer"] .t-counter .k-num { font-size: min(34cqmin, 22cqw); }
.f3[data-look="trailer"] .k-num-l { font-size: 5.4cqmin; max-width: 22ch; }
.f3[data-look="trailer"] .k-hit-n { font-size: min(25cqmin, 16cqw); }
.f3[data-look="trailer"] .t-map .k-h { font-size: 7cqmin; max-width: 24ch; }
.f3[data-look="trailer"] .k-cm-s.is-hot b { font-size: min(15cqmin, 11cqw); }
.f3[data-look="trailer"] .t-end .k-h { font-size: 10cqmin; }
.t-map > .k-h, .t-map > .k-kicker { z-index: 2; }
.t-map.is-lite .k-map { overflow: visible; }
.f3[data-look="trailer"] .k-map-coast { stroke-width: 3; }
.f3[data-look="trailer"] .k-map-arc { stroke-width: 3.4; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 70%, transparent)); }
.f3[data-look="trailer"] .k-num-l, .k-hit-l { text-wrap: balance; }
.f3[data-look="trailer"] .k-vault.is-num b { font-size: min(21cqmin, 15cqw); }
@container (aspect-ratio >= 1) { .f3[data-look="trailer"] .sc.t-cm { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.f3[data-look="trailer"] .k-cm-sheet { width: min(100%, 60cqh); }
.f3[data-look="trailer"] .k-cm-s b { font-size: min(10cqmin, 7.6cqw); }
.f3[data-look="trailer"] .k-cm-s.is-hot b { font-size: min(19cqmin, 14cqw); }
.f3[data-look="trailer"] .k-cm-s > span { font-size: clamp(11px, 3cqmin, 30px); }
/* a row of pictures on an end card */
/* the case's real work: every piece as tall as --sh allows, all of them shrinking together when the row runs out of room */
.k-strip { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, calc(var(--sh, 22cqh) * var(--ar, 0.75)))); gap: 1.4cqmin; width: 100%; margin-top: 1.4cqmin; }
.k-strip i { display: block; aspect-ratio: var(--ar, 0.75); border-radius: 1.2cqmin; overflow: hidden; background: rgba(0, 0, 0, 0.2); box-shadow: 0 1.6cqmin 3.6cqmin -1.6cqmin rgba(0, 0, 0, 0.45); }
.k-strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
/* a tall stage keeps one row of up to four, smaller, so the card clears the player's bar */
@container (aspect-ratio < 1) {
  .k-strip { grid-template-columns: repeat(var(--np, 4), minmax(0, calc(var(--shp, 20cqh) * var(--ar, 0.75)))); }
  .k-strip i:nth-child(n + 5) { display: none; }
  .t-end.has-strip { padding-bottom: max(10cqmin, 64px); }
}
/* a film's first scene in its own aura: the accent and the second colour glow up through the ink */
.sc > .sc-glow { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sc-glow i { position: absolute; border-radius: 50%; }
.sc-glow i:first-child { width: 120cqmin; height: 120cqmin; right: -30cqmin; top: -42cqmin; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 46%, transparent), color-mix(in srgb, var(--acc) 16%, transparent) 55%, transparent); }
.sc-glow i:last-child { width: 100cqmin; height: 100cqmin; left: -34cqmin; bottom: -52cqmin; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc-2) 38%, transparent), color-mix(in srgb, var(--acc-2) 12%, transparent) 55%, transparent); }
.t-paper.has-hit .k-news { width: min(36cqw, 50cqh); }
@container (aspect-ratio >= 1) { .t-paper.has-hit .k-news { width: min(36cqw, 50cqh); } }
.f3[data-look="trailer"] .t-end .k-sub { font-size: clamp(12px, 3.2cqmin, 32px); max-width: 46ch; }
/* the smaller page beside a number: the ad's words sit above the QR, sized to the page */
.t-paper.has-hit .k-ad { justify-content: flex-start; }
.t-paper.has-hit .k-ad b { font-size: calc(min(36cqw, 50cqh) * 0.12); }
.t-paper.has-hit .k-ad span { max-width: 60%; font-size: calc(min(36cqw, 50cqh) * 0.036); }
.t-paper.has-hit .k-news-mast b { font-size: calc(min(36cqw, 50cqh) * 0.1); }
@container (aspect-ratio < 1) {
  .t-paper.has-hit .k-news { width: min(62cqw, 40cqh); }
  .t-paper.has-hit .k-ad b { font-size: calc(min(62cqw, 40cqh) * 0.12); }
  .t-paper.has-hit .k-ad span { font-size: calc(min(62cqw, 40cqh) * 0.036); }
  .t-paper.has-hit .k-news-mast b { font-size: calc(min(62cqw, 40cqh) * 0.1); }
}
/* the stamps scene's caption is a line of his: a dark pill so it reads on the paper, not grey small print */
.t-stamps .k-cap { position: relative; z-index: 20 !important; padding: 0.7em 1.1em; border-radius: 99px; background: rgba(11, 11, 13, 0.86); color: #f5f2ec; opacity: 1; font-size: clamp(11px, 2.5cqmin, 26px); max-width: 70ch; }

/* ---------- text-led scenes read like a film: bigger heads and items, so a list fills the frame ---------- */
.t-chips .k-h-s, .t-flow .k-h-s, .t-check .k-h-s, .t-split .k-h-s, .t-people .k-h-s, .t-stats .k-h-s, .t-compare .k-h-s, .t-columns .k-h-s, .t-line .k-h-s { font-size: 6.6cqmin; max-width: 26ch; }
.k-chips { gap: 2.2cqmin; }
.k-chip { font-size: clamp(12px, 3.7cqmin, 40px); padding: 1.8cqmin 3.2cqmin; }
.k-node { font-size: clamp(12px, 3.5cqmin, 38px); padding: 3cqmin; }
.k-node span { font-size: clamp(10px, 2.1cqmin, 22px); }
.k-checks { gap: 2.6cqmin; }
.k-checks li { font-size: clamp(12px, 4.1cqmin, 44px); }
.k-checks i { width: 5.4cqmin; height: 5.4cqmin; }
.k-checks i::after { left: 1.75cqmin; top: 1cqmin; width: 1.5cqmin; height: 2.8cqmin; }
.k-stat b { font-size: min(11cqmin, 8.6cqw); }
.k-stat > span { font-size: clamp(11px, 2.9cqmin, 30px); }
.k-bh-l { font-size: clamp(11px, 2.9cqmin, 30px); }
.k-bh-v { font-size: 5.6cqmin; }
.k-side span { font-size: clamp(12px, 3.1cqmin, 32px); }
.k-group span { font-size: clamp(11px, 3cqmin, 30px); }
.k-num-l { text-wrap: balance; }
/* 25 drawn reel frames beside the count; each goes live as the count passes it */
.sc.t-counter.has-tiles { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 6cqw; row-gap: 1.4cqmin; }
.k-tiles-copy { grid-column: 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 1.4cqmin; min-width: 0; }
.k-tiles { grid-column: 2; align-self: center; display: grid; grid-template-columns: repeat(5, auto); gap: 1.3cqmin; }
.k-tile { --on: 0; position: relative; display: block; width: 6.6cqh; aspect-ratio: 9 / 16; border-radius: 1cqmin; border: 0.25cqmin solid color-mix(in srgb, currentColor calc(28% + var(--on) * 0%), transparent); background: color-mix(in srgb, var(--acc) calc(var(--on) * 100%), color-mix(in srgb, currentColor 6%, transparent)); box-shadow: 0 0 calc(var(--on) * 3cqmin) calc(var(--on) * -0.6cqmin) var(--acc); }
.k-tile::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-style: solid; border-width: 1.1cqmin 0 1.1cqmin 1.8cqmin; border-color: transparent transparent transparent color-mix(in srgb, currentColor calc(35% + var(--on) * 65%), transparent); }
.sc.is-ink .k-tile::after, .sc.is-deep .k-tile::after { border-left-color: color-mix(in srgb, #fff calc(35% + var(--on) * 65%), transparent); }
.k-tiles-note { grid-column: 1 / -1; margin: 0.8cqmin 0 0; font: 650 clamp(7px, 1.3cqmin, 13px)/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
@container (aspect-ratio < 1) {
  .sc.t-counter.has-tiles { grid-template-columns: 1fr; }
  .k-tiles { grid-column: 1; justify-self: start; grid-template-columns: repeat(9, auto); margin-top: 2cqmin; }
  .k-tile { width: 7.2cqw; }
}
/* stamps on a tall stage: smaller, so a stamp near the edge stays on the stage and they don't pile on each other */
@container (aspect-ratio < 1) { .k-stamp { font-size: 5cqmin; padding: 1cqmin 2.2cqmin; border-width: 0.7cqmin; } }
/* an accent word inside something already filled with the accent keeps the fill's ink (it used to vanish: the "60" in
   "Made with about 60 creators" was accent on accent) */
.k-chip.is-alt .k-acc, .k-side.is-hot .k-acc, .k-branch.is-0 .k-acc, .k-chain-n.is-hot .k-acc, .k-vault .k-acc, .k-col.is-hot .k-acc { color: inherit !important; }
/* the stamped work: every creative whole (its own 4:5 shape, never squeezed), overlapping a quarter so five still fit */
.k-stampwall { --n: 5; --sh: min(56cqh, calc(88cqw / (var(--n) * 0.75 + 0.25) * 1.25)); gap: 0; }
.k-stampwall .k-card { flex: none; height: var(--sh); margin-inline: calc(var(--sh) * -0.1); }
@container (aspect-ratio < 1) { .k-stampwall { --sh: 22cqh; } .k-stampwall .k-card { margin: 0.6cqw; } }

/* ---------- fixes from the frame-by-frame inspection ---------- */
/* flow cards: the step's words are one block, so an accent word stays inline and its underline only under the word */
.k-node-t { margin: 0; }
/* bars: every row shares one set of columns, so tracks line up and a longer value never shortens its own track */
.k-bars-h { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr) max-content; column-gap: 2.4cqw; row-gap: 3cqmin; }
.k-bh { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
@container (aspect-ratio < 1) {
  .k-bars-h { grid-template-columns: minmax(0, 1fr) max-content; }
  .k-bh { grid-template-columns: subgrid; }
}
/* four numbers sit two by two (not three and an orphan); on a tall stage each number gets its own row, label beside it */
.k-stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 120cqh; }
@container (aspect-ratio < 1) {
  .k-stats, .k-stats:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; gap: 2.2cqmin; }
  .k-stat { flex-direction: row; align-items: center; gap: 4cqw; padding-top: 1.6cqmin; }
  .k-stat b { flex: none; min-width: 30cqw; }
  .k-stat > span { font-size: clamp(11px, 3.4cqmin, 30px); }
}
/* the climbing line: labels clear the line and carry a halo in the ground colour */
.k-pt { transform: translate(-50%, -150%); }
.k-pt b, .k-pt span { text-shadow: 0 0 0.35em var(--halo, #0b0b0d), 0 0 0.12em var(--halo, #0b0b0d); }
.sc.is-paper .k-pt { --halo: #f3efe7; }
/* the calendar: a post with no picture is a plain tile with a comment glyph, not a gradient that reads as a failed load;
   day numbers on pictures sit on a small dark chip; the tag never goes below 10px */
.k-cal-blank { display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 14%, #fbf8f1); color: color-mix(in srgb, var(--acc) 55%, #1a1a1a); }
.k-cal-blank svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2; }
.k-cal-c.is-post .k-cal-n { padding: 0.25em 0.45em; border-radius: 99px; background: rgba(10, 10, 12, calc(0.62 * var(--on))); text-shadow: none; font-size: clamp(8px, 1.35cqmin, 15px); }
.k-cal-tag { font-size: clamp(10px, 1.3cqmin, 14px); }
/* "Drawn for this film" and other small notes: never below 9px */
.k-cm-note, .k-br-note, .k-tiles-note { font-size: clamp(9px, 1.3cqmin, 13px); }
/* type that wraps well: kickers and captions balance, supporting lines avoid a lone last word */
.k-kicker, .k-cap, .k-num-l, .k-hit-l { text-wrap: balance; }
.k-sub { text-wrap: pretty; }
/* phone floors: on a 358px film nothing a viewer must read goes below 11 to 13px */
.k-kicker { font-size: clamp(11px, 2cqmin, 22px); }
.f3[data-look="trailer"] .k-kicker { font-size: clamp(11px, 2.5cqmin, 26px); }
.k-sub { font-size: clamp(13px, 2.7cqmin, 30px); }
.k-cap { font-size: clamp(12px, 2.2cqmin, 24px); }
.k-stat > span, .k-bh-l { font-size: clamp(12px, 2.9cqmin, 30px); }
.k-col span { font-size: clamp(11px, 2.2cqmin, 22px); }
.k-num-l { font-size: max(15px, 4.6cqmin); }
.f3[data-look="trailer"] .k-num-l { font-size: max(16px, 5.4cqmin); }
/* a kicker on the accent ground is full strength (it was white at 72% on blue, about 2.3:1) */
.sc.is-acc .k-kicker { opacity: 1; font-weight: 700; }
/* ghost words stay out of charts and calendars, where the notes sit low */
.t-columns .k-ghost, .t-line .k-ghost, .t-cal .k-ghost, .t-stats .k-ghost, .t-compare .k-ghost { display: none; }
/* a stat given as words ("168 of 462") sits on the same line as the numbers beside it */
.k-stat b.is-text { font-size: min(9.6cqmin, 7.5cqw); line-height: 0.9; white-space: nowrap; }
/* four numbers two by two: the numbers get bigger to fill the frame */
.k-stats:has(> :nth-child(4):last-child) { max-width: 150cqh; column-gap: 7cqw; }
.k-stats:has(> :nth-child(4):last-child) .k-stat b { font-size: min(12.5cqmin, 9.5cqw); }
/* a share that grows (T.share) */
.k-share { position: relative; width: 100%; display: flex; flex-direction: column; margin-top: 3cqmin; }
.k-sh-row { display: flex; flex-direction: column; gap: 1.2cqmin; }
.k-sh-l { margin: 0; font: 700 clamp(11px, 2.1cqmin, 22px)/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.k-sh-bar { position: relative; height: 7.5cqmin; border-radius: 1.2cqmin; overflow: hidden; background: color-mix(in srgb, currentColor 16%, transparent); }
.k-sh-hot { --w: 0.4; --glow: 0; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); background: linear-gradient(90deg, var(--acc), var(--acc-2)); box-shadow: 0 0 calc(var(--glow) * 5cqmin) var(--acc); }
.k-sh-tags { --w: 0.4; position: relative; height: 5cqmin; font-variant-numeric: tabular-nums; }
.k-sh-tags b { position: absolute; left: 0; top: 0.6cqmin; max-width: max(28cqw, calc(var(--w) * 100%)); font: 800 clamp(13px, 4.2cqmin, 46px)/1 var(--f-sans); letter-spacing: -0.03em; color: var(--acc); white-space: nowrap; }
.k-sh-tags span { position: absolute; right: 0; top: 0.9cqmin; font: 600 clamp(12px, 2.8cqmin, 30px)/1 var(--f-sans); opacity: 0.7; white-space: nowrap; }
/* the band joins the two bars directly: the top row reads label, numbers, bar; the bottom row bar, numbers, label */
.k-sh-row.is-top .k-sh-l { order: 0; } .k-sh-row.is-top .k-sh-tags { order: 1; } .k-sh-row.is-top .k-sh-bar { order: 2; }
.k-sh-row.is-bottom .k-sh-bar { order: 0; } .k-sh-row.is-bottom .k-sh-tags { order: 1; } .k-sh-row.is-bottom .k-sh-l { order: 2; }
.k-sh-band { height: 13cqh; margin-block: 0.4cqmin; }
.k-sh-band svg { display: block; width: 100%; height: 100%; }
.k-sh-band polygon { fill: color-mix(in srgb, var(--acc) 26%, transparent); }
.sc.is-paper .k-sh-tags b { color: color-mix(in srgb, var(--acc) 70%, #000); }
@container (aspect-ratio < 1) { .k-sh-band { height: 10cqh; } .k-sh-tags { height: 7cqmin; } }
.k-sh-bar { height: 9cqmin; }
.k-sh-tags { height: 7.4cqmin; }
.k-sh-tags b { font-size: clamp(14px, 6cqmin, 64px); }
.k-sh-tags span { font-size: clamp(12px, 3.2cqmin, 34px); top: 2cqmin; }
.k-sh-band { height: 17cqh; }
.t-share .k-ghost { display: none; }
@container (aspect-ratio < 1) { .k-sh-band { height: 12cqh; } .k-sh-tags { height: 8cqmin; } .k-sh-tags b { font-size: clamp(14px, 6.4cqmin, 40px); } }
.k-tile { --pop: 0; scale: calc(1 + var(--pop) * 0.12); }
/* a chain of four steps on a squarer stage: the steps size to the width too, so the row never runs past the frame */
.k-node { min-width: 0; font-size: clamp(12px, min(3.5cqmin, 2.4cqw), 38px); padding: min(3cqmin, 2.2cqw); }
@container (aspect-ratio < 1) { .k-node { font-size: clamp(12px, 3.5cqmin, 38px); padding: 2.6cqmin; } }
.k-bh-t { --glow: 0; box-shadow: 0 0 calc(var(--glow) * 3cqmin) color-mix(in srgb, var(--acc) 60%, transparent); }
.k-vault { scale: calc(1 + var(--hold, 0) * 0.05); }

/* ---------- fixes from inspection A ---------- */
/* the newspaper's small print never goes below 10px; on a tall stage the ad's subline goes and the note sits under the page */
.k-news-mast span { font-size: max(10px, 1.4cqmin); }
.k-ad span { font-size: max(10px, 1.7cqmin); }
.t-paper.has-hit .k-ad span { font-size: max(10px, calc(min(36cqw, 50cqh) * 0.036)); }
.k-news-note { margin: 0; font: 650 max(10px, 1.6cqmin)/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
@container (aspect-ratio < 1) {
  .t-paper .k-ad span, .t-paper .k-news-mast span { display: none; }
  .t-paper .k-news-note { grid-column: 1 / -1; justify-self: center; }
}
/* small notes on drawn scenes, and the mock phone's own UI on a phone, stay readable */
.k-br-note { font-size: max(11px, 1.3cqmin); }
@container (aspect-ratio < 1) {
  .k-ph-top { font-size: max(10px, 1.7cqmin); }
  .k-ph-pc span, .k-ph-pill { font-size: max(10px, 1.6cqmin); }
}
/* the ad on a small page (tall stage): its title sits at the top and is sized to the page, clear of the QR */
@container (aspect-ratio < 1) {
  .t-paper:not(.has-hit) .k-ad { justify-content: flex-start; }
  .t-paper:not(.has-hit) .k-ad b { font-size: 4.4cqmin; }
}
@container (aspect-ratio < 1) {
  .t-paper .k-ad b { max-width: 60%; overflow-wrap: normal; }
  .t-paper .k-ad { justify-content: flex-start; }
}
@container (aspect-ratio < 1) and (height < 560px) { .t-paper:not(.has-hit) .k-ad b { font-size: 3.4cqmin; } }

/* ---------- the films on white (19 Oct: his call, "the entire website in bright white") ---------- */
/* Every scene sits on white, like the pages around it. Type is ink. Accent words, numbers and thin lines take the case's
   on-white strength (--acc-tx); the accent ground and the accent's filled shapes take --acc-fill (film.js picks it: the
   bright accent where its own ink reads at 4.5:1, otherwise the on-white strength, so Mission 2027 and Partnership ads
   carry their white type on their darker red and blue). The bright accent stays for the aura, glows, wipes, slices and
   fills without type. The real work holds on white by a hairline and a soft, short shadow. Every text and ground pair
   was measured on the settled frame of every scene, at 1440 and 390 (research/2026-10-19-films-white.md). */
.f3-stage { background: #fff; }
/* the grounds: white with the aura showing through faintly; "deep" is the same white, barely tinted with the case's two
   colours (5 to 6% at most, so the on-white accents keep 4.5:1 on it); the accent ground is the fill strength */
.sc.is-ink { background: radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--acc) 5%, transparent), transparent 62%), rgba(255, 255, 255, 0.9); color: #0b0b0d; }
.sc.is-deep { background: radial-gradient(90% 120% at 8% 100%, color-mix(in srgb, var(--acc-2) 6%, transparent), transparent 66%), radial-gradient(80% 80% at 92% 0%, color-mix(in srgb, var(--acc) 6%, transparent), transparent 62%), color-mix(in srgb, color-mix(in srgb, var(--acc) 3%, #fff) 92%, transparent); color: #0b0b0d; }
.sc.is-paper { background: rgba(255, 255, 255, 0.94); color: #0b0b0d; }
.sc.is-acc { background: var(--acc-fill, var(--acc)); color: var(--acc-ink); }
.sc { --work: 0 0 0 1px rgba(11, 11, 13, 0.07), 0 0.25cqmin 0.6cqmin rgba(11, 11, 13, 0.06), 0 2.6cqmin 5.4cqmin -2.6cqmin rgba(11, 11, 13, 0.34); }
.sc:is(.is-ink, .is-deep, .is-paper), .sc.is-paper :is(.k-pt, .k-map-pin text, .k-map-name, .k-map-list) { --halo: #fff; }

/* atmosphere: the aura drifts under the white scenes as a faint tint (a screen blend vanishes on white); a film's first
   scene glows with soft washes of its two colours in the corners; the letterbox opens as a white matte with a hairline
   edge, not black bars; the hollow word behind a scene is a whisper of the accent */
.f3-aura { opacity: 0.5; }
.f3-aura i { mix-blend-mode: normal; }
.sc-glow i:first-child { background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 24%, transparent), color-mix(in srgb, var(--acc) 9%, transparent) 55%, transparent); }
.sc-glow i:last-child { background: radial-gradient(closest-side, color-mix(in srgb, var(--acc-2) 18%, transparent), color-mix(in srgb, var(--acc-2) 6%, transparent) 55%, transparent); }
.f3-lb i { background: #fff; box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.07); }
.sc:is(.is-ink, .is-deep, .is-paper) .k-ghost { --ghost: color-mix(in srgb, var(--acc-tx, var(--acc)) 17%, transparent); }

/* type on the white grounds. Secondary lines are solid greys, not ink at part strength, so an accent word inside one
   keeps its full on-white strength (a kicker at 72% took "AI" and "Done" down to 3.5:1) */
.sc:is(.is-ink, .is-deep, .is-paper) :is(.k-acc, .k-num, .k-stat.is-hot b, .k-sh-tags b, .k-cal-meta b) { color: var(--acc-tx, var(--acc)); }
.sc:is(.is-ink, .is-deep, .is-paper) .k-kicker { opacity: 1; color: #55524d; }
.sc:is(.is-ink, .is-deep, .is-paper) :is(.k-sub:not(.k-cap), .k-stat > span, .k-bh-l, .k-col span, .k-group span, .k-by, .k-cm-s > span, .k-sh-l, .k-sh-tags span, .k-cal-meta span), .sc:is(.is-ink, .is-deep, .is-paper) :is(.k-side:not(.is-hot), .k-branch:not(.is-0)) span { opacity: 1; color: #3a3835; }
.k-bh.is-hot .k-bh-v, .k-col.is-hot b, .k-pt.is-hot b, .k-cm-s.is-hot b, .k-node span, .k-ico, .k-mid { color: var(--acc-tx, var(--acc)); }
.k-pt { color: #0b0b0d; }
.k-pt span { opacity: 0.8; }
/* on the accent ground, supporting lines and step numbers stay at 92% of the ink (78% of white on the red was 3.9:1) */
.sc.is-acc :is(.k-sub, .k-by, .k-stat > span) { opacity: 0.92; }
.k-node:last-child span, .sc.is-acc .k-node span { opacity: 0.92; }

/* lines, bars and marks: thin lines in the on-white strength, bars running from it into the bright accent */
.k-stat.is-hot::before { background: var(--acc-tx, var(--acc)); }
.k-bh.is-hot .k-bh-t i, .k-sh-hot { background: linear-gradient(90deg, var(--acc-tx, var(--acc)), var(--acc)); }
.k-col.is-hot i { background: linear-gradient(to top, var(--acc-tx, var(--acc)), var(--acc)); box-shadow: 0 0 5cqmin -1.6cqmin color-mix(in srgb, var(--acc) 70%, transparent); }
.k-line { color: var(--acc-tx, var(--acc)); }
.k-pt::after { background: var(--acc-tx, var(--acc)); box-shadow: 0 0 0 0.8cqmin color-mix(in srgb, var(--acc) 34%, transparent); }
.k-group.is-hot .k-ppl svg { fill: var(--acc-tx, var(--acc)); }
.k-map-name.is-in, .k-map-pin.is-home .k-map-glyph { fill: var(--acc-tx, var(--acc)); }
.k-map-arc, .k-map-ring { stroke: var(--acc-tx, var(--acc)); }
.sc:is(.is-ink, .is-deep, .is-paper) .k-cal-cur { border-color: var(--acc-tx, var(--acc)); box-shadow: 0 0 2.4cqmin color-mix(in srgb, var(--acc) 45%, transparent); }
.k-cm-s.is-hot { border-top-color: var(--acc-tx, var(--acc)); }

/* filled shapes: the accent ground's strength, with its ink on top */
.k-chip.is-alt, .k-chain-n.is-hot { background: var(--acc-fill, var(--acc)); border-color: var(--acc-fill, var(--acc)); }
.sc.is-acc :is(.k-chip.is-alt, .k-chain-n.is-hot) { color: var(--acc-fill, var(--acc)); }
.k-node:last-child, .k-side.is-hot, .k-branch.is-0, .k-checks i { background: var(--acc-fill, var(--acc)); }
.k-endacts a { color: var(--acc-fill, var(--acc)); }
.sc:is(.is-ink, .is-deep, .is-paper) .k-endacts a { background: var(--acc-fill, var(--acc)); border-color: var(--acc-fill, var(--acc)); color: var(--acc-ink); }
.k-tile { background: color-mix(in srgb, var(--acc-fill, var(--acc)) calc(var(--on) * 100%), color-mix(in srgb, currentColor 6%, transparent)); }
.sc:is(.is-ink, .is-deep, .is-paper) .k-tile::after { border-left-color: color-mix(in srgb, var(--acc-ink) calc(var(--on) * 100%), color-mix(in srgb, currentColor 38%, transparent)); }

/* cards on the white grounds (a step, a side, an answer) are white, held by a hairline and a soft shadow: a grey card
   took the step numbers in the accent below 4.5:1 */
.sc:is(.is-ink, .is-deep, .is-paper) :is(.k-node:not(:last-child), .k-side:not(.is-hot), .k-branch:not(.is-0)) { background: #fff; border-color: rgba(11, 11, 13, 0.1); box-shadow: 0 0.3cqmin 0.8cqmin rgba(11, 11, 13, 0.04), 0 2cqmin 4cqmin -2.4cqmin rgba(11, 11, 13, 0.22); }
/* the real work on white: a hairline and a soft, short shadow */
.k-card, .k-strip i { background: #f4f4f3; box-shadow: var(--work); }
.k-shotf, .k-news { box-shadow: var(--work); }
.k-sheet { box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.08), 0 1.6cqmin 3.6cqmin -1.6cqmin rgba(11, 11, 13, 0.3); }
.k-cm-sheet, .k-ig { box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.08), 0 0.4cqmin 1cqmin rgba(11, 11, 13, 0.05), 0 4cqmin 8cqmin -4cqmin rgba(11, 11, 13, 0.36); }
.k-ph { box-shadow: 0 0 0 0.35cqmin #2c2c33, 0 5cqmin 9cqmin -4cqmin rgba(11, 11, 13, 0.42), inset 0 0 0 0.2cqmin #45454f; }
/* the covers behind the phone step back under a white veil (darkened, they read as grey mud on white) */
.k-ph-back { filter: saturate(0.9); }
.k-ph-back::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); }
/* captions over the work: a white pill with a hairline */
.t-cards .k-cap, .t-shot .k-cap, .t-stamps .k-cap { background: rgba(255, 255, 255, 0.95); color: #0b0b0d; box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.08), 0 1cqmin 2.6cqmin -1cqmin rgba(11, 11, 13, 0.28); }
/* stamps: white-backed (multiplied, the ink vanished into the posters' dark parts), in a green and a red that read on
   white; the sheets' tabs in the same green */
.k-stamp { mix-blend-mode: normal; background: rgba(255, 255, 255, 0.92); border-color: #166534; color: #166534; }
.k-stamp.is-bad { border-color: #b91c1c; color: #b91c1c; }
.k-sheet b { background: #166534; }
/* the About film's year board: white flaps with a hairline */
.k-flap { background: linear-gradient(#ffffff 0 49.5%, #f2f1ee 50.5% 100%); color: #0b0b0d; box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.1), 0 0.8cqmin 2cqmin -0.8cqmin rgba(11, 11, 13, 0.32); }
.k-flap::after { background: rgba(11, 11, 13, 0.16); }

/* small print at a strength that reads: the calendar's days, the comment sheet's own lines (a pale grey before), the
   newspaper's line and the "Drawn for this film" notes, on white and on the accent ground */
.k-cal-wk, .k-cal-n { opacity: 0.8; }
.k-cal-c.is-post .k-cal-n { background: rgba(10, 10, 12, calc(0.8 * var(--on))); }
.k-cm-ft, .k-cm-note { color: #67676f; }
.k-ph-top span { opacity: 0.66; }
.k-news-mast span, .k-br-note, .k-tiles-note, .k-news-note { opacity: 0.72; }
.sc.is-acc :is(.k-br-note, .k-tiles-note) { opacity: 0.88; }
/* on a tall stage the hot number grows a tenth in its late beat: room for that, so "~1,000%" never runs into its label */
@container (aspect-ratio < 1) { .k-stat.is-hot b { margin-right: 0.45em; } }
/* a short tall stage (the read's sticky stage on a phone): the tallest scenes (a chain of four, two sides, three groups
   of people) sit a little tighter, and a scene that still overflows starts under the step's label instead of behind it */
@container (aspect-ratio < 1) and (height < 420px) {
  .sc { justify-content: safe center; }
  .k-flow { gap: 1.2cqh; }
  .k-node { padding: 1.7cqmin 2.4cqmin; gap: 0.8cqmin; }
  .k-arrow { height: 1.8cqh; }
  .k-split { gap: 1.4cqh; }
  .k-side { padding: 2.6cqmin 3.4cqmin; gap: 1cqmin; }
  .k-side b { font-size: 7.4cqmin; }
  .k-ico { width: 6cqmin; height: 6cqmin; }
  .k-groups { gap: 1.8cqh; margin-top: 2cqmin; }
  .k-ppl { height: 8cqh; }
}