/* The landing page, v2 (direction A, Cinematic, picked November 12, 2026; v1 is in
   archive/landing-v1_11Nov26/). Big type over moving light, the pieces pan past as you scroll, a
   slow wall of finished pieces, then the invite.
   Motion: the glow drifts (transform only), sections rise and sharpen in once, the strip pans with
   the page's own scroll where the browser can and swipes where it can't. Since round 2 (November
   12, 2026; round 1 is in archive/landing-v2.0_12Nov26/) the pieces also play while they're on
   screen, driven by one clock in home.js: the hero's playhead, voices and captions, camera cuts,
   the dot waveform, the carousel, the phone's review. Nothing pulses or bounces, and under
   prefers-reduced-motion everything holds still on one frame.
   The pieces are drawn the way KeepCut exports them. Neutral mode draws them with sample words in
   two sample looks (black, and paper); local mode (this Mac only) fills them with the client's real footage from the manifest. */

@property --page-bg { syntax: '<color>'; inherits: true; initial-value: #000; }
:root {
  /* The page color, worked out once at the top so a dark section can still fade into a light page */
  --page-bg: var(--night-6);
  --wide: clamp(1240px, 78vw, 1680px);
  --sec: clamp(120px, 16vw, 240px);
  --dim-head: light-dark(rgb(22 26 80 / .46), rgb(226 230 255 / .62));
  /* The sample brand inside neutral pieces; local mode swaps in the client's fonts */
  --serif: 'Iowan Old Style', Charter, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --brand-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --paper: #f2eee6;
  --paper-ink: #16140f;
}

/* ---------- The light that drifts ----------
   Three very soft, very wide glows on their own fixed layer, moved and turned by transform only,
   over 30 to 40 seconds (round 2 made them quicker and wider). They never change size or
   brightness, so nothing reads as a pulse. */
.drift { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.drift i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.drift i:nth-child(1) { left: -30vw; bottom: -55vh; width: 110vw; height: 90vh; background: radial-gradient(closest-side, rgb(74 64 240 / .34), rgb(42 49 216 / .12) 55%, transparent); animation: drift-1 34s var(--io) infinite alternate; }
.drift i:nth-child(2) { right: -35vw; bottom: -40vh; width: 100vw; height: 80vh; background: radial-gradient(closest-side, rgb(124 108 255 / .22), rgb(60 80 255 / .08) 60%, transparent); animation: drift-2 41s var(--io) infinite alternate; }
.drift i:nth-child(3) { right: -20vw; top: -40vh; width: 80vw; height: 70vh; background: radial-gradient(closest-side, rgb(160 60 255 / .14), transparent); animation: drift-3 38s var(--io) infinite alternate; }
.drift--in { position: absolute; z-index: -1; }
.drift--in i:nth-child(1) { background: radial-gradient(closest-side, rgb(74 64 240 / .4), rgb(42 49 216 / .13) 55%, transparent); }
@keyframes drift-1 { to { transform: translate3d(46vw, -10vh, 0) rotate(14deg); } }
@keyframes drift-2 { to { transform: translate3d(-42vw, -14vh, 0) rotate(-12deg); } }
@keyframes drift-3 { to { transform: translate3d(-38vw, 14vh, 0) rotate(10deg); } }

/* ---------- Sections rise and sharpen in, once ---------- */
.enter [data-enter] { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(10px); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s var(--ease); transition-delay: var(--d, 0s); }
.enter [data-enter].is-in { opacity: 1; transform: none; filter: none; }
/* Headings: the block stays put and its words rise in one after another */
.enter [data-enter][data-words] { opacity: 1; transform: none; filter: none; transition: none; }
.enter [data-words] .w { display: inline-block; opacity: 0; transform: translate3d(0, .34em, 0); filter: blur(10px); transition: opacity .9s var(--ease), transform 1.15s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--d, 0s) + var(--w) * 55ms); }
.enter [data-words].is-in .w, .enter .is-in [data-words] .w { opacity: 1; transform: none; filter: none; }

