/* ============================================================
   RAY PETROV — Commission Nº 098
   1950s record-store poster / literary magazine / gig flyer
   ============================================================ */
:root{
  --table:   #e6dec9;   /* tabletop the poster sits on        */
  --paper:   #e7ddc2;   /* aged cream stock                   */
  --paper-2: #ddd2b4;   /* slightly darker paper for shading  */
  --ink:     #1d1813;   /* near-black charcoal                */
  --brown:   #6e3c22;   /* warm coffee brown                  */
  --rust:    #8a4527;   /* burnt sienna                       */
  --rust-2:  #a35430;   /* brighter brush rust                */
  --gold:    #a98f54;   /* antique ochre                      */
  --gold-2:  #b59c5e;   /* tab gold                           */
  --line:    #9c8a6b;   /* faded brown rule                   */
  --muted:   #847a63;   /* greyed taupe                       */
  --band:    #1a1b16;   /* lower band charcoal                */
  --band-ink:#d8cdab;   /* cream ink used on the dark band    */

  --script:  "Lobster Two", "Brush Script MT", cursive;
  --display: "Abril Fatface", "Playfair Display", Georgia, serif;
  --label:   "Oswald", "Arial Narrow", Impact, sans-serif;
  --quote:   "Playfair Display", Georgia, serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  background:var(--table);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255,250,235,.35), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,100,70,.03) 0 2px, transparent 2px 5px);
  font-family:var(--label);
  color:var(--ink);
  padding:clamp(10px, 2.2vw, 28px);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible{
  outline:2px dashed var(--rust);
  outline-offset:3px;
}
.band a:focus-visible{outline-color:var(--gold-2)}

/* ---------- THE POSTER ---------- */
.poster{
  width:min(1180px, 100%);
  background:var(--paper);
  border:2px solid #241d14;
  box-shadow:
    0 1px 0 1px rgba(60,45,25,.25),
    0 18px 50px -18px rgba(40,30,15,.5);
  position:relative;
  overflow:hidden;
}
/* paper grain + speckle, one layer for the whole sheet */
.poster::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:40;
  opacity:.5;
  background-image:url("../images/noise-texture.svg");
  mix-blend-mode:multiply;
}
/* faded edges of an old print */
.poster::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:41;
  box-shadow:
    inset 0 0 70px rgba(110,85,50,.22),
    inset 0 0 14px rgba(255,250,230,.28);
}

/* ============================================================
   HEADER
   ============================================================ */
.masthead{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2.5vw, 34px);
  padding:clamp(14px, 2.2vw, 24px) clamp(18px, 3vw, 44px) clamp(10px, 1.6vw, 16px);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:5;
}
.masthead::after{ /* doubled printed rule */
  content:"";
  position:absolute; left:0; right:0; bottom:3px;
  border-bottom:1px solid rgba(156,138,107,.45);
}
.brand{
  display:flex;
  align-items:center;
  gap:clamp(8px, 1.2vw, 16px);
}
.starburst{flex:0 0 auto;width:clamp(22px,2.6vw,30px);height:auto;color:var(--gold)}
.brand-text .logo{
  font-family:var(--script);
  font-style:italic;
  font-weight:700;
  font-size:clamp(2rem, 4.2vw, 3.3rem);
  line-height:.9;
  color:var(--brown);
  text-shadow:1px 1px 0 rgba(138,69,39,.25);
  white-space:nowrap;
}
.brand-text .tagline{
  font-family:var(--label);
  font-weight:500;
  font-size:clamp(.55rem, .85vw, .72rem);
  letter-spacing:.34em;
  color:var(--ink);
  margin-top:.45em;
  text-transform:uppercase;
}
.main-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:clamp(16px, 3vw, 44px);
}
.main-nav a{
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.62rem,.9vw,.78rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink);
  position:relative;
  padding:4px 0;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  border-bottom:2px solid var(--rust);
  transition:right .25s ease;
}
.main-nav a:hover::after{right:0}
.medallion-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.medallion-wrap .rule{
  width:clamp(10px,1.6vw,22px);
  border-top:1px solid var(--ink);
  box-shadow:0 3px 0 var(--ink), 0 -3px 0 var(--ink);
  opacity:.75;
}
.medallion{
  width:clamp(40px, 4.6vw, 56px);
  height:clamp(40px, 4.6vw, 56px);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #bca468, var(--gold) 70%);
  box-shadow:inset 0 0 0 2px rgba(29,24,19,.5), inset 0 0 10px rgba(60,45,20,.35);
  display:grid;
  place-items:center;
}
.medallion img{width:46%;height:auto;display:block}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .72fr);
  align-items:start;
  min-height:clamp(420px, 44vw, 560px);
  padding:clamp(22px,3vw,40px) clamp(18px, 3vw, 44px) 0;
  overflow:hidden;
}
/* halftone dot field, very faint */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(110,60,34,.10) 1px, transparent 1.4px);
  background-size:9px 9px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at 30% 40%, black 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%, black 0%, transparent 70%);
}

