/* Concert pages (one per concert, built by tools/build_concert_pages.py).
   Every colour and font is a brand token from style.css, which is loaded first. */

/* ── Page-only layout. Every colour and font is a brand token from style.css. ── */
html { scroll-padding-top: 84px; }
body { background: var(--omni-cream-outer); }

.sp-wrap {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* Header: logo and one button. There is nothing else to navigate to on a page
   whose only job is one concert; the season lives a click away. */
.sp-header {
    position: sticky; top: 0; z-index: 20;
    background: var(--omni-espresso);
    border-bottom: 1px solid rgba(185, 139, 69, 0.35);
}
.sp-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 68px;
}
.sp-logo {
    font-family: var(--omni-display); font-weight: 500;
    font-size: clamp(0.95rem, 2vw, 1.15rem); letter-spacing: var(--omni-track-xs);
    text-transform: uppercase; color: var(--omni-ivory); text-decoration: none; line-height: 1.1;
}
.sp-logo .logo-bold { font-weight: 700; }
.sp-logo small {
    display: block; font-family: var(--omni-editorial); font-style: italic; font-weight: 400;
    font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; color: var(--omni-muted-ivory);
}
.sp-nav__links { display: flex; align-items: center; gap: 1.25rem; }
.sp-nav__all {
    font-family: var(--omni-display); font-size: 0.72rem; letter-spacing: var(--omni-track-md);
    text-transform: uppercase; color: var(--omni-ivory); text-decoration: none; opacity: 0.85;
}
.sp-nav__all:hover { opacity: 1; color: var(--omni-antique-gold); }
.sp-nav .btn { padding: 0.75rem 1.3rem; min-height: 44px; }
@media (max-width: 560px) { .sp-nav__all { display: none; } }

/* Hero: the cinematic dark section the brand guide allows for the immersive
   moment. Poster left, the evening's facts right. */
.sp-hero {
    background: var(--omni-portfolio-bg);
    color: var(--omni-ivory);
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    position: relative; overflow: hidden;
}
.sp-hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 40%, rgba(185, 139, 69, 0.12), transparent 60%);
    pointer-events: none;
}
.sp-hero__grid {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.sp-hero__poster { margin: 0; }
.sp-hero__poster img {
    display: block; width: 100%; max-width: 440px; margin-inline: auto;
    border-radius: var(--omni-radius-xs); box-shadow: var(--omni-shadow-poster);
}
.sp-eyebrow {
    font-family: var(--omni-display); font-weight: 500; font-size: 0.74rem; line-height: 1.6;
    letter-spacing: var(--omni-track-xl); text-transform: uppercase; color: var(--omni-antique-gold);
}
.sp-hero h1 {
    font-family: var(--omni-display); font-weight: 400;
    font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 0.98;
    letter-spacing: var(--omni-track-sm); text-transform: uppercase;
    color: var(--omni-ivory); text-shadow: var(--omni-text-shadow-dark);
    margin: 0.9rem 0 0.7rem;
}
.sp-hero__sub {
    font-family: var(--omni-display); font-weight: 400; font-size: clamp(0.85rem, 1.6vw, 1.05rem);
    letter-spacing: var(--omni-track-2xl); text-transform: uppercase; color: var(--omni-antique-gold);
    margin-bottom: 1.6rem;
}
.sp-hero__lede {
    font-family: var(--omni-editorial); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.35; color: var(--omni-ivory); max-width: 34rem; margin-bottom: 1.8rem;
}
.sp-facts {
    list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.5rem; margin: 0 0 2rem; padding: 1.4rem 0;
    border-top: 1px solid rgba(185, 139, 69, 0.45); border-bottom: 1px solid rgba(185, 139, 69, 0.45);
}
.sp-facts dt, .sp-fact__k {
    font-family: var(--omni-display); font-size: 0.66rem; letter-spacing: var(--omni-track-lg);
    text-transform: uppercase; color: var(--omni-antique-gold); margin-bottom: 0.25rem;
}
.sp-fact__v {
    font-family: var(--omni-display); font-size: clamp(0.85rem, 1.5vw, 0.98rem);
    letter-spacing: var(--omni-track-xs); color: var(--omni-ivory); line-height: 1.4;
}
.sp-fact__v small { display: block; font-family: var(--omni-editorial); font-size: 1rem; letter-spacing: 0; color: var(--omni-muted-ivory); }
.sp-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; align-items: center; }
.sp-hero__note {
    margin-top: 1rem; font-family: var(--omni-editorial); font-size: 1rem; color: var(--omni-muted-ivory);
}
/* Struck list price and the sale tag */
.sp-was { color: var(--omni-muted-ivory); text-decoration: line-through; margin-right: 0.35em; font-weight: 400; }
.sp-tickets__price .sp-was { color: var(--omni-parchment-deep); font-size: 1.1rem; }
.sp-sale {
    display: inline-block; margin-left: 0.6rem; vertical-align: middle;
    font-family: var(--omni-display); font-style: normal; font-size: 0.66rem; letter-spacing: var(--omni-track-md);
    text-transform: uppercase; color: var(--omni-espresso); background: var(--omni-terracotta);
    padding: 0.35rem 0.6rem; border-radius: var(--omni-radius-sm);
}
.sp-stickybar__txt s { color: var(--omni-parchment-deep); margin-right: 0.3em; }

