*, *::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; }

/* ── LOADING SCREEN ── */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
#loader.done { opacity:0; visibility:hidden; pointer-events:none; }

.loader-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.2rem;
  text-align: center;
  padding: 0 1.5rem;
  width: 100%; max-width: 560px;
}
.loader-logo {
  height: 130px; width: auto;
  mix-blend-mode: multiply;
  opacity: 0; transform: translateY(10px);
  animation: loaderLogoIn 0.7s ease 0.1s forwards;
}
@keyframes loaderLogoIn {
  to { opacity:1; transform:translateY(0); }
}
.loader-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 3.5vw, 1.5rem);
  color: var(--mid);
  letter-spacing: 0.08em;
  opacity: 0;
  animation: loaderFadeUp 0.6s ease 0.45s forwards;
}
@keyframes loaderFadeUp {
  from { opacity:0; transform:translateY(7px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── STAFF WRAPPER ── */
.loader-staff-wrap {
  position: relative;
  width: 100%;
  opacity: 0;
  animation: loaderFadeUp 0.6s ease 0.75s forwards;
}

/* The SVG staff */
.staff-svg {
  width: 100%; height: auto;
  display: block;
}

/* Staff lines */
.sline {
  stroke: var(--mid);
  stroke-width: 1;
  opacity: 0.45;
}
/* Bar lines */
.barline {
  stroke: var(--mid);
  stroke-width: 1.2;
  opacity: 0.4;
}
/* Treble clef */
.staff-clef {
  font-size: 52px;
  fill: var(--mid);
  opacity: 0.7;
  font-family: serif;
}
/* Time sig */
.staff-time {
  font-size: 13px;
  fill: var(--mid);
  opacity: 0.6;
  font-family: serif;
  font-weight: bold;
}
/* Flats */
.staff-flat {
  font-size: 14px;
  fill: var(--mid);
  opacity: 0.6;
  font-family: serif;
}
/* Note accidentals */
.note-acc {
  font-size: 11px;
  fill: var(--ink);
  font-family: serif;
}
/* Noteheads */
.nhead {
  fill: var(--ink);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nhead.nopen {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
/* Stems */
.stem {
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Ledger lines */
.ledger {
  stroke: var(--ink);
  stroke-width: 1.2;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Slurs */
.slur {
  stroke: var(--mid);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* Accidentals */
.note-acc {
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Barlines within notes */
.barline.snote {
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* Amber progress sweep */
.staff-progress {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(to right,
    rgba(196,98,26,0.06) 0%,
    rgba(196,98,26,0.12) 100%
  );
  border-right: 2px solid var(--amber);
  pointer-events: none;
  transition: width 0.05s linear;
  box-shadow: 2px 0 12px rgba(196,98,26,0.25);
}
/* Title label */
.staff-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 9px;
  fill: var(--light);
  text-anchor: middle;
  letter-spacing: 0.1em;
}
.staff-sharp {
  font-size: 13px;
  fill: var(--mid);
  opacity: 0.7;
  font-family: serif;
}
.barline-thick {
  stroke: var(--mid);
  stroke-width: 3;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.barline-thick.snote { opacity:0; }
.barline-thick.visible { opacity:0.5; }
.chord-sym {
  font-family: 'Playfair Display', serif;
  font-size: 9px;
  fill: var(--mid);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.chord-sym.visible { opacity: 0.75; }
.nfill { fill: var(--ink); }
.note-acc {
  font-size: 10px;
  fill: var(--ink);
  font-family: serif;
  opacity: 0;
  transition: opacity 0.25s ease;
}


/* snote groups hidden until revealed */
.snote { opacity:0; transition: opacity 0.2s ease; }
.snote .nhead, .snote .stem, .snote .ledger, .snote .note-acc { opacity:1; }
.snote.visible { opacity:1; }

.loader-sub {
  font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--light);
  opacity: 0;
  animation: loaderFadeUp 0.5s ease 1s forwards;
}

html { scroll-behavior: smooth; }

/* ── LOADING SCREEN ── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.loader-logo {
  height: 500px;
  width: auto;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: translateY(-50px);
  animation: loaderLogoIn 0.7s ease 0.1s forwards;
}
@keyframes loaderLogoIn {
  to { opacity: 1; transform: translateY(0); }
}
.loader-name {
  font-family: 'Playfair Display', serif;
  font-style: bold;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  color: var(--ink);
  letter-spacing: 0.08em;
  opacity: 0;
  animation: loaderFadeUp 0.6s ease 0.4s forwards;
}
@keyframes loaderFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.loader-bar-wrap {
  position: relative;
  width: min(480px, 82vw);
  height: 3px;
  background: var(--rule);
  overflow: visible;
  opacity: 0;
  animation: loaderFadeUp 0.5s ease 0.6s forwards;
}
/* Staff lines above and below the bar */
.loader-bar-wrap::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -8px;
  height: 1px;
  background: var(--rule);
  opacity: 0.6;
}
.loader-bar-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--rule);
  opacity: 0.6;
}
.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--amber), #f09040);
  transition: width 0.05s linear;
  position: relative;
}
.loader-bar::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  width: 3px;
  height: 9px;
  background: #f09040;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(240,144,64,0.8);
}
/* Musical notes that travel along the bar */
.loader-notes {
  position: absolute;
  top: -18px;
  left: 0;
  display: flex;
  gap: 0;
  pointer-events: none;
}
.loader-notes span {
  position: absolute;
  top: 0;
  font-size: 1.1rem;
  color: var(--amber);
  opacity: 0;
  transform: translateY(0);
  animation: noteFloat 2s ease-in-out infinite;
}
.loader-notes .n1 { animation-delay:0.0s;  font-size:1.2rem; }
.loader-notes .n2 { animation-delay:0.32s; font-size:0.9rem; }
.loader-notes .n3 { animation-delay:0.64s; font-size:1.3rem; }
.loader-notes .n4 { animation-delay:0.96s; font-size:0.85rem; }
.loader-notes .n5 { animation-delay:1.28s; font-size:1.1rem; }
.loader-notes .n6 { animation-delay:1.60s; font-size:1.4rem; }
.loader-notes .n7 { animation-delay:1.92s; font-size:0.95rem; }
@keyframes noteFloat {
  0%   { opacity:0;   transform: translateY(4px)  translateX(0px)   scale(0.7); }
  15%  { opacity:1;   transform: translateY(-6px)  translateX(3px)   scale(1.1); }
  40%  { opacity:0.9; transform: translateY(-14px) translateX(-2px)  scale(1); }
  70%  { opacity:0.5; transform: translateY(-22px) translateX(4px)   scale(0.9); }
  100% { opacity:0;   transform: translateY(-32px) translateX(0px)   scale(0.7); }
}
.loader-sub {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mid);
  opacity: 0;
  animation: loaderFadeUp 0.5s ease 0.8s forwards;
}

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: 1100px; height: 1100px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: left, top;
  background: radial-gradient(
    circle,
    rgba(255,140,20,0.82)  0%,
    rgba(230,90,10,0.62)  22%,
    rgba(200,55,5,0.38)   44%,
    rgba(170,30,0,0.12)   62%,
    transparent            76%
  );
  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: 0.9rem 2.5rem;
  padding-top: max(0.9rem, 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 {
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; gap:0.65rem;
}
.nav-logo { height:32px; width:auto; display:block; mix-blend-mode:multiply; }
.nav-brand-text {
  font-family:'Playfair Display',serif;
  font-weight:700; font-style:normal; font-size:1.1rem;
  color:var(--ink); letter-spacing:0.01em;
}
.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;
  min-height:44px; display:flex; align-items:center;
}
.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: 7rem 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-photo-wrap {
  position:absolute; inset:0;
  z-index:0; overflow:hidden;
}
.hero-photo {
  width:100%; height:140%;
  object-fit:cover; object-position:center 20%;
  opacity:0.18;
  transform: translateZ(0);
}
.hero::after {
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(160deg,
    rgba(250,247,242,0.05) 0%,
    rgba(250,247,242,0.55) 55%,
    rgba(250,247,242,0.97) 100%
  );
  pointer-events:none;
}
.hero-inner {
  position:relative; z-index:2;
  transform: translateZ(0);
}
.eyebrow {
  display:block; font-size:0.72rem; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--amber);
  margin-bottom:1.5rem; font-weight:600;
}
.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); transform:translateZ(0); }
.t2 { display:block; transform:translateZ(0); padding-bottom:1.5rem; }
.t2 em { font-style:italic; font-weight:400; color:var(--amber); }
.hero-desc {
  margin-top:1.5rem; font-size:1.05rem; font-style:italic;
  color:var(--ink); line-height:1.7; max-width:380px;
  opacity:1 !important;
}
.hero-cta {
  display:inline-block; margin-top:1.75rem;
  font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--amber); text-decoration:none;
  border-bottom:1px solid var(--amber); padding-bottom:0.15rem;
  transition:opacity 0.2s; -webkit-tap-highlight-color:transparent;
  min-height:44px; display:inline-flex; align-items:center;
}
.hero-cta:hover { opacity:0.7; }
.hero-meta {
  position:relative; z-index:2;
  display:flex; align-items:center; flex-wrap:wrap; gap:0.6rem;
  font-size:0.7rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--mid);
  padding-top:2.5rem;
  transform:translateZ(0);
  opacity:1 !important;
}
.hero-meta .dot { color:var(--amber); }

