/*
Theme Name: Harmoire
Theme URI: https://harmoire.be
Author: Harmoire
Description: Een sober, sfeervol portfolio-thema voor Harmoire — geïnspireerd op de ingetogen, atmosferische productie van Editors en The National. Toont een introductie en een "liner notes"-tracklist waarmee bezoekers nummers rechtstreeks kunnen beluisteren via Spotify, SoundCloud of Bandcamp.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: harmoire
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --ink: #12151C;
  --ink-soft: #1A1E28;
  --ink-softer: #202533;
  --bone: #EDE8DF;
  --bone-dim: #C9C3B6;
  --slate: #3D4A5C;
  --slate-light: #5C6C82;
  --ember: #A8493A;
  --ember-light: #C4614F;
  --graphite: #8A8D93;
  --line: rgba(237,232,223,0.12);
  --line-strong: rgba(237,232,223,0.22);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --measure: 640px;
  --gutter: clamp(1.5rem, 5vw, 5rem);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; background:none; border:none; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight: 500; }
p{ margin:0 0 1em; }
::selection{ background: var(--ember); color: var(--bone); }

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, .track__toggle:focus-visible{
  outline: 2px solid var(--ember-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember-light);
  display:flex;
  align-items:center;
  gap: 0.75em;
}
.eyebrow::before{
  content:'';
  width: 22px;
  height: 1px;
  background: var(--ember-light);
  display:inline-block;
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.5rem var(--gutter);
  mix-blend-mode: difference;
}
.site-header__mark{
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--bone);
}
.site-header__nav ul{ display:flex; gap: 2rem; }
.site-header__nav a{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color .25s ease;
}
.site-header__nav a:hover{ color: var(--bone); }
.site-header__toggle{ display:none; color: var(--bone); }

@media (max-width: 640px){
  .site-header__nav{
    position: fixed; inset:0; z-index: 40;
    background: var(--ink);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition: opacity .3s ease;
  }
  .site-header__nav.is-open{ opacity:1; pointer-events:auto; }
  .site-header__nav ul{ flex-direction:column; text-align:center; gap: 1.75rem; }
  .site-header__nav a{ font-size: 1rem; }
  .site-header__toggle{ display:block; z-index: 45; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  flex-direction: column;
  justify-content:flex-end;
  padding: var(--gutter);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, var(--ink-softer) 0%, var(--ink) 60%);
  overflow:hidden;
}
.hero::before{
  /* grain */
  content:'';
  position:absolute; inset:0;
  opacity:0.35;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.hero::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:40%;
  background: linear-gradient(to top, var(--ink) 0%, transparent 100%);
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; max-width: 980px; }
.hero__title{
  font-size: clamp(3.4rem, 12vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0.4em 0 0.5em;
}
.hero__title em{
  font-style: italic;
  color: var(--slate-light);
}
.hero__tagline{
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  color: var(--bone-dim);
  max-width: 34ch;
  letter-spacing: 0.01em;
}
.hero__scroll{
  position:absolute;
  right: var(--gutter);
  bottom: 2.5rem;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  display:flex; align-items:center; gap: 0.75rem;
}
.hero__scroll::after{
  content:''; width:1px; height: 38px; background: var(--graphite);
  animation: pulse-line 2.4s ease-in-out infinite;
}
@keyframes pulse-line{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } }

/* ==========================================================================
   About
   ========================================================================== */
.about{
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  border-top: 1px solid var(--line);
}
.about__grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.about__portrait{
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(155deg, var(--ink-softer) 0%, var(--slate) 120%);
  border: 1px solid var(--line-strong);
  overflow:hidden;
}
.about__portrait img{ width:100%; height:100%; object-fit:cover; }
.about__portrait::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(18,21,28,0.85) 100%);
}
.about h2{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--bone);
  margin-bottom: 1.1em;
  line-height:1.15;
}
.about__bio{
  font-size: 1.05rem;
  color: var(--bone-dim);
  max-width: var(--measure);
}
.about__bio p:first-of-type::first-letter{
  font-family: var(--font-display);
  font-size: 3.4em;
  float:left;
  line-height:0.8;
  padding: 0.05em 0.12em 0 0;
  color: var(--ember-light);
}
@media (max-width: 780px){
  .about__grid{ grid-template-columns: 1fr; }
  .about__portrait{ max-width: 320px; }
}

/* ==========================================================================
   Music / tracklist ("liner notes")
   ========================================================================== */
.music{
  padding: clamp(4rem, 12vh, 7rem) var(--gutter) clamp(6rem, 14vh, 9rem);
  border-top: 1px solid var(--line);
}
.music__head{ margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.music__head h2{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--bone);
  margin-top: 0.4em;
}
.tracklist{ border-top: 1px solid var(--line); }
.track{ border-bottom: 1px solid var(--line); }
.track__toggle{
  width:100%;
  display:grid;
  grid-template-columns: 3.5rem 1fr auto auto;
  align-items:center;
  gap: 1.5rem;
  padding: 1.6rem 0;
  text-align:left;
  transition: padding .25s ease;
}
.track__toggle:hover{ color: var(--bone); }
.track__num{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--graphite);
}
.track__title{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--bone-dim);
  transition: color .25s ease;
}
.track.is-open .track__title, .track__toggle:hover .track__title{ color: var(--bone); }
.track__meta{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--graphite);
  letter-spacing: 0.08em;
  white-space: nowrap;
  display:none;
}
@media (min-width: 640px){ .track__meta{ display:block; } }
.track__icon{
  width: 30px; height:30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background .25s ease, transform .3s ease;
}
.track.is-open .track__icon{ background: var(--ember); border-color: var(--ember); transform: rotate(45deg); }
.track__icon svg{ width:11px; height:11px; }
.track__panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .45s ease;
}
.track__panel-inner{ padding: 0 0 2.2rem 0; }
.track__embed{ background: var(--ink-soft); border: 1px solid var(--line); padding: 0.75rem; }
.track__embed iframe{ width:100%; border:0; display:block; }
.track__links{ display:flex; gap:1.25rem; margin-top: 0.9rem; flex-wrap:wrap; }
.track__links a{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.track__links a:hover{ color: var(--ember-light); border-color: var(--ember-light); }
.music__empty{ color: var(--graphite); font-family: var(--font-mono); font-size: 0.85rem; padding: 2rem 0; }

/* ==========================================================================
   Page / single (fallback content pages)
   ========================================================================== */
.page-content{
  padding: clamp(8rem, 20vh, 11rem) var(--gutter) 6rem;
  max-width: var(--measure);
  margin: 0 auto;
}
.page-content h1{ font-size: clamp(2rem, 5vw, 3rem); color: var(--bone); margin-bottom: 0.6em; }
.page-content p{ color: var(--bone-dim); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  padding: 2.5rem var(--gutter);
  border-top: 1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap: 1.5rem;
  align-items:center;
  justify-content:space-between;
}
.site-footer__social{ display:flex; gap: 1.75rem; }
.site-footer__social a{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color .2s ease;
}
.site-footer__social a:hover{ color: var(--ember-light); }
.site-footer__copy{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--graphite);
  letter-spacing: 0.06em;
}