/* =========================================================
   CARRIE KELLER — It Begins Within
   Editorial / minimal format (ref: buntmusic.com) on the
   Carrie Keller brand system.
   ========================================================= */

:root{
  --cream:      #F9F1E8;
  --cream-2:    #F7F3CA;
  --warm-black: #1D0C12;
  --warm-black-2:#340A09;
  --ink:        #333333;
  --red:        #FC2801;
  --red-2:      #FD2D2E;
  --red-deep:   #A20B00;
  --blue-2:     #4C4ED1;
  --pink:       #EC96A4;

  --font-display: 'Jost', 'Century Gothic', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Space Mono', 'SFMono-Regular', ui-monospace, monospace;

  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --radius: 3px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--warm-black);
  color:var(--cream);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:#fff; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Type primitives ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink); display:inline-block;
}
.eyebrow--red{ color:var(--red); }
.eyebrow--light{ color:rgba(249,241,232,.7); }

.h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; line-height:.98; font-size:clamp(2.2rem,6vw,4rem);
  text-wrap:balance;
}
.h2--light{ color:var(--cream); }
.lead{ font-size:clamp(1.08rem,1.6vw,1.32rem); line-height:1.5; }
.accent-red{ color:var(--red); }

/* ---------- Section grounds ---------- */
.section--cream{ background:var(--cream); color:var(--warm-black); }
.section--dark{ background:var(--warm-black); color:var(--cream); }
.section--cream, .section--dark{ padding:clamp(4.5rem,10vw,9rem) var(--pad); }

.section-head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,4rem); }
.section-head--split,
.section-head:has(.music__links){
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.section-head .h2{ margin-top:.5rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.82rem; padding:.9rem 1.6rem; border-radius:var(--radius);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-2); transform:translateY(-2px); }
.btn--dark{ background:var(--warm-black); color:var(--cream); }
.btn--dark:hover{ background:var(--red); transform:translateY(-2px); }
.btn--outline-dark{ border-color:rgba(29,12,18,.35); color:var(--warm-black); }
.btn--outline-dark:hover{ border-color:var(--red); color:var(--red); }

/* =========================================================
   NAV — minimal
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad);
  transition:background .3s ease, padding .3s ease;
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,8,10,.5), rgba(14,8,10,0));
  opacity:1; transition:opacity .3s ease;
}
.nav.scrolled::before{ opacity:0; }
.nav.scrolled{
  background:rgba(29,12,18,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding-top:.9rem; padding-bottom:.9rem;
}
.nav__brand{
  font-family:var(--font-display); font-weight:700; color:#fff;
  text-transform:uppercase; letter-spacing:.18em; font-size:.98rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5); display:flex; align-items:center;
}
.nav__brand img{ height:26px; width:auto; display:block; filter:drop-shadow(0 1px 10px rgba(0,0,0,.55)); }
@media (max-width:560px){ .nav__brand img{ height:21px; } }
.nav__links a{ text-shadow:0 1px 12px rgba(0,0,0,.5); }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem); }
.nav__links a{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em;
  color:#fff; text-transform:uppercase; transition:opacity .2s ease;
}
.nav__links a:hover{ opacity:.6; }
.nav.scrolled .nav__brand,
.nav.scrolled .nav__links a{ color:var(--cream); }

/* =========================================================
   HERO — full-bleed
   ========================================================= */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  animation:heroZoom 14s ease-out forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,8,10,.55) 0%, rgba(14,8,10,0) 22%, rgba(14,8,10,0) 55%, rgba(29,12,18,.85) 100%);
}
.hero__inner{
  position:absolute; left:0; right:0; bottom:clamp(3.5rem,9vh,7rem);
  padding:0 var(--pad); z-index:2;
}
.hero__logo{
  width:min(78vw,560px); filter:drop-shadow(0 8px 30px rgba(0,0,0,.5));
}
.hero__eyebrow{
  font-family:var(--font-mono); font-size:clamp(.7rem,1.4vw,.82rem);
  letter-spacing:.28em; text-transform:uppercase; color:rgba(249,241,232,.85);
  margin-top:1.4rem;
}
.hero__scroll{
  position:absolute; bottom:1.5rem; right:var(--pad); z-index:2;
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(249,241,232,.75);
}
.hero__scroll svg{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

/* =========================================================
   STATEMENT — big typographic moment
   ========================================================= */
.statement{ padding:clamp(5rem,14vw,11rem) var(--pad); text-align:center; }
.statement--cream{ background:var(--cream); color:var(--warm-black); }
.statement__eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--red); margin-bottom:1.5rem;
}
.statement__big{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:.92; letter-spacing:-.01em; text-wrap:balance;
  font-size:clamp(3.2rem,15vw,11rem);
}
.statement__sub{
  font-family:var(--font-body); max-width:34ch; margin:2rem auto 0;
  font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.5; color:var(--ink);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.about__quote{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,2.3vw,1.65rem);
  line-height:1.3; color:var(--cream); border-left:3px solid var(--red);
  padding-left:1.2rem; margin:1.8rem 0; max-width:40ch;
}
.about__media img{ width:100%; border-radius:var(--radius); box-shadow:0 40px 70px -40px rgba(0,0,0,.7); }
.about__copy .eyebrow--red{ margin-bottom:1.2rem; }
.about__statement{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; line-height:.98; text-wrap:balance;
  font-size:clamp(1.9rem,4.2vw,3.1rem); color:var(--cream); margin-bottom:1.6rem;
}
.about__copy p:not(.eyebrow){ margin-bottom:1.1rem; max-width:56ch; color:rgba(249,241,232,.85); font-size:1.05rem; line-height:1.65; }
.about__copy .lead{ color:var(--cream); }