/* ── ABOUT HERO ── */
.about-hero {
  position:relative;
  height:75vh; min-height:400px;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  margin-top:62px;
}
.about-hero-photo {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 20%;
  opacity:0.55; filter:grayscale(15%);
  z-index:0;
}
.about-hero::after {
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom,
    rgba(250,247,242,0.05) 0%,
    rgba(250,247,242,0.7)  75%,
    rgba(250,247,242,1)    100%
  );
  pointer-events:none;
}
.about-hero-inner {
  position:absolute; bottom:3rem; left:2.5rem; right:2.5rem; z-index:2;
}
.about-hero-inner 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:0.75rem;
}
.about-hero-inner h1 em { font-style:italic; font-weight:400; 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; 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 (home) ── */
.members-section {
  padding:5rem 2.5rem 5rem;
  border-bottom:1px solid var(--rule);
  background:var(--bg-warm);
  overflow:hidden;
}
.members-header {
  max-width:960px; margin:0 auto;
  padding:0 0 2.5rem;
  display:flex; align-items:baseline; gap:2rem;
}
.members-header .label { margin-bottom:0; }
.members-sub {
  font-family:'Playfair Display',serif;
  font-style:italic; font-size:1rem; color:var(--mid);
}
.members {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem; max-width:960px; margin:0 auto;
}
.member {
  position:relative;
  opacity:0; transform:translateY(40px) translateZ(0);
  transition:opacity 0.6s ease, transform 0.6s ease;
  cursor:default;
}
.member.visible { opacity:1; transform:translateY(0) translateZ(0); }
.member-photo-wrap {
  position:relative; aspect-ratio:3/4; overflow:hidden;
}
.member-photo {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
  filter:grayscale(20%) brightness(0.95);
  transition:filter 0.5s ease, transform 0.6s ease;
  transform:translateZ(0);
}
.member:hover .member-photo {
  filter:grayscale(0%) brightness(1);
  transform:scale(1.02) translateZ(0);
}
.member-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(30,26,22,0.55) 0%,
    rgba(30,26,22,0.1)  40%,
    transparent         65%
  );
}
.member-text {
  position:absolute; bottom:0; left:0; right:0;
  padding:1.25rem 1.25rem 1.5rem;
  display:flex; flex-direction:column; gap:0.2rem;
}
.member-num {
  font-size:0.58rem; letter-spacing:0.18em;
  color:var(--amber); opacity:0.9;
}
.member-name {
  font-family:'Playfair Display',serif;
  font-style:italic; font-size:1.25rem;
  color:#f5ede0; line-height:1;
}
.member-inst {
  font-size:0.65rem; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(232,221,208,0.7);
}
.member-bio { display:none; }

