/* ==========================================================================
   Jeffrey River — River & Meadow Design System
   Editorial folk aesthetic · floating color blocks · generous whitespace
   ========================================================================== */

:root {
  /* Accent palette — small color blocks, not full backgrounds */
  --sage:         #6F7F76;   /* Dusty meadow green */
  --river:        #7A8C99;   /* Faded river blue */
  --sand:         #A89F95;   /* Warm stone — matches about page accent */
  --misty:        #7FA3B5;   /* Misty blue — light accent */
  --moss:         #9CAF9A;   /* Dusty sage green */
  --warmgrey:     #A89F95;   /* Warm stone pastel — about page accent */

  /* Darker accents for text */
  --bark:         #3A302A;   /* Aged leather — muted deep brown */
  --bark-mid:     #6b4c34;   /* Mid bark */
  --leather:      #3A302A;   /* Aged leather — same as bark */
  --river-dark:   #4A6A78;
  --sage-deep:    #4E5E52;
  --heading:      #3A302A;   /* Aged leather — same as bark/leather */

  /* Backgrounds — clean and crisp */
  --paper:        #F6F3F1;   /* Main bg — warm off-white matching parchment */
  --white:        #FFFFFF;
  --parchment:    #F2EFED;   /* Subtle warm white for sections */
  --card-bg:      #F8F6F5;   /* Card backgrounds — warm white */
  --charcoal:     #2E2E2A;
  --ash:          #8A8F8C;

  /* Typography */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hand:    "Caveat", "Brush Script MT", cursive;

  /* Layout */
  --max-width: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 6px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--paper) url('../img/parchment-bg.jpg') repeat center top;
  background-size: 100% auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--river-dark); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--bark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--heading);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

/* ---------- Layout ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: transparent;
}
.text-center { text-align: center; }

/* ---------- Floating Color Blocks ----------
   Small colored rectangles offset behind elements.
   Used as accents — NOT full-width backgrounds.
   -------------------------------------------- */
.color-block {
  position: relative;
  z-index: 0;
}
.color-block::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--radius);
}
/* Variants */
.color-block--sage::before   { background: var(--sage); }
.color-block--clay::before   { background: var(--warmgrey); }
.color-block--river::before  { background: var(--river); }
.color-block--sand::before   { background: var(--sand); }
.color-block--moss::before    { background: var(--moss); }
.color-block--leather::before  { background: var(--leather); }
.color-block--warmgrey::before { background: var(--warmgrey); }

/* Block behind headings — small accent rectangle */
.color-block--heading::before {
  width: 60px;
  height: 8px;
  bottom: -4px;
  left: 0;
}
.color-block--heading-center::before {
  width: 60px;
  height: 8px;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* Block behind images — offset rectangle */
.color-block--image::before {
  width: 85%;
  height: 85%;
  top: -16px;
  left: -16px;
}
.color-block--image-right::before {
  width: 85%;
  height: 85%;
  top: -16px;
  right: -16px;
  left: auto;
}

/* Block behind cards — subtle offset tile */
.color-block--card::before {
  width: 100%;
  height: 100%;
  top: 8px;
  left: 8px;
  border-radius: var(--radius-lg);
}

/* ---------- Eyebrow (handwritten label) ---------- */
.eyebrow {
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--sage-deep);
  display: inline-block;
  margin-bottom: 0.25em;
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 1.5em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .25s var(--ease);
  text-align: center;
}
.btn--primary {
  background: var(--charcoal);
  color: var(--white);
  border-color: var(--charcoal);
}
.btn--primary:hover {
  background: var(--bark-mid);
  border-color: var(--bark-mid);
  transform: translateY(-1px);
}
.btn--outline {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn--outline:hover {
  background: var(--charcoal);
  color: var(--white);
}
/* Ghost style for cards */
.btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
  font-size: 0.85rem;
  padding: 0.65em 1.2em;
}
.btn--ghost:hover {
  background: var(--charcoal);
  color: var(--white);
}

