@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --bg:#181c1d;
  --ink:#e8e2d4;
  --ink-dim:#948d7e;
  --line:rgba(232,226,212,.14);
  --accent:#8a2e22;
  --wall-blue:#4a5c60;
  --wood:#4a3220;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(10,9,8,.22), rgba(10,9,8,.22)),
    url('img/tartan.jpg');
  background-repeat:no-repeat, repeat;
  background-size:100% 100%, 280px 280px;
  background-position:center, top left;
  background-attachment:fixed, fixed;
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:300;
  line-height:1.6;
}

.wrap{max-width:1200px; margin:0 auto; padding:0 32px}

/* ---------- NAV ---------- */
header{
  position:absolute; top:0; left:0; right:0; z-index:50;
  padding:20px 0;
  background:rgba(10,9,8,.9);
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width:700px){
  header{position:static}
}
.nav-row{
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  max-width:1200px; margin:0 auto; padding:0 32px;
  gap:20px;
  flex-wrap:wrap;
}
@media (max-width:860px){
  .nav-row{flex-wrap:nowrap}
}
.nav-socials{display:flex; gap:10px; margin-left:28px}
.nav-socials a{
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-dim);
  border:1px solid var(--line);
  transition:color .2s, border-color .2s;
}
.nav-socials a svg{width:15px; height:15px}
.nav-socials a:hover{color:var(--ink); border-color:var(--ink-dim)}
@media (max-width:860px){
  .nav-socials{order:1; margin:0 auto}
  .nav-socials a{width:26px; height:26px}
  .nav-socials a svg{width:13px; height:13px}
  .nav-burger{order:2; margin-left:0}
}
@media (max-width:500px){
  .nav-socials{gap:6px}
  .nav-socials a{width:24px; height:24px}
}
.nav-mark{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:1.3rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.01em;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.nav-tag{
  font-family:'Work Sans', sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
@media (max-width:700px){
  .nav-tag{display:none}
}
nav.links{display:flex; gap:34px; margin-left:auto}
nav.links a{
  color:var(--ink-dim);
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
nav.links a:hover{color:var(--ink)}
nav.links a.active{color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:3px}

.nav-burger{
  display:none;
  width:34px; height:34px;
  background:none; border:none;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
  cursor:pointer;
  margin-left:auto;
}
.nav-burger span{
  display:block; width:24px; height:2px; background:var(--ink);
  transition:transform .25s, opacity .25s;
}
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:860px){
  nav.links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(10,9,8,.97);
    flex-direction:column; gap:0;
    padding:10px 32px 20px;
    margin-left:0;
  }
  nav.links.open{display:flex}
  nav.links a{padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-burger{display:flex}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.promo-sticker{
  position:absolute;
  bottom:60px; right:60px;
  z-index:4;
  width:150px; height:150px;
  border-radius:50%;
  background:rgba(14,13,12,.72);
  backdrop-filter:blur(2px);
  border:1px solid rgba(232,226,212,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  text-decoration:none;
  transition:transform .25s ease, border-color .25s ease;
}
.promo-sticker:hover{transform:scale(1.05); border-color:var(--accent)}
.promo-sticker .ps-date{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:700;
  font-size:2.5rem; color:var(--accent); line-height:1;
}
.promo-sticker .ps-label{
  margin-top:8px;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink);
}
@media (max-width:600px){
  .promo-sticker{width:112px; height:112px; bottom:30px; right:30px}
  .promo-sticker .ps-date{font-size:1.4rem}
  .promo-sticker .ps-label{font-size:.56rem}
}
.hero-bg{
  position:absolute; inset:0;
  background-image:url('img/hero.jpg');
  background-size:cover;
  background-position:center 30%;
  filter:contrast(1.05) saturate(1.02) brightness(1.05);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(15,15,14,.8) 0%, rgba(15,15,14,.08) 42%, rgba(15,15,14,.2) 100%);
}
@media (max-width:700px){
  .hero{min-height:auto; aspect-ratio:16/9; background:#000}
  .hero-bg{background-size:contain !important; background-repeat:no-repeat; background-position:center !important}
}
.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding:0 32px 90px;
  max-width:1200px; margin:0 auto;
}
.eyebrow{
  display:flex; align-items:center; gap:16px;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:26px;
}
.eyebrow .rule{width:44px; height:1px; background:var(--accent)}
.hero h1{
  font-family:'Playfair Display', serif;
  font-weight:400;
  font-style:italic;
  font-size:clamp(3.4rem, 9vw, 8rem);
  line-height:.98;
  margin:0 0 30px;
  color:var(--ink);
  max-width:900px;
}
.hero .lede{
  max-width:420px;
  color:var(--ink-dim);
  font-size:1rem;
  font-weight:300;
  margin-bottom:40px;
}
.btn-row{display:flex; gap:0; align-items:center; flex-wrap:wrap; gap:38px}
.btn-line{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;
  transition:border-color .2s, color .2s;
}
.btn-line:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- NEXT SHOW STRIP ---------- */
.next-show{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
.next-show .wrap{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.next-show .label{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
}
.next-show .info{
  font-family:'Playfair Display', serif; font-style:italic;
  font-size:1.3rem; color:var(--ink);
}
.next-show .info strong{font-style:normal; font-weight:600; color:var(--accent)}
.next-show a{color:var(--ink-dim); text-decoration:none; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line)}

/* ---------- SECTION ---------- */
section.block{padding:120px 0}
.block-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:60px; flex-wrap:wrap; gap:20px;
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
}
.block-head h2{
  font-family:'Playfair Display', serif; font-weight:400; font-style:italic;
  font-size:clamp(2rem, 4vw, 3.2rem); margin:0; color:var(--ink);
}
.block-head .idx{font-size:.75rem; letter-spacing:.12em; color:var(--ink-dim); text-transform:uppercase}

.about-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:70px; align-items:start}
.about-grid p{color:var(--ink-dim); font-weight:300; margin:0 0 20px; max-width:520px}
.about-grid p:first-child{
  font-family:'Playfair Display', serif; font-style:italic; font-size:1.5rem; color:var(--ink);
  line-height:1.4;
}
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr}
}

