/* Cape Ann Symphony — concert detail page (2026).
   Loaded only on /concerts/{slug}. Depends on base design tokens
   from base.css (colors, --rule, --ink scale, --accent).
   ============================================================ */

/* ==================== 1. DARK HERO ==================== */
.concert-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--bg);
}
/* ---------------------------------------------------------------
   Hero background: option A — single blurred wash (BACKUP).
   To revert from the triptych to the single-image wash, uncomment
   the block below AND comment out / delete the .concert-hero-panes
   rules that follow. The .concert-hero-panes div in the template
   has no styling target when these rules are off, so it renders
   as an empty invisible box — safe to leave in place.

.concert-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(30px) saturate(1.35);
  transform: scale(1.25);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
   --------------------------------------------------------------- */

/* Three stacked color panes — each pane is a heavily-blurred crop of
   a different vertical third of the concert image (left / center /
   right), forming a triptych of palettes behind the headline. The
   inline `style="--hero-bg: url(...)"` on .concert-hero supplies the
   image; if it's missing, .concert-hero-panes isn't rendered. */
.concert-hero-panes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  pointer-events: none;
  z-index: 0;
}
.concert-hero-panes > span {
  background-image: var(--hero-bg, none);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  filter: blur(30px) saturate(1.45);
  opacity: 0.6;
}
.concert-hero-panes > span:nth-child(1) { background-position: 0% center; }
.concert-hero-panes > span:nth-child(2) { background-position: 50% center; }
.concert-hero-panes > span:nth-child(3) { background-position: 100% center; }

.concert-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.62) 100%);
  pointer-events: none;
  z-index: 0;
}
.concert-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px;
  padding: 48px 32px 56px;
  align-items: center;
}
.concert-hero-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.65);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
.concert-hero-back {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
  transition: color 120ms, border-color 120ms;
}
.concert-hero-back:hover { color: var(--bg); border-bottom-color: var(--bg); }
.concert-hero-crumb-sep { color: rgba(255, 255, 255, 0.3); }
.concert-hero-kind {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}
.concert-hero-title {
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 1.03;
  color: var(--bg);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.concert-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
}
.concert-hero-chips .chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--bg);
}
.concert-hero-sub {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 36ch;
}
.concert-hero-meta {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 640px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
}
.concert-hero-meta .label {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  margin-bottom: 6px;
}
.concert-hero-meta-head {
  font-weight: 500;
  color: var(--bg);
}
.concert-hero-meta-sub {
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
  font-size: 14px;
}
.concert-hero-meta-extra {
  color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
}

.concert-hero-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.concert-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.concert-hero-media-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.05) 0 12px,
    rgba(255,255,255,0.02) 12px 24px);
  color: rgba(255, 255, 255, 0.5);
  font-family: "Inter", sans-serif; font-size: 14px;
}

