/* Self-hosted fonts — eliminates FOUT from Google Fonts CDN */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: block;
  src: url('/fonts/PlayfairDisplay-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/OpenSans-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   CSS Variables

   Palette comes straight off the band's wordmark: near-black, the logo red,
   and the logo's warm off-white. Two reds — the logo red is used for large
   display type and fills, the lighter one for links and small text where the
   deep red would not clear WCAG AA against the dark background.
   ========================================================================== */

:root {
  --color-black: #141414;
  --color-panel: #1E1D1C;
  --color-panel-2: #262423;
  --color-cream: #F2EDE4;
  --color-cream-dim: #C9C2B6;
  --color-red: #C8102E;
  --color-red-deep: #9E0C24;
  --color-red-light: #FF6B7A;
  /* The logo red only clears 2.6:1 on the panel background, so it is limited to
     fills (buttons, rules) where white sits on top of it. Any red *text* uses
     one of the brighter two: 4.7:1 for display numerals, 6.1:1 for links. */
  --color-red-bright: #FF4A5E;
  --color-line: #383431;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', -apple-system, Helvetica, Arial, sans-serif;
  --wrap-max: 720px;
  --wrap-pad: 24px;
}

/* ==========================================================================
   MOBILE-FIRST BASE
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html { overflow-y: auto; }

body {
  background: var(--color-black);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-cream);
}

* { box-sizing: border-box; }

a { color: var(--color-red-light); text-decoration: none; }
a:hover { text-decoration: underline; color: #FF9AA5; }

/* Links inside running copy get an underline — colour alone is not a sufficient
   distinguisher (WCAG 1.4.1). Buttons opt out via their own !important rule. */
p a, li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-cream);
}

h1 { font-size: 2.3em; margin: 0 0 0.3em; }
h2 { font-size: 1.7em; margin: 1.6em 0 0.6em; }
h3 { font-size: 1.3em; margin: 0 0 0.3em; }

.newline { clear: both; }
.nowrap { white-space: nowrap; }

/* Reusable content wrapper — keeps text at a readable measure */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.wrapCenter { text-align: center; }

/* Full-bleed sections */
.section {
  padding: 44px 0;
}

.sectionDark    { background: var(--color-black); }
.sectionPanel   { background: var(--color-panel); }
.sectionCredits { background: var(--color-panel-2); border-top: 1px solid var(--color-line); }

/* ==========================================================================
   HAMBURGER MENU (Mobile)
   ========================================================================== */

.nav-toggle {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.nav-toggle-label {
  position: fixed;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 30px;
  cursor: pointer;
  z-index: 100;
  background: rgba(20,20,20,0.8);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 4px;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: var(--color-cream);
  height: 3px;
  width: 26px;
  border-radius: 2px;
  position: relative;
  transition: all 0.3s ease;
}

.nav-toggle-label span { top: 9px; }
.nav-toggle-label span::before { content: ''; position: absolute; top: -8px; }
.nav-toggle-label span::after  { content: ''; position: absolute; top: 8px; }

/* Overlay behind nav — tap to close */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,0.6);
}

.nav-toggle:checked ~ .nav-overlay {
  display: block;
}

.nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }
.nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(45deg); top: 0; background: var(--color-cream); }
.nav-toggle:checked ~ .nav-toggle-label span::after  { transform: rotate(-45deg); top: 0; background: var(--color-cream); }

/* ==========================================================================
   LOGO / HEADER
   ========================================================================== */

.logo {
  text-align: center;
  padding: 10px 0 8px;
}

.logo a { text-decoration: none; }
.logo a:hover { text-decoration: none; }

/* Height-driven so the intrinsic 209x281 aspect is never squashed */
.logo .logoMark {
  width: auto;
  height: 42px;
  vertical-align: middle;
}

.logo .logoText {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15em;
  letter-spacing: 0.02em;
  color: var(--color-cream);
  vertical-align: middle;
  margin-left: 8px;
}

/* ==========================================================================
   NAVIGATION (Mobile — slide-out panel)
   ========================================================================== */

#navigationlinks {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: var(--color-panel);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
  z-index: 90;
  overflow: hidden;
  overscroll-behavior: contain;
  padding-top: 60px;
  border-right: 3px solid var(--color-red);
}