/* Countdown chip pinned to the poster's top-left corner, where the parchment
   is bare. The figure shrinks to the image so the corner is the image's corner
   on every screen size. */
.sp-hero__poster { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
.sp-deal {
    position: absolute; top: 14px; left: 14px;
    display: grid; gap: 0.15rem; text-align: left;
    background: rgba(47, 26, 20, 0.92); border: 1px solid var(--omni-antique-gold);
    border-radius: var(--omni-radius-sm); padding: 0.55rem 0.8rem 0.6rem;
    box-shadow: var(--omni-shadow-card); pointer-events: none;
}
.sp-deal__label { font-family: var(--omni-display); font-size: 0.62rem; letter-spacing: var(--omni-track-xl); text-transform: uppercase; color: var(--omni-terracotta); }
.sp-deal__price { font-family: var(--omni-display); font-size: 1.15rem; letter-spacing: var(--omni-track-xs); color: var(--omni-ivory); }
.sp-deal__price s { color: var(--omni-muted-ivory); font-size: 0.85rem; margin-right: 0.3em; }
.sp-deal__clock { font-family: var(--omni-editorial); font-style: italic; font-size: 0.95rem; color: var(--omni-muted-ivory); }
.sp-deal__clock time { font-family: var(--omni-display); font-style: normal; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--omni-ivory); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    .sp-hero__grid { grid-template-columns: 1fr; }
    .sp-hero__poster img { max-width: 320px; }
    .sp-hero__copy { text-align: center; }
    .sp-hero__lede { margin-inline: auto; }
    .sp-facts { text-align: left; }
    .sp-hero__cta { justify-content: center; }
}
@media (max-width: 480px) {
    .sp-facts { grid-template-columns: 1fr; }
    .sp-hero__cta .btn { width: 100%; }
}

/* Credentials strip: the brand guide's "specifics over adjectives", as four facts. */
.sp-creds { background: var(--omni-rosemary-gold); padding: clamp(1.6rem, 3vw, 2.4rem) 0; }
.sp-creds ul {
    list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 2rem; text-align: center;
}
.sp-creds li {
    font-family: var(--omni-display); font-size: 0.78rem; letter-spacing: var(--omni-track-md);
    text-transform: uppercase; color: var(--omni-espresso); line-height: 1.6;
}
.sp-creds li span { display: block; font-family: var(--omni-editorial); font-style: italic; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--omni-umber); }
@media (max-width: 760px) { .sp-creds ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sp-creds ul { grid-template-columns: 1fr; } }

