/* ═══════════════════════════════════════════════════════════════════════════
   home.css — the film.
   1 THE WORD, SAID · 2 FORTY-FOUR SOUNDS · 3 TEXTBOOK → REAL · 4 SUBTITLES ·
   5 LIGHTS OFF (Meet James) · 6 THE BILL · 7 FIN → BEGIN.
   Scroll choreography (pins, beats) is driven by home.js with GSAP; every
   state here is a complete, designed still, so the page reads without it.
   ═══════════════════════════════════════════════════════════════════════ */
.page-home { --top: calc(var(--bar-h) + var(--bar-gap) * 2); }
.page-home main > section { position: relative; z-index: 1; }

/* ── the light layer (gl.js) ─────────────────────────────────────────── */
#cyc { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: multiply; }

/* ── the premiere ────────────────────────────────────────────────────── */
#lights { display: none; }
html.has-premiere #lights {
  display: block; position: fixed; inset: 0; z-index: 250; background: var(--black); pointer-events: none;
  animation: flood 1s var(--ease-in-out) 1.35s both;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(var(--flood) - 12%), transparent var(--flood));
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(var(--flood) - 12%), transparent var(--flood));
}
@property --flood { syntax: '<percentage>'; inherits: false; initial-value: 130%; }
@keyframes flood { from { --flood: 130%; } to { --flood: -20%; } }
html.has-premiere #lights::after { content: ""; position: absolute; inset: 0; animation: strike 1ms linear 2.4s both; }
@keyframes strike { to { visibility: hidden; } }
.lamp { position: absolute; border-radius: 50%; opacity: 0; will-change: opacity; }
.lamp.l1 { left: 8%; top: 12%; width: 46vmax; height: 46vmax; background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(255, 236, 190, .35) 35%, transparent 70%); animation: click .06s steps(1, end) .45s both, lamp-bloom 1.2s ease-out .45s both; }
.lamp.l2 { right: 4%; top: 22%; width: 38vmax; height: 38vmax; background: radial-gradient(closest-side, rgba(226, 235, 255, .9), rgba(200, 216, 255, .3) 40%, transparent 72%); animation: click .06s steps(1, end) .95s both, lamp-bloom 1s ease-out .95s both; }
@keyframes click { to { opacity: 1; } }
@keyframes lamp-bloom { from { transform: scale(.7); } to { transform: scale(1); } }
/* while the premiere runs, the page waits under it */
html.has-premiere .s-word .kick, html.has-premiere .s-word .word, html.has-premiere .s-word .sub,
html.has-premiere .s-word .facts, html.has-premiere .s-word .cta { visibility: hidden; }