body:has(.nav-toggle:checked) #navigationlinks {
  transform: translateX(0);
  visibility: visible;
  overflow-y: auto;
}

#navigationlinks ul { list-style: none; margin: 0; padding: 0; }
#navigationlinks li { display: block; border-bottom: 1px solid var(--color-line); }

#navigationlinks li a,
#navigationlinks li span {
  display: block;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25em;
  color: var(--color-cream);
  text-decoration: none;
}

#navigationlinks li a:hover { background: var(--color-panel-2); text-decoration: none; color: var(--color-cream); }
#navigationlinks li span    { color: var(--color-red-light); }

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */

.content {
  background: var(--color-black);
  min-height: 100vh;
}

.contentBody { padding: 0; }

/* Page header banner for inner pages */
.pageHeader {
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color-red);
}

.pageHeader h1 {
  margin: 0;
  font-size: 2.1em;
}

/* Inner pages (non-homepage) get padded content */
#shows .contentBody,
#contact .contentBody,
#badurl .contentBody,
#forbidden .contentBody {
  padding: 28px var(--wrap-pad) 48px;
  max-width: var(--wrap-max);
  margin: 0 auto;
}

#about .contentBody,
#media .contentBody {
  padding: 28px var(--wrap-pad) 48px;
  max-width: 940px;
  margin: 0 auto;
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

.hero {
  position: relative;
  background-image: url('/images/hero_mobile.jpg');
  background-size: cover;
  background-position: center 42%;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Radial vignette first: the stage backdrop in the hero photo carries a county
   seal right where the wordmark lands, and it reads as visual mud behind the
   apple device without it. Linear gradient underneath keeps the nav and the
   section seam below legible. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 58% at 50% 40%,
      rgba(20,20,20,0.90) 0%,
      rgba(20,20,20,0.62) 55%,
      rgba(20,20,20,0.30) 100%),
    linear-gradient(
      to bottom,
      rgba(20,20,20,0.60) 0%,
      rgba(20,20,20,0.45) 45%,
      rgba(20,20,20,0.90) 100%
    );
}

.heroOverlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 36px var(--wrap-pad);
}

.heroOverlay h1 {
  margin: 0;
  line-height: 0;
}

.heroLogo {
  width: 260px;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.75));
}

.tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05em;
  color: var(--color-cream);
  margin: 18px 0 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

.introText {
  font-size: 1.1em;
  text-align: center;
  line-height: 1.8;
  margin: 0;
  color: var(--color-cream);
}

/* Next / last show band */
.nextShow { text-align: center; }

.nextShow h2 {
  color: var(--color-red-light);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 12px;
}

.nextShow .showDate {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.25;
  margin: 0;
}

.nextShow .showVenue {
  font-size: 1.05em;
  color: var(--color-cream-dim);
  margin-top: 6px;
}

.nextShow .nextShowNote {
  margin-top: 18px;
  color: var(--color-cream);
}

.nextShow .nextShowCTA { margin-top: 18px; }
.nextShow .nextShowCTA .btn { margin: 6px; }

/* Credentials strip */
.creditsLead {
  font-family: var(--font-body);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-cream-dim);
  margin: 0;
}

.creditsYears {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px 0 0;
  line-height: 1.3;
}

.creditsYears span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.9em;
  color: var(--color-red-bright);
  margin: 0 10px;
}

.creditsNote {
  margin: 18px auto 0;
  max-width: 46ch;
  color: var(--color-cream-dim);
  font-size: 0.95em;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 34px;
  background: var(--color-red);
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: 0.05em;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.15s;
}

.btn:hover {
  background: var(--color-red-deep);
  transform: translateY(-1px);
}

.btnLarge {
  padding: 17px 46px;
  font-size: 1.25em;
}

.btnQuiet {
  background: transparent;
  border: 2px solid var(--color-line);
  color: var(--color-cream) !important;
}

.btnQuiet:hover { background: var(--color-panel-2); border-color: var(--color-cream-dim); }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

.bandBio p {
  max-width: 66ch;
}

.bandPhoto {
  margin: 32px 0 8px;
}

.bandPhoto img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

.photoCredit {
  color: var(--color-cream-dim);
  font-style: italic;
  font-size: 0.9em;
  margin: 8px 0 0;
}

