/* SROAST × tonik. — Big Baby Tape tour 2027 landing
   Chrome (nav/drawer/footer/cookie) follows data-theme: dark | light.
   The bbt-page content itself is always cream — same as the reference. */

:root {
  --ink: #000000;
  --ink-2: #0b0b0b;
  --ink-3: #15151a;
  --ink-line: #1f1f24;
  --paper: #eae3d2;
  --paper-dim: #c8c2b0;
  --paper-soft: rgba(234, 227, 210, .55);
  --paper-faint: rgba(234, 227, 210, .18);
  --signal: #ff3b30;
  --font-display: "Unbounded", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-sans: "Mulish", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --margin-x: clamp(16px, 3vw, 36px);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --z-nav: 49;
}
:root[data-theme="light"] {
  --ink: #f5f5f5;
  --ink-2: #ebebeb;
  --ink-3: #dedede;
  --ink-line: rgba(20, 20, 15, .14);
  --paper: #14140f;
  --paper-dim: #3a3933;
  --paper-soft: rgba(20, 20, 15, .62);
  --paper-faint: rgba(20, 20, 15, .16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; height: auto; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---------- chrome: nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: 14px var(--margin-x);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--paper-faint);
}
.brand { display: flex; align-items: center; height: 34px; }
.brand img { height: 100%; width: auto; display: block; }
.brand .logo--light { display: none; }
:root[data-theme="light"] .brand .logo--light { display: block; }
:root[data-theme="light"] .brand .logo--dark { display: none; }

.desktop-nav {
  display: flex; gap: 26px; list-style: none;
  font-weight: 500; font-size: 15px; color: var(--paper-dim);
}
.desktop-nav a { transition: color .15s; }
.desktop-nav a:hover { color: var(--paper); }
.desktop-nav .has-prefix a { position: relative; display: inline-block; }
.nav-prefix {
  position: absolute; left: 0; bottom: calc(100% + 2px);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 10px; letter-spacing: .01em; color: var(--signal);
  line-height: 1; pointer-events: none; white-space: nowrap;
}
.nav-right { display: flex; align-items: center; gap: 18px; }
.lang { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; letter-spacing: .04em; color: var(--paper-dim); }
.lang .ln { padding: 0; opacity: .55; transition: opacity .15s, color .15s; color: var(--paper-dim); }
.lang .ln:hover, .lang .ln.on { opacity: 1; color: var(--paper); }
.lang .lang-sep { opacity: .35; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: var(--paper); opacity: .65;
  transition: opacity .15s, transform .3s var(--ease-out);
}
.theme-toggle:hover { opacity: 1; transform: rotate(18deg); }
.theme-toggle .ico { width: 14px; height: 14px; display: block; }
.theme-toggle .moon { display: none; }
.theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: block; }
:root[data-theme="light"] .theme-toggle .sun { display: none; }
.cta {
  font-weight: 600; font-size: 14px; padding: 9px 18px;
  border: 1px solid var(--paper); color: var(--paper);
  transition: background .15s, color .15s;
}
.cta:hover { background: var(--paper); color: var(--ink); }
.burger { display: none; width: 28px; height: 22px; position: relative; margin-left: 4px; color: var(--paper); }
.burger-line { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .25s var(--ease-out), opacity .2s, top .25s var(--ease-out); }
.burger-line:nth-child(1) { top: 4px; }
.burger-line:nth-child(2) { top: 10px; }
.burger-line:nth-child(3) { top: 16px; }
body[data-drawer-open] .burger-line:nth-child(1) { top: 10px; transform: rotate(45deg); }
body[data-drawer-open] .burger-line:nth-child(2) { opacity: 0; }
body[data-drawer-open] .burger-line:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---------- chrome: drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; visibility: hidden; transition: visibility 0s linear .35s; }
.drawer-backdrop { position: absolute; inset: 0; background: #0000008c; opacity: 0; transition: opacity .25s ease; }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(86vw, 420px);
  background: var(--ink); color: var(--paper);
  border-left: 1px solid var(--paper-faint);
  padding: 28px 24px 32px; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s var(--ease-out);
  overflow-y: auto;
}
body[data-drawer-open] .drawer { pointer-events: auto; visibility: visible; transition: visibility 0s; }
body[data-drawer-open] .drawer-backdrop { opacity: 1; }
body[data-drawer-open] .drawer-panel { transform: translateX(0); }
.drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--paper-faint); }
.drawer-tag { font-size: 11px; letter-spacing: .22em; color: var(--paper-soft); text-transform: uppercase; }
.drawer-close {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper); font-size: 18px; line-height: 1; border: 1px solid var(--paper-faint);
  transition: background .15s, color .15s;
}
.drawer-close:hover { background: var(--paper); color: var(--ink); }
.drawer-list { list-style: none; flex: 1; }
.drawer-list li { border-bottom: 1px solid var(--paper-faint); }
.drawer-list a {
  display: block; padding: 22px 0;
  font-weight: 700; font-size: clamp(28px, 7vw, 38px); line-height: 1.05;
  letter-spacing: -.015em; color: var(--paper);
  transition: padding-left .2s var(--ease-out), color .15s;
}
.drawer-list a:hover, .drawer-list a:focus-visible { padding-left: 8px; }
.drawer-list .has-prefix a { padding-top: 18px; }
.drawer-prefix {
  display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 14px; letter-spacing: .005em; color: var(--signal); margin-bottom: 4px;
}
.drawer-cta { margin-top: 32px; border-bottom: 0 !important; }
.drawer-cta a { font-weight: 600; font-size: 16px !important; padding: 16px 18px !important; border: 1px solid var(--paper); text-align: center; }
.drawer-cta a:hover { background: var(--paper); color: var(--ink); padding-left: 18px !important; }