/* ── MUSICIANS (about) ── */
.musicians-section {
  padding:5rem 2.5rem;
  border-bottom:1px solid var(--rule);
  max-width:960px; margin:0 auto;
}
.musicians {
  display:grid; grid-template-columns:repeat(2,1fr); gap:3rem 4rem;
}
.musician { display:flex; flex-direction:column; gap:1.25rem; }
.musician-photo-wrap {
  width:100%; aspect-ratio:3/4;
  overflow:hidden; background:var(--bg-warm);
}
.musician-photo {
  width:100%; height:100%;
  object-fit:cover; object-position:center 15%;
  display:block;
  transition:transform 0.4s ease;
  transform:translateZ(0);
}
.musician-photo-wrap:hover .musician-photo { transform:scale(1.03) translateZ(0); }
.musician-info { display:flex; flex-direction:column; gap:0.4rem; }
.musician-info .member-name {
  font-family:'Playfair Display',serif;
  font-style:italic; font-size:1.4rem;
  color:var(--ink); line-height:1;
}
.musician-info .member-inst {
  font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--amber);
}
.musician-info .member-bio {
  display:block; font-size:0.9rem;
  color:var(--mid); line-height:1.7;
  margin-top:0.4rem; font-style:italic;
}

/* ── ABOUT BODY ── */
.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; }