.memberBio {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-line);
}

.memberBio:last-of-type { border-bottom: none; }

.memberBio h3 {
  font-size: 1.35em;
  margin: 0 0 2px;
}

.memberRole {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.62em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red-light);
  margin-top: 4px;
}

.memberTenure {
  color: var(--color-cream-dim);
  font-size: 0.85em;
  font-style: italic;
  margin: 6px 0 0;
}

.memberBio p { max-width: 62ch; }

.bookCta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  text-align: center;
}

/* ==========================================================================
   SHOWS PAGE
   ========================================================================== */

.showList { margin-bottom: 24px; }

.showsIntro { color: var(--color-cream-dim); margin-top: 0; }

.showYear {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5em;
  color: var(--color-red-bright);
  margin: 32px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-line);
}

.showItem {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}

.showItem:first-child { padding-top: 0; }

.showItem.upcoming {
  border-left: 4px solid var(--color-red);
  padding-left: 18px;
}

.showItem .showDate {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2em;
  color: var(--color-cream);
}

.showItem .showVenue {
  font-size: 1.05em;
  margin-top: 2px;
}

.showItem .showAddress { color: var(--color-cream-dim); }

.showItem .showNote {
  font-style: italic;
  color: var(--color-cream-dim);
  margin-top: 2px;
  font-size: 0.9em;
}

.showIcons {
  display: inline;
  margin-left: 6px;
  white-space: nowrap;
}

.showIcons a {
  display: inline-block;
  margin-left: 3px;
  opacity: 0.55;
  transition: opacity 0.2s;
  vertical-align: baseline;
}

.showIcons a:hover {
  opacity: 1;
  text-decoration: none;
}

.showIcons img {
  vertical-align: middle;
  position: relative;
  top: -1px;
  filter: invert(1);
}

.showList.past .showItem .showDate { color: var(--color-cream-dim); }

.noShows { font-size: 1.05em; }

.showsFootnote {
  color: var(--color-cream-dim);
  font-style: italic;
  font-size: 0.9em;
}

/* ==========================================================================
   MEDIA PAGE
   ========================================================================== */

.videoEmbed { margin-bottom: 32px; }

.videoSubhead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-cream-dim);
  margin: 0 0 12px;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--color-panel);
}

.videoWrapper iframe,
.videoWrapper .videoFacade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Click-to-load poster: looks like a player, costs no YouTube JS until used */
.videoFacade {
  padding: 0;
  margin: 0;
  background: var(--color-panel);
  cursor: pointer;
  display: block;
  overflow: hidden;
}

.videoFacade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, opacity 0.2s ease;
}

.videoFacade:hover img { transform: scale(1.03); opacity: 0.85; }

.videoPlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  transition: background 0.2s, transform 0.2s;
}

/* Play triangle */
.videoPlay::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent #fff;
}

.videoFacade:hover .videoPlay,
.videoFacade:focus-visible .videoPlay {
  background: var(--color-red-deep);
  transform: translate(-50%, -50%) scale(1.08);
}

.videoFacade:focus-visible {
  outline: 3px solid var(--color-red-light);
  outline-offset: 3px;
}

.videoFacadeLabel {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

.screenReaderOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.videoNoscript {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 0.85em;
}

.videoCredit {
  color: var(--color-cream-dim);
  font-size: 0.9em;
  margin: 10px 0 0;
}

.mediaMore { margin-bottom: 8px; }

/* Justified row layout — images fill each row proportionally */
.photoGallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.photoGallery a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  line-height: 0;
  height: 200px;
  flex-grow: 1;
}

/* Landscape images get more width, portrait less — proportional to aspect ratio */
.photoGallery a.landscape { flex-basis: 260px; }
.photoGallery a.portrait  { flex-basis: 140px; }
.photoGallery a.square    { flex-basis: 200px; }

.photoGallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.photoGallery a:hover img { transform: scale(1.04); }

.photoYear {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 10px 6px;
  font-family: var(--font-body);
  font-size: 0.75em;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
}

.pswp__img--placeholder { display: none !important; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

#contactPreamble {
  margin-bottom: 24px;
  font-size: 1.02em;
}

