/* The carousel display kit (SITE-29). Markup: src/v2/system/carousel/kit.mjs; motion: carousel.js.
   Every class is prefixed ck- so the kit never collides with a section's own styles.
   Measurements follow SITE-26's spec (design/review/v2/critic/reference-spec.md §10): 9:16 slides, cover radius
   10–14, no borders on photos, at most a soft shadow; one moving focus per viewport (carousel.js). */

/* ── Slide faces ─────────────────────────────────────────────────────────
   TikTok Sans (600, static) and Caveat, both OFL as the product's editor uses them (lib/editor/fonts.ts), subset to
   Latin-1 + common punctuation (16 KB + 25 KB). They're NOT declared here: carousel.js adds them with the FontFace
   API only when a component that uses them is wired, after load and on idle, so the first frame (the hero's
   included) paints with these metric-matched local fallbacks and swaps in without moving anything. */
@font-face { font-family: "TikTok Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 104%; ascent-override: 96%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Caveat Fallback"; src: local("Bradley Hand"), local("Comic Sans MS"), local("Chalkboard SE"); size-adjust: 84%; ascent-override: 114%; descent-override: 36%; }

:root {
  --ck-apple: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body);
  --ck-tiktok-red: #FE2C55;
  --ck-imessage: #1F8BFF;
}

/* ── A slide: 9:16, type in container units ───────────────────────────── */
.ck-s { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; background: var(--paper-2); }
/* White formats get a hairline so they hold their edge on a white page (photos never get a border). */
.ck-s--paper, .ck-s--notes, .ck-s--chat { border-radius: var(--ck-r, 0); box-shadow: inset 0 0 0 1px rgb(21 19 15 / .09); }
.ck-ph, .ck-ph img { display: block; width: 100%; height: 100%; }
.ck-ph img { object-fit: cover; background-size: cover; background-position: center; }

