:root {
  --ink: #f5eddc;
  --muted: #b9b09f;
  --green-950: #03140f;
  --green-900: #071f18;
  --green-800: #0d3025;
  --gold: #d6a84e;
  --gold-soft: #ecd596;
  --line: rgba(236, 213, 150, 0.22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(44, 107, 74, 0.2), transparent 32rem),
    linear-gradient(155deg, var(--green-900), var(--green-950) 62%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}

a { color: inherit; }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.25rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  color: var(--gold-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-decoration: none;
}

nav { display: flex; gap: clamp(1.1rem, 3vw, 2.5rem); }
nav a {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
}
nav a:hover, nav a:focus-visible { color: var(--gold-soft); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  min-height: 100svh;
  padding: 8rem clamp(1.25rem, 7vw, 7rem) 5rem;
  overflow: hidden;
}

.hero-copy, .hero-mark { position: relative; z-index: 2; }

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }

h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(4rem, 9vw, 8.2rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.85;
}

h1 em { color: var(--gold-soft); font-weight: 400; }

.lede {
  max-width: 38rem;
  margin: 2rem 0 2.25rem;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.7;
}

.button {
  display: inline-block;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

.button:hover, .button:focus-visible { background: var(--gold); color: var(--green-950); }

.hero-mark { display: grid; place-items: center; }
.hero-mark img {
  display: block;
  width: min(100%, 42rem);
  height: auto;
  filter: drop-shadow(0 2.5rem 4rem rgba(0, 0, 0, 0.42));
}

.glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(3px);
  opacity: 0.4;
}
.glow-one { right: -14rem; top: 4rem; width: 42rem; height: 42rem; background: rgba(88, 142, 77, 0.14); }
.glow-two { right: 22%; bottom: -18rem; width: 34rem; height: 34rem; background: rgba(214, 168, 78, 0.08); }

.section { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 7vw, 7rem); }

.music { border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.1); }
.music h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.sound-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(3rem, 7vw, 6rem);
  background: var(--line);
  border: 1px solid var(--line);
}

.sound-grid article { padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--green-950); }
.sound-grid span { color: var(--gold); font-family: Georgia, serif; font-size: 0.85rem; }
.sound-grid h3 { margin: 2.5rem 0 1rem; font-size: 1.65rem; font-weight: 400; }
.sound-grid p { margin: 0; color: var(--muted); line-height: 1.7; }

.music-players {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.player-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  background: rgba(13, 48, 37, 0.5);
}

.player-card button {
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-soft);
  background: transparent;
  font-size: 0.9rem;
  opacity: 0.75;
}

.player-card span,
.player-card > p {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.player-card h3 { margin: 0.2rem 0 0; font-size: 1.2rem; font-weight: 400; }
.player-card > p { margin: 0; color: var(--muted); }

.shows {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 8rem);
  border-top: 1px solid var(--line);
}