#contactForm fieldset { border: none; padding: 0; margin: 0; }
#contactForm ol { list-style: none; padding: 0; margin: 0; }

#contactForm li { margin-bottom: 18px; }

#contactForm label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95em;
  color: var(--color-cream);
}

#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm input[type="date"],
#contactForm textarea,
#contactForm select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--color-line);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1em;
  background: var(--color-panel);
  color: var(--color-cream);
  transition: border-color 0.2s;
}

#contactForm input:focus,
#contactForm textarea:focus,
#contactForm select:focus {
  border-color: var(--color-red-light);
  outline: none;
}

#contactForm input[type="submit"] {
  width: 100%;
  padding: 16px;
  background: var(--color-red);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

#contactForm input[type="submit"]:hover {
  background: var(--color-red-deep);
  transform: translateY(-1px);
}

.inputErrorField { border-color: var(--color-red-light) !important; background: #2A1A1C !important; }
.errortip { display: block; color: var(--color-red-light); font-size: 0.85em; margin-top: 4px; }

.ui-state-error {
  color: var(--color-red-light);
  font-weight: 600;
  padding: 12px 16px;
  background: #2A1A1C;
  border: 1px solid var(--color-red-light);
  border-radius: 4px;
  margin-bottom: 20px;
}

.errorMessage { color: var(--color-red-light); font-weight: 600; }

.formRow--optional { position: absolute; left: -9999px; top: -9999px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.desktopFooter { display: none; }

.mobileFooter {
  padding: 30px var(--wrap-pad);
  text-align: center;
  background: var(--color-panel);
  border-top: 1px solid var(--color-line);
}

.socialLinks { margin-bottom: 10px; }

.socialLinks a {
  display: inline-block;
  margin: 0 10px;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.socialLinks a:hover { opacity: 1; }
.socialLinks img { width: 26px; height: 26px; filter: invert(1); }

.copyright { font-size: 0.85em; color: var(--color-cream-dim); margin: 5px 0; }

.mobileOnly { }

/* ==========================================================================
   DESKTOP (806px+)
   ========================================================================== */

@media screen and (min-width: 806px) {

  html { overflow-y: scroll; }

  body { font-size: 18px; }

  :root {
    --wrap-max: 720px;
    --wrap-pad: 32px;
  }

  .content {
    width: 100%;
    max-width: 100%;
  }

  .contentBody { padding: 0; }

  #shows .contentBody,
  #contact .contentBody,
  #badurl .contentBody,
  #forbidden .contentBody {
    padding: 44px 32px 64px;
    max-width: var(--wrap-max);
  }

  #about .contentBody,
  #media .contentBody {
    padding: 44px 32px 64px;
    max-width: 940px;
  }

  /* Hide hamburger */
  .nav-toggle-label { display: none; }
  .nav-overlay { display: none !important; }
  .mobileOnly { display: none !important; }

  /* Logo bar */
  .logo { padding: 16px 0 4px; }
  .logo .logoMark { width: auto; height: 50px; }
  .logo .logoText { font-size: 1.45em; }

  /* Desktop nav — horizontal */
  #navigationlinks {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    transform: none;
    visibility: visible;
    overflow: visible;
    padding: 0 0 10px;
    border-right: none;
    text-align: center;
  }

  #navigationlinks ul { display: inline-block; }
  #navigationlinks li { display: inline-block; border-bottom: none; }

  #navigationlinks li a,
  #navigationlinks li span {
    display: inline-block;
    padding: 5px 16px;
    font-size: 1.05em;
    letter-spacing: 0.04em;
  }

  #navigationlinks li a:hover {
    background: var(--color-panel-2);
    border-radius: 3px;
  }

  /* Hero */
  .hero {
    background-image: url('/images/hero.jpg');
    min-height: 78vh;
  }

  .heroLogo { width: 420px; }

  .tagline { font-size: 1.3em; margin-top: 26px; }

  /* Sections */
  .section { padding: 56px 0; }

  .introText { font-size: 1.18em; }

  .creditsYears span { font-size: 2.3em; margin: 0 11px; }

  /* About — bio and photo side by side. Deliberately a flex row rather than a
     float: floating the tall portrait and clearing it before the lineup left a
     dead gap under the "The Band" heading. */
  .aboutTop {
    display: flex;
    gap: 36px;
    align-items: flex-start;
  }

  .bandBio { flex: 1; }
  .bandBio p { max-width: 62ch; }

  .bandPhoto {
    flex: 0 0 300px;
    margin: 0;
  }

  .memberBio { padding: 26px 0; }

  .memberBio h3 { font-size: 1.5em; }

  /* Role sits inline beside the name once there is room for it */
  .memberRole {
    display: inline;
    font-size: 0.5em;
    margin-left: 12px;
    vertical-align: 0.28em;
  }

  /* Gallery — taller rows on desktop */
  .photoGallery { gap: 8px; }
  .photoGallery a { height: 280px; }
  .photoGallery a.landscape { flex-basis: 380px; }
  .photoGallery a.portrait  { flex-basis: 200px; }
  .photoGallery a.square    { flex-basis: 280px; }

  /* Contact */
  #contactForm input[type="text"],
  #contactForm input[type="email"],
  #contactForm input[type="tel"],
  #contactForm input[type="date"],
  #contactForm select {
    width: 60%;
  }

  #contactForm input[type="submit"] {
    width: auto;
    padding: 16px 56px;
  }

  /* Footer */
  .mobileFooter { display: none; }

  .desktopFooter {
    display: block;
    text-align: center;
    padding: 24px 0 40px;
    background: var(--color-panel);
    border-top: 1px solid var(--color-line);
  }
}