/* Generic section chrome */
.sp-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sp-section--card { background: var(--omni-cream-card); }
.sp-section--dark { background: var(--omni-portfolio-bg); color: var(--omni-ivory); }
.sp-head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.sp-head .sp-eyebrow { color: var(--omni-gold-on-light); }
.sp-section--dark .sp-head .sp-eyebrow { color: var(--omni-antique-gold); }
.sp-title {
    font-family: var(--omni-display); font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.08; letter-spacing: var(--omni-track-sm); text-transform: uppercase;
    color: var(--omni-espresso); margin-top: 0.6rem;
}
.sp-section--dark .sp-title { color: var(--omni-ivory); }
.sp-rule { width: 64px; height: 1px; background: var(--omni-antique-gold); border: 0; margin: 1.1rem auto 0; }
.sp-head p { font-family: var(--omni-editorial); font-size: 1.2rem; line-height: 1.5; color: var(--omni-umber); margin-top: 1rem; }
.sp-section--dark .sp-head p { color: var(--omni-muted-ivory); }

/* Videos: three click-to-play tiles. The YouTube player is only loaded when
   somebody presses play, so three embeds cost nothing for people who scroll past. */
.sp-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.sp-video { margin: 0; }
.sp-video__frame {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--omni-radius-xs);
    background: var(--omni-page-night); box-shadow: var(--omni-shadow-card);
}
.sp-video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-video__play {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
    background: linear-gradient(to top, rgba(16, 11, 7, 0.55), rgba(16, 11, 7, 0.05) 60%);
    display: grid; place-items: center; color: var(--omni-ivory);
}
.sp-video__play span {
    width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--omni-antique-gold);
    background: rgba(47, 26, 20, 0.7); display: grid; place-items: center;
    font-size: 1.4rem; padding-left: 4px; transition: transform 0.2s ease, background 0.2s ease;
}
.sp-video__play:hover span { transform: scale(1.06); background: var(--omni-antique-gold); color: var(--omni-espresso); }
.sp-video figcaption { margin-top: 0.8rem; }
.sp-video__piece { font-family: var(--omni-display); font-size: 0.8rem; letter-spacing: var(--omni-track-xs); text-transform: uppercase; color: var(--omni-espresso); }
.sp-video__by { display: block; font-family: var(--omni-editorial); font-style: italic; font-size: 1.05rem; color: var(--omni-umber); }
@media (max-width: 860px) { .sp-videos { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* About: photo and biography side by side */
.sp-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sp-about img { display: block; width: 100%; border-radius: var(--omni-radius-xs); box-shadow: var(--omni-shadow-card); }
.sp-about p { font-family: var(--omni-editorial); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.55; color: var(--omni-umber); margin-bottom: 1rem; }
.sp-about p strong { color: var(--omni-espresso); font-weight: 600; }
.sp-about .sp-eyebrow { color: var(--omni-gold-on-light); margin-bottom: 0.8rem; }
.sp-about__link { font-family: var(--omni-display); font-size: 0.72rem; letter-spacing: var(--omni-track-md); text-transform: uppercase; color: var(--omni-gold-on-light); text-decoration: none; border-bottom: 1px solid var(--omni-antique-gold); }
@media (max-width: 860px) { .sp-about { grid-template-columns: 1fr; } }

/* Tickets: the checkout itself, in a card, on a dark stage so it reads as the
   destination of the page rather than one more block of text. */
.sp-tickets__card {
    background: var(--omni-cream-card); color: var(--omni-umber);
    border: 1px solid var(--omni-edge); border-radius: var(--omni-radius-md);
    max-width: 760px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--omni-shadow-lightbox);
}
.sp-tickets__price {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem;
    padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--omni-edge);
}
.sp-tickets__price strong { font-family: var(--omni-display); font-weight: 500; font-size: 1.6rem; letter-spacing: var(--omni-track-xs); color: var(--omni-espresso); }
.sp-tickets__price span { font-family: var(--omni-editorial); font-size: 1.1rem; color: var(--omni-umber); }
.sp-tickets__body { min-height: 320px; position: relative; }
.sp-tickets__body iframe[data-checkout] { width: 100%; border: 0; display: block; }
.sp-tickets__loading { font-family: var(--omni-editorial); font-style: italic; font-size: 1.1rem; color: var(--omni-umber); text-align: center; padding: 3rem 1rem; }
.sp-tickets__loading a { color: var(--omni-gold-on-light); }
.sp-tickets__foot { margin-top: 1.2rem; text-align: center; font-family: var(--omni-editorial); font-size: 1.02rem; color: var(--omni-umber); line-height: 1.55; }
.sp-tickets__foot a { color: var(--omni-gold-on-light); }
.sp-season {
    max-width: 760px; margin: 1.75rem auto 0; text-align: center;
    font-family: var(--omni-editorial); font-size: 1.15rem; color: var(--omni-muted-ivory);
}
.sp-season a { color: var(--omni-ivory); text-decoration: none; border-bottom: 1px solid var(--omni-antique-gold); }
.sp-season a:hover { color: var(--omni-antique-gold); }

