/* ==========================================================================
   esembe — shared design system
   Warm bone background, carbon ink, Klein-blue accent (used sparingly).
   Extracted from the cover / masterplan visual language.
   ========================================================================== */

:root{
  --bund:   #ece9e1;   /* bone / warm off-white — the background */
  --kul:    #131316;   /* carbon — primary text & wordmark */
  --klein:  #2743ea;   /* Klein blue — single accent, used sparingly */
  --graa:   #8b8880;   /* grey — secondary/credit text */
  --linje:  #dcd8cd;   /* hairline on bone */

  --fd: 'Helvetica Neue', 'Arial', 'Liberation Sans', system-ui, sans-serif; /* display grotesque */
  --fm: ui-monospace, 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; /* labels/credits */

  --maxw: 960px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bund);
  color:var(--kul);
  font-family:var(--fd);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--kul); outline-offset:3px; }
img{ max-width:100%; height:auto; display:block; }

/* subtle film grain over the bone, like the cover */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.035;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- primitives ---------- */
.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wordmark{ font-family:var(--fd); font-weight:700; letter-spacing:-.02em; text-transform:lowercase; line-height:.9; }
.mono{ font-family:var(--fm); font-weight:500; letter-spacing:.16em; text-transform:uppercase; }

/* ---------- vinyl disc mark ---------- */
.disc{ border-radius:50%; background:var(--kul); position:relative; flex:0 0 auto; }
.disc::before{ content:""; position:absolute; inset:28%; border-radius:50%; border:2px solid var(--bund); }
.disc::after{  content:""; position:absolute; inset:44%; border-radius:50%; background:var(--bund); }

/* ---------- masthead (shared header) — regular weight, not bold ---------- */
.mast{ display:flex; align-items:center; justify-content:space-between; padding:32px 0 0; gap:16px; }
.mast__brand{ display:flex; align-items:center; gap:10px; }
.mast__brand .disc{ width:16px; height:16px; }
.mast__brand b{ font-weight:400; letter-spacing:.02em; font-size:15px; }
.mast__nav{ display:flex; gap:20px; }
.mast__nav a{ font-family:var(--fm); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--graa); padding:4px 0; }
.mast__nav a:hover{ color:var(--kul); }

/* ---------- generic footer ---------- */
.foot{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px 24px; padding:40px 0 32px; }
.foot .mono{ font-size:11px; color:var(--graa); }
.foot a.mono:hover{ color:var(--kul); }

/* ---------- eyebrow rows ---------- */
.eyebrows{ display:flex; flex-wrap:wrap; gap:10px 28px; }
.eyebrows .mono{ font-size:12px; color:var(--kul); }
.eyebrows b{ color:var(--graa); font-weight:500; margin-left:8px; }

/* ==========================================================================
   RELEASE LANDING PAGE (smart-link picker)
   ========================================================================== */
.release{ min-height:100svh; display:flex; flex-direction:column; }
.release__body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 0; gap:22px; }
.release__cover{
  width:min(360px, 78vw); aspect-ratio:1; border:1px solid var(--linje);
  box-shadow:0 18px 50px rgba(19,19,22,.14); background:var(--bund);
}
.release__eyebrow{ font-size:11px; color:var(--graa); }
.release__title{ font-size:clamp(40px,10vw,80px); }
.release__by{ font-family:var(--fm); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--graa); margin-top:-8px; }

/* streaming buttons — Spotify first (accent), rest quiet */
.services{ display:flex; flex-direction:column; gap:12px; width:min(360px,78vw); margin-top:6px; }
.svc{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--fm); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 20px; border:1.5px solid var(--kul); background:transparent; color:var(--kul);
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.svc:hover{ transform:translateY(-1px); }
.svc--primary{ background:var(--klein); border-color:var(--klein); color:#fff; }
.svc--primary:hover{ background:#1b34c9; border-color:#1b34c9; }
.svc--ghost:hover{ background:var(--kul); color:var(--bund); }
.release__cta{ font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--graa); }
.release__cta b{ color:var(--kul); font-weight:600; }

/* ==========================================================================
   BIO PAGE
   ========================================================================== */
.bio{ max-width:640px; margin:0 auto; padding:56px 0 0; }
.bio h1{ font-size:clamp(40px,9vw,72px); margin-bottom:24px; }
.bio__lead{ font-size:19px; line-height:1.6; margin-bottom:22px; }
.bio p{ margin-bottom:18px; color:#2a2a2c; }
.bio .todo{ color:var(--klein); font-family:var(--fm); font-size:.86em; }
.bio__meta{ margin-top:34px; border-top:1px solid var(--linje); padding-top:22px; display:grid; gap:14px; }
.bio__row{ display:flex; gap:16px; align-items:baseline; }
.bio__row .k{ font-family:var(--fm); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--graa); min-width:96px; flex:0 0 auto; }
.bio__row .v{ font-size:15px; }
.bio__row .v a{ border-bottom:1px solid var(--linje); }
.bio__row .v a:hover{ border-color:var(--kul); }

/* ==========================================================================
   CONSENT BANNER (shown until a choice is made; blocks the pixel)
   ========================================================================== */
.consent{
  position:fixed; z-index:60; left:16px; right:16px; bottom:16px;
  max-width:560px; margin:0 auto;
  background:var(--kul); color:var(--bund);
  padding:18px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.consent p{ flex:1 1 240px; font-size:13px; line-height:1.5; }
.consent a{ text-decoration:underline; }
.consent__actions{ display:flex; gap:10px; }
.consent button{
  font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 16px; border:1.5px solid var(--bund); background:transparent; color:var(--bund); cursor:pointer;
}
.consent button#consent-accept{ background:var(--bund); color:var(--kul); }
.consent button:hover{ opacity:.85; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}