/* ==========================================================================
   POLISH

   Restrained additions only: a paper grain, the band's own apple used as an
   ornament, and vinyl grooves behind the awards strip. Everything here is
   decoration — if any of it is removed the layout is unaffected.
   ========================================================================== */

/* Paper grain. One inline SVG turbulence tile at very low opacity, so the flat
   near-black reads as printed rather than as an empty div. No image request,
   and pointer-events:none keeps it clear of every control. Sits below the nav
   (z-index 90) so the slide-out panel is never tinted. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hairline lift on the raised bands, so the three greys read as layers */
.sectionPanel,
.sectionCredits {
  box-shadow: inset 0 1px 0 rgba(242,237,228,0.055);
}

/* Apple ornament: the band's own mark as a divider, rules tapering either side */
.appleRule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 300px;
  margin: 36px auto 0;
}

.appleRule::before,
.appleRule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-line), transparent);
}

.appleRule img {
  height: 48px;
  width: auto;
  opacity: 0.85;
}

/* Vinyl grooves behind the awards strip. Concentric hairlines at 4% — reads as
   texture at a glance and as a record if you look. */
.sectionCredits {
  position: relative;
  overflow: hidden;
}

.sectionCredits > .wrap { position: relative; z-index: 1; }

.sectionCredits::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: repeating-radial-gradient(circle at center,
    rgba(242,237,228,0.04) 0 1px, transparent 1px 8px);
  mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
}

/* Inner-page h2s get a short red rule, echoing the pageHeader underline */
#about h2,
#media h2,
#shows h2,
#contact .bookingAside h2 {
  position: relative;
  padding-bottom: 12px;
}

#about h2::after,
#media h2::after,
#shows h2::after,
#contact .bookingAside h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--color-red);
}

/* Separate the nav bar from whatever follows it */
header > .logo { position: relative; }

.content > header {
  border-bottom: 1px solid var(--color-line);
}

/* --------------------------------------------------------------------------
   Shared kit for the inner pages

   Same vocabulary as the homepage rather than new ideas per page: the panel
   grey with its hairline lift, the apple ornament, and one lead-paragraph
   weight. Nothing here is load-bearing.
   -------------------------------------------------------------------------- */

/* Raised card — the inner-page equivalent of the homepage's .sectionPanel */
.panelCard {
  background: var(--color-panel);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(242,237,228,0.055);
  padding: 24px;
}

/* First paragraph of a page reads a step up from body copy */
.leadText {
  font-size: 1.12em;
  line-height: 1.75;
  color: var(--color-cream);
}

/* Tighter apple, for use inside a card or aside */
.appleRule.appleRuleTight {
  max-width: 190px;
  margin: 26px auto 4px;
}

.appleRule.appleRuleTight img { height: 34px; }