/* ---------- Built or not yet: a quiet mark, never a pill ---------- */
.wip { display: inline-flex; flex: none; align-items: center; gap: 7px; color: var(--dim); font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.wip::before { content: ''; width: 9px; height: 9px; border: 1.5px dashed currentColor; border-radius: 50%; }

/* ---------- Type ---------- */
.h2 { font: 800 clamp(40px, 6vw, 104px)/.94 var(--font); letter-spacing: -.05em; text-wrap: balance; }
.h2 > span:not(.w) { color: var(--dim-head); }

/* ---------- Hero ---------- */
.hero { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 100svh; overflow: hidden; isolation: isolate; }
.top { position: relative; z-index: 5; display: flex; align-items: center; gap: 18px; min-height: 76px; }
.top__mark { display: block; line-height: 0; text-decoration: none; }
.mark { display: block; height: 21px; line-height: 0; }
.mark img { height: 100%; width: auto; }
.js .mark:not(.is-solid) img { visibility: hidden; }
.top__r { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.top__link { color: var(--muted); font-size: 14px; text-decoration: none; }
@media (hover: hover) { .top__link:hover { color: var(--text); } }
@media (max-width: 560px) { .top__go { display: none; } .top__r { gap: 16px; } }

.hero__in { display: grid; align-content: end; gap: clamp(28px, 3.6vw, 52px); padding-top: 24px; padding-bottom: clamp(36px, 6vh, 80px); }
.hero__h { max-width: 12em; font: 800 clamp(54px, 9.2vw, 200px)/.9 var(--font); letter-spacing: -.055em; text-wrap: balance; }
.hero__h > span:not(.w) { display: block; color: var(--dim-head); }
.hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.hero__lede { max-width: 30rem; color: var(--muted); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; text-wrap: pretty; }
.hero__credit { color: var(--dim); font-size: 12.5px; }
.hero__meta { position: absolute; top: 92px; right: var(--gutter); display: flex; align-items: center; gap: 10px; color: rgb(255 255 255 / .7); font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.hero__meta::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--video); box-shadow: 0 0 10px var(--video); }

/* Neutral hero: no footage, so the light does the work. Two slow beams, like a projector's, a grain
   and a darker frame. Transform only. */
.hero__light { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero__light::after { content: ''; position: absolute; inset: 0; background: radial-gradient(130% 95% at 35% 62%, transparent 45%, light-dark(transparent, rgb(0 0 0 / .55))); }
.hero__beam { position: absolute; top: -45%; left: 6%; width: 38%; height: 190%; background: linear-gradient(90deg, transparent, light-dark(rgb(90 80 210 / .05), rgb(150 140 255 / .11)) 30%, light-dark(rgb(90 80 210 / .09), rgb(214 210 255 / .22)) 50%, light-dark(rgb(90 80 210 / .05), rgb(150 140 255 / .11)) 70%, transparent); filter: blur(28px); transform: rotate(22deg); will-change: transform; animation: beam-1 30s var(--io) infinite alternate; }
.hero__beam--2 { left: 52%; width: 24%; opacity: .7; transform: rotate(-16deg); animation: beam-2 38s var(--io) infinite alternate; }
.hero__grain { position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes beam-1 { from { transform: translate3d(-10vw, 0, 0) rotate(22deg); } to { transform: translate3d(24vw, 0, 0) rotate(17deg); } }
@keyframes beam-2 { from { transform: translate3d(8vw, 0, 0) rotate(-16deg); } to { transform: translate3d(-20vw, 0, 0) rotate(-11deg); } }

/* The tape: a long recording drawn as levels. A playhead reads it (home.js moves it): what it has
   read turns brighter, each clip turns white with a red line under it as the head passes, and the
   clip is named. Without the player (reduced motion) it shows the whole recording already read. */
.tape { position: relative; container-type: inline-size; height: clamp(40px, 6vh, 76px); margin: 0 var(--gutter) clamp(44px, 6vh, 64px); color: var(--text); }
.tape .wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave { display: block; overflow: visible; }
.wave rect { fill: currentColor; }
.tape__base rect { opacity: .14; }
.tape__read rect { opacity: .34; }
.tape__read rect.on { opacity: .95; }
.tape__cut { position: absolute; bottom: -12px; height: 2px; border-radius: 2px; background: var(--video); box-shadow: 0 0 12px var(--video); transform-origin: 0 50%; }
.tape__tag { position: absolute; top: calc(100% + 22px); color: var(--video-ink); font: 800 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.tape__head { position: absolute; top: -10px; bottom: -16px; left: 0; width: 1.5px; margin-left: -.75px; background: currentColor; box-shadow: 0 0 14px light-dark(rgb(40 40 160 / .5), rgb(255 255 255 / .75)); opacity: 0; will-change: transform; }
.tape__tc { position: absolute; bottom: calc(100% + 8px); left: 0; transform: translateX(-50%); color: var(--muted); font: 700 11px/1 var(--font); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tape.is-live .tape__head { opacity: 1; }
.tape.is-live .tape__tag:not(.is-on) { opacity: 0; transform: translate3d(0, -4px, 0); }
.tape__read, .tape__cut, .tape__head { transition: opacity .6s var(--ease); }
.tape.is-reset .tape__read, .tape.is-reset .tape__cut, .tape.is-reset .tape__tag, .tape.is-reset .tape__head { opacity: 0; }
@media (max-width: 640px) { .tape__tag { display: none; } }
:root:not(.footage-neutral) .tape { visibility: hidden; }

/* Scrolling away, the hero's words ease up and dim */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__in { animation: hero-away linear both; animation-timeline: scroll(root); animation-range: 0px 90vh; }
    @keyframes hero-away { to { transform: translate3d(0, -9vh, 0); opacity: .35; } }
  }
}

/* Local mode hero: the raw wide shot itself, always dark under the type */
.hero__film { position: absolute; inset: 0; z-index: -3; }
.hero__film:empty { display: none; }
.hero__film video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) brightness(.62) contrast(1.06); transform: scale(1.04); }
.hero__film::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, transparent 22%, transparent 45%, rgb(4 6 42 / .72) 78%, var(--page-bg) 100%), linear-gradient(90deg, rgb(0 0 0 / .55), transparent 65%); }
.hero.is-film { color-scheme: dark; }
.hero.is-film .hero__light { display: none; }
.hero.is-film .hero__credit { color: rgb(255 255 255 / .5); }
@media (max-width: 700px) { .hero__film video { object-position: 80% 40%; } }