/* ---------- Social icon bar (top slim strip) ---------- */
.social-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
  background: var(--charcoal);
}
.social-bar a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  transition: all .2s var(--ease);
}
.social-bar a:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
}
.social-bar svg { width: 14px; height: 14px; fill: rgba(255,255,255,0.7); }
.social-bar a:hover svg { fill: var(--white); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nav__brand img {
  height: 72px;
  width: auto;
}
.nav__brand span { color: var(--river-dark); }
/* Guitar pick nav tabs — top half of a pick shape */
.nav__links {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: flex-end;
}
.nav__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  width: 58px;
  height: 62px;
  padding-bottom: 6px;
  background: var(--sage);
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  text-align: center;
  line-height: 1.2;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 76'%3E%3Cpath d='M28 76 L44 76 C46 70 52 60 57 50 C62 40 66 30 68 22 C69 15 67 9 62 5 C57 1 50 0 36 0 C22 0 15 1 10 5 C5 9 3 15 4 22 C6 30 10 40 15 50 C20 60 26 70 28 76Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 76'%3E%3Cpath d='M28 76 L44 76 C46 70 52 60 57 50 C62 40 66 30 68 22 C69 15 67 9 62 5 C57 1 50 0 36 0 C22 0 15 1 10 5 C5 9 3 15 4 22 C6 30 10 40 15 50 C20 60 26 70 28 76Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  border-radius: 0;
}
.nav__links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  color: var(--white);
}
/* Per-page pick colors */
.nav__links li:nth-child(1) a { background: var(--sage); }       /* Home = sage */
.nav__links li:nth-child(2) a { background: var(--river); }      /* Music = river blue */
.nav__links li:nth-child(3) a { background: var(--warmgrey); }   /* About = warm grey */
.nav__links li:nth-child(4) a { background: var(--leather); }    /* Gigs = leather */
.nav__links li:nth-child(5) a { background: var(--moss); }       /* Merch = moss */
/* Active state — lift + stronger shadow */
.nav__links a.active {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
/* Hover brightness */
.nav__links li:nth-child(1) a:hover { background: #5D6D64; }
.nav__links li:nth-child(2) a:hover { background: #677C89; }
.nav__links li:nth-child(3) a:hover { background: #746B63; }
.nav__links li:nth-child(4) a:hover { background: #3A2520; }
.nav__links li:nth-child(5) a:hover { background: #728A6C; }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  margin: 5px 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

@media (max-width: 768px) {
  .nav__toggle { display: block; }
  .nav__brand img { height: 56px; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem var(--gutter);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all .3s var(--ease);
  }
  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links li {
    padding: 0;
  }
  .nav__links a {
    width: 48px;
    height: 52px;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    padding-bottom: 4px;
  }
}

/* ---------- Hero (photo-based, left-aligned) ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--charcoal);
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  opacity: 0.88;
  filter: saturate(1.05);
}
.hero--placeholder {
  background: linear-gradient(135deg, #C3CFC6 0%, #B5C4CE 50%, #D5CEC4 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(248,247,244,0.2) 0%, rgba(248,247,244,0.03) 50%, transparent 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding: 4rem var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.hero h1 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1.02;
  margin-bottom: 0.4rem;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
  max-width: 600px;
}
.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.9);
  max-width: 480px;
  margin: 1.25rem 0 2.5rem;
  line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0,0,0,0.2);
}
/* Small accent block — hidden with photo hero */
.hero__accent {
  display: none;
}
.hero__cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero__cta .btn--primary {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
  backdrop-filter: blur(4px);
}
.hero__cta .btn--primary:hover {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--white);
}
.hero__cta .btn--outline {
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.hero__cta .btn--outline:hover {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--white);
}

@media (max-width: 768px) {
  .hero { min-height: 70vh; }
  .hero__accent { display: none; }
}

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  padding: 0;
  text-align: center;
  background: var(--sage);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.page-header .container {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) clamp(1rem, 3vw, 1.5rem);
}
.page-header h1 { margin-bottom: 0.25em; color: var(--white); }
.page-header .eyebrow { color: rgba(255,255,255,0.8); }
.page-header p {
  color: rgba(255,255,255,0.85);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1rem;
}
/* Page header photo — full-width below the text */
.page-header__photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
/* Per-page header colors matching guitar pick */
.page-music .page-header { background: var(--river); }
.page-about .page-header { background: var(--warmgrey); }
.page-gigs .page-header  { background: var(--leather); }
.page-merch .page-header  { background: var(--moss); }

/* ---------- Photo Spot — asymmetric image/text rows ---------- */
.photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.photo-row--reverse { direction: rtl; }
.photo-row--reverse > * { direction: ltr; }
.photo-row__image {
  position: relative;
  z-index: 0;
  border-radius: var(--radius-lg);
}
.photo-row__image img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.photo-row__image--portrait img {
  aspect-ratio: 3 / 4;
}
.photo-row__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ash);
  font-size: 0.85rem;
  font-style: italic;
  aspect-ratio: 3 / 2;
}
.photo-row__text {
  padding: 1rem 0;
}
.photo-row__text h2 { margin-bottom: 0.75rem; }
@media (max-width: 768px) {
  .photo-row, .photo-row--reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* ---------- Photo Banner — full-width image with offset text card ---------- */
.photo-banner {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.photo-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.photo-banner__img--placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--ash);
  font-size: 0.9rem;
  font-style: italic;
  z-index: 0;
}
.photo-banner__card {
  position: relative;
  z-index: 1;
  background: rgba(168, 159, 149, 0.90);
  color: var(--white);
  max-width: 480px;
  margin-left: auto;
  margin-right: clamp(2rem, 6vw, 6rem);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
}
.photo-banner__card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 10px;
  right: -10px;
  bottom: 10px;
  background: var(--misty);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.photo-banner__card h2 {
  color: var(--white);
  margin-bottom: 0.75rem;
}
.photo-banner__card .eyebrow {
  color: rgba(255,255,255,0.7);
}
.photo-banner__card p {
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .photo-banner {
    min-height: auto;
    flex-direction: column;
  }
  .photo-banner__img,
  .photo-banner__img--placeholder {
    position: relative;
    height: 260px;
  }
  .photo-banner__card {
    margin: -2rem 1rem 2rem;
    max-width: none;
  }
}

/* ---------- Section Dividers ---------- */
.divider {
  width: 60px;
  height: 3px;
  background: var(--sage);
  margin: 1.25rem auto;
  border: 0;
}
.divider--left {
  margin-left: 0;
  margin-right: auto;
}

/* ---------- Cards & Grid ---------- */
.grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 4px solid var(--sage);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Per-page card accent colors */
.page-music .card  { border-left-color: var(--river); }
.page-about .card  { border-left-color: var(--misty); }
.page-gigs .card   { border-left-color: var(--leather); }
.page-merch .card  { border-left-color: var(--moss); }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.06);
}
.card h3 {
  color: var(--heading);
  margin-bottom: 0.5em;
}

