/* ==========================================================================
   KYLIE TROUT — dark cheetah / centered
   ========================================================================== */

:root{
  --ink:        #0b0704;
  --cream:      #f3e9db;
  --cream-dim:  #c9bba7;
  --gold:       #d3a24c;
  --gold-soft:  #e3c081;
  --line:       rgba(211,162,76,.28);

  --font-display: "Pirata One", "Old English Text MT", UnifrakturMaguntia, serif;
  --font-ui:     "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body:   "Cormorant Garamond", Georgia, serif;

  --wrap: 880px;
}

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

/* author display rules must not defeat the hidden attribute */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.7;
  text-align:center;               /* she likes everything centered */
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

/* ---------- background stack: cheetah print under a full-site shadow ------ */
.bg-cheetah{
  position:fixed; inset:0; z-index:-3;
  background-image:url("../assets/img/cheetah-tile.svg");
  background-size:440px 440px;
  background-repeat:repeat;
  background-attachment:fixed;
  filter:saturate(.8) brightness(.95);
}
.bg-shadow{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 115% 80% at 50% 30%, rgba(11,7,4,.42) 0%, rgba(11,7,4,.74) 42%, rgba(6,4,2,.92) 76%, rgba(4,3,1,.97) 100%),
    linear-gradient(rgba(11,7,4,.42), rgba(11,7,4,.42));
}
.bg-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.site-header{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:1.6rem 1.25rem 1.5rem;
}
/* brand lockup: real logo art, with a typeset fallback if it's missing */
.brand{ display:block; text-decoration:none; color:var(--cream); line-height:1; }
.brand-logo{
  width:clamp(175px, 30vw, 260px);
  height:auto; margin:0 auto;
  filter:drop-shadow(0 3px 22px rgba(0,0,0,.85)) drop-shadow(0 0 44px rgba(211,162,76,.14));
}
.brand-sm .brand-logo{ width:clamp(130px, 22vw, 175px); }
.brand-text{
  display:none;
  font-family:var(--font-display);
  font-size:clamp(2rem, 5.5vw, 3.2rem);
  letter-spacing:.02em;
  line-height:1.05;
  text-shadow:0 2px 26px rgba(0,0,0,.85), 0 0 46px rgba(211,162,76,.16);
}
.brand.img-missing .brand-logo{ display:none; }
.brand.img-missing .brand-text{ display:block; }
.brand-sm .brand-text{ font-size:clamp(1.6rem,4vw,2.2rem); }

.site-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.1rem,4vw,2.4rem);
}
.site-nav a{
  font-family:var(--font-ui); font-weight:300;
  font-size:.82rem; letter-spacing:.30em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none;
  padding:.35rem 0; position:relative; transition:color .25s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .3s ease, left .3s ease;
}
.site-nav a:hover{ color:var(--gold-soft); }
.site-nav a.is-current{ color:var(--gold-soft); }
.site-nav a.is-current::after{ width:100%; left:0; }
.site-nav a:hover::after{ width:100%; left:0; }

/* ---------- socials ---------- */
.social-row{ display:flex; justify-content:center; gap:1.05rem; margin-top:.35rem; }
.social-row a{
  color:var(--cream-dim); line-height:0; opacity:.85;
  transition:color .25s ease, transform .25s ease, opacity .25s ease;
}
.social-row a:hover{ color:var(--gold); transform:translateY(-2px); opacity:1; }
.social-row svg{ width:19px; height:19px; fill:currentColor; }

/* ---------- hero ---------- */
.hero{ padding:.5rem 1rem 3.5rem; }
.hero-frame{
  position:relative; max-width:1180px; margin:0 auto;
  /* header (logo+nav) eats ~340px; keep the CTA row on screen on load */
  min-height:clamp(400px, calc(92vh - 340px), 760px);
  display:grid; place-items:end center;
  overflow:hidden;
  border:1px solid var(--line);
  background:#0d0805;
  box-shadow:0 34px 90px rgba(0,0,0,.75);
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  filter:brightness(.72) contrast(1.05) saturate(.95);
}
.hero-frame.img-missing .hero-img{ display:none; }
.hero-frame.img-missing{
  background:
    radial-gradient(ellipse at 50% 40%, #241708 0%, #100a05 70%),
    url("../assets/img/cheetah-tile.svg") center/300px;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 85% 70% at 50% 55%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.85) 100%),
    linear-gradient(to top, rgba(6,4,2,.94) 0%, rgba(6,4,2,.30) 52%, rgba(6,4,2,.42) 100%);
}
.hero-inner{ position:relative; padding:2rem 1.25rem 3.4rem; max-width:760px; }