/* ---------- What comes out: real-size pieces, panned by the page's own scroll where supported ---------- */
.out { position: relative; margin-top: clamp(64px, 8vw, 120px); }
.out__stick { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(36px, 5vh, 64px); }
.out__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 48px; }
.out__lede { max-width: 25rem; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; text-wrap: pretty; }
.strip { --h: clamp(420px, 58vh, 580px); position: relative; min-width: 0; display: flex; align-items: flex-start; gap: clamp(24px, 3vw, 44px); padding: 0 max(var(--gutter), calc((100vw - var(--wide)) / 2)) 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline-offset: -2px; }
.it { flex: none; display: grid; gap: 16px; margin: 0; scroll-snap-align: start; }
.it figcaption { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 12px; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; }
.it figcaption .label--kind { flex: none; }
.it__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.it figcaption .wip { margin-left: auto; }
.it--reel { width: calc(var(--h) * 9 / 16); }
.it--card { width: calc(var(--h) * .8); }
.it--wide { width: calc(var(--h) * 16 / 9); }
.it--deck { width: calc(var(--h) * .8 + 96px); }
.it--phone { width: max(calc(var(--h) * 9 / 19.2), 300px); }
.it .pc--reel, .it .pc--card, .it .pc--wide, .it .post, .it .phone, .it .deck { height: var(--h); }
.it .pc--reel { width: calc(var(--h) * 9 / 16); }
.it .pc--card, .it .post { width: calc(var(--h) * .8); }
.it .pc--wide { width: calc(var(--h) * 16 / 9); }
.it .phone { width: calc(var(--h) * 9 / 19.2); }
.it .post { overflow: hidden; }
.deck { position: relative; }
/* The carousel turns (home.js): the front slide slides off left, the others step forward, and it
   comes back in behind them */
.deck .pc { position: absolute; top: 0; left: 0; height: 100%; width: calc(var(--h) * .8); transform-origin: 100% 50%; transition: transform .9s var(--ease), opacity .7s var(--ease); }
.deck .pc[data-pos="0"] { z-index: 3; }
.deck .pc[data-pos="1"] { z-index: 2; transform: translateX(48px) scale(.94); opacity: .75; }
.deck .pc[data-pos="2"] { z-index: 1; transform: translateX(96px) scale(.88); opacity: .5; }
.deck .pc[data-pos="in"] { z-index: 0; transform: translateX(132px) scale(.83); opacity: 0; }
.deck .pc[data-pos="out"] { z-index: 4; transform: translateX(-64px) rotate(-3deg); opacity: 0; }
.deck .pc.no-t { transition: none; }
@media (max-width: 759px) {
  .strip { --h: 440px; }
  .it--wide, .it .pc--wide { width: min(86vw, 560px); }
  .it .pc--wide { height: auto; }
  /* One line at most: on a phone an unbuilt piece's caption is its kind and the mark */
  .it--wip .it__t { display: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
    .out { height: calc(100vh + var(--dist, 2400px)); view-timeline: --pan block; }
    .out__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
    .strip { overflow: visible; animation: pan linear both; animation-timeline: --pan; animation-range: contain 0% contain 100%; }
    @keyframes pan { to { transform: translate3d(calc(-1 * var(--dist, 0px)), 0, 0); } }
  }
}