/* ==================== 2. ALERTS ==================== */
.concert-alerts {
  padding: 20px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.concert-alert {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding: 14px 18px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
}
.concert-alert strong {
  display: inline;
  color: var(--ink);
  margin-right: 6px;
}
.concert-alert.is-warn {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.concert-alert.is-warn strong { color: var(--accent); }
.concert-alert.is-soldout {
  background: color-mix(in srgb, #B42318 8%, var(--bg));
  border-color: color-mix(in srgb, #B42318 30%, transparent);
}
.concert-alert.is-soldout strong { color: #B42318; }
.concert-alert.is-info { /* base style already */ }

/* ==================== 3. BODY LAYOUT ==================== */
.concert-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
  gap: 64px;
  padding: 64px 32px 96px;
  align-items: start;
}
.concert-col-main { min-width: 0; }
.concert-col-aside {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* sticky positioning creates a new stacking context with default
     z-index auto. Pin it below the site header (z=50) and below the
     date cards so a tall ticket card scrolling past doesn't appear
     to layer over the date selector in the main column on narrow
     two-column widths. */
  z-index: 0;
}

.concert-section { margin-top: 64px; }
.concert-section:first-child { margin-top: 0; }
.concert-section-h {
  font-size: 40px;
  line-height: 1.1;
  color: var(--ink);
  margin: 8px 0 0;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ==== Description / lede ==== */
.concert-lede {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
}
.concert-lede p + p { margin-top: 14px; }

/* ==== Program list ==== */
.concert-program-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--rule);
}
.concert-program-list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.concert-program-n {
  font-size: 20px;
  color: var(--ink-4);
  font-feature-settings: "tnum";
}
.concert-program-composer {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.concert-program-piece {
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 4px;
}

/* ==== Featured artist ==== */
.concert-featured-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
}
.concert-featured-portrait {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
}
.concert-featured-portrait img,
.concert-featured-portrait-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background-size: cover;
  background-position: 50% 50%; /* fallback if focalpoint not set */
  background-repeat: no-repeat;
}
.concert-featured-portrait-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--ink-4);
  font-family: "Inter", sans-serif; font-size: 14px;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 10px, transparent 10px 20px);
}
.concert-featured-name {
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.concert-featured-role {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
  margin: 4px 0 0;
}
.concert-featured-bio {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.concert-featured-link { margin-top: 16px; }

/* ==== Musicians ==== */
.concert-musicians {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 48px;
  font-family: "Inter", sans-serif;
}
.concert-musicians li {
  break-inside: avoid;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.concert-musician-name { color: var(--ink); font-weight: 500; }
.concert-musician-inst { color: var(--ink-3); font-style: italic; }

/* ==== Getting-there 4-up ==== */
.concert-info-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
}
.concert-info-cell .label { margin-bottom: 8px; }
.concert-info-title {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.concert-info-body {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* Venue cell can render multiple venues stacked when a concert plays
   at more than one hall (e.g. Manchester Essex + Dolan PAC on the
   same program). The --stack variant adds spacing between blocks;
   the --note variant is the muted accessibility footer shown once
   below the list. */
.concert-info-body--stack {
  margin-bottom: 14px;
}
.concert-info-body--stack:last-of-type {
  margin-bottom: 0;
}
.concert-info-body--note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ==== Date cards (map + calendar per performance) ==== */
/* Always single-column. The containing .container caps at 1280px and
   the main column inside the page-level 2-col grid lands at ~650px;
   trying to fit two date cards side-by-side leaves each map widget
   too narrow to be useful. Stacking keeps every map readable. */
.concert-dates-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.concert-date-card {
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.concert-date-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.concert-date-card-day {
  font-size: 13px;
  color: var(--ink-3);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.concert-date-card-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.concert-date-card-d {
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.concert-date-card-m {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.concert-date-card-time {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 500;
  text-align: right;
}
.concert-date-card-venue {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.concert-date-card-venue strong { color: var(--ink); font-weight: 600; }
.concert-date-card-venue span { color: var(--ink-3); }
.concert-date-card-map {
  margin-top: 4px;
}
.concert-date-card-map .cmsmap,
.concert-date-card-map > iframe,
.concert-date-card-map > div {
  width: 100% !important;
  height: 220px !important;
  border: 1px solid var(--rule);
  outline: none !important;
}
.concert-date-card-link { margin-top: 4px; align-self: flex-start; }

/* AddEvent button restyle */
.concert-addevent.addeventatc {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule-2) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  /* AddEvent's script gives its button + dropdown a very high z-index
     (somewhere north of 9999) which made the button float ABOVE the
     site header (z-index 50) on scroll. We pin it to z-index 1 and
     isolate its stacking context so the dropdown it renders on click
     stays trapped underneath the header. */
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate;
}
.concert-addevent.addeventatc:hover {
  border-color: var(--ink) !important;
  background: var(--bg-elev) !important;
}
.concert-addevent .addeventatc_icon { display: none !important; }
/* Belt-and-suspenders: also clamp the dropdown the library appends.
   It's typically rendered as a sibling/child with its own z-index. */
.addeventatc_dropdown { z-index: 5 !important; }

/* ==== Programme notes (editorial "program" field) ==== */
.concert-program-notes {
  margin-top: 32px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}
.concert-program-notes p + p { margin-top: 16px; }
.concert-program-notes h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  margin: 24px 0 8px;
  font-size: 22px;
}

/* ==== Sponsors ==== */
.concert-sponsors-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  align-items: center;
}
.concert-sponsor {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.concert-sponsor img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  display: block;
  filter: grayscale(0.4);
  transition: filter 150ms;
}
.concert-sponsor a:hover img { filter: grayscale(0); }
.concert-sponsor-name {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--ink-3);
}

/* ==== Perch Blocks (editor-driven) ==== */
.concert-block-headline .concert-section-h {
  font-size: 32px;
  color: var(--ink);
}
.concert-block-text-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.concert-block-text-grid.has-image {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
}
.concert-block-text-img img {
  width: 100%; height: auto;
  display: block;
  border: 1px solid var(--rule);
}
.concert-block-text-body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}
.concert-block-text-body p + p { margin-top: 14px; }

.concert-video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid var(--rule);
}
.concert-video-embed iframe,
.concert-video-embed object,
.concert-video-embed embed {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.concert-video-caption {
  margin-top: 10px;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
}

/* ==================== 4. STICKY TICKET RAIL ==================== */
.concert-ticketcard,
.concert-pastcard {
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
}

/* Concert-colored stub at the top of the ticket card, mirroring the
   .ticket-card--list treatment on /profile. The color comes from
   --concert-color (set inline on <main> from fm_concerts.rgbCode);
   falls back to --accent when no rgbCode is set.
   The ::after dots straddle the bar's TOP edge so the strip looks
   torn-off along the perforation. */
.concert-ticketcard {
  position: relative;
  overflow: hidden;
  padding-top: 46px; /* 28px base + 18px bar */
  border-top: 0;
}
.concert-ticketcard::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--concert-color, var(--accent));
}
.concert-ticketcard::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -6px;
  height: 12px;
  background-image: radial-gradient(
    circle at 7px 6px,
    var(--bg) 0 3px,
    transparent 3.5px
  );
  background-size: 14px 12px;
  background-repeat: repeat-x;
  background-position: center top;
}
.concert-ticketcard .label { font-size: 11px; color: var(--ink-3); }

.concert-ticketcard-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.concert-ticketcard-price .display {
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.concert-ticketcard-price-note {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
}
.concert-ticketcard-lede {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--ink-3);
  margin: 10px 0 0;
  line-height: 1.5;
}

.concert-ticketform { margin-top: 24px; }
.concert-ticketrow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.concert-ticketrow:last-of-type { border-bottom: 1px solid var(--rule); }
.concert-ticketrow-label {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.concert-ticketrow-name {
  font-weight: 500;
  color: var(--ink);
}

/* Stepper */
.concert-ticketrow-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--rule-2, var(--rule));
  border-radius: 2px;
  overflow: hidden;
}
.stepper-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
  transition: background 100ms;
  font-family: "Inter", sans-serif;
}
.stepper-btn:hover { background: var(--bg-elev); }
.stepper-btn:disabled { color: var(--ink-4); cursor: not-allowed; }
.stepper-input {
  width: 36px;
  height: 36px;
  border: none;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.stepper-input[value="0"] { color: var(--ink-4); }

.concert-ticketform hr.rule {
  margin: 22px 0 0;
  border: none;
  border-top: 1px solid var(--rule);
}
.concert-ticketcard-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 20px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
}
.concert-ticketcard-subtotal-label { color: var(--ink-3); }
.concert-ticketcard-subtotal-amount {
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
}

