/* Swing 42: the fernery. Cream pages under a glasshouse roof: slatted light
   and fern shadows drift behind the page (light.js), fern-green bands, brass
   and Art Deco type for the band's name. Plain CSS, kept out of Astro's
   minifier (it lives in public/assets): see README, "Gotchas".

   Motion is transform and opacity only, and stops for reduced motion. */

:root {
  --cream: #f3ecd9;
  --paper: #faf6ea;
  --ink: #1e241d;
  --ink-soft: #4b5546;
  --fern: #2c4a33;
  --fern-deep: #14241a;
  --moss: #5b7a4a;
  --timber: #8a5a34;
  --brass: #b8913f;
  --brass-light: #d9b765;
  --brass-deep: #7d5f22;
  --display: 'Limelight', 'Poiret One', Georgia, serif;
  --caps: 'Josefin Sans', 'Futura', system-ui, sans-serif;
  --body: 'Newsreader', Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  --radius: 10px;
  /* The music player (site-player) in the band's colours. */
  --sp-bg: #14241a;
  --sp-fg: #f3ecd9;
  --sp-accent: #b8913f;
  --sp-accent-deep: #7d5f22;
  --sp-accent-light: #d9b765;
  --sp-on-accent: #14241a;
  --sp-display: 'Newsreader', Georgia, serif;
  --accent: #7d5f22;

  /* ── Theme tokens ──────────────────────────────────────────────────────
     Everything below that changes between day and night reads these. The
     night values are in the block after this one (see README, "Day and
     night"). The palette above stays fixed: brass and fern are the band's. */
  --bg: var(--cream);                         /* the page, behind the light */
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --heading: var(--fern);                     /* h2, green labels */
  --strong: var(--fern-deep);                 /* the lede, press quotes */
  --link: var(--brass-deep);
  --link-hover: var(--fern);
  --label: var(--brass-deep);                 /* small brass caps: dates, years */
  --tour: var(--moss);
  --card: rgba(250, 246, 234, 0.82);          /* gig cards, the 1986 card, pills */
  --card-solid: rgba(250, 246, 234, 0.9);     /* the booking form */
  --card-line: rgba(184, 145, 63, 0.35);
  --card-shadow: 0 1px 0 rgba(44, 74, 51, 0.12), 0 12px 30px -24px rgba(20, 36, 26, 0.5);
  --rule: rgba(44, 74, 51, 0.13);
  --pill-line: rgba(44, 74, 51, 0.18);
  --form-line: transparent;
  --field-bg: #fffdf7;
  --field-line: rgba(44, 74, 51, 0.3);
  --err: #8e2b1b;
  --ghost-line: var(--fern);
  --ghost-text: var(--fern);
  --ghost-bg: rgba(250, 246, 234, 0.6);
  --ghost-hover-bg: var(--fern);
  --ghost-hover-text: var(--cream);
  --band-deep: var(--fern-deep);              /* Listen, history, footer, covers */
  --band-fern: var(--fern);                   /* the booking band */
  --head-glow: #2a4631;                       /* the plain page heads' light */
  --glass: rgba(20, 36, 26, 0.84);            /* the header once you scroll */
  --menu-bg: rgba(20, 36, 26, 0.96);
  /* The glasshouse by day: shadow slats, a warm sun, fern shadows. */
  --slat: rgba(26, 44, 30, 0.07);
  --slat-core: rgba(26, 44, 30, 0.085);
  --sun-a: rgba(255, 244, 214, 0.75);
  --sun-b: rgba(255, 236, 196, 0.45);
  --fern-fill: rgb(22, 38, 26);
  --fern-k: 1;                                /* scales every frond's opacity */
  --fern-blur-k: 1;

  color-scheme: light;
  background: var(--band-deep); /* what rubber-band scrolling shows above and below */
}

/* ── Night: the same glasshouse after dark ────────────────────────────────
   Deep fern-black, cream type, brass lamps. The roof's slats let faint
   moonlight through instead of casting shadow, a brass lamp glows low on the
   right, and the ferns are pale fronds catching the light. Set by the inline
   script in <head> (data-theme on <html>, before first paint) from the
   visitor's choice or the system's; the @media copy covers pages without JS.
   ⚠ Keep the two blocks the same. */
