:root{
  --ivory:#f4f1ea;
  --paper:#faf8f3;
  --ink:#17161a;
  --ink-dim:rgba(23,22,26,0.6);
  --hair:rgba(23,22,26,0.16);
  --hair-soft:rgba(23,22,26,0.08);
  --ease:cubic-bezier(.16,.8,.24,1);

  /* design-panel-controlled (defaults match the values above) */
  --bg:var(--ivory);
  --bg-rgb:244,241,234;
  --text:var(--ink);
  --text-dim:var(--ink-dim);
  --font-heading:"Bodoni Moda", serif;
  --font-body:"Jost", sans-serif;
  --heading-scale:1;
  --body-scale:1;
  --hero-bg:var(--ink);
  --about-bg:var(--bg);
  --music-bg:var(--bg);
  --connect-bg:var(--bg);
  --veil-rgb:0,0,0;
  --hero-focus-y:32;
}

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

html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:0;color:inherit;}

.wordmark{
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.04;
}

.eyebrow{
  font-family:var(--font-body);
  font-weight:400;
  font-size:calc(0.72rem * var(--body-scale));
  letter-spacing:0.24em;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* ---------- text link (signature CTA style) ---------- */
.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:calc(0.8rem * var(--body-scale));
  position:relative;
  padding-bottom:5px;
  cursor:pointer;
}
.text-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:1px; width:100%;
  background:currentColor;
  opacity:0.35;
  transition:opacity .3s var(--ease);
}
.text-link:hover::after{opacity:1;}
.text-link .arrow{transition:transform .3s var(--ease); display:inline-block;}
.text-link:hover .arrow{transform:translateX(5px);}

/* ---------- nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px 6vw;
  color:var(--paper);
  transition:background .4s var(--ease), padding .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(var(--bg-rgb, 244,241,234),0.92);
  backdrop-filter:blur(10px);
  color:var(--text);
  padding:18px 6vw;
  border-bottom:1px solid var(--hair);
}

.nav .mark{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:0.04em;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.nav ul{
  display:flex;
  gap:36px;
  list-style:none;
}

.nav a{
  font-family:var(--font-body);
  font-size:0.76rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.82;
  transition:opacity .3s var(--ease);
}
.nav a:hover, .nav a:focus-visible{opacity:1;}

.nav-toggle{
  width:22px; height:14px;
  position:relative;
  cursor:pointer;
}
.nav-toggle span{
  position:absolute;
  left:0; right:0;
  height:1px;
  background:currentColor;
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span:first-child{top:0;}
.nav-toggle span:last-child{top:100%;}

/* ---------- panels (shared) ---------- */
.panel{
  position:relative;
  width:100%;
}
.panel-media{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--hero-bg);
}
.panel-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s var(--ease);
}
.panel-media:hover img{transform:scale(1.035);}

/* ---------- hero ---------- */
.hero{
  height:100svh;
  min-height:560px;
  overflow:hidden;
}
.hero .panel-media{
  position:absolute;
  inset:0;
}
.hero .panel-media img{
  object-position:center calc(var(--hero-focus-y, 32) * 1%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.panel-caption{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:56px 6vw;
  pointer-events:none;
}
.panel-caption > *{pointer-events:auto;}
.hero .panel-caption{color:var(--paper); flex-direction:column; align-items:flex-start; gap:18px; transform:translateY(calc(var(--hero-lift, 95px) * -1));}
.hero .wordmark{font-size:calc(clamp(2.4rem, 6vw, 4.6rem) * var(--heading-scale));}
.hero .text-link{margin-top:var(--hero-cta-gap, 4px);}

/* ---------- panel-split (media + text) ---------- */
.panel-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:78vh;
}
#about{background:var(--about-bg);}
#music{background:var(--music-bg);}
#connect{background:var(--connect-bg);}
.panel-split .panel-media{
  aspect-ratio:auto;
  min-height:420px;
  display:flex;
  align-items:stretch;
}
.panel-split.reverse .panel-media{order:2;}
.panel-split.reverse .panel-text{order:1;}
.panel-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vw 7vw;
}
.panel-text .wordmark{
  font-size:calc(clamp(1.9rem, 3.4vw, 2.8rem) * var(--heading-scale));
  margin-bottom:22px;
}
.body-copy{
  font-size:calc(1.02rem * var(--body-scale));
  color:var(--text-dim);
  max-width:52ch;
  line-height:1.75;
}
.body-copy + .body-copy{margin-top:16px;}
.body-copy strong{color:var(--text); font-weight:500;}