.hero-copy{
  position:relative;
  z-index:6;
  padding-top:clamp(8px, 2vw, 30px);
}
.hl{
  font-family:var(--display);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.015em;
}
.hl .row-1{
  display:block;
  font-size:clamp(3rem, 7.6vw, 6.6rem);
  color:var(--ink);
  text-shadow:2px 2px 0 rgba(138,69,39,.16); /* off-register pass */
}
.hl .row-2{
  display:block;
  font-size:clamp(2.6rem, 6.8vw, 5.9rem);
  color:var(--rust);
  margin-top:.04em;
  text-shadow:2px 2px 0 rgba(29,24,19,.14);
}
.hero-sub{
  margin-top:clamp(18px, 2.6vw, 34px);
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.72rem, 1.15vw, .95rem);
  letter-spacing:.3em;
  line-height:1.9;
  text-transform:uppercase;
  color:var(--ink);
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:.9em;
  margin-top:clamp(20px, 2.6vw, 34px);
  background:var(--rust);
  color:#ecdfc4;
  border:1px solid #5d2e18;
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.62rem,.9vw,.78rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  padding:1.05em 1.9em 1em;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(29,24,19,.85);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta .arrow{font-family:Georgia,serif;letter-spacing:0;transform:translateY(-1px)}
.cta:hover{background:#9a4e2b;transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(29,24,19,.85)}
.cta:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}

/* hero starburst accent near headline */
.hero-star{
  position:absolute;
  top:clamp(14px,3vw,38px);
  left:38%;
  width:clamp(24px,3vw,38px);
  color:var(--gold);
  opacity:.9;
  z-index:2;
}

/* --- center figure --- */
.hero-figure{
  position:relative;
  z-index:5;
  align-self:end;
  height:100%;
  min-height:340px;
}
.gold-circle{
  position:absolute;
  left:50%; bottom:22%;
  transform:translateX(-56%);
  width:clamp(250px, 33vw, 440px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #b59c5e, var(--gold) 58%, #93783f);
  opacity:.92;
  z-index:1;
}
.gold-circle::after{ /* halftone bite on the circle */
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background-image:radial-gradient(rgba(80,60,25,.25) 1px, transparent 1.4px);
  background-size:7px 7px;
  mask-image:linear-gradient(220deg, black, transparent 55%);
  -webkit-mask-image:linear-gradient(220deg, black, transparent 55%);
}
.bassist{
  position:absolute;
  left:50%; bottom:-2px;
  transform:translateX(-45%);
  width:clamp(320px, 41vw, 540px);
  height:auto;
  z-index:3;
  filter:drop-shadow(0 6px 12px rgba(30,20,10,.25)) sepia(.18) contrast(1.02);
}

/* --- right quote --- */
.hero-quote{
  position:relative;
  z-index:6;
  padding:clamp(40px, 6vw, 86px) 0 0 clamp(6px, 1vw, 14px);
}
.brush{
  position:absolute;
  right:calc(-1 * clamp(18px, 3vw, 44px)); /* bleed to poster edge */
  bottom:-38%;
  width:128%;
  min-width:260px;
  height:auto;
  z-index:-1;
  color:var(--rust-2);
  opacity:.9;
}
.hero-quote .qmark{
  font-family:var(--quote);
  font-weight:700;
  font-size:clamp(3rem, 5vw, 4.4rem);
  line-height:.4;
  color:var(--rust);
  display:block;
  margin-bottom:.35em;
}
.hero-quote blockquote p{
  font-family:var(--quote);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.05rem, 1.7vw, 1.5rem);
  line-height:1.55;
  color:var(--ink);
}
.hero-quote .attrib{
  display:block;
  margin-top:1.4em;
  font-family:var(--label);
  font-style:normal;
  font-weight:600;
  font-size:clamp(.6rem,.85vw,.74rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--brown);
}

