/* ===================================================
   Sunday Nights LIVE — shared stylesheet
   Used by: index.html, photos.html, about.html, contact.html
   =================================================== */

:root{
  --ivory:#FBF6EA;
  --ivory-dim:#F3ECDB;
  --navy:#1B2740;
  --navy-deep:#111A2C;
  --burgundy:#7E2A2A;
  --gold:#C4922C;
  --gold-light:#E8C877;
  --ink:#2B2620;
  --ink-soft:#4a463d;
  --line: rgba(43,38,32,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'PT Sans', sans-serif;
  font-size:19px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Playfair Display', serif;
  margin:0;
  color:var(--navy);
}
.eyebrow{
  font-family:'Oswald', sans-serif;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  font-size:15px;
  color:var(--burgundy);
}
a{color:var(--burgundy);}
img{max-width:100%;display:block;}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--navy-deep);
  color:var(--ivory);
  padding:14px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:3px solid var(--gold);
}
.topbar .brand{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  letter-spacing:0.06em;
  font-size:20px;
  color:var(--ivory);
  text-decoration:none;
}
.topbar .brand span{color:var(--gold-light);}
.topbar nav{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}
.topbar nav a{
  color:var(--ivory);
  text-decoration:none;
  font-family:'Oswald',sans-serif;
  font-size:16px;
  letter-spacing:0.03em;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.topbar nav a:hover,
.topbar nav a.active{border-bottom-color:var(--gold);}
.topbar .phone{
  color:var(--gold-light);
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  white-space:nowrap;
}

/* ---------- Hero / marquee sign ---------- */
.hero{
  background:
    radial-gradient(ellipse at 50% -10%, rgba(232,200,119,0.16), transparent 60%),
    var(--navy);
  padding:64px 20px 56px;
  text-align:center;
  border-bottom:8px solid var(--gold);
}
.marquee{
  display:inline-block;
  background:var(--navy-deep);
  border:3px solid var(--gold);
  border-radius:6px;
  padding:26px 30px;
  box-shadow: inset 0 0 0 6px rgba(196,146,44,0.08), 0 10px 30px rgba(0,0,0,0.35);
}
.marquee .line1{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  letter-spacing:0.32em;
  font-size:16px;
  color:var(--gold-light);
  margin-bottom:10px;
}
.marquee h1{
  color:var(--ivory);
  font-size:clamp(34px, 6vw, 62px);
  letter-spacing:0.01em;
  line-height:1.05;
}
.marquee h1 em{
  font-style:normal;
  color:var(--gold-light);
}
.tagline{
  margin-top:22px;
  color:var(--ivory-dim);
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:22px;
}
.hero-buttons{
  margin-top:30px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* smaller page-header version of the hero, for interior pages */
.page-header{
  padding:46px 20px 40px;
}
.page-header .marquee{
  padding:20px 26px;
}
.page-header .marquee h1{
  font-size:clamp(28px, 5vw, 46px);
}

.btn{
  display:inline-block;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  letter-spacing:0.04em;
  text-decoration:none;
  padding:16px 30px;
  border-radius:6px;
  font-size:18px;
  border:2px solid transparent;
  cursor:pointer;
}
.btn-gold{
  background:var(--gold);
  color:var(--navy-deep);
}
.btn-gold:hover{background:var(--gold-light);}
.btn-outline{
  background:transparent;
  color:var(--ivory);
  border-color:var(--ivory);
}
.btn-outline:hover{background:rgba(255,255,255,0.08);}

/* ---------- Info strip ---------- */
.info-strip{
  background:var(--ivory-dim);
  border-bottom:1px solid var(--line);
  padding:22px 20px;
}
.info-grid{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:20px;
  text-align:center;
}
.info-grid .label{
  font-family:'Oswald',sans-serif;
  font-size:14px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:4px;
}
.info-grid .value{
  font-size:19px;
  font-weight:700;
  color:var(--navy);
}
.info-grid .value a{color:var(--navy);text-decoration:none;}

/* ---------- Sections ---------- */
section{
  max-width:1000px;
  margin:0 auto;
  padding:70px 20px;
}
.section-head{
  text-align:center;
  margin-bottom:46px;
}
.section-head h2{
  font-size:clamp(28px,4vw,42px);
  margin-top:8px;
}
.section-head p{
  max-width:640px;
  margin:14px auto 0;
  color:var(--ink-soft);
  font-size:19px;
}

/* ---------- Concert cards ---------- */
.concert-list{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.concert{
  background:#fff;
  border:1px solid var(--line);
  border-left:8px solid var(--navy);
  border-radius:10px;
  padding:30px 32px;
  display:grid;
  grid-template-columns:110px 120px 1fr auto;
  gap:24px;
  align-items:center;
}
.concert .photo{
  width:100%;
  aspect-ratio:1/1;
  border-radius:8px;
  overflow:hidden;
  border:2px solid var(--ivory-dim);
  box-shadow:0 4px 14px rgba(0,0,0,0.1);
  cursor:pointer;
  position:relative;
}
.concert .photo::after{
  content:"🔍";
  position:absolute;
  bottom:6px;
  right:6px;
  background:rgba(17,26,44,0.7);
  color:#fff;
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
.concert .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.25s ease;
}
.concert .photo:hover img{
  transform:scale(1.06);
}
.concert .photo-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.concert .photo-row .mini{
  width:64px;
  height:64px;
  border-radius:6px;
  overflow:hidden;
  border:2px solid var(--ivory-dim);
  flex:0 0 auto;
  cursor:pointer;
}
.concert .photo-row .mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.2s ease;
}
.concert .photo-row .mini:hover img{
  transform:scale(1.1);
}

/* ---------- Lightbox (click-to-enlarge photos) ---------- */
.lightbox-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,14,24,0.88);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:30px;
  cursor:zoom-out;
}
.lightbox-overlay.open{
  display:flex;
}
.lightbox-overlay img{
  max-width:min(90vw, 700px);
  max-height:85vh;
  width:auto;
  border-radius:10px;
  border:4px solid var(--ivory);
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-overlay .lightbox-caption{
  position:absolute;
  bottom:30px;
  left:0;
  right:0;
  text-align:center;
  color:var(--ivory);
  font-family:'Oswald',sans-serif;
  font-size:18px;
  letter-spacing:0.04em;
}
.lightbox-close{
  position:absolute;
  top:22px;
  right:28px;
  color:var(--ivory);
  font-size:34px;
  line-height:1;
  cursor:pointer;
  font-family:'PT Sans',sans-serif;
  background:none;
  border:none;
  padding:6px 10px;
}
.lightbox-close:hover{color:var(--gold-light);}
.concert.featured{
  border-left-color:var(--gold);
  background:linear-gradient(180deg, #fff, #FFF9EC);
  box-shadow:0 6px 24px rgba(196,146,44,0.18);
}
.concert.featured .date .month{color:var(--burgundy);}
.concert .date{
  text-align:center;
  font-family:'Oswald',sans-serif;
  border-right:1px solid var(--line);
  padding-right:20px;
}
.concert .date .month{
  font-size:16px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:600;
}
.concert .date .day{
  font-size:46px;
  font-weight:700;
  color:var(--ink);
  line-height:1;
  margin:4px 0;
}
.concert .date .year{
  font-size:14px;
  color:var(--ink-soft);
}
.concert .details .kicker{
  font-family:'Oswald',sans-serif;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--burgundy);
  font-weight:600;
  margin-bottom:6px;
}
.concert .details h3{
  font-size:26px;
  margin-bottom:8px;
}
.concert .details .featuring{
  font-size:17px;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.concert .details .blurb{
  font-style:italic;
  color:var(--ink-soft);
  font-size:17px;
}
.concert .meta{
  text-align:right;
  min-width:190px;
}
.concert .meta .price{
  font-family:'Oswald',sans-serif;
  font-size:24px;
  font-weight:700;
  color:var(--navy);
}
.concert .meta .doors{
  font-size:15px;
  color:var(--ink-soft);
  margin-top:4px;
}
.concert .meta .note{
  margin-top:10px;
  font-size:14px;
  color:var(--burgundy);
  font-weight:700;
}

@media (max-width:720px){
  .concert{
    grid-template-columns:1fr;
    text-align:center;
  }
  .concert .photo{
    width:140px;
    margin:0 auto;
  }
  .concert .photo-row{
    justify-content:center;
  }
  .concert .date{
    border-right:none;
    border-bottom:1px solid var(--line);
    padding-right:0;
    padding-bottom:16px;
  }
  .concert .meta{
    text-align:center;
    margin-top:10px;
  }
}

/* ---------- About / dark sections ---------- */
.dark-section{
  background:var(--navy);
  color:var(--ivory-dim);
}
.dark-section h2{color:var(--ivory);}
.dark-section .section-head p{color:var(--ivory-dim);}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;
  margin-top:10px;
}
.card-grid .card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px;
  padding:26px;
}
.card-grid .card h3{
  color:var(--gold-light);
  font-size:20px;
  margin-bottom:10px;
}
.card-grid .card p{margin:0;font-size:17px;}

