/* Brother Hyde design system: built around the band's logo. Dark stage, the logo in cream as the
   headliner, and type that echoes it: heavy geometric caps like HYDE, set against light, widely
   tracked caps like BROTHER. Warm spotlight amber is the one accent, kept for the action. Colors are tokens; swap them here
   if the band supplies brand colors (BIS-6 asset-requests). Every text/background
   pair below meets WCAG AA (checked in test/design.test.mjs). */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Metric-matched fallbacks keep text from jumping when the web fonts arrive. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; }

:root {
  --ink: #0d0b09;
  --ink-2: #17130f;
  --ink-3: #221c16;
  --line: #3b3229;
  --paper: #f7f0e3;
  --muted: #bcb09e;
  --amber: #ffb22e;
  --red: #ff6a4d;
  --on-accent: #160f05;

  /* One family. The old condensed poster face fought the logo's wide, even letters; Inter in caps
     matches HYDE's geometry and its variable weight gives the BROTHER-light contrast. */
  --display: var(--body);
  --body: "Inter", "Inter Fallback", system-ui, sans-serif;

  --max: 72rem;
  --gutter: max(1rem, calc((100% - var(--max)) / 2));
  --radius: .5rem;
  --control-h: 3.25rem; /* BIS-12: one height for text, date and select fields so paired fields line up. */
  --space: clamp(3.5rem, 8vw, 6.5rem);

  /* BIS-13 retro layer ("photocopied gig flyer"). Decorative only: none of these carry text. */
  --tape: rgb(247 240 227 / .17);    /* translucent masking tape holding cards to the wall */
  --notch: .55rem;                   /* ticket-stub notch radius */
  --torn: 10px;                      /* height of the torn-paper edge on poster blocks */
  /* BIS-13 perf pass: textures are CSS gradients, not SVG images. Every SVG used as a CSS image is a
     separate document with its own style/layout/paint passes on the main thread; on Home the old
     halftone + torn-edge SVGs cost more than the rest of the page's styling put together. */
  --stage-light: radial-gradient(60rem 34rem at 12% -12%, rgb(255 178 46 / .30), transparent 62%), radial-gradient(48rem 30rem at 92% -6%, rgb(255 106 77 / .22), transparent 60%);
  /* Torn edge: three sawtooths with unrelated periods in the page color. Where they overlap the
     outline stops repeating, so it reads as a tear, not pinking shears. No mask, no image. */
  --tear-bottom: linear-gradient(to top right, var(--ink) 50%, transparent 0) 0 100% / 29px 8px repeat-x,
                 linear-gradient(to top left, var(--ink) 50%, transparent 0) 11px 100% / 19px var(--torn) repeat-x,
                 linear-gradient(to top right, var(--ink) 50%, transparent 0) 3px 100% / 7px 5px repeat-x,
                 linear-gradient(var(--ink) 0 0) 0 100% / 100% 2px no-repeat;
  --tear-top: linear-gradient(to bottom right, var(--ink) 50%, transparent 0) 0 0 / 29px 8px repeat-x,
              linear-gradient(to bottom left, var(--ink) 50%, transparent 0) 11px 0 / 19px var(--torn) repeat-x,
              linear-gradient(to bottom right, var(--ink) 50%, transparent 0) 3px 0 / 7px 5px repeat-x,
              linear-gradient(var(--ink) 0 0) 0 0 / 100% 2px no-repeat;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 1.0625rem/1.65 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-underline-offset: .18em; }
a:hover { color: var(--paper); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: .2rem; }

h1, h2, h3, .display { font-family: var(--display); font-weight: 650; text-transform: uppercase; letter-spacing: .02em; line-height: 1.08; margin: 0 0 1rem; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; letter-spacing: .03em; }
p { margin: 0 0 1rem; }
strong { color: var(--paper); font-weight: 700; }