/* --- skyline across hero bottom --- */
.skyline{
  position:absolute;
  left:0; bottom:-4px;
  width:min(62%, 760px);
  height:auto;
  z-index:4;
  color:var(--ink);
  pointer-events:none;
}

/* ============================================================
   DARK LOWER BAND
   ============================================================ */
.band{
  position:relative;
  z-index:6;
  background:var(--band);
  background-image:
    radial-gradient(ellipse 90% 100% at 50% 0%, rgba(216,205,171,.05), transparent 55%),
    repeating-linear-gradient(90deg, rgba(216,205,171,.022) 0 1px, transparent 1px 4px);
  color:var(--band-ink);
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr);
  gap:clamp(22px, 3.4vw, 48px);
  padding:clamp(30px, 3.6vw, 46px) clamp(18px, 3vw, 44px) clamp(28px, 3.4vw, 44px);
  border-top:2px solid #11120e;
}
.module{position:relative}
.tab{
  display:inline-block;
  background:var(--gold-2);
  color:#181510;
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.6rem,.85vw,.74rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  padding:.55em 1.3em .5em;
  position:relative;
  z-index:2;
  margin-left:clamp(4px,.8vw,10px);
  box-shadow:2px 2px 0 rgba(0,0,0,.55);
}
.boxed{
  border:1px solid rgba(181,156,94,.55);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 26px rgba(0,0,0,.4);
  margin-top:-1px;
  padding:clamp(14px, 1.8vw, 24px) clamp(14px, 2vw, 28px);
  background:rgba(10,10,8,.25);
}