/* ---------- What it handles: one picture, a few plain lines ---------- */
.calm { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 7vw, 140px); margin-top: var(--sec); }
.calm__photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; }
.calm__photo img { width: 100%; height: 100%; object-fit: cover; }
.calm__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .35), transparent 40%); }
.calm__t { display: grid; gap: 34px; }
.list { display: grid; border-top: 1px solid var(--line); }
.list li { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.45vw, 22px); letter-spacing: -.01em; }
.list li i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform: translateY(-2px); }
.list li .wip { margin-left: auto; }
@media (max-width: 860px) { .calm { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .list li { flex-wrap: wrap; } .list li .wip { margin-left: 24px; } }

/* The transcript, drawn: it reads every word, and one passage becomes the clip */
.tx { display: grid; gap: 22px; padding: clamp(22px, 2.6vw, 38px); border-radius: var(--r-panel); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--edge), 0 30px 80px var(--shadow); }
.tx__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tx__clip { display: inline-flex; align-items: center; gap: 9px; color: var(--accent-ink); font: 800 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.tx__clip i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tx__body { display: grid; gap: 14px; }
.tx__body p { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; color: var(--dim); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; letter-spacing: -.004em; text-wrap: pretty; }
.tx__body b { padding-top: .2em; font-size: 12px; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tx__body .is-cut { color: var(--text); }
.tx__body .is-cut::before { content: ''; position: absolute; top: -4px; bottom: -4px; left: 38px; width: 2px; background: var(--video); box-shadow: 0 0 10px var(--video); }
.tx__body .is-cut + .is-cut::before { top: -18px; }
.tx__body mark { padding: 0 .1em; margin: 0 -.1em; border-radius: 3px; background: linear-gradient(color-mix(in srgb, var(--words) 22%, transparent), color-mix(in srgb, var(--words) 22%, transparent)) 0 0 / 100% 100% no-repeat; color: inherit; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--words-ink) 70%, transparent); }
/* Seen for the first time, it reads down line by line; the cut draws itself beside the two lines it
   keeps, the best line is marked, and the clip gets its name */
.tx__body p, .tx__body .is-cut::before, .tx__body mark, .tx__clip { transition: opacity .6s var(--ease), transform .7s var(--ease), background-size 1s var(--io), box-shadow .6s ease; }
.tx__body p { transition-delay: calc(.35s + var(--l, 0) * .34s); }
.tx__body .is-cut::before { transform-origin: 50% 0; transition-delay: calc(.55s + var(--l, 0) * .34s); }
.tx__body mark { transition-delay: 1.6s; }
.tx__clip { transition-delay: 2.5s; }
.life .tx:not(.is-read) .tx__body p { opacity: .22; }
.life .tx:not(.is-read) .tx__body .is-cut::before { transform: scaleY(0); }
.life .tx:not(.is-read) .tx__body mark { background-size: 0% 100%; box-shadow: inset 0 0 0 transparent; }
.life .tx:not(.is-read) .tx__clip { opacity: 0; transform: translate3d(-8px, 0, 0); }

/* ---------- The wall: finished pieces drifting up ----------
   Its edges are the page's own black. Past the bottom edge a long black ramp hands over to the
   moving light, so there's no hard line where the wall ends (the user, November 12, 2026); a
   shorter one, the height of the gap, does the same above it. The pieces are clipped by
   .wall__clip, so the ramps can sit outside the section. */
.wall { position: relative; display: grid; place-items: center; min-height: max(680px, 100svh); margin-top: var(--sec); isolation: isolate; }
.wall::before, .wall::after { content: ''; position: absolute; right: 0; left: 0; z-index: -1; pointer-events: none; }
.wall::before { bottom: 100%; height: var(--sec); background: linear-gradient(0deg, var(--page-bg), color-mix(in srgb, var(--page-bg) 82%, transparent) 25%, color-mix(in srgb, var(--page-bg) 52%, transparent) 50%, color-mix(in srgb, var(--page-bg) 20%, transparent) 75%, transparent); }
.wall::after { top: 100%; height: clamp(320px, 62vh, 720px); background: linear-gradient(180deg, var(--page-bg), var(--page-bg) 14%, color-mix(in srgb, var(--page-bg) 88%, transparent) 30%, color-mix(in srgb, var(--page-bg) 66%, transparent) 48%, color-mix(in srgb, var(--page-bg) 38%, transparent) 66%, color-mix(in srgb, var(--page-bg) 14%, transparent) 84%, transparent); }
.wall__clip { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* What comes after the wall paints over the ramp */
.end, .foot { position: relative; }
.wall__w { --gap: clamp(14px, 1.6vw, 28px); position: absolute; top: -12%; left: -8%; z-index: -2; display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: var(--gap); width: 116%; opacity: .42; transform: rotate(-4deg); }
.wall__col { will-change: transform; animation: wall-up var(--t) linear var(--o) infinite; }
.wall__col:nth-child(even) { margin-top: -180px; }
.wall.is-off .wall__col { animation-play-state: paused; }
.wall__i { padding-bottom: var(--gap); }
.wall__i .pc, .wall__i .post { border-radius: 12px; }
@keyframes wall-up { to { transform: translate3d(0, -50%, 0); } }
.wall__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(62% 52% at 50% 50%, color-mix(in srgb, var(--page-bg) 94%, transparent) 30%, color-mix(in srgb, var(--page-bg) 60%, transparent) 75%, color-mix(in srgb, var(--page-bg) 35%, transparent)), linear-gradient(180deg, var(--page-bg), transparent 20%, transparent 80%, var(--page-bg)); }
.wall__in { display: grid; justify-items: center; gap: clamp(22px, 3vw, 40px); text-align: center; }
.wall__h { font: 800 clamp(52px, 9vw, 184px)/.88 var(--font); letter-spacing: -.058em; text-wrap: balance; }
.wall__h > span:not(.w) { display: block; color: var(--dim-head); }
.wall__sub { max-width: 30rem; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); text-wrap: balance; }