/* Practical details */
.sp-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 980px; margin: 0 auto; }
.sp-info h3 { font-family: var(--omni-display); font-weight: 500; font-size: 0.74rem; letter-spacing: var(--omni-track-lg); text-transform: uppercase; color: var(--omni-gold-on-light); margin-bottom: 0.6rem; }
.sp-info p { font-family: var(--omni-editorial); font-size: 1.12rem; line-height: 1.55; color: var(--omni-umber); }
.sp-info a { color: var(--omni-espresso); }
@media (max-width: 760px) { .sp-info { grid-template-columns: 1fr; } }

/* Footer links are absolute here because this page is not the home page. */
.site-footer { margin-top: 0; }

/* Sticky mobile ticket bar: on a phone the checkout is a long scroll away, and a
   button that is always on screen is the difference between finding it and not.
   Hidden while the checkout itself is on screen (js/samrat.js toggles it). */
.sp-stickybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 0.6rem max(0.9rem, var(--safe-r)) max(0.6rem, var(--safe-b)) max(0.9rem, var(--safe-l));
    background: rgba(47, 26, 20, 0.96); border-top: 1px solid rgba(185, 139, 69, 0.45);
    display: none; align-items: center; justify-content: space-between; gap: 0.8rem;
}
.sp-stickybar__txt { font-family: var(--omni-display); font-size: 0.68rem; letter-spacing: var(--omni-track-md); text-transform: uppercase; color: var(--omni-ivory); line-height: 1.5; }
.sp-stickybar__txt small { display: block; font-family: var(--omni-editorial); font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--omni-muted-ivory); }
.sp-stickybar .btn { padding: 0.7rem 1.1rem; min-height: 44px; white-space: nowrap; }
@media (max-width: 860px) {
    .sp-stickybar.is-on { display: flex; }
    body.has-stickybar { padding-bottom: 76px; }
}
    

/* ── Additions for the generated pages ───────────────────────────────── */
[hidden] { display: none !important; }

/* Attributed press quotes, used where a page has no hand-written credentials strip. */
.sp-quotes { background: var(--omni-rosemary-gold); padding: clamp(1.8rem, 3.5vw, 2.8rem) 0; }
.sp-quotes ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem 3rem; text-align: center; max-width: 1000px; margin: 0 auto; }
.sp-quotes blockquote { margin: 0; }
.sp-quotes p { font-family: var(--omni-editorial); font-style: italic; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.35; color: var(--omni-quote-brown); }
.sp-quotes cite { display: block; margin-top: 0.6rem; font-family: var(--omni-display); font-style: normal; font-size: 0.68rem; letter-spacing: var(--omni-track-md); text-transform: uppercase; color: var(--omni-gold-on-light); }

