@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

:root{
  --wood-darkest:#100a03;
  --wood-dark:#1c1005;
  --wood:#33200f;
  --wood-light:#4a2f17;
  --parchment:#f1e3c0;
  --parchment-edge:#dcc596;
  --cream:#f7eccf;
  --gold:#cf9f3c;
  --gold-bright:#f0ca63;
  --gold-deep:#8a5e1d;
  --ink:#291a0c;
  --ink-soft:#5b452c;
  --ember:#c85d28;
  --ember-glow:#e07a2c;
  --maroon:#7c2222;
}

*{box-sizing:border-box;}

body{
  margin:0;
  color:var(--cream);
  line-height:1.7;
  font-family:"EB Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-size:1.14rem;
  background-color:var(--wood-dark);
  background-image:
    radial-gradient(130% 80% at 50% -10%, rgba(224,122,44,.22), rgba(224,122,44,0) 55%),
    radial-gradient(ellipse at center, transparent 38%, rgba(8,6,3,.62) 100%),
    linear-gradient(rgba(20,12,5,.20), rgba(20,12,5,.34)),
    url("backdrop.jpg"),
    url("wood.svg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

/* ---------- Header ---------- */
header{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:52px 24px 26px;
  text-align:center;
}
header::before{
  content:"";
  position:absolute;
  top:-40px;left:50%;
  width:560px;height:300px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(240,202,99,.22), rgba(240,202,99,0) 70%);
  pointer-events:none;
}
header h1{margin:0 0 14px;position:relative;}
header h1 a{display:inline-block;line-height:0;}
header h1 img{
  width:88%;
  max-width:520px;
  height:auto;
  /* white wordmark on black — screen blend drops the black background over the photo */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  mix-blend-mode:screen;
}
.tagline{
  margin:0 0 20px;
  font-family:"Playfair Display","EB Garamond",Georgia,serif;
  font-style:italic;
  font-size:1.5rem;
  color:var(--gold-bright);
  letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* ---------- Nav ---------- */
nav{
  display:flex;
  gap:2px 4px;
  justify-content:center;
  flex-wrap:wrap;
  padding-top:16px;
  border-top:1px solid rgba(207,159,60,.5);
  box-shadow:0 -3px 0 -2px rgba(207,159,60,.25);
}
nav a{
  text-decoration:none;
  color:var(--cream);
  font-family:"Cinzel",serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.8rem;
  padding:8px 16px;
  border-radius:3px;
  transition:color .2s, background .2s;
}
nav a:hover{color:var(--wood-darkest);background:var(--gold-bright);}

/* ---------- Main: framed parchment poster ---------- */
main{
  max-width:840px;
  margin:10px auto 70px;
  padding:54px 48px 58px;
  color:var(--ink);
  border-radius:4px;
  background-color:var(--parchment);
  background-image:
    radial-gradient(ellipse at 50% 38%, rgba(255,250,235,.55) 30%, transparent 68%),
    radial-gradient(ellipse at center, transparent 46%, rgba(96,60,18,.34) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.45'/%3E%3C/svg%3E"),
    linear-gradient(165deg, #f3e6c4, #e3cf9f);
  background-blend-mode:normal,normal,multiply,normal;
  background-size:auto,auto,160px 160px,auto;
  box-shadow:
    inset 0 0 0 2px rgba(138,94,29,.5),
    inset 0 0 40px rgba(96,60,18,.28),
    0 0 0 4px var(--wood-light),
    0 0 0 6px var(--gold),
    0 0 0 9px var(--wood-darkest),
    0 26px 60px rgba(0,0,0,.7);
}

/* ---------- Typography ---------- */
h2{
  font-family:"Alfa Slab One","Cinzel",serif;
  font-weight:400;
  font-size:clamp(2rem,5.2vw,2.95rem);
  line-height:1.1;
  color:#3b2410;
  text-align:center;
  letter-spacing:.005em;
  margin:0 0 .15em;
  text-shadow:0 1px 0 rgba(255,248,228,.45), 0 2px 4px rgba(96,55,15,.22);
}
h2::after{
  content:"\2766";
  display:block;
  margin:.3em auto .1em;
  color:var(--gold);
  font-size:1.5rem;
  line-height:1;
  text-shadow:none;
}
h3{
  font-family:"Cinzel",serif;
  font-weight:700;
  font-size:1.4rem;
  color:var(--maroon);
  text-align:center;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:2.3em 0 .6em;
}
h4{
  font-family:"Alfa Slab One","Cinzel",serif;
  font-weight:400;
  font-size:1.18rem;
  color:#5a2a1a;
  text-align:center;
  margin:1.8em 0 .4em;
  letter-spacing:.005em;
}
p{margin:0 0 1.2em;}
strong{color:var(--wood);font-weight:600;}
a{color:var(--ember);text-decoration-color:rgba(200,93,40,.45);text-underline-offset:2px;}
a:hover{color:var(--maroon);}
small{color:var(--ink-soft);font-style:italic;}

ul{
  padding-left:0;
  list-style:none;
  max-width:520px;
  margin:1.3em auto 1.5em;
}
li{
  margin-bottom:.55em;
  padding-left:1.6em;
  position:relative;
  text-align:left;
  font-size:1.12rem;
}
li::before{
  content:"\2767";
  position:absolute;
  left:0;
  top:.05em;
  color:var(--gold);
  font-size:.85rem;
}

/* Ornamental divider */
hr{
  border:none;
  height:34px;
  margin:2.4em auto;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='34' viewBox='0 0 280 34'%3E%3Cg fill='none' stroke='%23cf9f3c' stroke-width='1.6'%3E%3Cline x1='10' y1='17' x2='112' y2='17'/%3E%3Cline x1='168' y1='17' x2='270' y2='17'/%3E%3Cpath d='M118 17 q6 -8 12 0 q6 8 12 0' /%3E%3C/g%3E%3Cg fill='%23cf9f3c'%3E%3Cpath d='M140 6 l9 11 -9 11 -9 -11 z'/%3E%3Ccircle cx='118' cy='17' r='2.6'/%3E%3Ccircle cx='162' cy='17' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Gig listings */
main p strong{font-family:"Cinzel",serif;font-size:1.08rem;letter-spacing:.03em;}

/* ---------- Call-to-action button ---------- */
main p a:not([href^="mailto"]){
  display:inline-block;
  margin-top:.3em;
  font-family:"Cinzel",serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.95rem;
  color:var(--wood-darkest);
  text-decoration:none;
  padding:14px 34px;
  border-radius:4px;
  border:1px solid var(--gold-deep);
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #a87c26);
  box-shadow:0 2px 0 var(--gold-deep), 0 6px 14px rgba(0,0,0,.4);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
main p a:not([href^="mailto"]):hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 3px 0 var(--gold-deep), 0 9px 18px rgba(0,0,0,.45);
}

/* ---------- Audio ---------- */
audio{
  width:100%;
  margin:.2em 0 .5em;
  border-radius:30px;
  box-shadow:0 1px 5px rgba(0,0,0,.25);
  filter:sepia(.3) saturate(1.15);
}

/* ---------- Footer ---------- */
footer{
  text-align:center;
  margin-top:30px;
  padding:34px 20px 44px;
  color:var(--gold-bright);
  font-family:"Cinzel",serif;
  letter-spacing:.1em;
  font-size:.86rem;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(16,10,3,.4), rgba(16,10,3,.85));
  border-top:3px double var(--gold);
}
footer p{margin:0;}
footer::before{
  content:"\2766";
  display:block;
  color:var(--gold);
  font-size:1.3rem;
  margin-bottom:12px;
}

/* ---------- Band members ---------- */
ul.band{
  max-width:640px;
  margin:1.6em auto 0;
  display:grid;
  gap:18px;
}
li.member{
  display:flex;
  align-items:center;
  gap:20px;
  text-align:left;
  margin:0;
  padding:16px 20px;
  border-radius:6px;
  background:linear-gradient(180deg, rgba(255,250,235,.55), rgba(227,207,159,.35));
  box-shadow:
    inset 0 0 0 1px rgba(138,94,29,.35),
    0 0 0 3px rgba(207,159,60,.30),
    0 6px 16px rgba(60,35,10,.18);
}
li.member::before{content:none;}
.avatar{
  flex:0 0 auto;
  width:78px;height:78px;
  border-radius:50%;
  background-color:var(--wood);
  background-size:cover;
  background-position:center top;
  display:grid;
  place-items:center;
  box-shadow:
    0 0 0 2px var(--parchment),
    0 0 0 4px var(--gold),
    0 3px 8px rgba(0,0,0,.4);
}
.avatar::before{
  content:attr(data-initials);
  font-family:"Cinzel",serif;
  font-weight:700;
  font-size:1.45rem;
  letter-spacing:.04em;
  color:var(--gold-bright);
}
.avatar.has-photo::before{content:none;}
.who{display:flex;flex-direction:column;line-height:1.45;}
.who strong{
  font-family:"Cinzel",serif;
  font-size:1.16rem;
  color:#3b2410;
  letter-spacing:.02em;
}
.who em{
  font-family:"Playfair Display","EB Garamond",Georgia,serif;
  font-style:italic;
  color:var(--maroon);
  font-size:.95rem;
  margin:.05em 0 .35em;
}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  body{font-size:1.06rem;}
  main{padding:36px 22px 42px;margin:8px 12px 50px;}
  header h1 img{width:92%;}
  li.member{flex-direction:column;text-align:center;gap:12px;}
  .who{align-items:center;text-align:center;}
}