/* ================= THE INDOENCERS — Studio Charcoal ================= */

:root{
  --ink:#1b1815;
  --ink-raised:#252119;
  --ink-line: rgba(237,230,214,0.12);
  --cream:#ede6d6;
  --cream-dim: rgba(237,230,214,0.62);
  --cream-faint: rgba(237,230,214,0.4);

  --maroon:#7a2331;
  --maroon-dim:#5c1a24;
  --teal:#2e5c56;
  --teal-dim:#1f403c;
  --gold:#c68a2e;
  --gold-dim:#a06f24;
  --plum:#4a2545;
  --plum-dim:#361a33;

  /* brightened variants for text on dark backgrounds — the base maroon/teal/plum
     above read below 2:1 contrast against --ink (fail WCAG AA's 4.5:1 for text).
     Gold already passes at ~6:1, so it has no separate text variant. Use these
     -text vars for any foreground text/icon color; keep the base vars for large
     fills (art blocks, gradients) where cream/dark text sits on top instead. */
  --maroon-text:#e0596f;
  --teal-text:#5fa89e;
  --plum-text:#b378ae;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background:var(--ink);
  color:var(--cream);
  line-height:1.5;
}

.display{ font-family:'Bricolage Grotesque', sans-serif; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
img{ max-width:100%; display:block; }

/* anchors land below the sticky header, not hidden behind it */
section[id]{ scroll-margin-top:76px; }

/* ---------------- global site header — small, name-less, nav + social only ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 40px;
  background:rgba(27,24,21,0.75); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ink-line);
}
.site-nav{ display:flex; gap:26px; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; overflow-x:auto; scrollbar-width:none; }
.site-nav::-webkit-scrollbar{ display:none; }
.site-nav a{ color:var(--cream-dim); white-space:nowrap; transition:color .2s; }
.site-nav a:hover{ color:var(--cream); }

@media (max-width:820px){
  .site-header{ padding:16px 20px; gap:14px; }
  .site-nav{ gap:16px; font-size:11px; }
}

/* ---------------- homepage hero ---------------- */
.home{
  position:relative; min-height:calc(100vh - 73px); overflow:hidden;
  background:
    radial-gradient(ellipse at 78% 15%, rgba(198,138,46,0.10), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(122,35,49,0.14), transparent 55%),
    var(--ink);
  display:flex; flex-direction:column;
}
.social{ display:flex; gap:16px; color:var(--cream-dim); }
.social a{ display:flex; align-items:center; }
.social a:hover{ color:var(--cream); }
.social svg{ width:18px; height:18px; }

.hero{
  position:relative; z-index:2; flex:1; overflow:hidden;
  display:flex; align-items:center;
  padding:20px 60px 40px;
}
.hero-copy{ position:relative; z-index:3; }
.hero .kicker{ font-size:14px; color:var(--cream-dim); margin-bottom:14px; }
.hero h1{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
  font-size:clamp(42px, 6.6vw, 96px); line-height:0.96; letter-spacing:-0.01em;
  margin-left:-6px;
}
.hero h1 .amp{ color:var(--gold); font-weight:600; font-style:italic; }
.hero .sub{ margin-top:20px; font-size:15px; letter-spacing:0.02em; color:var(--cream-dim); max-width:34ch; }

/* full-bleed hero video background — native muted/looping <video>, cropped to cover */
.hero-video-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-video-bg video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(27,24,21,0.6) 0%, rgba(27,24,21,0.25) 45%, rgba(27,24,21,0.8) 100%),
    linear-gradient(90deg, rgba(27,24,21,0.55) 0%, rgba(27,24,21,0.1) 55%);
}


/* ---------------- role header (section pages) ---------------- */
.role-header{ display:flex; align-items:center; gap:40px; padding:56px max(40px, calc((100% - 820px) / 2)); background:var(--ink-raised); }
.role-header > div:first-child{ min-width:0; }
.role-header h2{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:40px; }
.role-header .role-tag{ font-size:13px; letter-spacing:0.06em; margin-bottom:10px; font-weight:600; }
.role-header p{ margin-top:14px; max-width:none; color:var(--cream-dim); font-size:15px; }
.role-header p a{ color:var(--cream); border-bottom:1px solid var(--cream-faint); transition:border-color .2s; }
.role-header p a:hover{ border-color:var(--cream); }
.composer .role-tag, .role-tag.composer{ color:var(--maroon-text); }
.role-tag.analyst{ color:var(--teal-text); }
.role-tag.podcaster{ color:var(--gold); }
.role-tag.educator{ color:var(--plum-text); }

@media (max-width:820px){
  .role-header{ flex-direction:column; align-items:flex-start; padding:40px 24px; }
}