.concert-ticketcard-cta {
  width: 100%;
}
.concert-ticketcard-cta:disabled,
.concert-ticketcard-cta[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.concert-ticketcard-cta.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
.concert-ticketcard-footnote {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--ink-3);
  margin: 14px 0 0;
  text-align: center;
  line-height: 1.5;
}
.concert-ticketcard-footnote .ulink {
  color: var(--ink-2);
}

.concert-boxoffice { width: 100%; text-align: center; }

/* Past-concert sidebar card */
.concert-pastcard h3 {
  font-size: 22px;
  margin: 8px 0 10px;
  line-height: 1.2;
}
.concert-pastcard p {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 20px;
}

/* ==================== RESPONSIVE ==================== */
/* The single-column threshold sits above iPad 13" landscape (1366px)
   so the layout stacks before columns get cramped. Anything wider
   than 1366 keeps the two-column rail. Earlier this was at 1100px
   which left iPad 13" landscape with a tight side-by-side layout
   plus 2-up date cards in a narrow main column — visually colliding
   with the sticky ticket rail on the right. */
@media (max-width: 1366px) {
  .concert-hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
  .concert-hero-media { max-width: 520px; aspect-ratio: 16 / 10; }
  .concert-body {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 32px 80px;
  }
  .concert-col-aside { position: static; top: auto; }
  .concert-ticketcard { max-width: 540px; margin: 0 auto; }
  .concert-pastcard { max-width: 540px; margin: 0 auto; }
}

