/* jetpackcomedy.com. Built from the 2026-10 redesign prototype (jetpackcomedy repo, 2026-10-20-micdrop-widgets/proto2).
   Brand: ink #0e0a0b, cream #F5F0EB, red #E60A0C, gold #d4a96a, Inter. Micdrop radius scale: buttons/inputs 8px, cards/photos 12px, badges 4px.
   j-*  the site.   mw-*  the two Micdrop widget slots (stand-ins drawn in the widget's own layout until the real embeds go in). */
:root {
  --ink: #0e0a0b; --ink2: #161112; --ink3: #211a1b; --ink4: #2c2324;
  --cream: #F5F0EB; --muted: #ada39b; --dim: #948a83;
  --red: #E60A0C; --red2: #c80709; --gold: #d4a96a;
  --line: rgba(245, 240, 235, .12); --line2: rgba(245, 240, 235, .2);
  --hdr: 64px; --labh: 0px;
  --font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html { scroll-padding-top: calc(var(--labh) + var(--hdr) + 12px); }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss03'; }
#app { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure, blockquote, address { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
em { font-style: normal; color: var(--red); }
.j-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .j-wrap { padding: 0 20px; } }

/* ---------- buttons ---------- */
.j-btn, .mw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 8px;
  background: var(--red); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; border: 0; cursor: pointer; transition: background .15s; }
.j-btn:hover, .mw-btn:hover { background: var(--red2); }
.j-btn.lg, .mw-btn.lg { height: 52px; padding: 0 28px; font-size: 16px; }
.j-btn.ghost, .mw-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line2); color: var(--cream); }
.j-btn.ghost:hover, .mw-btn.ghost:hover { background: var(--ink3); }
.mw-btn.off { background: var(--ink3); color: var(--dim); cursor: default; }
.mw-btn.sm { height: 38px; padding: 0 16px; font-size: 14px; }
.mw-btn.block { display: flex; width: 100%; }

