:root{
  --ink:#1D1A21;
  --ink-2:#272230;
  --ink-3:#332C3C;
  --paper:#F3F0E9;
  --paper-2:#E7E1D6;
  --paper-3:#D8D0C2;
  --rubric:#9C2A2A;
  --rubric-lift:#C4574F;
  --brass:#A8823C;
  --brass-ink:#7D5F26;   /* brass dark enough for small text on paper */
  --brass-lift:#C9A461;
  --text:#241F28;
  --text-soft:#554F5C;
  --text-faint:#5C5566;
  --on-ink:#EDE8E0;
  --on-ink-soft:#A9A1B0;

  --display:"Literata", Georgia, "Times New Roman", serif;
  --body:"Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;

  --measure:33rem;
  --pad:clamp(1.25rem,5vw,3.5rem);

  font-size:18px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:var(--rubric);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ---------- shared type ---------- */
.label{
  font-family:var(--body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0;
}
.label--ink{color:var(--brass-lift)}

h1,h2,h3{font-family:var(--display);font-weight:500;text-wrap:balance;margin:0}
h2{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.08;letter-spacing:-.01em}
h3{font-size:1.35rem;line-height:1.2}
p{margin:0}

.prose{max-width:var(--measure)}
.prose p + p{margin-top:1.1em}

.rule{height:1px;background:var(--paper-3);border:0;margin:0}

/* ---------- layout shells ---------- */
.band{padding:clamp(3.5rem,8vw,6.5rem) var(--pad)}
.wrap{max-width:68rem;margin:0 auto}
.stack{display:flex;flex-direction:column}

/* ---------- hero ---------- */
.overture{
  background:var(--ink);
  color:var(--on-ink);
  padding:clamp(2.5rem,7vw,5.5rem) var(--pad) clamp(3rem,7vw,5rem);
  position:relative;
  overflow:hidden;
}
.overture::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass) 18%,var(--brass) 82%,transparent);
  opacity:.55;
}
.overture__grid{
  max-width:68rem;margin:0 auto;
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr;
  align-items:end;
}
@media (min-width:56rem){
  .overture__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
}

.overture__eyebrow{
  display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;align-items:baseline;
  margin-bottom:clamp(1.75rem,5vw,3rem);
}
.overture__eyebrow span{
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-ink-soft);
}
.overture__eyebrow span + span::before{
  content:"—";margin-right:1.1rem;color:var(--brass);
}

.namebox{display:flex;flex-direction:column;gap:1.4rem}
.name{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.9rem,9.5vw,6rem);
  line-height:.98;
  letter-spacing:-.02em;
  margin:0;
  color:#F6F2EA;
}
.name em{
  display:block;font-style:italic;font-weight:400;
  color:var(--brass-lift);
}
.tagline{
  font-family:var(--display);
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.5;
  color:var(--on-ink);
  max-width:26rem;
  font-style:italic;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.6rem}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--body);font-size:.86rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.85rem 1.4rem;
  border:1px solid var(--brass);
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.btn--solid{background:var(--brass);color:#1D1A21}
.btn--solid:hover{background:var(--brass-lift)}
.btn--ghost{background:transparent;color:var(--brass-lift)}
.btn--ghost:hover{background:rgba(168,130,60,.14)}
.btn--dark{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--ink-3)}
.btn--outline{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn--outline:hover{background:var(--paper-2)}

/* ---------- photo plates ---------- */
.plate{margin:0;max-width:21rem}
.plate img{
  width:100%;
  height:auto;                     /* else the HTML height attr distorts it */
  border:1px solid var(--paper-3);
  padding:.4rem;
  background:var(--paper);
}
.plate--ink img{border-color:rgba(168,130,60,.42);background:var(--ink-2)}
.plate figcaption{
  margin-top:.7rem;
  font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--text-faint);
}
.plate--ink figcaption{color:var(--on-ink-soft)}

/* ---------- about ---------- */
.about{background:var(--paper)}
.about__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr}
@media (min-width:56rem){
  .about__grid{grid-template-columns:14rem minmax(0,1fr)}
}
.about p{font-size:1.05rem}
.pull{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.4rem,3vw,1.85rem);
  line-height:1.4;
  color:var(--rubric);
  margin:0;
  max-width:24rem;
}

