/* colors_and_type.css is loaded directly from app/layout.tsx as a sibling
   <link> tag, so it's already in the cascade by the time this stylesheet
   parses. The previous @import here pointed at /assets/colors_and_type.css
   (legacy path) and 404'd on every page load. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ============ LAYOUT ============ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.container-narrow {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
section { padding: var(--sp-8) 0; }
@media (max-width: 720px) { section { padding: var(--sp-7) 0; } }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "✦";
  color: var(--accent);
  font-size: 10px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, var(--fs-56));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: var(--sp-3) 0 var(--sp-5);
  text-wrap: balance;
}
.section-title em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.25em;
  line-height: 0.9;
  color: var(--accent);
}

/* Per-section accent rotation: each section gets its own brand color */
#about .section-title em,
#about .eyebrow::before { color: var(--bm-purple); }
#music .section-title em,
#music .eyebrow::before { color: var(--bm-pink-lavender); }
#videos .section-title em,
#videos .eyebrow::before { color: var(--bm-purple); }
#videos .section-title em.alt { color: var(--bm-teal); }
#shows .section-title em,
#shows .eyebrow::before { color: var(--bm-blue); }
#gallery .section-title em,
#gallery .eyebrow::before { color: var(--bm-teal); }
.newsletter .section-title em,
.newsletter .eyebrow::before { color: var(--bm-pink); }
.section-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0;
}

.section-head { margin-bottom: var(--sp-7); }

:root {
  /* The nav's height, in one place: it is both the element's own height and
     the distance an in-page anchor has to clear. Two hardcoded 64s would
     eventually disagree. Unconditional — no breakpoint changes it today,
     and if one ever does it overrides here rather than in two places. */
  --nav-h: 64px;
}

/* ============ TOP BANNERS ============ */
/* Server-rendered above .nav in app/page.tsx. The wrapper sticks above
   the nav so multiple banners stack cleanly instead of fighting for top:0. */
.site-banner-stack {
  position: sticky; top: 0; z-index: 60;
}
/* A banner carrying album art is 100–200px tall. Pinned, that plus the nav
   would hold a quarter of a phone screen hostage for the whole page — so a
   tall banner scrolls away and the nav takes top: 0 behind it. The thin
   text-only bar, which is what #320 pinned above the nav, is unchanged.
   site.js publishes --banner-h: 0 for this case by reading the stack's
   COMPUTED position rather than looking for this class, so the offset and
   the layout cannot disagree about which mode is in effect. */