/* Two performers on one page (Grisha Goryachev and Virgile Barthe). */
.sp-about--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.sp-about--two > div { display: grid; gap: 1.2rem; }
.sp-about--two img { display: block; width: 100%; border-radius: var(--omni-radius-xs); box-shadow: var(--omni-shadow-card); }
.sp-about--two p { font-family: var(--omni-editorial); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--omni-umber); }
.sp-about--two p strong { color: var(--omni-espresso); font-weight: 600; }
.sp-about--two h3 { font-family: var(--omni-display); font-weight: 500; font-size: 1.05rem; letter-spacing: var(--omni-track-sm); text-transform: uppercase; color: var(--omni-espresso); }
@media (max-width: 760px) { .sp-about--two { grid-template-columns: 1fr; } }

/* Tickets sold elsewhere (City Box Office for Herbst Theatre): a button, not a form. */
.sp-tickets__cbo { text-align: center; padding: 1.5rem 0 0.5rem; }
.sp-tickets__cbo p { font-family: var(--omni-editorial); font-size: 1.1rem; line-height: 1.5; color: var(--omni-umber); margin-bottom: 1.2rem; }
.sp-tickets__cbo .btn { min-width: 260px; }


/* ── The venue card, mirrored from the front page's Venues section ────── */
.sp-venue {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center; max-width: 980px; margin: 0 auto clamp(2rem, 4vw, 3rem);
    background: var(--omni-cream-card); border: 1px solid var(--omni-edge); border-radius: var(--omni-radius-md);
    padding: clamp(1rem, 2.5vw, 1.75rem); box-shadow: var(--omni-shadow-card);
}
.sp-venue__photo { position: relative; }
.sp-venue__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--omni-radius-xs); }
.sp-venue__orn {
    position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%);
    font-family: var(--omni-display); font-size: 0.8rem; letter-spacing: 0.3em; color: var(--omni-ivory);
    text-shadow: var(--omni-text-shadow-dark); white-space: nowrap;
}
.sp-venue__body .sp-eyebrow { color: var(--omni-gold-on-light); margin-bottom: 0.5rem; }
.sp-venue__name { font-family: var(--omni-display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.55rem); letter-spacing: var(--omni-track-xs); text-transform: uppercase; color: var(--omni-espresso); line-height: 1.15; }
.sp-venue__count { font-family: var(--omni-display); font-size: 0.68rem; letter-spacing: var(--omni-track-md); text-transform: uppercase; color: var(--omni-gold-on-light); margin: 0.4rem 0 0.9rem; }
.sp-venue__neighborhood { font-family: var(--omni-editorial); font-style: italic; font-size: 1.1rem; color: var(--omni-umber); }
.sp-venue__address { font-family: var(--omni-editorial); font-size: 1.12rem; color: var(--omni-espresso); margin: 0.2rem 0 0.6rem; }
.sp-venue__transit { font-family: var(--omni-editorial); font-size: 1.05rem; line-height: 1.5; color: var(--omni-umber); }
.sp-info--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .sp-venue { grid-template-columns: 1fr; }
    .sp-info--two { grid-template-columns: 1fr; }
}

/* ── Two posters, stacked (a dual concert) ─────────────────────────────── */
.sp-hero__poster--two { display: grid; gap: 1.1rem; justify-items: center; }
.sp-hero__poster--two img { max-width: 300px; }
@media (max-width: 860px) { .sp-hero__poster--two img { max-width: 240px; } }

/* ── Previous / next concert, in card order ────────────────────────────
   Side version: fixed chips at mid-height on both edges. Foot version: a
   static row above the footer, so phones (where the side text is hidden)
   still get the names. */
