/* ============================================================
   THE FILAMENT : design system
   Gig-poster aesthetic for a 320-cap music room + 90-seat comedy
   cellar. Near-black + acid green, Anton / Space Grotesk.

   Two hard rules from the design handoff, both load-bearing:
     - Zero border radius anywhere. Every button, card, chip,
       badge and input is a hard rectangle.
     - No shadows anywhere. Depth comes only from 1px hairline
       borders and image scrims.

   Comedy pages swap the accent by adding .theme-cellar to
   <body>: text accents go coral, solid buttons go cellar red.
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --ink: #0a0a0b;             /* page background everywhere */
  --ink-94: rgba(10, 10, 11, .94);  /* sticky header */
  --surface: #131316;         /* show cards, add-on tiles */
  --paper: #f4f2ed;           /* primary text */

  /* ---- accents ---- */
  --acid: #d9f24b;
  --acid-hover: #eaff7a;
  --cellar-red: #ff4a24;
  --cellar-coral: #ff8a68;
  --warn: #ff7a52;            /* "Selling Fast" badge text */

  /* Page accent. Remapped wholesale by .theme-cellar below, so
     every component can reference these two and stay palette-agnostic. */
  --accent: var(--acid);          /* eyebrows, links, date numerals */
  --accent-solid: var(--acid);    /* solid button backgrounds */
  --accent-on-solid: var(--ink);  /* text on a solid accent button */
  --card-border-hover: rgba(217, 242, 75, .55);

  /* ---- paper alpha ramp (all on 244,242,237) ---- */
  --p-80: rgba(244, 242, 237, .8);
  --p-78: rgba(244, 242, 237, .78);
  --p-75: rgba(244, 242, 237, .75);
  --p-72: rgba(244, 242, 237, .72);
  --p-68: rgba(244, 242, 237, .68);
  --p-62: rgba(244, 242, 237, .62);
  --p-60: rgba(244, 242, 237, .6);
  --p-58: rgba(244, 242, 237, .58);
  --p-55: rgba(244, 242, 237, .55);
  --p-50: rgba(244, 242, 237, .5);
  --p-45: rgba(244, 242, 237, .45);
  --p-40: rgba(244, 242, 237, .4);
  --p-38: rgba(244, 242, 237, .38);
  --p-35: rgba(244, 242, 237, .35);

  /* ---- borders ---- */
  --line: rgba(244, 242, 237, .12);      /* hairline dividers, section borders */
  --line-card: rgba(244, 242, 237, .1);  /* card border */
  --line-14: rgba(244, 242, 237, .14);   /* tables, month rules */
  --line-16: rgba(244, 242, 237, .16);   /* add-on tile border */
  --line-22: rgba(244, 242, 237, .22);
  --line-24: rgba(244, 242, 237, .24);
  --line-32: rgba(244, 242, 237, .32);
  --line-35: rgba(244, 242, 237, .35);

  /* ---- type ---- */
  --display: 'Anton', Impact, sans-serif;
  --sans: 'Space Grotesk', system-ui, sans-serif;

  /* ---- geometry ---- */
  --pad-x: 40px;              /* desktop horizontal page padding */

  /* ---- scrims ---- */
  --scrim-hero: linear-gradient(180deg, rgba(10,10,11,.45) 0%, rgba(10,10,11,.25) 40%, rgba(10,10,11,.95) 100%);
  --scrim-room: linear-gradient(180deg, rgba(10,10,11,.2), rgba(10,10,11,.9));
  --scrim-wash: rgba(10, 10, 11, .78);

  /* ---- seat map (assets/js/ots-widget-enhance.js) ----
     The Cellar sells reserved tables, so comedy checkouts hit the widget's
     seating chart. These color the frame, stage and label that
     assets/js/ots-widget-enhance.js applies. */
  --seatmap-container-bg: #0a0a0b;   /* darker than the modal panel, reads recessed */
  --seatmap-stage-fill: #131316;
  --seatmap-stage-stroke: rgba(217, 242, 75, .45);
  --seatmap-stage-text: rgba(217, 242, 75, .9);
}

body.theme-cellar {
  --accent: var(--cellar-coral);
  --accent-solid: var(--cellar-red);
  --accent-on-solid: var(--paper);
  --card-border-hover: rgba(255, 138, 104, .5);
  --seatmap-stage-stroke: rgba(255, 138, 104, .45);
  --seatmap-stage-text: rgba(255, 138, 104, .9);
}