/* ---------- The invite ---------- */
.end { display: grid; justify-items: center; gap: 28px; margin-top: var(--sec); text-align: center; }
.end__note { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); }
.invite { display: grid; justify-items: center; gap: 14px; width: min(580px, 100%); margin-top: 10px; }
.invite__row { display: flex; gap: 10px; width: 100%; }
.invite__email { flex: 1; min-width: 0; min-height: 54px; padding: 12px 18px; border-radius: 12px; font-size: 16px; }
.invite__go { flex: none; min-height: 54px; }
.invite__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.invite__msg { font-size: 14px; text-wrap: pretty; }
.invite__msg:empty { display: none; }
.invite__privacy { max-width: 32rem; color: var(--dim); font-size: 12.5px; line-height: 1.45; letter-spacing: .005em; text-wrap: pretty; }
/* Sent: the form turns into one green line */
.invite__done { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px 0 12px; border-radius: 12px; background: color-mix(in srgb, var(--ready) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ready-ink) 50%, transparent); font-size: 16px; text-align: left; animation: enter .5s var(--ease); }
.invite__done .tile { --s: 30px; }
.invite__done .tick { width: 18px; height: 18px; }
.invite.is-sent .invite__row { display: none; }
.invite.is-flash { animation: flash 1.6s var(--ease); border-radius: 14px; }
@media (max-width: 560px) { .invite__row { flex-direction: column; } .invite__go { width: 100%; } }

/* The rule above the footer spans the content, not the gutters */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--sec); padding-top: 24px; padding-bottom: max(28px, env(safe-area-inset-bottom)); background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.foot__mark { height: 16px; width: auto; }
.foot__nav { display: flex; gap: 22px; }

/* ---------- The pieces ----------
   Each piece sizes its own type to its width (container units), so one piece works on the wall, in
   the strip or inside the phone. They are exports, so they keep their own colors in either theme. */