.site-banner-stack.is-tall { position: relative; }
.live-banner,
.announcement-banner {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 20px;
  /* No shared `color` here on purpose. It used to be #fff, which both
     banners now override — leaving it would hand a future third banner
     white text on whatever ground it chose, which is the bug this change
     started from. Each banner states its own ink against its own
     background. */
  /* Manrope, not Instrument Serif. Instrument Serif ships ONE weight (400),
     and this bar asks for 650, 700 and 850 — so every glyph here was a
     synthetic bold, the browser smearing a 400 serif to fake weight. At
     14px, spaced, over a gradient, that is the blur. Manrope is variable
     300-800, so these weights render as real cuts; it is also what the
     brand guide assigns to labels and supporting information, which is
     what a banner is. */
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  transition: filter .15s ease;
}
.live-banner {
  /* Solid teal, the core identity color — /press says "use teal more often
     than pink when only one brand cue is needed", and a LIVE bar is exactly
     one cue. It also fixes the contrast: the old pink-to-purple gradient
     could not carry white OR dark text across its whole width (white 1.88
     at the pink end, dark 3.14 at the purple end), because the palette's
     pink was lightened to #FDA2C5 while this rule still assumed the deep
     #e64980 in its fallback. On flat teal, dark ink measures 6.93.
     Solid-vs-gradient also keeps it distinct from the announcement bar. */
  background: var(--accent, #3EB7B2);
  color: var(--fg-1, #1D1D1C);
  text-transform: uppercase;
}
.live-banner:hover { filter: brightness(1.06); }
.announcement-banner {
  text-transform: none;
  /* --ann-base and --ann-ink exist so "Normal" and "Default color" can be
     real. The size and color classes below are written against these, not
     against the inherited value — otherwise clearing a color inside a
     colored run just inherits that run's color back, and "Normal" inside
     a Large run means 85% of Large. One owner for the base size: the phone
     override changes --ann-base, not font-size. */
  --ann-base: 14px;
  font-size: var(--ann-base);
  /* Fallback, not decoration: --ann-ink is set by the bg-* class, and an
     undefined custom property with no fallback DROPS the whole declaration
     rather than erroring — the bar would quietly inherit the page's text
     color. That failure is already in this codebase's history (--bg-0,
     2026-08-25), so it gets a floor here. */
  color: var(--ann-ink, var(--fg-1, #1D1D1C));
}

/* ---- The bar's background, chosen in the admin ----
   Every one of these states its own ink, because the ink is what makes the
   color choices above it legible. The measured contrasts are on each rule;
   they are the floor the editor's color swatches are checked against. */

/* Default, and what every banner authored before this existed still gets.
   Dark ink, not white: this gradient runs teal to light pink, and white on
   it measures 2.44:1 at the teal end and 1.88:1 at the pink end — against
   4.5:1 for text this size. Dark ink on the SAME gradient measures 6.93 to
   8.96, so the brand colors are untouched and the words are readable.
   (The old --accent-warm fallback here was #C66B45, a terracotta left over
   from before the palette moved to #FDA2C5. Live it never applied, because
   --accent-warm is defined — but a stale fallback is exactly what made the
   .live-banner rule lie about its own contrast in #322.) */
.announcement-banner.bg-brand {
  background: linear-gradient(90deg, var(--accent, #3EB7B2) 0%, var(--accent-warm, #FDA2C5) 100%);
  --ann-ink: var(--fg-1, #1D1D1C);
}
/* Flat teal — the core identity color on its own. Dark ink: 6.93. */
.announcement-banner.bg-teal {
  background: var(--accent, #3EB7B2);
  --ann-ink: var(--fg-1, #1D1D1C);
}
/* Near-black. The one background where the light and mid palette colors
   are readable, so it is the right pick behind album art. Off-white on it
   measures 16.6. */
.announcement-banner.bg-ink {
  background: var(--bm-text-primary, #1D1D1C);
  --ann-ink: var(--bm-text-light, #FCFBFA);
}
/* Paper. Quiet, and the only one that needs a rule under it — without the
   border it dissolves into the nav, which is the same off-white. */
.announcement-banner.bg-paper {
  background: var(--bm-surface, #FCFBFA);
  --ann-ink: var(--bm-text-primary, #1D1D1C);
  border-bottom: 1px solid var(--border, #E8E5E0);
}

/* ---- Album art ----
   Sizes are named for how big they land on a desktop screen: ~1in, ~1.5in,
   ~2in at the CSS reference 96dpi. clamp() is what answers "and on mobile?"
   — the vw term shrinks the art with the viewport and the floor keeps it
   from turning into a stamp on a narrow phone. */
.announcement-banner-art {
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
  /* Square, because it is album art. object-fit crops a photo that isn't. */
  aspect-ratio: 1 / 1;
}
.announcement-banner-art.size-sm { width: clamp(48px, 13vw,  96px); }
.announcement-banner-art.size-md { width: clamp(60px, 17vw, 144px); }
.announcement-banner-art.size-lg { width: clamp(72px, 22vw, 192px); }

/* The label and the message. Without art this wrapper is transparent to the
   layout — same row, same centering, same gap as before it existed. With
   art, the two stack beside the cover so a 2in image doesn't sit next to a
   single centred line. */
.announcement-banner-body {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  min-width: 0;
}
.announcement-banner.has-art {
  gap: 18px;
  padding: 14px 20px;
}
.announcement-banner.has-art .announcement-banner-body {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.announcement-banner.has-art .announcement-banner-msg { text-align: left; }
.announcement-banner-label {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  /* The border alone is softened. `opacity` here would dim the LABEL TEXT
     with it, and at 11px that drops it to ~4.4:1 over the teal half —
     under the 4.5 this change exists to clear. */
  border: 1px solid rgba(29, 29, 28, .55);
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 999px;
}
.announcement-banner-msg {
  font-weight: 650;
  letter-spacing: .02em;
  text-align: center;
}
.announcement-banner-msg a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ---- Formatting the artist applies to a run of banner text ----
   Emitted by the editor as <span class="ann-f-… ann-s-… ann-c-…"> and
   allowed through by lib/sanitize-html.js on the `ann-` prefix. Sizes are
   in `em` so they scale with the banner's own responsive font-size instead
   of pinning a phone to a desktop measurement. */
.ann-f-body    { font-family: var(--font-body); }
/* Instrument Serif ships ONE weight. The banner's base 700 is therefore
   synthetic on it — the exact smear #321 removed — so a display run resets
   to the real cut and drops the tracking a serif does not want. */
.ann-f-display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
/* Bellaboo is a script face and reads small at a shared size. */
/* No font-size here, deliberately. It would sit on the same element as the
   size class and one would silently win: picking Large and then Script
   dropped the Large. Bellaboo does read small — the Size control next to it
   is the answer, not a second rule fighting over the same property. */
.ann-f-script  { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }

/* Multiples of the bar's own base, not of the parent — so Normal is Normal
   wherever it lands, and Extra large is the same size whether or not it is
   nested inside something else. */
/* The fallback is load-bearing, not decoration. --ann-base is defined on
   .announcement-banner, and the ADMIN'S EDIT BOX is .announcement-editor — a
   different element that never had it. calc() with an undefined custom
   property is invalid, so the browser dropped the whole declaration and
   every size here did nothing in the box being typed into, while working
   correctly in the preview beside it. Exactly the failure the --ann-ink rule
   two hundred lines up carries a warning about; the warning was written and
   then not applied here. */
.ann-s-sm { font-size: calc(var(--ann-base, 14px) * 0.85); }
.ann-s-md { font-size: var(--ann-base, 14px); }
.ann-s-lg { font-size: calc(var(--ann-base, 14px) * 1.35); }
.ann-s-xl { font-size: calc(var(--ann-base, 14px) * 1.9); }

/* "Default color" — back to whatever ink the chosen background carries.
   A class that said `color: inherit` would inherit the enclosing run's
   color, which is the thing being cleared. */
.ann-c-none     { color: var(--ann-ink, var(--fg-1, #1D1D1C)); }
.ann-c-ink      { color: var(--bm-text-primary, #1D1D1C); }
.ann-c-charcoal { color: var(--bm-text-secondary, #282728); }
.ann-c-paper    { color: var(--bm-text-light, #FCFBFA); }
.ann-c-teal     { color: var(--bm-teal, #3EB7B2); }
.ann-c-pink     { color: var(--bm-pink, #FDA2C5); }
.ann-c-lavender { color: var(--bm-pink-lavender, #E3A4EF); }
.ann-c-blue     { color: var(--bm-blue, #1E4FB3); }
.ann-c-purple   { color: var(--bm-purple, #625DC7); }
.live-banner-dot {
  width: 8px; height: 8px; border-radius: 50%;
  /* Was white with a white pulse, which only read against the old dark
     gradient. On teal it follows the text. */
  background: currentColor;
  animation: live-banner-pulse 1.4s ease-out infinite;
}
@keyframes live-banner-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 29, 28, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(29, 29, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 29, 28, 0); }
}
.live-banner-label { font-weight: 800; }
.live-banner-msg { font-weight: 600; letter-spacing: .04em; text-transform: none; }
.live-banner-arrow { font-weight: 700; }
@media (max-width: 480px) {
  .live-banner,
  .announcement-banner {
    padding: 8px 12px;
    gap: 8px;
  }
  .live-banner { font-size: 12.5px; }
  /* Through the variable, so the size classes shrink with the base instead
     of leaving "Extra large" at its desktop measurement on a phone. */
  .announcement-banner { --ann-base: 12.5px; }
  .live-banner-msg { display: none; }
  .announcement-banner-label {
    font-size: 10px;
    padding: 2px 7px;
  }
  .announcement-banner-msg {
    flex: 1 1 100%;
    line-height: 1.3;
  }
  /* .announcement-banner.has-art is two classes and outranks the padding
     set on .announcement-banner above, so the phone override has to match
     it. Without this the art variant kept its 14px/20px desktop padding on
     a 360px screen. */
  .announcement-banner.has-art {
    padding: 10px 12px;
    gap: 12px;
  }
}

/* The nav sticks BELOW the banner stack, not underneath it.
   Both were pinned at top: 0, so they occupied the same place and the
   banner — higher z-index — simply covered the nav once you scrolled. The
   old note here called that acceptable because the banner is the louder
   element; it is not, because it costs you the navigation for the whole
   page. Offsetting the nav by the stack's measured height keeps both.
   --banner-h is published by site.js and falls back to 0 when there is no
   banner, which is the ordinary case. */

/* An in-page anchor has to clear whatever is pinned above it — the nav
   always, and the banner stack when there is one. */
html { scroll-padding-top: calc(var(--banner-h, 0px) + var(--nav-h)); }

/* ============ NAV ============ */
.nav {
  position: sticky; top: var(--banner-h, 0px); z-index: 50;
  background: rgba(252, 251, 250, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
  display: flex;
  align-items: center;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  gap: var(--sp-5);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}
.nav-logo img {
  height: 56px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--nav-link, var(--fg-2));
  transition: color var(--dur-2) var(--ease-soft), opacity var(--dur-2) var(--ease-soft);
}
.nav-links a:hover { color: var(--nav-link, var(--accent)); opacity: 1; }

/* Each nav link wears a different palette color */
.nav-links li:nth-child(1) a { --nav-link: var(--bm-pink-lavender); }   /* Music */
.nav-links li:nth-child(2) a { --nav-link: var(--bm-purple); }          /* Videos */
.nav-links li:nth-child(3) a { --nav-link: var(--bm-blue); }            /* Shows */
.nav-links li:nth-child(4) a { --nav-link: var(--bm-teal); }            /* Merch */
.nav-links li:nth-child(5) a { --nav-link: var(--bm-pink); }            /* Gallery */
.nav-links li:nth-child(6) a { --nav-link: var(--bm-text-secondary); }  /* About */

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--bm-pink);
  color: var(--bm-text-primary);
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 600;
  transition: transform var(--dur-1) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft);
}
.nav-cta:hover { background: var(--bm-teal); color: var(--bm-text-light); box-shadow: var(--shadow-glow-teal); }
.nav-cta:active { transform: scale(0.98); }

/* Cart button in nav */
.nav-cart {
  display: inline-flex;
  align-items: center; justify-content: center;
  position: relative;
  width: 40px; height: 40px;
  margin-left: 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), color var(--dur-2);
}
.nav-cart:hover { border-color: var(--accent); color: var(--accent); }
.nav-cart-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-warm); color: #fff;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg-1);
  transition: transform var(--dur-2) var(--ease-soft), opacity var(--dur-2);
}
.nav-cart-count[data-empty="true"] { opacity: 0; transform: scale(0.4); }
.nav-cart-count.bump { animation: cart-bump 0.42s var(--ease-soft); }
@keyframes cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.nav-burger { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
  }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--dur-1) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: var(--fg-on-dark);
}
.btn-primary:hover { box-shadow: var(--shadow-glow-teal); }
.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--fg-1); background: var(--fg-1); color: var(--fg-on-dark); }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: var(--sp-7) 0 var(--sp-6);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--bg-1);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bm-pink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.hero-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 7.2vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: var(--sp-4) 0 var(--sp-5);
  text-wrap: balance;
}
.hero-display em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.25em;
  line-height: 0.9;
  color: var(--bm-pink);
}
.hero-display em + br + em,
.hero-display em:nth-of-type(2) {
  color: var(--bm-purple);
}
.hero-script {
  font-family: var(--font-script);
  font-size: clamp(3.12rem, 6.88vw, 5.62rem);
  color: var(--bm-pink-lavender);
  display: inline-block;
  transform: translateY(-4px) rotate(-2deg);
}
.hero-lead {
  font-size: var(--fs-18);
  font-weight: 300;
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: 50ch;
  margin: 0 0 var(--sp-6);
}
.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}
.hero-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.hero-meta-item {
  min-width: 0;
}
.hero-meta-item:nth-child(3) {
  grid-column: 1 / -1;
}
.hero-meta-item .label {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.hero-meta-item .value {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.05;
  color: var(--fg-1);
}
.hero-meta-item:nth-child(3) .value {
  white-space: nowrap;
}
.hero-photo-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bm-surface-cool);
  box-shadow: var(--shadow-3);
}
.hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero-photo-tag {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  background: rgba(252, 251, 250, 0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: var(--fs-12);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-1);
}
.hero-photo-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-warm);
}

/* ============ MARQUEE / TICKER ============ */
.ticker {
  background: var(--fg-1);
  color: var(--fg-on-dark);
  padding: var(--sp-4) 0;
  overflow: hidden;
  border-top: 1px solid var(--fg-1);
  border-bottom: 1px solid var(--fg-1);
}
.ticker-track {
  display: flex;
  gap: var(--sp-8);
  width: max-content;
  animation: scroll 32s linear infinite;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-script);
  font-style: normal;
  font-size: var(--fs-40);
  white-space: nowrap;
}
.ticker-item span.dot { color: var(--bm-pink); }
.ticker-item:nth-child(3n) span.dot { color: var(--bm-pink-lavender); }
.ticker-item:nth-child(3n+1) span.dot { color: var(--bm-teal); }
.ticker-item:nth-child(3n+2) span.dot { color: var(--bm-purple); }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ ABOUT ============ */
.about {
  background: var(--bm-surface-blush);
  padding-bottom: var(--sp-6);
}
.music { padding-top: var(--sp-6); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: var(--sp-8);
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.about-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.about-card h3 {
  font-family: var(--font-script);
  font-size: var(--fs-32);
  font-weight: 400;
  margin: 0 0 var(--sp-3);
  font-style: normal;
}
.about-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.88rem, 3.25vw, 2.50rem);
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.about-quote::before { content: "“"; color: var(--bm-pink); margin-right: 0.05em; }
.about-quote::after { content: "”"; color: var(--bm-pink); }
.about-body p {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  gap: var(--sp-5);
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.about-stat:nth-child(1) .num { color: var(--bm-pink); }
.about-stat:nth-child(2) .num { color: var(--bm-purple); }
.about-stat:nth-child(3) .num { color: var(--bm-teal); }
.about-stat .num {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-40);
  color: var(--accent);
  line-height: 1;
}
.about-stat .label {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 4px;
}
.about-sig {
  font-family: var(--font-script);
  font-size: var(--fs-40);
  color: var(--fg-1);
  margin-top: var(--sp-5);
  display: inline-block;
}

/* ============ MUSIC / AUDIO PLAYER ============ */
.music-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: stretch;
}
.music-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.music-right .tracklist {
  /* flex-basis 0, not auto. With `auto` the list's own content is its
     starting size, so twelve tracks made .music-right taller than the
     player, the stretched grid row grew to match, and the player gained a
     slab of dead space underneath instead of the list scrolling. At 0 the
     list starts from nothing and takes the space the PLAYER defines, which
     is what `overflow-y: auto` here was always for. */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.music-right .tracklist::-webkit-scrollbar { width: 6px; }
.music-right .tracklist::-webkit-scrollbar-track { background: transparent; }
.music-right .tracklist::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.music-right .tracklist::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
@media (max-width: 900px) {
  .music-grid { grid-template-columns: 1fr; align-items: start; }
  /* One column, align-items: start — so there is no player column defining
     the height and nothing for the list to fill. flex-basis 0 would leave it
     at 0px, and with overflow visible the rows would paint OUT of a
     zero-height box, straight over the streaming links below. The desktop
     basis must not follow us down here. */
  .music-right .tracklist { flex: 1 1 auto; overflow-y: visible; }
}

.player-card {
  background: linear-gradient(180deg, var(--fg-1) 0%, #2a2928 100%);
  color: var(--fg-on-dark);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-3);
  position: relative;
  overflow: hidden;
}
.player-art {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bm-surface-cool);
  margin-bottom: var(--sp-5);
  position: relative;
}
.player-art-grad {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 25% 25%, var(--grad-1, var(--bm-pink)) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 30%, var(--grad-2, var(--bm-pink-lavender)) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, var(--grad-3, var(--bm-teal)) 0%, transparent 60%),
    linear-gradient(135deg, var(--grad-2, var(--bm-pink-lavender)), var(--grad-3, var(--bm-teal-soft)));
  display: grid;
  place-items: center;
}
.player-art-grad .wordmark {
  font-family: var(--font-logo);
  font-size: 64px;
  color: rgba(29,29,28,0.85);
  transform: rotate(-4deg);
  text-align: center;
  line-height: 0.9;
}
.player-art-grad .wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: rgba(29,29,28,0.7);
  margin-top: 4px;
  transform: rotate(0deg);
}
.player-track-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.player-track-info .title {
  font-family: var(--font-script);
  font-style: normal;
  font-size: var(--fs-40);
  line-height: 1.1;
  margin: 0;
}
.player-track-info .meta {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(252,251,250,0.6);
  margin-top: 6px;
}
.player-track-info .duration {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: rgba(252,251,250,0.7);
}
.player-progress {
  position: relative;
  height: 4px;
  background: rgba(252,251,250,0.15);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 6px;
}
.player-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}
.player-progress-knob {
  position: absolute;
  right: -6px; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(62,183,178,0.18);
}
.player-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(252,251,250,0.55);
  margin-bottom: var(--sp-4);
}
.player-status {
  min-height: 18px;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
  font-size: var(--fs-12);
  line-height: 1.4;
  color: rgba(252,251,250,0.72);
  text-align: center;
}
.player-status[data-state="error"] {
  color: var(--bm-pink);
}
.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.player-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(252,251,250,0.7);
  transition: color var(--dur-2), background var(--dur-2);
}
.player-btn:hover { color: var(--fg-on-dark); background: rgba(252,251,250,0.08); }
.player-btn.play {
  width: 56px; height: 56px;
  background: var(--accent);
  color: var(--fg-on-dark);
}
.player-btn.play:hover { background: var(--accent); box-shadow: var(--shadow-glow-teal); }

.tracklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tracklist-row {
  display: grid;
  /* num | title/sub | tag pill. Duration was removed (it's shown in
     the player preview when a track is selected). */
  grid-template-columns: 32px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  transition: background var(--dur-2);
  cursor: pointer;
  text-align: left;
  width: 100%;
  border: 1px solid transparent;
}
.tracklist-row:hover { background: var(--bm-surface-cool); }
.tracklist-row.active {
  background: var(--bm-surface-cool);
  border-color: var(--border);
}
.tracklist-row .num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-muted);
  text-align: center;
}
.tracklist-row.active .num { color: var(--accent); }
.tracklist-row .play-icon, .tracklist-row .pause-icon { display: none; }
.tracklist-row.active .play-icon, .tracklist-row:hover .play-icon { display: block; }
/* The row that is actually playing shows pause instead — clicking it again
   stops, and the glyph says so. A YouTube row never reaches this state: its
   playback lives in the modal, so it keeps showing play. */
.tracklist-row.active.is-playing .play-icon { display: none; }
.tracklist-row.active.is-playing .pause-icon { display: block; }
.tracklist-row.active .num.show, .tracklist-row:hover .num.show { display: none; }
.tracklist-row .info .title {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.75rem;
  color: var(--fg-1);
  line-height: 1.1;
}
.tracklist-row .info .sub {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  margin-top: 2px;
}
.tracklist-row .tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--bm-surface-blush);
  color: var(--fg-2);
}
.tracklist-row .tag { background: var(--bm-surface-blush); color: var(--bm-pink); }
.tracklist-row .tag.live { background: var(--bm-surface-cool); color: var(--bm-teal); }
.tracklist-row .tag.demo { background: color-mix(in srgb, var(--bm-purple) 12%, white); color: var(--bm-purple); }
.tracklist-row .tag.color-pink     { background: var(--bm-surface-blush); color: var(--bm-pink); }
.tracklist-row .tag.color-lavender { background: color-mix(in srgb, var(--bm-pink-lavender) 18%, white); color: color-mix(in srgb, var(--bm-pink-lavender) 80%, var(--fg-1)); }
.tracklist-row .tag.color-purple   { background: color-mix(in srgb, var(--bm-purple) 12%, white); color: var(--bm-purple); }
.tracklist-row .tag.color-teal     { background: var(--bm-surface-cool); color: var(--bm-teal); }
.tracklist-row .tag.color-blue     { background: var(--bm-surface-cool); color: var(--bm-blue); }
.tracklist-row .tag.color-amber    { background: color-mix(in srgb, #d97706 12%, white); color: #b45309; }
.tracklist-row .tag.color-charcoal { background: color-mix(in srgb, var(--fg-1) 10%, white); color: var(--fg-1); }
.tracklist-row .tag.color-cream    { background: var(--bm-surface-blush); color: var(--fg-2); }
.tracklist-row .duration {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-muted);
}

.streaming-row {
  /* Never shrink: it is a sibling of a flex:1 scrolling list, and the
     default flex-shrink:1 let the list take the whole column and squash
     these links to zero height. */
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.streaming-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--fg-2);
  transition: all var(--dur-2) var(--ease-soft);
}
.streaming-link:hover { color: var(--fg-1); border-color: var(--fg-1); }

/* Streaming brand colors — applied to the icon only, label stays neutral */
.streaming-icon { flex-shrink: 0; transition: color var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-soft); }
.streaming-link[data-social="spotify"] .streaming-icon { color: #1DB954; }
.streaming-link[data-social="apple"]   .streaming-icon { color: #FA243C; }
.streaming-link[data-social="youtube"] .streaming-icon { color: #FF0000; }
.streaming-link:hover .streaming-icon { transform: scale(1.08); }

/* ============ VIDEOS ============ */
.videos { background: var(--bg-2); padding: var(--sp-6) 0; }
.video-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-5);
  /* Align thumbs to the top so their column matches the featured's
     height instead of stretching past it — required for the internal
     scroll on .video-thumbs to actually kick in. */
  align-items: start;
}
@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; } }

.video-featured {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--fg-1);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
}
.video-featured:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* Cap the column at the featured tile's approximate height so a long
     video list doesn't make the section grow indefinitely. The actual
     featured tile is aspect-ratio 16:9 — at typical desktop widths this
     lands around 360–480px tall, so we use 480px as a comfortable
     ceiling. Inner overflow becomes a styled scrollbar. */
  max-height: 480px;
  overflow-y: auto;
  /* Tiny padding-right so the scrollbar doesn't sit on top of thumbs. */
  padding-right: 4px;
  /* Custom scrollbar — subtle, on-brand. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg-1) 30%, transparent) transparent;
}
.video-thumbs::-webkit-scrollbar { width: 8px; }
.video-thumbs::-webkit-scrollbar-track { background: transparent; }
.video-thumbs::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg-1) 22%, transparent);
  border-radius: 999px;
}
.video-thumbs::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--fg-1) 38%, transparent);
}
/* Mobile: drop the cap entirely — the column collapses below the
   featured tile and a 480px-tall scrollbox would feel awkward there. */
@media (max-width: 860px) {
  .video-thumbs { max-height: none; padding-right: 0; }
}
.video-thumb-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-2);
}
.video-thumb-row:hover { background: var(--bg-1); }
.video-thumb-row .thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--fg-1);
}
.video-meta .title {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--fg-1);
  margin: 0 0 4px;
}
.video-meta .sub {
  font-size: var(--fs-12);
  color: var(--fg-muted);
}
.video-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: rgba(252,251,250,0.92);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--fg-1);
  transition: transform var(--dur-2) var(--ease-soft), background var(--dur-2);
  pointer-events: none;
}
.video-featured:hover .video-play-icon,
.video-thumb-row:hover .video-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
  color: var(--fg-on-dark);
}
.video-play-icon-sm {
  width: 36px; height: 36px;
}
.video-overlay-tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background: rgba(29,29,28,0.7);
  backdrop-filter: blur(8px);
  color: var(--fg-on-dark);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Side-card tag pill — lives inside .video-meta beside the title.
   Smaller and lighter weight than the featured overlay so it sits
   politely next to the script-font title in the narrow meta column. */