/* ---------- header ---------- */
.j-hdr { position: sticky; top: 0; z-index: 40; background: rgba(14, 10, 11, .95); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line); }
.j-hdr-in { height: var(--hdr); display: flex; align-items: center; gap: 28px; }
.j-logo img { height: 22px; width: auto; }
.j-nav { display: flex; gap: 4px; margin-left: auto; }
.j-nav a { font-size: 12px; font-weight: 500; color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.j-nav a:hover { color: var(--cream); background: var(--ink3); }
.j-hdr-cta { display: flex; align-items: center; gap: 14px; }
.j-hdr-date { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.j-hdr-cta .j-btn { height: 40px; padding: 0 18px; font-size: 14px; }
.j-menu-btn { display: none; width: 44px; height: 44px; margin-right: -8px; align-items: center; justify-content: center; border-radius: 8px; }
.j-menu { display: none; }
@media (max-width: 900px) {
  :root { --hdr: 56px; }
  .j-nav, .j-hdr-cta { display: none; }
  .j-menu-btn { display: inline-flex; margin-left: auto; }
  .j-logo img { height: 19px; }
  .j-menu-open .j-menu { display: grid; padding: 8px 12px 16px; border-top: 1px solid var(--line); }
  .j-menu a { padding: 12px 8px; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--line); }
  .j-menu a:last-child { border: 0; }
}

/* ---------- shared type ---------- */
.j-sec { padding: 96px 0; }
.j-sec h2, .c-sec h2 { font-size: 40px; line-height: 1.08; letter-spacing: -.03em; font-weight: 800; margin-bottom: 12px; text-wrap: balance; }
.j-sub { color: var(--muted); margin-bottom: 32px; }
.j-lede { font-size: 18px; color: var(--muted); line-height: 1.45; }
.j-body { font-size: 18px; line-height: 1.6; color: #d9d1ca; max-width: 60ch; }
.j-stars { display: inline-flex; gap: 2px; color: var(--gold); vertical-align: -1px; }
@media (max-width: 720px) {
  .j-sec { padding: 64px 0; }
  .j-sec h2, .c-sec h2 { font-size: 30px; }
  .j-lede { font-size: 16px; }
  .j-body { font-size: 17px; }
}

/* ---------- proof: the rating and the press under the lede, no bar (Peet, 2026-10-21) ---------- */
.j-hero-proof { margin-top: 22px; }
.j-proof-g { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.j-proof-g b { color: var(--cream); font-weight: 700; margin-right: 4px; }
.j-proof-g a { color: inherit; }
.j-proof-g a::before { content: '·'; margin-right: 8px; }
.j-proof-g a:hover b { text-decoration: underline; }
.j-proof-press { display: flex; align-items: center; gap: 30px; margin-top: 18px; }
.j-proof-press img { display: block; width: auto; height: 28px; border-radius: 3px; }
.j-proof-press img:first-child { height: 46px; }
.j-proof-press img[alt="The New York Times"] { height: 24px; }
@media (max-width: 720px) {
  .j-hero-proof { margin-top: 16px; }
  .j-proof-g { font-size: 14px; }
  .j-proof-press { gap: 20px; margin-top: 14px; }
  .j-proof-press img { height: 22px; }
  .j-proof-press img:first-child { height: 36px; }
  .j-proof-press img[alt="The New York Times"] { height: 18px; }
}

/* ---------- reviews ---------- */
.j-rev { background: var(--ink2); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.j-rev blockquote { font-size: 18px; line-height: 1.5; letter-spacing: -.005em; }
.j-rev figcaption { font-size: 14px; color: var(--muted); margin-top: auto; }

/* ---------- FAQ ---------- */
.j-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 28px; }
.j-faq-item { border-top: 1px solid var(--line); padding: 22px 0; }
.j-faq-q { display: flex; width: 100%; text-align: left; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; cursor: default; }
.j-faq-x { display: none; }
.j-faq-a { color: #cfc6be; margin-top: 8px; font-size: 16px; line-height: 1.55; max-width: 52ch; }
@media (max-width: 720px) {
  .j-faq-list { grid-template-columns: 1fr; margin-top: 16px; }
  .j-faq-item { padding: 0; }
  .j-faq-q { padding: 18px 0; font-size: 17px; cursor: pointer; }
  .j-faq-x { display: block; flex: none; width: 14px; height: 14px; margin-top: 4px; position: relative; }
  .j-faq-x::before, .j-faq-x::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--muted); border-radius: 2px; transition: transform .2s; }
  .j-faq-x::after { transform: rotate(90deg); }
  .j-faq-item.open .j-faq-x::after { transform: rotate(0); }
  .j-faq-a { display: none; margin: -6px 0 18px; }
  .j-faq-item.open .j-faq-a { display: block; }
}

/* ---------- find us ---------- */
.j-find { background: var(--ink2); border-top: 1px solid var(--line); }
.j-find-in { display: grid; grid-template-columns: 1fr 1.15fr; grid-template-rows: auto auto; gap: 24px 56px; align-items: start; }
.j-find-txt { grid-row: span 2; }
.j-find-lead { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin-bottom: 20px; }
.j-find address { font-size: 18px; line-height: 1.5; }
.j-find-when { color: var(--muted); margin: 6px 0 24px; }
.j-addr { color: inherit; text-decoration: none; }
.j-addr span { text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.j-addr:hover span { text-decoration-color: currentColor; }
.j-addr svg { display: inline-block; vertical-align: -2px; margin-left: 6px; color: var(--muted); transition: color .2s, transform .2s; }
.j-addr:hover svg { color: currentColor; transform: translate(1px, -1px); }
.j-find-park { font-size: 15px; color: var(--muted); line-height: 1.55; max-width: 48ch; }
.j-find-park b { color: var(--cream); display: block; margin-bottom: 2px; }
.j-find-map { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink3); border: 1px solid var(--line); }
.j-find-map iframe { width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.35) brightness(.9) contrast(.95); }
.j-find-photo { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 7; }
.j-find-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .j-find-in { grid-template-columns: 1fr; }
  .j-find-txt { grid-row: auto; }
  .j-find-lead { font-size: 19px; }
  .j-find-map { aspect-ratio: 4 / 3; border-radius: 12px; }
  .j-find-photo { aspect-ratio: 16 / 9; border-radius: 12px; }
}