/* ---------- Music Player ---------- */
.player {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 4px solid var(--river);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 600px;
  position: relative;
}
.player__art {
  width: 100px;
  height: 100px;
  border-radius: var(--radius);
  background: var(--sand);
  display: grid;
  place-items: center;
  color: var(--bark-mid);
  font-family: var(--font-hand);
  font-size: 1.3rem;
  flex-shrink: 0;
  text-align: center;
}
.player__info { flex: 1; min-width: 0; }
.player__info h3 { margin: 0 0 0.2em; color: var(--charcoal); font-size: 1.15rem; }
.player__info p { margin: 0; color: var(--ash); font-size: 0.9rem; }
.player__btn {
  background: var(--charcoal);
  color: var(--white);
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: transform .2s var(--ease), background .2s var(--ease);
  flex-shrink: 0;
}
.player__btn:hover {
  background: var(--sage-deep);
  transform: scale(1.06);
}

@media (max-width: 520px) {
  .player { flex-direction: column; text-align: center; }
  .player__info { width: 100%; }
}

/* ---------- Split / Asymmetric Layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse {
  grid-template-columns: 1.25fr 1fr;
}
.split__image {
  position: relative;
}
.split__image-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.split__image-frame img {
  width: 100%;
  display: block;
}
/* Placeholder for image */
.split__image-placeholder {
  background: var(--sand);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  color: var(--ash);
  font-family: var(--font-hand);
  font-size: 1.4rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.split__text p { font-size: 1.05rem; line-height: 1.75; }
@media (max-width: 768px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
}

/* ---------- Quote / Visual Break ---------- */
.quote-break {
  padding: clamp(3rem, 8vw, 5rem) 0;
  text-align: center;
  position: relative;
}
.quote-break__block {
  background: var(--river);
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
}
.quote-break__text {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-style: italic;
  color: var(--white);
  line-height: 1.5;
  margin: 0;
}
.quote-break__attr {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-top: 1rem;
  letter-spacing: 0.05em;
}

/* ---------- Email signup ---------- */
.signup {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}
.signup h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 0.25em;
  color: var(--misty);
}
.signup p { color: var(--ash); margin-bottom: 1.5rem; font-size: 0.95rem; }
.signup__form {
  display: flex;
  gap: 0.75rem;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.signup__form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 0.8em 1em;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  transition: border-color .2s var(--ease);
}
.signup__form input[type="email"]:focus {
  outline: none;
  border-color: var(--misty);
}

