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

:root {
  --bg:      #faf7f2;
  --bg-warm: #f5ede0;
  --ink:     #1e1a16;
  --mid:     #6b5f52;
  --light:   #b8a99a;
  --amber:   #c4621a;
  --rule:    #e2d9ce;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Lora', Georgia, serif;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── GLOW ── */
#glow {
  position: fixed;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: left, top;
  background: radial-gradient(
    circle,
    rgba(255, 145,  30, 0.52)  0%,
    rgba(225,  85,  10, 0.36) 26%,
    rgba(190,  50,   5, 0.16) 50%,
    transparent                68%
  );
  mix-blend-mode: multiply;
}

nav, section, footer { position: relative; z-index: 1; }

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 1.25rem 2.5rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  background: rgba(250,247,242,0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-brand {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 1.1rem;
  color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-links { display:flex; gap:2rem; }
.nav-links a {
  font-size: 0.82rem; color: var(--mid);
  text-decoration: none; letter-spacing: 0.04em;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-links a:hover,
.nav-links a.active { color: var(--amber); }

/* ── HERO ── */
.hero {
  min-height: 100dvh;
  min-height: 100vh;
  display: flex; flex-direction:column; justify-content:space-between;
  padding: 9rem 2.5rem 4rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}

.junction-svg {
  position: absolute;
  width: min(580px, 90vw);
  height: min(580px, 90vw);
  top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.hero-inner { position: relative; z-index: 1; }

/* ── NAV LOGO ── */
.nav-logo {
  height: 36px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
}

/* ── HERO PHOTO ── */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  opacity: 0.35;
  /* Warm colour wash over the photo */
  mix-blend-mode: luminosity;
}

/* Gradient over photo so text stays legible */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(250,247,242,0.15) 0%,
    rgba(250,247,242,0.55) 60%,
    rgba(250,247,242,0.92) 100%
  );
  pointer-events: none;
}

.eyebrow {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--amber);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(4rem, 16vw, 13rem);
  line-height: 0.9; letter-spacing: -0.025em;
}
.t1 { display:block; font-weight:700; color: var(--ink); }
.t2 { display:block; }
.t2 em { font-style:italic; font-weight:400; color: var(--amber); }

.hero-desc {
  margin-top: 2rem;
  font-size: 1rem; font-style:italic;
  color: var(--mid); max-width: 360px; line-height: 1.7;
}

.hero-meta {
  position: relative; z-index:1;
  display: flex; align-items:center; flex-wrap:wrap; gap:0.6rem;
  font-size: 0.7rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--light);
  padding-top: 2.5rem;
}
.hero-meta .dot { color: var(--amber); }

/* ── BAND INTRO ── */
.band-intro {
  background: var(--ink);
  padding: 5rem 2.5rem;
}
.band-intro-inner { max-width:680px; margin:0 auto; }
.band-intro p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  font-style:italic; font-weight:400;
  color: #e8ddd0; line-height:1.65;
}

/* ── LABEL ── */
.label {
  display: block;
  font-size: 0.68rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber);
  margin-bottom: 2rem;
}

/* ── MEMBERS ── */
.members-section {
  padding: 5rem 2.5rem;
  border-bottom: 1px solid var(--rule);
  max-width: 960px; margin: 0 auto;
}
.members {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--rule);
  background: var(--bg-warm);
}
.member {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction:column; gap:0.4rem;
}
.member:last-child { border-right:none; }
.member-name {
  font-family: 'Playfair Display', serif;
  font-style:italic; font-size:1.3rem; color:var(--ink);
}
.member-inst {
  font-size: 0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--light);
}
.member-bio {
  font-size: 0.82rem; color:var(--mid);
  line-height:1.65; margin-top:0.5rem; font-style:italic;
}