/* ═══ 1 · THE WORD, SAID ═══════════════════════════════════════════════ */
.s-word { min-height: 100svh; display: grid; align-items: stretch; padding-top: var(--top); overflow: clip; }
.s-word-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); align-items: end; column-gap: clamp(8px, 2vw, 32px); }
.s-word-copy { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2.2vh, 26px); padding: clamp(24px, 5vh, 56px) 0 clamp(28px, 6vh, 64px); position: relative; z-index: 2; }
.kick { font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); color: var(--ink-2); line-height: 1.2; overflow: hidden; }
.kick span { display: inline-block; }
.word-mask { overflow: hidden; padding: .06em 0 .04em .1em; margin: -.06em 0 -.04em -.1em; max-width: calc(100% + .1em); }
.word {
  font-family: var(--f-display); font-size: clamp(4.6rem, 2rem + 12.6vw, 14.2rem); line-height: .86; letter-spacing: -.035em;
  display: flex; align-items: baseline; margin-left: -.045em; white-space: nowrap;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800;
}
.word .l { display: inline-block; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; will-change: transform; transform-origin: 50% 90%; }
.word .dot { color: var(--live); position: relative; }
.word .dot::after { content: ""; position: absolute; left: 50%; bottom: .24em; width: .42em; height: .42em; transform: translateX(-50%); border-radius: 50%; opacity: 0; box-shadow: 0 0 0 0 rgba(232, 53, 43, .55); }
.word.is-live .dot::after { animation: rec 1.1s ease-out 2; }
@keyframes rec { 0% { opacity: .8; box-shadow: 0 0 0 0 rgba(232, 53, 43, .55); } 100% { opacity: 0; box-shadow: 0 0 0 .55em rgba(232, 53, 43, 0); } }
.vl-wrap { width: 100%; max-width: 760px; height: clamp(64px, 9vh, 96px); margin: -4px 0 0; }
.vl-canvas { width: 100%; height: 100%; }
.sub { max-width: 44ch; font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem); line-height: 1.55; text-wrap: pretty; }
.sub em { font-style: italic; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--f-display); font-size: clamp(.72rem, .68rem + .2vw, .82rem); letter-spacing: .1em; text-transform: uppercase; color: var(--sound); font-variation-settings: 'opsz' 12, 'wdth' 92, 'wght' 650; }
.facts span { display: inline; }
.facts span + span::before { content: "·"; margin: 0 10px; color: var(--line-2); }
.facts b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.cta { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.mic .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(232, 53, 43, .5); }
.mic[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--live); color: var(--live); }
.mic[aria-pressed="true"] .rec { animation: live-pulse 1.4s ease-out infinite; }
.mic-note { font-size: .95rem; color: var(--ink-2); max-width: 46ch; min-height: 1.4em; }
.mic-note b { color: var(--live); }

.s-word-stage { position: relative; align-self: end; height: min(88svh, 980px); display: flex; align-items: flex-end; justify-content: center; }
.s-word-stage .james { position: relative; z-index: 2; height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom; transform: scaleX(-1); filter: drop-shadow(0 30px 40px rgba(14, 17, 24, .22)); }
.s-word-stage .rim { position: absolute; z-index: 1; left: 50%; top: 22%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 87, 245, .22), rgba(36, 87, 245, .08) 45%, transparent 70%); pointer-events: none; }
.s-word-stage .floor { position: absolute; z-index: 0; left: 50%; bottom: -2%; width: 78%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 17, 24, .28), rgba(14, 17, 24, .1) 55%, transparent 100%); filter: blur(6px); }

@media (max-width: 899px) {
  .s-word { min-height: auto; padding-top: calc(var(--top) + 6px); }
  .s-word-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .s-word-copy { padding: 8px 0 20px; gap: 14px; }
  .word { font-size: clamp(4.6rem, 2rem + 14.2vw, 8rem); }
  .vl-wrap { height: 58px; }
  .sub { font-size: 1.08rem; }
  .cta { flex-direction: column; align-items: stretch; width: 100%; }
  .cta .btn { width: 100%; }
  .s-word-stage { height: min(62svh, 560px); width: 100%; justify-content: center; margin-top: -8px; }
  .s-word-stage .james { height: 100%; }
}