.tag-row{
  margin-top:28px;
  font-size:calc(0.82rem * var(--body-scale));
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.spotify-embed{width:100%; height:100%; display:flex; align-items:center; background:var(--paper);}
.spotify-embed iframe{width:100%; border:0;}

.link-list{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
#streaming-row.link-list{
  flex-direction:row;
  flex-wrap:wrap;
  gap:12px 32px;
}

/* ---------- video panel ---------- */
.video-panel{
  height:88vh;
  min-height:480px;
  overflow:hidden;
}
.video-panel .panel-media{position:absolute; inset:0;}
.video-panel iframe{
  position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  min-width:177.78vh;
  min-height:56.25vw;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}
.video-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(var(--veil-rgb),0.1) 0%, rgba(var(--veil-rgb),0) 30%, rgba(var(--veil-rgb),0) 65%, rgba(var(--veil-rgb),0.6) 100%);
  pointer-events:none;
}
.video-panel .panel-caption{color:var(--paper); align-items:flex-end;}
.caption-text .eyebrow{opacity:0.85;}
.video-panel .wordmark{font-size:calc(clamp(1.6rem, 3vw, 2.4rem) * var(--heading-scale));}
.sound-toggle{
  font-family:var(--font-body);
  font-size:calc(0.78rem * var(--body-scale));
  letter-spacing:0.14em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:5px;
  cursor:pointer;
}
.sound-toggle::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:1px; width:100%;
  background:currentColor;
  opacity:0.4;
  transition:opacity .3s var(--ease);
}
.sound-toggle:hover::after{opacity:1;}

/* ---------- contact form ---------- */
.contact-form{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:420px;
}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{
  font-size:calc(0.72rem * var(--body-scale));
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.field input, .field textarea{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--hair);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  font-size:calc(0.98rem * var(--body-scale));
  padding:8px 2px;
  resize:vertical;
  transition:border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--text);}
.hp{position:absolute; opacity:0; height:0; width:0; pointer-events:none;}
.submit-link{margin-top:6px; align-self:flex-start;}
.form-status{
  font-size:0.8rem;
  letter-spacing:0.03em;
  color:var(--text-dim);
  min-height:1.2em;
}
.form-status.success{color:var(--text);}
.form-status.error{color:#a3453a;}

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- footer ---------- */
footer{
  padding:32px 6vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--hair);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .panel-split{grid-template-columns:1fr;}
  .panel-split .panel-media{min-height:320px;}
  .panel-split.reverse .panel-media, .panel-split.reverse .panel-text{order:initial;}
}

@media (max-width:720px){
  .nav{padding:22px 6vw;}
  .nav.scrolled{padding:16px 6vw;}
  .nav ul{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw, 320px);
    background:var(--bg);
    color:var(--text);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:28px;
    padding:0 10vw;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
  }
  .nav ul.open{transform:translateX(0);}
  .nav ul a{color:var(--text); opacity:0.75;}
  .panel-caption{padding:36px 6vw;}
  .hero .wordmark{font-size:calc(2.6rem * var(--heading-scale));}
  .hero .panel-media img{object-fit:contain;}
  .panel-text{padding:60px 6vw;}
  footer{flex-direction:column; gap:8px; text-align:center;}
}

/* ---------- bandcamp modal ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(23,22,26,0.6);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.modal-overlay.open{
  opacity:1;
  visibility:visible;
  transition:opacity .35s var(--ease), visibility 0s linear 0s;
}
.modal-box{
  position:relative;
  width:100%;
  max-width:420px;
  background:var(--bg);
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.5);
  transform:translateY(16px) scale(0.98);
  transition:transform .35s var(--ease);
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-close{
  position:absolute;
  top:-38px;
  right:0;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}
#bandcamp-frame{
  width:100%;
  height:352px;
  border:0;
  display:block;
}