:root[data-theme="dark"] {
  --bg: #0e1712;
  --text: #ece4cf;
  --text-soft: #b4ae99;
  --heading: #d9b765;
  --strong: #f3ecd9;
  --link: #dcbc6c;
  --link-hover: #f3ecd9;
  --label: #d3b062;
  --tour: #a3bf8c;
  --card: rgba(27, 43, 32, 0.8);
  --card-solid: rgba(22, 36, 27, 0.92);
  --card-line: rgba(217, 183, 101, 0.3);
  --card-shadow: 0 1px 0 rgba(217, 183, 101, 0.08), 0 14px 34px -22px rgba(0, 0, 0, 0.8);
  --rule: rgba(243, 236, 217, 0.11);
  --pill-line: rgba(217, 183, 101, 0.24);
  --form-line: rgba(217, 183, 101, 0.2);
  --field-bg: #0a120d;
  --field-line: rgba(217, 183, 101, 0.32);
  --err: #ffa48f;
  --ghost-line: rgba(217, 183, 101, 0.7);
  --ghost-text: #ece4cf;
  --ghost-bg: rgba(14, 23, 18, 0.55);
  --ghost-hover-bg: #d9b765;
  --ghost-hover-text: #14241a;
  --band-deep: #08100b;
  --band-fern: #18291e;
  --head-glow: #1d3324;
  --glass: rgba(9, 16, 12, 0.86);
  --menu-bg: rgba(9, 16, 12, 0.97);
  --slat: rgba(214, 226, 204, 0.03);
  --slat-core: rgba(214, 226, 204, 0.045);
  --sun-a: rgba(196, 212, 222, 0.16);
  --sun-b: rgba(217, 183, 101, 0.11);
  --fern-fill: rgb(176, 204, 150);
  --fern-k: 0.9;
  --fern-blur-k: 0.95;
  --sp-bg: #182a1f;
  --accent: #dcbc6c;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0e1712;
    --text: #ece4cf;
    --text-soft: #b4ae99;
    --heading: #d9b765;
    --strong: #f3ecd9;
    --link: #dcbc6c;
    --link-hover: #f3ecd9;
    --label: #d3b062;
    --tour: #a3bf8c;
    --card: rgba(27, 43, 32, 0.8);
    --card-solid: rgba(22, 36, 27, 0.92);
    --card-line: rgba(217, 183, 101, 0.3);
    --card-shadow: 0 1px 0 rgba(217, 183, 101, 0.08), 0 14px 34px -22px rgba(0, 0, 0, 0.8);
    --rule: rgba(243, 236, 217, 0.11);
    --pill-line: rgba(217, 183, 101, 0.24);
    --form-line: rgba(217, 183, 101, 0.2);
    --field-bg: #0a120d;
    --field-line: rgba(217, 183, 101, 0.32);
    --err: #ffa48f;
    --ghost-line: rgba(217, 183, 101, 0.7);
    --ghost-text: #ece4cf;
    --ghost-bg: rgba(14, 23, 18, 0.55);
    --ghost-hover-bg: #d9b765;
    --ghost-hover-text: #14241a;
    --band-deep: #08100b;
    --band-fern: #18291e;
    --head-glow: #1d3324;
    --glass: rgba(9, 16, 12, 0.86);
    --menu-bg: rgba(9, 16, 12, 0.97);
    --slat: rgba(214, 226, 204, 0.03);
    --slat-core: rgba(214, 226, 204, 0.045);
    --sun-a: rgba(196, 212, 222, 0.16);
    --sun-b: rgba(217, 183, 101, 0.11);
    --fern-fill: rgb(176, 204, 150);
    --fern-k: 0.9;
    --fern-blur-k: 0.95;
    --sp-bg: #182a1f;
    --accent: #dcbc6c;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.125rem/1.6 var(--body); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; }
h2 { font: 400 clamp(1.8rem, 3.6vw, 2.5rem)/1.1 var(--display); color: var(--heading); letter-spacing: 0.01em; }
h3 { font: 600 0.85rem/1.3 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }
.narrow > * { max-width: 760px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bg); padding: 0.5rem 1rem; }
.skip:focus { left: 8px; }
.note { font-size: 0.95rem; color: var(--text-soft); }