/* ── BOOKING ── */
.booking-section {
  padding: 6rem 2.5rem;
  background: var(--bg-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.booking-inner { max-width:540px; margin:0 auto; }
.booking-inner h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight:700; line-height:1.15; margin-bottom:1.25rem;
}
.booking-inner p {
  font-size: 0.95rem; color:var(--mid);
  margin-bottom: 2rem; max-width:420px;
}
.btn {
  display: inline-flex; align-items:center;
  min-height: 44px;
  padding: 0.75rem 2rem;
  background: var(--amber); color:#fff;
  font-family: 'Lora', serif; font-size:0.85rem;
  letter-spacing:0.06em; text-decoration:none;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover,
.btn:active { background: #a8511a; }

/* ── ABOUT PAGE ── */
.page-hero {
  padding: 10rem 2.5rem 5rem;
  border-bottom: 1px solid var(--rule);
}
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight:700; line-height:1.05;
  letter-spacing:-0.02em; margin-top:1rem;
}
.page-hero h1 em { font-style:italic; font-weight:400; color:var(--amber); }

.about-body {
  padding: 5rem 2.5rem;
  border-bottom: 1px solid var(--rule);
}
.about-text { max-width:620px; margin:0 auto; }
.about-text p {
  font-size:1.05rem; color:var(--mid);
  margin-bottom:1rem; line-height:1.85;
}

.about-where {
  padding: 4rem 2.5rem;
  border-bottom: 1px solid var(--rule);
  max-width: 960px; margin:0 auto;
}
.about-where-text p {
  font-size: 0.95rem; color:var(--mid); max-width:520px;
}

/* ── FOOTER ── */
footer {
  padding: 2rem 2.5rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  display: flex; justify-content:space-between; align-items:center;
  background: var(--ink);
}
.footer-name {
  font-family: 'Playfair Display', serif;
  font-style:italic; font-size:1rem; color:#e8ddd0;
}
.footer-loc {
  font-size: 0.7rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--mid);
}

/* ── TABLET ── */
@media(max-width:768px){
  .members { grid-template-columns: 1fr 1fr; }
  .member:nth-child(2) { border-right:none; }
  .member:nth-child(3) { border-top:1px solid var(--rule); border-right:1px solid var(--rule); }
  .member:nth-child(4) { border-top:1px solid var(--rule); border-right:none; }
}

/* ── MOBILE ── */
@media(max-width:480px){
  nav {
    padding: 0.9rem 1.25rem;
    padding-top: max(0.9rem, env(safe-area-inset-top));
  }
  .nav-brand { font-size:1rem; }
  .nav-links { gap:1.2rem; }
  .nav-links a { font-size:0.78rem; }

  .hero {
    padding: 6rem 1.25rem 3rem;
    padding-top: max(6rem, calc(env(safe-area-inset-top) + 5rem));
  }
  .junction-svg {
    width: 260px; height:260px;
    opacity: 0.3; top:55%; left:60%;
  }
  .hero h1 { font-size: clamp(3.5rem, 18vw, 5rem); }
  .nav-logo { height: 28px; }
  .hero-desc { font-size:0.92rem; margin-top:1.5rem; }
  .hero-meta { font-size:0.62rem; gap:0.5rem; padding-top:2rem; }

  .band-intro { padding:3.5rem 1.25rem; }
  .band-intro p { font-size:clamp(1.1rem, 4.5vw, 1.4rem); }

  .members-section { padding:3rem 1.25rem; }
  .members { grid-template-columns: 1fr; }
  .member { border-right:none !important; border-top:1px solid var(--rule) !important; }
  .member:first-child { border-top:none !important; }

  .booking-section { padding:3.5rem 1.25rem; }
  .booking-inner h2 { font-size:clamp(1.6rem, 8vw, 2.2rem); }

  .about-body { padding:3.5rem 1.25rem; }
  .about-where { padding:3rem 1.25rem; }

  .page-hero {
    padding: 8rem 1.25rem 3rem;
    padding-top: max(8rem, calc(env(safe-area-inset-top) + 6rem));
  }

  footer {
    padding: 1.5rem 1.25rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    flex-direction:column; gap:0.5rem; align-items:flex-start;
  }

  #glow { width:380px; height:380px; }
}