/* =========================================================================
   SKILL SAWASAWA — design tokens
   Palette drawn from Eastern DRC landscape + cinema:
   night forest black, laterite-soil ochre, deep foliage green,
   oxblood (resilience / VITAR), bone ink, worn-gold thread.
   ========================================================================= */

:root{
  --bg:        #0f0d0a;   /* night-forest black */
  --bg-alt:    #171310;   /* raised panel */
  --bg-alt-2:  #1e1a14;   /* raised panel, lighter */
  --ink:       #f1e9d8;   /* bone / cream */
  --ink-muted: #b6ab94;   /* muted bone */
  --ink-dim:   #7d7565;   /* captions / metadata */
  --clay:      #c17f3b;   /* laterite soil — primary accent */
  --clay-dim:  #8a5b2b;
  --forest:    #4c5c3f;   /* foliage — secondary */
  --forest-lt: #6c7f59;
  --oxblood:   #7c2c1d;   /* resilience accent — used sparingly (VITAR) */
  --gold:      #c9a24b;   /* thread / signature line */
  --line:      rgba(241,233,216,0.14);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Work Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

*{ box-sizing:border-box; }
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{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--clay);
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* focus visibility ------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* buttons ----------------------------------------------------------------*/
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  font-family:var(--mono);
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.9em 1.6em;
  border:1px solid var(--clay);
  border-radius:2px;
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ background:var(--clay); color:#100c07; }
.btn.solid{ background:var(--clay); color:#100c07; }
.btn.solid:hover{ background:var(--gold); border-color:var(--gold); }

/* =========================================================================
   NAV
   ========================================================================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:1.4rem 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(15,13,10,0.92);
  backdrop-filter:blur(8px);
  padding:0.9rem 0;
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  font-family:var(--display);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:0.01em;
}
.brand span{ color:var(--clay); }

.nav-links{
  display:flex;
  gap:2.2rem;
  list-style:none;
  margin:0; padding:0;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.nav-links a{
  position:relative;
  color:var(--ink-muted);
  padding-bottom:4px;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--clay);
}

.nav-toggle{
  display:none;
  background:none; border:0; color:var(--ink);
  font-size:1.4rem; cursor:pointer;
}

/* language switch --------------------------------------------------------*/
.lang-switch{
  display:flex;
  align-items:center;
  gap:0.35rem;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.06em;
}
.lang-switch button{
  background:none;
  border:1px solid var(--line);
  color:var(--ink-dim);
  padding:0.3em 0.6em;
  border-radius:2px;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.lang-switch button:hover{ color:var(--ink); border-color:var(--clay); }
.lang-switch button.active{
  color:#100c07;
  background:var(--clay);
  border-color:var(--clay);
}
@media (max-width:760px){
  .lang-switch{ order:2; margin-right:0.6rem; }
}

@media (max-width: 760px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw, 320px);
    background:var(--bg-alt);
    flex-direction:column;
    gap:1.6rem;
    padding:6rem 2rem 2rem;
    transform:translateX(100%);
    transition:transform .35s ease;
    border-left:1px solid var(--line);
  }
  .nav-links.open{ transform:translateX(0); }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:0;
  z-index:-2;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(0.85) brightness(0.55);
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,13,10,0.35) 0%, rgba(15,13,10,0.55) 55%, rgba(15,13,10,0.96) 100%);
}
.hero-thread{
  position:absolute; inset:0;
  z-index:-1;
  opacity:0.55;
  pointer-events:none;
}
.hero-inner{
  padding:0 var(--gutter) 5.5rem;
  width:100%;
}
.hero-eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:1.2rem;
}
.hero h1{
  font-size:clamp(3rem, 9vw, 7.2rem);
  line-height:0.92;
  margin:0 0 0.5rem;
}
.hero h1 em{
  font-style:normal;
  color:var(--clay);
}
.hero-tagline{
  max-width:46ch;
  color:var(--ink-muted);
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  margin-top:1.1rem;
}
.scroll-cue{
  position:absolute;
  bottom:2rem; left:var(--gutter);
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  display:flex; align-items:center; gap:0.6rem;
}
.scroll-cue .stem{
  width:1px; height:28px;
  background:var(--ink-dim);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{ transform:scaleY(1); opacity:0.4; }
  50%{ transform:scaleY(0.4); opacity:1; }
}