/* ---------- bbt page tokens ---------- */
.bbt-page {
  --bbt-paper: #f2f1ef;
  --bbt-red: #ff3535;
  --bbt-red-deep: #990d0d;
  --bbt-grey: #6b6b6b;
  --bbt-line: #d9d7d5;
  --bbt-pill: #a6a6a3;
  background: var(--bbt-paper);
  color: var(--bbt-grey);
  font-family: var(--font-sans);
}

/* ---------- hero ---------- */
.hero {
  --stage-w: min(100vw, calc((100svh - 190px) * 1.3395));
  position: relative; padding: 74px 0 0; overflow: hidden;
  background-image: url("tour/pattern.svg");
  background-size: 1440px 1075px;
  background-position: top center;
}
.hero-stage {
  position: relative; width: var(--stage-w);
  aspect-ratio: 1440 / 1075; margin: 0 auto;
  container-type: inline-size;
}
.hero-stage--dark {
  background: #070707;
  border-radius: 2.2cqw;
  overflow: hidden;
  box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .22);
}
.hero-stage--dark .partner-side__lbl { color: #8f8f8f; }
.hero-stage--dark .partners__link { color: #f2f1ef; }
.hero-figure { position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 721px) {
  .hero-figure {
    will-change: transform; transform-style: preserve-3d;
  }
}
.hero-portrait {
  position: absolute; left: 50%; top: 4%;
  transform: translateX(-50%);
  height: 92%; width: auto; max-width: none;
  filter: drop-shadow(1.4cqw 2cqw 3cqw rgba(0, 0, 0, .5));
}
.hero-portrait--blur { display: none; }
.hero-title { position: absolute; left: 50%; transform: translate(-50%); bottom: 5.2cqw; top: auto; margin: 0; pointer-events: none; will-change: transform; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-tag {
  display: block; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.45cqw; letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase; color: var(--bbt-red);
  text-shadow: .1cqw .1cqw 0 rgba(0, 0, 0, .9), 0 0 1.4cqw rgba(255, 54, 54, .35);
}
@media (prefers-reduced-motion: reduce) {
  .hero-tag { transition: none; }
}

.partner-side { position: absolute; top: 9%; display: flex; flex-direction: column; align-items: center; gap: 1cqw; z-index: 1; }
.partner-side--left { left: 2.5%; align-items: flex-start; }
.partner-side--right { right: 2.5%; align-items: flex-end; }
.partner-side__lbl { font-size: clamp(10px, .85cqw, 12px); letter-spacing: .04em; color: var(--bbt-grey); }
.partner-side .toniq-glyph--side { width: 2.03cqw; height: 2.66cqw; min-width: 17px; min-height: 22px; }
.partner-side .toniq-word--side { font-size: clamp(21px, 2.52cqw, 35px); }
.partner-side .partners__lockup--side { height: clamp(40px, 4.4cqw, 64px); width: auto; max-width: none; }
.partner-side .partners__link { transition: transform .2s var(--ease-out); }
.partner-side .partners__link:hover { opacity: 1; transform: translateY(-2px) scale(1.06); }
.partner-side .partners__link:hover .toniq-glyph--side { animation: antenna-wiggle .45s ease; }
.partner-side .partners__link:hover .partners__lockup--side { animation: lockup-nod .5s var(--ease-out); }
@keyframes lockup-nod { 0%, to { transform: rotate(0); } 35% { transform: rotate(-2.5deg); } 70% { transform: rotate(1.5deg); } }
@keyframes antenna-wiggle { 0%, to { transform: rotate(0); } 25% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } }
@media (min-width: 721px) { .bbt-page .partners { display: none; } }
@media (max-width: 720px) { .partner-side { display: none; } }

.partners {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto 6px; font-size: 13px; color: var(--bbt-grey);
}
.partners__lbl { letter-spacing: .02em; }
.partners__link { display: inline-flex; align-items: center; gap: 6px; color: #1a1a1a; transition: opacity .18s var(--ease-out); }
.partners__link:hover { opacity: .65; }
.toniq-glyph { width: 13px; height: 17px; }
.toniq-word { font-weight: 800; font-size: 15px; letter-spacing: -.02em; text-transform: lowercase; }
.toniq-word i { font-style: normal; color: #ff9232; }
.toniq-product { font-weight: 500; }
.partners__lockup { height: 26px; width: auto; max-width: none; }
.partners__sep { width: 1px; height: 13px; background: var(--bbt-line); }

/* ---------- tickets card ---------- */
.tickets {
  position: relative; margin: calc(var(--stage-w) * -.0496) auto 0; z-index: 2;
  width: min(1018px, calc(100% - 32px));
  container-type: inline-size;
  transform-style: preserve-3d; will-change: transform;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 32px;
  background: #ffffffe6; border: 1px solid #fff; border-radius: 18px;
  box-shadow: 0 14px 40px -9px #0000001a;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tickets__cap {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bbt-grey);
  padding-bottom: 10px; border-bottom: 1px solid var(--bbt-line);
}
.show { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(280px, 470px); gap: 9px 14px; align-items: center; }
.show + .show { padding-top: 10px; border-top: 1px solid var(--bbt-line); }
.show__info { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.show__venue { color: var(--bbt-grey); }
.show__date { font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: var(--bbt-red); }
.show__date b { font-weight: 700; color: var(--bbt-grey); }
.show__city {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 4.4cqw, 44px); letter-spacing: -.02em; line-height: 1;
  white-space: nowrap; color: var(--bbt-red);
}
.show__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.show__lbl { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bbt-grey); }
.show__lbl [data-price] { color: var(--bbt-red); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.pill {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 48px; padding: 6px 12px;
  background: #ffffff80; border: 1px solid var(--bbt-pill); border-radius: 10px;
  font-family: var(--font-sans); cursor: pointer;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.pill:hover { border-color: var(--bbt-red); background: #ff35350f; transform: translateY(-1px) translateZ(16px); box-shadow: 0 6px 18px -6px #ff353559; }
.pill:active { transform: translateY(0) translateZ(6px); box-shadow: none; }
.pill { position: relative; overflow: hidden; }
.pill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%);
  transform: translateX(-130%); pointer-events: none;
}
.pill:hover::after { animation: pill-shine .55s ease; }
@keyframes pill-shine { to { transform: translateX(130%); } }
.pill__cur { font-weight: 700; font-size: 14px; letter-spacing: .05em; color: var(--bbt-red); white-space: nowrap; }
.pill__by { font-weight: 600; font-size: 10.5px; color: var(--bbt-grey); }
.pill__by--toniq { display: inline-flex; align-items: center; gap: 3px; color: #1a1a1a; }
.toniq-glyph--pill { width: 9px; height: 12px; }
.toniq-word--pill { font-size: 10.5px; }
.pill--soon { border-style: dashed; border-color: var(--bbt-line); background: #ffffff40; cursor: default; }
.pill--soon:hover, .pill--soon:active { border-color: var(--bbt-pill); background: #ffffff40; transform: none; box-shadow: none; }
.pill--soon:hover::after { animation: none; }
.pill--soon .pill__cur, .pill--soon .pill__by { color: var(--bbt-pill); }
.tickets__note { margin: 0; padding-top: 10px; border-top: 1px solid var(--bbt-line); font-size: 12px; line-height: 1.4; color: var(--bbt-grey); }

/* ---------- collab CTA + sponsor dialog ---------- */
.collab-cta { margin: 18px auto 0; position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 16px; }
.collab-cta__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border: 1px solid var(--bbt-red); border-radius: 999px;
  background: #fff9; color: var(--bbt-red);
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);
}
.collab-cta__link:hover { background: var(--bbt-red); color: #fff; transform: translateY(-1px); }
.collab-cta__link--ghost { border-color: var(--bbt-pill); color: #1a1a1a; }
.collab-cta__link--ghost:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.sponsor-dlg {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(680px, calc(100vw - 32px)); padding: 28px;
  border: 0; border-radius: 18px; background: #fff; color: #1a1a1a;
  font-family: var(--font-sans); box-shadow: 0 30px 80px -20px #00000073;
}
.sponsor-dlg::backdrop { background: #0b0b0b8c; backdrop-filter: blur(6px); }
.sponsor-dlg__x { position: absolute; top: 10px; right: 12px; margin: 0; }
.sponsor-dlg__x button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; color: var(--bbt-grey); cursor: pointer; }
.sponsor-dlg__x button:hover { background: var(--bbt-paper); color: #1a1a1a; }
.sponsor-dlg__k { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bbt-red); }
.sponsor-dlg__t { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; }
.sponsor-dlg__sub { margin: 8px 0 18px; font-size: 14.5px; line-height: 1.45; color: var(--bbt-grey); }
.sponsor-dlg__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sponsor-dlg__opt { display: grid; gap: 4px; padding: 18px 16px; border: 1px solid var(--bbt-pill); border-radius: 12px; color: #1a1a1a; transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-out); }
.sponsor-dlg__opt:hover { border-color: var(--bbt-red); background: #ff35350f; transform: translateY(-1px); }
.sponsor-dlg__opt { cursor: pointer; font: inherit; text-align: left; background: transparent; }
.sponsor-dlg__opt.on { border-color: var(--bbt-red); background: #ff353512; box-shadow: inset 0 0 0 1px var(--bbt-red); }
.sponsor-dlg__city { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--bbt-red); text-transform: uppercase; }
.sponsor-dlg__meta { font-size: 12.5px; color: var(--bbt-grey); }

/* ---------- shared dialog form + referral contest ---------- */
.dlg-form { display: grid; gap: 8px; margin-top: 14px; }
.dlg-form input {
  padding: 12px 14px; border: 1px solid var(--bbt-pill); border-radius: 10px;
  background: #fff; color: #1a1a1a; font: inherit; font-size: 14.5px; outline: none;
  transition: border-color .18s var(--ease-out);
}
.dlg-form input:focus { border-color: var(--bbt-red); }
.dlg-btn {
  padding: 12px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bbt-red); color: #fff; font: inherit; font-weight: 700; font-size: 14.5px;
  transition: transform .18s var(--ease-out), filter .18s var(--ease-out);
}
.dlg-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.dlg-btn:disabled { opacity: .5; cursor: default; transform: none; }
.dlg-err { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--bbt-red); }
.dlg-done__t { margin: 8px 0 4px; font-size: 16px; font-weight: 700; color: #1a1a1a; }

.ref-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; counter-reset: rstep; }
.ref-steps li { position: relative; padding: 10px 10px 10px 36px; border: 1px solid var(--bbt-line); border-radius: 10px; font-size: 12.5px; line-height: 1.35; color: #3a3a3a; counter-increment: rstep; }
.ref-steps li::before { content: counter(rstep); position: absolute; left: 10px; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--bbt-red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.ref-mine { margin: 4px 0 10px; }
.ref-mine__lbl { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #1a1a1a; }
.ref-linkrow { display: flex; gap: 8px; }
.ref-linkrow input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--bbt-red); border-radius: 10px; background: #ff353508; color: var(--bbt-red); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 13px; }
.ref-linkrow .dlg-btn { flex-shrink: 0; padding-inline: 16px; }
.ref-share { display: flex; gap: 18px; margin: 10px 0 0; }
.ref-share a { font-size: 13px; font-weight: 700; color: var(--bbt-red); }
.ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.ref-stat { border: 1px solid var(--bbt-line); border-radius: 10px; padding: 10px 12px; }
.ref-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--bbt-red); font-variant-numeric: tabular-nums; }
.ref-stat span { font-size: 11.5px; line-height: 1.3; color: var(--bbt-grey); }
.ref-draw { margin-top: 16px; border-top: 1px solid var(--bbt-line); padding-top: 14px; }
.ref-ticket {
  border: 1.5px dashed var(--bbt-red); border-radius: 12px; padding: 14px 16px;
  background: #ff353508; display: flex; flex-direction: column; gap: 4px;
}
.ref-ticket__k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bbt-red); }
.ref-ticket__who { font-size: 18px; font-weight: 800; letter-spacing: .3em; color: #1a1a1a; }
.ref-ticket__d { font-size: 12px; color: var(--bbt-grey); }
.ref-ticket__d b { color: #1a1a1a; }
.ref-fine { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--bbt-grey); }
.ref-lvl { margin-top: 14px; border: 1px solid var(--bbt-line); border-radius: 12px; padding: 12px 14px; opacity: .8; }
.ref-lvl i { display: block; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bbt-grey); margin-bottom: 4px; }
.ref-lvl span { font-size: 12.5px; line-height: 1.45; color: #3a3a3a; }


/* ---------- VIP band ---------- */
.vipband { max-width: 1100px; margin: 56px auto 0; padding: 0 20px; }
.vipband__link { position: relative; display: block; border-radius: 18px; overflow: hidden; color: #fff; isolation: isolate; }
.vipband__img { display: block; width: 100%; height: clamp(300px, 34vw, 420px); object-fit: cover; object-position: 70% 60%; transition: transform .6s var(--ease-out); }
.vipband__link:hover .vipband__img { transform: scale(1.03); }
.vipband__link::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to right, #080808e0, #0808088c 42%, #08080800 72%); }
.vipband__body { position: absolute; z-index: 1; left: clamp(20px, 4vw, 44px); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; max-width: min(460px, 78%); }
.vipband__k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bbt-red); }
.vipband__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -.03em; line-height: .95; text-transform: uppercase; }
.vipband__sub { font-size: 15px; line-height: 1.45; color: #ffffffd1; }
.vipband__btn { justify-self: start; margin-top: 6px; padding: 12px 20px; border-radius: 999px; background: var(--bbt-red); color: #fff; font-weight: 700; font-size: 14.5px; transition: transform .18s var(--ease-out); }
.vipband__link:hover .vipband__btn { transform: translateX(3px); }

/* ---------- content ---------- */
.inner { max-width: 1018px; margin: 0 auto; padding: 0 16px; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bbt-red); margin: 0 0 14px; }
.artist-bio, .press, .seo { padding: 56px 0; }
.press, .seo { border-top: 1px solid var(--bbt-line); }
.bio { max-width: 640px; font-size: 17px; line-height: 1.6; color: #3a3a3a; margin: 0 0 14px; }
.press__facts { margin: 0; border-top: 1px solid var(--bbt-line); max-width: 68ch; }
.press__facts > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bbt-line); }
.press__facts dt { font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bbt-grey); padding-top: 3px; }
.press__facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: #3a3a3a; }
.press__facts a { color: var(--bbt-red); }
.seo__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.02em; color: #1a1a1a; margin: 0 0 22px; max-width: 720px; }
.seo__cols { max-width: 68ch; }
.seo__text p { font-size: 15px; line-height: 1.6; color: #3a3a3a; margin: 0 0 12px; }
.seo__text a { color: var(--bbt-red); }
.faq-section { padding: 56px 0; border-top: 1px solid var(--bbt-line); }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 40px; }
.faq__q { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.faq__a { font-size: 14px; line-height: 1.55; color: #3a3a3a; margin: 0; }

/* ---------- footer (site chrome — follows theme) ---------- */
footer { background: var(--ink); color: var(--paper); border-top: 1px solid var(--paper-faint); padding: 60px var(--margin-x) 30px; }
footer .grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
footer h5 { font-weight: 600; font-size: 12px; letter-spacing: .04em; color: var(--paper-soft); margin-bottom: 18px; text-transform: uppercase; }
footer ul { list-style: none; font-size: 14px; line-height: 2; }
footer ul a { color: var(--paper-dim); transition: color .15s; }
footer ul a:hover { color: var(--paper); }
.brand-block .f-logo { display: inline-flex; height: 44px; margin-bottom: 18px; }
.brand-block .f-logo img { height: 100%; width: auto; display: block; }
.brand-block .logo--light { display: none; }
:root[data-theme="light"] .brand-block .logo--light { display: block; }
:root[data-theme="light"] .brand-block .logo--dark { display: none; }
.brand-block .tag { font-size: 13px; color: var(--paper-soft); line-height: 1.7; }
.brand-block .tag span { display: block; }
.brand-block .social { list-style: none; margin: 18px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.brand-block .social a { color: var(--paper-dim); transition: color .15s; }
.brand-block .social a:hover { color: var(--signal); }
.brand-block .social .handle { color: var(--paper-soft); }
.brand-block .social a:hover .handle { color: inherit; }
.copy-bar {
  padding: 18px var(--margin-x);
  background: var(--ink); color: var(--paper-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; border-top: 1px solid var(--paper-faint);
}
.copy-bar .legal { color: var(--paper-soft); }
.legal-links { display: inline-flex; align-items: center; gap: 10px; }
.legal-links a, .legal-link-btn { color: var(--paper-soft); transition: color .15s; background: transparent; border: 0; padding: 0; font-size: 12px; cursor: pointer; }
.legal-links a:hover, .legal-link-btn:hover { color: var(--paper); }
.legal-links .sep { color: var(--paper-faint); }
@media (max-width: 900px) { footer .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { footer .grid { grid-template-columns: 1fr; } .copy-bar { flex-direction: column; gap: 4px; } }

/* ---------- cookie consent ---------- */
html.cc-locked, html.cc-locked body { overflow: hidden; }
.cc {
  position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: none; max-height: none;
  z-index: 70; background: var(--ink); color: var(--paper);
  border: 0; border-top: 1px solid var(--paper-faint);
  padding: 18px var(--margin-x); box-shadow: 0 -8px 24px #00000040;
}
.cc--gate {
  inset: 0; margin: auto; width: min(calc(100vw - 28px), 520px);
  max-height: calc(100dvh - 28px); padding: 0;
  border: 1px solid var(--paper-faint); border-top: 3px solid var(--signal);
  box-shadow: 0 30px 90px #0000008c; overflow: auto;
}
.cc--gate::backdrop { background: #0000009e; backdrop-filter: blur(7px); }
.cc--gate .cc-inner { display: block; max-width: none; padding: clamp(22px, 4vw, 32px); }
.cc-title { font-weight: 800; font-size: clamp(22px, 4.5vw, 28px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; }
.cc--gate .cc-text { max-width: none; font-size: 14px; }
.cc--gate .cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.cc--gate .cc-more {
  grid-column: 1 / -1; justify-self: center; background: none; border: 0; padding: 4px 2px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-soft);
  cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--paper-faint);
}
.cc--gate .cc-more:hover { color: var(--paper); text-decoration-color: var(--paper); }
@media (max-width: 420px) { .cc--gate .cc-actions { grid-template-columns: 1fr; } }
.cc-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.cc-eyebrow { font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--paper-soft); margin: 0 0 6px; }
.cc-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--paper-dim); max-width: 80ch; }
.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cc-btn { font-size: 14px; font-weight: 600; padding: 9px 16px; border: 1px solid var(--paper); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.cc-btn--outline { background: transparent; color: var(--paper); }
.cc-btn--outline:hover, .cc-btn--solid { background: var(--paper); color: var(--ink); }
.cc-btn--solid:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.cc-modal { margin: auto; border: 1px solid var(--paper-faint); background: var(--ink); color: var(--paper); width: min(92vw, 560px); padding: 0; box-shadow: 0 24px 60px #00000059; }
.cc-modal::backdrop { background: #0000008c; }
.cc-modal-inner { display: flex; flex-direction: column; }
.cc-modal-head { padding: 28px 28px 18px; border-bottom: 1px solid var(--paper-faint); }
.cc-modal-head h2 { font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin: 0 0 10px; }
.cc-modal-lede { margin: 0; font-size: 13px; line-height: 1.55; color: var(--paper-dim); }
.cc-cat { padding: 20px 28px; border-bottom: 1px solid var(--paper-faint); }
.cc-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.cc-cat h3 { margin: 0; font-weight: 600; font-size: 16px; }
.cc-cat p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--paper-dim); }
.cc-toggle--locked { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-soft); padding: 4px 10px; border: 1px solid var(--paper-faint); }
.cc-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.cc-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.cc-switch-track { width: 44px; height: 24px; background: var(--paper-faint); border-radius: 999px; position: relative; transition: background .2s; }
.cc-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--paper); border-radius: 50%; transition: transform .2s var(--ease-out); }
.cc-switch input:checked + .cc-switch-track { background: var(--signal); }
.cc-switch input:checked + .cc-switch-track::after { transform: translateX(20px); }
.cc-switch-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-left: 10px; color: var(--paper-soft); }
.cc-switch input:checked ~ [data-cc-switch-off] { display: none; }
.cc-switch input:not(:checked) ~ [data-cc-switch-on] { display: none; }
.cc-modal-foot { padding: 18px 28px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-modal-foot a { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-soft); }
.cc-modal-foot a:hover { color: var(--paper); }

/* ---------- entry + scroll animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in { 0% { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes stamp-in { 0% { opacity: 0; transform: translate(-50%) scale(1.06); } to { opacity: 1; transform: translate(-50%) scale(1); } }
  @keyframes breathe { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-.55cqw); } }
  .partners { animation: rise-in .6s var(--ease-out) both; }
  .hero-figure { animation: rise-in .9s var(--ease-out) .05s backwards; }
  .hero-title { animation: stamp-in .55s var(--ease-out) .25s both; }
  .tickets { animation: rise-in .7s var(--ease-out) .4s backwards; }
}
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  /* portrait floats gently — off on mobile where it would fight translateX(-50%) */
  .hero-portrait { animation: breathe 7s ease-in-out 1.2s infinite; }
}
.reveal-init { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal-init.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-init { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .desktop-nav, .nav .cta { display: none; }
  .nav-right { gap: 12px; }
  .burger { display: inline-block; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .tickets { padding: 16px 20px; }
  .show { grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(240px, 320px); }
  .show__info { font-size: 13px; }
  .show__date { font-size: 14px; }
  .pill__cur { font-size: 13px; }
}
@media (max-width: 720px) {
  .hero { --stage-w: 100vw; padding-top: 64px; }
  .partners { flex-wrap: wrap; padding: 0 12px; gap: 8px 10px; }
  .partners__lockup { height: 20px; min-width: 0; flex-shrink: 1; }
  .hero-stage { aspect-ratio: 1 / 1; }
  .hero-stage--dark { border-radius: 16px; }
  .hero-portrait { left: 50%; transform: translateX(-50%); top: 5%; height: 90%; width: auto; }
  .hero-title { bottom: 4.2cqw; top: auto; }
  .hero-tag { font-size: 2.7cqw; letter-spacing: .3em; text-indent: .3em; }
  .tickets { margin: 0 auto; padding: 14px 16px; border-radius: 14px; gap: 10px; }
  .show { grid-template-columns: auto 1fr auto; grid-template-areas: "city venue date" "buy buy buy"; align-items: baseline; gap: 7px 10px; }
  .show__info { display: contents; }
  .show__city { grid-area: city; font-size: 22px; }
  .show__venue { grid-area: venue; font-size: 11px; min-width: 0; }
  .show__date { grid-area: date; font-size: 12px; }
  .show__date b { display: none; }
  .show__buy { grid-area: buy; align-items: stretch; }
  .show__lbl { display: none; }
  .pill { min-height: 44px; }
  .pills .pill:first-child { flex-grow: 1.9; }
  .pill__cur { font-size: 12px; letter-spacing: .04em; }
  .pill__by { font-size: 10px; }
  .vipband { margin-top: 40px; padding: 0 16px; }
  .vipband__img { height: 360px; object-position: 78% 60%; }
  .vipband__link::after { background: linear-gradient(to top, #080808eb 12%, #08080880 55%, #0808081a); }
  .vipband__body { top: auto; bottom: 20px; transform: none; max-width: calc(100% - 40px); }
  .sponsor-dlg__opts { grid-template-columns: 1fr; }
  .ref-steps { grid-template-columns: 1fr; }
  .sponsor-dlg { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .press__facts > div { grid-template-columns: 110px 1fr; gap: 12px; }
  .faq-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- embedded tonik checkout ---------- */
html.ck-open, html.ck-open body { overflow: hidden; }
.ckout {
  margin: auto; padding: 0; border: 0;
  width: min(960px, 96vw); height: min(86vh, 860px);
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 90px #00000073;
}
.ckout::backdrop { background: #000000b8; backdrop-filter: blur(8px); }
.ckout:not([open]) { display: none; }
.ckout__head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--paper-faint);
  flex-shrink: 0;
}
.ckout__brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: inherit; text-decoration: none; position: relative; overflow: hidden;
  padding: 6px 10px; margin: -6px -10px; border-radius: 8px;
}
.ckout__brand::after { /* shine sweep */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%;
  background: linear-gradient(105deg, transparent, var(--paper-faint), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.ckout__brand:hover::after { animation: ck-shine .9s var(--ease-out); }
@keyframes ck-shine { to { transform: translateX(430%) skewX(-18deg); } }
.ckout__brand:active { animation: ck-jerk .3s var(--ease-out); }
@keyframes ck-jerk { 0% { transform: translateX(0); } 35% { transform: translateX(-3px); } 70% { transform: translateX(2px); } 100% { transform: translateX(0); } }
.ckout__glyph { width: 14px; height: 19px; flex-shrink: 0; }
.ckout__brand:hover .ckout__glyph { animation: antenna-wiggle .55s var(--ease-out); }
.ckout__word { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.ckout__word i { font-style: normal; color: var(--signal); }
.ckout__word b { font-weight: 800; color: var(--paper-soft); }
.ckout__hint {
  font-family: var(--font-body); font-size: 11px; color: var(--paper-soft);
  border-left: 1px solid var(--paper-faint); padding-left: 10px; margin-left: 2px;
  transition: color .15s;
}
.ckout__brand:hover .ckout__hint { color: var(--signal); }
.ckout__secure {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-soft); flex-shrink: 0;
}
.ckout__x {
  border: 1px solid var(--paper-faint); background: transparent; color: inherit;
  width: 34px; height: 34px; cursor: pointer;
  border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  transition: background .15s, color .15s, transform .15s var(--ease-out);
}
.ckout__x svg { display: block; }
.ckout__x:hover { background: var(--signal); border-color: var(--signal); color: #fff; transform: rotate(90deg); }
.ckout__frame { flex: 1; border: 0; width: 100%; background: var(--ink); }
.ckout__foot {
  padding: 8px 16px; border-top: 1px solid var(--paper-faint); flex-shrink: 0;
  font-size: 10.5px; color: var(--paper-soft); letter-spacing: .02em;
}


@media (max-width: 760px) {
  .ckout { width: 100vw; height: 100dvh; height: 100vh; }
  .ckout__hint { display: none; }
}