/* ── The glasshouse light ──────────────────────────────────────────────
   Fixed behind the page (light.js moves it). Everything in front is
   positioned (main, the covers, the footer), so it paints above this layer;
   cream sections are transparent, so the light falls across them. */
.glasshouse { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gh-slats {
  position: absolute; left: -40%; top: -40%; width: 180%; height: 180%;
  /* The roof's slats: soft shadow bands, each with a blurred edge. */
  background: repeating-linear-gradient(104deg,
    transparent 0, transparent 46px,
    var(--slat) 64px, var(--slat-core) 74px,
    transparent 94px, transparent 132px);
  will-change: transform;
}
.gh-sun {
  position: absolute; inset: -10%;
  background: radial-gradient(55% 45% at 28% 18%, var(--sun-a), transparent 70%),
              radial-gradient(40% 40% at 80% 70%, var(--sun-b), transparent 70%);
  opacity: 0.7; will-change: opacity;
}
.gh-fern {
  position: absolute;
  left: calc(var(--x) * 100vw); top: calc(var(--y) * 100vh);
  width: calc(var(--size) * max(100vw, 100vh)); aspect-ratio: 1;
  translate: -50% -100%; rotate: var(--rot); transform-origin: 50% 100%;
  will-change: transform;
}
.gh-fern svg { width: 100%; height: 100%; overflow: visible; filter: blur(calc(var(--blur) * var(--fern-blur-k))); }
.gh-fern path { fill: var(--fern-fill); }
.gh-fern path { fill-opacity: calc(0.11 * var(--fern-k)); }
.gh-fern[data-depth="0.9"] path { fill-opacity: calc(0.17 * var(--fern-k)); }
.gh-fern[data-depth="0.8"] path { fill-opacity: calc(0.15 * var(--fern-k)); }
/* The leaflets: light.js swaps each frond's SVG for a canvas where every
   pinna rocks about its stem (sprites pre-blurred and coloured --fern-fill),
   crossfading over. The canvas carries the frond's opacity. */
.gh-fern { --fern-o: 0.11; }
.gh-fern[data-depth="0.9"] { --fern-o: 0.17; }
.gh-fern[data-depth="0.8"] { --fern-o: 0.15; }
.gh-leaves { position: absolute; opacity: 0; transition: opacity 1.4s ease; }
.ferns-live .gh-leaves { opacity: calc(var(--fern-o) * var(--fern-k)); }
.gh-fern svg { transition: opacity 1.4s ease; }
.ferns-live .gh-fern svg { opacity: 0; }
.ferns-done .gh-fern svg { display: none; }
main, .site-footer, .cover, .page-head { position: relative; }

/* ── Header: clear over the top of the page, fern glass once you scroll ─
   The glass is the ::before's opacity, played against the scroll (on the
   home page it fills in as the name docks: --td-d, set by title-dock.js).
   Without scroll timelines, site.js sets .scrolled instead. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  color: var(--cream);
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(217, 183, 101, 0.25);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.scrolled .site-header::before, .player-expanded .site-header::before { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .site-header::before {
    transition: none;
    animation: glass-in var(--glass-ease, linear) both;
    animation-timeline: scroll(root);
    animation-range: 0px 140px;
  }
  .is-home .site-header::before { animation-range: 60vh calc(100svh - 40px); }
  .td-on .site-header::before { animation-range: calc(var(--td-d) * 0.55) calc(var(--td-d) + 20px); }
}
@keyframes glass-in { from { opacity: 0; } to { opacity: 1; } }
/* While the player is open the header sits on its glass. */
.player-expanded .site-header::before { animation: none; opacity: 1; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); }
.brand {
  font: 400 1.55rem/1 var(--display); color: var(--cream); text-decoration: none;
  white-space: nowrap; letter-spacing: 0.01em;
}
.brand:hover { color: var(--brass-light); }
.header-right { display: flex; align-items: center; gap: 0.5rem; }
.nav-desktop { display: flex; gap: 1.6rem; }
.nav-desktop a, .nav-mobile nav a {
  color: var(--cream); text-decoration: none;
  font: 600 0.78rem/1 var(--caps); letter-spacing: 0.16em; text-transform: uppercase;
}
.nav-desktop a { padding: 0.5rem 0; border-bottom: 1px solid transparent; }
.nav-desktop a:hover, .nav-desktop a[aria-current] { color: var(--brass-light); border-bottom-color: var(--brass-light); }
.nav-mobile { display: none; position: relative; }
.nav-mobile summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary span { display: block; width: 22px; height: 2px; background: var(--cream); border-radius: 1px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-mobile[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile[open] summary span:nth-child(2) { opacity: 0; }
.nav-mobile[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile nav {
  position: fixed; left: 0; right: 0; top: calc(var(--header-h) + env(safe-area-inset-top));
  display: grid; padding: 0.5rem var(--gutter) 1.5rem;
  background: var(--menu-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
.nav-mobile nav a { padding: 1rem 0; border-bottom: 1px solid rgba(243, 236, 217, 0.12); font-size: 0.85rem; }
@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
}
/* Day and night: a small sun/moon in the header at every width (Joseph:
   no second toggle in the phone menu). A button with aria-pressed (pressed =
   dark); site.js does the rest. Without JS there's nothing to press, and the
   system's choice stands. */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: 0.7rem;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cream); cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.theme-toggle:hover { color: var(--brass-light); background: rgba(243, 236, 217, 0.08); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-sun, [data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
.theme-toggle:focus-visible, .nav-mobile summary:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 2px; }
html:not(.js) .theme-toggle { display: none; }
@media (max-width: 860px) { .theme-toggle { margin-left: 0; } }

/* ── Covers ───────────────────────────────────────────────────────────── */
/* Photo heads grow with the width (to a point), so a wide screen doesn't
   crop a 3:2 band photo to a letterbox and lose the players' heads; each
   page sets its photo's focal point (--pos, and --pos-phone for tall
   screens) so faces stay in. */
.cover { min-height: max(62svh, min(44vw, 82svh)); display: flex; align-items: flex-end; color: var(--cream); background: var(--band-deep); }
.cover-home { min-height: max(100svh, 560px); }
.cover-bg { position: absolute; inset: 0; overflow: hidden; }
.cover-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); }
@media (max-aspect-ratio: 4 / 5) { .cover-bg img { object-position: var(--pos-phone, var(--pos)); } }
.cover-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 22, 15, 0.55), rgba(12, 22, 15, 0) 22%),
    linear-gradient(to top, rgba(12, 22, 15, 0.86), rgba(12, 22, 15, 0.42) 38%, rgba(12, 22, 15, 0) 68%);
}
.cover-text { position: relative; padding: calc(var(--header-h) + 3rem) 0 clamp(2.5rem, 7vh, 5rem); }
.cover-home .cover-text { padding-bottom: clamp(3rem, 10vh, 7rem); }
.cover-credit {
  position: absolute; right: var(--gutter); bottom: 0.6rem; margin: 0;
  font: 400 0.72rem/1 var(--caps); letter-spacing: 0.08em; color: rgba(243, 236, 217, 0.6);
}
.hero-name { font: 400 clamp(4.2rem, 14vw, 12rem)/0.95 var(--display); letter-spacing: 0.005em; color: var(--cream); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.hero-name > span { display: block; white-space: nowrap; }
.hero-kicker { margin: 1rem 0 1.8rem; font: 600 clamp(0.8rem, 1.6vw, 1rem)/1.4 var(--caps); letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass-light); }
/* Phones: a 4:3 photo cropped to a tall screen loses two of the four, so
   the whole photo sits at the top and the name stands below it. */