.video-meta-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.video-meta-head .title { margin: 0; }
.video-meta-tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(29,29,28,0.85);
  color: var(--fg-on-dark);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Tag library colors — shared by the featured tile's overlay pill and
   the side-card's inline meta pill so both renderings stay in sync. */
.video-overlay-tag.color-pink,     .video-meta-tag.color-pink     { background: var(--bm-pink); color: var(--fg-on-dark); }
.video-overlay-tag.color-lavender, .video-meta-tag.color-lavender { background: var(--bm-pink-lavender); color: var(--fg-1); }
.video-overlay-tag.color-purple,   .video-meta-tag.color-purple   { background: var(--bm-purple); color: var(--fg-on-dark); }
.video-overlay-tag.color-teal,     .video-meta-tag.color-teal     { background: var(--bm-teal); color: var(--fg-on-dark); }
.video-overlay-tag.color-blue,     .video-meta-tag.color-blue     { background: var(--bm-blue); color: var(--fg-on-dark); }
.video-overlay-tag.color-amber,    .video-meta-tag.color-amber    { background: #d97706; color: var(--fg-on-dark); }
.video-overlay-tag.color-charcoal, .video-meta-tag.color-charcoal { background: var(--fg-1); color: var(--fg-on-dark); }
.video-overlay-tag.color-cream,    .video-meta-tag.color-cream    { background: var(--bm-surface-blush); color: var(--fg-1); }
.video-feature-cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  background: linear-gradient(180deg, transparent, rgba(29,29,28,0.85));
  color: var(--fg-on-dark);
}
.video-feature-cap .title {
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(1.88rem, 4.38vw, 3.12rem);
  line-height: 1.1;
  margin: 0;
}
.video-feature-cap .sub {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.8;
}