/* Layout: every child of <main> sits in the centered column; .bleed spans edge to edge. */
main { overflow-x: clip; display: grid; grid-template-columns: 1fr min(var(--max), 100% - 2rem) 1fr; padding-bottom: var(--space); }
main > * { grid-column: 2; }
main > .bleed { grid-column: 1 / -1; padding-inline: var(--gutter); }
section { margin-top: var(--space); }
main > :first-child { margin-top: 0; }
main > .cta-block:last-child { margin-bottom: calc(var(--space) * -1); border-bottom: 0; }
.page-head + section, .hero + section, .tape + section { margin-top: calc(var(--space) * .8); }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 50; }
.skip:focus { left: 1rem; background: var(--paper); color: var(--ink); padding: .6rem 1rem; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.fine { color: var(--muted); font-size: .9rem; }
/* Eyebrows take BROTHER's part: small, light, widely tracked caps over the heavy line below. */
.eyebrow { display: block; font: 400 .8rem/1.4 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--amber); margin: 0 0 1.2rem; }
h2.eyebrow { font-weight: 400; letter-spacing: .32em; text-wrap: initial; }
/* Measure: 38rem keeps the lede near 60 characters a line, so it reads as a short paragraph, not a wall. */
.lede { font-size: clamp(1.0625rem, .9rem + .7vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 38rem; }
.section-head { max-width: 46rem; margin-bottom: 2rem; }
.section-head h2 { margin-bottom: .6rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; padding: .45rem var(--gutter); background: rgb(13 11 9 / .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
/* The band's logo (src/_data/brand.yaml): one traced SVG path in --paper. It is a stacked mark with
   a long Y stem, so it is sized by height and runs taller than a one-line wordmark would. */
.brand { display: block; line-height: 0; }
.brand img { height: 3rem; width: auto; }
@media (min-width: 52rem) { .site-header .brand img { height: 4.25rem; } }
/* Home: the hero logo is the headliner, so the header doesn't repeat it. site.js adds .logo-away once
   the hero logo has scrolled under the header, and the small one fades in. Without scripting it just shows. */
@media (scripting: enabled) {
  .home .site-header .brand { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
  .home.logo-away .site-header .brand { opacity: 1; visibility: visible; transition: opacity .25s ease; }
}
#main-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.4rem; list-style: none; margin: 0; padding: 0; }
#main-nav a:not(.button) { color: var(--paper); text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: .02em; padding: .3rem 0; border-bottom: 2px solid transparent; }
#main-nav a:not(.button):hover { color: var(--amber); }
#main-nav a[aria-current="page"] { border-bottom-color: var(--amber); }
.menu-toggle { display: none; background: none; color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .9rem; font: 600 .95rem var(--body); cursor: pointer; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--amber); color: var(--on-accent); padding: .75rem 1.3rem; border: 2px solid var(--amber); border-radius: var(--radius); font: 800 .95rem/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.button:hover { color: var(--on-accent); background: #ffc35c; transform: translateY(-2px); box-shadow: 0 .6rem 1.6rem -.6rem rgb(255 178 46 / .6); }
.button.big { font-size: 1.05rem; padding: 1rem 1.8rem; }
/* BIS-13: the primary action is a concert ticket: notched sides and a perforated stub with the arrow.
   Notches are cut in the background, not with a mask, so the focus ring is never clipped. */
.button.big, .sticky-cta {
  --ticket: var(--amber);
  --ticket-bg: radial-gradient(circle at 0 50%, transparent var(--notch), var(--ticket) calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
               radial-gradient(circle at 100% 50%, transparent var(--notch), var(--ticket) calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
  background: var(--ticket-bg); border-color: transparent; padding-inline: 1.9rem 1.5rem; }
.button.big:hover, .sticky-cta:hover { --ticket: #ffc35c; background: var(--ticket-bg); }
.button.big::after, .sticky-cta::after { content: "\2192" / ""; align-self: stretch; display: flex; align-items: center; margin: -1rem 0 -1rem .7rem; padding-left: 1.1rem; border-left: 2px dashed rgb(22 15 5 / .45); font-size: 1.15em; transition: transform .15s ease; }
.sticky-cta::after { margin-block: -.75rem; }
.button.big:hover::after, .sticky-cta:hover::after { transform: translateX(.2rem); }
.button.ghost { background: transparent; color: var(--amber); }
.button.ghost:hover { background: rgb(255 178 46 / .1); color: var(--paper); box-shadow: none; }
.button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.arrow-link { font-weight: 700; text-decoration: none; }
.arrow-link::after { content: "\2192" / ""; display: inline-block; margin-left: .35em; transition: transform .15s ease; }
.arrow-link:hover::after { transform: translateX(.25rem); }

/* Stage lighting: shared by the home hero, page heads, and the CTA band. */
.stage { position: relative; overflow: hidden; isolation: isolate; background: var(--stage-light), linear-gradient(180deg, #19130d 0%, var(--ink) 100%); }
.stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/grain.svg"); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
/* Poster blocks end in a torn paper edge instead of a rule: the tear is painted into the block's own
   background in the page color, so nothing is masked. Textures stop above the strip. */
.hero, .page-head { background: var(--tear-bottom), var(--stage-light), linear-gradient(180deg, #19130d 0%, var(--ink-3) 100%) var(--ink-3); }
.hero::after, .page-head::after { bottom: var(--torn); }
.cta-block { background: var(--tear-top), var(--stage-light), linear-gradient(180deg, #19130d 0%, var(--ink) 100%); }
.cta-block::before, .cta-block::after { top: var(--torn); }

/* Home hero: a centered bill. Small billing line, the logo as the headliner, then the tagline,
   the one action, and the fine print, all on the same axis. One spotlight from above, on the logo. */
.hero { min-height: min(88vh, 52rem); display: grid; align-content: center; justify-items: center; text-align: center; padding-block: clamp(2.25rem, 4vw + 1rem, 4.5rem) clamp(2rem, 3vw, 2.75rem);
  background: var(--tear-bottom), radial-gradient(46rem 30rem at 50% 4%, rgb(255 178 46 / .2), transparent 70%), linear-gradient(180deg, #17120d 0%, var(--ink-3) 100%) var(--ink-3); }
.hero-photo { position: absolute; inset: 0 0 var(--torn); z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgb(13 11 9 / .55), var(--ink)); }
.hero-inner { display: grid; justify-items: center; max-width: 52rem; }
/* Sized by width; the logo's own aspect (brand.yaml width/height) reserves its height, so nothing shifts. */
.hero-logo { width: clamp(15rem, 31vw, 27rem); margin: .2rem 0 clamp(1.6rem, 3.5vw, 2.6rem); user-select: none; }
.hero .eyebrow { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.hero h1 { font-size: clamp(1.4rem, 3vw, 2.35rem); letter-spacing: .05em; line-height: 1.2; margin-bottom: 1rem; }
/* "YOU": the board's emphasis. Amber with an underline the weight of the logo's Y stem. Real text. */
.hero h1 .you { font-style: normal; color: var(--amber); text-decoration: underline .11em; text-underline-offset: .16em; }
.hero .lede { margin: 0 auto 2rem; }
.hero-cta { display: grid; justify-items: center; gap: .9rem; }
.hero-cta .fine { margin: 0; }

/* Fact strip and genre tape */
/* BIS-13: the chips were five boxes competing with the CTA. Now they read as the fine print on a ticket. */
.facts-strip { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; list-style: none; padding: 1.1rem 0 0; margin: 2.4rem 0 0; max-width: 40rem; border-top: 2px dashed var(--line); }
.hero .facts-strip { justify-content: center; }
.facts-strip li { display: flex; align-items: center; gap: .55rem; font: 500 .78rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
.facts-strip li::before { content: ""; flex: none; width: .4rem; height: .4rem; background: var(--amber); transform: rotate(45deg); }
/* Genre tape: gaffer tape across the poster, with the same grain as the stage so it isn't flat plastic.
   Black grain at 18% over amber: plain alpha gives the same pixels a multiply blend did, without the blend pass. */
.tape { position: relative; background: var(--amber); color: var(--on-accent); overflow: hidden; padding-block: .7rem; transform: rotate(-1.2deg); margin: -.6rem -1rem 0; box-shadow: 0 .8rem 2rem -1rem #000, inset 0 2px rgb(22 15 5 / .15), inset 0 -2px rgb(22 15 5 / .15); }
.tape::after { content: ""; position: absolute; inset: 0; background: url("/assets/grain.svg"); filter: invert(1); opacity: .18; pointer-events: none; }
.tape p { margin: 0; font-family: var(--display); font-weight: 750; font-size: clamp(1.05rem, 2.4vw, 1.5rem); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-align: center; }

/* Sub-page heads */
.page-head { padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4rem); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-bottom: 0; }
.page-head .button { margin-top: 2rem; }

.duo { display: grid; gap: 1.25rem; margin-top: var(--space); }
@media (min-width: 52rem) { .duo { grid-template-columns: 1fr 1fr; } }
.duo > section { margin-top: 0; }
.duo h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
[id] { scroll-margin-top: 6rem; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; counter-reset: card; }
.cards li { counter-increment: card; position: relative; }
.cards li::after { content: ""; position: absolute; z-index: 1; top: -.7rem; left: 50%; width: 5.5rem; height: 1.5rem; margin-left: -2.75rem; background: var(--tape); transform: rotate(-3deg); pointer-events: none;
  clip-path: polygon(2px 0, calc(100% - 3px) 0, 100% 40%, calc(100% - 2px) 100%, 3px 100%, 0 60%); }
.cards li:nth-child(even)::after { transform: rotate(2.5deg); }
.cards a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 2rem 1.6rem 1.6rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); text-decoration: none; transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.cards a::before { content: "0" counter(card) / ""; font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--ink-3); position: absolute; top: 1rem; right: 1.2rem; transition: color .2s ease; }
.cards a::after { content: "\2192" / ""; margin-top: auto; padding-top: 1rem; font-size: 1.6rem; line-height: 1; color: var(--amber); transition: transform .2s ease; }
.cards a:hover::after { transform: translateX(.4rem); }
.cards a:hover { border-color: var(--amber); background: var(--ink-3); }
.cards a:hover::before { color: rgb(255 178 46 / .35); }
.cards h3 { color: var(--paper); font-size: 1.3rem; margin: 0 0 .6rem; max-width: 14ch; }
.cards p { margin: 0; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: step; }
/* BIS-13: each step is a ticket. Amber stub with the number, perforation, notches cut top and bottom. */
.steps li { --stub: 4.25rem; counter-increment: step; position: relative; padding: 1.3rem 1.3rem 1.3rem calc(var(--stub) + 1.2rem); border-radius: var(--radius); color: var(--muted);
  background: radial-gradient(circle at calc(var(--stub) - 1px) 0, var(--ink) var(--notch), transparent calc(var(--notch) + .5px)),
              radial-gradient(circle at calc(var(--stub) - 1px) 100%, var(--ink) var(--notch), transparent calc(var(--notch) + .5px)),
              linear-gradient(90deg, var(--amber) var(--stub), var(--ink-2) 0); }
/* Absolutely positioned stub instead of a grid column: same look, far cheaper layout on slow phones. */
.steps li::before { content: counter(step); position: absolute; inset: 0 auto 0 0; box-sizing: border-box; width: var(--stub); display: flex; align-items: center; justify-content: center; border-right: 2px dashed var(--ink); font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--on-accent); }
.steps strong { display: block; font-size: 1.1rem; margin-bottom: .25rem; }
/* "Support the band" on Home (BIS-17): plain outbound tip and merch links. */
.support-links { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; }

/* Testimonials */
.testimonials { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.testimonials blockquote { margin: 0; height: 100%; padding: 1.6rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.testimonials blockquote p { font-size: 1.15rem; color: var(--paper); }
.testimonials blockquote p::before { content: "\201C"; display: block; font-family: var(--display); font-size: 3.5rem; line-height: .7; color: var(--amber); }
.testimonials footer { color: var(--muted); font-size: .9rem; }

/* FAQ */
.faq { display: grid; gap: 1rem; margin: 0; }
@media (min-width: 52rem) { .faq { grid-template-columns: 1fr 1fr; } }
.faq > div { padding: 1.4rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.faq dt { font-weight: 800; color: var(--paper); margin: 0 0 .4rem; font-size: 1.05rem; }
.faq dd { margin: 0; color: var(--muted); }

/* Panels and CTA band */
.panel { padding: clamp(1.6rem, 4vw, 2.6rem); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.panel > :last-child { margin-bottom: 0; }
.notice { background: var(--ink-2); border-left: 4px solid var(--amber); padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; }
.cta-block { text-align: center; padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.cta-block h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 1.6rem; }
.cta-block p { margin: 0; }
.cta-block + .center { margin-top: 1rem; }

/* Setlist */
.song-search { margin: 2rem 0 0; }
.song-search label { display: grid; gap: .4rem; font-weight: 700; max-width: 26rem; }
.song-search input, .booking input:not([type="radio"], [type="checkbox"]), .booking select, .booking textarea { font: inherit; color: var(--paper); background: var(--ink); border: 1px solid #5a4c3e; border-radius: var(--radius); padding: .75rem .9rem; width: 100%; }
.song-search input, .booking input:not([type="radio"], [type="checkbox"]), .booking select { height: var(--control-h); }
.song-search input:focus, .booking input:focus, .booking select:focus, .booking textarea:focus { border-color: var(--amber); }
.song-search input::placeholder, .booking textarea::placeholder { color: #8f8474; }
.no-match { color: var(--muted); }
.songs { list-style: none; padding: 0; margin: 0; columns: 2 20rem; column-gap: 2.5rem; }
.songs li { break-inside: avoid; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.songs span { color: var(--muted); }
.lineup { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem 0; text-align: center; font-family: var(--display); font-weight: 650; text-transform: uppercase; line-height: 1.15; }
.lineup li { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
.lineup li:nth-child(-n+3) { font-size: clamp(2.1rem, 5.5vw, 3.8rem); color: var(--amber); }
.lineup li:not(:last-child)::after { content: "\2022"; color: var(--red); margin: 0 .55em; font-size: .6em; vertical-align: middle; }

/* Media */
.video-grid, .photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.photo-grid a { display: block; border-radius: var(--radius); overflow: hidden; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.photo-grid a:hover img { transform: scale(1.03); }
.video { margin: 0; }
.video figcaption { color: var(--muted); font-size: .9rem; margin-top: .6rem; }
.video-feature { max-width: 56rem; }
.video-facade, .video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); padding: 0; background: #000; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.video-facade:hover img { opacity: .8; }
.video-facade .play { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--on-accent); font-size: 1.6rem; padding-left: .3rem; box-shadow: 0 0 0 .6rem rgb(255 178 46 / .25); transition: transform .2s ease; }
.video-facade:hover .play { transform: scale(1.08); }
.video-note { position: absolute; left: .7rem; bottom: .6rem; font-size: .8rem; color: #eee; background: rgb(0 0 0 / .7); padding: .15rem .5rem; border-radius: .25rem; }

/* About */
.members { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.members li { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.members img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.members .who { padding: 1.2rem 1.3rem 1.4rem; color: var(--muted); margin: 0; }
.members .name { display: block; font-family: var(--display); font-weight: 650; font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; color: var(--paper); }
.members .role { display: block; color: var(--amber); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin: .2rem 0 .6rem; }
.stats { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1rem; }
.stats li { padding: 1.2rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: .9rem; }
.stats b { display: block; font-family: var(--display); font-weight: 650; font-size: clamp(1.25rem, 3.6vw, 1.6rem); line-height: 1.05; text-transform: uppercase; color: var(--paper); margin-bottom: .2rem; }
.downloads { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .8rem; }

/* Gigs */
.gig-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.gig { display: grid; grid-template-columns: auto 1fr auto; gap: .3rem 1.4rem; align-items: center; padding: 1rem 1.2rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.gig time { display: grid; justify-items: center; min-width: 4.6rem; padding: .5rem .4rem; border-right: 2px dashed var(--line); padding-right: 1.4rem; line-height: 1; text-transform: uppercase; }
.gig time .mon { color: var(--amber); font-weight: 800; font-size: .8rem; letter-spacing: .14em; }
.gig time .day { font-family: var(--display); font-weight: 750; font-size: 2.1rem; margin: .15rem 0; }
.gig time .dow { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.gig .what { display: grid; gap: .1rem; }
.gig .venue { font-weight: 800; font-size: 1.15rem; color: var(--paper); }
.gig .city, .gig .time, .gig .note { color: var(--muted); font-size: .95rem; }
.gig .gig-link { justify-self: end; }
.no-gigs { color: var(--muted); }

/* Book */
.booking { display: grid; gap: 1.4rem; max-width: 44rem; padding: clamp(1.4rem, 4vw, 2.4rem); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.booking .field { display: grid; align-content: start; gap: .45rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.booking .field > label:not(.check), .booking legend { font-weight: 700; padding: 0; }
.booking legend { font-family: var(--display); font-weight: 650; font-size: 1.3rem; text-transform: uppercase; margin-bottom: .6rem; }
.booking .row { display: grid; gap: 1.4rem; }
@media (min-width: 40rem) { .booking .row { grid-template-columns: 1fr 1fr; } }
.booking .choices { display: grid; gap: .7rem; }
.booking .choices label, .booking .check { display: flex; gap: .7rem; align-items: center; background: var(--ink); border: 1px solid var(--line); padding: .9rem 1rem; border-radius: var(--radius); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.booking .choices label:hover, .booking .check:hover { border-color: #6b5b4a; }
.booking .choices label:has(input:checked), .booking .check:has(input:checked) { border-color: var(--amber); background: rgb(255 178 46 / .1); }
.booking input[type="radio"], .booking input[type="checkbox"] { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--amber); }
.booking .tiles { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.booking .tiles label, .booking .check { font-weight: 600; }
.booking .hint { margin: 0; color: var(--muted); font-size: .9rem; }
.booking select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--amber) 50%), linear-gradient(135deg, var(--amber) 50%, transparent 50%); background-position: right 1.2rem center, right .85rem center; background-size: .4rem .4rem; background-repeat: no-repeat; padding-right: 2.5rem; }
/* iOS Safari draws native date inputs at their own intrinsic width and height, ignoring ours: drop the native box so the field matches the others. */
.booking input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
.booking input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.5em; }
.booking input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.booking textarea[readonly] { color: var(--paper); }
.booking .send { display: grid; gap: .8rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.booking .send p { margin: 0; }
.toast { margin: 0; min-height: 1.6em; color: var(--amber); font-weight: 700; }

/* 404 */
.lost { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.lost .big-404 { font-family: var(--display); font-weight: 800; font-size: clamp(7rem, 26vw, 15rem); line-height: .85; color: transparent; -webkit-text-stroke: 2px var(--amber); margin: 0 0 1rem; }
.lost .hero-cta { justify-content: center; margin-top: 2rem; }

/* Footer */
.site-footer { display: grid; gap: 2rem; padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem; background: var(--ink-2); border-top: 1px solid var(--line); color: var(--muted); }
@media (min-width: 52rem) { .site-footer { grid-template-columns: 1.4fr 1fr; } }
.site-footer .brand { margin: 0 0 1.4rem; }
.site-footer .brand img { width: 10rem; height: auto; }
.site-footer .about { max-width: 34rem; }
.site-footer .contact { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.site-footer .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.site-footer .legal p { margin: 0; }
.sticky-cta { display: none; }

@media (max-width: 48rem) {
  .js .menu-toggle { display: block; }
  .js #main-nav { display: none; width: 100%; }
  .js.menu-open #main-nav { display: block; }
  #main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0 1rem; }
  #main-nav a:not(.button) { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  #main-nav a[aria-current="page"] { color: var(--amber); border-bottom-color: var(--line); }
  #main-nav .button { margin-top: 1rem; width: 100%; }
  .sticky-cta { display: flex; position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 10; box-shadow: 0 .4rem 1.4rem #000; transition: transform .25s ease, visibility 0s; }
  .site-footer { padding-bottom: 6.5rem; }
  .gig { grid-template-columns: auto 1fr; }
  .gig .gig-link { grid-column: 2; justify-self: start; }
  .hero { min-height: auto; }
}

/* BIS-12: with scripting on, the first paint already matches what site.js produces, so nothing
   jumps when the deferred script runs (the collapsing menu cost up to 0.41 CLS on slow phones).
   Browsers without the `scripting` query fall back to the .js rules above. */
@media (max-width: 48rem) and (scripting: enabled) {
  .menu-toggle { display: block; }
  #main-nav { display: none; width: 100%; }
  .menu-open #main-nav { display: block; }
  /* Sticky CTA waits until the page's own CTA has scrolled away (site.js adds .is-shown), so a
     phone never shows two identical buttons at once. visibility keeps it out of the tab order. */
  .sticky-cta:not(.is-shown) { transform: translateY(calc(100% + 1.5rem)); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .button:hover, .button:hover::after { transform: none; }
}