/* Off Broadway Live theme for Arts People. Generated by scripts/build-ap-theme.mjs; edit src/ap/ap.css. */

@font-face{font-family:'Anton';src:url('../fonts/anton-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* Design tokens: the theater marquee at night. Change a color here and it
   changes on every page. Show pages override --accent from shows.json.
   @font-face rules live in src/lib/fonts.ts so their URLs carry the base path. */

:root {
  /* Color */
  --bg: #0a0a0b;
  --surface: #16161a;
  --surface-2: #1f1f25;
  --line: #2e2e36;
  --text: #f4efe6;
  --muted: #a8a29a;
  --neon: #e11d2a;        /* brand red: glow, rules, highlights */
  --neon-fill: #c8141f;   /* button fill: 5.1:1 with --text */
  --neon-text: #f25a63;   /* red text on dark: 5.5:1 on --surface */
  --gold: #e6b422;
  --gold-dim: #8a6c14;
  --paper: #f5ebdd;
  --paper-ink: #1a1512;
  --paper-muted: #5b4f45;
  --accent: var(--gold);

  /* Type */
  --font-display: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-body: 1.0625rem;   /* 17px */
  --lh-body: 1.6;
  --fs-small: 0.875rem;
  --fs-h1: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);

  /* Space and shape */
  --max: 1120px;
  --gutter: 16px;
  --radius: 6px;
  --radius-lg: 12px;
  --tap: 44px;
  --glow: 0 0 12px rgba(225, 29, 42, 0.8);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
}


/* Arts People theme: Option B, a dark marquee frame around a light "ticket" card.
   Source file. scripts/build-ap-theme.mjs prepends tokens.css and the @font-face
   rules and writes public/ap/ap-theme.css, which Arts People loads from its
   HTML headers field. Arts People's own CSS (public.min.css, a Bootstrap 3 base,
   plus the uploaded 1078-*.css) loads first, so these rules win ties.

   Ground rules:
   - Never hide or move anything inside the purchase flow; restyle only.
   - The whole page sits inside Arts People's <form>, so the header and footer
     use no <button> or <input> (they would submit the form).
   - Everything Arts People renders lives inside .obl-card. */

:root {
  --ink-red: #a3121b;      /* red text on paper: 6.4:1 on --paper */
  --card-2: #fffaf2;       /* raised surface inside the card */
  --card-line: #d9cbb6;
  --card-line-strong: #b9a88f;
}

/* ---------- Page frame ---------- */

/* Bootstrap 3 (inside Arts People's public.min.css) sets html to 10px, which
   would shrink every rem in this theme to 62.5%. Bootstrap 3 sizes in px, so
   restoring the browser default changes nothing of theirs. */
html { background: var(--bg); font-size: 100%; }
body {
  margin: 0;
  background: var(--bg) !important;
  /* Dark ink by default: Arts People adds pop-ups (seat list, warnings) at the end
     of the page, outside the card, on white boxes. The header, crumb and footer
     set their own light colors. */
  color: var(--paper-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
body > form { margin: 0; }

/* Arts People's outer page table becomes a plain block so the page can be fluid. */
table.page_public,
table.page_public > tbody,
table.page_public > tbody > tr,
table.page_public > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}

/* Admin-only links (only Arts People admins see these). */
#admin-pages-link, #sysmsg-link {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
}
#admin-pages-link a, #sysmsg-link a { color: var(--muted); }

/* The old banner markup, in case it is ever left in the top section. */
#header .logo img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */

.obl-header {
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 11, 0.94);
  border-bottom: 1px solid var(--line);
}
.obl-header__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(var(--max) + 2 * var(--gutter));
  min-height: 72px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.obl-logo { display: flex; align-items: center; min-height: var(--tap); flex-shrink: 0; }
.obl-logo img { display: block; width: 160px; height: auto; }