@media (max-aspect-ratio: 4 / 5) {
  .cover-home { display: block; min-height: 0; }
  .cover-home .cover-bg { position: relative; aspect-ratio: 4 / 3; }
  .cover-home .cover-bg::after { background: linear-gradient(to bottom, rgba(12, 22, 15, 0.55), rgba(12, 22, 15, 0) 28%, rgba(12, 22, 15, 0) 70%, var(--band-deep)); }
  .cover-home .cover-text { padding: 0.6rem 0 2.6rem; margin-top: -2.2rem; }
  .cover-home .cover-credit { top: calc(100vw * 0.75 - 1.4rem); bottom: auto; }
}
/* Page covers (Gigs, The band) are the photo's own shape (--ar, from
   Base.astro), so every player shows whole, heads and instruments, capped at
   82svh on wide screens (where only the dark audience at the bottom goes).
   The page below moves up with it. On tall screens the photo would be too
   short to carry the title over it without covering the band, so, as on the
   home page, the whole photo sits on top and the title stands below it. */
/* ⚠ width: 100%, or aspect-ratio turns the max-height into a max-width and
   the cover stops short of the right edge. */
.cover-photo { width: 100%; min-height: 0; aspect-ratio: var(--ar); max-height: max(82svh, 420px); }
.cover-photo .cover-bg img { object-position: 50% 0%; }
@media (max-aspect-ratio: 4 / 5) {
  /* The photo starts below the (clear) header, so no head sits under it. */
  .cover-photo { display: block; aspect-ratio: auto; max-height: none; padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }
  .cover-photo .cover-bg { position: relative; aspect-ratio: var(--ar); }
  .cover-photo .cover-bg::after { background: linear-gradient(to bottom, rgba(12, 22, 15, 0.25), rgba(12, 22, 15, 0) 20%, rgba(12, 22, 15, 0) 66%, var(--band-deep)); }
  .cover-photo .cover-text { padding: 0.2rem 0 2.4rem; margin-top: -0.4rem; }
  .cover-photo .cover-credit { top: calc(var(--header-h) + env(safe-area-inset-top) + 100vw / var(--arn) - 1.5rem); bottom: auto; }
}
/* The dock: the name rises out of the cover, above the header. */
.td-on .cover-home .cover-text > :not(.td-name) { position: relative; z-index: 1; }
.page-title { font: 400 clamp(2.8rem, 8vw, 5.6rem)/1 var(--display); color: var(--cream); }
.page-line { margin: 0.9rem 0 0; font: italic 400 clamp(1.1rem, 2vw, 1.35rem)/1.4 var(--body); color: rgba(243, 236, 217, 0.88); max-width: 40ch; }
.page-line a { color: var(--brass-light); }
/* Pages without a photo: a fern-green band, the slats faintly in it. */
.page-head {
  color: var(--cream); padding: calc(var(--header-h) + env(safe-area-inset-top) + clamp(3rem, 9vh, 6rem)) 0 clamp(2.5rem, 6vh, 4rem);
  background:
    repeating-linear-gradient(104deg, rgba(255, 240, 200, 0) 0 46px, rgba(255, 240, 200, 0.045) 64px 74px, rgba(255, 240, 200, 0) 94px 132px),
    radial-gradient(70% 120% at 20% 0%, var(--head-glow), var(--band-deep));
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9em 1.5em; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  font: 600 0.8rem/1 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.3s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.btn-brass { background: var(--brass); color: var(--fern-deep); }
.btn-brass:hover { background: var(--brass-light); color: var(--fern-deep); }
.btn-ghost { border-color: var(--ghost-line); color: var(--ghost-text); background: var(--ghost-bg); }
.btn-ghost:hover { background: var(--ghost-hover-bg); color: var(--ghost-hover-text); }
.btn-ghost-light { border-color: rgba(243, 236, 217, 0.7); color: var(--cream); }
.btn-ghost-light:hover { background: var(--cream); color: var(--fern-deep); }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding: clamp(3rem, 8vh, 5.5rem) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.more { font: 600 0.78rem/1 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.band-lede { padding: clamp(3.5rem, 10vh, 6.5rem) 0 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: end; }
@media (max-width: 760px) { .band-lede { grid-template-columns: 1fr; } }
.since {
  display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.1rem; align-items: start;
  padding: 1.3rem 1.4rem; border-radius: var(--radius); text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--card-line);
  transition: border-color 0.2s, transform 0.3s var(--ease);
}
.since:hover { color: var(--text); border-color: var(--brass); transform: translateY(-2px); }
.since-year { grid-row: span 2; font: 400 2.6rem/1 var(--display); color: var(--label); }
.since-text { font-size: 1rem; line-height: 1.5; }
.since-more { font: 600 0.72rem/1.3 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--heading); }
.since-more::after { content: ' →'; }
.lede { font: 400 clamp(1.35rem, 2.6vw, 1.9rem)/1.45 var(--body); max-width: 34ch; margin: 0; color: var(--strong); }
.lede-small { font-size: 1.25rem; line-height: 1.55; }