/* ═══ 2 · FORTY-FOUR SOUNDS — the track ═══════════════════════════════ */
.s-sounds { --snd-w: clamp(320px, 56vw, 860px); }
.s-sounds-pin { height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: var(--top) 0 24px; row-gap: 8px; overflow: clip; }
.s-sounds-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.s-sounds-kick { font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); max-width: 30ch; text-wrap: balance; line-height: 1.3; }
.s-sounds-kick b { font-family: var(--f-display); font-variation-settings: 'opsz' 48, 'wdth' 100, 'wght' 720; font-size: 1.25em; letter-spacing: -.02em; display: block; }
.s-sounds-stage { position: relative; display: grid; align-items: center; min-height: 0; }
.s-sounds-stage .glow { position: absolute; left: 50%; top: 42%; width: min(72vmin, 760px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 87, 245, .17), rgba(36, 87, 245, .05) 50%, transparent 72%); pointer-events: none; will-change: transform; }
.track { position: relative; display: flex; align-items: center; padding-left: calc(50vw - var(--snd-w) / 2); will-change: transform; }
.snd { flex: 0 0 var(--snd-w); display: grid; justify-items: center; text-align: center; gap: clamp(6px, 1.4vh, 14px); will-change: transform, opacity; transform-origin: 50% 60%; }
.sym { margin: 0; font-size: min(clamp(6.5rem, 3rem + 20vw, 26rem), 40svh); line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.snd-word { font-family: var(--f-display); font-size: min(clamp(2rem, 1.4rem + 3vw, 5.6rem), 8svh); line-height: 1; letter-spacing: -.03em; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 760; }
.snd-word b { color: var(--sound); font-weight: inherit; }
.snd-how { font-size: clamp(1.05rem, 1rem + .6vw, 1.7rem); line-height: 1.45; max-width: 34ch; color: var(--ink-2); text-wrap: balance; }
.s-sounds-foot { display: flex; align-items: center; gap: 18px; }
.s-sounds-prog { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.s-sounds-prog i { display: block; height: 100%; width: 0; background: var(--sound); }
.s-sounds-n { font-family: var(--f-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; font-variation-settings: 'opsz' 12, 'wdth' 92, 'wght' 650; font-variant-numeric: tabular-nums; }
.s-sounds-n b { color: var(--ink); }
@media (max-width: 899px) {
  .s-sounds { --snd-w: 86vw; }
  .s-sounds-head { flex-direction: column; }
  .s-sounds-all { display: none; }
  .sym { font-size: clamp(6rem, 3rem + 22vw, 11rem); }
}

/* ═══ 3 · TEXTBOOK → REAL — the collapse ═══════════════════════════════ */
.s-real-pin { height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: var(--top) 0 24px; row-gap: 8px; overflow: clip; }
.s-real-kick { font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); max-width: 34ch; line-height: 1.3; text-wrap: balance; }
.pairs { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.pair { grid-area: 1 / 1; display: grid; gap: clamp(16px, 3.5vh, 36px); justify-items: center; text-align: center; visibility: hidden; opacity: 0; width: 100%; }
.tbk { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 1rem + 2.6vw, 3.8rem); color: var(--ink-2); line-height: 1.3; padding: 16px 28px; border: 1px solid var(--line); border-radius: 6px; background: repeating-linear-gradient(transparent 0 calc(1.3em - 1px), var(--line) calc(1.3em - 1px) 1.3em); background-color: #FBFAF6; transform: rotate(-1.5deg); box-shadow: var(--shadow-1); display: inline-block; }
.tbk .w { display: inline-block; will-change: transform, opacity; }
.real { font-family: var(--f-display); font-size: min(clamp(2.8rem, 1.2rem + 8.4vw, 12rem), 20svh); line-height: .95; letter-spacing: -.035em; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; text-wrap: balance; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .22em; }
.real .w { display: inline-block; overflow: hidden; padding: .08em .02em .04em; margin: -.08em -.02em -.04em; }
.real .w i { display: inline-block; font-style: normal; will-change: transform; }
.real u { text-decoration: none; background: linear-gradient(transparent 62%, var(--pen) 62%, var(--pen) 94%, transparent 94%); background-repeat: no-repeat; background-size: var(--pen-w, 0%) 100%; }
.ipa-line { font-size: clamp(1.3rem, 1rem + 1.2vw, 2.2rem); color: var(--sound); }
.s-real-foot { display: flex; align-items: center; gap: 18px; color: var(--ink-2); font-size: .9rem; }
.s-real-foot p { white-space: nowrap; }
.s-real-prog { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.s-real-prog i { display: block; height: 100%; width: 0; background: var(--sound); }
@media (max-width: 899px) { .real { font-size: clamp(2.6rem, 1rem + 12vw, 5rem); } .tbk { font-size: clamp(1.3rem, 1rem + 3vw, 2rem); padding: 12px 18px; } .s-real-foot p { white-space: normal; } }

/* ═══ 4 · THE DECK ═══════════════════════════════════════════════════════ */
.s-proof-pin { position: relative; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: var(--top) 0 24px; row-gap: 8px; overflow: clip; }
.s-proof-ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); margin: 0; font-family: var(--f-display); font-size: clamp(8rem, 26vw, 30rem); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--line-2); opacity: .55; pointer-events: none; white-space: nowrap; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; user-select: none; }
.s-proof-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; position: relative; z-index: 1; }
.s-proof-kick { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); font-variation-settings: 'opsz' 48, 'wdth' 100, 'wght' 720; letter-spacing: -.015em; line-height: 1.25; }
.s-proof-kick span { display: block; color: var(--ink-2); font-family: var(--f-text); font-weight: 400; font-size: .8em; letter-spacing: 0; }
.s-proof-count { font-family: var(--f-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; font-variation-settings: 'opsz' 12, 'wdth' 92, 'wght' 650; }
.s-proof-count b { color: var(--ink); }
.deck { position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; perspective: 1400px; padding: 0 var(--gutter); }
.dk { grid-area: 1 / 1; margin: 0; width: min(920px, 100%); display: grid; gap: 14px; padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 48px); background: var(--cyc); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-2); will-change: transform, opacity; transform-origin: 50% 100%; }
.dk-lang { justify-self: start; font-family: var(--f-display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--sound-soft); color: var(--sound); font-variation-settings: 'opsz' 12, 'wdth' 92, 'wght' 650; }
.dk blockquote { margin: 0; font-size: clamp(1.35rem, 1rem + 1.6vw, 3rem); line-height: 1.25; font-weight: 600; letter-spacing: -.015em; text-wrap: pretty; }
.dk[dir="rtl"] blockquote, .dk blockquote[dir="rtl"] { text-align: right; }
.dk .en { font-style: italic; color: var(--ink-2); font-size: clamp(1rem, .9rem + .5vw, 1.45rem); text-wrap: pretty; }
.dk figcaption { font-family: var(--f-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sound); font-variation-settings: 'opsz' 12, 'wdth' 92, 'wght' 650; }
.s-proof-foot { display: grid; gap: 10px; color: var(--ink-2); font-size: .9rem; position: relative; z-index: 1; }
.s-proof-foot a { color: var(--ink); font-weight: 600; }
.prog { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--sound); }
@media (max-width: 899px) { .s-proof-head { flex-direction: column; gap: 4px; } .dk { padding: 22px 22px 20px; border-radius: 20px; } }