/* ---------- footer ---------- */
.j-foot { border-top: 1px solid var(--line); padding: 56px 0 64px; font-size: 15px; color: var(--muted); }
.j-foot-in { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 1.5fr; gap: 32px; align-items: start; }
.j-foot-brand img { height: 22px; width: auto; margin-bottom: 12px; }
.j-foot-col { display: grid; gap: 6px; }
.j-foot-links { display: grid; }
.j-foot-links a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cream); }
.j-signup label { display: block; color: var(--cream); font-weight: 600; margin-bottom: 10px; }
.j-signup div { display: flex; gap: 8px; }
.j-signup-msg { margin-top: 10px; font-size: 16px; color: var(--cream); }
.j-signup button:disabled { opacity: .6; }
.j-signup input { flex: 1; min-width: 0; height: 44px; border-radius: 8px; border: 1px solid var(--line2); background: var(--ink2); color: var(--cream); padding: 0 18px; font: inherit; }
@media (max-width: 1000px) { .j-foot-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .j-foot-in { grid-template-columns: 1fr; gap: 24px; } .j-foot { padding-bottom: 120px; } }

/* ---------- sticky Buy bar (phone) ---------- */
.j-buybar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(33, 26, 27, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line2); border-radius: 12px; padding: 8px 8px 8px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5); transform: translateY(140%); transition: transform .25s ease; }
.j-buybar b { display: block; font-size: 15px; letter-spacing: -.01em; }
.j-buybar small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; }
.j-buybar > div { min-width: 0; }
.j-buybar .j-btn { height: 44px; }
@media (max-width: 900px) { .j-buybar { display: flex; } .j-buybar.on { transform: none; } }


/* =============================== MICDROP WIDGETS ================================ */
.mw { --mw-surface: #191314; --mw-line: rgba(245, 240, 235, .12); container-type: inline-size; font-family: Inter, system-ui, sans-serif; color: var(--cream); }
.mw-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: 2px; }
.mw-badge.sold { background: #3a3132; color: #d9d1ca; }
.mw-badge.fast { background: rgba(212, 169, 106, .18); color: #e7c48f; }
.mw-badge.left { background: rgba(212, 169, 106, .18); color: #e7c48f; }
.mw-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 0 8px; font-size: 13px; color: var(--dim); }
.mw-foot span { display: inline-flex; align-items: center; gap: 6px; }
.mw-foot b { color: var(--muted); font-weight: 800; letter-spacing: -.01em; }
.mw-empty { border: 1px solid var(--mw-line); border-radius: 12px; padding: 40px 12px; text-align: center; background: var(--mw-surface); }
.mw-empty b { display: block; font-size: 20px; margin-bottom: 6px; }
.mw-empty p { color: var(--muted); max-width: 44ch; margin: 0 auto 18px; }
.mw-empty .mw-btn { height: 40px; }
.mw-empty:not(:has(.mw-btn)) p { margin-bottom: 0; }
.mw-k { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.mw-av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--cream);
  background: linear-gradient(145deg, #4a2526, #2a1c1d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mw-muted { color: var(--muted); }
.mw-small { font-size: 13px; color: var(--muted); }


/* --- Featured, changed: the Next show block --- */
.mw-next { background: var(--mw-surface); border: 1px solid var(--line2); border-radius: 12px; padding: 28px; box-shadow: 0 12px 60px rgba(0, 0, 0, .45); }
.mw-next-top { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #ff5a5c; }
.mw-next-date { font-size: 44px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 6px 0 6px; font-variant-numeric: tabular-nums; }
.mw-next-title { font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; overflow-wrap: anywhere; }
.mw-next-facts, .mw-pick-when { color: var(--muted); font-size: 15px; }
.mw-next-facts span { display: block; }
.mw-next-lu { margin: 22px 0 24px; }
.mw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mw-chips li { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--ink3); font-size: 12px; font-weight: 600; max-width: 100%; }
.mw-chips .mw-av { width: 28px; height: 28px; font-size: 11px; }
.mw-chips .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mw-tba { color: var(--muted); font-size: 15px; }
.mw-next-buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--mw-line); }
.mw-price b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mw-price { white-space: nowrap; display: flex; flex-direction: column; line-height: 1.1; }
.mw-price span { font-size: 13px; color: var(--muted); margin-top: 4px; }
.mw-soldnote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--mw-line); }
@container (max-width: 420px) {
  .mw-next-date { font-size: 36px; }
  .mw-next-buy .mw-btn { flex: 1; }
}
@media (max-width: 720px) { .mw-next { padding: 22px; border-radius: 12px; } }