/* ---------- programs ---------- */
.programs{background:var(--paper-2)}
.programs__list{
  display:grid;gap:0;grid-template-columns:1fr;
  margin-top:clamp(2rem,5vw,3rem);
  border-top:1px solid var(--paper-3);
}
.program{
  display:grid;gap:.5rem 2rem;
  grid-template-columns:1fr;
  padding:1.9rem 0;
  border-bottom:1px solid var(--paper-3);
}
@media (min-width:48rem){
  .program{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:start}
}
.program__meta{display:flex;flex-direction:column;gap:.35rem}
.program__len{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--brass-ink)}
.program p{color:var(--text-soft);max-width:38rem}

/* ---------- testimony ---------- */
.testimony{background:var(--ink);color:var(--on-ink)}
.testimony h2{color:#F6F2EA}
.testimony__cols{
  display:grid;gap:clamp(2.5rem,6vw,4rem);
  grid-template-columns:1fr;
  margin-top:clamp(2.25rem,5vw,3.25rem);
}
@media (min-width:56rem){
  .testimony__cols{grid-template-columns:1fr 1fr}
}
.col{display:flex;flex-direction:column;gap:1.9rem}
.col__head{
  display:flex;flex-direction:column;gap:.4rem;
  padding-bottom:.9rem;border-bottom:1px solid rgba(168,130,60,.35);
}
.col__head h3{color:var(--brass-lift);font-style:italic}
figure.quote{margin:0;display:flex;flex-direction:column;gap:.85rem}
figure.quote blockquote{
  margin:0;
  max-width:36rem;
  font-family:var(--display);
  font-size:1.08rem;line-height:1.68;
  color:#E8E2D9;
}
figure.quote figcaption{
  font-size:.85rem;line-height:1.55;color:var(--on-ink-soft);
  padding-left:.9rem;border-left:2px solid var(--rubric-lift);
}
figure.quote figcaption strong{
  display:block;color:var(--on-ink);font-weight:700;
  letter-spacing:.04em;
}

/* ---------- mission ---------- */
.mission{background:var(--paper)}
.mission__head{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:56rem){.mission__head{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}}
.countries{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;padding:0;list-style:none;
}
.countries li{
  font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-soft);
  border:1px solid var(--paper-3);
  padding:.45rem .75rem;
}
.plates{
  display:flex;flex-wrap:wrap;gap:clamp(1.25rem,3vw,2rem);
  margin-top:clamp(2.25rem,5vw,3.25rem);
}
.plates .plate{max-width:20rem;flex:1 1 15rem}

/* ---------- booking ---------- */
.booking{background:var(--ink-2);color:var(--on-ink)}
.booking h2{color:#F6F2EA;max-width:22rem}
.booking__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start}
@media (min-width:56rem){.booking__grid{grid-template-columns:minmax(0,1fr) minmax(0,22rem)}}
.booking p{color:var(--on-ink-soft);max-width:32rem;margin-top:1.1rem}
.contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.contact li{
  display:flex;flex-direction:column;gap:.25rem;
  padding:1.1rem 0;border-bottom:1px solid rgba(168,130,60,.3);
}
.contact li:first-child{border-top:1px solid rgba(168,130,60,.3)}
.contact span{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-lift)}
.contact a{
  font-family:var(--body);font-size:1.06rem;font-variant-numeric:tabular-nums;color:#F6F2EA;
  text-decoration:none;border-bottom:1px solid rgba(246,242,234,.35);
  align-self:flex-start;word-break:break-word;
}
.contact a:hover{border-bottom-color:var(--brass-lift)}