.obl-nav { display: flex; align-items: center; gap: 2px; margin: 0; }
.obl-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.obl-nav a:hover, .obl-nav a:focus-visible { color: var(--gold); }
.obl-nav a.is-active { border-bottom-color: var(--neon); }

.obl-header__call { margin-left: auto; flex-shrink: 0; }

/* Mobile menu: <details>, so it works with no JavaScript. */
.obl-menu { display: none; }
.obl-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 12px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.obl-menu > summary::-webkit-details-marker { display: none; }
.obl-menu__bars, .obl-menu__bars::before, .obl-menu__bars::after {
  display: block; position: relative;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform 0.2s;
}
.obl-menu__bars::before, .obl-menu__bars::after { content: ''; position: absolute; left: 0; }
.obl-menu__bars::before { top: -6px; }
.obl-menu__bars::after { top: 6px; }
.obl-menu[open] .obl-menu__bars { background: transparent; }
.obl-menu[open] .obl-menu__bars::before { transform: translateY(6px) rotate(45deg); }
.obl-menu[open] .obl-menu__bars::after { transform: translateY(-6px) rotate(-45deg); }
.obl-menu .obl-nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--gutter) 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.obl-menu .obl-nav a { border-top: 1px solid var(--line); border-bottom: 0; font-size: 1.1rem; padding: 0 4px; }

@media (max-width: 1099px) and (min-width: 900px) {
  .obl-nav a { padding: 0 7px; font-size: 0.88rem; letter-spacing: 0.04em; }
}
@media (max-width: 899px) {
  .obl-header__bar > .obl-nav { display: none; }
  .obl-menu { display: block; order: 3; }
  .obl-header__call { order: 2; }
}
@media (max-width: 440px) { .obl-menu__label { display: none; } }
@media (max-width: 400px) {
  .obl-logo img { width: 124px; }
  .obl-header__bar { gap: 10px; }
}

/* ---------- Buttons (shared by header and card) ---------- */

.obl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--gold);
  background: transparent;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
}
.obl-btn:hover, .obl-btn:focus-visible {
  color: var(--paper-ink);
  background: var(--gold);
  box-shadow: 0 0 18px rgba(230, 180, 34, 0.45);
  text-decoration: none;
}
/* "Box Office" wording only where the header has room for logo + button + Menu */
@media (max-width: 559px) { .obl-btn__long { display: none; } }
@media (max-width: 360px) { .obl-header__call { padding: 8px 10px; font-size: 0.85rem; } }

/* ---------- Main area and the ticket card ---------- */

.obl-main {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 20px var(--gutter) 48px;
}
.obl-crumb {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.obl-crumb a { color: var(--gold); text-decoration: none; }
.obl-crumb a:hover { color: var(--text); }

.obl-card {
  background: var(--paper);
  color: var(--paper-ink);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3.5vw, 40px);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
}
.obl-card td, .obl-card th { color: var(--paper-ink); vertical-align: top; }
.obl-card a { color: var(--ink-red); text-underline-offset: 3px; }
.obl-card a:hover { color: var(--paper-ink); }
.obl-card img { max-width: 100%; height: auto; }

.obl-card h1, .obl-card h2, .obl-card h3, .obl-card h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--paper-ink);
  margin: 0 0 0.5em;
}
.obl-card h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.obl-card h2 { font-size: 1.5rem; }
.obl-card h3 { font-size: 1.3rem; }
.obl-card h4 { font-size: 1.15rem; }
.obl-card p { margin: 0 0 0.9em; }
.obl-card hr { height: 0; background: none; border: 0; border-top: 1px solid var(--card-line); margin: 20px 0; }

/* Arts People's sheet sets .normal and .content to 18px black */
.obl-card .normal, .obl-card .content { font-size: inherit; color: inherit; }

