/* Local Business Rewired: the main page and the tickets page (it began as variation 6, "Rewired"; the VIP page keeps
   premiere.css). Order agreed with Cam and Raz on Nov 1: opening, clients, the room, why now, what you leave with, the
   hosts, the Valley, questions, close; the tickets on their own page. The opening is the stage and the word. Everything after it is black and a deep night tone, people in black and white,
   and the sunset only where light would put it: the stage wall, the echoes of the word, the ticket skyline. */

:root {
  color-scheme: dark;
  --ground: #060607;
  --dusk: #0b0a10;
  --paper: #f4efe7;
  --text-2: #d2ccc4;
  --text-3: #a39d96;
  --grey: #87827c;
  --rule: rgba(255, 255, 255, 0.11);
  --rule-2: rgba(255, 255, 255, 0.2);
  --gold: #f2c27b;
  --ember: #e98a5b;
  --rose: #d9798f;
  --violet: #8d79c9;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(20px, 3.4vw, 48px);
  --wrap: 1240px;
  --section: clamp(96px, 11vw, 160px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--paper); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[id] { scroll-margin-top: 72px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.section { padding-block: var(--section); border-top: 1px solid var(--rule); }
.section--dusk { background: var(--dusk); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 14px 18px; background: var(--paper); color: #000; font: 600 14px/1 var(--sans); text-decoration: none; border-radius: 2px; }
.skip:focus { top: 16px; }

/* ---------- type ---------- */
.title { font: 600 clamp(2.5rem, 4.6vw, 4.4rem)/0.98 var(--sans); letter-spacing: -0.052em; text-wrap: balance; }
.lede { font: 400 clamp(1.08rem, 1.35vw, 1.28rem)/1.5 var(--sans); letter-spacing: -0.012em; color: var(--text-2); max-width: 31em; text-wrap: pretty; }
.eyebrow { margin-bottom: 22px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.side { margin-top: 20px; max-width: 22em; font-size: 15px; line-height: 1.55; color: var(--grey); text-wrap: pretty; }
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px var(--gutter); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px var(--gutter); align-items: start; }
.split__head { position: sticky; top: 112px; }
@media (max-width: 860px) {
  .head, .split { grid-template-columns: minmax(0, 1fr); }
  .split__head { position: static; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; font: 600 15px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; border: 1px solid currentColor; border-radius: 2px; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, transform 0.12s ease; }
.btn:active { transform: translateY(1px); }
.btn--paper { background: var(--paper); color: #000; border-color: var(--paper); }
.btn--paper:hover { background: #fff; border-color: #fff; box-shadow: 0 10px 28px rgba(244, 239, 231, 0.14); }
.btn--line { color: var(--paper); border-color: var(--rule-2); }
.btn--line:hover { background: var(--paper); color: #000; border-color: var(--paper); }
.textlink { font: 500 15px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; text-decoration-color: rgba(244, 239, 231, 0.45); transition: text-decoration-color 0.2s ease; }
.textlink:hover { text-decoration-color: currentColor; }

/* ---------- bar ---------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: max(22px, env(safe-area-inset-top, 0px)) var(--gutter) 22px; transition: background-color 0.4s ease, padding 0.4s var(--ease), box-shadow 0.4s ease; }
.bar.scrolled { padding-block: 14px; background: rgba(6, 6, 7, 0.9); box-shadow: 0 1px 0 var(--rule); }
.bar__mark { justify-self: start; font: 600 12px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.bar__nav { display: flex; gap: 32px; font-size: 14px; }
.bar__nav a { position: relative; text-decoration: none; opacity: 0.7; transition: opacity 0.2s ease; }
.bar__nav a:hover, .bar__nav a[aria-current="true"] { opacity: 1; }
.bar__nav a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; }
.bar__seat { justify-self: end; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; font: 600 14px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; border: 1px solid rgba(244, 239, 231, 0.42); border-radius: 2px; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.bar__seat:hover, .bar.scrolled .bar__seat { background: var(--paper); color: #000; border-color: var(--paper); }
.bar.scrolled .bar__seat:hover { background: #fff; border-color: #fff; }
@media (max-width: 860px) { .bar { grid-template-columns: 1fr auto; } .bar__nav { display: none; } }
@media (max-width: 560px) { .bar { gap: 12px; } .bar__mark { font-size: 11px; letter-spacing: 0.12em; white-space: nowrap; } .bar__seat { min-height: 36px; padding: 0 14px; font-size: 13px; } }

/* ---------- the opening ---------- */
.open { position: relative; height: 100svh; min-height: 680px; max-height: 1100px; display: grid; grid-template-rows: 1fr auto auto; overflow: hidden; background: #000 url("video/stage-poster.jpg") 50% 45% / cover no-repeat; isolation: isolate; }
.open__film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.open__shade { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(52% 34% at 50% 50%, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0) 100%),
  linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.72) 70%, var(--ground) 100%); }
.open__title { grid-row: 2; padding: 0 var(--gutter) clamp(40px, 6vh, 64px); text-align: center; }
.t-small { display: block; margin-bottom: 18px; padding-left: 0.55em; font: 600 clamp(12px, 1vw, 14px)/1 var(--sans); letter-spacing: 0.55em; text-transform: uppercase; color: #ebe5dc; }
.t-big { position: relative; display: inline-block; font: 800 clamp(5rem, 15.5vw, 16rem)/0.8 var(--sans); letter-spacing: -0.07em; padding-right: 0.07em; }
.open__pre { max-width: 34em; margin: 34px auto 0; font: 400 clamp(16px, 1.3vw, 19px)/1.5 var(--sans); letter-spacing: -0.012em; color: #e3ddd5; text-wrap: balance; }
.open__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; margin-top: 28px; }
.open__bill { grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: max(26px, env(safe-area-inset-bottom, 0px)); }
.open__bill > div { padding: 18px 20px 0 0; border-top: 1px solid var(--rule-2); }
.open__bill > div + div { padding-left: 20px; }
.open__bill dt { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.open__bill dd { margin-top: 6px; font: 500 clamp(15px, 1.2vw, 18px)/1.3 var(--sans); letter-spacing: -0.015em; }
/* The three hosts, signed, beside the title on wide screens and under it on narrow ones; each links to his band */
.open__hosts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 540px); margin: 36px auto 0; text-align: left; }
.open__hosts a { display: grid; gap: 4px; text-decoration: none; }
.open__hosts img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 8px; border-radius: 3px; background: #000; box-shadow: 0 0 0 1px var(--rule-2), 0 24px 48px rgba(0, 0, 0, 0.5); transition: transform 0.5s var(--ease), box-shadow 0.3s ease; }
.open__hosts a:hover img { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(244, 239, 231, 0.45), 0 28px 56px rgba(0, 0, 0, 0.55); }
.open__hosts b { font: 600 14px/1.25 var(--sans); letter-spacing: -0.015em; }
.open__hosts span { font: 400 11px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: #a8a29a; }
@media (min-width: 1000px) {
  .open__title { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; text-align: left; }
  .open__main .t-small { padding-left: 0; }
  .t-big { font-size: clamp(5rem, 10.6vw, 10.5rem); white-space: nowrap; }  /* capped to fit the left column at any width */
  .open__pre { max-width: 30em; margin-left: 0; text-wrap: pretty; }
  .open__cta, .open .seats { justify-content: flex-start; }
  .open__hosts { width: 100%; margin: 0; }
}
@media (max-width: 760px) {
  .open { height: auto; min-height: max(640px, 100svh); max-height: none; padding-top: 84px; }
  .open__bill { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .open__bill > div:nth-child(3) { padding-left: 0; }
  .open__pre { margin-top: 26px; }
  .open__hosts { gap: 8px; margin-top: 30px; }
  .open__hosts b { font-size: 12px; }
  .open__hosts span { font-size: 10px; letter-spacing: 0; }
}

/* ---------- the seats: twenty dots, one per real seat in the room. The script draws them; once SEATS.live is set from
   Luma the taken ones go hollow and the line says how many are left. ---------- */
.seats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin-top: 24px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.seats b { font-weight: 600; color: var(--paper); }
.seats__dots { display: inline-grid; grid-template-columns: repeat(30, 7px); gap: 4px; }
.seats__dots:empty { display: none; }
.seats__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.seats__dots i.taken { background: transparent; box-shadow: inset 0 0 0 1px rgba(244, 239, 231, 0.3); }
.seats--left { justify-content: flex-start; margin-top: 32px; }
.seats--close { margin-top: 28px; color: var(--grey); }
.seats__fine { color: #a8a29a; }
@media (max-width: 560px) { .seats { flex-direction: column; gap: 10px; } .seats--left { align-items: flex-start; } }

/* the entrance: letters power on, the line and buttons rise, the dot drops onto the i */
.js .open__pre, .js .open__cta, .js .open .seats, .js .open__hosts, .js .t-small, .js .open__bill { animation: rise 1.3s var(--ease) both; }
.js .open:not(.on) .open__pre, .js .open:not(.on) .open__cta, .js .open:not(.on) .seats, .js .open:not(.on) .open__hosts, .js .open:not(.on) .t-small, .js .open:not(.on) .open__bill, .js .open:not(.on) .dot { animation-play-state: paused; }
.js .t-small { animation-name: track; animation-delay: 0.1s; }
.js .open__pre { animation-delay: 0.95s; }
.js .open__cta { animation-delay: 1.1s; }
.js .open .seats { animation-delay: 1.22s; }
.js .open__hosts { animation-delay: 1.05s; }
.js .open__bill { animation-delay: 1.35s; }
.js .open .seats__dots i { animation: seat 0.5s var(--spring) both; animation-delay: calc(1.3s + var(--i, 0) * 28ms); }
.js .open:not(.on) .seats__dots i { animation-play-state: paused; }
@keyframes seat { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes track { from { opacity: 0; letter-spacing: 1.1em; } to { opacity: 1; letter-spacing: 0.55em; } }
.t-big .ch { display: inline-block; }
.js .open:not(.on) .t-big .ch { opacity: 0; }
.js .open.on .t-big .ch { opacity: 1; transition: opacity 0.55s ease; transition-delay: calc(0.32s + var(--i) * 34ms); }

/* The dot of the i is its own object, measured from Geist's own dot at load, that drops onto the stem once */
.ch--i { position: relative; }
.dot { position: absolute; left: var(--dot-l, 0.1em); top: var(--dot-t, 0.06em); width: var(--dot-w, 0.17em); height: var(--dot-h, 0.17em); border-radius: var(--dot-r, 0); background: currentColor; }
.js .dot { opacity: 0; animation: dotdrop 1.1s both; animation-delay: 1.2s; }
.js .dot.landed { opacity: 1; animation: none; }
@keyframes dotdrop {
  0% { opacity: 0; transform: translateY(-1.1em); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  12% { opacity: 1; }
  58% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  76% { transform: translateY(-0.1em); animation-timing-function: cubic-bezier(.5, 0, .7, .5); }
  100% { opacity: 1; transform: translateY(0); }
}

/* The echo: seven outlined copies of the word, white into the sunset, that burst upward and spring shut. The script
   runs the spring and sets --x (how far open) and --on (how visible) on the word. */
.t-stack { position: absolute; inset: 0; pointer-events: none; }
.t-echo { position: absolute; left: 0; right: 0; top: 0; padding-right: inherit; color: transparent; -webkit-text-stroke: 0.012em var(--c); opacity: calc(var(--on, 0) * (1 - var(--k) * 0.11)); transform: translate3d(0, calc(var(--x, 0) * var(--k) * -0.135em), 0); will-change: transform, opacity; }
.t-echo:nth-child(1) { --c: rgba(244, 239, 231, 0.9); }
.t-echo:nth-child(2) { --c: rgba(244, 239, 231, 0.7); }
.t-echo:nth-child(3) { --c: var(--gold); }
.t-echo:nth-child(4) { --c: var(--ember); }
.t-echo:nth-child(5) { --c: var(--rose); }
.t-echo:nth-child(6) { --c: var(--rose); }
.t-echo:nth-child(7) { --c: var(--violet); }

/* ---------- the last room ---------- */
.room { background: var(--ground); }
.room__film { aspect-ratio: 12 / 5; }
.room__film .player__poster { filter: grayscale(1) contrast(1.06) brightness(0.92); }
.room__film.is-playing { aspect-ratio: 16 / 9; max-height: 90svh; }
.room__body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px var(--gutter); align-items: end; padding-block: clamp(48px, 6vw, 88px) clamp(80px, 9vw, 128px); }
.room__quote { max-width: 17em; font: 500 clamp(1.9rem, 3.5vw, 3.3rem)/1.06 var(--sans); letter-spacing: -0.042em; text-indent: -0.4em; text-wrap: balance; }
.room__cap { max-width: 22em; font-size: 15px; line-height: 1.55; color: var(--grey); }
.room__cap b { font-weight: 500; color: var(--paper); }
@media (max-width: 860px) { .room__body { grid-template-columns: minmax(0, 1fr); } .room__quote { text-indent: -0.38em; padding-left: 0.38em; } }
@media (max-width: 700px) { .room__film { aspect-ratio: 4 / 3; } }

/* ---------- on stage and on air: a row of photos that scrolls sideways, snapping to each one; the first lines up
   with the page's left edge and the row runs off the right ---------- */
.reel__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: 24px var(--gutter); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.reel__nav { display: flex; gap: 8px; }
.reel__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%; background: none; color: var(--paper); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease; }
.reel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reel__btn:hover:not(:disabled) { background: var(--paper); color: #000; }
.reel__btn:disabled { opacity: 0.3; cursor: default; }
.reel { --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2)); list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 480px); gap: 20px; padding: 0 var(--edge) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; }
.reel::-webkit-scrollbar { display: none; }
.reel__item { display: grid; align-content: start; gap: 8px; scroll-snap-align: start; }
.reel__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; border-radius: 3px; filter: grayscale(1) contrast(1.05); transition: filter 0.5s ease; }
.reel__item:hover img { filter: none; }
.reel__tag { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--gold); }
.reel__title { font: 600 18px/1.3 var(--sans); letter-spacing: -0.02em; }
.reel__line { font-size: 15px; line-height: 1.5; color: var(--text-3); }
.reel__ph, .voice__ph { display: grid; place-items: center; margin-bottom: 8px; padding: 24px; border: 1px dashed rgba(242, 194, 123, 0.5); border-radius: 3px; font: 400 12px/1.6 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: var(--gold); }
.reel__ph { aspect-ratio: 4 / 3; }
.voice__ph { aspect-ratio: 9 / 16; }
@media (max-width: 860px) { .reel__head { grid-template-columns: minmax(0, 1fr) auto; } .reel__head .lede { grid-row: 2; grid-column: 1 / -1; } .reel__nav { grid-row: 1; grid-column: 2; } }

/* ---------- why now: the statement, the 260 photo, three figures ---------- */
.statement { max-width: 9.5em; font: 800 clamp(3.1rem, 7.4vw, 7.6rem)/0.88 var(--sans); letter-spacing: -0.065em; text-wrap: balance; }
@media (max-width: 560px) { .statement { letter-spacing: -0.055em; line-height: 0.92; } }
.why { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px var(--gutter); align-items: start; margin-top: clamp(56px, 7vw, 96px); }
.why__pic img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; filter: grayscale(1) contrast(1.06); }
.why__pic figcaption { margin-top: 12px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.why__list { list-style: none; border-top: 1px solid var(--rule-2); }
.why__list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 28px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.why__fig { font: 800 clamp(2.8rem, 4.6vw, 4.4rem)/0.86 var(--sans); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.why__fig span { display: block; margin-top: 12px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.why__line { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 960px) { .why { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .why__list li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- what you leave with: a hairline grid, one mark, one line and the tickets that include it ---------- */
.kit__title { text-align: center; margin-bottom: 18px; }
.kit__lede { margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.kit { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.kit li { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: clamp(28px, 3vw, 40px); background: var(--dusk); transition: background-color 0.3s ease; }
.kit li:hover { background: #100f15; }
.kit__mark { width: 38px; height: 38px; margin-bottom: 18px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.kit h3 { font: 600 clamp(1.15rem, 1.5vw, 1.35rem)/1.25 var(--sans); letter-spacing: -0.024em; }
.kit p { font-size: 16px; line-height: 1.55; color: var(--text-3); text-wrap: pretty; }
.kit__tag { justify-self: start; margin-top: 14px; padding: 6px 9px; border: 1px solid var(--rule-2); border-radius: 2px; font: 400 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.kit__tag--gold { color: var(--gold); border-color: rgba(242, 194, 123, 0.45); }
.kit__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; margin-top: clamp(48px, 5vw, 64px); }
@media (max-width: 960px) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kit { grid-template-columns: minmax(0, 1fr); } }

/* ---------- tickets ---------- */
.tix { --g: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); align-items: stretch; }
.tik { position: relative; display: flex; flex-direction: column; min-width: 0; background: #0d0d10; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.tik--vip { background: #15130f; border-color: rgba(242, 194, 123, 0.42); }
/* One render across three tickets: every band holds the whole strip, shifted by its ticket's place in the row */
.tik__art { position: relative; height: clamp(150px, 15vw, 196px); overflow: hidden; background: #0b0b1a; }
.tik__art img { position: absolute; top: 0; left: calc(-1 * (100% + var(--g) + 2px) * var(--i)); width: calc(300% + 2 * var(--g) + 4px); max-width: none; height: 100%; object-fit: cover; object-position: 50% 44%; }
.tik__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(13, 13, 16, 0.9) 100%); }
.tik__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 24px 28px 0; }
.tik__head h2, .tik__head h3 { font: 600 20px/1.2 var(--sans); letter-spacing: -0.025em; }
.tik__head span { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.tik--vip .tik__head span { color: var(--gold); }
.tik__price { padding: 14px 28px 0; font: 800 clamp(3.4rem, 5.4vw, 4.8rem)/0.9 var(--sans); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.tik__for { padding: 16px 28px 0; font-size: 15px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.tik__list { list-style: none; margin: 22px 28px 0; border-top: 1px solid var(--rule); }
.tik__list li { position: relative; padding: 11px 0 11px 24px; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.4; color: #e6e0d8; }
.tik__list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.75 7.25l2.9 2.9 5.6-6.4' fill='none' stroke='%23f2c27b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% 50% / contain; }
.tik__list li.tik__no::before { top: 21px; width: 10px; height: 1px; background: rgba(255, 255, 255, 0.28); }
.tik__foot { display: grid; gap: 14px; margin-top: auto; padding: 28px; }
.tik__foot .btn { width: 100%; }
.fine { font-size: 13px; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.tix__note { margin-top: 28px; font-size: 14px; line-height: 1.55; color: var(--grey); }
.tix__credit { display: block; margin-top: 4px; font-size: 12px; color: #6f6a65; }
@media (max-width: 860px) {
  .tix { grid-template-columns: minmax(0, 1fr); --g: 0px; row-gap: 16px; }
  .tik__art { height: 120px; }
  .tik__art img { left: calc(-100% * var(--i)); width: 300%; }
  .tik--vip { order: -1; }
}

/* ---------- clients ---------- */
.voices { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.voice { display: grid; gap: 14px; align-content: start; }
.voice .player__poster { filter: grayscale(1) contrast(1.05); transition: filter 0.5s ease; }
.voice .player:hover .player__poster, .voice .player:focus-within .player__poster { filter: none; }
.voice__quote { margin-top: 6px; text-indent: -0.42em; font: 500 clamp(16px, 1.3vw, 19px)/1.38 var(--sans); letter-spacing: -0.018em; color: #efe9e1; text-wrap: pretty; }
.voice__who { font-size: 14px; line-height: 1.4; color: var(--grey); }
.voice__who b { display: block; font-weight: 500; color: #ddd7cf; }
@media (max-width: 960px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
.results { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px var(--gutter); align-items: end; margin-top: clamp(80px, 9vw, 120px); padding-top: 28px; border-top: 1px solid var(--rule-2); }
.results__head { font-size: 15px; line-height: 1.5; color: var(--grey); max-width: 22em; }
.results__head b { display: block; margin-bottom: 4px; font-weight: 600; font-size: 17px; color: var(--paper); }
.results__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.results__row dt { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.results__row dd { margin-top: 10px; font: 800 clamp(2.4rem, 4.6vw, 4.4rem)/0.9 var(--sans); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.results .textlink { grid-column: 2; justify-self: start; margin-top: 12px; }
.results__fine { grid-column: 2; font-size: 13px; line-height: 1.5; color: var(--grey); }
@media (max-width: 860px) {
  .results { grid-template-columns: minmax(0, 1fr); }
  .results__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .results .textlink, .results__fine { grid-column: 1; }
}

/* ---------- video players ---------- */
.player { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #050506; }
.player--tall { aspect-ratio: 9 / 16; border-radius: 3px; box-shadow: 0 0 0 1px var(--rule); }
.player__poster, .player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player picture { position: absolute; inset: 0; }
.player video { background: #000; object-fit: contain; }
.player video::cue { font-family: Geist, system-ui, sans-serif; color: #f4efe7; background: rgba(0, 0, 0, 0.72); }
.player__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 239, 231, 0.95); cursor: pointer; transition: background-color 0.25s ease, transform 0.35s var(--spring); }
.player__play span { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -7px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #000; }
.player__play:hover { background: #fff; transform: scale(1.06); }
.player--tall .player__play { top: auto; left: 16px; bottom: 16px; width: 60px; height: 60px; margin: 0; }
.player--tall .player__play span { margin: -10px 0 0 -6px; border-width: 10px 0 10px 17px; }
.player__len { position: absolute; top: 12px; right: 12px; padding: 4px 7px; border-radius: 2px; font: 400 12px/1 var(--mono); color: #f4efe7; background: rgba(0, 0, 0, 0.6); }
.player.is-playing .player__poster, .player.is-playing picture, .player.is-playing .player__play, .player.is-playing .player__len { display: none; }
@media (max-width: 700px) { .room__film .player__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; } }

/* ---------- the afternoon, in one row ---------- */
.day { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule-2); }
.day li { display: grid; align-content: start; gap: 8px; padding: 18px 16px 0 0; }
.day li + li { padding-left: 16px; border-left: 1px solid var(--rule); }
.day time { font: 600 clamp(1.3rem, 1.8vw, 1.7rem)/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.day span { font-size: 14px; line-height: 1.4; color: var(--text-3); }
.day__part time { color: var(--gold); }
.day__part span { color: var(--text-2); }
@media (max-width: 760px) {
  .day { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .day li, .day li + li { grid-template-columns: 4.2rem minmax(0, 1fr); align-items: baseline; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .day time { font-size: 1.15rem; }
  .day span { font-size: 15px; }
}

/* ---------- hosts: three signed portraits side by side; the one you point at (or tap) grows and shows his part of the
   afternoon, his record and his photos ---------- */
.panels { display: flex; gap: 10px; height: clamp(500px, 68vh, 660px); }
.panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: #070707; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; outline-offset: 3px; transition: flex-grow 0.8s var(--spring), border-color 0.4s ease; }
.panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 63% 24%; filter: brightness(0.76) contrast(1.05); transform: scale(1.1); transform-origin: 50% 0%; transition: transform 1.2s var(--spring), filter 0.8s ease, width 0.8s var(--spring); }
.panel > img.panel__shift { object-position: 60% 24%; }  /* Hyrum's portrait is wide: keep his face and signature */
.panel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 75% at 0% 100%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 72%); pointer-events: none; }
.panel__spine { position: absolute; left: 20px; bottom: 24px; z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 clamp(18px, 1.6vw, 24px)/1 var(--sans); letter-spacing: -0.03em; white-space: nowrap; transition: opacity 0.35s ease; }
.panel__spine small { display: none; }
.panel__info { position: absolute; left: 0; right: 50%; bottom: 0; z-index: 2; padding: 0 32px 32px; opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.7s var(--spring); }
.panel h3 { margin-bottom: 10px; font: 600 clamp(1.5rem, 2vw, 2.1rem)/0.98 var(--sans); letter-spacing: -0.045em; }
.panel__role { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--gold); }
.panels.has-active .panel { flex-grow: 0.75; }
.panels .panel.is-active { flex-grow: 3.2; border-color: var(--rule-2); }
.panel.is-active > img { width: 50%; object-position: 64% 20%; filter: brightness(1) contrast(1.05); transform: scale(1); }
.panel.is-active > img.panel__shift { object-position: 60% 20%; }
.panel.is-active .panel__spine { opacity: 0; }
.panel.is-active .panel__info { opacity: 1; transform: none; transition-delay: 0.18s; }
.panel__proof { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 6px; background: #070707; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.panel.is-active .panel__proof { opacity: 1; visibility: visible; transition: opacity 0.6s ease 0.3s, visibility 0s; }
.panel__part { padding: 14px 12px 12px; border-bottom: 1px solid var(--rule); }
.panel__when { font: 400 11px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
.panel__topic { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--text-3); text-wrap: pretty; }
.panel__topic b { display: block; margin-bottom: 2px; font-weight: 600; font-size: 16px; color: var(--paper); }
.proof__pics { display: grid; gap: 6px; min-height: 0; }
.proof__pics--three { grid-template: "a a" minmax(0, 1.25fr) "b c" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); }
.proof__pics--three figure:first-child { grid-area: a; }
.proof__pics--two { grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); }
.proof__pics figure { position: relative; min-height: 0; overflow: hidden; border-radius: 2px; }
.proof__pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(1) contrast(1.06); }
.proof__pics img.proof__topleft { object-position: 0% 0%; filter: none; }
.proof__pics img.proof__face { object-position: 50% 22%; }
.proof__pics figure.proof__screen { background: #fff; }
.panel__creds { list-style: none; padding: 2px 12px 6px; }
.panel__creds li { padding: 9px 0; border-top: 1px solid var(--rule); font: 500 14px/1.35 var(--sans); letter-spacing: -0.01em; color: #e8e2da; }
.panel__creds li:first-child { border-top: 0; }
.panel__proof--text { grid-template-rows: auto auto; align-content: space-between; padding: 30px 32px; }
.panel__proof--text .panel__part { padding: 0 0 20px; }
.panel__proof--text .panel__topic { font-size: clamp(15px, 1.25vw, 17px); }
.panel__proof--text .panel__topic b { font-size: clamp(17px, 1.5vw, 21px); }
.panel__proof--text .panel__creds { padding: 0; }
.panel__proof--text .panel__creds li { padding: 16px 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.3; letter-spacing: -0.02em; }
.panels__hint { margin-top: 16px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
@media (max-width: 760px) {
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; height: 112px; transition: height 0.7s var(--spring); }
  .panel::after { opacity: 0; transition: opacity 0.4s ease; }
  .panel > img, .panel > img.panel__shift { right: auto; width: 112px; height: 112px; object-position: 50% 30%; filter: contrast(1.05); transform: none; }
  .panel > img.panel__shift { object-position: 57% 30%; }
  .panel__spine { writing-mode: horizontal-tb; transform: translateY(-50%); top: 50%; bottom: auto; left: 132px; right: 16px; font-size: 20px; white-space: normal; }
  .panel__spine small { display: block; margin-top: 8px; font: 400 11px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
  .panel::before { content: "+"; position: absolute; right: 18px; top: 50%; z-index: 2; transform: translateY(-50%); font: 300 26px/1 var(--sans); color: var(--text-3); transition: opacity 0.3s ease; }
  .panel__info { display: none; }
  .panels .panel.is-active { height: 880px; }
  .panel.is-active::after { opacity: 1; }
  .panel.is-active::before { opacity: 0; }
  .panel.is-active > img, .panel.is-active > img.panel__shift { width: 100%; height: 38%; object-position: 50% 22%; }
  .panel.is-active .panel__spine { opacity: 1; top: auto; bottom: calc(62% + 16px); left: 20px; transform: none; }
  .panel.is-active .panel__spine small { display: none; }
  .panel__proof { top: auto; width: 100%; height: 62%; }
  .panels .panel.is-active:has(.panel__proof--text) { height: 720px; }
  .panel.is-active:has(.panel__proof--text) > img { height: 46%; }
  .panel.is-active:has(.panel__proof--text) .panel__spine { bottom: calc(54% + 16px); }
  .panel__proof--text { height: 54%; padding: 18px 20px; }
  .panel__proof--text .panel__part { padding-bottom: 12px; }
  .panel__proof--text .panel__creds li { padding: 10px 0; font-size: 15px; }
}

/* ---------- the Valley, in type ---------- */
.valley { padding-block: clamp(88px, 10vw, 140px); border-top: 1px solid var(--rule); text-align: center; }
.valley__title { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
/* no separators to strand at a line end: the cities alternate between paper and a dim tone instead */
.valley__cities { max-width: 17em; margin: 24px auto 0; font: 600 clamp(2rem, 4.8vw, 4.6rem)/1.08 var(--sans); letter-spacing: -0.05em; word-spacing: 0.12em; text-wrap: balance; }
.valley__cities span:nth-child(even) { color: #6b6661; }
.valley__why { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); margin-top: clamp(64px, 7vw, 104px); text-align: left; }
.valley__why li { padding-top: 24px; border-top: 1px solid var(--rule-2); }
.valley__why h3 { font: 600 clamp(1.1rem, 1.4vw, 1.3rem)/1.3 var(--sans); letter-spacing: -0.024em; }
.valley__why p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-3); text-wrap: pretty; }
@media (max-width: 860px) { .valley__why { grid-template-columns: minmax(0, 1fr); } }

/* ---------- questions ---------- */
.acc { border-top: 1px solid var(--rule-2); }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary { list-style: none; display: flex; align-items: baseline; gap: 20px; padding: 22px 0; cursor: pointer; font: 500 clamp(1.15rem, 1.6vw, 1.4rem)/1.3 var(--sans); letter-spacing: -0.026em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary span { flex: 1; }
.acc summary em { font: 400 12px/1.3 var(--mono); font-style: normal; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.acc summary::after { content: "+"; flex: none; width: 1em; text-align: center; font: 300 26px/1 var(--sans); color: var(--text-3); transition: transform 0.3s ease; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc p { max-width: 38em; padding-bottom: 24px; color: var(--text-3); }
.acc details[open] > p { animation: fadeup 0.45s var(--ease) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- closing ---------- */
.close { padding-block: clamp(120px, 14vw, 200px) clamp(96px, 10vw, 140px); border-top: 1px solid var(--rule); text-align: center; overflow: hidden; }
.close__title { font: 800 clamp(2.9rem, 8vw, 8rem)/0.9 var(--sans); letter-spacing: -0.065em; text-wrap: balance; }
.t-spring { position: relative; display: inline-block; padding-right: 0.05em; }
.close__date { margin-top: 32px; font-size: 15px; color: var(--grey); }
.close__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; margin-top: 36px; }
.signed { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px clamp(32px, 6vw, 88px); margin-top: clamp(72px, 8vw, 112px); }
.signed li { display: grid; justify-items: center; gap: 12px; }
.signed img { width: auto; height: clamp(40px, 4.2vw, 56px); opacity: 0.92; }
.signed li:first-child img { height: clamp(32px, 3.3vw, 44px); margin-block: 6px; }  /* Cam's wordmark is wider and heavier */
.signed span { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.close__cal { margin-top: 56px; font-size: 14px; }
.close__cal a { color: var(--text-2); text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.3); }
.close__cal a:hover { color: var(--paper); text-decoration-color: currentColor; }

/* ---------- the tickets page ---------- */
.tpage__head { padding-block: clamp(136px, 15vw, 200px) clamp(48px, 6vw, 80px); }
.tpage__when { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.tpage__title { margin-top: 22px; }
.tpage__head .lede { margin-top: 28px; }
.tpage__tix { padding-bottom: clamp(80px, 9vw, 128px); }
.foot a { color: inherit; text-underline-offset: 4px; }

/* the three tickets side by side: one row per thing you get; VIP's column carries a faint gold */
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { padding: 14px 10px; border-top: 1px solid var(--rule); vertical-align: middle; }
.compare thead > tr > * { padding-bottom: 18px; border-top: 0; vertical-align: bottom; }
.compare thead td { width: 40%; }
.compare thead th { text-align: center; font-weight: 400; }
.compare thead th span { display: block; font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.compare thead th b { display: block; margin-top: 10px; font: 800 clamp(1.7rem, 2.6vw, 2.4rem)/1 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.compare thead .c-vip span { color: var(--gold); }
.compare tbody th { padding-left: 0; text-align: left; font: 500 15px/1.4 var(--sans); color: var(--text-2); }
.compare tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.compare td { text-align: center; }
.compare td.t { font-size: 13px; line-height: 1.35; color: var(--text-3); }
.compare svg { width: 16px; height: 16px; color: var(--paper); vertical-align: middle; }
.compare .no { display: inline-block; width: 12px; height: 1px; background: rgba(255, 255, 255, 0.28); vertical-align: middle; }
.compare .c-vip { background: rgba(242, 194, 123, 0.06); }
.compare tfoot td { padding-top: 20px; border-top: 0; }
.compare tfoot .btn { width: 100%; min-height: 46px; padding: 0 12px; font-size: 14px; }
@media (max-width: 700px) {
  .compare thead td { width: 34%; }
  .compare th, .compare td { padding-inline: 4px; }
  .compare tbody th { font-size: 13px; line-height: 1.35; }
  .compare thead th b { font-size: 1.3rem; }
  .compare tfoot { display: none; }
}

/* ---------- the seat card: a quiet card in the corner (a sheet on phones), once per visitor ---------- */
.nudge { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: min(392px, calc(100vw - 32px)); padding: 28px 28px 24px; background: #0f0e12; border: 1px solid rgba(242, 194, 123, 0.35); border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(24px); transition: opacity 0.35s ease, transform 0.5s var(--ease); }
.nudge.on { opacity: 1; transform: none; }
.nudge__x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer; }
.nudge__x:hover { color: var(--paper); background: rgba(255, 255, 255, 0.06); }
.nudge__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nudge__eyebrow { font: 400 11px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
.nudge__title { margin-top: 14px; padding-right: 24px; font: 800 clamp(1.8rem, 2.4vw, 2.2rem)/0.95 var(--sans); letter-spacing: -0.05em; }
.nudge .seats { margin-top: 16px; font-size: 13px; }
.nudge__line { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.nudge__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.nudge__cta .btn { min-height: 48px; padding: 0 22px; font-size: 14px; }
.nudge__no { padding: 6px 0; border: 0; background: none; font: 500 14px/1 var(--sans); color: var(--text-2); cursor: pointer; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(244, 239, 231, 0.35); }
@media (max-width: 760px) {
  .nudge { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); width: auto; padding: 24px 20px 20px; }
  body.nudging .dock { transform: translateY(140%); }
}

/* ---------- footer and the phone dock ---------- */
.foot { border-top: 1px solid var(--rule); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; padding-block: 32px max(32px, env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--grey); }
.dock { display: none; }
@media (max-width: 760px) {
  .dock { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 18px; background: rgba(12, 12, 15, 0.94); border: 1px solid var(--rule); border-radius: 12px; transform: translateY(140%); transition: transform 0.45s var(--ease); }
  .dock.on { transform: none; }
  .dock__line { font: 500 13px/1.25 var(--sans); color: var(--text-2); }
  .dock__btn { min-height: 46px; padding: 0 20px; font-size: 14px; }
  .foot__row { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- reveal: each block rises in once as it reaches the screen, grids one child after another. The script
   adds .reveal and then .in (nothing is hidden without it), and --d is the child's place in its row. ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 1.1s var(--spring); transition-delay: calc(var(--d, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .acc details[open] > p { animation: none; }
  .player__play { transition: none; }
  .js .open__pre, .js .open__cta, .js .open .seats, .js .open__hosts, .js .t-small, .js .open__bill { animation: none; opacity: 1; }
  .js .open .seats__dots i { animation: none; }
  .js .open .t-big .ch { opacity: 1; transition: none; }
  .t-stack { display: none; }
  .dock, .nudge, .reel__item img, .panel, .panel > img, .panel__info { transition: none; }
}