.sp-switch--side {
    position: fixed; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 25;
    display: flex; justify-content: space-between; align-items: center; padding: 0 0.6rem;
    pointer-events: none;
}
.sp-switch--side .sp-switch__link {
    pointer-events: auto;
    display: grid; justify-items: center; text-align: center; gap: 0.25rem; width: 158px;
    padding: 0.75rem 0.6rem 0.8rem; text-decoration: none;
    border: 1px solid rgba(185, 139, 69, 0.5); border-radius: var(--omni-radius-sm);
    background: rgba(47, 26, 20, 0.86); color: var(--omni-ivory);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: var(--omni-shadow-card);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sp-switch--side .sp-switch__link:hover, .sp-switch--side .sp-switch__link:focus-visible { background: rgba(47, 26, 20, 0.97); border-color: var(--omni-antique-gold); }
.sp-switch--side .sp-switch__link--prev:hover { transform: translateX(-3px); }
.sp-switch--side .sp-switch__link--next:hover { transform: translateX(3px); }
.sp-switch__arrow { font-family: var(--omni-display); font-size: 1.6rem; line-height: 1; color: var(--omni-antique-gold); }
.sp-switch__text { display: grid; gap: 0.12rem; min-width: 0; }
.sp-switch__kicker { font-family: var(--omni-display); font-size: 0.56rem; letter-spacing: var(--omni-track-xl); text-transform: uppercase; color: var(--omni-antique-gold); }
.sp-switch__name { font-family: var(--omni-display); font-size: 0.8rem; letter-spacing: var(--omni-track-xs); text-transform: uppercase; color: inherit; line-height: 1.25; }
.sp-switch__meta { font-family: var(--omni-editorial); font-style: italic; font-size: 0.92rem; color: var(--omni-muted-ivory); line-height: 1.25; }

/* Narrower screens: the side chips shrink to round arrows; the text lives in the
   aria-label and in the foot row. */
@media (max-width: 1120px) {
    .sp-switch--side .sp-switch__link { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
    .sp-switch--side .sp-switch__text { display: none; }
    .sp-switch--side .sp-switch__arrow { font-size: 1.3rem; }
}

.sp-switch--foot {
    display: flex; justify-content: space-between; align-items: stretch; gap: 1rem;
    width: 100%; max-width: var(--content-max); margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3.5rem);
}
.sp-switch--foot .sp-switch__link {
    display: flex; align-items: center; gap: 0.8rem; max-width: 48%;
    padding: 0.6rem 0.9rem; text-decoration: none;
    border: 1px solid var(--omni-edge); border-radius: var(--omni-radius-sm);
    background: var(--omni-cream-card); color: var(--omni-espresso);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.sp-switch--foot .sp-switch__link:hover, .sp-switch--foot .sp-switch__link:focus-visible { background: var(--omni-rosemary-gold); border-color: var(--omni-antique-gold); }
.sp-switch--foot .sp-switch__link--next { flex-direction: row-reverse; text-align: right; margin-left: auto; }
.sp-switch--foot .sp-switch__arrow, .sp-switch--foot .sp-switch__kicker { color: var(--omni-gold-on-light); }
.sp-switch--foot .sp-switch__meta { color: var(--omni-umber); }
.sp-switch-foot { background: var(--omni-cream-outer); padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--omni-edge); }
@media (max-width: 640px) {
    .sp-switch--foot .sp-switch__link { padding: 0.5rem 0.6rem; gap: 0.5rem; }
    .sp-switch--foot .sp-switch__kicker { display: none; }
    .sp-switch--foot .sp-switch__name { font-size: 0.7rem; }
    .sp-switch--foot .sp-switch__meta { font-size: 0.82rem; }
}

/* ── The season strip at the top of the hero: every concert, side by side ──
   Round portrait on the top row, name and date beneath. Every item is the
   same height (two lines reserved for the name) so the row stays level.
   Scrolls sideways on narrow screens; the current concert is marked. */
.sp-lineup { width: 100%; max-width: var(--content-max); margin: 0 auto clamp(1.6rem, 3vw, 2.6rem); padding: 0 clamp(1.25rem, 5vw, 3.5rem); }
.sp-lineup ul {
    list-style: none; margin: 0; padding: 0.2rem 0 0.6rem;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 0.6rem;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(185, 139, 69, 0.5) transparent;
}
.sp-lineup li { display: flex; }
.sp-lineup__item {
    flex: 1 1 auto; display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: center;
    text-align: center; row-gap: 0.3rem; scroll-snap-align: start;
    padding: 0.6rem 0.4rem 0.7rem; border-radius: var(--omni-radius-sm); text-decoration: none;
    border: 1px solid transparent; color: var(--omni-ivory);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sp-lineup__item:hover, .sp-lineup__item:focus-visible { background: rgba(47, 26, 20, 0.7); border-color: rgba(185, 139, 69, 0.5); transform: translateY(-2px); }
.sp-lineup__item[aria-current="page"] { background: rgba(47, 26, 20, 0.85); border-color: var(--omni-antique-gold); }
.sp-lineup__item img {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
    border: 1px solid rgba(185, 139, 69, 0.45); box-shadow: var(--omni-shadow-card); margin-bottom: 0.15rem;
}
.sp-lineup__item[aria-current="page"] img { border-color: var(--omni-antique-gold); outline: 1px solid var(--omni-antique-gold); outline-offset: 3px; }
.sp-lineup__name {
    font-family: var(--omni-display); font-size: 0.64rem; letter-spacing: var(--omni-track-xs); text-transform: uppercase;
    line-height: 1.25; min-height: 2.5em; display: flex; align-items: flex-start; justify-content: center;
}
.sp-lineup__meta { font-family: var(--omni-editorial); font-style: italic; font-size: 0.88rem; color: var(--omni-muted-ivory); line-height: 1.2; white-space: nowrap; }
@media (max-width: 640px) {
    .sp-lineup ul { grid-auto-columns: 104px; }
    .sp-lineup__item img { width: 52px; height: 52px; }
}

/* ── The switch animation: out in the arrow's direction, in from the other ── */
main { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease; }
body.is-leaving-next main { transform: translateX(-6vw); opacity: 0; }
body.is-leaving-prev main { transform: translateX(6vw); opacity: 0; }
html.is-entering-next main { transform: translateX(6vw); opacity: 0; transition: none; }
html.is-entering-prev main { transform: translateX(-6vw); opacity: 0; transition: none; }
html.is-entering-next.is-in main, html.is-entering-prev.is-in main { transform: none; opacity: 1; transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s ease; }
@media (prefers-reduced-motion: reduce) {
    main, body.is-leaving-next main, body.is-leaving-prev main,
    html.is-entering-next main, html.is-entering-prev main { transition: none; transform: none; opacity: 1; }
}

/* style.css gives every link a gold bottom border; the strip items are boxes, not
   inline links, so take it off (the current item keeps its full gold frame). */
.sp-lineup .sp-lineup__item[href] { border-bottom: 1px solid transparent; }
.sp-lineup .sp-lineup__item[href]:hover, .sp-lineup .sp-lineup__item[href]:focus-visible { border-bottom-color: rgba(185, 139, 69, 0.5); }
.sp-lineup .sp-lineup__item[href][aria-current="page"] { border-bottom-color: var(--omni-antique-gold); }
.sp-switch .sp-switch__link[href] { border-bottom-width: 1px; }
.sp-switch--side .sp-switch__link[href] { border-bottom-color: rgba(185, 139, 69, 0.5); }
.sp-switch--foot .sp-switch__link[href] { border-bottom-color: var(--omni-edge); }

/* ── In-page swap: the whole main block slides; the strip portraits are small
   JPEG thumbnails cut at build time, not the 2 MB posters ── */
.sp-lineup__item img { background: rgba(47, 26, 20, 0.6); }

/* ── The in-page shift: old content slides off one edge while the new slides in
   from the other, both on screen at once, so no background ever shows ── */
.sp-ghost { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.sp-ghost > main { position: absolute; left: 0; right: 0; margin: 0; will-change: transform; }
.sp-ghost > main.sp-slide-out-next { transform: translateX(-100%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.sp-ghost > main.sp-slide-out-prev { transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
main.sp-slide-from-next { transform: translateX(100%); transition: none; }
main.sp-slide-from-prev { transform: translateX(-100%); transition: none; }
main.sp-slide-in { transform: none; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
    .sp-ghost { display: none; }
    main.sp-slide-from-next, main.sp-slide-from-prev { transform: none; }
}