/* Brand colors — from Brand Basics v1 */
:root {
  --ground:     #17100e;  /* every dark background */
  --panel:      #221713;  /* cards, list rows */
  --music:      #2a5b5b;  /* music fills, rules, borders */
  --music-tint: #4d9b93;  /* music small type */
  --comedy:     #d9932c;  /* comedy accent + all calls to action */
  --bone:       #efe6d8;  /* primary text */
  --dust:       #9c8a80;  /* secondary text, times, captions */
  --rule:       #33241f;  /* borders and dividers only */

  /* Not in the brand guide — used on the site, pending a decision */
  --comedy-deep: #6e4a1c; /* comedy borders */
  --bone-soft:   #cfc0b3; /* body paragraphs */
  --bone-muted:  #b8a79a; /* secondary paragraphs */
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); font-family: 'Spline Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--music-tint); text-decoration: none; }
a:hover { color: var(--comedy); }
img { display: block; }
input:focus, button:focus { outline: 2px solid var(--comedy); outline-offset: 2px; }

/* Page wrapper — stacks and centers the sections */
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }

/* Page sections — centered, max 1240px wide */
.section {
  width: 100%;
  max-width: 1240px;
  padding: 54px 28px 0;
  box-sizing: border-box;
}
.section-hero { padding-top: 34px; }

/* Site header */
.site-header { width: 100%; border-bottom: 1px solid var(--rule); }
.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}

/* Wordmark lockup — the primary mark; add .music or .comedy to .lockup-sub */
.lockup { display: flex; flex-direction: column; gap: 6px; color: inherit; }
.wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  line-height: 0.82;
  letter-spacing: 0.02em;
  color: var(--bone);
}
.wordmark-small { font-size: 24px; }
.lockup-sub { display: flex; align-items: center; gap: 9px; }
.lockup-rule { width: 40px; height: 2px; background: var(--accent-bar, var(--rule)); }
.lockup-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dust);
}

/* Main navigation */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: baseline;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav a { color: var(--accent, var(--bone)); }
.site-nav a:hover { color: var(--comedy); }

/* Hero row — promo panel beside the show list */
.hero { display: flex; flex-wrap: wrap; gap: 26px; }

/* "Next up" promo panel — add .music or .comedy to .promo */
.promo { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; }
.promo-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--panel);
}
.promo-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: sepia(0.2) contrast(1.1) brightness(0.86);
}
/* Ground color fading from 95% to 30% to 0% opacity, bottom to top */
.promo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #17100ef2 0%, #17100e4d 48%, #17100e00 100%);
}
.promo-text {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.promo-kicker { display: flex; align-items: center; gap: 8px; }
.promo-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--dust));
}
.promo-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  line-height: 0.95;
  color: var(--bone);
}
.promo-when { font-size: 13px; color: var(--bone-soft); }
/* Call to action — always comedy amber, per the brand guide */
.promo-cta {
  background: var(--comedy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px;
  text-align: center;
}
.promo-cta a { color: var(--ground); text-decoration: underline; }

/* Upcoming shows column */
.shows { flex: 2 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.shows-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}
.legend { display: flex; gap: 16px; align-items: center; }
.legend-item {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, var(--dust));
}
.show-list { display: flex; flex-direction: column; gap: 9px; }
.shows-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-top: 6px; }
.shows-foot-note { font-size: 12px; color: var(--dust); }

/* Small uppercase text link, e.g. "Booking →" */
.cta-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--comedy);
}

/* Section headings — Bebas, brand "Section head" size */
.section-head {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.05em;
  color: var(--bone);
}

/* Sub-identity accents — add .music or .comedy to an element */
.music  { --accent: var(--music-tint); --accent-line: var(--music);       --accent-bar: var(--music); }
.comedy { --accent: var(--comedy);     --accent-line: var(--comedy-deep); --accent-bar: var(--comedy); }
.muted  { --accent: var(--dust);       --accent-line: var(--rule);        --accent-bar: var(--rule); }

