:root {
    /* MFO red — warm, energetic, with a gold accent for zing. */
    --ink: #2a090c;
    --ink-2: #3a1015;
    --cream: #fff7f4;
    --violet: #b3121f;   /* deep red (accents, headings, marquee) */
    --pink: #e11d2a;     /* bright scarlet */
    --amber: #f0a500;    /* gold accent */
    --teal: #e0592b;     /* warm ember (rarely used) */
    --mfo-red: #891818;      /* the brick red from the orchestra's existing site */
    --mfo-red-lift: #a01d1d; /* hover */
    --text: #2e1414;
    --muted: #8a5a58;
    --radius: 18px;
    --grad: linear-gradient(100deg, var(--pink), var(--violet) 55%, var(--amber));
    --shadow: 0 18px 40px rgba(177, 18, 31, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--text);
    background: var(--cream);
    line-height: 1.6;
    overflow-x: hidden;
}
h1, h2, h3, h4, .brand-mark { font-family: "Space Grotesk", "Inter", sans-serif; }
a { color: inherit; }
img, iframe { max-width: 100%; }

.grad {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* ---- Scroll progress bar ---- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 4px; width: 0;
    background: var(--grad);
    z-index: 200;
    transition: width 0.1s linear;
}

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
/* A <button class="btn"> otherwise keeps the browser's own font and black border,
   so it doesn't match the same button made from a link. :where() keeps this at
   the weight of .btn, so .btn-secondary's border further down still wins. */
:where(button).btn { font-family: inherit; font-size: inherit; line-height: inherit; border: 0; }
/* Solid --mfo-red rather than the brand gradient, matching the deep brick red
   the orchestra's existing site uses for its panels. White on it measures
   9.5:1. Covers all three primary calls to action: "See our 2026 concerts",
   "Tickets" on each concert, and "Email us to come along". */
.btn-primary {
    background: var(--mfo-red);
    color: #fff;
    box-shadow: 0 10px 24px rgba(137, 24, 24, 0.35);
}
.btn-primary:hover {
    transform: translateY(-3px);
    background: var(--mfo-red-lift);
    box-shadow: 0 16px 30px rgba(137, 24, 24, 0.45);
}
/* Sits on the light hero scrim, so it's dark-on-light rather than the reverse. */
.btn-ghost {
    background: rgba(255, 255, 255, 0.5);
    color: var(--ink);
    border: 1.5px solid rgba(42, 9, 12, 0.4);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.75); }

/* ---- Nav ---- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem;
    /* Denser than it needs to be over a dark hero: the nav now sits on the
       light scrim at the top of the page, and its links are white. */
    background: rgba(42, 9, 12, 0.78);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s ease, padding 0.3s ease;
}
.nav.scrolled { background: rgba(42, 9, 12, 0.9); padding: 0.6rem 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: #fff; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--grad);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 16px rgba(225, 29, 42, 0.4);
}
.brand-mark.big { width: 60px; height: 60px; font-size: 1.4rem; border-radius: 16px; }
.brand-text { font-weight: 600; font-size: 0.95rem; }
.logo-mfo { height: 34px; width: auto; color: #fff7f4; display: block; }
.footer-brand .logo-mfo { height: 56px; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
    color: #f3e9ff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}
.nav-links a:not(.nav-cta)::after {
    content: "";
    position: absolute; left: 0; bottom: -6px;
    width: 0; height: 2px; border-radius: 2px;
    background: var(--grad);
    transition: width 0.25s ease;
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
    background: var(--mfo-red);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(137, 24, 24, 0.35);
}
.nav-cta:hover { background: var(--mfo-red-lift); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 26px; height: 3px; border-radius: 3px; background: #fff; transition: 0.3s; }

/* ---- Hero ---- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ink);
    overflow: hidden;
    padding: 7rem 1.5rem 4rem;
}
/* Crossfading photo slideshow behind the hero. */
.hero-slides { position: absolute; inset: 0; z-index: 0; background: #f3e2da; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
    will-change: transform, opacity;
}
.hero-slide.active { opacity: 1; }

/* ---- Ken Burns drift ----
   The slide only moves while it's the active one, so the zoom always starts as
   the image fades in rather than running on a timeline of its own. Slides
   alternate between pushing in and pulling out so consecutive images don't
   feel identical.

   Each slide's resting transform is the END of its own keyframes: when .active
   comes off and the animation stops, the transform it falls back to is the one
   it already had, so there's no jump during the 1.6s fade-out.
   Odd slides push in along one diagonal, even slides pull out along the other.

   Headroom rule: a translate of X% shifts the layer by X% x scale of its width,
   while the overscan available at that scale is only (scale - 1) / 2. So the
   pan has to stay under (scale - 1) / (2 x scale) at the SMALLEST scale in the
   keyframes — 3.7% here, at scale 1.08. Everything below is inside that, which
   is why the minimum zoom is 1.08 rather than 1.04: a flat image can't pan
   without showing an edge. */
.hero-slide                 { transform: scale(1.20) translate3d(2.6%, 1.6%, 0); }
.hero-slide:nth-child(even) { transform: scale(1.08) translate3d(-2.2%, 1.8%, 0); }

.hero-slide.active                 { animation: kenburns-in 6.8s ease-out forwards; }
.hero-slide.active:nth-child(even) { animation-name: kenburns-out; }

/* zoom in, drifting top-left -> bottom-right */
@keyframes kenburns-in {
    from { transform: scale(1.08) translate3d(-2.6%, -1.6%, 0); }
    to   { transform: scale(1.20) translate3d(2.6%, 1.6%, 0); }
}
/* zoom out, drifting top-right -> bottom-left */
@keyframes kenburns-out {
    from { transform: scale(1.20) translate3d(2.2%, -1.8%, 0); }
    to   { transform: scale(1.08) translate3d(-2.2%, 1.8%, 0); }
}

/* Warm cream scrim. The hero headline is black, and black needs a LIGHT
   background — on the old deep-red wash it measured under 2.4:1 and failed
   WCAG large-text contrast on every slide. At these alphas the instruments
   still read clearly through it and the headline measures ~9.8:1 at worst.
   Raising the alphas buys contrast the headline doesn't need and washes the
   photos out; lowering them starts to cost legibility. */
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse at center, rgba(255, 247, 244, 0.42) 8%, rgba(255, 233, 222, 0.58)),
        linear-gradient(120deg, rgba(255, 247, 244, 0.58), rgba(255, 226, 212, 0.42) 55%, rgba(255, 240, 232, 0.58));
}
.hero::after {
    /* Floor fade into the cream page background so the white stat cards that
       overlap the hero don't land on a hard edge. */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, transparent 60%, rgba(255, 247, 244, 0.85));
}
.hero-inner { position: relative; z-index: 3; max-width: 860px; }
.hero-inner .logo-mfo {
    height: clamp(64px, 11vw, 104px);
    margin: 0 auto 1.4rem;
    color: var(--ink);
    filter: drop-shadow(0 4px 14px rgba(255, 247, 244, 0.85));
}
.badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(42, 9, 12, 0.25);
    color: var(--ink-2);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(6px);
}
.hero h1 {
    font-size: clamp(2.6rem, 8vw, 5.5rem);
    line-height: 1.02;
    margin: 0 0 1.2rem;
    font-weight: 700;
    letter-spacing: -1px;
}
.hero h1 .grad {
    /* Solid black, overriding the .grad clipped-gradient treatment. "The
       Midlands" stays the slightly softer --ink above it. */
    background: none;
    -webkit-background-clip: border-box; background-clip: border-box;
    color: #000;
}
.hero-sub { font-size: clamp(1rem, 2.2vw, 1.35rem); max-width: 640px; margin: 0 auto 2.2rem; color: var(--ink-2); }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.hero-notes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-notes span {
    position: absolute;
    font-size: 2.4rem;
    color: rgba(42, 9, 12, 0.22);
    animation: float 9s ease-in-out infinite;
}
.hero-notes span:nth-child(1) { left: 8%;  top: 30%; animation-delay: 0s; }
.hero-notes span:nth-child(2) { left: 85%; top: 22%; animation-delay: 1.2s; font-size: 3rem; }
.hero-notes span:nth-child(3) { left: 18%; top: 68%; animation-delay: 2.4s; }
.hero-notes span:nth-child(4) { left: 78%; top: 70%; animation-delay: 0.6s; font-size: 3.2rem; }
.hero-notes span:nth-child(5) { left: 50%; top: 16%; animation-delay: 1.8s; }
.hero-notes span:nth-child(6) { left: 62%; top: 78%; animation-delay: 3s; }
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.5; }
    50% { transform: translateY(-26px) rotate(6deg); opacity: 0.9; }
}
.scroll-cue {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    z-index: 3; color: var(--ink); text-decoration: none; font-size: 1.5rem;
    animation: bounce 2s infinite;
}
@keyframes bounce { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 10px);} }