/* shows table */
.shows-table{width:100%;border-collapse:collapse}
.shows-table tr + tr td{border-top:1px solid rgba(216,205,171,.16)}
.shows-table td{
  padding:1.05em .4em;
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(.62rem, .92vw, .8rem);
  white-space:nowrap;
}
.shows-table .date{color:var(--rust-2);font-weight:600;letter-spacing:.26em}
.shows-table .venue{color:var(--band-ink);font-weight:600}
.shows-table .city{color:#8d8674;font-weight:400}
.shows-table .tix{text-align:right}
.shows-table .tix a{
  color:var(--gold-2);
  font-weight:600;
  border-bottom:1px solid rgba(181,156,94,.45);
  padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.shows-table .tix a:hover{color:#d8c389;border-color:#d8c389}
.shows-table .tix .arrow{font-family:Georgia,serif;letter-spacing:0}

/* release card */
.release-card{
  display:grid;
  grid-template-columns:minmax(120px, 172px) minmax(0,1fr);
  gap:clamp(16px, 2.2vw, 30px);
  align-items:center;
}
.album-art{
  width:100%;
  aspect-ratio:1;
  display:block;
  border:1px solid rgba(216,205,171,.2);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.release-info .release-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.3rem, 2.1vw, 1.85rem);
  line-height:1.08;
  white-space:nowrap;
  letter-spacing:.02em;
  color:var(--band-ink);
  text-transform:uppercase;
}
.release-info .release-meta{
  margin-top:1.1em;
  font-family:var(--label);
  font-size:clamp(.6rem,.85vw,.74rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#9a9078;
  line-height:2.1;
}
.release-info .release-meta .quartet{color:var(--band-ink)}
.listen{
  display:inline-flex;
  align-items:center;
  gap:.8em;
  margin-top:1.4em;
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.6rem,.88vw,.76rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-2);
  border-bottom:1px solid rgba(181,156,94,.45);
  padding-bottom:3px;
  transition:color .15s ease, border-color .15s ease;
}
.listen:hover{color:#d8c389;border-color:#d8c389}
.listen .arrow{font-family:Georgia,serif;letter-spacing:0}

/* ============================================================
   FOOTER / CATALOG LINE
   ============================================================ */
.catalog{
  padding:clamp(16px, 2.2vw, 26px) clamp(18px, 3vw, 44px);
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.78rem, 1.5vw, 1.25rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
}


/* ============================================================
   PAPER SECTIONS (bio, discography, journal)
   ============================================================ */
.sheet{
  position:relative;
  z-index:6;
  padding:clamp(40px, 5vw, 72px) clamp(18px, 3vw, 44px);
  border-top:1px solid var(--line);
}
.sheet--shade{background:var(--paper-2)}
.sec-head{
  display:flex;
  align-items:baseline;
  gap:clamp(14px, 2vw, 26px);
  margin-bottom:clamp(26px, 3.4vw, 44px);
}
.tab--rust{
  background:var(--rust);
  color:#ecdfc4;
  box-shadow:2px 2px 0 rgba(29,24,19,.55);
  margin-left:0;
}
.sec-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.7rem, 3.4vw, 2.9rem);
  line-height:1;
  color:var(--ink);
}
.sec-title em{font-style:normal;color:var(--rust)}
.sec-rule{
  flex:1;
  border-top:1px solid var(--line);
  position:relative;
  top:-4px;
}

/* ---------- BIO ---------- */
.bio-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
  gap:clamp(26px, 4vw, 60px);
  align-items:start;
}
.bio-text p{
  font-family:var(--quote);
  font-size:clamp(.98rem, 1.25vw, 1.12rem);
  line-height:1.8;
  color:#2c251d;
  margin-bottom:1.2em;
}
.bio-text p:first-of-type::first-letter{
  font-family:var(--display);
  font-size:4.1em;
  float:left;
  line-height:.78;
  padding:.06em .12em 0 0;
  color:var(--rust);
}
.liner{
  border:1px solid var(--line);
  box-shadow:4px 4px 0 rgba(110,60,34,.18), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line);
  background:var(--paper-2);
  padding:clamp(18px, 2.4vw, 30px);
}
.liner h3{
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.62rem,.9vw,.78rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--brown);
  border-bottom:1px solid var(--line);
  padding-bottom:.9em;
  margin-bottom:.4em;
}
.liner dl{display:block}
.liner .fact{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  padding:.85em 0;
  border-bottom:1px dashed rgba(156,138,107,.6);
}
.liner .fact:last-child{border-bottom:0}
.liner dt{
  font-family:var(--label);
  font-size:clamp(.58rem,.82vw,.7rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.liner dd{
  font-family:var(--quote);
  font-style:italic;
  font-weight:600;
  font-size:clamp(.85rem,1.1vw,1rem);
  color:var(--ink);
  text-align:right;
}

/* ---------- PRESS ---------- */
.press{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
}
.press blockquote{
  padding:clamp(8px,1.4vw,18px) clamp(18px, 2.6vw, 36px);
  border-left:1px solid var(--line);
}
.press blockquote:first-child{border-left:0;padding-left:0}
.press .pq{
  font-family:var(--quote);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1rem, 1.45vw, 1.3rem);
  line-height:1.55;
  color:var(--ink);
}
.press .pq::before{
  content:"\201C";
  font-family:var(--display);
  display:block;
  font-size:2.4em;
  line-height:.5;
  color:var(--rust);
  margin-bottom:.25em;
}
.press cite{
  display:block;
  margin-top:1.2em;
  font-family:var(--label);
  font-style:normal;
  font-weight:600;
  font-size:clamp(.56rem,.8vw,.7rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--brown);
}

/* ---------- DISCOGRAPHY ---------- */
.disco-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(18px, 2.6vw, 34px);
}
.record{display:block;position:relative}
.record .cover{
  width:100%;
  aspect-ratio:1;
  display:block;
  border:1px solid #3a2e1c;
  box-shadow:5px 5px 0 rgba(29,24,19,.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
.record:hover .cover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(29,24,19,.3)}
.record .r-title{
  margin-top:1em;
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.66rem,.95vw,.82rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
}
.record .r-meta{
  margin-top:.45em;
  font-family:var(--label);
  font-size:clamp(.56rem,.8vw,.68rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}
.record .r-meta .yr{color:var(--rust)}

/* ---------- JOURNAL ---------- */
.journal-list{display:block}
.entry{
  display:grid;
  grid-template-columns:minmax(90px, 130px) minmax(0,1fr) auto;
  gap:clamp(16px, 2.6vw, 40px);
  align-items:baseline;
  padding:clamp(20px, 2.6vw, 30px) 0;
  border-bottom:1px solid var(--line);
}
.entry:first-child{padding-top:0}
.entry .e-date{
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.6rem,.85vw,.74rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--rust);
}
.entry h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.15rem, 1.9vw, 1.6rem);
  color:var(--ink);
  line-height:1.15;
}
.entry .e-x{
  margin-top:.6em;
  font-family:var(--quote);
  font-style:italic;
  font-size:clamp(.88rem, 1.1vw, 1rem);
  line-height:1.7;
  color:#4a4032;
  max-width:58ch;
}
.read-more{
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.58rem,.84vw,.72rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brown);
  border-bottom:1px solid rgba(110,60,34,.45);
  padding-bottom:3px;
  white-space:nowrap;
  transition:color .15s ease, border-color .15s ease;
}
.read-more:hover{color:var(--rust);border-color:var(--rust)}
.read-more .arrow{font-family:Georgia,serif;letter-spacing:0}