/* ---------------- work blocks ---------------- */
.work{
  position:relative; padding:70px 40px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; align-items:center; overflow:visible;
  opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;
}
.work.in-view{ opacity:1; transform:translateY(0); }
.work.reverse{ direction:rtl; }
.work.reverse > *{ direction:ltr; }
.work .art{ position:relative; aspect-ratio:1/1; border-radius:6px; max-width:320px; box-shadow:0 24px 50px rgba(0,0,0,0.45); z-index:2; }
.work .copy{ position:relative; z-index:1; margin-left:-60px; padding:36px 36px 36px 90px; border-radius:6px; background:var(--ink-raised); }
.work.reverse .copy{ margin-left:0; margin-right:-60px; padding:36px 90px 36px 36px; }
.work h3{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:30px; margin-bottom:10px; }
.work .meta{ font-size:12px; letter-spacing:0.08em; margin-bottom:14px; text-transform:uppercase; }
.work p{ font-size:15px; max-width:44ch; color:var(--cream-dim); }

.work.accent-composer .meta{ color:var(--maroon-text); }
.work.accent-composer .art{ background:linear-gradient(135deg, var(--maroon), var(--maroon-dim)); }
.work.accent-analyst .meta{ color:var(--teal-text); }
.work.accent-analyst .art{ background:linear-gradient(135deg, var(--teal), var(--teal-dim)); }
.work.accent-podcaster .meta{ color:var(--gold); }
.work.accent-podcaster .art{ background:linear-gradient(135deg, var(--gold), var(--gold-dim)); }
.work.accent-educator .meta{ color:var(--plum-text); }
.work.accent-educator .art{ background:linear-gradient(135deg, var(--plum), var(--plum-dim)); }

/* per-release links (YouTube / streaming) */
.work-links{ display:flex; gap:22px; margin-top:18px; }
.work-links a{ font-size:12px; letter-spacing:0.05em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:2px; opacity:0.85; transition:opacity .2s; }
.work-links a:hover{ opacity:1; }
.work.accent-composer .work-links a{ color:var(--maroon-text); }
.work.accent-analyst .work-links a{ color:var(--teal-text); }
.work.accent-podcaster .work-links a{ color:var(--gold); }
.work.accent-educator .work-links a{ color:var(--plum-text); }

.work .badge{ display:inline-block; font-size:11px; letter-spacing:0.04em; color:var(--gold); background:rgba(198,138,46,0.12); border:1px solid rgba(198,138,46,0.3); border-radius:3px; padding:3px 8px; margin-bottom:14px; transition:background .2s, border-color .2s; }
.badge:hover{ background:rgba(198,138,46,0.22); border-color:rgba(198,138,46,0.5); }

.more{ padding:40px; text-align:center; font-size:14px; color:var(--cream-faint); }

/* ---------------- track list accordion ---------------- */
.tracklist{ padding:10px 40px 70px; max-width:900px; margin:0 auto; }
.tracklist-head{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cream-faint); padding-bottom:16px; border-bottom:1px solid var(--ink-line); margin-bottom:4px; }
.track{ border-bottom:1px solid var(--ink-line); }
.track summary{ list-style:none; cursor:pointer; padding:18px 4px; display:flex; align-items:baseline; gap:14px; font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:16px; }
.track summary::-webkit-details-marker{ display:none; }
.track summary .track-num{ color:var(--maroon-text); font-family:'Inter', sans-serif; font-weight:600; font-size:13px; min-width:20px; }
.track summary .track-title{ flex:1; }
.track summary .track-toggle{ font-size:20px; color:var(--cream-faint); font-weight:400; }
.track summary .track-toggle::before{ content:"+"; }
.track[open] summary .track-toggle{ color:var(--maroon-text); }
.track[open] summary .track-toggle::before{ content:"\2013"; }
.track-credits{ padding:0 4px 24px 34px; display:grid; grid-template-columns:170px 1fr; gap:7px 16px; font-size:13px; }
.credit-line{ display:contents; }
.credit-role{ color:var(--cream-faint); }
.credit-value{ color:var(--cream-dim); }
.credit-group{ grid-column:1 / -1; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); margin-top:16px; }
.credit-group:first-child{ margin-top:0; }

@media (max-width:600px){
  .tracklist{ padding:10px 20px 50px; }
  .track-credits{ grid-template-columns:1fr; padding-left:20px; }
  .credit-line{ display:block; margin-bottom:8px; }
  .credit-role{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
}

@media (max-width:820px){
  .work, .work.reverse{ grid-template-columns:1fr; direction:ltr; padding:48px 20px; }
  .work .copy, .work.reverse .copy{ margin:-40px 0 0; padding:28px; }
  .work .art{ max-width:none; margin:0 auto; }
}

/* ---------------- generic content section (video embeds, archive intros) ---------------- */
.content-section{ padding:60px 40px; max-width:900px; margin:0 auto; }
.section-kicker{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-text); margin-bottom:10px; font-weight:600; }
.content-section > p{ color:var(--cream-dim); font-size:15px; max-width:60ch; margin-bottom:28px; }

.archive-list{ border-top:1px solid var(--ink-line); }
.archive-row{
  position:relative; display:flex; align-items:center; gap:20px; padding:14px 4px;
  border-bottom:1px solid var(--ink-line); transition:background .2s;
}
.archive-row:hover{ background:var(--ink-raised); }
.archive-row:has(.archive-title a:focus-visible){ outline:2px solid var(--teal-text); outline-offset:-2px; }