/* --- List, changed: compact rows --- */
.mw-row { display: grid; grid-template-columns: 88px 1fr auto auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--mw-line); }
.mw-row:last-child { border-bottom: 1px solid var(--mw-line); }
.mw-row .d span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.mw-row .d b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.mw-row .l { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mw-row .ttl { font-size: 15px; overflow-wrap: anywhere; }
.mw-row .nm { color: var(--muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mw-row .p { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.mw-row.sold .d, .mw-row.sold .l, .mw-row.sold .p { opacity: .5; }
.mw-only { color: var(--muted); padding: 18px 0; border-top: 1px solid var(--mw-line); border-bottom: 1px solid var(--mw-line); }
@container (max-width: 560px) {
  .mw-row { grid-template-columns: 64px 1fr auto; gap: 4px 14px; padding: 16px 0; }
  .mw-row .d b { font-size: 17px; }
  .mw-row .p { display: none; }
  .mw-row .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
}

@keyframes mw-fade { from { opacity: 0; } }

/* =============================== A · Ticket first ================================ */
.a-hero { position: relative; padding: 56px 0 88px; }
.a-hero-media { position: absolute; top: 0; bottom: 0; right: 0; width: 54%; overflow: hidden; }
.a-hero-media picture { display: contents; }
.a-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(14, 10, 11, .35) 22%, transparent 45%), linear-gradient(0deg, var(--ink) 0%, transparent 25%); }
.a-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 38%; }
.a-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 640px); }
.a-hero-copy h1 { font-size: 80px; line-height: .98; letter-spacing: -.045em; font-weight: 800; margin-bottom: 20px; }
.a-hero-copy .j-lede { margin-bottom: 36px; }
.a-hero-ticket { max-width: 520px; }
/* A3: no card, the date sits right under the headline */
.mw-next.flat { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.mw-next.flat .mw-next-date { font-size: 52px; }
.mw-next-sub { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.a-a3 .a-hero-copy .j-lede { margin-bottom: 28px; }
.a-a3 .a-hero-ticket { padding-top: 26px; border-top: 1px solid var(--line2); }
.a-static { background: var(--ink2); border: 1px solid var(--line2); border-radius: 12px; padding: 28px; }
.a-static-t { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.a-static-m { color: var(--muted); margin: 4px 0 22px; }
.a-shows .mw-tonight, .a-shows .mw-rows { margin-top: 8px; }
.a-room-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 560px; margin-bottom: 56px; }
.a-room-grid figure { border-radius: 12px; overflow: hidden; }
.a-room-grid .big { grid-row: span 2; }
.a-room-grid img { width: 100%; height: 100%; object-fit: cover; }
.a-room-txt { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; }
.a-room-txt h2 { grid-row: span 2; }
.a-rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
@media (max-width: 900px) {
  .a-hero { padding: 0 0 48px; }
  .a-hero-media { position: relative; width: auto; height: min(46vh, 420px); }
  .a-hero-img { object-position: 50% 30%; }
  .mw-next.flat .mw-next-date { font-size: 40px; }
  .a-hero-media::after { background: linear-gradient(0deg, var(--ink) 4%, rgba(14, 10, 11, .55) 38%, transparent 62%); }
  .a-hero-grid { grid-template-columns: 1fr; margin-top: -132px; }
  .a-hero-copy h1 { font-size: 42px; margin-bottom: 10px; }
  .a-hero-copy .j-lede { margin-bottom: 22px; }
  .a-hero-ticket { max-width: none; }
  .a-static { padding: 22px; border-radius: 12px; }
  .a-static .j-btn { width: 100%; }
  .a-room-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 160px; height: auto; margin-bottom: 36px; }
  .a-room-grid .big { grid-column: span 2; grid-row: auto; }
  .a-room-grid figure { border-radius: 12px; }
  .a-room-txt { grid-template-columns: 1fr; }
  .a-rev-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 20px -20px 0; padding: 0 20px; scroll-padding: 0 20px; scrollbar-width: none; }
  .a-rev-grid .j-rev { flex: 0 0 82%; scroll-snap-align: start; }
}