/* =========================================================================
   SECTION SCAFFOLDING
   ========================================================================= */
section{ padding:7rem 0; position:relative; }
.section-head{
  max-width:640px;
  margin-bottom:3.5rem;
}
.section-head h2{ font-size:clamp(2rem, 4vw, 2.8rem); }
.section-head p{ color:var(--ink-muted); }

.divider{
  border:0; height:1px;
  background:var(--line);
  margin:0;
}

/* =========================================================================
   ABOUT
   ========================================================================= */
.about{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap:clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.about-portrait{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:2px;
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; }
.about-portrait::before{
  content:"";
  position:absolute; inset:0;
  border:1px solid var(--line);
  pointer-events:none;
}
.about-copy p{ color:var(--ink-muted); font-size:1.05rem; }
.about-copy p:first-of-type{ color:var(--ink); font-size:1.2rem; font-family:var(--display); }
.about-stats{
  display:flex;
  gap:2.5rem;
  margin-top:2.2rem;
  padding-top:1.8rem;
  border-top:1px solid var(--line);
}
.about-stats div strong{
  display:block;
  font-family:var(--display);
  font-size:1.8rem;
  color:var(--clay);
}
.about-stats div span{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

@media (max-width: 820px){
  .about{ grid-template-columns:1fr; }
  .about-portrait{ max-width:340px; }
}

/* =========================================================================
   TIMELINE ("The Journey")
   ========================================================================= */
.timeline{
  position:relative;
  max-width:820px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:88px;
  top:6px; bottom:6px;
  width:1px;
  background:linear-gradient(180deg, var(--gold), var(--forest) 60%, transparent);
}
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:88px 1fr;
  gap:2rem;
  padding-bottom:3.4rem;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.timeline-item.in-view{ opacity:1; transform:translateY(0); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-year{
  font-family:var(--mono);
  font-size:0.95rem;
  color:var(--gold);
  padding-top:0.15rem;
  text-align:right;
}
.timeline-item::after{
  content:"";
  position:absolute;
  left:83px; top:0.35rem;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--clay);
}
.timeline-body h3{
  font-size:1.15rem;
  margin-bottom:0.4rem;
}
.timeline-body p{
  color:var(--ink-muted);
  margin:0;
  max-width:56ch;
}
.timeline-tags{
  display:flex; flex-wrap:wrap; gap:0.5rem;
  margin-top:0.8rem;
}
.timeline-tags span{
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line);
  padding:0.25em 0.6em;
  border-radius:2px;
}

@media (max-width:600px){
  .timeline::before{ left:44px; }
  .timeline-item{ grid-template-columns:44px 1fr; gap:1rem; }
  .timeline-item::after{ left:39px; }
  .timeline-year{ font-size:0.72rem; text-align:left; }
}

.journey-note{
  max-width:820px;
  margin-top:2.5rem;
  padding:1.5rem 1.75rem;
  border-left:2px solid var(--gold);
  background:var(--bg-alt);
  color:var(--ink-muted);
  font-size:0.98rem;
}

/* =========================================================================
   RELEASES (Spotify cards)
   ========================================================================= */
.releases-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1.75rem;
}
.release-card{
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.4rem 1.4rem 1.6rem;
}
.release-card .release-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:1rem;
}
.release-card h3{ font-size:1.15rem; margin:0; }
.release-card .release-year{
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--clay);
}
.release-card .release-note{
  color:var(--ink-muted);
  font-size:0.92rem;
  margin:0.9rem 0 0;
}
.spotify-embed-wrap{
  border-radius:6px;
  overflow:hidden;
  background:#101010;
}
.spotify-embed-wrap iframe{
  display:block;
  width:100%;
  border:0;
}

