/* ============================================================
   Dajaun.com — slim hand-coded styles (no WordPress, no WPBakery)
   Brand color and spacing live in :root so tweaks are one-liners.
   ============================================================ */
:root{
  --pink:#e82561;
  --pink-hi:#f0567e;
  --ink:#000000;          /* WordPress sections are pure black */
  --ink-2:#050505;
  --text:#ffffff;
  --muted:#c9c9d2;
  --nav-h:66px;           /* matches WP nav bar height */
  --wrap:1120px;
  --font:"Source Sans 3","Source Sans Pro",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:760px}
.wrap--wide{max-width:1480px}

/* ---------- NAV (below the full-screen hero; sticks to top on scroll) ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  height:var(--nav-h);
  background:var(--pink);
  display:flex;align-items:center;justify-content:center;
}
.nav__brand{display:none;font-weight:900;letter-spacing:.04em;font-size:20px}
.nav__checkbox,.nav__burger{display:none}
.nav__links{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,44px);
  width:100%;max-width:var(--wrap);padding:0 24px;
}
.nav__link{
  font-weight:800;font-size:18px;letter-spacing:.8px;text-transform:uppercase;
  white-space:nowrap;padding:10px 14px;border-radius:5px;
  transition:background .15s,color .15s;
}
/* white background is the HOVER highlight (not a permanent pill) — matches WP */
.nav__link:hover{background:#f5f5f5;color:#111}
.nav__link.is-active{text-decoration:underline;text-underline-offset:5px}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;                       /* full screen — nav sits below, revealed on scroll */
  background:#fff;                          /* white shows behind while the content slides up */
}
.hero__anim{                              /* image + DAJAUN text slide up TOGETHER over the white */
  position:absolute;inset:0;
  display:flex;align-items:flex-start;    /* text high, above the face (WP margin-top:-250px) */
  animation:heroSlideUp 2.2s cubic-bezier(.16,.72,.28,1) .25s both;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg,var(--pink-hi) 0%,var(--pink) 60%);
  background-image:url('../img/hero.jpg'); /* relative → works at any base path */
  background-repeat:no-repeat;
  background-position:right top;
  background-size:cover;
}
@keyframes heroSlideUp{from{transform:translateY(120px);opacity:0}to{transform:none;opacity:1}}
.hero__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:clamp(64px,16vh,190px) 24px 0;width:100%;text-align:center}
.hero__title{
  margin:0;font-weight:800;line-height:1.2;color:#020202;
  font-size:clamp(56px,10.4vw,150px);letter-spacing:normal;
}
.hero__sub{
  margin:6px 0 0;font-weight:800;color:#020202;
  font-size:clamp(18px,1.8vw,26px);letter-spacing:normal;
}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(56px,9vw,110px) 0}
.section--page{padding-top:calc(var(--nav-h) + 40px)}
.section--light{background:#eeeeee;color:#111}   /* Listen area — light, like live */
.section__title{
  margin:0 0 30px;color:var(--pink);line-height:1;text-align:center;
  font-weight:800;font-size:clamp(32px,3.5vw,50px);
}
.section__subtitle{
  margin:0 0 28px;color:#dddddd;font-weight:600;text-align:center;
  font-size:clamp(15px,2vw,20px);letter-spacing:.02em;
}

/* Bio — Westlake photo backdrop, dark overlay, white text on top */
.section--bio{
  position:relative;color:#fff;background-color:#000;
  /* pink overlay (lighter than the WP 0.36) + photo fills the full screen width */
  background-image:linear-gradient(rgba(39,39,66,0.01),rgba(232,37,97,0.22)),url('../img/hero-photo.jpg');
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:cover,cover;
  background-attachment:scroll,scroll;   /* parallax is driven by JS (main.js), not CSS fixed */
}

/* Subpage hero + parallax band (broadcast, atmos) */
.page-hero{
  position:relative;min-height:100vh;                 /* full screen on load, like the WP full_height row */
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;background:#000 center/cover no-repeat;
  /* parallax is driven by JS (main.js), not CSS fixed (unreliable in Safari / ignored on iOS) */
}
.page-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.page-hero .hero__inner{position:relative;z-index:1;text-align:center}
.page-hero .hero__title,.page-hero .hero__sub{color:#fff}
.parallax{
  min-height:52vh;
  background:#000 center/cover no-repeat;   /* JS parallax (main.js) */
}

/* Parallax content band — the WP "content-moving" rows: text/media sit OVER a
   fixed (parallaxing) photo. Used by the atmos write-up and the broadcast reel. */
.media-band{
  position:relative;color:#fff;
  background:#000 center/cover no-repeat;   /* JS parallax (main.js) */
  padding:clamp(48px,8vw,110px) 0;
}
.media-band::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}  /* darken the photo for legible text */
.media-band .wrap{position:relative;z-index:1}
.media-band__box{                                   /* translucent panel behind the copy */
  background:rgba(0,0,0,.5);border-radius:14px;
  padding:clamp(24px,3.2vw,44px);
}
/* atmos write-up: Dolby badge LEFT | text RIGHT */
.atmos-blurb__grid{
  display:grid;grid-template-columns:minmax(180px,1fr) 1.9fr;
  gap:clamp(28px,5vw,64px);align-items:center;
}
.atmos-blurb__media{display:flex;justify-content:center}
.atmos-blurb__media .atmos-badge{width:min(100%,260px);margin:0}
/* broadcast demo reel */
.reel{
  display:block;width:min(100%,900px);margin:0 auto clamp(28px,4vw,48px);
  border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#000;
}

/* ---------- STUDIO STATEMENT (circle piano photo | text) ---------- */
.section--statement{position:relative;overflow:hidden;padding:clamp(44px,7vw,88px) 0;background:#000}
.section--statement::after{        /* WP row overlay — sits OVER the content, giving the section its tone */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(43,0,73,0.27),rgba(247,15,255,0.34));opacity:.8;
}
.statement__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,64px);align-items:center;
}
.statement__media{display:flex;justify-content:center;align-items:center}  /* center, don't stretch the circle */
.statement__circle{
  position:relative;display:block;align-self:center;   /* never stretch to the row height (Safari) */
  width:min(100%,540px);
  border-radius:50%;overflow:hidden;
}
/* the source PNG is square, so letting the image drive the height keeps a true circle
   on every browser — more reliable than aspect-ratio on a flex child (Safari squished it) */