/* ---------- motion (motion.js) — Micdrop's landing timings and --ease-smooth ---------- */
:root { --ease-smooth: linear(0, 0.0486, 0.1555, 0.2822, 0.4076, 0.5215, 0.6197, 0.7017, 0.7683, 0.8216, 0.8637, 0.8964, 0.9217, 0.9411, 0.9558, 0.967, 0.9755, 0.9818, 0.9865, 0.99, 0.9927, 0.9946, 1); }
@keyframes j-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes j-word { from { opacity: 0; transform: translateY(40px); } }
@keyframes j-room { from { filter: brightness(.1) saturate(.45); } }
/* waiting for the photo to decode: the room is dark, the words are not there yet */
.j-intro-wait .a-hero-img { filter: brightness(.1) saturate(.45); }
.j-intro-wait .a-hero .j-word, .j-intro-wait .a-hero .j-lede, .j-intro-wait .a-hero-ticket, .j-intro-wait .j-hdr, .j-intro-wait .a-hero .j-hero-proof { opacity: 0; }
/* the lights come up: every lamp from the outer walls in, the room around a dark sign, then the LED sign (site.js plays them) */
.j-lamps { position: absolute; pointer-events: none; }
.j-lamps i { position: absolute; inset: 0; background-size: 100% 100%; opacity: 0; filter: brightness(1.15); }
.j-intro .a-hero-img { animation: j-room .9s var(--ease-smooth) 1.45s both; }
.j-intro .a-hero .j-word { display: inline-block; animation: j-word .45s var(--ease-smooth) both; animation-delay: calc(.15s + var(--wi) * .1s); }
.j-intro .a-hero .j-lede, .j-intro .a-hero-ticket { animation: j-rise .45s var(--ease-smooth) .7s both; }
.j-intro .a-hero-ticket { animation-delay: .8s; }
.j-intro .j-hdr, .j-intro .a-hero .j-hero-proof { animation: mw-fade .45s var(--ease-smooth) .9s both; }
/* everything below rises in as it scrolls into view, siblings 70ms apart */
.j-rise { opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease-smooth), transform .45s var(--ease-smooth); transition-delay: calc(var(--ri, 0) * 70ms); }
.j-rise.in { opacity: 1; transform: none; }
.j-rise.now { transition: none; }
/* small touches: buttons lift and press, photos breathe on hover, FAQ answers slide open */
.j-btn, .mw-btn { transition: background .2s, transform .2s var(--ease-smooth), box-shadow .2s; }
.j-btn:not(.ghost):hover, .mw-btn:not(.off):not(.ghost):hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(230, 10, 12, .28); }
.j-btn:active, .mw-btn:active { transform: scale(.97); box-shadow: none; }
.a-room-grid figure img, .c-room figure img, .b-strip figure img, .j-find-photo img { transition: transform .6s var(--ease-smooth); }
.a-room-grid figure:hover img, .c-room figure:hover img, .b-strip figure:hover img, .j-find-photo:hover img { transform: scale(1.03); }
.j-faq-item.open .j-faq-a { animation: j-rise .3s var(--ease-smooth) both; }
.mw-row { transition: background .2s; }
.mw-row:hover { background: rgba(245, 240, 235, .03); }
@media (prefers-reduced-motion: reduce) { .j-rise { opacity: 1; transform: none; transition: none; } .j-lamps { display: none; } }

/* Intro "Lights first", Peet's pick from the intro playground (2026-10-22): 3.3s in all. site.js plays the lamps and the
   sign; these are the room, the header and the page, at the times site.js uses (K = .6047, PK = .8237 of the 4s intro):
   the room comes up at 1950K over 900K, the header drops at 3400K, the page rises from 3550K, every rise-in PK × its own. */