/* Status banners */
.obl-card .message, .obl-card .error {
  font-size: 1.05rem;
  padding: 10px 14px;
  border-radius: var(--radius);
}
.obl-card .message { background: var(--bg); color: var(--text); border-left: 4px solid var(--gold); }
.obl-card .error { background: var(--ink-red); color: #fff; }

/* Sidebars Arts People marks with a black rule at left */
.obl-card #TBL180, .obl-card #TBL2822, .obl-card #TBL5776, .obl-card #TBL3681 { border-left-color: var(--gold); padding-left: 14px; }

/* Checkout step indicator (from 1078OffBroadwayLiive_CART.css) */
.obl-card .progress_bar { color: var(--paper-muted); }
.obl-card .curr_shopping_cart,
.obl-card .inactive_shopping_cart {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.obl-card .curr_shopping_cart { color: var(--ink-red); border: 2px solid var(--ink-red); }
.obl-card .inactive_shopping_cart, .obl-card .active_shopping_cart, .obl-card .label_shopping_cart { color: var(--paper-muted); }

/* Seat map: hands off. Arts People's mobile seat picker pins the map below an
   88px bar; a sticky site header would sit over it, so let the header scroll. */
/* Pin the seat map to the font, size, color and line height it has today, so the
   card's typography cannot shift seat sizes or label fit. */
.obl-card .seatmap-div,
.obl-card .seatmap-container,
.obl-card .seatmap-legend {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.42857143;
  color: #000;
}
/* Seat map: the whole room is always visible, never in a scrolling box. On the
   live page Arts People's script widens the stage and table labels after load,
   making the map about 743px wide. Below 900px it is scaled to fit the card with
   CSS zoom (not transform, so taps land on the right seat); patrons pinch-zoom
   for detail. Each breakpoint uses the narrowest screen in its range:
   zoom = (screen - 2 gutters - 2 card paddings) / 760px. */
/* Seat page (page 148): hide Arts People's Back button. Patrons arrive here from a
   date link on the main site, so Back only detours to Arts People's own show page;
   the header and the browser's back button cover leaving. Scoped by page and
   button id, so Back on other pages and the cart's Cancel Order are untouched. */
.tt-page-148 #BTNbtn_cancel { display: none !important; }

/* Arts People's "Back to Mobile Site" link (phones only): it leads to an unthemed
   mobile site. Its markup isn't in the desktop pages, so match it two ways:
   by an address mentioning "mobile", and by being a link placed after Arts
   People's page table (the end of the page, outside header, card and footer). */
a[href*="mobile" i]:not(.obl-header a):not(.obl-card a):not(.obl-footer a),
table.page_public ~ a,
table.page_public ~ * a[href*="mobile" i],
body > a { display: none !important; }

/* Links around taken seats carry no text; keep Arts People's color anyway */
.obl-card .seatmap-div a { color: #b5aaaa; }
.obl-card .public-seat-map { max-width: 100%; overflow: visible; }
.obl-card .seatmap-container { zoom: var(--map-zoom, 1); }
@media (max-width: 899px) { .obl-card { --map-zoom: 0.96; } }
@media (max-width: 839px) { .obl-card { --map-zoom: 0.89; } }
@media (max-width: 779px) { .obl-card { --map-zoom: 0.81; } }
@media (max-width: 719px) { .obl-card { --map-zoom: 0.76; } }
@media (max-width: 659px) { .obl-card { --map-zoom: 0.69; } }
@media (max-width: 599px) { .obl-card { --map-zoom: 0.61; } }
@media (max-width: 539px) { .obl-card { --map-zoom: 0.54; } }
@media (max-width: 479px) { .obl-card { --map-zoom: 0.48; } }
@media (max-width: 429px) { .obl-card { --map-zoom: 0.46; } }
@media (max-width: 413px) { .obl-card { --map-zoom: 0.42; } }
@media (max-width: 389px) { .obl-card { --map-zoom: 0.38; } }
@media (max-width: 359px) { .obl-card { --map-zoom: 0.33; } }
.obl-card .selected-seat-list { height: auto; min-height: 40px; display: flow-root; padding-bottom: 6px; background: var(--card-2); border-bottom-color: var(--card-line); border-radius: var(--radius) var(--radius) 0 0; }
.obl-card .selected-seat-list .seat-controls .btn { margin-top: 0; margin-bottom: 0; }
.obl-card .seat-count-h { line-height: var(--tap); font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-ink); }
.obl-card .seat-count { color: var(--ink-red); }
@media (max-width: 800px) {
  .obl-card .selected-seat-list { min-width: 0; }
  .obl-card .public-seat-map::before {
    content: 'Pinch to zoom in on the seats';
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper-muted);
  }
}
body:has(.ap-mobile-page) .obl-header,
body:has(.seatmap-container) .obl-header { position: relative; } /* relative, not static: the phone menu drops down from the header */

/* Arts People's prompts ("Please select a performance") */
.obl-card .emph {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-red);
}