/* ---- Stats ---- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 1000px;
    margin: -3.5rem auto 0;
    padding: 0 1.5rem;
    position: relative;
    z-index: 5;
}
.stat {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.6rem 1rem;
    text-align: center;
    box-shadow: var(--shadow);
}
.stat-num {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 0.85rem; color: var(--muted); }

/* ---- Marquee ---- */
.marquee { overflow: hidden; padding: 2.5rem 0 0.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track {
    display: flex; gap: 1.5rem; width: max-content;
    animation: scroll-x 26s linear infinite;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600; font-size: 1.4rem; color: var(--violet);
    opacity: 0.7;
}
.marquee-track span:nth-child(even) { color: var(--pink); }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Generic section ---- */
.section { max-width: 1080px; margin: 0 auto; padding: 5rem 1.5rem; }
.section-alt { background: linear-gradient(180deg, #ffeee9, #fdf7ff); max-width: none; }
.section-alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: 2.5rem; text-align: center; }
.eyebrow {
    display: inline-block;
    font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    font-size: 0.8rem; color: var(--pink); margin-bottom: 0.6rem;
}
.section-head h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); margin: 0; letter-spacing: -0.5px; }
.lead { font-size: 1.2rem; color: var(--text); }

/* ---- About ---- */
/* The real orchestra photo. It's near-square, so it's capped by height rather
   than stretched across the column — a 16:9 crop would take the back row's
   heads off. */
.group-photo {
    margin: 0 0 2.5rem;
    text-align: center;
}
.group-photo img {
    width: 100%;
    max-width: 620px;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 4px solid #fff;
}
.group-photo figcaption {
    margin-top: 0.7rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; }
.instrument-card {
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.instrument-card h3 { margin-top: 0; }
.chips { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips li {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
}
.instrument-card .muted { color: #e8c4b8; }

/* ---- Musical director ---- */
.director {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 3rem;
    padding: 2.2rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1);
    border-left: 5px solid var(--pink);
}
.director-portrait {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--grad);
    box-shadow: var(--shadow);
}
.director-portrait img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    display: block;
}
.director-body h3 { margin: 0 0 0.8rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.director-body .eyebrow { margin-bottom: 0.2rem; }
.director-body .lead { margin-top: 0; }
.director .chips { margin-top: 1.4rem; }
.director .chips li {
    background: rgba(177, 18, 31, 0.08);
    border-color: rgba(177, 18, 31, 0.18);
    color: var(--violet);
}

/* ---- Music cards ---- */
.section-lead {
    max-width: 720px;
    margin: 1rem auto 0;
    font-size: 1.15rem;
    color: var(--text);
}
.music-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.6rem;
    align-items: start;
}
.music-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1);
    border-top: 5px solid var(--mfo-red);
}
.music-card-body { padding: 1.6rem; }
.music-card-body h3 { margin: 0 0 0.2rem; font-size: 1.3rem; }
.music-card-subtitle { margin: 0 0 1rem; font-size: 0.95rem; }
.music-card-notes { margin: 1rem 0 0; }

.video-frame {
    position: relative; aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Track list ---- */
.track-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* Deliberately nowrap: when the row wrapped, a long track title pushed its note
   onto the next line, where it read as belonging to the track below. The button
   shrinks and wraps its own text instead. */
.track-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: nowrap; }
.track {
    display: inline-flex; align-items: center; gap: 0.55rem;
    min-width: 0;                 /* lets the button shrink instead of shoving the note out */
    text-align: left;
    font: inherit; font-size: 0.92rem; font-weight: 500;
    background: linear-gradient(120deg, rgba(137, 24, 24, 0.09), rgba(240, 165, 0, 0.12));
    border: 1px solid transparent;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    color: var(--violet);
}
button.track { cursor: pointer; transition: background 0.18s ease, transform 0.15s ease; }
button.track:hover { background: linear-gradient(120deg, rgba(137,24,24,0.18), rgba(240,165,0,0.2)); transform: translateY(-2px); }
button.track:focus-visible { outline: 2px solid var(--mfo-red); outline-offset: 2px; }
.track-icon {
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;                 /* play triangle */
    border-color: transparent transparent transparent currentColor;
}
button.track[aria-pressed="true"] {
    background: var(--mfo-red); color: #fff;
    box-shadow: 0 8px 18px rgba(137, 24, 24, 0.3);
}
button.track[aria-pressed="true"] .track-icon {
    /* pause bars */
    width: 8px; height: 10px;
    border: 0;
    background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}
.track-soon { opacity: 0.5; }
.track-title { overflow-wrap: anywhere; }
.track-notes { font-size: 0.82rem; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.track-player { display: block; width: 100%; margin-top: 1rem; }

/* ---- Performances ---- */
.gigs { display: flex; flex-direction: column; gap: 1.1rem; }
.gig {
    display: flex; align-items: center; gap: 1.5rem;
    background: #fff; border-radius: var(--radius);
    padding: 1.3rem 1.6rem;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1);
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.gig:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(177, 18, 31, 0.18); }