@keyframes j-dark { from { filter: brightness(.06) saturate(.4); } }
@keyframes j-drop { from { opacity: 0; transform: translateY(-100%); } }
.j-lights { --room-t: 1179ms; --room-d: 544ms; --hdr-t: 2056ms; --page-t: 2147ms; --pk: .8237; }
/* No scrolling while the lights intro plays (the head script adds j-lock, site.js end() lifts it). */
html.j-lock, html.j-lock body { overflow: hidden; overscroll-behavior: none; }
/* The scrollbar's room is kept while it is hidden, so the page doesn't narrow (and the photo re-crop) when the hold lifts. */
html { scrollbar-gutter: stable; }
.j-lights.j-intro-wait .a-hero-img { filter: brightness(.06) saturate(.4); }
.j-lights.j-intro-wait :is(#app, #main) > :not(.a-hero):not(main), .j-lights.j-intro-wait .j-buybar { opacity: 0; }
.j-lights.j-intro .a-hero-img { animation: j-dark var(--room-d) var(--ease-smooth) var(--room-t) both; }
.j-lights.j-intro .j-hdr { animation: j-drop calc(.55s * var(--pk)) var(--ease-smooth) var(--hdr-t) both; }
.j-lights.j-intro .a-hero .j-word { animation-duration: calc(.45s * var(--pk)); animation-delay: calc(var(--page-t) + var(--wi) * .1s * var(--pk)); }
.j-lights.j-intro .a-hero .j-lede { animation-duration: calc(.45s * var(--pk)); animation-delay: calc(var(--page-t) + .35s * var(--pk)); }
.j-lights.j-intro .a-hero-ticket { animation-duration: calc(.45s * var(--pk)); animation-delay: calc(var(--page-t) + .45s * var(--pk)); }
.j-lights.j-intro .a-hero .j-hero-proof { animation: j-rise calc(.45s * var(--pk)) var(--ease-smooth) calc(var(--page-t) + .6s * var(--pk)) both; }
.j-lights.j-intro :is(#app, #main) > :not(.a-hero):not(main):not(.j-hdr), .j-lights.j-intro .j-buybar { animation: mw-fade calc(.6s * var(--pk)) var(--ease-smooth) calc(var(--page-t) + .75s * var(--pk)) both; }
/* A5 · The whole room: the lit room fills most of the first screen, short enough that Upcoming shows peeks in under it (Peet, 2026-10-21). */
.a-a5 { box-sizing: border-box; min-height: max(600px, calc(100vh - var(--hdr) - var(--labh) - 170px)); min-height: max(600px, calc(100svh - var(--hdr) - var(--labh) - 170px)); display: flex; align-items: flex-end; padding: 48px 0 6vh; padding-bottom: 6svh; }
.a-a5 .a-hero-media { left: 0; width: 100%; }
.a-a5 .a-hero-img { object-position: 50% 42%; }
.a-a5 .a-hero-media::after { background: linear-gradient(90deg, rgba(14, 10, 11, .9) 0%, rgba(14, 10, 11, .5) 32%, transparent 58%), linear-gradient(0deg, var(--ink) 0%, rgba(14, 10, 11, .5) 30%, transparent 60%); }
.a-a5 .a-hero-grid { width: 100%; grid-template-columns: minmax(0, 1fr) 440px; align-items: end; gap: 48px; }
.a-a5 .a-hero-copy .j-lede { margin-bottom: 8px; }
@media (max-width: 900px) {
  .a-a5 { min-height: 0; display: block; padding: 0 0 48px; }
  .a-a5 .a-hero-media { height: 58vh; height: 58svh; }
  .a-a5 .a-hero-media::after { background: linear-gradient(0deg, var(--ink) 10%, rgba(14, 10, 11, .6) 42%, transparent 66%); }
  .a-a5 .a-hero-img { object-position: 50% 30%; }
  .a-a5 .a-hero-grid { grid-template-columns: 1fr; gap: 22px; margin-top: -190px; }
}

/* About photos "Fading through": photos stack in one frame and crossfade. */
.j-fade { position: relative; }
.a-room-grid .j-fade img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-smooth), transform .6s var(--ease-smooth); }
.a-room-grid .j-fade img.on { opacity: 1; }