/* ---------- Bio / About ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about__image {
  background: var(--sand);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  color: var(--ash);
  font-family: var(--font-hand);
  font-size: 1.5rem;
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}
.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.about__body p { font-size: 1.05rem; line-height: 1.75; }
@media (max-width: 768px) {
  .about { grid-template-columns: 1fr; }
}

/* ---------- Forms ---------- */
.form {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form__field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 0.4em;
}
.form__field input,
.form__field textarea,
.form__field select {
  width: 100%;
  padding: 0.75em 1em;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  transition: border-color .2s var(--ease);
}
.form__field textarea { min-height: 140px; resize: vertical; }
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
  outline: none;
  border-color: var(--sage);
}
@media (max-width: 600px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- Gigs list ---------- */
.gigs { list-style: none; padding: 0; margin: 0; }
.gig {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.gig:last-child { border-bottom: 0; }
.gig__date {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--river-dark);
  min-width: 110px;
}
.gig__date span {
  display: block;
  font-size: 0.85rem;
  color: var(--ash);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-body);
}
.gig__details h3 { margin: 0 0 0.2em; font-size: 1.1rem; }
.gig__details p { margin: 0; color: var(--ash); font-size: 0.95rem; }
.gig__action .btn { font-size: 0.8rem; padding: 0.55em 1em; }

.gigs--empty {
  text-align: center;
  padding: 3rem 1rem;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  color: var(--ash);
}
.gigs--empty h3 { color: var(--charcoal); }
.gigs--empty p { margin: 0.5em 0; }

@media (max-width: 640px) {
  .gig { grid-template-columns: 1fr; gap: 0.5rem; }
  .gig__action { justify-self: start; }
}