/* ═══ 5 · LIGHTS OFF — meet James ═════════════════════════════════════ */
.s-meet { position: relative; overflow: clip; padding: var(--top) 0 clamp(48px, 8vh, 96px); min-height: 100svh; display: flex; align-items: center; }
.s-meet .stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.s-meet-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.s-meet-copy { display: grid; gap: clamp(14px, 2.4vh, 24px); }
.s-meet .eyebrow { color: var(--on-black-2); }
.s-meet .eyebrow b { color: var(--live); }
.s-meet-title { font-size: clamp(3rem, 2rem + 6vw, 7.5rem); letter-spacing: -.035em; line-height: .92; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; }
.s-meet-line { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); max-width: 40ch; line-height: 1.5; color: var(--on-black); }
.s-meet-line b { color: var(--on-black); }
.s-meet-q { font-style: italic; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--on-black-2); max-width: 40ch; border-left: 3px solid var(--live); padding-left: 14px; line-height: 1.5; }
.common { display: grid; gap: 12px; margin-top: 6px; }
.common-h { font-family: var(--f-display); font-size: 1rem; color: var(--on-black); font-variation-settings: 'opsz' 24, 'wdth' 100, 'wght' 650; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--on-black); font-size: .95rem; line-height: 1.1; transition: background .25s, border-color .25s, transform .3s var(--ease-out), color .25s; }
.chip .ic { font-size: 1.05rem; line-height: 1; }
.chip:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--sound); border-color: var(--sound); color: #fff; }
.chip[aria-pressed="true"]::after { content: "me too"; font-family: var(--f-display); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .22); padding: 3px 7px; border-radius: 999px; margin-left: 2px; }
.common-out { font-size: 1.05rem; color: var(--on-black); }
.common-out a { color: var(--on-black); font-weight: 600; margin-left: 6px; }
.s-meet-stage { position: relative; display: grid; justify-items: center; align-items: end; min-height: min(70svh, 640px); }
.astro { position: relative; z-index: 1; height: min(64svh, 600px); width: auto; max-width: none; animation: float 7s ease-in-out infinite; filter: drop-shadow(0 0 28px rgba(91, 134, 255, .45)) drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-14px) rotate(1.2deg); } }
.bubble { position: absolute; z-index: 2; left: 4%; top: 14%; max-width: 22ch; padding: 12px 16px; background: var(--cyc); color: var(--ink); border-radius: 18px 18px 18px 4px; display: grid; gap: 3px; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s ease, transform .5s var(--ease-out); }
.bubble.is-on { opacity: 1; transform: none; }
.bubble span { font-family: var(--f-display); font-size: 1.15rem; font-variation-settings: 'opsz' 24, 'wdth' 100, 'wght' 700; letter-spacing: -.01em; }
.bubble small { font-size: .82rem; color: var(--ink-2); }
.s-meet-cap { position: absolute; bottom: -6px; right: 0; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-black-2); }
@media (max-width: 899px) { .s-proof-bg .listen { height: 56%; } }
@media (max-width: 899px) {
  .s-meet { padding-bottom: 40px; }
  .s-meet-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s-meet-stage { order: -1; min-height: min(58svh, 460px); }
  .astro { height: min(52svh, 420px); }
  .bubble { left: 0; top: 4%; }
  .s-meet-title { font-size: clamp(3rem, 2rem + 12vw, 5.5rem); }
}