/* "More on Instagram" pill below the video grid — replaces a plain
   text "Watch more on YouTube →" link. Uses an Instagram-flavored
   pink→lavender gradient that still reads on-brand for the site. */
.more-on-instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--bm-pink) 0%, var(--bm-pink-lavender) 100%);
  color: var(--fg-on-dark);
  font-size: var(--fs-13);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
  box-shadow: var(--shadow-1);
}
.more-on-instagram:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.more-on-instagram svg { display: block; }

/* ============ SHOWS / CALENDAR ============ */
.shows { padding: var(--sp-6) 0; }
.shows-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.shows-tabs {
  display: inline-flex;
  background: var(--bm-surface-cool);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.shows-tab {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--fg-2);
  transition: all var(--dur-2) var(--ease-soft);
}
.shows-tab.active {
  background: var(--bg-1);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}

.shows-list {
  display: flex;
  flex-direction: column;
}
.show-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-2);
}
.show-row:first-child { border-top: 1px solid var(--border); }
.show-row:hover { background: var(--bm-surface-cool); margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4); border-radius: var(--r-sm); }
@media (max-width: 720px) {
  .show-row { grid-template-columns: 70px 1fr; gap: var(--sp-4); }
  /* Put the tag pill (Solo / Band / etc.) and the status pill (Public
     event / Tickets / Sold out) on the SAME row at the bottom, sized
     similarly, so the gig card stays compact on mobile. Meta sits
     left, actions sits right. */
  .show-row .show-meta-extra {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: center;
    justify-self: start;
  }
  .show-row .show-actions {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: center;
    justify-self: end;
  }
  /* Shrink the ticket pill so it matches the badge size visually
     instead of dominating the row. */
  .show-tickets {
    padding: 4px 12px;
    font-size: var(--fs-12);
    letter-spacing: 0.04em;
  }
}