*, *::before, *::after { box-sizing: border-box; }

/* Every vertical rhythm on this site comes from explicit flex `gap` and
   section padding. Default heading/paragraph margins would stack on top of
   that gap and throw the spacing out, badly at display sizes (a 104px h1
   carries ~70px of UA margin on each side). */
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  /* The OTS widget injects an html-level reset (line-height:1.5) at the top
     of <head>. Declaring it on body wins on specificity and keeps the
     wordmark lockup and Anton headings at their own natural metrics. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--acid-hover); }
body.theme-cellar a:hover { color: var(--cellar-coral); }

/* ============================================================
   TYPE PATTERNS
   Lifted verbatim from the handoff's recurring-pattern table.
   ============================================================ */
.display {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
}

.eyebrow {
  font: 700 11.5px/1 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Performer-page hero eyebrow runs slightly tighter than the standard one. */
.eyebrow--tight { letter-spacing: .24em; }

.label-sm {
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-45);
}
.label-sm--wide { letter-spacing: .2em; }

.body-copy { font-size: 15px; line-height: 1.7; color: var(--p-72); }
.body-lg { font-size: 17px; line-height: 1.55; color: var(--p-78); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font: 700 13px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.btn--solid {
  background: var(--accent-solid);
  color: var(--accent-on-solid);
  padding: 16px 30px;
}
.btn--solid:hover { color: var(--accent-on-solid); }
.btn--outline {
  border: 1px solid var(--line-35);
  color: var(--paper);
  padding: 15px 26px;
  font-weight: 500;
  transition: border-color .15s ease;
}
.btn--outline:hover { border-color: var(--accent-solid); color: var(--paper); }

/* ---------- chips (filter nav on Shows pages) ---------- */
.chip {
  display: inline-block;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  /* Active has no border, inactive does. The 1px padding difference
     below keeps the row from shifting between the two states. */
  border: 1px solid var(--line-24);
  padding: 9px 17px;
  color: var(--p-72);
  transition: border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--accent); color: var(--paper); }
.chip--active {
  background: var(--accent-solid);
  color: var(--accent-on-solid);
  border: none;
  padding: 10px 18px;
  font-weight: 700;
}
.chip--active:hover { color: var(--accent-on-solid); }

/* ---------- inline text link with rule ---------- */
.link-rule {
  font: 500 12.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
  text-decoration: none;
}

/* ---------- tag row (performer pages) ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; }
.tag {
  border: 1px solid var(--line-22);
  padding: 7px 13px;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-72);
}
.tag--accent { border-color: var(--cellar-coral); color: var(--cellar-coral); }

/* ============================================================
   TICKER + HEADER + FOOTER  (on every page)
   ============================================================ */