/* Gigs */
.gigs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.gig {
  display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 1.2rem; align-items: center;
  padding: 1.1rem 1.3rem; border-radius: var(--radius);
  background: var(--card); box-shadow: var(--card-shadow);
}
.gig[hidden] { display: none; }
.gig-date { margin: 0; text-align: center; color: var(--heading); }
.gd { display: block; font: 400 2.4rem/1 var(--display); }
.gm { display: block; margin-top: 0.25rem; font: 600 0.72rem/1 var(--caps); letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); }
.gig-tour { margin: 0 0 0.2rem; font: 600 0.7rem/1.3 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tour); }
.gig-title { font: 500 1.25rem/1.25 var(--body); letter-spacing: 0; text-transform: none; }
.gig-where { margin: 0.2rem 0 0; }
.gig-when { margin: 0.1rem 0 0; color: var(--text-soft); font-size: 1rem; }
.gigs-empty { font-style: italic; color: var(--text-soft); }
@media (max-width: 560px) {
  .gig { grid-template-columns: 3.6rem 1fr; gap: 0.9rem; }
  .gig-btn { grid-column: 2; justify-self: start; }
  .gd { font-size: 2rem; }
}
.past h2 { margin-bottom: 1.5rem; }
.past-year { margin: 0 0 1.6rem; }
.past-year h3 { color: var(--heading); margin: 0 0 0.6rem; }
.past-old summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem; }
.past-old summary::-webkit-details-marker { display: none; }
.past-old summary::after { content: '+'; font: 400 1.1rem/1 var(--caps); color: var(--label); }
.past-old[open] summary::after { content: '–'; }
.past-old summary h3 { margin: 0; }
.past-old[open] summary { margin-bottom: 0.6rem; }
.past-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 2.5rem; }
.past-list li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.past-list li[hidden] { display: none; }
.pg-when { font: 600 0.75rem/1.9 var(--caps); letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
.pg-where { display: block; color: var(--text-soft); font-size: 0.92rem; }

/* Listening: the 78 turns while the band plays. */
.listen { background: var(--band-deep); color: var(--cream); padding: clamp(3.5rem, 9vh, 6rem) 0; --sp-track-accent: var(--brass-light); }
.listen h2 { color: var(--cream); margin-bottom: 1.2rem; }
.listen-inner, .music-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.music-grid { align-items: start; }
.music-grid .record-wrap { position: sticky; top: calc(var(--header-h) + 2rem); }
.record-wrap { max-width: 460px; width: 100%; justify-self: center; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35)); }
.record { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .is-playing .record, .is-playing .mp-art img { animation: spin78 3.6s linear infinite; }
}
@keyframes spin78 { to { rotate: 1turn; } }
.mp-art img { border-radius: 50%; }
@media (max-width: 760px) {
  .listen-inner, .music-grid { grid-template-columns: 1fr; }
  .music-grid .record-wrap { position: static; }
  .record-wrap { max-width: 280px; }
}
.tracks { list-style: none; margin: 1.2rem 0; padding: 0; counter-reset: t; }
.tracks li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); }
.listen .tracks li { border-bottom-color: rgba(243, 236, 217, 0.12); }
.tn { width: 2rem; flex: none; font: 600 0.75rem/1 var(--caps); letter-spacing: 0.1em; color: var(--label); }
.listen .tn { color: var(--brass-light); }
.tp-name { font-size: 1.08rem; }
.tp-by { display: block; font-size: 0.88rem; font-style: italic; color: var(--text-soft); font-weight: 400; }
.dur { font: 400 0.8rem/1 var(--caps); letter-spacing: 0.08em; color: var(--text-soft); }
.listen .dur { color: rgba(243, 236, 217, 0.6); }