/* Show-info wraps optional event photo + text. Flex so the photo sits to the left
   when present and the text reflows neatly, without any change to the show-row grid. */
.show-info {
  display: flex; align-items: center; gap: var(--sp-4); min-width: 0;
}
.show-info-text { min-width: 0; flex: 1; }
.show-photo {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background-size: cover; background-position: center;
  background-color: var(--bm-surface-cool);
  border: 1px solid var(--border);
}
@media (max-width: 720px) {
  .show-photo { width: 44px; height: 44px; }
}

/* Optional venue link — looks like the venue name but underlines on hover. */
.venue-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-soft);
}
.venue-link:hover { border-bottom-color: var(--accent); }

/* Tiny map-pin icon next to the venue name — links out to Google Maps. */
.show-map-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 6px;
  border-radius: 50%;
  color: var(--fg-2); background: transparent;
  vertical-align: -3px;
  transition: color var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft);
}
.show-map-pin:hover { color: var(--accent); background: var(--bm-surface-cool); }

/* Calendar icon next to map-pin — downloads an .ics for upcoming shows. */
.show-cal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 4px;
  border-radius: 50%;
  color: var(--fg-2); background: transparent;
  vertical-align: -3px;
  transition: color var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft);
}
.show-cal:hover { color: var(--accent); background: var(--bm-surface-cool); }
.show-date {
  text-align: center;
  border-right: 1px solid var(--border);
  padding-right: var(--sp-4);
}
.show-date .month {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-warm);
  font-weight: 600;
}
.show-date .day {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: 1;
  color: var(--fg-1);
  font-weight: 400;
  margin: 4px 0 2px;
}
.show-date .dow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.show-info .venue {
  font-family: var(--font-script);
  font-style: normal;
  font-size: var(--fs-32);
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0;
}
.show-info .city {
  font-size: var(--fs-14);
  color: var(--fg-2);
  margin-top: 2px;
}
.show-info .city .sep { color: var(--fg-muted); margin: 0 6px; }
.show-meta-extra {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.show-meta-extra .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--bm-surface-blush);
  color: var(--fg-2);
  font-weight: 500;
  margin-right: 6px;
}
.show-meta-extra .badge { background: var(--bm-surface-blush); color: var(--bm-pink); }
.show-meta-extra .badge.solo { background: var(--bm-surface-cool); color: var(--bm-blue); }
.show-meta-extra .badge.full { background: color-mix(in srgb, var(--bm-purple) 14%, white); color: var(--bm-purple); }

/* Tag library colors — mirror the swatch palette used in admin → Tags so
   the public pill matches the color Brooklyn picks there. */
.show-meta-extra .badge.color-pink     { background: var(--bm-surface-blush); color: var(--bm-pink); }
.show-meta-extra .badge.color-lavender { background: color-mix(in srgb, var(--bm-pink-lavender) 18%, white); color: color-mix(in srgb, var(--bm-pink-lavender) 80%, var(--fg-1)); }
.show-meta-extra .badge.color-purple   { background: color-mix(in srgb, var(--bm-purple) 14%, white); color: var(--bm-purple); }
.show-meta-extra .badge.color-teal     { background: var(--bm-surface-cool); color: var(--bm-teal); }
.show-meta-extra .badge.color-blue     { background: var(--bm-surface-cool); color: var(--bm-blue); }
.show-meta-extra .badge.color-amber    { background: color-mix(in srgb, #d97706 12%, white); color: #b45309; }
.show-meta-extra .badge.color-charcoal { background: color-mix(in srgb, var(--fg-1) 10%, white); color: var(--fg-1); }
.show-meta-extra .badge.color-cream    { background: var(--bm-surface-blush); color: var(--fg-2); }
.show-actions { display: flex; gap: var(--sp-2); align-items: center; }
.show-tickets {
  padding: 3px 10px;
  background: var(--fg-1);
  color: var(--fg-on-dark);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  transition: background var(--dur-2);
}
a.show-tickets:hover { background: var(--accent); }
.show-tickets.sold {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.show-tickets.sold:hover { background: transparent; color: var(--fg-muted); }
.show-tickets.past {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
/* Gig-status colors flow from Settings → Tags → Gig status. The pill
   pulls the same palette as every other tag swatch in the system. The
   color- classes win against the default .show-tickets dark fill. */
.show-tickets.color-pink     { background: var(--bm-pink); color: var(--fg-on-dark); border: none; }
.show-tickets.color-lavender { background: var(--bm-pink-lavender); color: var(--fg-1); border: none; }
.show-tickets.color-purple   { background: var(--bm-purple); color: var(--fg-on-dark); border: none; }
.show-tickets.color-teal     { background: var(--bm-teal); color: var(--fg-on-dark); border: none; }
.show-tickets.color-blue     { background: var(--bm-blue); color: var(--fg-on-dark); border: none; }
.show-tickets.color-amber    { background: #d97706; color: var(--fg-on-dark); border: none; }
.show-tickets.color-charcoal { background: var(--fg-1); color: var(--fg-on-dark); border: none; }
.show-tickets.color-cream    { background: var(--bm-surface-blush); color: var(--fg-1); border: 1px solid var(--border); }
/* Anchor variant (Tickets link) should keep its hover lift, but only if
   the user hasn't pinned a swatch — once a color class is in play, the
   hover preserves that color so the link doesn't flash to teal. */
a.show-tickets.color-pink:hover     { background: var(--bm-pink); }
a.show-tickets.color-lavender:hover { background: var(--bm-pink-lavender); }
a.show-tickets.color-purple:hover   { background: var(--bm-purple); }
a.show-tickets.color-teal:hover     { background: var(--bm-teal); }
a.show-tickets.color-blue:hover     { background: var(--bm-blue); }
a.show-tickets.color-amber:hover    { background: #d97706; }
a.show-tickets.color-charcoal:hover { background: var(--fg-1); }
a.show-tickets.color-cream:hover    { background: var(--bm-surface-blush); color: var(--fg-1); }

.shows-empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  color: var(--fg-muted);
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-weight: 600;
}

/* "Show more / Show fewer" pagination control under the upcoming +
   past gigs lists. Renders only when the list has more rows than the
   page size, so short lists stay clean. */
.shows-more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}
.shows-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--fg-1);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), color var(--dur-2);
}
.shows-more-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.shows-more-btn svg {
  transition: transform var(--dur-2);
}

/* ============ MERCH ============ */
.merch { background: var(--bm-surface-cool); }
.merch-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bm-surface-cool);
  padding: 4px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-6);
}
.merch-filter button {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-soft);
  font-family: var(--font-body);
}
.merch-filter button.active {
  background: var(--bg-1);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}
.merch-filter button:hover:not(.active) { color: var(--fg-1); }

.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--sp-5) var(--sp-4);
}
.merch-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-1);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-soft);
}
.merch-card:hover { transform: translateY(-3px); }

.merch-photo {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--bm-surface-cool);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.merch-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--dur-2);
}
.merch-photo .merch-img {
  position: absolute; inset: 0;
  opacity: 0;
}
.merch-photo .merch-img.active { opacity: 1; }