/* ---------- Merch ---------- */
.merch-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.merch-item {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  border-top: 3px solid var(--misty);
  position: relative;
}
.merch-item__image {
  aspect-ratio: 1;
  background: var(--sand);
  display: grid;
  place-items: center;
  color: var(--ash);
  font-family: var(--font-hand);
  font-size: 1.4rem;
  text-align: center;
  padding: 1rem;
}
.merch-item__body { padding: 1.25rem 1.5rem 1.5rem; }
.merch-item__body h3 { font-size: 1.05rem; margin-bottom: 0.25em; }
.merch-item__body .price { color: var(--river-dark); font-weight: 500; font-size: 1.05rem; }
.merch-item__body .coming-soon {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--misty);
  background: rgba(127, 163, 181, 0.12);
  padding: 0.25em 0.8em;
  border-radius: 999px;
  margin-top: 0.5em;
}

/* ---------- Press / EPK ---------- */
.epk {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
}
.epk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.epk-stat { text-align: center; padding: 1rem; }
.epk-stat__value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--river-dark);
  line-height: 1;
  margin-bottom: 0.25em;
}
.epk-stat__label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}
.epk .card .btn,
.epk .card a.btn {
  font-size: 0.72rem;
  padding: 0.6em 1em;
  word-break: break-all;
  max-width: 100%;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.7);
  padding: 3.5rem 0 1.5rem;
  border-top: 3px solid var(--misty);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}
.footer-grid h4 {
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-grid a { color: rgba(255,255,255,0.6); font-size: 0.95rem; }
.footer-grid a:hover { color: var(--white); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { margin-bottom: 0.5em; }
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 0.5em;
}
.footer__tag {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--sage);
}
.social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.social a:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}
.social svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.5); }
.social a:hover svg { fill: var(--white); }
.footer__base {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Utilities ---------- */
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }

/* Section-level color block backgrounds — for non-home pages */
.section--sage-bg   { background: var(--sage); color: var(--white); }
.section--sage-bg h2, .section--sage-bg h3 { color: var(--white); }
.section--river-bg  { color: var(--heading); }
.section--river-bg h2, .section--river-bg h3 { color: var(--heading); }
.section--sand-bg   { background: var(--sand); }
.section--parchment { background: transparent; }

/* River silhouette background — wavy river-edge wash */
.section--river-bg {
  position: relative;
  overflow: hidden;
}
/* Main river wash — curved top & bottom edges */
.section--river-bg::before {
  content: "";
  position: absolute;
  inset: -40px -20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 500' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C200 20, 400 80, 700 50 C1000 20, 1200 70, 1400 40 L1400 440 C1200 470, 1000 410, 700 450 C400 490, 200 420, 0 460 Z' fill='%237A8C99' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}
/* Secondary thinner river line for depth */
.section--river-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 400' preserveAspectRatio='none'%3E%3Cpath d='M-20 200 C80 160, 180 280, 300 220 C420 160, 480 300, 620 240 C760 180, 820 320, 960 250 C1100 180, 1160 310, 1300 230 C1380 190, 1420 260, 1440 240' fill='none' stroke='%237A8C99' stroke-width='60' stroke-linecap='round' opacity='0.12'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}
.section--river-bg > * {
  position: relative;
  z-index: 1;
}

/* ---------- Accent Block — partial colored panel behind content ---------- */
.section--accent-block {
  position: relative;
  overflow: hidden;
}
.section--accent-block::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 0;
  width: 75%;
  background: var(--sage);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}
.section--accent-block > * {
  position: relative;
  z-index: 1;
}
/* Per-page accent block colors + opacities */
.page-about .section .eyebrow { color: var(--misty); }
.page-about .divider { background: var(--misty); }
.page-about .epk-stat__value { color: var(--misty); }
.page-about .section--accent-block::before { background: var(--warmgrey); opacity: 0.75; }
.page-gigs  .section--accent-block::before { background: var(--sage); opacity: 0.75; }
.page-merch .section--accent-block::before { background: var(--moss); opacity: 0.75; }
/* Keep dark text on accent blocks so it reads over the exposed white edge */
/* Reversed variant — panel from the right */
.section--accent-block--right::before {
  left: auto;
  right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}