/* Photographs get a hairline and a lift, so they read as prints on the page */
.bandPhoto img,
.photoGallery a {
  border: 1px solid rgba(242,237,228,0.10);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
}

/* ---- About ---- */

/* Member entries become cards; the dividing borders are redundant once each
   block has its own ground */
.memberBio {
  background: var(--color-panel);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(242,237,228,0.055);
  border-bottom: none;
  padding: 22px 24px;
  margin-bottom: 14px;
}

.memberBio:last-of-type { margin-bottom: 0; }

.bookCta {
  margin-top: 36px;
  padding-top: 28px;
  padding-bottom: 30px;
  border-top: none;
}

.bookCtaLead {
  margin: 0 0 18px;
  color: var(--color-cream-dim);
  font-size: 1.02em;
}

/* ---- Shows ---- */

.showsIntro strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25em;
  color: var(--color-red-bright);
}

.panelCard.noShows { margin-bottom: 8px; }
.panelCard.noShows p { margin: 0; }

/* ---- Contact ---- */

.formCard { padding: 26px 24px 8px; }

.bookingAside h2 {
  margin-top: 0;
  font-size: 1.25em;
}

.factList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.factList li {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.95em;
  line-height: 1.6;
}

.factList li:last-child { border-bottom: none; }

.factLabel {
  display: block;
  font-size: 0.78em;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-red-light);
  margin-bottom: 2px;
}

.asideNote {
  font-size: 0.9em;
  color: var(--color-cream-dim);
}

@media screen and (min-width: 806px) {

  .panelCard { padding: 30px 32px; }
  .formCard { padding: 32px 32px 10px; }
  .memberBio { padding: 26px 30px; margin-bottom: 16px; }

  /* Form and the facts panel sit side by side; the form was previously alone in
     a 720px column with the right half of the page empty */
  #contact .contentBody { max-width: 940px; }

  .contactLayout {
    display: flex;
    align-items: flex-start;
    gap: 34px;
  }

  .formCard { flex: 1 1 58%; }

  .bookingAside {
    flex: 0 0 34%;
    align-self: stretch;
  }

  /* Inputs already fill the card, so the 60% cap is no longer wanted */
  #contactForm input[type="text"],
  #contactForm input[type="email"],
  #contactForm input[type="tel"],
  #contactForm input[type="date"],
  #contactForm select {
    width: 100%;
    max-width: 420px;
  }
}

/* --------------------------------------------------------------------------
   Secondary text

   Everything subordinate was dim italic, which is the default that makes a page
   look unconsidered. Split into two deliberate treatments instead:

     .figCaption / .memberTenure / .photoYear — labels. Tracked uppercase at a
       small size, anchored by a short red tick. Reads as editorial metadata.
     .note / .videoCredit / .showsFootnote / .asideNote — sentences. Left rule,
       normal roman, slightly tightened measure. Reads as an aside, not an
       apology.

   No italics in either.
   -------------------------------------------------------------------------- */

.figCaption,
.memberTenure,
.photoYear {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}

.figCaption {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 13px 0 0;
  line-height: 1.5;
}

/* Short red tick tying the caption to the image above it */
.figCaption::before,
.memberTenure::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 2px;
  background: var(--color-red);
  transform: translateY(-4px);
}

.memberTenure {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 7px 0 14px;
}

.note,
.videoCredit,
.showsFootnote,
.asideNote {
  font-style: normal;
  font-size: 0.9em;
  line-height: 1.65;
  color: var(--color-cream-dim);
  padding-left: 15px;
  border-left: 2px solid var(--color-line);
  max-width: 62ch;
}

.videoCredit { margin: 14px 0 0; }
.note { margin-top: 16px; }

/* Gallery overlay caption: same label language, on a heavier scrim so it stays
   legible over any photograph */
.photoYear {
  padding: 20px 12px 8px;
  font-size: 0.66em;
  background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.35) 45%, rgba(0,0,0,0));
}

/* Skip link — visually hidden until focused. The old WordPress site had one and
   this rebuild had dropped it; with a fixed hamburger and a slide-out panel,
   keyboard users otherwise tab the whole nav on every page. */
.skipLink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-red);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 0 0 4px 0;
}

.skipLink:focus {
  left: 0;
}