.statement__circle img{width:100%;height:auto;display:block}
.statement{
  margin:0;color:#fff;
  font-weight:800;line-height:1.2;
  font-size:clamp(24px,3.2vw,38px);
}

/* ---------- BIO ---------- */
.bio-col{max-width:620px;text-align:left}    /* text sits on the LEFT, clear of the face on the right */
.section--bio .section__title,.section--bio .section__subtitle{text-align:left}
.bio p{margin:0 0 18px;color:#e9e9ef;font-size:18px;line-height:1.7}
.bio em{color:var(--muted)}

/* ---------- CONTACT (2-col: info left | logo right — matches WP sm-8 / sm-4) ---------- */
.contact__grid{
  display:grid;grid-template-columns:2fr 1fr;
  gap:clamp(24px,5vw,60px);align-items:center;
}
.contact__info{text-align:left}
.contact__info .section__title{text-align:left}
.contact__lead{font-size:clamp(20px,2.1vw,30px);font-weight:800;line-height:1.3;color:#dddddd;margin:0 0 24px}
.contact__links{margin:0 0 30px;line-height:1.5}
.contact__links a{display:inline-block;font-size:clamp(18px,1.9vw,26px);font-weight:800;color:#dddddd;margin-bottom:4px}
.contact__links a:hover{color:#fff}
.contact__follow{display:flex;align-items:center;gap:16px;font-size:clamp(20px,2.1vw,30px);font-weight:800;color:#dddddd}
.contact__ig{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:48px;height:48px;border-radius:50%;background:#eaeaea;color:#111;
  transition:transform .15s,background .15s;
}
.contact__ig:hover{transform:translateY(-2px);background:#fff}
/* real FontAwesome Instagram glyph (same webfont as the WP theme) */
.contact__ig .ig-icon{
  font-family:'FontAwesome';font-style:normal;font-weight:normal;
  font-size:24px;line-height:1;-webkit-font-smoothing:antialiased;
}
.contact__ig .ig-icon::before{content:"\f16d"}
.contact__logo{display:block}                    /* no outline — matches live */
.contact__logo img{width:min(100%,340px);height:auto}

/* Dolby Atmos badge on the atmos page */
.atmos-badge{width:130px;height:auto;display:block;margin:0 auto 22px}

/* ---------- TRACKS (4-wide desktop → 2-wide mobile) ---------- */
.tracks{
  display:grid;gap:16px;margin-top:28px;
  grid-template-columns:repeat(4,1fr);
}
/* NB: scoped to .tracks (the Atmos grid) so these never touch the Scamp player's
   own .track class on the home Listen section. */
.tracks .track{
  display:block;width:100%;padding:0;margin:0;border:0;
  background:transparent;color:inherit;font:inherit;cursor:pointer;text-decoration:none;
}
.tracks .track--link{color:inherit}                      /* Atmos card: whole tile links out */
.track__cover{
  position:relative;display:block;aspect-ratio:1/1;border-radius:0;   /* square, like live */
  background:#241631 center/cover no-repeat;overflow:hidden;
}
.track__cover::after{                                    /* legibility gradient behind the title */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0) 46%);
}
.track__overlay{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 14px;text-align:left}
.track__title{display:block;color:#fff;font-weight:700;font-size:15px;line-height:1.25}
.track__artist{display:block;color:#dcdcdc;font-weight:400;font-size:13px;line-height:1.3}
.track__play{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  font-size:40px;color:#fff;background:rgba(0,0,0,.32);opacity:0;transition:opacity .15s;
}
.tracks .track:hover .track__play,.tracks .track.is-playing .track__play{opacity:1}
.tracks .track.is-playing .track__title{color:var(--pink)}

/* Scamp player bar stays hidden — the tracklist grid is the interface (matches WP) */
#scamp_player{visibility:hidden}

/* Force uniform SQUARE covers so the float grid always wraps 4-per-row (fixes 4-2-4-2) */
.tracklist-grid .tracks-grid-item .track-cover{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
}

/* Scamp player icon fonts (WP loads these via the theme; declared here for the standalone site) */
@font-face{
  font-family:'Scamp-Player';
  src:url('../scamp/fonts/Scamp-Player.woff') format('woff'),
      url('../scamp/fonts/Scamp-Player.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:block;
}
@font-face{
  font-family:'FontAwesome';
  src:url('../scamp/fonts/fontawesome-webfont.woff2') format('woff2'),
      url('../scamp/fonts/fontawesome-webfont.woff') format('woff'),
      url('../scamp/fonts/fontawesome-webfont.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:block;
}

/* ---------- CONTACT FORM ---------- */
.form{display:flex;flex-direction:column;gap:14px;margin-top:24px;max-width:520px}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px}
.form__field{
  background:#1c1226;border:1px solid #33223f;border-radius:8px;
  color:#fff;font:inherit;padding:14px 16px;
}
.form__field:focus{outline:none;border-color:var(--pink)}
.form__field::placeholder{color:#8a8397}
.form__submit{
  align-self:flex-start;background:var(--pink);color:#fff;border:0;
  font:inherit;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 34px;border-radius:8px;cursor:pointer;transition:filter .15s;
}
.form__submit:hover{filter:brightness(1.08)}
.notice{padding:12px 16px;border-radius:8px;font-weight:600}
.notice--ok{background:#123a1c;color:#8ff0a8}
.notice--err{background:#3a1212;color:#f0a0a0}

/* ---------- FOOTER ---------- */
.footer{background:#070309;padding:40px 24px;text-align:center;color:#fff;font-size:16px;letter-spacing:.8px}

/* ---------- STICKY PLAY BAR ---------- */
.playbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:#160c20;border-top:1px solid #2a1b38;
}
.playbar[hidden]{display:none}
.playbar__toggle{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--pink);color:#fff;border:0;font-size:16px;cursor:pointer;
}
.playbar__meta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.playbar__title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playbar__artist{font-size:12px;color:var(--muted)}
.playbar__seek{flex:1 1 auto;accent-color:var(--pink)}

/* ============================================================
   MOBILE — everything below only affects phones/tablets.
   Desktop above is untouched.
   ============================================================ */
@media (max-width:900px){
  .nav{justify-content:space-between;padding:0 18px}
  .nav__brand{display:block}

  /* hamburger */
  .nav__burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;cursor:pointer;
  }
  .nav__burger span{display:block;height:3px;width:26px;background:#fff;border-radius:2px;transition:.25s}

  /* dropdown panel */
  .nav__links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;gap:0;padding:0;
    background:var(--pink);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav__checkbox:checked ~ .nav__links{max-height:70vh}
  .nav__link{
    width:100%;text-align:center;padding:16px 0;
    border-top:1px solid rgba(255,255,255,.18);font-size:16px;
  }
  .nav__link--btn{border-radius:0;background:transparent;color:#fff}
  .nav__link--btn:hover{background:rgba(255,255,255,.12)}

  /* burger → X animation */
  .nav__checkbox:checked ~ .nav__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav__checkbox:checked ~ .nav__burger span:nth-child(2){opacity:0}
  .nav__checkbox:checked ~ .nav__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* player: 2-wide on mobile (your request) */
  .tracks{grid-template-columns:repeat(2,1fr);gap:12px}

  /* readable bio on small screens */
  .bio p{font-size:16px;line-height:1.65}

  /* mobile hero: shove image right so the face clears the text (WP mobile) */
  .hero__bg{background-position:right -200px top}
  .hero__inner{padding-top:clamp(48px,12vh,120px)}

  /* fixed backgrounds are janky on mobile — use scroll; photo fills width */
  .section--bio{background-attachment:scroll,scroll;background-position:center,center}
  .parallax{background-attachment:scroll}
  .page-hero{min-height:100vh;background-attachment:scroll}
  .media-band{background-attachment:scroll}
  .atmos-blurb__grid{grid-template-columns:1fr;text-align:center}
  .atmos-blurb__media .atmos-badge{margin:0 auto}

}

/* Two-column sections (statement, contact) stay side-by-side until it's actually tight */
@media (max-width:768px){
  .statement__grid,.contact__grid{grid-template-columns:1fr;text-align:center}
  .statement__media{margin-bottom:8px}
  .statement__circle{width:min(72%,320px)}
  .contact__info,.contact__info .section__title{text-align:center}
  .contact__follow{justify-content:center}   /* "Follow me!" + IG icon centered, not left */
  .contact__logo{margin:0 auto}
  .contact__logo img{margin:0 auto}
}

/* Homepage Scamp player on phones: 2-up instead of 1-per-row.
   The scamp skin (shortcodes.css) collapses .tracks-grid-4-col items to width:100% at
   ≤767px; the #sp-tracklist id here out-specifies that so the covers tile two across. */
@media (max-width:767px){
  #sp-tracklist .tracks-grid-item{width:50%}
}

@media (max-width:420px){
  .track__title{font-size:14px}
  .hero__title{letter-spacing:-.01em}
}