/* Layout tables inside the card */
.obl-card table.content,
.obl-card table.content > tbody > tr > td > table.table_basic { width: 100%; }
.obl-card .well {
  border-collapse: separate; /* Bootstrap collapses tables, which drops their padding */
  border-spacing: 0;
  background: var(--card-2);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 20px;
  margin: 0 8px 16px 0;
}

/* Data tables (cart / order summary). Use table.table only: 1078-fbl-2019-mk.css
   gives every .table a black, white, 10px, centered look meant for the dining-table
   labels on the seat map, and those labels must keep it. */
.obl-card table.table {
  background: transparent;
  color: var(--paper-ink);
  font-size: 0.95rem;
  text-align: left;
  margin-bottom: 16px;
}
.obl-card table.table > tbody > tr > td,
.obl-card table.table > thead > tr > th,
.obl-card table.table-bordered,
.obl-card table.table-bordered > tbody > tr > td,
.obl-card table.table-bordered > thead > tr > th { border-color: var(--card-line); }
.obl-card table.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(26, 21, 18, 0.04); }

/* Header cells. Arts People's sheet makes these black with white text (and white
   required-field asterisks), so keep them dark and give them the marquee look. */
.obl-card table.table > thead > tr > th,
.obl-card .table-bordered th,
.obl-card .htable th,
.obl-card #membership_level_table th,
.obl-card #membership_table th {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-color: var(--bg);
  border-bottom: 2px solid var(--gold);
}
.obl-card .table-bordered .required_asterisk { color: var(--gold); }
.obl-card .headtext { color: var(--text); font-family: var(--font-display); font-weight: 400; letter-spacing: 0.06em; }
.obl-card .pp-order-summary { width: 100% !important; max-width: 560px; }
.obl-card #sum_total_row strong { font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; }