/* TikTok's text box: one white box per line, TikTok Sans semibold, centred. */
.ck-tt { position: absolute; left: 9cqw; right: 9cqw; margin: 0; text-align: center; font: 600 5.6cqw/1.42 "TikTok Sans", "TikTok Sans Fallback", var(--font-body); letter-spacing: -.01em; color: #000; text-wrap: balance; }
.ck-tt--mid { top: 34%; }
.ck-tt--low { bottom: 21%; }
.ck-tt span, .ck-tt__v { padding: .13em .4em; border-radius: .32em; background: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ck-tt__v { display: inline-block; margin-top: .5em; font-style: normal; color: #fff; }
.ck-tt__v--no { background: var(--ck-tiktok-red); }
.ck-tt__v--yes { background: #19A35B; }

/* Handwriting on lined paper (the product's Paper notes). */
/* The margin and the ruling are drawn by ::before: cqw on .ck-s itself would resolve against an outer container (or the
   viewport), since an element can't query its own container; inside it, cqw is the card's width (SITE-26 G3: the Agents
   stack's Flo card drew its margin through the middle at 1440). */
.ck-s--paper { --line: 8.4cqw; isolation: isolate; background: #FBF9F3; }
.ck-s--paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 12.5cqw, rgb(226 132 132 / .55) 12.5cqw, rgb(226 132 132 / .55) calc(12.5cqw + 1px), transparent calc(12.5cqw + 1px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--line) - 1px), rgb(140 170 214 / .42) calc(var(--line) - 1px) var(--line)) 0 calc(var(--line) * 2.5) / 100% 100% no-repeat;
}
.ck-paper { position: absolute; left: 16cqw; right: 8cqw; top: calc(var(--line) * 5.5 + .9cqw); margin: 0; font: 500 8.6cqw/var(--line) "Caveat", "Caveat Fallback", cursive; color: #22306A; letter-spacing: -.005em; }

/* An Apple Notes list, without the app around it. */
.ck-s--notes { background: #fff; color: #1C1C1E; font-family: var(--ck-apple); }
.ck-notes__date { margin: 13cqw 0 0; text-align: center; font-size: 3.4cqw; color: #8E8E93; }
.ck-notes__t { margin: 5cqw 7cqw 0; font-size: 7.4cqw; line-height: 1.14; font-weight: 700; letter-spacing: -.02em; }
.ck-notes__b { margin: 3.4cqw 7cqw 0; font-size: 5.2cqw; line-height: 1.32; color: #2C2C2E; }
.ck-notes__l { margin: 4.4cqw 7cqw 0; padding: 0; list-style: none; display: grid; gap: 3.2cqw; font-size: 4.9cqw; line-height: 1.3; color: #1C1C1E; }
.ck-notes__l li { display: grid; grid-template-columns: 5.4cqw 1fr; gap: 2.6cqw; align-items: start; }
.ck-notes__l li::before { content: ""; width: 4.6cqw; aspect-ratio: 1; margin-top: .2cqw; border-radius: 50%; box-shadow: inset 0 0 0 .32cqw #C7C7CC; }

/* A text thread, without the app around it. */
.ck-s--chat { background: #fff; font-family: var(--ck-apple); }
.ck-chat { position: absolute; left: 5cqw; right: 5cqw; top: 26cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.ck-b { max-width: 74%; margin: 0; padding: 2.4cqw 3.8cqw; border-radius: 5.4cqw; font-size: 4.7cqw; line-height: 1.3; }
.ck-b--in { align-self: flex-start; background: #E9E9EB; color: #000; }
.ck-b--out { align-self: flex-end; background: var(--ck-imessage); color: #fff; }
.ck-b--in + .ck-b--out, .ck-b--out + .ck-b--in { margin-top: 2cqw; }

/* ── A carousel's track and TikTok photo-mode progress ─────────────────── */
.ck-track { display: flex; height: 100%; will-change: transform; }
.ck-cell { position: relative; flex: 0 0 100%; height: 100%; }
.ck-prog { position: absolute; z-index: 2; top: 3.4%; left: 5%; right: 5%; display: flex; gap: 3px; filter: drop-shadow(0 0 1px rgb(0 0 0 / .4)) drop-shadow(0 0 .5px rgb(0 0 0 / .25)); pointer-events: none; }
.ck-prog span { flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgb(255 255 255 / .38); }
.ck-prog i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.ck-prog .is-done i { transform: scaleX(1); }

/* ── 1. Remix rail ──────────────────────────────────────────────────────── */
.ck-rail { --ck-w: 308px; --ck-gap: 16px; position: relative; overflow: hidden; padding-block: 8px; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 104px, #000 calc(100% - 104px), transparent); mask-image: linear-gradient(90deg, transparent, #000 104px, #000 calc(100% - 104px), transparent); }
.ck-rail__track { display: flex; gap: var(--ck-gap); width: max-content; will-change: transform; }
.ck-rail__set { display: flex; gap: var(--ck-gap); }
.ck-rail.is-dragging { cursor: grabbing; }
.ck-rc { --ck-r: 14px; position: relative; flex: none; width: var(--ck-w); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--paper-2); outline: none; isolation: isolate; }
.ck-rc:focus-visible { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--orange); }
.ck-rc__media { position: absolute; inset: 0; }
.ck-rc .ck-prog { opacity: 0; transition: opacity 240ms var(--ease-out); }
.ck-rc.is-peeking .ck-prog { opacity: 1; }
.ck-rc__app { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 5px 8px; border-radius: 6px; font: 500 12px/1 var(--font-body); color: #fff; letter-spacing: 0;
  background: rgb(21 19 15 / .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity 240ms var(--ease-out); }
.ck-rc.is-peeking .ck-rc__app { opacity: 0; }
/* The frosted bar: inset 16, 44 tall, radius 8, a white hairline; its scrim (--scrim, per cover) keeps the label
   at ≥ 4.6:1 over the photo behind it. */
.ck-rc__bar { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; height: 44px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px;
  font: 500 14px/1 var(--font-body); letter-spacing: -.005em; color: #fff; text-decoration: none;
  background: rgb(21 19 15 / var(--scrim, .45)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 1px 0 rgb(255 255 255 / .12); transition: background-color 200ms var(--ease-out); }
.ck-rc__bar svg { width: 14px; height: 14px; }
.ck-rc:hover .ck-rc__bar, .ck-rc:focus-visible .ck-rc__bar { background-color: rgb(21 19 15 / calc(var(--scrim, .45) + .1)); }
/* On a white cover the bar is white glass with ink text, as Foreplay's is on its light card. */
.ck-rc--light .ck-rc__bar { color: var(--ink); background: rgb(255 255 255 / .74); box-shadow: inset 0 0 0 1px rgb(21 19 15 / .1), 0 1px 2px rgb(21 19 15 / .06); }
.ck-rc--light:hover .ck-rc__bar, .ck-rc--light:focus-visible .ck-rc__bar { background-color: rgb(255 255 255 / .92); }

/* ── 2. Floating constellation ──────────────────────────────────────────── */
.ck-cn { position: relative; height: 960px; overflow: hidden; }
/* Only the ghosts fade at the edges; the sharp covers always stay whole inside the stage. */
.ck-cn__ghosts { -webkit-mask-image: linear-gradient(transparent, #000 96px, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(transparent, #000 96px, #000 calc(100% - 96px), transparent); }
.ck-cn__ghosts, .ck-cn__cards { position: absolute; inset: 0; pointer-events: none; }
/* Centred on (--x, --y) with negative margins, not translate (GSAP nudges these cards' x/y; see .ck-uf__card). */
.ck-cn__card, .ck-cn__ghost { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 9 / 16; margin: calc(var(--w) * -8 / 9) 0 0 calc(var(--w) / -2); border-radius: 10px; overflow: hidden; }
/* The two side covers keep ≥ 40 px from the 860 px headline at any width: their centres never come nearer than
   half the headline + 40 px + half a card (and stay whole on screen); below 1400 they step out (see below). */
.ck-cn__card:nth-child(1) { --x: min(10%, calc(50% - 562px)) !important; }
.ck-cn__card:nth-child(3) { --x: max(91%, calc(50% + 560px)) !important; }
.ck-cn__card { --ck-r: 10px; rotate: var(--r); pointer-events: auto; background: var(--paper-2); }
.ck-cn__in, .ck-cn__slide { position: absolute; inset: 0; }
.ck-cn__slide { opacity: 0; }
.ck-cn__slide.is-on { opacity: 1; }
.ck-cn__ghost { filter: blur(24px); opacity: .36; }
.ck-cn__ghost .ck-ph img { background: none; }
.ck-cn__body { position: absolute; left: 50%; top: 49%; translate: -50% -50%; width: min(860px, 100% - 2 * var(--s-6)); text-align: center; }

/* ── 3. Stacked deck + tabs + labelled side cards ───────────────────────── */
.ck-deck { display: grid; justify-items: center; gap: 28px; }
.ck-deck__stage { position: relative; width: 100%; max-width: 1040px; height: 720px; }
.ck-deck__pile { position: absolute; left: 50%; top: 64px; width: 324px; translate: -50% 0; display: grid; }
.ck-deck__front { grid-area: 1 / 1; position: relative; z-index: 4; padding: 12px 12px 14px; border-radius: 8px; background: #FCFBF9; box-shadow: 0 0 0 1px rgb(21 19 15 / .08), var(--shadow-md); }
/* Every front card shares one grid cell, so switching tabs never moves anything; only .is-on shows. */
.ck-deck__front:not(.is-on) { visibility: hidden; opacity: 0; }
.ck-deck__screen { position: relative; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.ck-deck__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 12px 2px 0; }
.ck-deck__app { font: 500 20px/1 var(--font-display); letter-spacing: var(--track-h); color: var(--ink); }
.ck-deck__stage-chip { flex: none; }
/* Cards behind, each narrower and a step higher, their photo's top edge peeking out (Melius). */
.ck-deck__back { position: absolute; z-index: calc(4 - var(--k)); left: 50%; top: calc(var(--k) * -12px); translate: -50% 0; width: calc(100% - var(--k) * 28px); height: 140px; padding: 7px 7px 0; border-radius: 8px; overflow: hidden; background: #FCFBF9; box-shadow: 0 0 0 1px rgb(21 19 15 / .08), var(--shadow-xs); }
.ck-deck__back .ck-ph { height: auto; border-radius: 3px; overflow: hidden; }
.ck-deck__back .ck-ph img { height: 120px; object-position: 50% 30%; }
/* Side cards: polaroid-like, a hairline, a lime tag over the top edge; a hairline leader to what they name. */
.ck-side { position: absolute; z-index: 5; width: 188px; padding: 14px 14px 12px; border-radius: 8px; background: #FCFBF9; box-shadow: 0 0 0 1px rgb(21 19 15 / .2), var(--shadow-xs); }
.ck-side--tl { left: 3%; top: 214px; }
.ck-side--tr { right: 5%; top: 40px; }
.ck-side--bl { left: 4%; top: 400px; width: 172px; padding: 8px; }
.ck-side--br { right: 6%; top: 548px; }
.ck-funnel { display: flex; gap: 4px; margin: 10px 0 0; }
.ck-funnel i { flex: 1; height: 4px; border-radius: 2px; background: var(--hairline-strong); transition: background-color 300ms var(--ease-out); }
.ck-funnel i.is-on { background: var(--orange); }
.ck-side__tag { position: absolute; z-index: 3; top: -11px; right: 12px; padding: 5px 9px; border-radius: 4px; background: var(--lime); color: var(--lime-ink); font: 500 12px/1 var(--font-mono); letter-spacing: 0; }
.ck-side__t { margin: 0; font: 500 18px/1.15 var(--font-display); letter-spacing: var(--track-h); color: var(--ink); }
.ck-side__m { margin: 8px 0 0; color: var(--ink-58); }
.ck-side__ph { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.ck-side__ph .ck-ph { position: absolute; inset: 0; }
.ck-side__ph .ck-ph img { object-position: 50% 40%; }
.ck-side [data-ck-fill] { transition: opacity 220ms var(--ease-out); }
.ck-deck__leaders { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ck-deck__leaders path { fill: none; stroke: rgb(21 19 15 / .3); stroke-width: 1; }
.ck-deck__leaders circle { fill: var(--orange); }
.ck-deck__leaders .ck-ring { fill: none; stroke: var(--orange); stroke-opacity: .35; }
.ck-deck__tabs { display: flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--canvas); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-xs); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ck-deck__tab { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font: 400 14px/1 var(--font-body); color: var(--ink-64); cursor: pointer; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
/* Every tappable kit target is ≥ 44 px (SITE-26 M4): the 36 px desktop tab gets a hit area to the tab row's edge (36 + 2 × 4 px padding = 44). */
.ck-deck__tab { position: relative; }
.ck-deck__tab::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.ck-deck__tab:hover { color: var(--ink); }
.ck-deck__tab[aria-selected="true"] { background: var(--orange); color: #fff; }
.ck-deck__tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* The stages row (deck({ stages: true })): the current tab's carousels, each a mini cover, its stage and template, with
   a 2 px line filling as it plays. One row per tab; only the current tab's shows. */
.ck-deck__rows { display: grid; width: min(100% - 2 * max(24px, var(--inset)), 760px); }   /* its text ≥ 24 px from the rails (R1) */
.ck-deck__stages { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.ck-deck__stages[hidden] { display: none; }
.ck-deck__st { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 14px 10px 8px; border: 0; border-radius: 8px; background: #FCFBF9; box-shadow: 0 0 0 1px var(--hairline); color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; transition: box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.ck-deck__st:hover { box-shadow: 0 0 0 1px var(--hairline-strong); }
.ck-deck__st.is-on { background: var(--canvas); box-shadow: 0 0 0 1px rgb(21 19 15 / .2), var(--shadow-xs); }
.ck-deck__st:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ck-deck__st-cover { position: relative; flex: none; width: 40px; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; container-type: inline-size; background: var(--paper-2); }
.ck-deck__st-text { display: grid; gap: 4px; min-width: 0; }
.ck-deck__st-n { color: var(--orange); }
.ck-deck__st-t { font: 500 16px/1.1 var(--font-display); letter-spacing: var(--track-h); }
.ck-deck__st-m { font: 400 13px/1.25 var(--font-body); color: var(--ink-58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-deck__st-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hairline); }
.ck-deck__st-bar i { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }
.ck-deck__st:not(.is-on) .ck-deck__st-bar { opacity: 0; }

/* ── 4. Unrolled strip ──────────────────────────────────────────────────── */
/* Wider than the column (media may bleed past the rails), so a 7-slide story stays readable. */
.ck-strip { position: relative; width: min(100vw - 48px, 1360px); left: 50%; translate: -50% 0; margin: 0; }
.ck-strip__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ck-strip__cell { display: grid; grid-template-rows: auto 14px; justify-items: center; }
.ck-strip__slide { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgb(21 19 15 / .06), var(--shadow-sm); }
.ck-strip__cell.is-called .ck-strip__slide { box-shadow: 0 0 0 1px rgb(21 19 15 / .06), 0 0 0 4px var(--canvas), 0 0 0 5px var(--hairline-strong), var(--shadow-sm); }
/* Labels live inside the frame: the beat top-left, Instagram's "1/7" counter top-right (a dark glass pill). */
.ck-strip__call { position: absolute; z-index: 3; top: 8px; left: 8px; }
.ck-strip__call--soft { padding: 4px 7px; border-radius: 6px; font: 500 11px/1 var(--font-body); color: #fff; background: rgb(21 19 15 / .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ck-strip__n { position: absolute; z-index: 3; top: 8px; right: 8px; padding: 4px 7px; border-radius: 99px; font: 500 11px/1 var(--font-body); font-variant-numeric: tabular-nums; color: #fff; background: rgb(21 19 15 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ck-strip__call.chip { height: 22px; padding: 0 8px; font-size: 11px; }
/* The hairline the slides hang from, with a tick under each. */
.ck-strip__tick { width: 1px; height: 10px; margin-top: 4px; background: var(--hairline-strong); }
.ck-strip__rail { position: relative; }
.ck-strip__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline-strong); transform-origin: left; }
.ck-strip__cap { margin-top: 20px; text-align: center; font: 400 var(--t-small)/1.4 var(--font-body); color: var(--ink-58); }
.ck-strip__cap span { color: var(--ink); font-weight: 500; }

/* ── 5. Phone swipe: a real-looking iPhone ──────────────────────────────── */
.ck-phone { --ck-phone-w: 290px; position: relative; width: var(--ck-phone-w); margin: 0; isolation: isolate; }
.ck-phone__device { position: relative; aspect-ratio: 428 / 879;
  /* A product-shot shadow: tight contact under the frame, a soft fall-off beneath, no big grey blur. */
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .22)) drop-shadow(0 10px 18px rgb(40 30 20 / .14)) drop-shadow(0 30px 44px rgb(40 30 20 / .1)); }
/* A contact shadow where the phone would meet a surface, and a long soft one falling away from it. */
.ck-phone__device::after { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -2.2%; height: 3.4%; border-radius: 50%; background: radial-gradient(closest-side, rgb(30 22 14 / .34), transparent); filter: blur(4px); }
.ck-phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ck-phone__screen { position: absolute; overflow: hidden; background: #000; container-type: inline-size; }
.ck-phone__status { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 3; }
.ck-phone__status text { font: 600 17px/1 "SF Pro Text", -apple-system, BlinkMacSystemFont, var(--font-body); letter-spacing: -.02em; fill: #fff; }
/* The slide fills the screen's width at 9:16 under the status bar, as TikTok lays out photo mode. */
.ck-phone__view { position: absolute; left: 0; right: 0; top: 6.925%; aspect-ratio: 9 / 16; overflow: hidden; }
.ck-phone__view .ck-prog { top: 2.2%; }
.ck-phone__view.is-off { visibility: hidden; opacity: 0; }
.ck-phone__home { position: absolute; z-index: 3; left: 50%; bottom: 0.94%; width: 35.4%; height: 1.3cqw; translate: -50% 0; border-radius: 99px; background: rgb(255 255 255 / .86); }
.ck-phone__glass { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(122deg, rgb(255 255 255 / .075) 0%, rgb(255 255 255 / .02) 26%, transparent 27%); }
/* A live dither halo behind the phone (the same field as the fan's dome). */
.ck-phone__halo { position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(var(--ck-phone-w) * 1.65); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }

/* ── Live dither fields (SITE-20's pixel field, clipped to a feathered disc) ── */
.ck-field.sky, .ck-still { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 80%, rgb(0 0 0 / .5) 91%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, rgb(0 0 0 / .5) 91%, transparent 100%); }
.ck-still { image-rendering: pixelated; }
/* Once the live field is running, the still steps aside. */
.ck-field.sky--live ~ .ck-still, .ck-still:has(~ .ck-field.sky--live) { opacity: 0; transition: opacity 900ms var(--ease-out); }
.ck-gl > .ck-still { display: none; }
/* The live dome appears without the sky's 900 ms fade, so there's no visible swap either way. */
.ck-field.sky canvas { transition: none; }

/* ── 6. Fan / arc ───────────────────────────────────────────────────────── */
/* Jurni's proportions: the pivot sits below the card's bottom edge by the inner radius (so the hand's centre is
   hidden), tips ≈ 200 px above the edge, the dome just past them, the arc as wide as the card. */
.ck-fan { --ck-fan-w: 104px; --ck-r0: 104px; --ck-drop: 96px; position: relative; height: 320px; overflow: hidden; }
.ck-fan__halo { position: absolute; left: 50%; bottom: calc(var(--ck-drop) * -1); width: var(--ck-dome, 600px); aspect-ratio: 1; translate: -50% 50%; pointer-events: none; }
.ck-fan__arc { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ck-fan__card { --ck-r: 10px; position: absolute; left: 50%; bottom: calc(var(--ck-r0) - var(--ck-drop)); width: var(--ck-fan-w); aspect-ratio: 9 / 16; margin-left: calc(var(--ck-fan-w) / -2); border-radius: 10px; overflow: hidden; outline: none;
  transform-origin: 50% calc(100% + var(--ck-r0)); transform: rotate(var(--a)) translateY(var(--lift, 0px)) scale(var(--grow, 1));
  box-shadow: 0 0 0 1px rgb(21 19 15 / .06), 0 6px 18px -6px rgb(60 40 20 / .28); }
.ck-fan__card:focus-visible { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--orange); }

/* ── 7. Wall ────────────────────────────────────────────────────────────── */
.ck-wall { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 14px; height: 760px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 104px, #000 calc(100% - 104px), transparent); mask-image: linear-gradient(transparent, #000 104px, #000 calc(100% - 104px), transparent); }
.ck-wall__col, .ck-wall__run { display: flex; flex-direction: column; gap: 14px; }
.ck-wall__col { will-change: transform; }
.ck-wall__tile { --ck-r: 14px; position: relative; flex: none; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 1px rgb(37 37 39 / .1), 0 2px 4px rgb(37 37 39 / .04); }
.ck-wall__day { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 5px 7px 4px; border-radius: 5px; background: rgb(21 19 15 / .82); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .18); }
.ck-wall__app { display: none; }

/* ── 721–1399: the headline is nearly as wide as the stage, so the two upper side covers step out and the rest
   scale to 85% (SITE-26 verdict 2: ≥ 40 px clear from 768 to 1439). ── */
@media (min-width: 721px) and (max-width: 1399px) {
  .ck-cn__card:nth-child(1), .ck-cn__card:nth-child(3) { display: none; }
  .ck-cn__card { scale: .85; }
  .ck-cn__card:nth-child(2) { --y: 13% !important; }
  .ck-cn__card:nth-child(4) { --x: 16% !important; --y: 84% !important; }
  .ck-cn__card:nth-child(6) { --x: 84% !important; --y: 84% !important; }
}

/* ── 390 ────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ck-rail { --ck-w: 220px; --ck-gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .ck-rc { border-radius: 12px; }
  .ck-rc__bar { left: 12px; right: 12px; bottom: 12px; height: 44px; font-size: 14px; }

  .ck-cn { height: 780px; }
  .ck-cn__body { top: 50%; }
  .ck-cn__card { --w: 112px !important; }
  .ck-cn__card:nth-child(2), .ck-cn__card:nth-child(5) { display: none; }
  .ck-cn__card:nth-child(1) { --x: 17% !important; --y: 12% !important; }
  .ck-cn__card:nth-child(3) { --x: 82% !important; --y: 13% !important; }
  .ck-cn__card:nth-child(4) { --x: 18% !important; --y: 88% !important; }
  .ck-cn__card:nth-child(6) { --x: 83% !important; --y: 87% !important; }
  .ck-cn__ghost { --w: 90px !important; }

  .ck-deck__stage { height: auto; display: grid; justify-items: center; gap: 22px; padding-top: 48px; }
  .ck-deck__pile { position: relative; left: auto; top: auto; translate: none; width: 260px; }
  .ck-side { position: relative; inset: auto; width: min(100%, 300px); padding: 14px 16px 12px; }
  .ck-side--tl { order: 2; } .ck-side--br { order: 3; } .ck-side--tr { order: 4; }
  .ck-deck__leaders, .ck-side--bl { display: none; }
  .ck-deck__tabs { justify-content: flex-start; width: calc(100% - 32px); scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .ck-deck__tabs.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
  .ck-deck__tab { scroll-snap-align: start; height: 44px; }
  .ck-deck__rows { width: calc(100% - 32px); }
  .ck-deck__stages { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .ck-deck__st { flex: 1 0 100px; scroll-snap-align: start; flex-direction: column; align-items: flex-start; gap: 0; min-height: 56px; padding: 10px 10px 12px; }
  .ck-deck__st-cover, .ck-deck__st-m { display: none; }
  .ck-deck__st-t { font-size: 15px; }

  .ck-strip { width: auto; left: auto; translate: none; }
  .ck-strip__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 0; scroll-padding-inline: 16px; scrollbar-width: none; }
  .ck-strip__cell { scroll-snap-align: start; }

  /* At 390 the phone stays a phone: the camera control bump would turn to mush, so it goes. */
  .ck-phone { --ck-phone-w: 232px; }
  .ck-phone__cc { display: none; }
  .ck-fan { --ck-fan-w: 100px; --ck-r0: 96px; --ck-drop: 88px; height: 270px; }

  .ck-wall { --cols: 2 !important; height: 620px; gap: 12px; }
  .ck-wall__col:nth-child(n + 3) { display: none; }
}

/* Reduced motion: designed stills (carousel.js doesn't start any loop). */
@media (prefers-reduced-motion: reduce) { .ck-rc .ck-prog, .ck-rc__app { transition: none; } }

/* Components that bleed past the column sit above the page's hairline rails (z 2), as Corgi's media does. */
.ck-rail, .ck-cn, .ck-strip { z-index: 3; }
.ck-rail, .ck-cn { position: relative; }

/* Mobile gate (founder: "everything mobile optimised"; SITE-26 M5): at ≤ 768 px no slide text renders under 11 px.
   The formats keep their proportions until a card is small enough that they'd fall below it. */
@media (max-width: 768px) {
  .ck-deck__tab { height: 44px; }
  .ck-tt { font-size: max(5.6cqw, 11px); line-height: 1.36; }
  .ck-tt span, .ck-tt__v { padding: .1em .32em; }
  .ck-paper { font-size: max(8.6cqw, 13px); line-height: max(var(--line), 12px); }
  .ck-notes__t { font-size: max(7.4cqw, 12px); }
  .ck-notes__b, .ck-notes__l { font-size: max(5.2cqw, 11px); }
  .ck-notes__date { font-size: max(3.4cqw, 11px); }
  .ck-b { font-size: max(4.7cqw, 11px); }
  .ck-strip__call--soft, .ck-strip__n, .ck-strip__call.chip { font-size: 11px; }
}

/* ── 8. Unfold (the hero) ─────────────────────────────────────────────────
   Full width, --uf-h tall; every slide 9:16, sized from the height (a 52 px band under the cards holds the caption).
   Hooks never under 12 px. At ≤ 760 three slides (hook, middle, payoff) at 110 px. */
.ck-uf { --uf-h: clamp(300px, 200px + 10vw, 344px); --ch: calc(var(--uf-h) - 52px); position: relative; height: var(--uf-h); }
/* Sets that aren't playing skip layout and paint entirely (and so never ask for a font or decode a photo). */
.ck-uf__set { position: absolute; inset: 0; margin: 0; visibility: hidden; content-visibility: hidden; }
.ck-uf__set.is-on { visibility: visible; content-visibility: visible; }
/* Centred with left/calc, never the CSS translate property: GSAP drives these cards' x and folds an individual
   translate into its own transform inconsistently (it dropped the −50% at 1024: the strip sat 70 px off-centre). */
.ck-uf__card { --ck-r: 10px; position: absolute; left: calc(50% - var(--ch) * 9 / 32); top: 0; height: var(--ch); aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 0 0 1px rgb(21 19 15 / .06), 0 10px 24px -10px rgb(60 40 20 / .3); will-change: transform; }
.ck-uf__card.is-skip { display: none; }
/* Before script (and with it, until the first idle) the story sits as a stack with its hook on top. */
.ck-uf__card { z-index: calc(20 - var(--i)); }
.ck-uf .ck-tt { font-size: max(5.6cqw, 12px); line-height: 1.36; }
.ck-uf .ck-tt span, .ck-uf .ck-tt__v { padding: .1em .32em; }
.ck-uf .ck-notes__t { font-size: max(7.4cqw, 12px); }
.ck-uf .ck-notes__b, .ck-uf .ck-notes__l, .ck-uf .ck-notes__date, .ck-uf .ck-b { font-size: max(5.2cqw, 11px); }
.ck-uf .ck-paper { font-size: max(8.6cqw, 14px); line-height: max(var(--line), 13px); }
.ck-uf__call { position: absolute; z-index: 3; top: 8px; left: 8px; height: 22px; padding: 0 8px; font-size: 11px; }
.ck-uf__n { position: absolute; z-index: 3; top: 8px; right: 8px; padding: 4px 7px; border-radius: 99px; font: 500 11px/1 var(--font-body); font-variant-numeric: tabular-nums; color: #fff; background: rgb(21 19 15 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ck-uf__cap { position: absolute; left: 50%; bottom: 6px; translate: -50% 0; width: max-content; max-width: calc(100% - 2 * (var(--rail-inset) + 16px));   /* R1 */ margin: 0; text-align: center; font: 400 14px/1.3 var(--font-body); color: var(--ink-58); }
.ck-uf__cap b { color: var(--ink); font-weight: 500; }
.ck-uf__cap .pixel-ui { margin-right: 4px; color: var(--ink-58); }
.ck-uf__posted { position: absolute; z-index: 4; top: calc(var(--ch) - 16px); left: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; opacity: 0;
  font: 500 12px/1 var(--font-body); color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgb(21 19 15 / .08), 0 6px 16px -6px rgb(60 40 20 / .3); white-space: nowrap; }
.ck-uf__posted i { width: 7px; height: 7px; border-radius: 50%; background: #19A35B; box-shadow: 0 0 0 3px rgb(25 163 91 / .18); }
@media (max-width: 760px) {
  .ck-uf { --uf-h: 300px; --ch: 196px; }
  .ck-uf__card--extra { display: none; }
  .ck-uf__cap { bottom: auto; top: calc(var(--ch) + 30px); font-size: 14px; white-space: normal; }
}