.ticker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 9px var(--pad-x);
  background: var(--accent-solid);
  color: var(--accent-on-solid);
  font: 700 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ticker__aside { opacity: .7; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--ink-94);
  z-index: 5;
}
.nav__brand { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.nav__brand-name {
  font-family: var(--display);
  font-size: 25px;
  letter-spacing: .05em;
  color: var(--paper);
  text-transform: uppercase;
}
.nav__brand-sub {
  font: 500 9.5px/1 var(--sans);
  letter-spacing: .3em;
  color: var(--accent);
  text-transform: uppercase;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font: 500 12.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav__link { color: var(--p-62); text-decoration: none; transition: color .15s ease; }
.nav__link:hover { color: var(--paper); }
.nav__link--active { color: var(--paper); }
.nav__cta {
  background: var(--accent-solid);
  color: var(--accent-on-solid);
  padding: 12px 24px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .14em;
  border: none;
  font-family: var(--sans);
  font-size: 12.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.nav__cta:hover { color: var(--accent-on-solid); }

/* Hamburger. Bars 1 and 2 are 24px paper, bar 3 is 16px in the page
   accent. The short colored bar is a deliberate detail, not a bug. */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__toggle span { display: block; height: 2px; width: 24px; background: var(--paper); }
.nav__toggle span:last-child { width: 16px; background: var(--accent-solid); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--ink);
  flex-direction: column;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__close {
  background: none;
  border: none;
  color: var(--paper);
  font-size: 30px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
}
.mobile-menu__list { display: flex; flex-direction: column; padding: 0 18px; }
.mobile-menu__link {
  font: 600 17px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__cta {
  display: block;
  text-align: center;
  background: var(--accent-solid);
  color: var(--accent-on-solid);
  padding: 20px 0;
  margin-top: 22px;
  font: 700 13px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-menu__meta {
  font: 500 12px/1.6 var(--sans);
  color: var(--p-45);
  padding: 22px 0 0;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 54px var(--pad-x) 34px;
  border-top: 1px solid var(--line);
}
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.footer-col a { color: var(--p-68); text-decoration: none; }
.footer-col a:hover { color: var(--paper); }
.footer__wordmark { font-family: var(--display); font-size: 22px; letter-spacing: .05em; text-transform: uppercase; }
.footer__addr { font-size: 13.5px; line-height: 1.6; color: var(--p-55); }
/* Email capture: flush input + solid button, no gap, no radius. */
.footer__signup { display: flex; gap: 0; }
.footer__signup input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line-22);
  border-right: 0;
  background: none;
  padding: 12px 14px;
  font: 400 13px/1 var(--sans);
  color: var(--paper);
  border-radius: 0;
}
.footer__signup input::placeholder { color: var(--p-40); }
.footer__signup button {
  background: var(--accent-solid);
  color: var(--accent-on-solid);
  border: none;
  padding: 12px 18px;
  font: 700 12px/1.3 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.legal {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px var(--pad-x) 30px;
  font: 500 11.5px/1.5 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-38);
}

/* ============================================================
   HERO + SECTION PRIMITIVES
   ============================================================ */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__img, .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim { position: absolute; inset: 0; background: var(--scrim-hero); }
/* Visit hero is shorter and its scrim runs deeper at the base, since the
   title sits lower against a room photo rather than act key art. */
.hero--visit { min-height: 380px; }
.hero--visit .hero__body { padding-bottom: 44px; }
.hero__scrim--visit { background: linear-gradient(180deg, rgba(10,10,11,.45), rgba(10,10,11,.94)); }
.hero__body {
  position: relative;
  padding: 0 var(--pad-x) 52px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 900px;
}
.hero__badges {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 11.5px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.hero__chip { background: var(--accent-solid); color: var(--accent-on-solid); padding: 6px 10px; }
.hero__detail { color: var(--p-75); }
.hero__title { font-family: var(--display); font-size: 104px; line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.hero__lede { font-size: 17px; line-height: 1.55; color: var(--p-78); max-width: 520px; }
.hero__lede--wide { max-width: 540px; }
.hero__lede strong { color: var(--paper); font-weight: 400; }
.hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }

.section-head {
  padding: 64px var(--pad-x) 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head__stack { display: flex; flex-direction: column; gap: 10px; }
.section-title { font-family: var(--display); font-size: 46px; line-height: 1; text-transform: uppercase; }

.pagehead {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 56px var(--pad-x) 26px;
  border-bottom: 1px solid var(--line);
}
.pagehead__title { font-family: var(--display); font-size: 72px; line-height: .95; text-transform: uppercase; }
.pagehead__sub { font-size: 15.5px; line-height: 1.6; color: var(--p-68); max-width: 560px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* ============================================================
   GALLERY WIDGET MOUNT
   The real OTS gallery widget replaces the children of #ots-widget
   entirely. The host page owns only this section padding; card
   styling lives in the dashboard-uploaded widget stylesheet
   (see ../../FILAMENT-GALLERY-WIDGET-THEMING.md for what that
   stylesheet can and cannot reach).
   ============================================================ */
#ots-widget { padding: 14px var(--pad-x) 72px; }
.widget-section--shows { padding: 34px var(--pad-x) 76px; }
/* Reserve height while a live widget bootstraps, so the footer does not
   jump up and then back down as the tiles hydrate. */
.ots-mount { min-height: 820px; }
.ots-mount onthestage-widget { display: block; width: 100%; }

/* Widget bug (Nov 2026): the mobile payment-step divider carries
   !border-t-[var(--onstage-border-color,#e0e0e0)], but the bundle ships no
   CSS for that class, so it falls back to Tailwind gray-200. Every other
   checkout border reads --onstage-border-color now; delete this when the
   class gets generated. body prefix lifts specificity over the widget. */
body [class*="sc-onthestage-"][class*="border-t-[var(--onstage-border-color"] {
  border-top-color: var(--onstage-border-color) !important;
}

/* ============================================================
   SEAT MAP: dark-background override
   The Cellar is reserved seating, so comedy checkouts render the
   widget's seating chart. It arrives with a light background baked
   in, which no --onstage-* variable reaches. Verified reachable
   from here: onthestage-seatingchart-widget and
   onthestage-3d-seat-map both render in LIGHT DOM (Stencil
   encapsulation mode 0), unlike the gallery tiles.

   assets/js/ots-widget-enhance.js adds .seat-map-container to the
   svg's parent; the widget never sets that class itself.
   ============================================================ */
.seat-map-container {
  border-radius: 0;
  overflow: hidden;
  background: var(--seatmap-container-bg);
  border: 1px solid var(--line-14);
}
/* The chart svg paints var(--onstage-widget-bg-color), which is #0a0a0b in
   the uploaded sheet and already matches --seatmap-container-bg. Kept
   transparent anyway so the frame color has one source of truth. */
.seat-map-container svg { background: transparent !important; }

/* Mock card styling, used only by the preview markup inside
   #ots-widget before the widget mounts over it, and by the
   related-shows rows on performer pages (which are genuine
   host-page content, not widget output). */
.month-rule { display: flex; align-items: center; gap: 18px; margin: 22px 0 26px; }
.month-rule + .card-grid + .month-rule { margin-top: 44px; }
.month-rule__line { height: 1px; flex: 1; background: var(--line-14); }
.month-rule__name {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-80);
}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.show-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-card);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.show-card:hover { border-color: var(--card-border-hover); color: inherit; }
.show-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.show-card__body { display: flex; gap: 16px; padding: 18px 20px 20px; }
.show-card__date { font-family: var(--display); font-size: 42px; line-height: .85; color: var(--accent); }
.show-card__stack { display: flex; flex-direction: column; gap: 7px; }
.show-card__title { font: 600 17px/1.25 var(--sans); }
.show-card__metarow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.show-card__meta { font: 500 12.5px/1 var(--sans); color: var(--p-60); }
.show-card__more { font: 500 12.5px/1 var(--sans); color: var(--accent); }

/* Availability badges. Widget-owned: these only style the preview
   mock. Never populate these from host-page content. */
.badge {
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 8px;
}
.badge--good { background: rgba(217, 242, 75, .14); color: var(--acid); }
.badge--fast { background: rgba(255, 122, 82, .16); color: var(--warn); }
.badge--few { background: rgba(255, 74, 36, .2); color: var(--cellar-coral); }

/* ============================================================
   ROOM SPLIT / FACT GRIDS / ADD-ONS
   ============================================================ */
.room-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.room {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}
.room + .room { border-left: 1px solid var(--line); }
.room__scrim { position: absolute; inset: 0; background: var(--scrim-room); }
.room__body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 36px;
}
.room__cap {
  font: 700 11px/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.room__cap--cellar { color: var(--cellar-coral); }
.room__name { font-family: var(--display); font-size: 40px; line-height: 1; text-transform: uppercase; }
.room__desc { font-size: 14.5px; line-height: 1.6; color: var(--p-72); max-width: 400px; }

/* "Grid of facts": a 1px gap over a hairline-colored background with
   ink cells, so the gap itself is the divider. Reproduced this way
   rather than with per-cell borders, per the handoff. */
.fact-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
}
.fact-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fact-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fact-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fact {
  background: var(--ink);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fact--tight { padding: 22px 20px; }
.fact--roomy { padding: 34px 30px; }
.fact__label {
  font: 700 11px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-50);
}
.fact__label--accent { color: var(--cellar-coral); }
.fact__name { font-family: var(--display); font-size: 24px; text-transform: uppercase; line-height: 1.05; }
.fact__desc { font-size: 13.5px; line-height: 1.55; color: var(--p-62); }
.fact__copy { font-size: 15px; line-height: 1.7; color: var(--p-72); }

.section-band { padding: 64px var(--pad-x); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; }

/* Add-ons band on Home: flat wash over a full-bleed image. */
.addon-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.addon-band__wash { position: absolute; inset: 0; background: var(--scrim-wash); }
.addon-band__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  padding: 60px var(--pad-x);
  align-items: center;
}
.addon-band__copy { display: flex; flex-direction: column; gap: 14px; }
.addon-band__title { font-family: var(--display); font-size: 40px; line-height: 1.02; text-transform: uppercase; }
.addon-band__text { font-size: 14.5px; line-height: 1.6; color: var(--p-72); max-width: 380px; }

.addon-tiles { display: grid; gap: 14px; }
.addon-tiles--3 { grid-template-columns: repeat(3, 1fr); }
.addon-tiles--4 { grid-template-columns: repeat(4, 1fr); }
.addon {
  border: 1px solid var(--line-16);
  background: rgba(10, 10, 11, .6);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
a.addon:hover { border-color: var(--card-border-hover); color: inherit; }
.addon__price { font-family: var(--display); font-size: 26px; color: var(--accent); text-transform: uppercase; }
.addon__body { display: flex; flex-direction: column; gap: 7px; }
.addon__name { font: 600 14px/1.3 var(--sans); }
.addon__desc { font-size: 12.5px; line-height: 1.5; color: var(--p-58); }
/* CTA pinned to the tile's bottom edge regardless of copy length. */
.addon__cta {
  margin-top: auto;
  padding-top: 12px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Performer-page add-on tiles: larger and on the surface color, since they
   sit on the page background rather than over a washed photo like Home's. */
.addon--lg {
  background: var(--surface);
  padding: 24px 20px;
  gap: 9px;
}
.addon--lg .addon__price { font-size: 28px; }
.addon--lg .addon__name { font: 600 15px/1.3 var(--sans); }
.addon--lg .addon__desc { font-size: 13px; line-height: 1.55; }

.addon-caption { font-size: 13px; line-height: 1.55; color: var(--p-50); }
.addon-caption--dim { color: var(--p-45); }

/* Shown only at mobile width. The desktop add-ons copy already covers
   wallet payment in its own paragraph; mobile drops that column, so the
   line reappears as its own caption under the tiles. */
.mobile-only { display: none; }

/* ============================================================
   PERFORMER PAGES
   ============================================================ */
/* Generic section with a top hairline. Most performer-page and Visit-page
   sections are this shape. */
.section-pad {
  padding: 56px var(--pad-x);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section-pad--addons { gap: 26px; }
.section-pad--last { padding-bottom: 68px; }
.section-pad--bordered-bottom { border-top: none; border-bottom: 1px solid var(--line); }

/* Comedy performer page uses a full-width bottom-aligned hero rather than
   the music page's split. Its scrim is a third variant, deeper at the top
   than the standard hero scrim. */
.full-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.full-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,.5), rgba(10,10,11,.3) 40%, rgba(10,10,11,.96));
}
.full-hero__body {
  position: relative;
  padding: 0 var(--pad-x) 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
}
.full-hero__title { font-family: var(--display); font-size: 84px; line-height: .9; text-transform: uppercase; }

.split-hero { display: grid; grid-template-columns: 1.05fr 1fr; border-bottom: 1px solid var(--line); }
.split-hero__media { position: relative; min-height: 520px; overflow: hidden; }
/* Hidden on desktop. Text sits on solid ink beside the image (see
   .split-hero grid), so no scrim is needed for contrast. The mobile
   override below flips this back on and swaps in a vertical gradient. */
.split-hero__scrim { display: none; position: absolute; inset: 0; }
.split-hero__body {
  padding: 56px var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.back-link {
  font: 500 11.5px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--p-50);
  text-decoration: none;
}
.back-link:hover { color: var(--paper); }
.act-title { font-family: var(--display); font-size: 76px; line-height: .92; text-transform: uppercase; }
.act-support { font-size: 17px; line-height: 1.5; color: var(--p-78); }
.act-support strong { color: var(--paper); font-weight: 400; }

/* Fact rail: hairline above and below, auto-width columns. */
.fact-rail {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 26px;
  justify-content: start;
  padding: 18px 0;
  border-top: 1px solid var(--line-14);
  border-bottom: 1px solid var(--line-14);
}
.fact-rail__item { display: flex; flex-direction: column; gap: 7px; }
.fact-rail__label {
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--p-45);
}
.fact-rail__value { font: 600 15px/1 var(--sans); }

.two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 64px var(--pad-x); }
.prose { font-size: 16.5px; line-height: 1.7; color: var(--p-78); margin: 0; }
.col-stack { display: flex; flex-direction: column; gap: 18px; }