/* ---------- TIP JAR ---------- */
.tipjar{
  background:linear-gradient(180deg, #b39a5c, #a98f54);
  border-top:2px solid #241d14;
  border-bottom:2px solid #241d14;
  position:relative;
  z-index:6;
  padding:clamp(36px, 4.6vw, 60px) clamp(18px, 3vw, 44px);
  text-align:center;
}
.tipjar::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(60,45,20,.18) 1px, transparent 1.4px);
  background-size:8px 8px;
  pointer-events:none;
}
.tipjar .tj-eyebrow{
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.6rem,.85vw,.74rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#3a2d14;
}
.tipjar h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.7rem, 3.2vw, 2.8rem);
  color:var(--ink);
  margin:.4em 0 .35em;
}
.tipjar .tj-copy{
  font-family:var(--quote);
  font-style:italic;
  font-size:clamp(.95rem, 1.2vw, 1.1rem);
  color:#33280f;
  max-width:52ch;
  margin:0 auto;
  line-height:1.7;
}
.tj-options{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(12px, 1.8vw, 22px);
  margin-top:clamp(22px, 3vw, 34px);
}
.tj-btn{
  background:var(--paper);
  border:1px solid #241d14;
  box-shadow:3px 3px 0 rgba(29,24,19,.7);
  padding:1em 1.5em .9em;
  cursor:pointer;
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.6rem,.88vw,.76rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tj-btn .amt{
  display:block;
  font-family:var(--display);
  font-size:2.1em;
  letter-spacing:0;
  color:var(--rust);
  margin-bottom:.3em;
}
.tj-btn:hover{background:#efe6cd;transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(29,24,19,.7)}
.tj-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 transparent}
.tj-note{
  margin-top:1.8em;
  font-family:var(--label);
  font-size:clamp(.54rem,.76vw,.66rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#4a3a18;
}

/* ============================================================
   BOOKING + NEWSLETTER (dark closing band)
   ============================================================ */
.band--close{
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  border-bottom:2px solid #11120e;
}
.field{display:block;margin-bottom:clamp(14px, 1.8vw, 20px)}
.field span{
  display:block;
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(.56rem,.8vw,.68rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#9a9078;
  margin-bottom:.7em;
}
.field input,
.field textarea{
  width:100%;
  background:rgba(10,10,8,.4);
  border:1px solid rgba(181,156,94,.4);
  color:var(--band-ink);
  font-family:var(--label);
  font-size:clamp(.78rem, 1vw, .9rem);
  letter-spacing:.08em;
  padding:.85em 1em;
  transition:border-color .15s ease;
}
.field input:hover, .field textarea:hover{border-color:rgba(181,156,94,.7)}
.field input:focus-visible, .field textarea:focus-visible{
  outline:2px dashed var(--gold-2);
  outline-offset:2px;
  border-color:var(--gold-2);
}
.field textarea{resize:vertical;min-height:110px}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px, 1.6vw, 18px);
}
.cta--gold{
  background:var(--gold-2);
  color:#181510;
  border-color:#3a2d14;
  box-shadow:3px 3px 0 rgba(0,0,0,.65);
}
.cta--gold:hover{background:#c2a96c}
.form-status{
  margin-top:1.1em;
  font-family:var(--label);
  font-size:clamp(.6rem,.85vw,.74rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-2);
  min-height:1.4em;
}
.form-status.error{color:#c97a52}
.nl-copy{
  font-family:var(--quote);
  font-style:italic;
  font-size:clamp(.92rem, 1.15vw, 1.05rem);
  line-height:1.75;
  color:#b3a98c;
  margin-bottom:1.6em;
}
.nl-row{display:flex;gap:12px;align-items:stretch}
.nl-row input{flex:1}
.nl-row .cta{margin-top:0;white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* honeypot */

/* ---------- FOOTER ---------- */
.catalog{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:1em 2.5em;
}
.catalog .foot-nav{
  margin-left:auto;
  display:flex;
  gap:clamp(14px, 2.4vw, 30px);
}
.catalog .foot-nav a{
  font-size:clamp(.56rem,.8vw,.68rem);
  letter-spacing:.26em;
  color:var(--brown);
  border-bottom:1px solid transparent;
}
.catalog .foot-nav a:hover{border-color:var(--brown)}
.catalog-copy{
  width:100%;
  font-family:var(--label);
  font-size:clamp(.48rem, .68vw, .58rem) !important;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.75;
}
.catalog-copy a{color:inherit;border-bottom:1px solid transparent}
.catalog-copy a:hover{border-color:var(--muted)}


.starburst,
.hero-star,
.bassist,
.brush,
.skyline,
.album-art,
.cover{user-select:none;-webkit-user-drag:none;}
.bassist{object-fit:contain;mix-blend-mode:multiply;}
.hero-figure .gold-circle{display:none;}
.album-art,.cover{object-fit:cover;background:var(--paper-2);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .hero{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    grid-template-areas:
      "copy  figure"
      "quote figure";
  }
  .hero-copy{grid-area:copy}
  .hero-figure{grid-area:figure}
  .hero-quote{grid-area:quote;padding-top:clamp(16px,3vw,30px);padding-bottom:140px}
  .hero-star{left:46%}
  .brush{right:auto;left:-8%;width:120%;bottom:18%}
  .band{grid-template-columns:1fr}
  .bio-grid{grid-template-columns:1fr}
  .press{grid-template-columns:1fr;gap:6px}
  .disco-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 700px){
  .masthead{flex-wrap:wrap;row-gap:12px}
  .main-nav{margin-left:0;width:100%;order:3;justify-content:space-between;gap:8px}
  .medallion-wrap{margin-left:auto}
  .medallion-wrap .rule{display:none}
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "figure"
      "quote";
    min-height:0;
  }
  .hero-copy{padding-top:6px}
  .hero-sub{max-width:none}
  .hero-figure{min-height:0;margin-top:14px}
  .bassist{position:relative;left:auto;bottom:auto;z-index:3;display:block;transform:none;margin:0 auto;width:min(80vw,380px)}
  .gold-circle{transform:translateX(-50%);bottom:4%;width:min(72vw,340px)}
  .skyline{position:static;width:100%;display:block;margin-top:-6px}
  .hero-star{display:none}
  .hero-quote{padding:26px 4px 30px}
  .hero-quote blockquote p{max-width:none}
  .brush{left:8%;bottom:-16%;width:96%;right:auto;opacity:.85}
  .release-card{grid-template-columns:1fr;max-width:340px}
  .press blockquote{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--line);padding-top:18px;margin-top:8px}
  .press blockquote:first-child{border-top:0;margin-top:0}
  .entry{grid-template-columns:1fr;gap:8px}
  .entry .read-more{justify-self:start}
  .field-row{grid-template-columns:1fr}
  .nl-row{flex-direction:column}
  .sec-head{flex-wrap:wrap}
  .shows-table td{white-space:normal;letter-spacing:.16em}
  .shows-table .city{display:none}
}


/* ============================================================
   HERO WEBP POLISH
   ============================================================ */
.hero{
  isolation:isolate;
}
@media (min-width: 961px){
  .hero-copy{grid-column:1;grid-row:1;}
  .hero-quote{grid-column:3;grid-row:1;}
}
.hero-figure{
  position:absolute;
  inset:0;
  z-index:3;
  height:100%;
  min-height:0;
  margin:0;
  pointer-events:none;
}
.bassist{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  transform:none;
  filter:sepia(.08) contrast(1.02);
  mix-blend-mode:multiply;
  opacity:.98;
}
.hero-figure .gold-circle,
.skyline{
  display:none!important;
}
.hero-copy,
.hero-quote{
  position:relative;
  z-index:8;
}
.hero-quote{
  z-index:9;
}
.brush{
  width:105%;
  right:calc(-1 * clamp(18px, 3vw, 44px));
  bottom:-30%;
  opacity:.44;
  mix-blend-mode:multiply;
}
.album-art,
.cover{
  image-rendering:auto;
}
@media (max-width: 960px){
  .hero-figure{
    position:absolute;
    inset:0;
    height:100%;
    margin:0;
  }
  .bassist{
    object-fit:cover;
    object-position:58% center;
  }
  .hero-copy{grid-area:copy;}
  .hero-quote{grid-area:quote;}
}
@media (max-width: 700px){
  .hero-figure{
    position:relative;
    grid-area:figure;
    height:clamp(310px, 76vw, 480px);
    margin-top:clamp(8px, 2vw, 18px);
  }
  .bassist{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:56% center;
  }
  .hero-quote{
    padding-top:clamp(20px, 5vw, 30px);
  }
  .brush{
    width:92%;
    left:10%;
    right:auto;
    bottom:-12%;
    opacity:.36;
  }
}