/* ── BAND PHOTO SECTION ── */
.band-photo-section {
  max-width:1000px; margin:0 auto;
  padding:4rem 2.5rem 6rem;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; position:relative;
}
.band-photo-wrap {
  opacity:0; transform:translateX(-80px) translateZ(0);
  transition:opacity 0.8s ease, transform 0.8s ease;
  position:relative; z-index:0;
}
.band-photo-wrap.visible { opacity:1; transform:translateX(0) translateZ(0); }
.band-photo-full {
  width:100%; aspect-ratio:3/4;
  object-fit:cover; object-position:center 15%; display:block;
}
.band-photo-caption {
  display:flex; flex-direction:column; gap:0.1em;
  margin-left:-80px; position:relative; z-index:1;
  background:linear-gradient(to right,
    transparent 0%,
    rgba(250,247,242,0.82) 18%,
    rgba(250,247,242,0.97) 40%
  );
  padding:2rem 1.5rem 2rem 3rem;
}
.caption-line1,
.caption-line2,
.caption-line3 {
  font-family:'Playfair Display',serif;
  font-style:italic; line-height:1.1;
  color:var(--ink); opacity:0;
  transform:translateX(60px) translateZ(0);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.caption-line1 {
  font-size:clamp(2.8rem,6vw,5rem);
  font-weight:700; font-style:normal; color:var(--amber);
}
.caption-line2 { font-size:clamp(2.2rem,5vw,4rem); font-weight:400; }
.caption-line3 { font-size:clamp(2.2rem,5vw,4rem); font-weight:700; font-style:normal; }
.caption-line1.visible { opacity:1; transform:translateX(0) translateZ(0); }
.caption-line2.visible { opacity:1; transform:translateX(0) translateZ(0); transition-delay:0.12s; }
.caption-line3.visible { opacity:1; transform:translateX(0) translateZ(0); transition-delay:0.24s; }
.caption-cta {
  display:inline-flex; align-items:center;
  margin-top:1.5rem; font-size:0.78rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--amber);
  text-decoration:none; border-bottom:1px solid currentColor;
  padding-bottom:0.2rem; min-height:44px;
  opacity:0; transform:translateY(16px) translateZ(0);
  transition:opacity 0.6s ease 0.38s, transform 0.6s ease 0.38s;
  -webkit-tap-highlight-color:transparent;
}
.caption-cta.visible { opacity:1; transform:translateY(0) translateZ(0); }
.caption-cta:hover { opacity:0.65 !important; }

/* ── 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;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.2s;
  word-break:break-all;
}
.btn:hover, .btn:active { background:#a8511a; }

/* ── FOOTER ── */
footer {
  padding:1.75rem 2.5rem;
  padding-bottom:max(1.75rem, env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; align-items:center;
  background:var(--ink);
}
.footer-logo { height:40px; width:auto; display:block; filter:invert(1); opacity:0.75; }
.footer-loc { font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--mid); }

/* ── TABLET 768px ── */
@media(max-width:768px){
  .members { grid-template-columns:1fr 1fr; }
  .musicians { grid-template-columns:1fr 1fr; gap:2rem; }
  .band-photo-section { grid-template-columns:1fr; gap:2rem; }
  .band-photo-full { aspect-ratio:4/3; }
  .band-photo-caption { margin-left:0; padding:1.5rem 0 0; background:none; }
}

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

  .hero {
    padding:6rem 1.25rem 1.5rem;
    padding-top:max(6rem, calc(env(safe-area-inset-top) + 5rem));
  }
  .junction-svg { width:220px; height:220px; opacity:0.25; top:55%; left:65%; }
  .hero h1 { font-size:clamp(3.2rem,16vw,4.5rem); }
  .hero-desc { font-size:0.92rem; margin-top:1.25rem; max-width:100%; }
  .hero-meta { font-size:0.62rem; gap:0.4rem; padding-top:0rem; }

  .about-hero { height:60vw; min-height:240px; margin-top:55px; }
  .about-hero-inner { bottom:0.5rem; left:1.25rem; right:1.25rem; }
  .about-hero-inner h1 { font-size:clamp(1.8rem,9vw,3rem); }

  .band-intro { padding:0.5rem 1.25rem; }
  .band-intro p { font-size:clamp(1rem,4.5vw,1.3rem); }

  .members-section { padding:3rem 1.25rem 3.5rem; }
  .members { grid-template-columns:1fr 1fr; gap:0.75rem; }
  .members-header { padding:0 0 1.5rem; flex-direction:column; gap:0.4rem; }
  .member-name { font-size:1rem; }
  .member-inst { font-size:0.58rem; }

  .musicians-section { padding:3rem 1.25rem; }
  .musicians { grid-template-columns:1fr; gap:2rem; }
  .musician-photo-wrap { aspect-ratio:1/1; }
  .musician-photo { object-position:center 10%; }

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

  .band-photo-section { padding:2.5rem 1.25rem 3.5rem; }
  .caption-line1 { font-size:clamp(2rem,11vw,2.8rem); }
  .caption-line2, .caption-line3 { font-size:clamp(1.6rem,9vw,2.2rem); }

  .booking-section { padding:3rem 1.25rem; }
  .booking-inner h2 { font-size:clamp(1.6rem,7vw,2.2rem); }
  .btn { font-size:0.78rem; padding:0.75rem 1.25rem; }

  footer {
    padding:1.25rem;
    padding-bottom:max(1.25rem, env(safe-area-inset-bottom));
  }
  .footer-logo { height:28px; }

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