/* Medium ticket-card compression for the stacked-but-not-phone range
   (601px–1366px). Lighter than the phone-only block below — keeps
   the price display readable at iPad sizes while shaving roughly
   80–100px of vertical space off the ticket card. */
@media (max-width: 1366px) and (min-width: 601px) {
  .concert-ticketcard { padding: 24px; padding-top: 40px; }
  .concert-ticketcard::before { height: 16px; }
  .concert-ticketcard-price .display { font-size: 38px; }
  .concert-ticketcard-lede { margin-top: 8px; }
  .concert-ticketform { margin-top: 20px; }
}

/* Multi-date concerts: the sticky right rail (ticket card with tier
   selector) dominates the viewport while the patron scrolls past the
   stacked date cards / maps in the main column. Drop the aside to
   static for multi-date concerts so the maps don't feel "obscured"
   by a hovering tier picker. Single-date concerts keep the sticky
   behaviour, where it's a clear win. */
.concert-body:has(.concert-dates-grid .concert-date-card:nth-child(2)) .concert-col-aside {
  position: static;
  top: auto;
}
@media (max-width: 720px) {
  .concert-hero-meta {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .concert-hero-meta-cell:last-child { grid-column: 1 / -1; }
  .concert-section { margin-top: 48px; }
  .concert-section-h { font-size: 28px; }
  .concert-featured-grid { grid-template-columns: 1fr; gap: 20px; }
  .concert-featured-portrait { width: 120px; margin: 0 auto; }
  .concert-info-grid { grid-template-columns: 1fr; }
  .concert-musicians { columns: 1; }
  .concert-program-list li { grid-template-columns: 40px 1fr; gap: 12px; }
  .concert-program-piece { font-size: 20px; }
}

/* Phone-sized ticket card — compresses padding + price typography so
   the card stops dominating the viewport on small screens. Avoids
   shrinking the touch-target buttons or tier-row text. Triggered at
   the same width the rest of the phone-only adjustments use. */
@media (max-width: 600px) {
  .concert-ticketcard,
  .concert-pastcard { padding: 20px; max-width: 100%; }
  .concert-ticketcard { padding-top: 36px; }
  .concert-ticketcard::before { height: 14px; }
  .concert-ticketcard-price .display { font-size: 34px; }
  .concert-ticketcard-lede { margin-top: 6px; }
  .concert-ticketform { margin-top: 18px; }
  .concert-ticketcard-subtotal { padding: 12px 0 16px; }
  .concert-ticketcard-subtotal-amount { font-size: 18px; }
  .concert-ticketcard-footnote { margin-top: 10px; font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────
   Date picker (multi-date concerts)
   ──────────────────────────────────────────────────────────────
   Lives at the top of the ticket form when the concert has more
   than one performance date. Radio-style segmented buttons stacked
   vertically — one per date, with the venue / day / time as the
   label. Pairs with .concert-date-card.is-selectable above.
   ────────────────────────────────────────────────────────────── */
.concert-ticketrow-grouplabel {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.concert-ticketrow-datepicker {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  margin: 0 0 24px;
}
.concert-ticketrow-dateopt {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.concert-ticketrow-dateopt:first-child { border-top: 0; }
.concert-ticketrow-dateopt:hover { background: var(--bg-elev); }
.concert-ticketrow-dateopt-label {
  line-height: 1.3;
}
.concert-ticketrow-dateopt-tick {
  width: 18px; height: 18px;
  border: 1.5px solid var(--rule-2, var(--rule));
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.concert-ticketrow-dateopt[aria-checked="true"] {
  background: var(--bg-elev);
}
.concert-ticketrow-dateopt[aria-checked="true"] .concert-ticketrow-dateopt-tick {
  border-color: var(--ink);
}
.concert-ticketrow-dateopt[aria-checked="true"] .concert-ticketrow-dateopt-tick::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--ink);
  border-radius: 50%;
}

/* Date cards above ("Pick a performance") double as a date selector
   on multi-date concerts. JS adds .is-selectable + .is-selected. */
.concert-date-card.is-selectable {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.concert-date-card.is-selectable:hover {
  border-color: var(--ink-3);
}
.concert-date-card.is-selectable.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}