.merch-tag-overlay {
  position: absolute;
  top: 12px; left: 12px;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  background: var(--bg-1);
  color: var(--fg-1);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.merch-tag-overlay.sold { background: var(--fg-1); color: var(--fg-on-dark); }
.merch-tag-overlay.low { background: var(--accent-warm); color: var(--fg-1); }
.merch-tag-overlay.preorder { background: var(--accent); color: var(--fg-on-dark); }

/* Merch "Badge" tag (m.tag from the library) — opposite corner from the
   inventory pill so both can show simultaneously without overlapping. */
.merch-badge-overlay {
  position: absolute;
  top: 12px; right: 12px;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  background: var(--bg-1);
  color: var(--fg-1);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-weight: 600;
  z-index: 2;
}
.merch-badge-overlay.color-pink     { background: var(--bm-pink); color: var(--fg-on-dark); }
.merch-badge-overlay.color-lavender { background: var(--bm-pink-lavender); color: var(--fg-1); }
.merch-badge-overlay.color-purple   { background: var(--bm-purple); color: var(--fg-on-dark); }
.merch-badge-overlay.color-teal     { background: var(--bm-teal); color: var(--fg-on-dark); }
.merch-badge-overlay.color-blue     { background: var(--bm-blue); color: var(--fg-on-dark); }
.merch-badge-overlay.color-amber    { background: #d97706; color: var(--fg-on-dark); }
.merch-badge-overlay.color-charcoal { background: var(--fg-1); color: var(--fg-on-dark); }
.merch-badge-overlay.color-cream    { background: var(--bm-surface-blush); color: var(--fg-1); }

.merch-photo-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(252,251,250,0.92);
  color: var(--fg-1);
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2), background var(--dur-2);
  z-index: 2;
}
.merch-photo-nav.prev { left: 10px; }
.merch-photo-nav.next { right: 10px; }
.merch-photo:hover .merch-photo-nav { opacity: 1; }
.merch-photo-nav:hover { background: var(--bg-1); }

.merch-dots {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}
.merch-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(252,251,250,0.55);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all var(--dur-2);
}
.merch-dot.active { background: var(--bg-1); width: 18px; border-radius: 3px; }

.merch-meta {
  /* Wider horizontal padding than the 4px it used to carry so the script
     title below can bleed its overhanging swashes into this padding via a
     negative margin without escaping the (overflow:hidden) card. */
  padding: 0 10px 4px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.merch-cat {
  font-size: 10px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-warm);
  font-weight: 600;
  margin-bottom: 4px;
}
.merch-name {
  font-family: var(--font-script);
  font-style: normal;
  font-size: var(--fs-32);
  line-height: 1.15;
  /* The line-clamp needs overflow:hidden, which also clips the script
     font's swashes (the "C" curl, trailing flourishes) at the text edges.
     Pad the clip box horizontally so those overhangs render inside it, then
     pull the box back out with a matching negative margin so the text still
     lines up with the eyebrow and subtitle. The negative margin stays inside
     the card because .merch-meta now carries 10px of horizontal padding. */
  margin: 0 -8px 4px;
  padding: 0 8px;
  color: var(--fg-1);
  min-height: calc(2 * 1.15em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.merch-sub {
  font-size: var(--fs-14);
  color: var(--fg-2);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-normal);
  min-height: calc(1 * var(--lh-normal) * 1em);
}
.merch-row {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  align-items: baseline;
  gap: var(--sp-3);
}
.merch-price {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--fg-1);
}
.merch-sizes {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  letter-spacing: 0.06em;
}
.merch-empty {
  grid-column: 1 / -1;
  padding: 56px 24px;
  text-align: center;
  color: var(--fg-muted);
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 600;
}

@media (max-width: 720px) {
  .merch-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
  .merch-name { font-size: var(--fs-20); }
  .merch-photo-nav { opacity: 1; width: 32px; height: 32px; background: rgba(252,251,250,0.85); }
}
@media (max-width: 420px) {
  .merch-grid { grid-template-columns: 1fr; }
  .merch-filter button { padding: 7px 14px; font-size: 13px; }
}

/* ============ PHOTO GALLERY — playful asymmetric mosaic ============ */
.gallery {
  background: linear-gradient(135deg, var(--bm-surface-blush) 0%, var(--bm-surface-cool) 100%);
  overflow: hidden;
}
.gallery-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 60px;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.gallery-tile {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bm-surface-cool);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-soft), box-shadow var(--dur-3) var(--ease-soft);
}
.gallery-tile:hover { transform: translateY(-4px) rotate(0deg) !important; box-shadow: var(--shadow-3); z-index: 2; }
.gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-4) var(--ease-soft);
}
.gallery-tile:hover img { transform: scale(1.04); }

/* Tile size + position presets */
.gt-1  { grid-column: span 5; grid-row: span 7; transform: rotate(-1.2deg); }
.gt-2  { grid-column: span 4; grid-row: span 4; transform: rotate(1.5deg); }
.gt-3  { grid-column: span 3; grid-row: span 5; transform: rotate(-2deg); }
.gt-4  { grid-column: span 4; grid-row: span 3; transform: rotate(0.8deg); }
.gt-5  { grid-column: span 3; grid-row: span 4; transform: rotate(-0.8deg); }
.gt-6  { grid-column: span 5; grid-row: span 6; transform: rotate(1.4deg); }
.gt-7  { grid-column: span 4; grid-row: span 5; transform: rotate(-1.6deg); }
.gt-8  { grid-column: span 3; grid-row: span 4; transform: rotate(2deg); }

.gallery-tile img.pos-upper  { object-position: center 25%; }
.gallery-tile img.pos-center { object-position: center center; }

/* Decorative scribble accents (desktop only — read as "X" on small screens) */
@media (min-width: 901px) {
.gallery-mosaic::before,
.gallery-mosaic::after {
  content: "";
  position: absolute;
  width: 80px; height: 80px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.gallery-mosaic::before {
  top: -10px; left: 36%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%233EB7B2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 40 Q 25 20, 40 40 T 70 40'/%3E%3C/svg%3E");
}
.gallery-mosaic::after {
  bottom: -10px; right: 28%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23FDA2C5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 50 Q 25 30, 40 50 T 70 50'/%3E%3C/svg%3E");
}
}

/* Mobile: simpler 2-column stagger */
@media (max-width: 720px) {
  .gallery-mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 50px;
  }
  .gt-1 { grid-column: span 6; grid-row: span 6; }
  .gt-2, .gt-3, .gt-4, .gt-5, .gt-6, .gt-7, .gt-8 { grid-column: span 3; grid-row: span 4; }
}

/* ============ BOOKING ============ */
.booking { background: var(--fg-1); color: var(--fg-on-dark); position: relative; overflow: hidden; }
.booking::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--bm-pink) 22%, transparent) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 100%, color-mix(in srgb, var(--bm-purple) 28%, transparent) 0%, transparent 50%);
  pointer-events: none;
}
.booking .container { position: relative; }
.booking .section-title { color: var(--fg-on-dark); }
.booking .section-title em { color: var(--bm-pink); }
.booking .section-lead { color: rgba(252,251,250,0.7); }
.booking .eyebrow { color: rgba(252,251,250,0.6); }
.booking .eyebrow::before { color: var(--bm-pink-lavender); }
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } }

.booking-info p {
  color: rgba(252,251,250,0.75);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  margin: 0 0 var(--sp-5);
}
.booking-checklist {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.booking-checklist li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-16);
  color: rgba(252,251,250,0.85);
}
.booking-checklist li:nth-child(1)::before { background: rgba(253,162,197,0.18); border-color: rgba(253,162,197,0.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FDA2C5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.booking-checklist li:nth-child(2)::before { background: rgba(227,164,239,0.18); border-color: rgba(227,164,239,0.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E3A4EF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.booking-checklist li:nth-child(3)::before { background: rgba(98,93,199,0.22); border-color: rgba(98,93,199,0.45); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23625DC7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.booking-checklist li:nth-child(4)::before { background: rgba(62,183,178,0.18); border-color: rgba(62,183,178,0.4); }
.booking-checklist li::before {
  content: "";
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(62,183,178,0.18);
  border: 1px solid rgba(62,183,178,0.4);
  display: grid; place-items: center;
  color: var(--accent);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233EB7B2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

.form {
  background: rgba(252,251,250,0.04);
  border: 1px solid rgba(252,251,250,0.08);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(252,251,250,0.55);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  background: rgba(252,251,250,0.06);
  border: 1px solid rgba(252,251,250,0.12);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  color: var(--fg-on-dark);
  font-size: var(--fs-16);
  font-family: var(--font-body);
  transition: border-color var(--dur-2);
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(252,251,250,0.35); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FCFBFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field select option { background: var(--fg-1); color: var(--fg-on-dark); }
.form-submit {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.form-fineprint {
  font-size: var(--fs-12);
  color: rgba(252,251,250,0.5);
  max-width: 40ch;
  text-wrap: pretty;
  line-height: 1.45;
}
.form-success {
  background: rgba(62,183,178,0.15);
  border: 1px solid rgba(62,183,178,0.3);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  color: var(--fg-on-dark);
}
.form-success .check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  margin: 0 auto var(--sp-4);
}
.form-success h3 {
  font-family: var(--font-script);
  font-style: normal;
  font-size: var(--fs-40);
  margin: 0 0 var(--sp-3);
  color: var(--fg-on-dark);
}
.form-success p {
  color: rgba(252,251,250,0.75);
  margin: 0;
}

/* ============ NEWSLETTER ============ */
.newsletter {
  background: var(--bm-surface-cool);
  text-align: center;
}
.newsletter .container-narrow > .eyebrow { display: inline-flex; }
.newsletter h2 { margin: var(--sp-3) auto var(--sp-3); }
.newsletter p { font-size: var(--fs-18); color: var(--fg-2); max-width: 50ch; margin: 0 auto var(--sp-6); }
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 480px;
  margin: 0 auto;
}
.newsletter-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.newsletter-names input {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-size: var(--fs-16);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-2);
}
.newsletter-names input:focus { border-color: var(--accent); }
.newsletter-form > input[type="email"],
.newsletter-form > input[type="tel"] {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-size: var(--fs-16);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-2);
}
.newsletter-form > input[type="email"]:focus,
.newsletter-form > input[type="tel"]:focus { border-color: var(--accent); }
.newsletter-form button {
  padding: 12px 20px;
  background: var(--fg-1);
  color: var(--fg-on-dark);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2);
}
.newsletter-form button:hover { background: var(--accent); }
@media (max-width: 480px) {
  .newsletter-names { grid-template-columns: 1fr; }
}
/* SMS keyword opt-in (#244). This is the second opt-in path, not a
   footnote to the form, and it is the one carrier vetting compares against
   the 10DLC filing — so it sits with the form at readable size rather than
   in the 10px consent print below it. Deliberately a div, not a p: the
   `.newsletter p` rule above sets an 18px/50ch/centred style that a bare
   `.newsletter-sms-cta` class selector would lose to on specificity. A div
   sidesteps the fight entirely, and keeps these rules working the same on
   both surfaces without a descendant selector to maintain. */
.newsletter-sms {
  max-width: 480px;
  margin: var(--sp-4) auto 0;
}
.newsletter-sms-or {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.newsletter-sms-or::before,
.newsletter-sms-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.newsletter-sms-cta {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-16);
  color: var(--fg-1);
  text-align: center;
}
.newsletter-sms-cta strong {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.newsletter-sms-cta a {
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-2);
}
.newsletter-sms-cta a:hover { color: var(--accent); }
.newsletter-sms-cta a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.newsletter-consent {
  max-width: 480px;
  margin: 8px auto 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
  text-align: center;
}
.newsletter-consent-choice {
  max-width: 480px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px auto 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
  text-align: left;
  cursor: pointer;
}
.newsletter-consent-choice input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.newsletter-consent-choice a,
.newsletter-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.newsletter-note {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  margin-top: var(--sp-3);
}

/* ============ FOOTER ============ */
.footer {
  background: var(--fg-1);
  color: var(--fg-on-dark);
  padding: var(--sp-8) 0 var(--sp-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo {
  width: 220px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--sp-3);
}
.footer-brand .wordmark {
  font-family: var(--font-logo);
  font-size: 56px;
  line-height: 1;
  color: var(--fg-on-dark);
}
.footer-brand .tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(252,251,250,0.5);
  margin-top: 6px;
}
.footer-brand p {
  color: rgba(252,251,250,0.6);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  margin: var(--sp-4) 0 var(--sp-4);
  max-width: 30ch;
}
.footer h4 {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(252,251,250,0.5);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-list a {
  font-size: var(--fs-14);
  color: rgba(252,251,250,0.85);
  transition: color var(--dur-2);
}
.footer-list a:hover { color: var(--accent); }
.footer-socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.footer-social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--social-color, rgba(252,251,250,0.5));
  background: transparent;
  display: grid; place-items: center;
  color: var(--social-color, rgba(252,251,250,0.7));
  transition: all var(--dur-2) var(--ease-soft);
}
.footer-social-link[data-social="instagram"] { --social-color: var(--bm-pink-lavender); }
.footer-social-link[data-social="facebook"]  { --social-color: var(--bm-teal); }
.footer-social-link[data-social="youtube"]   { --social-color: var(--bm-pink); }
.footer-social-link:hover {
  background: var(--social-color, var(--accent));
  border-color: var(--social-color, var(--accent));
  color: var(--bm-text-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -6px var(--social-color, var(--accent));
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(252,251,250,0.1);
  font-size: var(--fs-12);
  color: rgba(252,251,250,0.45);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.footer-sig {
  font-family: var(--font-script);
  font-size: var(--fs-32);
  color: rgba(252,251,250,0.7);
}

/* ============ MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(29,29,28,0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  animation: fadeIn var(--dur-3) var(--ease-soft);
}
.modal.open { display: flex; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-content {
  position: relative;
  width: 100%;
  max-width: 1024px;
  aspect-ratio: 16/9;
  background: black;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: pop var(--dur-3) var(--ease-soft);
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal-close {
  position: absolute;
  top: -48px; right: 0;
  color: var(--fg-on-dark);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(252,251,250,0.1);
  border: 1px solid rgba(252,251,250,0.2);
}
.modal-close:hover { background: rgba(252,251,250,0.2); }
.modal iframe { width: 100%; height: 100%; border: 0; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   Skip link (a11y) + mobile menu
   ============================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--fg-1);
  color: var(--fg-on-dark);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  font-weight: 600;
  z-index: 200;
  transition: top var(--dur-2);
}
.skip-link:focus { top: 8px; }

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  flex-direction: column;
  gap: 0;
  z-index: 99;
}
.mobile-menu[data-open="true"] { display: flex; }
.mobile-menu a {
  display: block;
  padding: 14px 4px;
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--fg-1);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu .mobile-menu-cta {
  margin-top: var(--sp-3);
  background: var(--fg-1);
  color: var(--fg-on-dark);
  text-align: center;
  border-radius: var(--r-pill);
  padding: 14px 24px;
  border-bottom: 0;
  font-weight: 600;
}

/* ============================================================
   Tablet (≤ 980px)
   ============================================================ */
@media (max-width: 980px) {
  :root {
    --sp-9: 80px;
    --sp-8: 56px;
    --sp-7: 40px;
  }
  .container { padding: 0 var(--sp-4); }
  .hero { padding: var(--sp-6) 0 var(--sp-7); }
  .hero-photo-wrap { aspect-ratio: 4/5; max-height: 560px; }
  .video-thumb-row { grid-template-columns: 130px 1fr; }
}

/* ============================================================
   Mobile (≤ 720px)
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --fs-56: 40px;
    --fs-44: 32px;
    --fs-32: 24px;
    --fs-24: 20px;
    --fs-20: 17px;
    --sp-9: 64px;
    --sp-8: 44px;
    --sp-7: 32px;
  }
  body { font-size: var(--fs-14); }
  .container, .container-narrow { padding: 0 var(--sp-3); }
  section { padding: var(--sp-7) 0; }

  /* Nav */
  .nav-cta { display: none; }
  /* keep nav sticky on mobile so the hamburger is always reachable */

  /* Hero */
  .hero-display { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-lead { font-size: var(--fs-16); }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .hero-meta {
    gap: var(--sp-4);
  }
  .hero-meta-item .value {
    font-size: 1.55rem;
  }
  .hero-photo-wrap { aspect-ratio: 4/5; }

  /* Ticker */
  .ticker-item { font-size: var(--fs-24); gap: var(--sp-3); }
  .ticker-track { gap: var(--sp-5); }

  /* Music */
  .player-card { padding: var(--sp-5); }
  .player-track-info .title { font-size: var(--fs-24); }
  .tracklist-row { grid-template-columns: 28px 1fr auto; padding: var(--sp-3); gap: var(--sp-3); }
  .tracklist-row .tag { display: none; }
  .tracklist-row .info .title { font-size: var(--fs-18); }
  .streaming-row { justify-content: center; }
  .streaming-link { flex: 1 1 auto; justify-content: center; min-width: 0; }

  /* Videos */
  .video-thumb-row { grid-template-columns: 110px 1fr; gap: var(--sp-3); }
  .video-feature-cap { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .video-feature-cap .title { font-size: var(--fs-20); }

  /* Shows */
  .shows-head { gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .show-row { padding: var(--sp-4) 0; }
  .show-info .venue { font-size: var(--fs-18); }
  .show-meta-extra { margin-top: var(--sp-2); }
  .show-actions { margin-top: var(--sp-2); }

  /* Gallery */
  .gallery-tile { transform: rotate(0deg) !important; }

  /* Booking */
  .booking { padding: var(--sp-7) 0; }
  .form { padding: var(--sp-5); }
  .form-submit { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .form-submit .btn { justify-content: center; }
  .form-fineprint { text-align: center; }

  /* Footer */
  .footer { padding: var(--sp-7) 0 var(--sp-4); }
  .footer-bottom { flex-direction: column; gap: var(--sp-2); text-align: center; }
}

/* Extra-small (≤ 420px) */
@media (max-width: 420px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-meta {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .hero-meta-item:first-child {
    grid-column: auto;
  }
  .hero-meta-item .value {
    font-size: 1.45rem;
  }
  .hero-photo-tag { font-size: 10px; padding: 6px 10px; }
  .player-controls { gap: var(--sp-3); }
  .player-btn.play { width: 56px; height: 56px; }
  .nav-logo img { height: 44px; }
}

/* Inputs need 16px+ on iOS to avoid auto-zoom */
@media (max-width: 720px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   CART — slide-out drawer + add-to-cart UI on merch cards
   ============================================================ */

/* Add-to-cart row on merch card */
.merch-buy {
  display: flex; gap: 8px; align-items: stretch;
  margin-top: auto;
  padding-top: var(--sp-3);
}
.merch-size {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 0 12px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg-1);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--fg-1);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231D1D1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 28px;
  transition: border-color var(--dur-2);
}
.merch-size:focus { outline: none; border-color: var(--accent); }
.merch-add {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px;
  padding: 0 16px;
  border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--fg-on-dark);
  font-family: var(--font-body); font-size: var(--fs-14); font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-soft), transform var(--dur-1);
}
.merch-add:hover { background: var(--accent-warm); color: var(--fg-1); }
.merch-add:active { transform: scale(0.98); }
.merch-add:disabled {
  background: var(--bg-2); color: var(--fg-muted);
  cursor: not-allowed; opacity: 0.7;
}
.merch-add.added {
  background: var(--accent);
  pointer-events: none;
}

/* Drawer + overlay */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(29,29,28,0.55);
  backdrop-filter: blur(6px);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-soft);
}
.cart-overlay[data-open="true"] { opacity: 1; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--bg-1);
  z-index: 100;
  display: flex; flex-direction: column;
  box-shadow: -16px 0 40px rgba(29,29,28,0.18);
  transform: translateX(100%);
  transition: transform var(--dur-4) var(--ease-soft);
  overflow: hidden;
}
.cart-drawer[data-open="true"] { transform: translateX(0); }

.cart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.cart-eyebrow {
  display: block;
  font-size: 10px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-warm); font-weight: 600; margin-bottom: 4px;
}
.cart-title {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  font-size: 40px; line-height: 1.1; margin: 0;
  letter-spacing: -0.01em;
}
.cart-title em { color: var(--accent); }
.cart-close {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--fg-2);
  border-radius: 50%; cursor: pointer;
  transition: background var(--dur-2);
}
.cart-close:hover { background: var(--bg-2); color: var(--fg-1); }