/* ---------- footer ---------- */
.foot{
  background:var(--ink);color:var(--on-ink-soft);
  padding:2.25rem var(--pad);
  font-size:.85rem;
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  border-top:1px solid rgba(168,130,60,.3);
}
.foot p{margin:0}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------- listen ---------- */
.listen{background:var(--ink);color:var(--on-ink)}
.listen h2{color:#F6F2EA}
.listen__grid{
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr;
  margin-top:clamp(2rem,5vw,3rem);
}
@media (min-width:56rem){
  .listen__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
}

.stage{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#000;border:1px solid rgba(168,130,60,.42);
  overflow:hidden;
}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.stage__btn{
  position:absolute;inset:0;width:100%;height:100%;padding:0;
  border:0;background:#000;cursor:pointer;display:block;
}
.stage__btn img{
  width:100%;height:100%;object-fit:cover;opacity:.62;
  transition:opacity .22s ease,transform .5s ease;
}
.stage__btn:hover img,.stage__btn:focus-visible img{opacity:.8;transform:scale(1.02)}
.stage__btn:focus-visible{outline:2px solid var(--brass-lift);outline-offset:-4px}

.stage__cue{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.85rem;
  padding:.8rem 1.4rem .8rem 1.1rem;
  background:rgba(29,26,33,.82);border:1px solid var(--brass);
  color:#F6F2EA;
  font-family:var(--body);font-size:.9rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.stage__cue svg{width:1.1rem;height:1.1rem;fill:var(--brass-lift);flex:none}
.stage__btn:hover .stage__cue{background:rgba(168,130,60,.94);color:#1D1A21}
.stage__btn:hover .stage__cue svg{fill:#1D1A21}

.nowplaying{
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline;
  margin-top:1rem;font-size:.9rem;color:var(--on-ink-soft);
}
.nowplaying strong{color:#F6F2EA;font-weight:700}
.nowplaying .dur{font-variant-numeric:tabular-nums}

.channel-link{
  display:inline-block;margin-top:1.1rem;font-size:.9rem;
  color:var(--brass-lift);text-decoration:none;
  border-bottom:1px solid rgba(201,164,97,.45);
}
.channel-link:hover{border-bottom-color:var(--brass-lift)}

.setlist{display:flex;flex-direction:column;gap:1.75rem}
.setlist__group{display:flex;flex-direction:column;gap:.35rem}
.setlist__group > h3{
  font-family:var(--display);font-style:italic;font-size:1.05rem;
  color:var(--brass-lift);
  padding-bottom:.5rem;margin-bottom:.35rem;
  border-bottom:1px solid rgba(168,130,60,.32);
}
.setlist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}

.track{
  display:flex;align-items:baseline;gap:.7rem;width:100%;
  padding:.5rem .4rem;
  background:transparent;border:0;cursor:pointer;
  font-family:var(--body);font-size:.95rem;color:var(--on-ink);
  text-align:left;
  transition:background .16s ease;
}
.track:hover{background:rgba(168,130,60,.13)}
.track:focus-visible{outline:2px solid var(--brass-lift);outline-offset:-2px}
.track__tri{color:var(--brass);flex:none;font-size:.7rem;line-height:1.6}
.track__name{flex:1 1 auto}
.track__dur{
  flex:none;font-size:.82rem;color:var(--on-ink-soft);
  font-variant-numeric:tabular-nums;
}
.track[aria-current="true"]{background:rgba(168,130,60,.2)}
.track[aria-current="true"] .track__name{font-weight:700;color:#F6F2EA}
.track[aria-current="true"] .track__tri{color:var(--brass-lift)}

@media (prefers-reduced-motion:reduce){
  .stage__btn img{transition:none}
}

/* ---------- hero plate: now backed by a 951px source ---------- */
.plate--hero{max-width:30rem}

/* ---------- credentials ---------- */
.creds{
  display:grid;gap:0;grid-template-columns:1fr;
  grid-column:1 / -1;              /* span the About grid, not one cell */
  margin:0;
  border-top:1px solid var(--paper-3);
}
@media (min-width:40rem){.creds{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.creds{grid-template-columns:repeat(4,1fr)}}
.cred{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.1rem 1.25rem 1.1rem 0;
  border-bottom:1px solid var(--paper-3);
}
@media (min-width:64rem){
  .cred + .cred{padding-left:1.25rem;border-left:1px solid var(--paper-3)}
}
.cred dt{
  font-size:.76rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--rubric);
}
.cred dd{margin:0;font-size:.95rem;line-height:1.45;color:var(--text-soft)}

/* ---------- listen intro ---------- */
.listen__intro{
  max-width:36rem;margin-top:1.25rem;
  color:var(--on-ink-soft);font-size:1rem;
}
.listen__intro em{color:var(--on-ink);font-style:italic}

/* ---------- booking practicalities ---------- */
.notes{
  list-style:none;margin:1.75rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.9rem;max-width:32rem;
}
.notes li{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:.95rem;color:var(--on-ink-soft);
}
.notes li::before{
  content:"";flex:none;width:.4rem;height:.4rem;margin-top:.55rem;
  background:var(--brass);
}
.notes strong{color:#F6F2EA;font-weight:700}

/* ---------- upcoming dates ---------- */
.upcoming{
  background:var(--ink-2);color:var(--on-ink);
  padding:clamp(2.5rem,6vw,4rem) var(--pad);
  border-top:1px solid rgba(168,130,60,.28);
}
.upcoming__head{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;
  margin-bottom:1.75rem;
}
.upcoming__head h2{
  font-size:clamp(1.5rem,3.2vw,2.1rem);color:#F6F2EA;
}
.dates{list-style:none;margin:0;padding:0;border-top:1px solid rgba(168,130,60,.28)}
.dates li{
  display:grid;gap:.35rem 1.5rem;
  grid-template-columns:1fr;
  padding:1.15rem 0;
  border-bottom:1px solid rgba(168,130,60,.28);
}
@media (min-width:44rem){
  .dates li{grid-template-columns:7.5rem minmax(0,1fr) minmax(0,18rem);align-items:baseline}
}
.date__when{
  display:flex;flex-direction:column;
  font-variant-numeric:tabular-nums;
}
.date__day{
  font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--brass-lift);
  line-height:1.15;
}
.date__time{font-size:.85rem;color:var(--on-ink-soft)}
.date__what{font-family:var(--display);font-size:1.1rem;color:#F6F2EA;line-height:1.3}
.date__where{font-size:.9rem;color:var(--on-ink-soft);line-height:1.45}
.upcoming__note{
  margin-top:1.5rem;font-size:.88rem;color:var(--on-ink-soft);max-width:34rem;
}

/* ---------- mission gallery ---------- */
.gallery{
  columns:3 15rem;column-gap:clamp(.75rem,2vw,1.25rem);
  margin-top:clamp(2.25rem,5vw,3.25rem);
}
.gallery figure{
  break-inside:avoid;margin:0 0 clamp(.75rem,2vw,1.25rem);
}
.gallery img{
  width:100%;height:auto;display:block;
  border:1px solid var(--paper-3);
  background:var(--paper-2);
}
.gallery figcaption{
  margin-top:.5rem;
  font-size:.8rem;line-height:1.4;color:var(--text-faint);
}

/* ---------- portrait in the bio column ---------- */
.bio-portrait{margin:1.75rem 0 0;max-width:100%}
.bio-portrait img{
  width:100%;height:auto;display:block;
  border:1px solid var(--paper-3);
}
.bio-portrait figcaption{
  margin-top:.5rem;
  font-size:.78rem;line-height:1.4;color:var(--text-faint);
}
@media (min-width:56rem){
  .about__grid{grid-template-columns:16rem minmax(0,1fr)}
}

/* the default rubric link colour is unreadable on the dark bands */
.upcoming__note a{color:var(--brass-lift);text-decoration-color:rgba(201,164,97,.5)}
.upcoming__note a:hover{text-decoration-color:var(--brass-lift)}

/* ---------- albums ---------- */
.albums{background:var(--paper)}
.albums__intro{max-width:38rem;margin-top:1.25rem;font-size:1.02rem;color:var(--text-soft)}

.apbar{
  position:sticky;top:0;z-index:5;
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;
  margin:clamp(1.75rem,4vw,2.5rem) 0 0;
  padding:.85rem 1rem;
  background:var(--ink);color:var(--on-ink);
  border:1px solid var(--ink-3);
}
.apbar__meta{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 14rem}
.apbar__label{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brass-lift);
}
.apbar__title{
  font-family:var(--display);font-size:1.05rem;color:#F6F2EA;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.apbar audio{flex:1 1 18rem;min-width:0;height:2.4rem}

.album{
  padding:clamp(2rem,4vw,2.75rem) 0;
  border-bottom:1px solid var(--paper-3);
}
.album:last-of-type{border-bottom:0;padding-bottom:0}
.album__head{
  display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:baseline;
  margin-bottom:.4rem;
}
.album__head h3{font-size:1.5rem}
.album__year{
  font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass-ink);
  font-variant-numeric:tabular-nums;
}
.album__note{max-width:38rem;color:var(--text-soft);font-size:.98rem;margin-bottom:1.25rem}

.tracklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper-3)}
.tracklist li{border-bottom:1px solid var(--paper-3)}
.trk{
  display:grid;gap:.15rem .9rem;width:100%;
  grid-template-columns:1.9rem 1fr auto;
  align-items:baseline;
  padding:.6rem .35rem;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--body);font-size:.98rem;color:var(--text);
  transition:background .15s ease;
}
@media (min-width:40rem){
  .trk{grid-template-columns:1.9rem minmax(0,1fr) minmax(0,15rem) auto}
}
.trk:hover{background:var(--paper-2)}
.trk:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.trk__no{
  font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--text-faint);
}
.trk__name{min-width:0}
.trk__credit{
  font-size:.85rem;color:var(--text-faint);
  grid-column:2;
}
@media (min-width:40rem){.trk__credit{grid-column:auto}}
.trk__dur{
  font-size:.85rem;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
  grid-column:3;grid-row:1;
}
@media (min-width:40rem){.trk__dur{grid-column:4}}
.trk[aria-current="true"]{background:var(--paper-2)}
.trk[aria-current="true"] .trk__name{font-weight:700}
.trk[aria-current="true"] .trk__no{color:var(--rubric)}