.archive-thumb{
  flex-shrink:0; width:120px; aspect-ratio:16/9; border-radius:4px; overflow:hidden;
  background:repeating-linear-gradient(135deg, #2a251f, #2a251f 10px, #221e19 10px, #221e19 20px);
}
.archive-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-info{ flex:1; min-width:0; }
.archive-title{ font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:15px; margin-bottom:4px; }
.archive-title a{ color:var(--cream); }
.archive-title a:hover, .archive-row:hover .archive-title a{ color:var(--teal-text); }
/* stretched link: the title link covers the whole row, so the row is one click target */
.archive-title a::after{ content:''; position:absolute; inset:0; }
.archive-caption{ font-size:12px; color:var(--cream-faint); }

.archive-icons{ display:flex; gap:8px; flex-shrink:0; }
.archive-icons a{ position:relative; z-index:1; }
.archive-icon{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:var(--ink-raised); color:var(--cream-dim); transition:background .2s, color .2s;
}
.archive-row:hover .archive-icon{ background:var(--ink); }
.archive-icon:hover{ background:var(--teal-text) !important; color:var(--ink); }
.archive-icon svg{ width:15px; height:15px; }


/* ---------------- media grid — flat 3-col card grid, no album/single or format distinction ---------------- */
.media-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px 28px; }
.media-thumb{
  aspect-ratio:1/1; border-radius:6px; overflow:hidden; margin-bottom:16px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
  background:repeating-linear-gradient(135deg, #2a251f, #2a251f 10px, #221e19 10px, #221e19 20px);
}
.media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-title{ font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:18px; margin-bottom:6px; }
.media-title a{ color:var(--cream); }
.media-caption{ font-size:13px; color:var(--cream-faint); margin-bottom:16px; }
.media-mini-badge{
  display:inline-block; font-size:11px; color:var(--gold); background:rgba(198,138,46,0.12);
  border:1px solid rgba(198,138,46,0.3); border-radius:3px; padding:2px 7px; margin-bottom:12px;
}
.media-icons{ display:flex; gap:16px; }
.media-icon{
  display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%;
  background:var(--ink-raised); color:var(--cream-dim); transition:background .2s, color .2s;
}
.media-icon svg{ width:22px; height:22px; }
.media-card.accent-composer .media-title a:hover{ color:var(--maroon-text); }
.media-card.accent-composer .media-icon:hover{ background:var(--maroon-text); color:var(--ink); }
.media-card.accent-podcaster .media-title a:hover{ color:var(--gold); }
.media-card.accent-podcaster .media-icon:hover{ background:var(--gold); color:var(--ink); }

@media (max-width:820px){
  .media-grid{ grid-template-columns:repeat(2, 1fr); gap:28px 20px; }
}
@media (max-width:520px){
  .media-grid{ grid-template-columns:1fr; max-width:320px; margin:0 auto; }
}

@media (max-width:600px){
  .content-section{ padding:40px 20px; }
  .archive-thumb{ width:80px; }
  .archive-row{ gap:12px; }
  .archive-icons{ gap:6px; }
  .archive-icon{ width:28px; height:28px; }
}

/* ---------------- support page ---------------- */
.support-head{ padding:64px 40px 32px; text-align:center; }
.support-head h2{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:36px; }
.support-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; padding:0 40px 80px; max-width:1100px; margin:0 auto; }
.support-item{ text-align:center; }
.support-cover{ display:block; aspect-ratio:1/1; border-radius:6px; background:var(--ink-raised); border:1px solid var(--ink-line); margin-bottom:14px; }
.support-item h4{ font-family:'Bricolage Grotesque', sans-serif; font-size:16px; margin-bottom:4px; }
.support-item a.buy{ display:inline-block; margin-top:10px; font-size:12px; letter-spacing:0.05em; color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:2px; }

@media (max-width:820px){
  .support-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------------- contact page ---------------- */
.contact-body{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; text-align:center; gap:24px; padding:60px 24px; }
.contact-body h1{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:clamp(32px,5vw,56px); }
.contact-icons{ display:flex; gap:28px; font-size:14px; color:var(--cream-dim); }
.contact-icons a:hover{ color:var(--cream); }

/* ---------------- loading intro ---------------- */
.load-screen{
  position:fixed; inset:0; z-index:100; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.load-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.waveform{ display:flex; align-items:flex-end; gap:4px; height:40px; }
.waveform span{ display:block; width:3px; background:var(--gold); border-radius:2px; animation:bounce 1s ease-in-out infinite; }
.waveform span:nth-child(2){ animation-delay:.1s; }
.waveform span:nth-child(3){ animation-delay:.2s; }
.waveform span:nth-child(4){ animation-delay:.3s; }
.waveform span:nth-child(5){ animation-delay:.4s; }
.waveform span:nth-child(6){ animation-delay:.3s; }
.waveform span:nth-child(7){ animation-delay:.2s; }
.waveform span:nth-child(8){ animation-delay:.1s; }
@keyframes bounce{ 0%,100%{ height:8px; } 50%{ height:36px; } }