/* ============================================================
   DANA DOOM — electronic singer / songwriter · Los Angeles
   Palette: Void #09090D · Panel #131118 · Line #262232
            Blood #E11D48 · Volt #6D5EF5 · Bone #ECEAF2 · Ash #8B8798
   Type:    Anton (display) · Space Grotesk (body) · Space Mono (meta)
   Signature: slow bass-pulse glow behind the page
   ============================================================ */

:root {
  --void: #09090d;
  --panel: #131118;
  --panel-2: #1b1822;
  --line: #262232;
  --line-2: #322c42;
  --blood: #e11d48;
  --blood-dim: #a3143a;
  --volt: #6d5ef5;
  --bone: #eceaf2;
  --ash: #8b8798;
  --radius: 4px;
  /* Hero photo controls — tune these two to reframe the shot.
     --hero-focus: object-position. 1st value = left/right, 2nd = up/down.
       Lower the 2nd % to show more of the TOP of the photo (raises her face).
     --hero-dark: strength of the flat black wash over the photo (0 = none). */
  --hero-focus: 50% 28%;
  --hero-dark: 0.28;
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient grain + bass-pulse glow behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(109, 94, 245, 0.14), transparent 60%),
    radial-gradient(700px 500px at 85% 110%, rgba(225, 29, 72, 0.12), transparent 60%);
  animation: bass-pulse 7s ease-in-out infinite;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  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.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes bass-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

a { color: inherit; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 9, 13, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 20px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 26px; width: auto; display: block; }
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  padding: 6px 0;
  position: relative;
  transition: color 0.18s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--bone); }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--blood);
}

/* ---------- Hero (photo behind the text) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;     /* text sits low, so the top of the frame stays clear */
  text-align: center;
  padding: 150px 0 78px;
  border-bottom: 1px solid var(--line);
}

/* Photo layer — stretched to fill via object-fit: cover */
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus);
  filter: grayscale(0.22) contrast(1.06) saturate(0.95);
}

/* Darkening: a light flat wash + a gradient weighted to the BOTTOM.
   The top of the frame stays nearly clear so her eyes read, while the
   lower half goes dark enough for the logo and copy to sit on it. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(9, 9, 13, 0.06) 0%,
      rgba(9, 9, 13, 0.14) 32%,
      rgba(9, 9, 13, 0.58) 62%,
      rgba(9, 9, 13, 0.92) 86%,
      var(--void) 100%),
    rgba(9, 9, 13, var(--hero-dark));
}

.hero-inner { position: relative; }

.hero-logo {
  width: min(720px, 88%);
  height: auto;
  filter: drop-shadow(0 8px 40px rgba(225, 29, 72, 0.22)) drop-shadow(0 2px 18px rgba(0, 0, 0, 0.75));
}
.hero-tag {
  margin: 26px auto 0;
  max-width: 640px;
  color: #d6d2e0;
  font-size: 19px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
}
.hero-tag strong { color: var(--bone); font-weight: 600; }
.hero-cta { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  color: var(--bone);
  background: var(--panel);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--blood); }
.btn-primary { background: var(--blood); border-color: var(--blood); color: #fff; }
.btn-primary:hover { background: #f0245a; border-color: #f0245a; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; border-top: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 40px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blood);
  margin: 0 0 14px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.section-head p { color: var(--ash); margin: 0; font-size: 17px; }

/* ---------- SoundCloud player ---------- */
.player-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.player-frame iframe { display: block; width: 100%; border: 0; }
.player-note { margin-top: 16px; color: var(--ash); font-size: 14px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.player-note a { color: var(--bone); }

/* ---------- Track list ---------- */
.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.track {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--bone);
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.track:hover { background: var(--panel); padding-left: 16px; }
.track-idx { font-family: var(--font-mono); color: var(--blood); font-size: 14px; flex: 0 0 auto; }
.track-body { flex: 1 1 auto; }
.track-title { font-size: 17px; font-weight: 500; }
.track-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ash); letter-spacing: 0.06em; margin-top: 4px; }
.track-play { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); flex: 0 0 auto; }
.track:hover .track-play { color: var(--blood); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 52px;
  align-items: start;
}
.about-photo {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--panel);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.35) contrast(1.05); transition: filter 0.4s ease; }
.about-photo:hover img { filter: grayscale(0) contrast(1); }
.about-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(9,9,13,0.55));
  pointer-events: none;
}
.about-body h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 8vw, 82px);
  line-height: 0.92;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.about-body .lede {
  font-family: var(--font-mono);
  color: var(--blood);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 14px;
  margin: 0 0 26px;
}
.about-body p { color: #c9c5d6; margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--line-2);
  border-radius: 40px;
  padding: 7px 15px;
}
.chip strong { color: var(--bone); font-weight: 400; }

/* ---------- Social cards ---------- */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.social-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  color: var(--bone);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.social-card:hover { transform: translateY(-3px); border-color: var(--blood); }
.social-card .sc-plat { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blood); }
.social-card .sc-handle { font-size: 18px; font-weight: 500; }
.social-card .sc-go { font-family: var(--font-mono); font-size: 12px; color: var(--ash); margin-top: 8px; letter-spacing: 0.1em; }
.social-card:hover .sc-go { color: var(--bone); }

/* ---------- Feature strip (home) ---------- */
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { border-left: 2px solid var(--blood); padding: 4px 0 4px 20px; }
.feature h3 { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); margin: 0 0 8px; }
.feature p { color: var(--ash); margin: 0; font-size: 15px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  text-align: center;
}
.site-footer .foot-logo { height: 22px; opacity: 0.9; margin-bottom: 18px; }
.site-footer .foot-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.site-footer .foot-links a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); text-decoration: none; }
.site-footer .foot-links a:hover { color: var(--blood); }
.site-footer .copy { font-family: var(--font-mono); font-size: 12px; color: var(--line-2); letter-spacing: 0.08em; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-photo { max-width: 340px; }
  .feature-strip { grid-template-columns: 1fr; gap: 16px; }
  .site-nav { gap: 18px; }
  .hero { min-height: min(76vh, 620px); padding: 110px 0 58px; }
}
@media (max-width: 460px) {
  .site-nav a { font-size: 11px; letter-spacing: 0.1em; }
  .brand img { height: 22px; }
}

/* ---------- A11y ---------- */
a:focus-visible, .btn:focus-visible, .track:focus-visible, .social-card:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
}