.stats{ display:flex; gap:clamp(1.5rem,4vw,3rem); margin-top:2.2rem; border-top:1px solid rgba(249,241,232,.16); padding-top:1.6rem; }
.stat{ display:flex; flex-direction:column; }
.stat__num{ font-family:var(--font-mono); font-weight:700; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--red); line-height:1; }
.stat__label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(249,241,232,.6); margin-top:.5rem; }

/* =========================================================
   MARQUEE TICKER
   ========================================================= */
.ticker{
  background:var(--warm-black-2); color:var(--cream);
  border-top:1px solid rgba(249,241,232,.12); border-bottom:1px solid rgba(249,241,232,.12);
  overflow:hidden; padding:1.1rem 0; white-space:nowrap;
}
.ticker__track{ display:inline-flex; align-items:center; gap:1.6rem; animation:marquee 34s linear infinite; }
.ticker__track span{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(1.1rem,2.4vw,1.7rem);
}
.ticker__track i{ color:var(--red); font-style:normal; font-size:.7em; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   MUSIC — horizontal carousel
   ========================================================= */
.music .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.music__links{ display:flex; gap:.8rem; }
.rel-scroll{
  display:flex; gap:1.1rem; overflow-x:auto; padding:.5rem var(--pad) 1.5rem;
  margin:0 calc(var(--pad) * -1); scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.rel-scroll::-webkit-scrollbar{ height:6px; }
.rel-scroll::-webkit-scrollbar-thumb{ background:rgba(29,12,18,.25); border-radius:100px; }
.rel-card{
  flex:0 0 clamp(250px,74vw,330px); scroll-snap-align:start;
  aspect-ratio:4/5; position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem; border:1.5px solid rgba(29,12,18,.16); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(29,12,18,.02), rgba(29,12,18,.06));
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.rel-card:hover{ border-color:var(--red); transform:translateY(-4px); background:linear-gradient(180deg, rgba(252,40,1,.05), rgba(76,78,209,.05)); }
.rel-card__n{ position:absolute; top:1.3rem; left:1.5rem; font-family:var(--font-mono); font-size:.85rem; color:var(--red); }
.rel-card__tag{
  position:absolute; top:1.3rem; left:1.5rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:var(--red); padding:.28rem .6rem; border-radius:100px;
}
.rel-card__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.02; }
.rel-card__title em{ display:block; font-style:normal; font-weight:400; font-size:.55em; opacity:.55; margin-top:.3rem; }
.rel-card__meta{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:var(--ink); margin-top:.7rem; }
.rel-card__play{ position:absolute; top:1.2rem; right:1.4rem; width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(29,12,18,.25); display:grid; place-items:center; color:var(--warm-black); transition:.2s ease; }
.rel-card:hover .rel-card__play{ background:var(--red); border-color:var(--red); color:#fff; }
.rel-card--new{ background:linear-gradient(160deg, rgba(252,40,1,.1), rgba(76,78,209,.06)); border-color:rgba(252,40,1,.4); }
.rel-card__tag--soon{ background:transparent; color:var(--ink); border:1px solid rgba(29,12,18,.3); }

.section-head__note{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em; color:var(--ink); opacity:.75; margin-top:.7rem; }

/* Discography cards (with cover art) */
.disc-scroll{
  display:flex; gap:1.3rem; overflow-x:auto; padding:.5rem var(--pad) 1.6rem;
  margin:0 calc(var(--pad) * -1); scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.disc-scroll::-webkit-scrollbar{ height:6px; }
.disc-scroll::-webkit-scrollbar-thumb{ background:rgba(29,12,18,.25); border-radius:100px; }
.disc-card{ flex:0 0 clamp(210px,58vw,275px); scroll-snap-align:start; }
.disc-card__art{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 22px 44px -26px rgba(29,12,18,.55);
}
.disc-card__art img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.disc-card:hover .disc-card__art img{ transform:scale(1.05); }
.disc-card__play{
  position:absolute; right:.9rem; bottom:.9rem; width:48px; height:48px; border-radius:50%;
  background:var(--red); color:#fff; display:grid; place-items:center;
  opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 10px 22px -6px rgba(0,0,0,.5);
}
.disc-card:hover .disc-card__play{ opacity:1; transform:none; }
.disc-card__info{ padding:.95rem .15rem 0; }
.disc-card__title{ display:block; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:1.15rem; line-height:1.08; color:var(--warm-black); }
.disc-card__title em{ font-style:normal; font-weight:400; opacity:.5; font-size:.8em; }
.disc-card__meta{ display:block; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.03em; color:var(--ink); margin-top:.45rem; }
.disc-card__art--soon{
  display:grid; place-items:center; text-align:center; padding:1rem;
  background:linear-gradient(150deg, var(--red-deep) 0%, var(--red) 55%, var(--blue-2) 130%);
  color:#fff;
}
.disc-card__art--soon .tag{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; border:1px solid rgba(255,255,255,.6); padding:.3rem .65rem; border-radius:100px; display:inline-block; }
.disc-card__art--soon .big{ display:block; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.7rem; line-height:1; margin-top:.7rem; }

/* =========================================================
   LIVE / TOUR
   ========================================================= */
.live .section-head{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.tour{ list-style:none; max-width:var(--maxw); margin:0 auto; }
.tour__row{
  display:grid; grid-template-columns:88px 1fr 1.1fr auto; align-items:center; gap:1.2rem;
  padding:1.25rem 0; border-top:1px solid rgba(249,241,232,.14);
  transition:padding-left .25s ease;
}
.tour__row:hover{ padding-left:.6rem; }
.tour__date{ font-family:var(--font-mono); font-size:.9rem; color:var(--red); white-space:nowrap; }
.tour__event{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.1rem,2.4vw,1.6rem); }
.tour__venue{ font-family:var(--font-body); color:rgba(249,241,232,.7); font-size:.96rem; }
.tour__tickets{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); border:1px solid rgba(249,241,232,.3); padding:.5rem .95rem; border-radius:100px; justify-self:end; white-space:nowrap; transition:background .2s ease, color .2s ease, border-color .2s ease; }
a.tour__tickets:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.tour__tickets--none{ color:rgba(249,241,232,.4); border-color:rgba(249,241,232,.14); }
.tour__more{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(249,241,232,.5); padding:1.3rem 0 0; border-top:1px solid rgba(249,241,232,.14); }

.live__support{ max-width:var(--maxw); margin:clamp(2.5rem,5vw,3.5rem) auto 0; }
.live__support .eyebrow--red{ margin-bottom:.8rem; }
.live__inline{ font-size:1.02rem; line-height:1.7; color:rgba(249,241,232,.85); max-width:70ch; }

/* =========================================================
   FEATURE — full-bleed statement over photo
   ========================================================= */
.feature{ position:relative; min-height:92svh; display:flex; align-items:center; overflow:hidden; }
.feature__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,8,10,.9) 0%, rgba(14,8,10,.5) 55%, rgba(14,8,10,.75) 100%); }
.feature__inner{ position:relative; z-index:2; padding:0 var(--pad); max-width:var(--maxw); margin:0 auto; width:100%; }
.feature__big{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:.9; letter-spacing:-.01em; color:var(--cream);
  font-size:clamp(3rem,11vw,8rem); margin:1rem 0 1.4rem;
}
.feature__sub{ max-width:40ch; color:rgba(249,241,232,.82); font-size:clamp(1.05rem,1.7vw,1.28rem); margin-bottom:2rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact .section-head{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.contact__cards{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.ccard{ display:flex; flex-direction:column; gap:.3rem; padding:1.7rem; border:1.5px solid rgba(29,12,18,.16); border-radius:var(--radius); transition:.25s ease; }
.ccard:hover{ border-color:var(--red); transform:translateY(-4px); }
.ccard__label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-2); }
.ccard__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1.15rem; margin-top:.4rem; }
.ccard__org{ color:var(--ink); font-size:.92rem; }
.ccard__link{ font-family:var(--font-mono); font-size:.82rem; color:var(--red-deep); margin-top:.7rem; word-break:break-all; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:#120608; padding:clamp(3.5rem,7vw,5rem) var(--pad) 2.5rem; text-align:center; }
.footer__logo{ width:min(60vw,220px); margin:0 auto 1.8rem; }
.footer__socials{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1rem; margin-bottom:2.2rem; }
.footer__socials a{
  font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cream);
  border:1.5px solid rgba(249,241,232,.28); border-radius:100px;
  padding:.7rem 1.4rem; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.footer__socials a:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px); }
.footer__tag{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:1rem; color:var(--cream); }
.footer__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.4rem; margin-top:1.6rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; color:rgba(249,241,232,.45); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:820px){
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:460px; }
  .contact__cards{ grid-template-columns:1fr; max-width:460px; }
  .section-head--split{ align-items:flex-start; }
  .tour__row{ grid-template-columns:56px 1fr auto; row-gap:.15rem; }
  .tour__venue{ grid-column:2 / -1; font-size:.86rem; }
  .tour__tickets{ grid-row:1; }
  .feature__scrim{ background:linear-gradient(180deg, rgba(14,8,10,.55) 0%, rgba(14,8,10,.85) 100%); }
}
@media (max-width:520px){
  .stats{ flex-wrap:wrap; gap:1.4rem 2rem; }
  .music__links{ width:100%; }
  .btn{ flex:1; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__bg{ transform:none; }
}