/* Quotes */
.quotes-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2rem 3rem; }
.quote { margin: 0; }
.quote p { font: italic 400 clamp(1.3rem, 2.4vw, 1.7rem)/1.4 var(--body); color: var(--strong); margin: 0 0 0.8rem; }
.quote footer { font: 600 0.74rem/1.5 var(--caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.quote footer a { color: inherit; }
.quote-small p { font-size: 1.15rem; }
.quote-small { margin-bottom: 1.6rem; }

/* Video */
.feature-video { margin: 0; }
/* The video is 4:3 with the picture letterboxed inside it; cropping to 16:9
   cuts exactly the black bars. */
.feature-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border-radius: var(--radius); }
.feature-video figcaption, .video figcaption { margin-top: 0.6rem; font-size: 0.92rem; color: var(--text-soft); }
.video-grid { display: grid; gap: 2rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.video { margin: 0; }
.video figcaption { display: grid; gap: 0.1rem; }
.yt-title { font: 500 1.08rem/1.3 var(--body); color: var(--text); }
.yt-credit { font: 400 0.85rem/1.3 var(--body); color: var(--text-soft); }
.yt { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.8s var(--ease), opacity 0.4s; }
.yt:hover img { transform: scale(1.03); opacity: 1; }
.yt-play {
  position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 1;
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--brass); color: var(--fern-deep); box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s var(--ease);
}
.yt:hover .yt-play { transform: translateY(-2px); }
.yt-play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.yt iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; color-scheme: light; background: transparent; opacity: 0; transition: opacity 0.5s var(--ease); }
.yt iframe.ready { opacity: 1; }
.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 1.5rem max(var(--gutter), env(safe-area-inset-right));
  border: 0; background: transparent; color: var(--cream); display: grid; place-items: center;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(14, 24, 17, 0.93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html:has(.lightbox[open]) { overflow: hidden; }
.lb-inner { width: min(100%, 1280px, calc((100svh - 3rem - 4.5rem) * 16 / 9)); }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.lb-title { margin: 0; font: 400 clamp(1.1rem, 2vw, 1.5rem)/1.25 var(--display); }
.lb-close {
  flex: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem 0.5rem 0.75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(243, 236, 217, 0.25); background: rgba(243, 236, 217, 0.06); color: var(--cream); font: 600 0.8rem/1 var(--caps); letter-spacing: 0.12em; text-transform: uppercase;
}
.lb-close:hover { border-color: var(--brass-light); }
.lb-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.lb-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.lb-frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; color-scheme: light; background: transparent; opacity: 0; transition: opacity 0.5s var(--ease); }
.lb-frame iframe.ready { opacity: 1; }