/* ---------- Bio (About page: Jim & Charlotte) ---------- */
.bio{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:40px;
  align-items:start;
}
.bio .photo-wrap{
  border:6px solid #fff;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  overflow:hidden;
}
.bio .photo-wrap img{width:100%;}
.bio .photo-caption{
  text-align:center;
  font-family:'Oswald',sans-serif;
  font-size:14px;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  margin-top:10px;
}
.bio .bio-text h3{
  font-size:28px;
  margin-bottom:14px;
}
.bio .bio-text p{
  margin:0 0 16px;
  font-size:18px;
  color:var(--ink-soft);
}
.bio .bio-text p:last-child{margin-bottom:0;}

@media (max-width:720px){
  .bio{
    grid-template-columns:1fr;
  }
  .bio .photo-wrap{
    max-width:280px;
    margin:0 auto;
  }
}

/* ---------- Photo gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;
}
.gallery-tile{
  aspect-ratio:4/3;
  border-radius:10px;
  border:2px dashed var(--line);
  background:var(--ivory-dim);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--ink-soft);
  overflow:hidden;
}
.gallery-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  cursor:pointer;
  transition:transform 0.25s ease;
}
.gallery-tile img:hover{
  transform:scale(1.06);
}
.gallery-tile .icon{
  font-size:34px;
  color:var(--gold);
}
.gallery-tile .cap{
  font-family:'Oswald',sans-serif;
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

/* ---------- Coming Soon (Photos page placeholder) ---------- */
.coming-soon{
  max-width:520px;
  margin:0 auto;
  text-align:center;
  background:#fff;
  border:2px dashed var(--line);
  border-radius:12px;
  padding:60px 40px;
}
.coming-soon-icon{
  font-size:52px;
  margin-bottom:18px;
}
.coming-soon h3{
  font-size:28px;
  margin-bottom:14px;
}
.coming-soon p{
  color:var(--ink-soft);
  font-size:18px;
  margin:0;
}
.coming-soon p a{
  color:var(--burgundy);
  font-weight:700;
  text-decoration:none;
}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:30px;
}
.contact-card h3{
  font-size:22px;
  margin-bottom:16px;
}
.contact-line{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  margin-bottom:14px;
}
.contact-line .icon{
  font-size:22px;
  width:28px;
  text-align:center;
  color:var(--burgundy);
}
.contact-line a{
  color:var(--navy);
  font-weight:700;
  text-decoration:none;
}
@media (max-width:800px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ---------- Directions ---------- */
.directions{text-align:center;}
.map-embed{
  margin-top:30px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
}
.map-embed iframe{
  width:100%;
  height:380px;
  border:0;
  display:block;
}

/* ---------- Footer ---------- */
footer{
  background:var(--navy-deep);
  color:var(--ivory-dim);
  padding:50px 20px 30px;
  text-align:center;
}
footer .brand{
  font-family:'Playfair Display',serif;
  color:var(--ivory);
  font-size:26px;
  margin-bottom:10px;
}
footer .social{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:22px 0 6px;
}
footer .social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  color:var(--gold-light);
  transition:background 0.2s;
}
footer .social a:hover{background:var(--gold);color:var(--navy-deep);}
footer .social svg{width:20px;height:20px;fill:currentColor;}
footer .fine{
  font-size:15px;
  color:rgba(251,246,234,0.65);
  max-width:600px;
  margin:18px auto 0;
  line-height:1.7;
}
footer a{color:var(--gold-light);text-decoration:none;}
footer .contact-line-footer{
  margin-top:16px;
  font-size:18px;
  justify-content:center;
}