/* Past 2026 events: greyed out and de-emphasised. */
.gig-past { filter: grayscale(1); opacity: 0.55; }
.gig-past:hover { transform: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); }
.gig-past .gig-date { background: #9a9a9a; box-shadow: none; }
.gig-past .gig-when { color: #8a8a8a; }
.gig-past .gig-cta { display: none; }
.gig-past .gig-body h3::after { content: " · past"; color: #9a9a9a; font-weight: 400; font-size: 0.8rem; }
.gig-date {
    flex: 0 0 auto; width: 76px; height: 76px;
    display: grid; place-content: center; text-align: center;
    background: var(--grad); color: #fff; border-radius: 14px;
    box-shadow: 0 8px 18px rgba(225, 29, 42, 0.3);
}
.gig-day { font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; font-weight: 700; line-height: 1; }
.gig-month { font-size: 0.75rem; letter-spacing: 1px; }
.gig-body { flex: 1; min-width: 0; }
.gig-body h3 { margin: 0 0 0.2rem; font-size: 1.25rem; }
.gig-when { margin: 0 0 0.4rem; color: var(--pink); font-weight: 600; font-size: 0.9rem; }
.gig-where { margin: 0 0 0.3rem; font-size: 0.95rem; }
.gig-price { margin: 0; font-size: 0.9rem; color: var(--muted); }
.gig-note { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--muted); font-style: italic; }
.gig-cta { flex: 0 0 auto; }
.gig-free {
    padding: 0.6rem 1.2rem; border-radius: 999px;
    background: rgba(177, 18, 31, 0.1); color: var(--violet);
    font-weight: 600; font-size: 0.9rem; white-space: nowrap;
}

/* ---- Join ---- */
.join-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.join-card {
    background: #fff; border-radius: var(--radius); padding: 1.8rem;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1);
    transition: transform 0.18s ease;
}
.join-card:hover { transform: translateY(-5px); }
.join-card h3 { margin-top: 0; }
.join-card p { margin-bottom: 0; }
.join-cta {
    margin-top: 2.5rem; text-align: center;
    background: var(--ink); color: #fff;
    padding: 2.5rem 1.5rem; border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.join-cta p { font-size: 1.25rem; margin: 0 0 1.4rem; }

/* ---- Footer ---- */
.footer { background: var(--ink); color: #e9dcff; padding: 3.5rem 1.5rem 1.5rem; }
.footer-inner {
    max-width: 1080px; margin: 0 auto;
    display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
    padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-brand p { margin: 0; font-weight: 600; }
.footer-brand .muted { color: #e0b3a8; font-weight: 400; }
.footer-contact h4 { margin: 0 0 0.5rem; }
.footer-contact a { color: #ffd86b; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.copyright { text-align: center; color: #b58a80; font-size: 0.85rem; margin: 1.5rem 0 0; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .brand-text { display: none; }
    .nav-toggle { display: flex; }
    .nav-links {
        position: absolute; top: 100%; right: 0; left: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(42, 9, 12, 0.97);
        padding: 0.5rem 1rem 1.2rem;
        transform: translateY(-140%);
        transition: transform 0.35s ease;
    }
    .nav-links.open { transform: translateY(0); }
    .nav-links a { padding: 0.9rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .nav-cta { text-align: center; margin-top: 0.6rem; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .about-grid, .music-grid { grid-template-columns: 1fr; }
    .director { grid-template-columns: 1fr; gap: 1.6rem; justify-items: center; text-align: center; }
    .director-portrait { width: 170px; }
    .director .chips { justify-content: center; }
    .join-grid { grid-template-columns: 1fr; }
    .gig { flex-wrap: wrap; }
    .gig-cta { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
    /* No Ken Burns / floating notes / marquee for anyone who's asked their OS
       for less motion — the slideshow still crossfades, it just holds still. */
    .hero-slide, .hero-slide.active, .hero-notes span, .marquee-track, .scroll-cue { animation: none; }
    .hero-slide, .hero-slide:nth-child(even) { transform: scale(1.08); }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Interior pages (login, admin, advent)
   The home page runs the nav over a full-height hero; everywhere else the nav
   is a solid bar and the content needs to clear it.
   ========================================================================== */
.nav-solid { background: rgba(42, 9, 12, 0.96); }
.page-shell { padding-top: 76px; min-height: 60vh; }

/* survey.… and advent.… (Pages/Shared/_Standalone.cshtml): a plain bar in place
   of the fixed nav, so nothing needs clearing above the page. */
.standalone-head {
    display: flex; align-items: center; justify-content: center;
    padding: 0.9rem 1.5rem;
    background: rgba(42, 9, 12, 0.96);
}
.standalone main { min-height: 60vh; }
/* The ticket bar is fixed to the top; with no fixed nav under it, the page just starts below it. */
.standalone.has-ticket-bar { padding-top: var(--ticket-bar-h); }

.nav-login {
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    padding: 0.45rem 1rem;
    border-radius: 999px;
}
.nav-login:hover { background: rgba(255, 255, 255, 0.12); }
.nav-signout { display: inline; margin: 0; }
.nav-linkish {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #f3e9ff; font: inherit; font-weight: 500; font-size: 0.95rem;
}
.nav-linkish:hover { text-decoration: underline; }

.section.narrow { max-width: 620px; }
.centred { text-align: center; }

/* ---- Forms ---- */
.form-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field > span:first-child { font-weight: 600; font-size: 0.9rem; }
.field input, .field select, .field textarea {
    font: inherit;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid rgba(42, 9, 12, 0.2);
    border-radius: 10px;
    background: #fffdfc;
    color: var(--text);
    width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--mfo-red);
    outline-offset: 1px;
    border-color: transparent;
}
.field textarea { min-height: 150px; resize: vertical; }
.field-check { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.field-check input { width: 1.1rem; height: 1.1rem; }
.field-hint { font-size: 0.82rem; color: var(--muted); }
.field-error { color: var(--mfo-red); font-size: 0.85rem; }
.form-errors:not(:empty) {
    background: rgba(137, 24, 24, 0.08);
    border-left: 4px solid var(--mfo-red);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    color: var(--mfo-red);
    font-size: 0.92rem;
}
.form-errors ul { margin: 0; padding-left: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-actions { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }

.btn-secondary {
    background: rgba(42, 9, 12, 0.08);
    color: var(--ink);
    border: 1.5px solid rgba(42, 9, 12, 0.2);
}
.btn-secondary:hover { background: rgba(42, 9, 12, 0.14); }
.btn-danger { background: #7a1520; color: #fff; }
.btn-danger:hover { background: #921a27; }
.btn-small { padding: 0.45rem 0.9rem; font-size: 0.85rem; }

/* ---- Admin ---- */
.admin-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.admin-head h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.admin-head-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.admin-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.admin-nav a {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(42, 9, 12, 0.07);
    font-size: 0.92rem;
    font-weight: 500;
}
.admin-nav a:hover { background: rgba(42, 9, 12, 0.14); }
.admin-nav a.current { background: var(--mfo-red); color: #fff; }

.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.admin-card {
    background: #fff; border-radius: var(--radius); padding: 1.6rem;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1);
    text-decoration: none; display: block;
    border-left: 5px solid var(--mfo-red);
    transition: transform 0.15s ease;
}
.admin-card:hover { transform: translateY(-4px); }
.admin-card h3 { margin: 0 0 0.3rem; }
.admin-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.admin-card .count { font-family: "Space Grotesk", sans-serif; font-size: 2rem; font-weight: 700; color: var(--mfo-red); }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1); }
.admin-table th, .admin-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid rgba(42, 9, 12, 0.08); vertical-align: top; }
.admin-table th { background: rgba(42, 9, 12, 0.05); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .row-actions { display: flex; gap: 0.4rem; white-space: nowrap; }
.admin-table .muted-row td { opacity: 0.55; }
.table-scroll { overflow-x: auto; }

.flash {
    padding: 0.9rem 1.1rem; border-radius: 10px; margin-bottom: 1.4rem;
    background: rgba(23, 122, 63, 0.1); border-left: 4px solid #177a3f; color: #14532d;
}
.flash-error { background: rgba(137, 24, 24, 0.09); border-left-color: var(--mfo-red); color: var(--mfo-red); }
.pill { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.pill-draft { background: rgba(42, 9, 12, 0.1); color: var(--muted); }
.pill-live { background: rgba(23, 122, 63, 0.14); color: #177a3f; }
.pill-pinned { background: rgba(240, 165, 0, 0.2); color: #8a5a00; }
.empty-note { background: #fff; border-radius: var(--radius); padding: 2.5rem; text-align: center; color: var(--muted); box-shadow: 0 10px 26px rgba(177, 18, 31, 0.08); }

@media (max-width: 860px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ---- News tiles (home page) ---- */
.news-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.news-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1);
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.news-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(177, 18, 31, 0.18); }
.news-tile-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(137, 24, 24, 0.12), rgba(240, 165, 0, 0.14));
    display: grid;
    place-items: center;
    overflow: hidden;
}
.news-tile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-tile-placeholder { font-size: 3rem; color: rgba(137, 24, 24, 0.35); }
.news-tile-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.news-tile-body time { font-size: 0.8rem; color: var(--muted); }
.news-tile-body h3 { margin: 0.25rem 0 0.5rem; font-size: 1.15rem; line-height: 1.3; }
.news-tile-body p { margin: 0 0 1rem; font-size: 0.95rem; color: var(--text); }
.news-more { margin-top: auto; font-weight: 600; font-size: 0.9rem; color: var(--mfo-red); }
.news-tile:hover .news-more { text-decoration: underline; }
.news-tile.news-pinned { border-top: 4px solid var(--mfo-red); }
.news-flag {
    position: absolute; top: 0.8rem; right: 0.8rem;
    background: var(--mfo-red); color: #fff;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    padding: 0.2rem 0.6rem; border-radius: 999px;
}
.news-all { text-align: center; margin-top: 2.2rem; }

/* ---- News archive (/news) ---- */
.news-archive { display: flex; flex-direction: column; gap: 1.6rem; }
.news-article {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1);
    scroll-margin-top: 90px;   /* so #item-N anchors clear the fixed nav */
}
.news-article:not(:has(.news-article-image)) { grid-template-columns: 1fr; }
.news-article.news-pinned { border-left: 5px solid var(--mfo-red); }
.news-article-image { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 200px; }
.news-article-body { padding: 1.8rem; }
.news-article-body time { font-size: 0.85rem; color: var(--muted); margin-right: 0.5rem; }
.news-article-body h3 { margin: 0.3rem 0 0.8rem; font-size: 1.4rem; }
.news-article-body p { margin: 0 0 0.8rem; }
.news-article-body p:last-child { margin-bottom: 0; }

/* Admin: picture column and the current-image preview. */
.admin-table .thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.current-image { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.current-image img { max-width: 220px; border-radius: 10px; display: block; }

@media (max-width: 700px) {
    .news-article { grid-template-columns: 1fr; }
    .news-article-image { max-height: 240px; }
}

/* The advent page brings its own stylesheet; this is just the empty-state note
   and making room for the site nav above the calendar board. */
.advent-page { padding-top: 1rem; border-radius: 0; }
.advent-empty {
    max-width: 640px; margin: 0 auto 1.5rem; text-align: center;
    background: rgba(0, 0, 0, 0.45); color: #fff;
    padding: 1rem 1.2rem; border-radius: 12px;
}
.advent-empty a { color: #ffd86b; }

/* Inline row editor in the track table. */
.inline-edit { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.inline-edit input {
    font: inherit; font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid rgba(42, 9, 12, 0.2);
    border-radius: 8px;
    background: #fffdfc;
    min-width: 9rem;
}
.inline-edit input:focus { outline: 2px solid var(--mfo-red); outline-offset: 1px; border-color: transparent; }

/* /admin/surveys: the title and its Rename button, and the box that replaces them. */
.survey-title { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.3rem; }
.survey-title[hidden] { display: none; }
form.inline-edit[hidden] { display: none; }
td .inline-edit { margin-bottom: 0.3rem; }
td .inline-edit input { min-width: 14rem; }

/* Marks a nav link only admins can currently see (e.g. the out-of-season advent
   calendar), so it's obvious visitors aren't getting it. */
.nav-tag {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ---- Member survey ---- */

/* Sits beside "Log in" in the nav. Gold rather than red so it reads as an
   invitation rather than another way in — and so it doesn't compete with the
   "Get in touch" button next to it. */
.nav-survey {
    border: 1.5px solid rgba(240, 165, 0, 0.7);
    background: rgba(240, 165, 0, 0.14);
    padding: 0.45rem 1rem;
    border-radius: 999px;
}
.nav-survey:hover { background: rgba(240, 165, 0, 0.26); }

.survey-intro { color: var(--muted); margin-bottom: 1.6rem; }
.survey-intro p { margin: 0 0 0.7rem; }
.survey-form { display: flex; flex-direction: column; gap: 1.2rem; }
.field-optional {
    font-style: normal; font-weight: 500; font-size: 0.78rem;
    color: var(--muted); margin-left: 0.4rem;
}

.survey-question {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.08);
    display: flex; flex-direction: column; gap: 0.9rem;
}
.survey-question-title {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 600; font-size: 1.1rem;
    margin: 0;
}
.survey-question.has-error { box-shadow: 0 0 0 2px var(--mfo-red), 0 10px 26px rgba(177, 18, 31, 0.08); }
.survey-help { margin: 0; color: var(--muted); font-size: 0.9rem; }
/* Comment boxes are an aside, not an essay — the 150px default is too tall here. */
.survey-question .field textarea { min-height: 70px; }

.survey-options { display: flex; flex-direction: column; gap: 0.5rem; }
/* The whole row is the target: easier on a phone than a 16px radio button. */
.survey-option {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid rgba(42, 9, 12, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.survey-option:hover { background: rgba(137, 24, 24, 0.05); border-color: rgba(137, 24, 24, 0.35); }
.survey-option input { width: 1.15rem; height: 1.15rem; accent-color: var(--mfo-red); flex: none; }
.survey-option:has(input:checked) {
    background: rgba(137, 24, 24, 0.08);
    border-color: var(--mfo-red);
    font-weight: 600;
}
.survey-option:focus-within { outline: 2px solid var(--mfo-red); outline-offset: 2px; }

.survey-actions { justify-content: center; margin-top: 0.4rem; }
.survey-forget { margin-top: 2rem; text-align: center; }
.survey-forget button { color: var(--muted); }

/* ---- Survey results ---- */
.survey-count { text-align: center; font-size: 1.05rem; margin-bottom: 1.6rem; }
.survey-result {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.6rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.08);
}
.survey-result h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.survey-bars { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.survey-bar-label { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.survey-bar-count { white-space: nowrap; font-weight: 600; }
.survey-bar-track { height: 10px; border-radius: 999px; background: rgba(42, 9, 12, 0.08); margin-top: 0.3rem; overflow: hidden; }
.survey-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--mfo-red), var(--pink));
    /* A bar with no votes at all should still be nothing, not a stub. */
    min-width: 0;
}
.survey-comments { margin-top: 1.1rem; }
.survey-comments summary { cursor: pointer; font-size: 0.9rem; color: var(--muted); }
.survey-comments ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.survey-comments li { border-left: 3px solid rgba(137, 24, 24, 0.25); padding-left: 0.9rem; }
.survey-comments li p { margin: 0; }

/* ---- Survey admin ---- */
/* row-actions was only ever used inside the admin table; surveys use it in
   headers and inline forms too. */
.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }

.survey-status {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
    background: #fff; border-radius: var(--radius);
    padding: 1rem 1.3rem; margin-bottom: 1.4rem;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.08);
}
.survey-status code { background: rgba(42, 9, 12, 0.07); padding: 0.1rem 0.4rem; border-radius: 6px; }

.admin-question {
    background: #fff; border-radius: var(--radius);
    padding: 1.2rem 1.4rem; margin-bottom: 1rem;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.08);
}
.admin-question-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.admin-question-number {
    flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(137, 24, 24, 0.1); color: var(--mfo-red);
    font-weight: 700; font-size: 0.85rem;
}
.admin-question-text, .admin-question-help {
    font: inherit; padding: 0.5rem 0.7rem;
    border: 1.5px solid rgba(42, 9, 12, 0.2); border-radius: 8px;
    background: #fffdfc; color: var(--text);
}
.admin-question-text { flex: 1 1 18rem; font-weight: 600; }
.admin-question-help { width: 100%; margin-top: 0.6rem; font-size: 0.9rem; }
.admin-question-text:focus, .admin-question-help:focus {
    outline: 2px solid var(--mfo-red); outline-offset: 1px; border-color: transparent;
}
.admin-question-flags { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.7rem; }
.admin-question-flags .field-check { font-size: 0.88rem; }

.admin-options {
    margin-top: 0.9rem; padding-top: 0.9rem;
    border-top: 1px dashed rgba(42, 9, 12, 0.15);
    display: flex; flex-direction: column; gap: 0.5rem;
}

.admin-response {
    background: #fff; border-radius: 14px;
    padding: 1rem 1.2rem; margin-bottom: 0.8rem;
    box-shadow: 0 6px 18px rgba(177, 18, 31, 0.06);
}
.admin-response-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.admin-response-head form { margin-left: auto; }
.admin-response-answers { margin: 0.7rem 0 0; display: grid; grid-template-columns: minmax(8rem, 18rem) 1fr; gap: 0.35rem 1rem; }
.admin-response-answers dt { color: var(--muted); font-size: 0.88rem; }
.admin-response-answers dd { margin: 0; font-size: 0.92rem; }

@media (max-width: 640px) {
    .admin-response-answers { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .admin-response-answers dd { margin-bottom: 0.6rem; font-weight: 600; }
}

/* ===== Admin: advent falling-snow controls ===== */
.snow-settings { display: flex; flex-direction: column; gap: 1.1rem; }
.snow-settings .field > span:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.snow-value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mfo-red); }
.snow-settings input[type="range"] { padding: 0; accent-color: var(--mfo-red); }
.snow-preview {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #16222a center / cover no-repeat;
}
.snow-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.snow-preview-full { position: absolute; right: 0.75rem; bottom: 0.75rem; }
.snow-preview:fullscreen { border-radius: 0; }
.snow-preview-controls { display: flex; align-items: flex-end; gap: 1.1rem; flex-wrap: wrap; }
.snow-preview-controls .field { flex: 1 1 16rem; }

/* ===== The members' music library ===== */
.narrow-wide { max-width: 1100px; margin: 0 auto; }

/* Pick your instrument: a row of cards, one of them lit. */
.instrument-picker {
    display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.2rem;
}
.instrument {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    min-width: 5.5rem; padding: 0.7rem 0.9rem;
    border: 1.5px solid rgba(42, 9, 12, 0.18); border-radius: 14px;
    background: #fff; color: var(--ink); text-decoration: none;
    font-size: 0.85rem; font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.instrument:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(42, 9, 12, 0.12); }
/* Chosen: the tile stays as it is and takes a green tick, so the pictures still
   read as instruments rather than as a block of colour. */
.instrument.on { border-color: #1f8a4c; box-shadow: 0 0 0 1.5px #1f8a4c inset; }
.instrument-icon { font-size: 1.6rem; line-height: 1; }
.instrument-img { width: 2.6rem; height: 2.6rem; object-fit: contain; }

.music-search { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; }
.music-search input[type="search"] {
    flex: 1 1 16rem; padding: 0.6rem 0.9rem; font: inherit;
    border: 1.5px solid rgba(42, 9, 12, 0.2); border-radius: 999px; background: #fff;
}

/* The shelf. */
.piece-grid {
    display: grid; gap: 0.7rem; margin: 1rem 0 2rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.piece-card {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.9rem 1rem; border-radius: 14px; background: #fff;
    border: 1.5px solid rgba(42, 9, 12, 0.12); text-decoration: none; color: var(--ink);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.piece-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(42, 9, 12, 0.14); }
.piece-card.piece-none { opacity: 0.55; }
.piece-name { font-weight: 600; }
.piece-meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.82rem; color: var(--muted); }
.piece-count { white-space: nowrap; }
.piece-tag { color: var(--mfo-red); }

.music-group { margin: 1.6rem 0 0.6rem; font-size: 1.05rem; }

/* A file, with its tag chips. */
.file-list { display: flex; flex-direction: column; gap: 0.5rem; }
.file-row {
    display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.9rem; background: #fff; border-radius: 12px;
    border: 1.5px solid rgba(42, 9, 12, 0.12);
}
.file-row.file-untagged { border-color: rgba(240, 165, 0, 0.7); background: #fffdf6; }
.file-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; }
.file-open { display: flex; align-items: baseline; gap: 0.5rem; text-decoration: none; color: var(--ink); font-weight: 600; }
.file-open:hover .file-name { text-decoration: underline; }
.file-size { font-size: 0.78rem; font-weight: 400; }
.file-flag { font-size: 0.78rem; color: #8a5b00; }
.file-kind { font-size: 0.95rem; }

.tag-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag-chips form { display: contents; }
.tag-chip {
    font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1;
    padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer;
    border: 1.5px solid rgba(42, 9, 12, 0.18); background: rgba(42, 9, 12, 0.05); color: var(--ink);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tag-chip:hover { border-color: var(--mfo-red); }
.tag-chip.tag-on { background: var(--mfo-red); border-color: var(--mfo-red); color: #fff; }
/* Only a guess from the file name until someone confirms it. */
.tag-chip.tag-guess { background: transparent; border-style: dashed; color: var(--muted); }
.tag-mark { opacity: 0.8; margin-left: 0.15rem; }

.music-tag-note { margin-top: 1.4rem; }
.music-footer {
    display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end;
    margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(42, 9, 12, 0.12);
}
.music-name-form { display: flex; gap: 0.6rem; align-items: flex-end; }
.music-name-form .field { min-width: 12rem; }
.piece-title { margin: 0; }

.library-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0.8rem 0; }
.library-stats div { display: flex; flex-direction: column; }
.library-stats strong { font-size: 1.4rem; }
.library-stats span { font-size: 0.8rem; color: var(--muted); }

/* "+ tag" opens the rest of the list, without needing any script. */
.tag-add { position: relative; }
.tag-add > summary { list-style: none; display: inline-flex; }
.tag-add > summary::-webkit-details-marker { display: none; }
.tag-chip.tag-more { border-style: dashed; color: var(--muted); }
.tag-menu {
    position: absolute; right: 0; z-index: 6; margin-top: 0.4rem; width: max-content; max-width: 22rem;
    display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.6rem;
    background: #fff; border: 1.5px solid rgba(42, 9, 12, 0.18); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(42, 9, 12, 0.18);
}
.tag-menu form { display: contents; }

/* Set lists — a named pick of pieces, in playing order. */
.set-list { list-style: decimal; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0 2rem; }
.set-entry { background: #fff; border: 1.5px solid rgba(42, 9, 12, 0.12); border-radius: 12px; padding: 0.7rem 0.9rem; }
.set-entry-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.set-piece { font-weight: 600; color: var(--ink); text-decoration: none; }
.set-piece:hover { text-decoration: underline; }
.set-entry-actions { display: flex; gap: 0.3rem; }
.set-files { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.set-file {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
    background: rgba(137, 24, 24, 0.08); color: var(--ink); text-decoration: none;
}
.set-file:hover { background: rgba(137, 24, 24, 0.16); }
.add-piece-list { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 2rem; }
.add-piece-list form { display: contents; }
.set-settings { margin-top: 1.5rem; }
.set-settings > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.library-links { margin: 0 0 0.8rem; }

/* The instrument tag table: tight enough that a whole row fits without wrapping. */
.tag-table td, .tag-table th { padding: 0.35rem 0.4rem; vertical-align: middle; }
.tag-table input[type="text"], .tag-table input:not([type]) { padding: 0.35rem 0.5rem; width: 100%; }
.tag-table .admin-row-actions { display: flex; gap: 0.25rem; align-items: center; flex-wrap: nowrap; }
.tag-table .admin-row-actions form { display: contents; }
.tag-table .btn-small { padding: 0.35rem 0.6rem; }

/* The picture is the control: click the thumbnail to choose a new one. */
.tag-picture { display: block; cursor: pointer; width: 2.6rem; }
.tag-picture input[type="file"] { display: none; }
.tag-thumb {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; object-fit: cover;
    border-radius: 8px; border: 1.5px solid rgba(42, 9, 12, 0.2); background: #fff;
}
.tag-picture:hover .tag-thumb { border-color: var(--mfo-red); }
.tag-thumb-empty { font-size: 1.2rem; color: var(--muted); border-style: dashed; }
.tag-remove { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 0.15rem; cursor: pointer; }
.tag-remove input { width: auto; }

/* ===== The members' landing page ===== */
.members-notice {
    background: #fff; border: 1.5px solid rgba(240, 165, 0, 0.55); border-left-width: 6px;
    border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.6rem;
}
.members-notice h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.members-notice p { margin: 0 0 0.6rem; }
.members-notice p:last-child { margin-bottom: 0; }

.members-cards { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.members-card {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1.1rem 1.2rem; border-radius: 16px; background: #fff; color: var(--ink);
    border: 1.5px solid rgba(42, 9, 12, 0.12); text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.members-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(42, 9, 12, 0.16); }
.members-card-icon { font-size: 1.8rem; line-height: 1; }
.members-card-name { font-weight: 700; font-size: 1.05rem; }
.members-card-note { font-size: 0.85rem; color: var(--muted); }
.members-footer-links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
/* .nav-linkish is drawn for the dark nav bar; on a page it needs page colours. */
.music-footer .nav-linkish,
.members-footer-links .nav-linkish {
    color: var(--muted); text-decoration: underline; background: none; border: 0; cursor: pointer; font: inherit;
}
.music-footer .nav-linkish:hover,
.members-footer-links .nav-linkish:hover { color: var(--mfo-red); }

/* Set lists as a filter on the shelf. */
.set-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.8rem; }
.set-chip {
    padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
    text-decoration: none; color: var(--ink); background: rgba(42, 9, 12, 0.06);
    border: 1.5px solid rgba(42, 9, 12, 0.15);
}
.set-chip:hover { border-color: var(--mfo-red); }
.set-chip.on { background: var(--mfo-red); border-color: var(--mfo-red); color: #fff; }
.set-chip.on .muted { color: rgba(255, 255, 255, 0.75); }
.set-notes { background: #fff; border-left: 4px solid var(--amber); padding: 0.6rem 0.9rem; border-radius: 10px; }
/* What matched inside a piece, so a search hit explains itself. */
.piece-matches { font-size: 0.78rem; color: var(--mfo-red); }

/* Building a set: the library's own shelf, with a tick on each piece. */
.pick-card { padding: 0; overflow: visible; }
.pick-button {
    display: flex; flex-direction: column; gap: 0.3rem; width: 100%;
    padding: 0.9rem 1rem 0.6rem; background: none; border: 0; cursor: pointer;
    font: inherit; text-align: left; color: var(--ink);
}
.pick-tick {
    position: absolute; top: 0.5rem; right: 0.7rem;
    font-size: 1.1rem; font-weight: 700; color: #1f8a4c;
}
.piece-card.pick-card { position: relative; }
.piece-card.picked { border-color: #1f8a4c; background: #f4fbf6; }
.piece-card.part-picked { border-color: rgba(31, 138, 76, 0.5); }
.pick-parts { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0 1rem 0.9rem; }
.pick-parts form { display: contents; }
.pick-parts .tag-chip.tag-on { background: #1f8a4c; border-color: #1f8a4c; }
.pick-parts-open, .pick-parts-close {
    display: inline-block; padding: 0 1rem 0.8rem; font-size: 0.78rem; color: var(--muted);
}
.pick-parts-close { padding-top: 0; }
.set-file-more { background: none; border: 1.5px dashed rgba(42, 9, 12, 0.25); }

/* Set lists as tiles, with the one that makes a new one. */
.new-set-card { border-style: dashed; align-items: flex-start; }
.new-set-plus { font-size: 1.6rem; line-height: 1; color: var(--mfo-red); font-weight: 700; }
.set-card { position: relative; padding: 0; }
.set-card-open { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 2.4rem 0.9rem 1rem; text-decoration: none; color: var(--ink); }
.set-delete {
    position: absolute; top: 0.45rem; right: 0.5rem; width: 1.7rem; height: 1.7rem;
    border-radius: 50%; border: 0; background: rgba(42, 9, 12, 0.07); color: var(--muted);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.set-delete:hover { background: #7a1520; color: #fff; }

/* Walking through the library's folders, without leaving the page. */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0.3rem 0 1.1rem; font-size: 1.1rem; }
.crumbs a { color: var(--mfo-red); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--muted); }
.folder-card .folder-mark, .group-card .folder-mark { font-size: 1.3rem; line-height: 1; }
.group-card { border-style: solid; border-color: rgba(137, 24, 24, 0.28); }

/* While a post is in flight. */
body.busy, body.busy * { cursor: progress !important; }
body.busy .btn, body.busy .tag-chip, body.busy .pick-button { pointer-events: none; }
.btn-busy { opacity: 0.65; }

/* A set list line: the name of what was ticked, and nothing else. */
.set-entry-tight { padding: 0.5rem 0.7rem; }
.set-kind {
    margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    background: rgba(42, 9, 12, 0.08); color: var(--muted);
}
.set-notes-form { margin-bottom: 1.4rem; }
.set-notes-form .form-actions { margin-top: 0.5rem; }
/* Green, but no tick: something inside this is in the set, the folder itself isn't. */
.piece-card.part-picked { border-color: #1f8a4c; background: #f4fbf6; }
.piece-card.part-picked .piece-matches { color: #1f8a4c; }
.picker-label { margin: 0 0 0.45rem; font-size: 0.82rem; color: var(--muted); }
.set-notes { background: #fff; border-left: 4px solid var(--amber); padding: 0.7rem 0.9rem; border-radius: 10px; margin-bottom: 0.8rem; }
.set-notes-label { margin: 0 0 0.3rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.set-notes p { margin: 0; }
.set-play-line { margin: 0 0 1.2rem; }
.crumb-set { background: rgba(137, 24, 24, 0.1); padding: 0.2rem 0.75rem; border-radius: 999px; }
.set-play-btn { margin-left: auto; }
.crumb-here { color: var(--ink); font-weight: 600; }

/* Several instruments at once: a tick on each one that's on. */
.instrument { position: relative; }
.instrument-tick {
    position: absolute; top: 0.1rem; right: 0.3rem;
    font-size: 1.5rem; font-weight: 700; line-height: 1; color: #1f8a4c;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* The best-guess switch: a slider, because it's a setting rather than a link. */
.guess-switch {
    display: inline-flex; align-items: center; gap: 0.6rem;
    margin: 0 0 0.9rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem;
    border-radius: 999px; text-decoration: none;
    font-size: 0.82rem; color: var(--muted); background: rgba(42, 9, 12, 0.05);
    border: 1.5px solid rgba(42, 9, 12, 0.12);
}
.guess-switch:hover { border-color: var(--mfo-red); }
.guess-track {
    width: 2.2rem; height: 1.2rem; border-radius: 999px; background: rgba(42, 9, 12, 0.22);
    display: inline-flex; align-items: center; padding: 0.15rem; transition: background 0.2s ease;
}
.guess-knob {
    width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #fff;
    transition: transform 0.2s ease;
}
.guess-switch.on { color: var(--ink); }
.guess-switch.on .guess-track { background: #1f8a4c; }
.guess-switch.on .guess-knob { transform: translateX(1rem); }

.guess-switch { margin-bottom: 0.7rem; }
.crumb-here { font-size: 1.1rem; }
/* The instrument row while its switch is off: there, but not in play. */
.instrument-picker.picker-off { opacity: 0.45; }
.instrument-picker.picker-off .instrument { pointer-events: none; }
.set-card-play { display: block; margin: 0 0.8rem 0.8rem; text-align: center; }

/* ===== Playing a set ===== */
.play-instruction { margin: 0.2rem 0 0.8rem; font-size: 0.95rem; }
.play-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.8rem 0; }
.play-pick {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; background: rgba(137, 24, 24, 0.08);
}
.play-pick:hover { background: rgba(137, 24, 24, 0.16); }
.play-pick input { width: 1rem; height: 1rem; accent-color: #1f8a4c; }
.play-pick:has(input:checked) { background: #e8f6ee; box-shadow: inset 0 0 0 1.5px #1f8a4c; }

/* The music stand itself: bar on top, viewer filling the rest. */
.player-body { margin: 0; height: 100vh; display: flex; flex-direction: column; background: #2a090c; }
.player-bar {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem;
    background: rgba(42, 9, 12, 0.96); color: #fff; flex-wrap: nowrap;
}
.player-title { font-weight: 700; margin: 0 0.6rem; white-space: nowrap; }
/* The tabs take what's left and scroll; the buttons beside them never shrink away. */
.player-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.15rem; flex: 1 1 auto; min-width: 0; }
.player-bar > .btn, .player-title { flex: 0 0 auto; }
.player-tab {
    font: inherit; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    padding: 0.4rem 0.8rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: transparent; color: #fff;
}
.player-tab:hover { border-color: #fff; }
.player-tab.on { background: #fff; color: var(--ink); border-color: #fff; }
.player-bar .btn-small { white-space: nowrap; }
.player-bar .btn:disabled { opacity: 0.4; }
.player-stage { flex: 1; min-height: 0; }
.player-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
/* The bar is dark, so its buttons can't use the page's dark-on-light secondary. */
.player-bar .btn {
    background: rgba(255, 255, 255, 0.14); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.player-bar .btn:hover { background: rgba(255, 255, 255, 0.26); }
.player-bar .btn:disabled { opacity: 0.35; }
.player-close { flex: 0 0 auto; margin-left: 0.4rem; }

/* The set list short cuts, boxed so they read as one thing rather than loose chips. */
.set-box {
    border: 1.5px solid rgba(42, 9, 12, 0.18); border-radius: 14px;
    padding: 0.6rem 0.8rem 0.7rem; margin-bottom: 1rem; background: rgba(255, 255, 255, 0.55);
}
.set-box-label {
    margin: 0 0 0.45rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted);
}
.set-box .set-chips { margin-bottom: 0; }

/* Advent doors: the video column, and the little player it opens. */
.advent-table td { vertical-align: top; }
/* One line: pick a file, upload, play, when it came, remove. */
.advent-video { white-space: nowrap; }
.advent-video input[type="file"] { max-width: 7.5rem; font-size: 0.72rem; vertical-align: middle; }
.advent-table td input { width: 100%; }
.advent-table .btn-small { padding: 0.3rem 0.55rem; font-size: 0.78rem; }
.advent-video .btn { vertical-align: middle; margin-left: 0.2rem; }
.advent-video-when { margin-left: 0.3rem; }
.advent-move { white-space: nowrap; padding-left: 0.8rem !important; }
.advent-move .btn { padding: 0.3rem 0.5rem; }
/* The remove button needs air before the move arrows, or they read as one group. */
.advent-video .btn-danger { margin-left: 0.45rem; margin-right: 0.35rem; }

/* "saving… / ✓ saved" beside the day number. */
.row-state { display: block; font-size: 0.7rem; color: #1f8a4c; min-height: 0.9rem; }
.row-state-bad { color: var(--mfo-red); font-weight: 600; }
.hidden-form { display: none; }
#videoPreview .modal-body { background: #fff; }
#videoPreviewPlayer { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; }
/* The uploaded file's own name, kept short enough to sit on the row. */
.advent-video-name {
    display: inline-block; max-width: 8rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; vertical-align: middle; font-size: 0.75rem; color: var(--ink);
    margin-left: 0.35rem;
}
.doors-actions { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
#doorsDirty { color: var(--mfo-red); font-weight: 600; }
/* A door that has just been moved, so the eye can follow it. */
.row-moved { background: #f4fbf6; transition: background 0.6s ease; }
/* The edit switch rides in a row of buttons, so it sits tighter than the filter one. */
.edit-switch { margin: 0; padding: 0.3rem 0.7rem 0.3rem 0.35rem; font-size: 0.8rem; }
.edit-switch .guess-track { width: 1.9rem; height: 1.05rem; }
.edit-switch .guess-knob { width: 0.75rem; height: 0.75rem; }
.edit-switch.on .guess-knob { transform: translateX(0.85rem); }

/* An "i" in the corner of a tile: what is this piece? — straight to Wikipedia. */
.piece-card { position: relative; }
.tile-main { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem; text-decoration: none; color: var(--ink); }
.tile-info {
    position: absolute; right: 0.5rem; bottom: 0.5rem;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; font-style: italic;
    text-decoration: none; color: var(--muted);
    background: rgba(42, 9, 12, 0.07); border: 1px solid rgba(42, 9, 12, 0.15);
}
.tile-info:hover { background: var(--mfo-red); border-color: var(--mfo-red); color: #fff; }
.piece-card .tile-main + .tile-info { z-index: 2; }

/* ==========================================================================
   Ticket bar
   A gold strip pinned above the nav on every public page: the concerts still
   to come ticking past, and a Book tickets button that never moves. Gold is the
   one colour nothing else on the site uses at this size, so it reads as "this
   is the thing to do" without shouting over the photos.
   ========================================================================== */
:root { --ticket-bar-h: 44px; }
.has-ticket-bar { --nav-offset: var(--ticket-bar-h); }
html:has(.has-ticket-bar) { scroll-padding-top: calc(80px + var(--ticket-bar-h)); }
.has-ticket-bar .nav { top: var(--ticket-bar-h); }
.has-ticket-bar .page-shell { padding-top: calc(76px + var(--ticket-bar-h)); }
.has-ticket-bar .hero { padding-top: calc(7rem + var(--ticket-bar-h)); }

.ticket-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 110;
    height: var(--ticket-bar-h);
    display: flex;
    align-items: stretch;
    background: linear-gradient(90deg, #f7b500, #ffcf3f 45%, #f0a500);
    color: var(--ink);
    box-shadow: 0 2px 12px rgba(42, 9, 12, 0.25);
    font-size: 0.92rem;
    overflow: hidden;
}
/* A slow sheen across the gold, every few seconds, to catch the eye. */
.ticket-bar::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: ticket-sheen 6s ease-in-out 1.5s infinite;
    pointer-events: none;
}
@keyframes ticket-sheen {
    0%, 70% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.ticket-bar-label {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0 1rem 0 1.1rem;
    background: var(--ink);
    color: #ffcf3f;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-size: 0.8rem;
    /* An arrow-shaped end, pointing into the ticker. */
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    padding-right: 1.6rem;
    position: relative; z-index: 2;
}
.ticket-bar-icon { font-size: 1.15rem; animation: ticket-wiggle 4s ease-in-out infinite; display: inline-block; }
@keyframes ticket-wiggle {
    0%, 86%, 100% { transform: rotate(0); }
    89% { transform: rotate(-14deg); }
    93% { transform: rotate(12deg); }
    96% { transform: rotate(-6deg); }
}
.ticket-bar-window {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden;
    display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ticket-bar-track {
    display: flex; align-items: center; gap: 1.4rem;
    width: max-content;
    padding-left: 1.4rem;
    animation: scroll-x var(--ticket-seconds, 36s) linear infinite;
}
/* Hold still while someone's reaching for a link. */
.ticket-bar-window:hover .ticket-bar-track,
.ticket-bar-window:focus-within .ticket-bar-track { animation-play-state: paused; }
.ticket-bar-item {
    display: inline-flex; align-items: baseline; gap: 0.55rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink);
}
.ticket-bar-item strong { font-family: "Space Grotesk", sans-serif; font-size: 1rem; }
.ticket-bar-item em {
    font-style: normal; font-weight: 700;
    color: var(--mfo-red);
    text-decoration: underline; text-underline-offset: 3px;
}
.ticket-bar-item:hover strong, .ticket-bar-item:focus-visible strong { text-decoration: underline; }
.ticket-bar-venue { color: #5a2a14; }
.ticket-bar-venue::before { content: "· "; }
.ticket-bar-sep { color: var(--mfo-red); opacity: 0.6; }
.ticket-bar-cta {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 0.6rem 0 0.4rem;
    padding: 0.4rem 1.05rem;
    border-radius: 999px;
    background: var(--mfo-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0 0 0 rgba(137, 24, 24, 0.55);
    animation: ticket-pulse 2.4s ease-out infinite;
    position: relative; z-index: 2;
}
.ticket-bar-cta:hover { background: var(--mfo-red-lift); }
@keyframes ticket-pulse {
    0% { box-shadow: 0 0 0 0 rgba(137, 24, 24, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(137, 24, 24, 0); }
    100% { box-shadow: 0 0 0 0 rgba(137, 24, 24, 0); }
}
@media (max-width: 700px) {
    :root { --ticket-bar-h: 40px; }
    .ticket-bar { font-size: 0.85rem; }
    .ticket-bar-label { padding-left: 0.8rem; padding-right: 1.2rem; }
    .ticket-bar-label-text { display: none; }
    .ticket-bar-venue { display: none; }
    .ticket-bar-cta { padding: 0.35rem 0.8rem; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
    /* Still: the first concert sits in place, and the button does the pointing. */
    .ticket-bar::after, .ticket-bar-icon, .ticket-bar-cta, .ticket-bar-track { animation: none; }
}

/* ---- Next-concert card in the hero ---- */
.hero-ticket {
    display: flex; align-items: center; gap: 1.1rem;
    max-width: 560px;
    margin: 0 auto 1.8rem;
    padding: 0.9rem 0.9rem 0.9rem 0.9rem;
    background: rgba(255, 255, 255, 0.82);
    border: 2px solid #f0a500;
    border-radius: var(--radius);
    box-shadow: 0 16px 36px rgba(137, 24, 24, 0.22);
    backdrop-filter: blur(8px);
    text-align: left;
}
.hero-ticket-date {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 68px; height: 68px;
    border-radius: 14px;
    background: var(--mfo-red); color: #fff;
    line-height: 1;
}
.hero-ticket-date .d { font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; font-weight: 700; }
.hero-ticket-date .m { font-size: 0.72rem; letter-spacing: 1px; margin-top: 0.2rem; }
.hero-ticket-body { flex: 1; min-width: 0; }
.hero-ticket-kicker {
    display: block;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #8a5a00;
}
.hero-ticket-body strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; line-height: 1.25; }
.hero-ticket-body span.where { display: block; font-size: 0.85rem; color: var(--muted); }
.hero-ticket .btn { flex: 0 0 auto; padding: 0.75rem 1.2rem; }
@media (max-width: 560px) {
    .hero-ticket { flex-wrap: wrap; }
    .hero-ticket .btn { width: 100%; text-align: center; }
}

/* ---- The concert being sold, picked out in the list ---- */
.gig.gig-featured { border: 2px solid #f0a500; box-shadow: 0 16px 34px rgba(240, 165, 0, 0.28); }
.gig-featured .gig-cta { animation: ticket-pulse 2.4s ease-out infinite; }
.gig-flag {
    display: inline-block;
    margin-bottom: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: #ffcf3f; color: var(--ink);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .gig-featured .gig-cta { animation: none; } }

/* ==========================================================================
   Testimonials — members in their own words, in "Join us"
   ========================================================================== */
.testimonials { margin-bottom: 3rem; }
.testimonials-kicker {
    text-align: center;
    margin: -1rem 0 1.6rem;
    color: var(--muted);
    font-size: 1.05rem;
    font-style: italic;
}
.testimonial-carousel {
    position: relative;
    display: flex; align-items: center; gap: 0.8rem;
}
/* One row, sliding sideways. Three cards across on a wide screen, two on a
   tablet, one (with the next peeking in) on a phone. */
.testimonial-cards {
    --per-view: 3;
    --gap: 1.3rem;
    flex: 1; min-width: 0;
    display: flex; gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Room for the cards' shadow and hover lift, which overflow would clip. */
    padding: 0.8rem 0.3rem 1.6rem;
    outline: none;
}
.testimonial-cards::-webkit-scrollbar { display: none; }
.testimonial-cards .testimonial {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    scroll-snap-align: start;
}
.carousel-arrow {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--mfo-red); color: #fff;
    font-size: 1.9rem; line-height: 1;
    display: grid; place-items: center;
    padding: 0 0 4px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(137, 24, 24, 0.3);
    transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease;
}
.carousel-arrow:hover { background: var(--mfo-red-lift); transform: scale(1.08); }
.carousel-arrow:focus-visible { outline: 3px solid #f0a500; outline-offset: 2px; }
/* Nothing to scroll (everything fits): no arrows. */
.testimonial-carousel.is-static .carousel-arrow { visibility: hidden; }
@media (max-width: 1000px) { .testimonial-cards { --per-view: 2; } }
.testimonial {
    position: relative;
    margin: 0;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    padding: 2.2rem 1.6rem 1.4rem;
    box-shadow: 0 10px 26px rgba(177, 18, 31, 0.1);
    border-top: 4px solid var(--mfo-red);
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.testimonial:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(177, 18, 31, 0.16); }
.testimonial-mark {
    position: absolute; top: 0.2rem; left: 1.1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.2rem; line-height: 1;
    color: #f0a500;
}
.testimonial blockquote { margin: 0 0 1.3rem; flex: 1; }
.testimonial blockquote p { margin: 0 0 0.7rem; font-size: 1rem; line-height: 1.65; }
.testimonial blockquote p:last-child { margin-bottom: 0; }
.testimonial figcaption {
    display: flex; align-items: center; gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(42, 9, 12, 0.08);
    font-size: 0.9rem;
}
.testimonial figcaption img,
.testimonial-initial {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(240, 165, 0, 0.7);
}
.testimonial-initial {
    display: grid; place-items: center;
    background: var(--mfo-red); color: #fff;
    font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.4rem;
}
.testimonial figcaption strong { display: block; font-size: 1rem; }
.testimonial figcaption .muted { display: block; font-size: 0.85rem; }
@media (max-width: 700px) {
    /* A phone: one card and the edge of the next, arrows tucked over the ends. */
    .testimonial-carousel { gap: 0; margin: 0 -1.5rem; }
    .testimonial-cards { --gap: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; scroll-padding: 0 1.5rem; }
    .testimonial-cards .testimonial { flex-basis: 84%; }
    .carousel-arrow {
        position: absolute; top: 50%; z-index: 2;
        width: 38px; height: 38px; font-size: 1.6rem;
        transform: translateY(-50%);
    }
    .carousel-arrow:hover { transform: translateY(-50%); }
    .carousel-prev { left: 0.3rem; }
    .carousel-next { right: 0.3rem; }
}

/* Admin: the testimonial list's small portrait. */
.admin-table .portrait { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }

/* ---- Admins page ---- */
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1rem; }
.admin-two-col h2 { margin-top: 2rem; }
@media (max-width: 860px) { .admin-two-col { grid-template-columns: 1fr; } }
.admin-row-actions { flex-wrap: wrap; align-items: flex-start; }
.admin-table .admin-row-actions { white-space: normal; }
.inline-form summary { list-style: none; }
.inline-form summary::-webkit-details-marker { display: none; }
.inline-form[open] summary { background: rgba(42, 9, 12, 0.16); }
.inline-form form { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.inline-form input {
    padding: 0.4rem 0.6rem; border-radius: 8px;
    border: 1.5px solid rgba(42, 9, 12, 0.2); font: inherit; font-size: 0.85rem; min-width: 12rem;
}
.link-card { border: 2px solid #f0a500; margin-bottom: 1.6rem; gap: 0.6rem; }
.link-copy { display: flex; gap: 0.5rem; }
.link-copy input {
    flex: 1; min-width: 0;
    padding: 0.55rem 0.7rem; border-radius: 10px;
    border: 1.5px solid rgba(42, 9, 12, 0.2);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem;
}
.flash-note { background: rgba(240, 165, 0, 0.14); border-left-color: #f0a500; color: #6b4600; }

/* Members page: the admin's way through to the settings. */
.members-admin-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem;
    padding: 0.8rem 1rem; margin-bottom: 1.4rem;
    border-radius: 12px;
    background: rgba(240, 165, 0, 0.14); border-left: 4px solid #f0a500;
    font-size: 0.9rem; color: #6b4600;
}
.members-admin-bar span { margin-right: auto; }