/* ---------- site build: links, focus, touch sizes, slots, lazy About photos ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* A reload or Back puts the page straight back where it was; Chrome would otherwise glide there from the top. */
html.j-snap { scroll-behavior: auto; }
/* A slim dark scrollbar: a thin track in the page's ink, a muted cream handle that brightens under the pointer (Peet, 2026-10-22). */
html::-webkit-scrollbar { width: 10px; height: 10px; background: #0e0a0b; }
html::-webkit-scrollbar-track { background: #0e0a0b; }
html::-webkit-scrollbar-thumb { background: rgba(245, 240, 235, .2); border-radius: 10px; border: 3px solid #0e0a0b; min-height: 48px; }
html::-webkit-scrollbar-thumb:hover { background: rgba(245, 240, 235, .45); }
html::-webkit-scrollbar-thumb:active { background: rgba(245, 240, 235, .6); }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: rgba(245, 240, 235, .3) #0e0a0b; } }
/* Lenis's own stylesheet (1.3.11), for the gliding wheel scroll in site.js. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; border-radius: 4px; }
.j-skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--cream); color: var(--ink); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.j-skip:focus { top: 12px; }
/* A slot stacks its children in one grid cell: the page's own card, and the Micdrop widget drawing unseen over it (no
   height, no clicks) until it has settled and takes the card's place (site.js embeds). For the first 2.5s the slots show
   nothing (j-cards-wait, from the head script), so a widget settled by then is the first and only card anyone sees. */
[data-micdrop-slot] { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
[data-micdrop-slot] > * { grid-area: 1 / 1; transition: opacity .25s ease-out; }
.mw-pending, .j-cards-wait [data-micdrop-slot]:not(.mw-live) > * { opacity: 0; pointer-events: none; }
.mw-pending { height: 0; overflow: visible; }
/* The list keeps a screen's room while its widget draws, so what follows (the About photos) doesn't show in the gap and
   then get pushed down when the shows come in. */
.j-cards-wait [data-micdrop-slot="list"], [data-micdrop-slot="list"]:has(> .mw-pending) { min-height: var(--mw-list-h, 100vh); }
/* On a reload both slots keep the height their widgets had last time (--mw-*-h, set by the head script). */
.j-cards-wait [data-micdrop-slot="featured"], [data-micdrop-slot="featured"]:has(> .mw-pending) { min-height: var(--mw-featured-h, 0); }
/* While the cards wait they hold that height exactly, not just at least: the page's own card under a waiting widget can be
   taller (the hero's "Every Friday" card is 253px to the widget's 214), and that difference above the screen was how far a
   mid-page reload landed off. */
.j-cards-wait [data-micdrop-slot="featured"]:not(.mw-live) { height: var(--mw-featured-h); overflow: clip; }
.j-cards-wait [data-micdrop-slot="list"]:not(.mw-live) { height: var(--mw-list-h); overflow: clip; }
@media (prefers-reduced-motion: reduce) { [data-micdrop-slot] > * { transition: none; } }
.mw-btn.off { pointer-events: none; }
.mw-badge.off { background: #3a3132; color: #d9d1ca; }
.a-room-grid .j-fade { position: relative; }
@media (pointer: coarse) {
  .mw-btn.sm, .j-hdr-cta .j-btn { height: 44px; }
  .j-nav a { padding: 13px 12px; }
}
@media (max-width: 900px) { .j-foot { padding-bottom: 104px; } }
.j-intro-wait .a-hero h1 { opacity: 0; }
.a-a5 .a-hero-grid { box-sizing: border-box; max-width: 1280px; }
@media (pointer: coarse) {
  .j-logo, .j-proof-g a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
  .j-faq-q { min-height: 44px; align-items: center; }
}
@media (max-width: 720px) { .j-find-park, .j-foot-brand p, .j-foot-col span { font-size: 16px; } }

/* Stopgap until the Widgets builder can hide it (Peet, 2026-10-21): no "Powered by Micdrop" row under the embeds. */
.micdrop-calendar-container > div:last-child:has(> a[href="https://get-micdrop.com"]) { display: none; }
/* The widget paints its own page colour, plus a 16px inset, around the card; over the hero photo that shows as a dark box. */
/* A phone held sideways: the photo takes most of the short screen and the headline sits under the neon, not on it. */
@media (max-width: 900px) and (max-height: 500px) {
  .a-a5 .a-hero-media { height: 78vh; height: 78svh; }
  .a-a5 .a-hero-grid { margin-top: -84px; }
  .a-hero-copy h1 { font-size: 44px; }
}