/* Buttons Arts People renders */
.obl-card .btn,
.obl-card input[type='submit'],
.obl-card #Abuy_tickets,
.obl-card #Aitem_select,
.obl-card #mem_select a,
.obl-card #Apass_select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin: 4px 4px 4px 0;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: var(--neon-fill);
  background-image: none;
  border: 2px solid var(--neon-fill);
  border-radius: var(--radius);
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
}
.obl-card .btn:hover, .obl-card .btn:focus-visible,
.obl-card input[type='submit']:hover, .obl-card input[type='submit']:focus-visible,
.obl-card #Abuy_tickets:hover, .obl-card #Aitem_select:hover,
.obl-card #mem_select a:hover, .obl-card #Apass_select:hover {
  color: #fff;
  background: var(--neon-fill);
  border-color: var(--neon-fill);
  box-shadow: 0 0 0 1px var(--neon), 0 0 14px rgba(225, 29, 42, 0.55);
}
/* Secondary actions (Back, Continue Shopping, Cancel Order) */
.obl-card .btn-default,
.obl-card .btn-outline-secondary,
.obl-card input.btn-default,
.obl-card input.btn-outline-secondary {
  color: var(--paper-ink);
  background: transparent;
  border-color: var(--paper-ink);
}
.obl-card .btn-default:hover, .obl-card .btn-default:focus-visible,
.obl-card .btn-outline-secondary:hover, .obl-card .btn-outline-secondary:focus-visible,
.obl-card input.btn-default:hover, .obl-card input.btn-default:focus-visible,
.obl-card input.btn-outline-secondary:hover, .obl-card input.btn-outline-secondary:focus-visible {
  color: var(--paper);
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  box-shadow: none;
}
/* Small icon buttons (remove ticket from cart) keep their compact shape */
.obl-card .btn-xs {
  min-height: 0;
  margin: 0;
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
}
.obl-card .btn-xs:hover { background: rgba(26, 21, 18, 0.08); border-color: var(--card-line); box-shadow: none; }
.obl-card .btn[disabled], .obl-card input[type='submit'][disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Form fields */
.obl-card .form-control,
.obl-card input[type='text']:not(.seatmap-div *, .seatmap *),
.obl-card input[type='email']:not(.seatmap-div *, .seatmap *),
.obl-card input[type='password']:not(.seatmap-div *, .seatmap *),
.obl-card input[type='tel']:not(.seatmap-div *, .seatmap *),
.obl-card input[type='number']:not(.seatmap-div *, .seatmap *),
.obl-card select:not(.seatmap-div *, .seatmap *),
.obl-card textarea:not(.seatmap-div *, .seatmap *) {
  max-width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 16px; /* 16px stops iOS zooming into fields */
  color: var(--paper-ink);
  background: #fff;
  border: 1px solid var(--card-line-strong);
  border-radius: var(--radius);
  box-shadow: none;
}
.obl-card .form-control:focus,
.obl-card input:not([type='submit'], [type='checkbox'], [type='radio']):not(.seatmap-div *, .seatmap *):focus,
.obl-card select:not(.seatmap-div *, .seatmap *):focus,
.obl-card textarea:not(.seatmap-div *, .seatmap *):focus {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--paper-ink);
  box-shadow: none;
}
.obl-card label { font-weight: 600; }

/* ---------- Show page columns ---------- */

/* Description | performances | pricing. Arts People sets these widths inline. */
.obl-card #TBL236 { margin-right: 0 !important; }
.obl-card #TBL2885 > tbody > tr > td { padding: 0 12px; }
.obl-card #TBL2885 > tbody > tr > td:first-child { padding-left: 0; }
.obl-card #TBL2885 > tbody > tr > td:last-child { padding-right: 0; }

/* Wider description column (Arts People sets 33%) and a roomier cart column */
@media (min-width: 801px) {
  .obl-card #TBL2885 > tbody > tr > td:first-child { width: 40% !important; }
  .obl-card .well h1 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); }
}

/* Cart and login sit side by side only when there is room for both */
@media (min-width: 1000px) { .obl-card #TBLleft_side { min-width: 380px; } }
@media (max-width: 999px) {
  .obl-card #TBL75600004, .obl-card #TBL75600004 > tbody, .obl-card #TBL75600004 > tbody > tr, .obl-card #TBL75600004 > tbody > tr > td {
    display: block;
    width: auto !important;
  }
  .obl-card #TBL75600004 > tbody > tr > td:empty { display: none; }
  .obl-card #TBL75600004 .well { margin-right: 0; }
}

/* ---------- Phones and small tablets: stack every layout table ---------- */