.social-icons-row{display:flex; gap:14px; flex-wrap:wrap}
.social-icons-row a{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  color:#2a2620;
  border:1px solid rgba(0,0,0,.18);
  transition:color .2s, border-color .2s, background .2s;
}
.social-icons-row a svg{width:21px; height:21px}
.social-icons-row a:hover{color:#fff; background:var(--accent); border-color:var(--accent)}

/* ---------- STICKER CARD (light, for readability over bright tiles) ---------- */
section.block .wrap, .next-show .wrap{
  background:#ece3cf;
  color:#2a2620;
  padding:30px 36px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.3) inset;
}
.card-rule{
  border:none;
  border-top:1px dashed rgba(0,0,0,.18);
  margin:0;
}
section.block .wrap .block-head{border-bottom-color:rgba(0,0,0,.15)}
section.block .wrap .block-head h2, .next-show .wrap strong{color:#2a2620}
section.block .wrap .idx, section.block .wrap .label{color:#6b6252}
section.block .wrap .eyebrow{color:#6b6252}
section.block .wrap .eyebrow .rule{background:var(--accent)}

.gig-row{border-bottom-color:rgba(0,0,0,.14)}
.gig-row .g-date{color:#8a6a2a}
.gig-row .g-venue{color:#2a2620}
.gig-row .g-place{color:#6b6252}
.gig-row .g-tag{color:#6b6252; border-color:rgba(0,0,0,.2)}
.gig-row.highlight .g-venue{color:var(--accent)}
.gig-row.highlight .g-tag{color:var(--accent); border-color:var(--accent)}

.contact-row{color:#2a2620; border-bottom-color:rgba(0,0,0,.14)}
.contact-icon{color:#6b6252}
.contact-row:hover{color:var(--accent)}

.member-cap .m-name{color:#f5efe2}
.member-cap .m-role{color:#d8cfb8}

.btn-line{color:#2a2620; border-bottom-color:#2a2620}
.btn-line:hover{color:var(--accent); border-color:var(--accent)}

.cta-block{border-color:rgba(0,0,0,.12)}
.cta-block p{color:#6b6252 !important}

.next-show{border-top-color:transparent; border-bottom:none}
.next-show .label{color:#6b6252}
.next-show .info{color:#2a2620}
.next-show a{color:#6b6252; border-bottom-color:rgba(0,0,0,.2)}

/* ---------- PAGE BANNER (photo strip at top of a subpage) ---------- */
.page-banner{
  position:relative;
  height:46vh;
  min-height:300px;
  background-size:cover;
  background-position:center 30%;
  overflow:hidden;
}
.page-banner::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, var(--bg) 0%, rgba(24,28,29,.15) 55%, rgba(24,28,29,.35) 100%);
}
@media (max-width:700px){
  .page-banner{height:34vh; min-height:220px}
}

/* ---------- SIMPLE PAGE HEADER (non-photo pages) ---------- */
.page-head{
  padding:170px 0 70px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(rgba(10,9,8,.75), rgba(10,9,8,.6));
}
.page-head h1{
  font-family:'Playfair Display', serif;
  font-weight:400; font-style:italic;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  margin:22px 0 0;
  color:var(--ink);
  text-shadow:0 2px 20px rgba(0,0,0,.6), 0 1px 0 rgba(0,0,0,.4);
}
.page-head .eyebrow{text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* ---------- GIG LIST ---------- */
.gig-list{display:flex; flex-direction:column}
.gig-row{
  display:flex; align-items:baseline; gap:28px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.gig-list .gig-row:last-child{border-bottom:none}
.gig-row .g-date{
  font-family:'Work Sans', sans-serif;
  font-size:.78rem; letter-spacing:.1em; color:var(--ink-dim);
  min-width:130px;
}
.gig-row .g-what{flex:1; min-width:220px}
.gig-row .g-venue{
  font-family:'Playfair Display', serif; font-style:italic;
  font-size:1.5rem; color:var(--ink);
}
.gig-row .g-place{color:var(--ink-dim); font-size:.85rem; margin-top:2px}
.gig-row .g-tag{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--line); padding:6px 12px;
  white-space:nowrap; align-self:center;
}
.gig-row.cancelled .g-venue{text-decoration:line-through; opacity:.55}
.gig-row.cancelled .g-place{opacity:.5}
.gig-row.cancelled .g-tag{color:var(--ink-dim); border-color:var(--line)}
.gig-row.highlight .g-venue{color:var(--accent); font-size:1.9rem}
.gig-row.highlight .g-tag{border-color:var(--accent); color:var(--accent)}

/* ---------- MEMBER CARDS ---------- */
.members{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
  background:var(--line);
}
.members.row-two{grid-template-columns:repeat(2, 1fr); max-width:66.6%; margin:2px auto 0}
@media (max-width:820px){
  .members, .members.row-two{grid-template-columns:1fr; max-width:100%}
}
.member{
  position:relative; background:var(--bg); aspect-ratio:3/4; overflow:hidden;
}
.member img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.85);
  transition:filter .3s;
}
.member:hover img{filter:grayscale(.2) contrast(1.1) brightness(.95)}
.member-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px 22px;
  background:linear-gradient(0deg, rgba(10,10,10,.9) 0%, transparent 100%);
}
.member-cap .m-name{font-family:'Playfair Display', serif; font-style:italic; font-size:1.25rem; color:var(--ink)}
.member-cap .m-role{font-size:.7rem; letter-spacing:.06em; color:var(--ink-dim); margin-top:2px}

/* ---------- CONTACT LIST ---------- */
.contact-list{display:flex; flex-direction:column}
.contact-row{
  display:flex; align-items:center; gap:20px;
  padding:22px 0;
  border-bottom:1px solid rgba(0,0,0,.14);
  color:#2a2620; text-decoration:none;
  font-family:'Playfair Display', serif; font-style:italic;
  font-size:1.2rem;
  transition:color .2s;
}
.contact-list .contact-row:last-child{border-bottom:none}
.contact-row:hover{color:var(--accent)}
.contact-icon{width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#6b6252}
.contact-icon svg{width:18px; height:18px}

/* ---------- PRODUCT / MEDIA ---------- */
.media-frame{max-width:640px; margin:0 auto 60px}
.media-frame img{width:100%; display:block; filter:saturate(.85) contrast(1.05)}

.video-box{position:relative; padding-top:56.25%; background:#000; border:1px solid var(--line)}
.video-box iframe{position:absolute; inset:0; width:100%; height:100%}
.video-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line)}
@media (max-width:760px){.video-grid{grid-template-columns:1fr}}

.cta-block{
  border:1px solid var(--line);
  padding:70px 40px;
  text-align:center;
}

footer{
  border-top:1px solid var(--line);
  padding:50px 0;
  color:var(--ink-dim);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px}
footer a{color:var(--ink-dim); text-decoration:none; margin-left:20px}
footer a:hover{color:var(--ink)}