.eyebrow{
  font-family:var(--font-ui); font-weight:300;
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-soft); margin:0 0 .5rem;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.5rem, 7.5vw, 4.8rem);
  line-height:1.02; margin:0 0 1.7rem; font-weight:400;
  letter-spacing:.015em;
  color:var(--cream);
  text-shadow:0 4px 34px rgba(0,0,0,.9), 0 0 60px rgba(211,162,76,.20);
}

/* ---------- buttons ---------- */
.btn-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; }
.btn{
  display:inline-block;
  font-family:var(--font-ui); font-weight:400;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  padding:.95rem 2.1rem; text-decoration:none; cursor:pointer;
  border:1px solid var(--gold); border-radius:1px;
  transition:background .28s ease, color .28s ease, box-shadow .28s ease, transform .18s ease;
}
.btn-sm{ padding:.7rem 1.5rem; font-size:.72rem; }
.btn-solid{
  background:var(--gold); color:#140c04;
  box-shadow:0 8px 26px rgba(211,162,76,.22);
}
.btn-solid:hover{ background:var(--gold-soft); transform:translateY(-2px); }
.btn-ghost{ background:rgba(10,6,3,.45); color:var(--cream); backdrop-filter:blur(2px); }
.btn-ghost:hover{ background:var(--gold); color:#140c04; transform:translateY(-2px); }

/* ---------- sections ---------- */
.section{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(3.2rem,8vw,5.2rem) 1.4rem;
}

/* Centered dark column so copy sits on near-black while the cheetah still
   frames the page at the margins. Soft-edged so it never reads as a box. */
.section::before,
.portrait-section::before,
.site-footer::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(6,4,2,0) 0%,
    rgba(6,4,2,.72) 14%,
    rgba(6,4,2,.90) 34%,
    rgba(6,4,2,.90) 66%,
    rgba(6,4,2,.72) 86%,
    rgba(6,4,2,0) 100%);
}
.portrait-section{ position:relative; z-index:2; }
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,5vw,3rem); font-weight:400;
  margin:0; line-height:1.08; letter-spacing:.02em;
  color:var(--cream);
  text-shadow:0 3px 26px rgba(0,0,0,.85);
}
.rule{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  margin:1.1rem auto 1.6rem; max-width:300px; color:var(--gold); font-size:.72rem;
}
.rule span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.section-sub{
  max-width:640px; margin:0 auto 2.4rem;
  color:var(--cream-dim); font-size:1.02rem; font-style:italic;
}

/* ---------- bio ---------- */
.bio-photo{
  margin:0 auto 2.2rem; max-width:430px;
  border:1px solid var(--line); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.7);
}
.bio-photo img{ width:100%; filter:brightness(.88) contrast(1.03) saturate(.97); }
.bio-photo.img-missing{ display:none; }

.bio{ max-width:680px; margin:0 auto; }
.bio p{ margin:0 0 1.25rem; font-size:1.13rem; color:#e6dbca; }
.bio p:first-child::first-letter{
  font-family:var(--font-display); font-size:2.6rem; line-height:.9;
  color:var(--gold); padding-right:.04em; float:none;
}

/* ---------- release card ---------- */
.release-card{
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  margin:0 auto 2.6rem; max-width:340px;
}
.release-art{
  position:relative; width:240px; height:240px;
  border:1px solid var(--line); background:#100a05;
  box-shadow:0 22px 54px rgba(0,0,0,.7);
}
.release-art img{ width:100%; height:100%; object-fit:cover; }
.art-fallback{
  position:absolute; inset:0; display:none; place-items:center;
  background:radial-gradient(circle at 50% 45%, #2a1b0b, #0e0904);
}
.art-fallback span{
  font-family:var(--font-display); font-size:3.4rem; color:var(--gold);
  opacity:.75; line-height:1;
}
.release-art.img-missing img{ display:none; }
.release-art.img-missing .art-fallback{ display:grid; }
.release-meta h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2rem); margin:.1rem 0 1rem; line-height:1.1;
}