@media (max-width: 800px) {
  .obl-card table.table_basic,
  .obl-card table.table_basic > tbody,
  .obl-card table.table_basic > tbody > tr,
  .obl-card table.table_basic > tbody > tr > td,
  .obl-card #TBL236, .obl-card #TBL236 > tbody, .obl-card #TBL236 > tbody > tr, .obl-card #TBL236 > tbody > tr > td,
  .obl-card #TBL300, .obl-card #TBL300 > tbody, .obl-card #TBL300 > tbody > tr, .obl-card #TBL300 > tbody > tr > td,
  .obl-card #TBL180, .obl-card #TBL3681, .obl-card #TBL5776,
  .obl-card table.content, .obl-card table.content > tbody, .obl-card table.content > tbody > tr, .obl-card table.content > tbody > tr > td,
  .obl-card #TBL152, .obl-card #TBL152 > tbody, .obl-card #TBL152 > tbody > tr, .obl-card #TBL152 > tbody > tr > td,
  .obl-card #TBL244, .obl-card #TBL244 > tbody, .obl-card #TBL244 > tbody > tr, .obl-card #TBL244 > tbody > tr > td {
    display: block;
    width: auto !important;
  }
  .obl-card table.table_basic > tbody > tr > td,
  .obl-card #TBL2885 > tbody > tr > td { padding-left: 0 !important; padding-right: 0 !important; }
  .obl-card #TBL2885 > tbody > tr > td:empty { display: none; }
  .obl-card #TBL2885 > tbody > tr > td + td { margin-top: 16px; }
  .obl-card .well { margin-right: 0; }
}

/* ---------- Show descriptions written with the obl- classes ---------- */
/* Paste-ready markup lives in src/ap/content/. Everything also degrades to
   plain headings and lists if the editor ever strips the classes. */

.obl-card .show_text_div, .obl-card span.normal { overflow-wrap: anywhere; max-width: 100%; }

.obl-card .obl-kicker {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: 4px;
}
.obl-card .obl-live { font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink-red); }
.obl-card .obl-title { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); margin-bottom: 8px; }
.obl-card .obl-anton { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.obl-card .obl-title em { font-style: italic; color: var(--ink-red); }
.obl-card .obl-tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--paper-muted); }

.obl-card .obl-nights { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 20px 0; }
.obl-card .obl-night {
  background: var(--card-2);
  border: 1px solid var(--card-line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.obl-card .obl-night p { margin-bottom: 0.5em; }
.obl-card .obl-night p:last-child { margin-bottom: 0; }
.obl-card .obl-label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-red);
}
.obl-card .obl-doors { font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }

.obl-card .obl-notes { list-style: none; padding: 0; margin: 0 0 20px; }
.obl-card .obl-notes li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.obl-card .obl-notes li::before {
  content: ''; position: absolute; left: 2px; top: 0.6em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 6px rgba(225, 29, 42, 0.6);
}

.obl-card .obl-callout {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.35;
}
.obl-card .obl-callout strong { color: var(--gold); font-weight: 400; font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }

.obl-card .obl-section {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 28px 0 12px;
}
.obl-card .obl-section::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }

.obl-card .obl-season { list-style: none; padding: 0; margin: 0; }
.obl-card .obl-season li { padding: 14px 0; border-top: 1px solid var(--card-line); }
.obl-card .obl-season li:first-child { border-top: 0; padding-top: 0; }
.obl-card .obl-dates {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-red);
  margin-bottom: 2px;
}
.obl-card .obl-season h4 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem); margin: 0 0 2px; }
.obl-card .obl-sub { font-style: italic; color: var(--paper-muted); margin: 0; }