/* =========================================================================
   VIDEO INTERVIEW — 100vh
   ========================================================================= */
.video-section{
  position:relative;
  height:100vh;
  padding:0;
  background:#000;
}
.video-frame-wrap{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
}
.video-frame-wrap iframe{
  position:absolute;
  top:50%; left:50%;
  width:100vw; height:56.25vw;     /* keep 16:9 filling viewport */
  min-height:100vh; min-width:177.78vh; /* 100vh * 16/9 */
  transform:translate(-50%, -50%);
  border:0;
  pointer-events:none; /* purely ambient/autoplay showcase, not interactive controls */
}
.video-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:2.4rem var(--gutter);
  background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  flex-wrap:wrap;
}
.video-caption h2{ font-size:clamp(1.4rem, 3vw, 2rem); margin:0; color:var(--ink); }
.video-caption p{ margin:0.3rem 0 0; color:var(--ink-muted); }
.video-caption .btn{ flex-shrink:0; }

/* =========================================================================
   FOOTER / CONTACT CTA
   ========================================================================= */
.site-footer{
  padding:4rem 0 2.5rem;
  border-top:1px solid var(--line);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  flex-wrap:wrap;
  margin-bottom:3rem;
}
.footer-top h2{
  font-size:clamp(2rem, 5vw, 3.4rem);
  max-width:14ch;
}
.footer-links{
  display:flex; gap:2rem; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.footer-links a:hover{ color:var(--clay); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--ink-dim);
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}

/* =========================================================================
   GALLERY PAGE
   ========================================================================= */
.page-hero{
  padding:9.5rem 0 3rem;
  border-bottom:1px solid var(--line);
}
.page-hero h1{ font-size:clamp(2.4rem, 6vw, 4rem); }
.page-hero p{ color:var(--ink-muted); max-width:56ch; }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.1rem;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  background:var(--bg-alt);
  opacity:0;
  animation:fadeIn .6s ease forwards;
}
.gallery-item:nth-child(3n+1){ aspect-ratio:4/5; }
.gallery-item:nth-child(3n+2){ aspect-ratio:1/1; }
.gallery-item:nth-child(3n){ aspect-ratio:4/5; }
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem;
  background:linear-gradient(0deg, rgba(0,0,0,0.82), transparent);
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.03em;
  color:var(--ink);
  opacity:0;
  transition:opacity .3s ease;
}
.gallery-item:hover .gallery-caption{ opacity:1; }

@keyframes fadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.gallery-load-more{
  display:flex;
  justify-content:center;
  margin-top:3rem;
}
.gallery-empty-note{
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--ink-dim);
  text-align:center;
  margin-top:2rem;
}

@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-item:nth-child(n){ aspect-ratio:4/3; }
}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 6vw, 5rem);
}
.contact-info h2{ font-size:2rem; }
.contact-info p{ color:var(--ink-muted); max-width:42ch; }
.contact-detail{
  margin-top:2.2rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.contact-detail dt{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:0.3rem;
}
.contact-detail dd{
  margin:0 0 1.4rem;
  font-size:1.05rem;
}
.contact-detail dd a:hover{ color:var(--clay); }

.social-row{
  display:flex; gap:1.2rem; margin-top:1.8rem;
  font-family:var(--mono);
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.social-row a{
  color:var(--ink-muted);
  border-bottom:1px solid transparent;
}
.social-row a:hover{ color:var(--clay); border-color:var(--clay); }

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.field label{
  display:block;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:0.5rem;
}
.field input, .field textarea{
  width:100%;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:2px;
  padding:0.85em 1em;
  color:var(--ink);
  font-family:var(--body);
  font-size:0.98rem;
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  border-color:var(--clay);
  outline:none;
}
.form-note{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--ink-dim);
}

@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
}