/* ═══ 6 · THE BILL ═════════════════════════════════════════════════════ */
.s-bill { padding: clamp(64px, 10vh, 120px) 0 clamp(40px, 6vh, 72px); background: transparent; }
.s-bill .wrap { position: relative; }
.s-bill-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h b" "p b"; gap: 10px 24px; align-items: end; margin-bottom: clamp(24px, 4vh, 40px); }
.s-bill-head h2 { grid-area: h; }
.s-bill-head .lede { grid-area: p; }
.s-bill-head h2 { font-size: clamp(2.6rem, 1.6rem + 6vw, 7.5rem); letter-spacing: -.035em; line-height: .92; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; }
.tix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ticket { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tag tag" "name price" "desc price" "cta price"; gap: 4px 16px; align-items: end; padding: 22px 24px; background: var(--cyc); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .4s var(--ease-out), box-shadow .4s, border-color .3s; transform: rotate(var(--r, 0deg)); }
.ticket::before { content: ""; position: absolute; left: -1px; right: -1px; top: 42px; height: 0; border-top: 1px dashed var(--line-2); }
.ticket:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.ticket:hover .tk-price { transform: scale(1.08); color: var(--sound); }
.ticket:hover .tk-cta { color: var(--sound); }
.tk-tag { grid-area: tag; font-family: var(--f-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; font-variation-settings: 'opsz' 12, 'wdth' 90, 'wght' 650; }
.tk-name { grid-area: name; font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.05; letter-spacing: -.02em; font-variation-settings: 'opsz' 48, 'wdth' 100, 'wght' 720; text-wrap: balance; }
.tk-desc { grid-area: desc; color: var(--ink-2); font-size: .95rem; margin-top: 4px; }
.tk-price { grid-area: price; font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.03em; line-height: 1; color: var(--live); align-self: center; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; transition: transform .35s var(--ease-out), color .3s; transform-origin: right center; }
.tk-cta { grid-area: cta; font-family: var(--f-display); font-size: .9rem; margin-top: 10px; font-variation-settings: 'opsz' 24, 'wdth' 100, 'wght' 650; transition: color .25s; }
.tk-dark { background: var(--ink); color: var(--on-black); border-color: var(--ink); }
.tk-dark .tk-desc, .tk-dark .tk-tag { color: var(--on-black-2); }
.tk-dark .tk-price { color: var(--pen); }
.tk-dark::before { border-color: rgba(255, 255, 255, .25); }
.balloon { grid-area: b; width: clamp(120px, 12vw, 190px); margin: 0; display: grid; gap: 6px; transform: rotate(4deg); justify-self: end; align-self: end; }
.balloon img { width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(14, 17, 24, .2)); animation: float 9s ease-in-out infinite; }
.balloon figcaption { font-size: .78rem; color: var(--ink-2); font-style: italic; text-align: center; }
.s-bill-foot { margin-top: 22px; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 900px) { .balloon { display: none; } .s-bill-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "p"; } }
@media (max-width: 900px) { .tix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tix { grid-template-columns: minmax(0, 1fr); } .ticket { padding: 18px 20px; } }