.pc { position: relative; container-type: inline-size; overflow: hidden; border-radius: 14px; background: #000; color: #fff; color-scheme: dark; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 30px 80px rgb(0 0 0 / .45); }
.pc img, .pc video { width: 100%; height: 100%; object-fit: cover; }
.pc--reel { aspect-ratio: 9 / 16; }
.pc--card { aspect-ratio: 4 / 5; }
.pc--wide { aspect-ratio: 16 / 9; }
.pc[data-look="paper"], .rl[data-look="paper"] { background: var(--paper); color: var(--paper-ink); }
/* The sample brand's mark, set in type (local mode uses the real logo file) */
.pc__mark { font: 500 2.6cqw/1 var(--brand-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .62; white-space: nowrap; }
.pc .pc__logo { width: auto; height: 3.6cqw; object-fit: contain; }

/* Clip, drawn: the hook stays up top, the voice sits in the band, the caption under it */
.rl { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6cqw; padding: 9cqw 7cqw 10cqw; background: #000; color: #fff; }
.rl__hook { font: 400 9cqw/1.06 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.rl__band { position: relative; margin: auto -7cqw 0; aspect-ratio: 3 / 2; background: radial-gradient(70% 90% at 50% 40%, #2a2a30, #111114); }
.rl[data-look="paper"] .rl__band { background: radial-gradient(70% 90% at 50% 40%, #2b2925, #141310); }
.rl__band::after { content: ''; position: absolute; top: 24%; bottom: 24%; left: 50%; width: .5cqw; background: rgb(255 255 255 / .9); box-shadow: 0 0 2cqw rgb(255 255 255 / .5); }
/* The voice slides past the playhead: what has played (left) is bright, what's coming is dim.
   The strip is two tiles wide and moves one tile, so the loop has no seam. */
.rl__v { position: absolute; inset: 27% 7%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 50%, rgb(0 0 0 / .36) 50%, rgb(0 0 0 / .36) 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 50%, rgb(0 0 0 / .36) 50%, rgb(0 0 0 / .36) 90%, transparent); }
.rl__vs { position: absolute; inset: 0 auto 0 0; width: 200%; background: var(--wave) 0 50% / 50% 100% repeat-x; will-change: transform; animation: voice 7s linear infinite; }
@keyframes voice { to { transform: translate3d(-50%, 0, 0); } }
.wall.is-off .rl__vs { animation-play-state: paused; }
.rl__cap { min-height: 2.3em; font: 700 6.4cqw/1.14 var(--brand-sans); letter-spacing: .02em; text-align: center; text-transform: uppercase; text-wrap: balance; transition: opacity .3s ease; }
.rl__cap .cw { opacity: .42; }
.rl__cap .cw.is-said { opacity: 1; }
.rl.is-live .rl__cap .cw { transition: opacity .12s linear; }
.rl.is-clear .rl__cap { opacity: 0; }

/* Full episode: the cut across all cameras */
.ep { background: #000; }
.ep__img { position: absolute; inset: 0; filter: grayscale(1) brightness(.8); }
/* Each camera lights the title card from its own side, so a cut reads as a cut */
.ep { --lx: 78%; --ly: 18%; }
.ep[data-cam="0"] { --lx: 18%; --ly: 22%; }
.ep[data-cam="2"] { --lx: 50%; --ly: -10%; }
.ep__art { position: absolute; inset: 0; display: grid; align-content: center; gap: 2.2cqw; padding: 0 8cqw 19cqw; background: radial-gradient(60% 80% at var(--lx) var(--ly), rgb(255 255 255 / .09), transparent 70%), linear-gradient(160deg, #141418, #050507 60%); }
.ep__cam { position: absolute; top: 3.4cqw; left: 3.4cqw; display: flex; align-items: center; gap: 1cqw; padding: .9cqw 1.3cqw; border-radius: .8cqw; background: rgb(0 0 0 / .55); color: rgb(255 255 255 / .86); font: 800 1.25cqw/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.ep__cam::before { content: ''; width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--video); box-shadow: 0 0 1cqw var(--video); }
.ep__k { font: 500 1.5cqw/1 var(--brand-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.ep__t { max-width: 13em; font: 400 6cqw/1.02 var(--serif); letter-spacing: -.015em; }
.ep__img + .ep__art { background: linear-gradient(90deg, rgb(0 0 0 / .62), transparent 70%); }
.ep__tl { position: absolute; right: 3cqw; bottom: 3cqw; left: 3cqw; display: grid; gap: .9cqw; padding: 1.8cqw 2cqw; border-radius: 1.2cqw; background: rgb(8 8 12 / .84); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.ep__row { display: grid; grid-template-columns: 7cqw minmax(0, 1fr); align-items: center; gap: 1.4cqw; }
.ep__row b { font: 700 1.15cqw/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .5); white-space: nowrap; }
.ep__lane { position: relative; height: 1.8cqw; border-radius: .5cqw; background: rgb(255 255 255 / .06); }
.ep__lane i { position: absolute; top: 0; bottom: 0; border-radius: .5cqw; background: rgb(255 255 255 / .78); transition: background-color .25s ease; }
.ep__row b { transition: color .25s ease; }
/* The camera on the air: its label and its lane light, the others step back */
.ep.is-live .ep__lane i { background: rgb(255 255 255 / .42); }
.ep[data-cam="0"] .ep__row:nth-child(1) b, .ep[data-cam="1"] .ep__row:nth-child(2) b, .ep[data-cam="2"] .ep__row:nth-child(3) b { color: #fff; }
.ep.is-live[data-cam="0"] .ep__row:nth-child(1) .ep__lane i, .ep.is-live[data-cam="1"] .ep__row:nth-child(2) .ep__lane i, .ep.is-live[data-cam="2"] .ep__row:nth-child(3) .ep__lane i { background: rgb(255 255 255 / .92); }
/* The audio lane: the whole conversation, brighter where the head has played it */
.ep__au { position: relative; height: 3.4cqw; }
.ep__w { position: absolute; inset: 0; width: 100%; height: 100%; }
.ep__w rect { fill: #fff; opacity: .26; }
.ep__w--read { clip-path: inset(0 62% 0 0); }
.ep__w--read rect { opacity: .88; }
/* The playhead sits over the lanes: past the padding (2cqw), the label (7cqw) and the gap (1.4cqw);
   the lanes are 81.6cqw long. The still frame stands at 38%. */
.ep__head { position: absolute; top: 1cqw; bottom: 1cqw; left: calc(10.4cqw + (100% - 12.4cqw) * .38); width: .3cqw; margin-left: -.15cqw; background: var(--video); box-shadow: 0 0 1.2cqw var(--video); }
.ep.is-live .ep__head { left: 10.4cqw; will-change: transform; }

/* Quote card: the line in the brand's serif, over a photo or on its own field */
.qc__photo { position: absolute; inset: 0; filter: grayscale(1); }
.qc__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05) 20%, rgb(0 0 0 / .86) 70%); }
.qc__q { position: absolute; top: 4cqw; left: 6cqw; font: 400 34cqw/1 var(--serif); opacity: .16; }
.qc__t { position: absolute; right: 7cqw; bottom: 15cqw; left: 7cqw; font: 400 7.6cqw/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.qc--plain .qc__t { font-size: 9cqw; }
.qc__who { position: absolute; bottom: 7cqw; left: 7cqw; font: 500 2.5cqw/1 var(--brand-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.qc .pc__logo, .qc .pc__mark { position: absolute; right: 7cqw; bottom: 6.4cqw; }
.qc .pc__mark { bottom: 7cqw; font-size: 2.5cqw; }

/* Carousel slide: slide number, one line, the mark */
.sl { display: flex; flex-direction: column; justify-content: space-between; }
.sl > * { margin: 0 8cqw; }
.sl > :first-child { margin-top: 8cqw; }
.sl > :last-child { margin-bottom: 8cqw; }
.sl__n { font: 500 2.8cqw/1 var(--brand-sans); letter-spacing: .14em; opacity: .5; }
.sl__t { font: 400 9.4cqw/1.04 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.sl__t em { opacity: .55; }
.sl .pc__logo, .sl .pc__mark { align-self: flex-start; }
.sl .pc__logo { height: 4cqw; }
.sl[data-look="paper"] .pc__logo { filter: invert(1); }

/* Motion graphic: the speaker's line over a field of dots that fills in */
.mg { display: grid; grid-template-columns: 1fr 1.1fr; }
.mg__photo { position: relative; filter: grayscale(1); }
.mg__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, #000); }
.mg__l { display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 50%, rgb(191 90 242 / .1), transparent 70%); }
.mg__l .mg__field { width: 34cqw; grid-template-columns: repeat(8, 1fr); gap: 1.6cqw; }
.mg__r { display: grid; align-content: center; gap: 3.2cqw; padding: 0 6cqw 0 2cqw; }
.mg__t { font: 400 5.2cqw/1.05 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.mg__who { font: 500 1.7cqw/1 var(--brand-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.mg__field { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1cqw; width: 34cqw; }
.mg__field b { aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .16); }
.mg__field b.on { background: var(--graphic); box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--graphic) 70%, transparent); }
.enter [data-enter] .mg__field b.on { transition: background-color .5s ease, box-shadow .5s ease; transition-delay: calc(.9s + var(--i, 0) * 70ms); }
.enter [data-enter]:not(.is-in) .mg__field b.on { background: rgb(255 255 255 / .16); box-shadow: none; }
/* Playing: the dots become the voice, a waveform scrolling through the field, and the line rises in
   word by word, holds, and clears for the next pass */
.it .mg.is-live .mg__field b { transition: background-color .14s linear, box-shadow .14s linear; transition-delay: 0s; }
.it .mg.is-live .mg__field b.on { background: rgb(255 255 255 / .16); box-shadow: none; }
.it .mg.is-live .mg__field b.lit { background: var(--graphic); box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--graphic) 70%, transparent); }
.mg__t .wd { display: inline-block; }
.mg.is-live .mg__t .wd, .mg.is-live .mg__who { opacity: 0; transform: translate3d(0, .3em, 0); filter: blur(.5cqw); transition: opacity .45s var(--ease), transform .7s var(--ease), filter .45s var(--ease); }
.mg.is-live .mg__t .wd.is-up, .mg.is-live .mg__who.is-up { opacity: 1; transform: none; filter: none; }
.mg.is-live .mg__who.is-up { opacity: .55; }

/* Post text: the words a post needs, in a plain frame (not any network's own interface) */
.post { display: grid; align-content: start; border-radius: 14px; background: #f4f4f1; color: #121212; container-type: inline-size; box-shadow: 0 30px 80px rgb(0 0 0 / .45); }
.post > * { margin: 4.6cqw 7cqw 0; }
.post > :first-child { margin-top: 7cqw; }
.post > :last-child { margin-bottom: 7cqw; }
.post__by { display: flex; align-items: center; gap: 3.4cqw; }
.post__av { flex: none; width: 11cqw; height: 11cqw; border-radius: 50%; object-fit: cover; object-position: 40% 25%; filter: grayscale(1); }
.post__av--drawn { display: grid; place-items: center; background: #16140f; color: #f2eee6; font: 400 5.4cqw/1 var(--serif); }
.post__name { font: 800 4.3cqw/1.15 var(--font); letter-spacing: -.01em; }
.post__where { color: #6b6b6b; font: 700 3.3cqw/1.2 var(--font); }
.post__p { font: 700 4.6cqw/1.42 var(--font); letter-spacing: -.004em; text-wrap: pretty; }
.post__img { width: calc(100% - 14cqw); aspect-ratio: 16 / 9; border-radius: 2cqw; object-fit: cover; filter: grayscale(1); }
.post__img--drawn { position: relative; display: grid; align-content: end; padding: 5cqw; overflow: hidden; background: var(--wave) 50% 34% / 80% 34% no-repeat, linear-gradient(160deg, #1d1c22, #08080a); color: #fff; filter: none; }
.post__img--drawn p { font: 400 5.6cqw/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
/* In the strip the post writes itself on the first time it's seen: the words, then the picture */
.it .post .wd, .it .post .post__img { transition: opacity .35s ease, transform .6s var(--ease); transition-delay: calc(.3s + var(--w, 0) * 32ms); }
.it .post .post__img { transition-delay: calc(.5s + var(--w, 0) * 32ms); }
.life .it .post:not(.is-written) .wd { opacity: 0; }
.life .it .post:not(.is-written) .post__img { opacity: 0; transform: translate3d(0, 3cqw, 0); }

/* Review on the phone: the clip, its timeline with notes, approve */
.phone { position: relative; container-type: inline-size; color-scheme: dark; color: #fff; width: 100%; aspect-ratio: 9 / 19.2; border-radius: 15% / 7%; background: #08090f; box-shadow: 0 0 0 1px rgb(255 255 255 / .16), inset 0 0 0 5px #000, 0 40px 100px rgb(0 0 0 / .6); }
.phone__in { display: flex; flex-direction: column; height: calc(100% - 6.4cqw); margin: 3.2cqw; overflow: hidden; border-radius: 12cqw; background: #0b0c18; }
.phone__clip { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: inline-size; }
.phone__clip img, .phone__clip video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.phone__clip .rl { padding-top: 14cqw; }
.phone__ui { display: grid; gap: 3.6cqw; padding: 5cqw 6cqw 7cqw; }
.phone__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 4.4cqw; }
.phone__head b { font-weight: 800; }
.phone__head span { color: var(--muted); }
.phone__track { position: relative; height: 9cqw; }
.phone__rail { position: absolute; top: 6cqw; right: 0; left: 0; height: 1cqw; border-radius: 1cqw; background: var(--line-2); }
/* The still frame stands just past the note; playing, home.js runs the rail from 0 */
.phone__rail i { position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: 0 50%; transform: scaleX(calc(var(--at, .38) + .08)); }
.phone__note { position: absolute; top: 0; left: calc(var(--at, .38) * 100%); width: 3.4cqw; height: 3.4cqw; margin-left: -1.7cqw; border-radius: 1cqw 1cqw 1cqw 0; background: var(--words); box-shadow: 0 0 3cqw color-mix(in srgb, var(--words) 60%, transparent); transform: rotate(-45deg); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.phone__notes li, .phone__acts span { transition: opacity .45s var(--ease), transform .6s var(--ease), background-color .35s ease, box-shadow .5s var(--ease); }
.phone.is-live:not(.is-noted) .phone__note { opacity: 0; transform: translate3d(0, -2cqw, 0) rotate(-45deg); }
.phone.is-live:not(.is-noted) .phone__notes li { opacity: 0; transform: translate3d(0, 2cqw, 0); }
.phone.is-ok .phone__ok { box-shadow: 0 0 0 1cqw color-mix(in srgb, var(--ready) 26%, transparent), 0 0 6cqw color-mix(in srgb, var(--ready) 40%, transparent); }
.phone.is-ok .phone__acts span:last-child { opacity: .4; }
.phone.is-reset .phone__notes li, .phone.is-reset .phone__note { opacity: 0; }
.phone__notes { display: grid; gap: 2.4cqw; font-size: 4cqw; line-height: 1.3; }
.phone__notes li { display: flex; gap: 3cqw; color: var(--muted); }
.phone__notes li b { flex: none; color: var(--words); font-weight: 800; font-variant-numeric: tabular-nums; }
.phone__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.phone__acts span { display: grid; place-items: center; min-height: 11cqw; border-radius: 3cqw; background: var(--glass-2); font-size: 4cqw; font-weight: 800; }
.phone__acts span:first-child { background: var(--ready); color: var(--on-ready); }

/* ---------- Everything holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  .drift i, .hero__beam, .wall__col, .rl__vs { animation: none !important; }
  [data-enter] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .mg__field b.on { background: var(--graphic) !important; box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--graphic) 70%, transparent) !important; }
}