.shows-intro h2 {
  margin: 0;
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.shows-intro > p:last-child {
  margin-top: 1.75rem;
  color: var(--gold-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.show-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  list-style: none;
}

.show-list li {
  min-height: 10rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.show-list time {
  display: grid;
  place-content: center;
  height: 100%;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 0.9;
  text-align: center;
}

.show-list span,
.show-list small {
  color: var(--gold);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1;
  text-transform: uppercase;
}

.show-list span { margin-bottom: 0.7rem; }
.show-list small { margin-top: 0.75rem; color: var(--muted); }

.gallery { border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.12); }
.gallery h2 {
  margin: 0;
  font-size: clamp(2.8rem, 5.5vw, 5.7rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 1fr;
  grid-template-rows: 16rem 16rem;
  gap: 0.8rem;
  margin-top: clamp(3rem, 7vw, 6rem);
}

.gallery-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 14rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, transparent 20%, rgba(3, 20, 15, 0.9)),
    radial-gradient(circle at 65% 25%, rgba(214, 168, 78, 0.25), transparent 35%),
    linear-gradient(135deg, #174c38, #071f18 58%, #020c09);
  overflow: hidden;
}

.gallery-placeholder::before {
  content: "♩";
  position: absolute;
  top: 1rem;
  right: 1.3rem;
  color: rgba(236, 213, 150, 0.28);
  font-family: Georgia, serif;
  font-size: 5rem;
}

.gallery-placeholder span { font-family: Georgia, serif; font-size: 1.35rem; }
.gallery-placeholder small { margin-top: 0.45rem; color: var(--gold); letter-spacing: 0.13em; text-transform: uppercase; }
.gallery-wide { grid-row: 1 / 3; }
.gallery-tall { grid-row: 1 / 3; }

.about {
  max-width: 64rem;
  margin: auto;
  text-align: center;
}
.about-rule { display: flex; align-items: center; gap: 1rem; margin-bottom: 4rem; color: var(--gold); }
.about-rule::before, .about-rule::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.about h2 { margin: 0; color: var(--gold-soft); font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 400; letter-spacing: -0.045em; }
.about > p:not(.eyebrow):not(.domain) { margin: 1.5rem auto; max-width: 48rem; color: var(--muted); font-family: Georgia, serif; font-size: clamp(1.1rem, 2.1vw, 1.5rem); line-height: 1.7; }
.booking { margin: 3rem auto 0; }
.booking span { display: block; margin-bottom: 0.65rem; color: var(--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.booking a { color: var(--gold-soft); font-family: Georgia, serif; font-size: clamp(1.25rem, 3vw, 2rem); text-underline-offset: 0.25em; }
.domain { margin-top: 3rem; color: var(--gold); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
footer a { text-underline-offset: 0.2em; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 9rem; text-align: center; }
  h1 { margin-inline: auto; font-size: clamp(4rem, 18vw, 6.5rem); }
  .lede { margin-inline: auto; }
  .hero-mark { grid-row: 1; }
  .hero-mark img { width: min(82vw, 29rem); }
  .sound-grid { grid-template-columns: 1fr; }
  .shows { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery-wide, .gallery-tall { grid-row: auto; }
}

@media (max-width: 520px) {
  .site-header { justify-content: center; }
  nav { display: none; }
  .hero { gap: 1rem; }
  .show-list { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
  .player-card { grid-template-columns: auto 1fr; }
  .player-card > p { grid-column: 2; }
  footer { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.gallery-intro {color:var(--muted);line-height:1.7;margin:1.5rem 0 0;max-width:40rem}
.gallery-grid {grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;align-items:start;margin-top:2.5rem;gap:1.5rem}
.gallery-photo {display:block;text-decoration:none;border:1px solid var(--line);background:var(--green-950)}
.gallery-photo figure {margin:0}.gallery-photo img {display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 35%}
.gallery-photo:nth-child(2) img,.gallery-photo:nth-child(4) img,.gallery-photo:nth-child(5) img,.gallery-photo:nth-child(6) img {aspect-ratio:4/3}
.gallery-photo figcaption {display:flex;justify-content:space-between;padding:1rem;font-family:Georgia,serif;color:var(--gold-soft);line-height:1.4}
.gallery-photo:hover,.gallery-photo:focus-visible {outline:2px solid var(--gold);outline-offset:4px}
#photo-viewer {padding:3.5rem 1rem 1rem;border:1px solid var(--line);background:var(--green-950);color:var(--ink);max-width:95vw;max-height:95dvh;width:fit-content}
#photo-viewer::backdrop {background:rgba(0,0,0,.9)}
#photo-viewer figure {margin:0;text-align:center}#photo-viewer img {display:block;max-width:85vw;max-height:70dvh;width:auto;height:auto;margin:auto;object-fit:contain}
#photo-viewer figcaption {padding:1rem;color:var(--gold-soft)}
#photo-viewer button {background:transparent;color:var(--gold-soft);border:1px solid var(--line);padding:.7rem 1rem;cursor:pointer;font:inherit}
.viewer-close {position:absolute;right:.7rem;top:.5rem}.viewer-controls {display:flex;justify-content:space-between;gap:2rem}
body:has(#photo-viewer[open]) {overflow:hidden}
@media(max-width:1000px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.gallery-grid{gap:1rem}.gallery-photo figcaption{font-size:.85rem;padding:.7rem}.gallery-photo img{aspect-ratio:3/4}}

.gallery-mobile-controls{display:none}
@media(max-width:600px){
.gallery-grid {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding:4px 4px 1rem;margin-left:-4px;margin-right:-1.25rem;scroll-padding-left:4px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.gallery-photo {flex:0 0 82%;scroll-snap-align:start}
.gallery-grid .gallery-photo img {aspect-ratio:4/5;object-fit:cover;object-position:center 35%}
.gallery-photo figcaption{font-size:1rem;padding:1rem}
.gallery-mobile-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;color:var(--gold-soft)}
.gallery-mobile-controls button{border:1px solid var(--line);background:transparent;color:var(--gold-soft);width:3rem;height:3rem;font-size:1.4rem;cursor:pointer}
.gallery-mobile-controls span{font-size:.8rem;letter-spacing:.15em}
}
.about {text-align:left}
.about > p:not(.eyebrow):not(.domain) {max-width:none;margin:1.5rem 0}
.booking {margin:3rem 0 0}
@media(max-width:600px){.gallery-grid .gallery-photo img{object-fit:contain;background:#03140f}}

.show-list {grid-template-columns:1fr}
.show-list li {display:grid;grid-template-columns:6rem 1fr;align-items:center;gap:1.5rem;min-height:8rem;padding:1rem}
.show-list time {font-size:2.7rem}.show-details strong{font-family:Georgia,serif;font-size:1.25rem;font-weight:400;color:var(--gold-soft)}
.show-details p{margin:.5rem 0 0;color:var(--muted);font-size:.85rem;line-height:1.5}
.show-list[hidden],.show-list li[hidden],#no-shows[hidden]{display:none}
#no-shows{align-self:start;color:var(--muted);line-height:1.7}
@media(max-width:520px){.site-header{justify-content:flex-start}.show-list li{grid-template-columns:4rem 1fr;gap:1rem}}

@media(min-width:601px){
.gallery-grid{align-items:stretch}
.gallery-grid .gallery-photo img{aspect-ratio:4/3;object-fit:cover;object-position:center 30%}
}

.member-bio{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.member-bio h3{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:400;color:var(--gold-soft);margin:0 0 1.5rem}
.member-bio>p:not(.eyebrow){font-family:Georgia,serif;font-size:clamp(1.1rem,2.1vw,1.5rem);line-height:1.7;color:var(--muted)}

@media(min-width:601px){.gallery-photo:first-child img{object-position:center 15%}}