/* Small bordered labels */
.chip {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  color: var(--accent, var(--dust));
  border: 1px solid var(--accent-line, var(--rule));
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* The Music / The Comedy — two mirrored columns; add .music or .comedy to .career */
.careers { display: flex; flex-wrap: wrap; gap: 26px; }
.career { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.career-head { display: flex; align-items: center; gap: 11px; }
.career-rule { height: 2px; background: var(--accent-bar, var(--rule)); }
.career-text { font-size: 15px; line-height: 1.65; color: var(--bone-soft); text-wrap: pretty; }
.career-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--panel);
  margin-top: 4px;
}
/* Crop (object-position) is set per photo in the HTML */
.career-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.2) contrast(1.08) brightness(0.9);
}

/* Section content with a divider line above it */
.section-divided { border-top: 1px solid var(--rule); padding-top: 34px; }

/* Listen — video beside streaming links */
.listen { display: flex; flex-wrap: wrap; gap: 26px; }
.listen-video { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--panel); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.listen-links {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
}
.listen-note { font-size: 14px; line-height: 1.6; color: var(--bone-muted); text-wrap: pretty; }

/* Streaming link rows — colors come from the surrounding accent */
.stream-link {
  background: var(--panel);
  border-left: 3px solid var(--accent-bar, var(--rule));
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--bone);
}
.stream-name { font-size: 15px; font-weight: 500; }
.stream-action {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, var(--dust));
}

/* Text styles — named after the brand type scale */
.lead { font-size: 17px; line-height: 1.6; color: var(--bone); text-wrap: pretty; }
.body-text { font-size: 15px; line-height: 1.7; color: var(--bone-muted); text-wrap: pretty; }

/* About — heading beside the bio */
.about { display: flex; flex-wrap: wrap; gap: 40px; }
.about-head { flex: 0 0 auto; }
.about-body {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Booking + The List — two boxes side by side */
.booking { display: flex; flex-wrap: wrap; gap: 26px; }
.box {
  flex: 1 1 380px;
  min-width: 0;
  box-sizing: border-box;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.box-filled { background: var(--panel); }
.box-outline { border: 1px solid var(--rule); }
.box-text { font-size: 14px; line-height: 1.65; color: var(--bone-muted); text-wrap: pretty; }
.contact-list { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.contact-link { display: flex; gap: 11px; align-items: center; font-size: 15px; color: var(--bone); }

/* Mailing-list signup form */
.signup { display: flex; flex-wrap: wrap; }
.signup input {
  flex: 1 1 200px;
  font: inherit;                     /* form controls don't inherit the page font by default */
  font-size: 15px;
  padding: 14px 16px;
  background: var(--ground);
  color: var(--bone);
  border: 1px solid var(--rule);
}
.signup input::placeholder { color: var(--dust); }
.signup button {
  font: inherit;
  font-size: 11px;
  font-weight: 600;                  /* the brand reserves 600 for buttons */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 22px;
  background: var(--comedy);         /* the single call-to-action color */
  color: var(--ground);
  border: 0;
  cursor: pointer;
}

/* Show cards — add .music or .comedy to the card */
.show {
  border-left: 3px solid var(--accent-bar, var(--rule));
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  justify-content: space-between;
}
.show:nth-child(even) { background: var(--panel); }

.show-main {
  flex: 1 1 0;
  display: flex;
  gap: 20px;
  align-items: baseline;
  min-width: 0;
}
.show-date {
  flex: 0 0 auto;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  line-height: 0.9;
  color: var(--accent, var(--bone));
}
.show-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.show-title { font-size: 16px; font-weight: 500; color: var(--bone); text-wrap: pretty; }
.show-details { font-size: 12px; color: var(--dust); }
.show-tag { font-weight: 600; padding: 9px 14px; }

/* Site footer */
.site-footer { width: 100%; margin-top: 54px; border-top: 1px solid var(--rule); }
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
  justify-content: space-between;
}
.footer-mark { display: flex; align-items: flex-end; gap: 16px; }
.footer-icons { display: flex; gap: 9px; padding-bottom: 3px; }
.footer-note {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dust);
}