/* McCarthy Plaza Summer Music Series
   Styled after boh.taoslifestyle.com — cream / ink / gold,
   Figtree display, Work Sans body, Yellowtail script accents */

:root{
  --cream:#f6e8c5;
  --cream-2:#efddab;
  --ink:#3d2415;
  --gold:#d4a017;
  --gold-dark:#a67c0f;
  --hairline:#e8dcc4;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--gold-dark);outline-offset:3px;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* HERO */
.hero{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:stretch;
  width:100%;
}
.hero-copy{
  padding:56px clamp(24px,5vw,72px) 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
h1.headline{
  font-family:'Figtree',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(52px,8.5vw,110px);
  line-height:.92;
  letter-spacing:.5px;
}
.script-line{
  font-family:'Yellowtail',cursive;
  font-size:clamp(36px,5vw,64px);
  color:var(--gold);
  margin-top:20px;
  line-height:1.1;
}

.hero-art{
  background:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,4vw,56px);
}
.hero-art img{
  width:min(420px,100%);
  border-radius:6px;
  box-shadow:0 20px 50px rgba(61,36,21,.3);
}

/* SECTION TITLES */
h2.section-title{
  font-family:'Figtree',sans-serif;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:2px;
  font-size:clamp(40px,6vw,62px);
  margin-bottom:28px;
  color:var(--ink);
  line-height:.9;
}

/* LINEUP */
.lineup{
  padding:64px 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.show-list .row{
  display:flex;
  align-items:center;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--hairline);
}
.show-list .row:first-child{border-top:1px solid var(--hairline);}
.show-list .d{
  display:flex;
  flex-direction:column;
  min-width:110px;
}
.show-list .num{
  font-family:'Figtree',sans-serif;
  font-weight:700;
  font-size:22px;
  line-height:1;
}
.show-list .day{
  font-family:'Figtree',sans-serif;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#8a7a6a;
  margin-top:3px;
}
.show-list .band{
  flex:1;
  font-family:'Figtree',sans-serif;
  font-weight:600;
  font-size:clamp(18px,2.4vw,24px);
}
.show-list .t{
  font-family:'Figtree',sans-serif;
  letter-spacing:1.5px;
  font-size:13.5px;
  text-transform:uppercase;
  color:#8a7a6a;
  white-space:nowrap;
}
.show-list .row.today{
  background:var(--cream-2);
  box-shadow:0 0 0 12px var(--cream-2);
  border-radius:2px;
}
.today-pill{
  display:inline-block;
  background:var(--gold);
  color:var(--ink);
  font-family:'Figtree',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:2px;
  margin-left:12px;
  vertical-align:middle;
}

/* ABOUT */
.about-section{
  padding:56px 0;
  border-bottom:1px solid var(--hairline);
}
.value-statement{
  font-family:'Figtree',sans-serif;
  font-weight:700;
  font-size:clamp(50px,7vw,86px);
  letter-spacing:.3px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:18px;
  line-height:.9;
}
.about-section p{
  font-size:15.5px;
  color:#4a3a2a;
  margin-bottom:14px;
  line-height:1.6;
  max-width:640px;
}

/* FOOTER */
footer{
  padding:44px 0 54px;
  text-align:center;
}
.wordmark{
  font-family:'Yellowtail',cursive;
  font-size:clamp(40px,7vw,60px);
  line-height:1;
  color:var(--ink);
  margin-bottom:10px;
}
footer .links{
  font-family:'Figtree',sans-serif;
  letter-spacing:1.5px;
  font-size:12.5px;
  text-transform:uppercase;
  color:#7a6a5a;
}
footer .credit{
  margin-top:16px;
  font-size:12px;
  color:#b4a494;
}

/* GRAIN TEXTURE */
.grain-overlay{
  position:fixed;
  inset:-10%;
  width:120%;
  height:120%;
  pointer-events:none;
  z-index:-1;
  opacity:.12;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.68'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%2012%20-3'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:grainFloat 10s steps(6) infinite;
}
@keyframes grainFloat{
  0%,100%{transform:translate(0,0);}
  16%{transform:translate(-2%,-3%);}
  33%{transform:translate(3%,2%);}
  50%{transform:translate(-2%,3%);}
  66%{transform:translate(2%,-2%);}
  83%{transform:translate(-3%,2%);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .grain-overlay{animation:none;}
}

/* MOBILE */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;}
  .hero-art{order:-1;padding:32px 24px;}
  .hero-art img{width:min(300px,80%);}
  .hero-copy{padding:36px 24px 48px;}
  .show-list .row{
    flex-wrap:wrap;
    gap:6px 16px;
  }
  .show-list .d{
    flex-direction:row;
    align-items:baseline;
    gap:10px;
    min-width:0;
    width:100%;
  }
  .show-list .band{flex:1 1 auto;font-size:19px;}
  .show-list .t{font-size:12.5px;}
  .show-list .row.today{box-shadow:0 0 0 8px var(--cream-2);}
}