/* Booking band and page */
.book-band { background: var(--band-fern); color: var(--cream); padding: clamp(3rem, 8vh, 5rem) 0; }
.book-band h2 { color: var(--cream); margin-bottom: 0.8rem; }
.book-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.book-photo { margin: 0; }
.book-photo img { width: 100%; height: auto; border-radius: var(--radius); }
.book-photo figcaption { margin-top: 0.4rem; font: 400 0.72rem/1 var(--caps); letter-spacing: 0.08em; color: rgba(243, 236, 217, 0.6); }
@media (max-width: 760px) { .book-inner { grid-template-columns: 1fr; } }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.book-grid h2 { margin: 2.2rem 0 1rem; font-size: 1.7rem; }
.book-form h2 { margin-top: 0; }
@media (max-width: 860px) { .book-grid { grid-template-columns: 1fr; } }
.repertoire { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.repertoire li { padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--card); border: 1px solid var(--pill-line); font-size: 0.95rem; }
.book-form { background: var(--card-solid); border: 1px solid var(--form-line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 20px 50px -30px rgba(20, 36, 26, 0.5); }
.contact-form { display: grid; gap: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.contact-form label { display: grid; gap: 0.35rem; font: 600 0.72rem/1.3 var(--caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--heading); }
.contact-form input, .contact-form textarea {
  font: 400 1.05rem/1.4 var(--body); color: var(--text); text-transform: none; letter-spacing: 0;
  padding: 0.7rem 0.8rem; border: 1px solid var(--field-line); border-radius: 8px; background: var(--field-bg);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: transparent; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form button { justify-self: start; }
.form-msg { margin: 0; font-size: 1rem; }
.form-msg.ok { color: var(--heading); }
.form-msg.err { color: var(--err); }
.contact-form.sending { opacity: 0.6; pointer-events: none; }
.contact-form.is-done > :not(.form-msg) { display: none; }

/* Band page */
.members { display: grid; gap: clamp(2.5rem, 6vh, 4rem); }
.member { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.member-photo { margin: 0; }
.member-photo img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); }
.member-photo figcaption { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-soft); }
.member h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.member-inst { margin: 0.4rem 0 1rem; font: 600 0.78rem/1.3 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.member-text { max-width: 62ch; }
@media (max-width: 640px) {
  .member { grid-template-columns: 120px 1fr; gap: 1.2rem; }
  .member-text p:not(.member-inst) { grid-column: 1 / -1; }
}
.history { background: var(--band-deep); color: var(--cream); padding: clamp(3.5rem, 9vh, 6rem) 0; }
.history h2 { color: var(--cream); margin-bottom: 2rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem; max-width: 900px; }
.timeline li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; }
.tl-year { margin: 0; font: 400 1.7rem/1.1 var(--display); color: var(--brass-light); }
.tl-body p { margin: 0 0 0.4rem; }
.tl-source { font-size: 0.88rem; }
.tl-source a { color: rgba(243, 236, 217, 0.65); }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 0.3rem; } }
.history-quotes { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 2rem 3.5rem; }
.history .quote p { color: var(--cream); }
.history .quote footer { color: var(--brass-light); }
.past-members { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.2rem 2rem; }
.past-members li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.pm-name { font-weight: 600; }
.pm-inst { color: var(--text-soft); }
.pm-years { display: block; font: 600 0.72rem/1.6 var(--caps); letter-spacing: 0.12em; color: var(--label); }