.cart-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 24px 20px;
  -webkit-overflow-scrolling: touch;
}
.cart-empty {
  padding: 56px 16px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cart-empty .icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bm-surface-blush);
  display: grid; place-items: center;
  color: var(--accent-warm);
}
.cart-empty .ttl {
  font-family: var(--font-body); font-style: normal; font-weight: 700;
  font-size: 24px; color: var(--fg-1);
}
.cart-empty .body { color: var(--fg-2); font-size: var(--fs-14); max-width: 28ch; line-height: var(--lh-normal); }
.cart-empty .keep-shopping {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--fg-1); color: var(--fg-on-dark);
  font-size: var(--fs-14); font-weight: 600;
  cursor: pointer; border: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-img {
  width: 72px; height: 88px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-2);
}
.cart-line-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.cart-line-info { min-width: 0; }
.cart-line-name {
  font-size: var(--fs-14); font-weight: 600;
  line-height: 1.3; margin: 0 0 2px;
  color: var(--fg-1);
}
.cart-line-meta {
  font-size: 12px; color: var(--fg-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}
.cart-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  height: 30px;
  background: var(--bg-1);
}
.cart-qty button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--fg-1); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.cart-qty button:hover { color: var(--accent); }
.cart-qty button:disabled { color: var(--fg-muted); cursor: not-allowed; }
.cart-qty .q {
  min-width: 22px; text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
}
.cart-line-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 8px;
}
.cart-line-price {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.cart-line-remove {
  border: 0; background: transparent;
  color: var(--fg-muted); cursor: pointer;
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.cart-line-remove:hover { color: var(--accent-warm); }

.cart-foot {
  flex: 0 0 auto;
  padding: 18px 24px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  display: flex; flex-direction: column; gap: 12px;
}
.cart-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-body); font-style: normal; font-weight: 700;
  font-size: 20px;
  color: var(--fg-1);
}
.cart-summary-row span:last-child {
  font-family: var(--font-mono); font-style: normal;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.cart-summary-row.minor {
  font-weight: 500; font-size: 14px; color: var(--fg-2);
  margin-bottom: 4px;
}
.cart-summary-row.minor span:last-child { font-size: 14px; }
.cart-summary-note {
  font-size: 12px; color: var(--fg-muted);
  margin-top: 2px;
}
.cart-summary-note:empty { display: none; }
/* Ship / Local pickup segmented control (#407) */
.cart-fulfillment {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin-bottom: 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.cart-fulfillment button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 8px 10px; border-radius: calc(var(--r-sm) - 2px);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--fg-2); transition: background .15s, color .15s;
}
.cart-fulfillment button[aria-pressed="true"] {
  background: var(--bg-1); color: var(--fg-1); box-shadow: var(--shadow-1);
}
.cart-checkout {
  width: 100%; justify-content: center;
  height: 50px; font-size: var(--fs-14);
}
.cart-checkout:disabled {
  background: var(--bg-2); color: var(--fg-muted);
  cursor: not-allowed; box-shadow: none;
}
.cart-trust {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.cart-trust .trust-item {
  display: inline-flex; align-items: center; gap: 5px;
}

/* Toast — "added to bag" */
.cart-toast {
  position: fixed;
  top: 24px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--fg-1); color: var(--fg-on-dark);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none;
  z-index: 120;
  transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-soft);
}
.cart-toast[data-show="true"] {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.cart-toast .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--fg-on-dark);
}

@media (max-width: 720px) {
  .cart-drawer { width: 100vw; }
  .cart-title { font-size: 26px; }
  .merch-buy { flex-direction: column; }
  .merch-size { width: 100%; }
}