/* ═══ 7 · FIN → BEGIN ══════════════════════════════════════════════════ */
.s-fin { padding: clamp(72px, 12vh, 140px) 0 clamp(48px, 8vh, 96px); position: relative; overflow: clip; }
.s-fin::before { content: ""; position: absolute; left: 50%; top: 0; width: 120vmax; height: 60vmax; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 236, 190, .12), transparent 70%); pointer-events: none; }
.s-fin-inner { position: relative; display: grid; gap: clamp(28px, 5vh, 56px); }
.s-fin-kick { font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); color: var(--on-black-2); overflow: hidden; margin: 0; }
.s-fin-kick span { display: inline-block; }
.s-fin-word { font-size: clamp(3.4rem, 1.5rem + 11vw, 13rem); line-height: .9; letter-spacing: -.035em; display: flex; flex-wrap: wrap; align-items: baseline; margin: -.2em 0 0 -.03em; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; }
.s-fin-word .g { display: inline-block; }
.s-fin-book { display: grid; gap: 14px; }
.cal-panel { background: var(--cyc); color: var(--ink); border-radius: var(--radius); min-height: 560px; overflow: hidden; display: grid; align-items: start; box-shadow: var(--shadow-2); }
.cal-panel .cal-wait { padding: 26px; color: var(--ink-2); font-size: .95rem; max-width: 40ch; }
.cal-panel .calendly-inline-widget { min-width: 300px; width: 100%; height: 700px; }
.s-fin-direct { color: var(--on-black-2); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.s-fin-direct a { color: var(--on-black); font-weight: 600; }
.s-fin-micro { font-family: var(--f-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-black-2); font-variation-settings: 'opsz' 12, 'wdth' 92, 'wght' 650; }
.credits { display: grid; gap: 6px; max-width: 640px; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-black-2); }
.credits p { display: flex; align-items: baseline; gap: 12px; }
.credits p::after { content: ""; flex: 1; order: 1; border-bottom: 1px dotted rgba(255, 255, 255, .22); }
.credits span + span { order: 2; color: var(--on-black); }
.fin { display: flex; gap: .35em; align-items: baseline; font-family: var(--f-display); font-size: clamp(2.6rem, 1.5rem + 6vw, 7rem); letter-spacing: -.035em; line-height: 1; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; margin: 0; }
.fin-a { position: relative; color: var(--on-black-2); }
.fin-a::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 50%; height: .1em; background: var(--live); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease-cut) .2s; }
.fin.is-on .fin-a::after { transform: scaleX(1); }
.fin-b { color: var(--on-black); clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease-out) .6s; }
.fin.is-on .fin-b { clip-path: inset(0); }

/* ── the thumb bar (phones only) ──────────────────────────────────────── */
.thumb { position: fixed; left: 14px; right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 120; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(14, 17, 24, .08); border-radius: 999px; box-shadow: var(--shadow-2); font-family: var(--f-display); font-size: .92rem; font-variation-settings: 'opsz' 24, 'wdth' 100, 'wght' 650; transform: translateY(140%); transition: transform .5s var(--ease-out); }
.thumb .btn { padding: 12px 18px; font-size: .92rem; }
.thumb.is-on { transform: none; }
@media (max-width: 899px) { .thumb { display: flex; } }