/* Pricing description */
.obl-card .obl-prices { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.obl-card .obl-prices th,
.obl-card .obl-prices td { padding: 8px 0; border-bottom: 1px dashed var(--card-line-strong); vertical-align: baseline; }
.obl-card .obl-prices th { text-align: left; font-weight: 400; padding-right: 12px; }
.obl-card .obl-prices td { text-align: right; white-space: nowrap; font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; color: var(--ink-red); }
.obl-card .obl-prices td small { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 0.75rem; color: var(--paper-muted); }
.obl-card .obl-group { font-family: var(--font-serif); font-size: 1.3rem; margin: 22px 0 6px; }
.obl-card .obl-group:first-child { margin-top: 0; }
.obl-card .obl-fine { font-size: 0.85rem; font-style: italic; color: var(--paper-muted); }
.obl-card .obl-policy { font-weight: 600; color: var(--ink-red); margin-top: 16px; }

/* ---------- Legacy normalizer ---------- */
/* Descriptions typed in the visual editor carry inline fonts, colors and point
   sizes. These rules map them onto the brand so older shows look on-theme
   without a rewrite. Scoped to description text only, never the purchase flow. */

.obl-card span.normal [style*='impact'] { font-family: var(--font-display) !important; letter-spacing: 0.02em; }
.obl-card span.normal [style*='georgia'],
.obl-card span.normal [style*='palatino'],
.obl-card span.normal [style*='times'] { font-family: var(--font-serif) !important; }
.obl-card span.normal [style*='arial'],
.obl-card span.normal [style*='helvetica'],
.obl-card span.normal [style*='verdana'],
.obl-card span.normal [style*='tahoma'] { font-family: var(--font-sans) !important; }

.obl-card span.normal [style*='#000000'],
.obl-card span.normal [style*='rgb(0, 0, 0)'] { color: var(--paper-ink) !important; }
.obl-card span.normal [style*='#800000'],
.obl-card span.normal [style*='#ff0000'],
.obl-card span.normal [style*='#993300'],
.obl-card span.normal [style*='#cc0000'],
.obl-card span.normal [style*='rgb(128, 0, 0)'],
.obl-card span.normal [style*='rgb(255, 0, 0)'] { color: var(--ink-red) !important; }
/* White "spacer" dots typed onto a white page */
.obl-card span.normal [style*='#ffffff'] { color: transparent !important; }

.obl-card span.normal [style*='36pt'] { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem) !important; line-height: 1.15; }
.obl-card span.normal [style*='24pt'] { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem) !important; line-height: 1.25; }
.obl-card span.normal [style*='18pt'] { font-size: 1.2rem !important; line-height: 1.3; }
.obl-card span.normal [style*='14pt'] { font-size: 1.05rem !important; }
.obl-card span.normal [style*='12pt'] { font-size: 0.95rem !important; }

/* ---------- Footer ---------- */

.obl-footer {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), #060607);
  color: var(--text);
  padding-top: 40px;
}
.obl-footer p { margin: 0 0 8px; }
.obl-footer a { color: var(--gold); text-underline-offset: 3px; display: inline-block; padding-block: 2px; }
.obl-footer a:hover { color: var(--text); }
.obl-footer__grid,
.obl-footer__base {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.obl-footer__grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.obl-footer__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.5rem; }
.obl-glow { font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--neon-text); text-shadow: var(--glow); }
.obl-footer__award { color: var(--gold); font-size: 0.95rem; }
.obl-footer__h { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--muted); margin-bottom: 10px !important; }
.obl-footer__small { font-size: var(--fs-small); color: var(--muted); }
.obl-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  width: calc(100% - 2 * var(--gutter)); max-width: var(--max); padding-inline: 0;
  margin-top: 28px; padding-top: 20px; padding-bottom: 32px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
}
.obl-footer__base p { margin: 0; }


/* ---------- Pop-ups (Bootstrap modals, popovers, dropdowns) ---------- */
/* Arts People appends these to the end of the page, outside .obl-card. */

.modal-content {
  background: var(--card-2);
  color: var(--paper-ink);
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
}
.modal-header, .modal-footer { border-color: var(--card-line); }
.modal-title, .modal-content h3, .modal-content h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--paper-ink);
}
.modal-content .close { color: var(--paper-ink); opacity: 0.6; text-shadow: none; }
.modal-content .close:hover { opacity: 1; }
.modal-content .btn {
  min-height: var(--tap);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-ink);
  background: transparent;
  border: 2px solid var(--paper-ink);
  border-radius: var(--radius);
  box-shadow: none;
}
.modal-content .btn:hover, .modal-content .btn:focus-visible { color: var(--paper); background: var(--paper-ink); }
.modal-content .btn-primary { color: #fff; background: var(--neon-fill); border-color: var(--neon-fill); }
.modal-backdrop.in { opacity: 0.6; }
.popover, .dropdown-menu { color: var(--paper-ink); }