/* Set-times / lineup table */
.times { border: 1px solid var(--line-14); }
.times__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}
.times__row + .times__row { border-top: 1px solid var(--line-14); }
.times__label { font-size: 14.5px; color: var(--p-72); }
.times__time { font: 600 14.5px/1 var(--sans); color: var(--p-72); }
.times__row--headline .times__label { color: var(--paper); }
.times__row--headline .times__time { color: var(--accent); }
.times__row--surprise { background: rgba(255, 74, 36, .08); }
.times__row--surprise .times__label,
.times__row--surprise .times__time { color: var(--cellar-coral); }
.times__note { font-size: 13px; line-height: 1.55; color: var(--p-50); }
.times__aside { color: var(--p-50); }

.heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.section-title--md { font-family: var(--display); font-size: 40px; line-height: 1; text-transform: uppercase; }
.section-title--sm { font-family: var(--display); font-size: 34px; line-height: 1; text-transform: uppercase; }
.heading-row__note { font-size: 13.5px; line-height: 1.55; color: var(--p-58); max-width: 340px; }

/* Sticky mobile purchase bar. The primary mobile conversion element,
   so it is fixed for the life of the page on performer pages only. */
.buybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: rgba(10, 10, 11, .97);
  border-top: 1px solid var(--line-14);
  padding: 12px 18px;
  align-items: center;
  gap: 12px;
}
.buybar__info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.buybar__price { font: 600 13px/1 var(--sans); }
.buybar__detail { font: 500 11px/1 var(--sans); color: var(--p-55); }
.buybar__cta {
  background: var(--accent-solid);
  color: var(--accent-on-solid);
  border: none;
  padding: 17px 22px;
  font: 700 13px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

/* Venue-hire prompt strip on Shows pages */
.hire-prompt {
  margin: 44px var(--pad-x) 0;
  padding: 22px 24px;
  border: 1px solid var(--line-14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.hire-prompt__text { font-size: 14px; color: var(--p-72); }

/* Visit page */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card-bordered {
  border: 1px solid var(--line-14);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.card-bordered__title { font: 600 15px/1.3 var(--sans); }
.card-bordered__text { font-size: 13.5px; line-height: 1.6; color: var(--p-62); }
.map-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-14);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 28px;
}
.map-panel img { opacity: .8; }
.map-panel__label {
  position: relative;
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.map-panel__addr { position: relative; font-size: 14px; color: var(--p-78); }

/* Visit page: two-room split with more generous padding than Home's photo
   panels, since these cells are text rather than image. */
.room-split--text .room {
  min-height: 0;
  padding: 52px var(--pad-x);
}
.room-split--text .room__body {
  position: static;
  padding: 0;
  justify-content: flex-start;
  gap: 14px;
}
.room__name--lg { font-family: var(--display); font-size: 38px; line-height: 1; text-transform: uppercase; }
.room__copy { font-size: 15px; line-height: 1.7; color: var(--p-72); }
.mini-fact { display: flex; flex-direction: column; gap: 7px; }
.mini-fact__value { font-size: 14px; color: var(--p-78); }

/* ============================================================
   TABLET : 2-up card grid between the two design sets.
   Nothing in the handoff specifies a tablet layout; a 2-up grid
   is the stated obvious fill.
   ============================================================ */
@media (max-width: 1100px) and (min-width: 961px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .addon-tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .fact-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: 80px; }
}

/* ============================================================
   MOBILE
   The mobile design files are authoritative below this width.
   ============================================================ */
@media (max-width: 960px) {
  :root { --pad-x: 18px; }

  .ticker { padding: 8px 18px; font: 700 9.5px/1.35 var(--sans); gap: 12px; }
  .ticker__aside { display: none; }

  .nav { padding: 14px 18px; background: var(--ink); z-index: 20; }
  .nav__brand-name { font-size: 19px; }
  .nav__brand-sub { font-size: 8px; letter-spacing: .26em; }
  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  .hero { min-height: 74vh; }
  .hero--visit { min-height: 300px; }
  .hero__body { padding: 0 18px 36px; gap: 14px; }
  .hero__title { font-size: 56px; }
  .hero--visit .pagehead__title { font-size: 48px; }
  .hero__lede { font-size: 15px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__actions .btn { text-align: center; }
  .hero__actions .btn--solid { padding: 19px 0; }
  .hero__actions .btn--outline { padding: 18px 0; }

  .section-head { padding: 32px 18px 16px; }
  .section-title { font-size: 34px; }
  .pagehead { padding: 30px 18px 20px; }
  .pagehead__title { font-size: 46px; }
  .section-band { padding: 32px 18px; }

  /* Chip row becomes a horizontal scroll strip rather than wrapping. */
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .chip { flex: none; font-size: 11px; padding: 10px 15px; }
  .chip--active { padding: 11px 16px; }

  #ots-widget { padding: 14px 18px 44px; }
  .widget-section--shows { padding: 20px 18px 44px; }
  .card-grid { grid-template-columns: 1fr; gap: 16px; }
  .show-card__img { aspect-ratio: 16 / 9; }
  .show-card__date { font-size: 36px; }
  .show-card__title { font-size: 16px; }
  /* Availability badge gets its own row rather than sitting inline. */
  .show-card__metarow { flex-direction: column; align-items: flex-start; gap: 7px; }
  .badge { align-self: flex-start; }

  .room-split { grid-template-columns: 1fr; }
  .room { min-height: 280px; }
  .room + .room { border-left: none; border-top: 1px solid var(--line); }
  .room__body { padding: 24px 18px; }
  .room__name { font-size: 30px; }

  /* Residencies grid drops out entirely on mobile Home. */
  .section-band--weeklies { display: none; }

  .fact-grid--4, .fact-grid--3, .fact-grid--2 { grid-template-columns: 1fr; }
  .fact, .fact--tight, .fact--roomy { padding: 24px 18px; }

  .addon-band__grid { grid-template-columns: 1fr; gap: 24px; padding: 32px 18px; }
  .addon-band__title { font-size: 30px; }
  .addon-tiles--3, .addon-tiles--4 { grid-template-columns: 1fr; }
  /* Add-ons become horizontal rows on mobile. */
  .addon { flex-direction: row; align-items: baseline; gap: 14px; padding: 16px; flex-wrap: wrap; }
  .addon__price { font-size: 22px; }
  .addon__body { gap: 4px; flex: 1; min-width: 0; }
  .addon__cta { margin-top: 0; padding-top: 0; width: 100%; }
  .mobile-only { display: block; }

  .split-hero { grid-template-columns: 1fr; }
  /* Mobile performer pages lead with a bottom-aligned photo hero rather than
     a side-by-side split, so the media cell becomes the hero background. */
  .split-hero { position: relative; min-height: 62vh; align-items: flex-end; display: flex; overflow: hidden; }
  .split-hero__media { position: absolute; inset: 0; min-height: 0; }
  .split-hero__scrim { display: block; background: var(--scrim-hero); }
  .split-hero__body { position: relative; padding: 0 18px 28px; justify-content: flex-end; gap: 14px; }
  .act-title { font-size: 52px; }

  .full-hero { min-height: 60vh; }
  .full-hero__body { padding: 0 18px 28px; gap: 14px; }
  .full-hero__title { font-size: 46px; }

  .section-pad { padding: 32px 18px; }
  .section-pad--last { padding-bottom: 40px; }
  .act-support { font-size: 15px; }
  .fact-rail { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: none; padding: 0; }
  .fact-rail__item { background: var(--ink); padding: 16px 12px; }
  .fact-rail__label { font-size: 9px; letter-spacing: .18em; }
  .fact-rail__value { font-size: 14px; }

  .two-col { grid-template-columns: 1fr; gap: 28px; padding: 32px 18px; }
  .prose { font-size: 15.5px; }
  .times__row { padding: 13px 16px; }
  .section-title--md { font-size: 30px; }
  .section-title--sm { font-size: 26px; }

  .hire-prompt { margin: 28px 18px 0; padding: 18px; }

  .cards-4 { grid-template-columns: 1fr; }
  .card-bordered { padding: 16px; }
  /* No map panel on mobile, per the handoff. */
  .map-panel { display: none; }
  .room-split--text .room { padding: 28px 18px; }
  .room__name--lg { font-size: 30px; }

  .footer-cols { grid-template-columns: 1fr; gap: 26px; padding: 28px 18px 20px; }
  .legal { padding: 24px 18px 34px; flex-direction: column; gap: 12px; }

  /* Performer pages only: clear the sticky purchase bar. */
  body.has-buybar { padding-bottom: 82px; }
  .buybar { display: flex; }
}