/* ---------- streaming grid ---------- */
.streaming-grid{
  display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  max-width:640px; margin:0 auto;
}
.stream-link{
  display:flex; align-items:center; justify-content:center; gap:.65rem;
  padding:.95rem 1rem;
  border:1px solid var(--line); background:rgba(12,8,4,.62);
  color:var(--cream); text-decoration:none;
  font-family:var(--font-ui); font-weight:300;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.stream-link svg{ width:17px; height:17px; fill:currentColor; flex:none; }
.stream-link:hover{
  background:var(--gold); border-color:var(--gold); color:#140c04;
  transform:translateY(-2px);
}

/* ---------- tour ---------- */
.section-lead{ padding-top:clamp(1.5rem,4vw,2.5rem); }

.shows{ max-width:720px; margin:0 auto; }
.shows-loading, .shows-empty{ color:var(--cream-dim); font-style:italic; }
.shows-empty strong{ display:block; font-style:normal; font-family:var(--font-ui);
  letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; color:var(--gold-soft); margin-bottom:.5rem; }

.show{
  display:grid; gap:.5rem; justify-items:center;
  padding:1.6rem 1rem;
  border-bottom:1px solid rgba(211,162,76,.16);
}
.show:first-child{ border-top:1px solid rgba(211,162,76,.16); }
.show-date{
  font-family:var(--font-ui); font-weight:500;
  font-size:.86rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
}
.show-venue{ font-size:1.28rem; color:var(--cream); line-height:1.3; }
.show-where{
  font-family:var(--font-ui); font-weight:300;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-dim);
}
.show-note{ font-size:.98rem; font-style:italic; color:var(--cream-dim); opacity:.85; }
.show-actions{ margin-top:.55rem; }
.show-tag{
  display:inline-block;
  font-family:var(--font-ui); font-weight:300;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-dim); border:1px solid rgba(211,162,76,.22);
  padding:.6rem 1.4rem;
}
.show.is-soldout .show-tag{ color:#c98c8c; border-color:rgba(201,140,140,.35); }
.show.is-today .show-date::after{
  content:" • tonight"; color:var(--cream);
}

/* ---------- portrait ---------- */
.portrait-section{ padding:1rem 1.4rem clamp(2rem,6vw,4rem); }
.portrait{
  position:relative; margin:0 auto; max-width:820px;
  border:1px solid var(--line); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.portrait img{ width:100%; filter:brightness(.78) contrast(1.04) saturate(.95); }
.portrait-veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,0,0,0) 0%, rgba(6,4,2,.55) 100%);
}
/* no portrait file yet -> collapse the whole band, not just the figure */
.portrait-section.img-missing{ display:none; }

/* ---------- signup ---------- */
.signup{
  display:grid; gap:.7rem; max-width:420px; margin:0 auto 2rem;
  justify-items:stretch;
}
.signup input{
  width:100%; padding:.9rem 1rem;
  background:rgba(12,8,4,.65); color:var(--cream);
  border:1px solid var(--line); border-radius:1px;
  font-family:var(--font-ui); font-weight:300; font-size:.85rem; letter-spacing:.08em;
  text-align:center;
}
.signup input::placeholder{ color:rgba(201,187,167,.6); letter-spacing:.16em; text-transform:uppercase; font-size:.74rem; }
.signup input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 1px rgba(211,162,76,.35); }
.signup button{ justify-self:center; margin-top:.35rem; }

.booking{ font-size:1rem; color:var(--cream-dim); }
.booking a{ color:var(--gold-soft); text-decoration:none; border-bottom:1px solid var(--line); }
.booking a:hover{ color:var(--gold); }

/* ---------- footer ---------- */
.site-footer{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  padding:3rem 1.4rem 3.4rem;
  border-top:1px solid rgba(211,162,76,.14);
}
.copyright{
  font-family:var(--font-ui); font-weight:300;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(201,187,167,.55); margin:0;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (max-width:640px){
  body{ font-size:17px; }
  .hero{ padding-inline:.65rem; }
  .release-art{ width:200px; height:200px; }
  .streaming-grid{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
}

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