/* Footer */
.site-footer { background: var(--band-deep); color: rgba(243, 236, 217, 0.85); padding: 3rem 0 calc(3rem + env(safe-area-inset-bottom)); }
.has-player .site-footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; gap: 1rem; align-items: center; }
/* Joseph's badge logo (src/assets/img/logo-badge.png), in its own colours. */
.footer-logo { width: 96px; height: auto; flex: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }
.footer-name { margin: 0; font: 400 1.6rem/1 var(--display); color: var(--cream); }
.footer-kicker { margin: 0.3rem 0 0; font-size: 0.95rem; }
.footer-nav, .footer-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0; }
.footer-nav a, .footer-links a { color: var(--cream); text-decoration: none; font: 600 0.74rem/1 var(--caps); letter-spacing: 0.14em; text-transform: uppercase; }
.footer-nav a:hover, .footer-links a:hover { color: var(--brass-light); }

/* Things that arrive as you reach them (site.js adds .rv-on). */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; translate: 0 18px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); }
  .js .rv.rv-on { opacity: 1; translate: 0 0; }
}
.rep-more { margin-top: 1rem; } .rep-more summary { font: 400 0.95rem/1.4 var(--caps); letter-spacing: 0.08em; color: var(--label); padding: 0.4rem 0; } .rep-more .repertoire { margin-top: 0.8rem; }

/* Parallax: each cover photo drifts down at a third of the scroll as the page
   moves up (as on Mark's site). Scroll-driven, transform only (compositor),
   off with reduced motion and while pinch-zoomed (panning would drive it).
   Keep the var() in the shorthand (minifiers fold animation-timeline in). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cover-bg img {
      animation: cover-drift var(--drift-ease, linear) both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    html.zoomed .cover-bg img { animation: none; }
  }
}
@keyframes cover-drift { to { translate: 0 30vh; } }