:root {
  color-scheme: dark;
  --indigo: #0b1020;
  --paper: #f6f2ea;
  --teal: #3e7a89;
  --amber: #f5b869;
  --light-text: #cbd5e1;
  --dark-text: #4a5563;
  --line: #30384a;
  --display: Montserrat, "Avenir Next", system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--indigo);
  color: var(--paper);
  font: 400 1rem/1.6 var(--body);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, iframe:focus-visible { outline: 3px solid #559bb0; outline-offset: 5px; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-family: var(--display); }
h1, h2 { font-weight: 800; line-height: 1.06; letter-spacing: -.057em; }
h2 { font-size: clamp(2.3rem, 4.5vw, 4.1rem); }
.skip {
  position: fixed; z-index: 5; top: 12px; left: 12px; clip-path: inset(50%);
  padding: 8px 16px; background: var(--amber); color: var(--indigo);
}
.skip:focus { clip-path: none; }
.wrap { width: min(100% - clamp(2rem, 10vw, 10rem), 1260px); margin-inline: auto; }
.eyebrow {
  font: 600 .73rem/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-header { border-bottom: 1px solid #232a39; }
.header-inner, .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.header-inner { min-height: 76px; }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-transform: uppercase; font: 600 .95rem/1.06 var(--display); letter-spacing: .025em;
}
.brand img { width: 40px; flex: 0 0 auto; }
.brand small { display: block; margin-top: 5px; color: var(--light-text); font-size: .67em; letter-spacing: .29em; }
nav { display: flex; gap: clamp(16px, 3.6vw, 42px); }
nav a { padding-block: 9px; color: var(--light-text); font-size: .88rem; font-weight: 600; }
nav a:hover, nav a[aria-current] { color: var(--amber); }

.hero {
  background: radial-gradient(ellipse at 83% 46%, #182735 0%, var(--indigo) 63%);
  padding-block: clamp(42px, 6.4vw, 95px);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4.4vw, 68px); }
.label, .artist-meta { color: var(--amber); }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: .11em; border-radius: 50%; background: var(--amber); }
.hero h1 { font-size: clamp(3rem, 6.25vw, 6.05rem); margin-block: 20px 19px; }
.hero h1 em { color: var(--amber); font-style: normal; }
.lede { max-width: 44ch; color: var(--light-text); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; }
.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; z-index: 0; inset: 14px -14px -14px 14px;
  border: 1px solid #526467; pointer-events: none;
}
.hero-visual img { position: relative; width: 100%; aspect-ratio: 1.28; object-fit: cover; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 13px; margin-top: 29px; }
.button {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  min-height: 45px; width: fit-content; padding: 9px 16px; border: 1px solid transparent;
  font-size: .87rem; font-weight: 700; line-height: 1.35;
  transition: color .18s, background-color .18s, border-color .18s;
}
.button svg { width: 18px; height: 18px; }
.button span[aria-hidden] { order: 2; font-size: 1.1em; }
.primary { color: var(--indigo); background: var(--amber); }
.primary:hover { background: #ffd29b; }
.ghost { color: var(--paper); border-color: #596273; }
.ghost:hover { background: #ffffff15; border-color: var(--paper); }
.ink { background: var(--indigo); color: var(--paper); }
.ink:hover { background: #26394a; }

.section { padding-block: clamp(52px, 7vw, 104px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px 25px; margin-bottom: 30px; }
.section-number { color: #90b7c0; margin-bottom: 9px; }
.section-heading > p { padding-bottom: 4px; }
.paper { color-scheme: light; color: var(--indigo); background: var(--paper); }
.paper .section-number { color: #346372; }
.paper p:not(.eyebrow) { color: var(--dark-text); }
.records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.record { display: grid; grid-template-columns: .92fr 1fr; min-width: 0; border: 1px solid #d9d4ca; background: #fcf9f4; }
.record-art { display: grid; align-items: center; background: #e8bc76; overflow: hidden; }
.record-art img { width: 100%; height: 100%; object-fit: cover; transition: scale .28s; }
.record-art:hover img { scale: 1.035; }
.record-info { align-self: center; min-width: 0; padding: clamp(14px, 2vw, 30px); }
.artist-byline { color: #346372; display: inline-block; margin-bottom: 8px; }
.artist-byline:hover { text-decoration: underline; text-underline-offset: 3px; }
.record h3, .release-detail h3 { font-size: clamp(1.35rem, 2.1vw, 2rem); line-height: 1.14; letter-spacing: -.041em; }
.record-info p { font-size: .9rem; margin-block: 9px 17px; }
.record .button { min-height: 38px; padding: 7px 13px; }

.roster { background: #101726; }
.roster-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.roster-list li { border-bottom: 1px solid var(--line); }
.roster-row {
  display: grid; grid-template-columns: 34px 120px 1fr minmax(120px, 19%) 34px;
  align-items: center; gap: 22px; min-height: 96px; padding: 12px 8px;
  transition: background-color .18s;
}
.roster-row:hover { background: #1a2334; }
.roster-row img { width: 100%; height: 64px; object-fit: cover; }
.roster-row .row-index, .row-genre { color: #abb8cb; }
.roster-row .row-index { font: .76rem var(--mono); }
.everyday-halo-music .roster-row img, .slow-current-sounds .roster-row img { object-fit: contain; }
.everyday-halo-music .roster-row img { background: #3684ae; }
.slow-current-sounds .roster-row img { background: #0d1424; }
.row-copy { display: grid; gap: 3px; }
.row-name { font: 700 clamp(1.15rem, 2.8vw, 2.15rem)/1.2 var(--display); letter-spacing: -.04em; }
.row-theme { color: var(--light-text); font-size: .85rem; line-height: 1.4; }
.row-arrow { color: var(--amber); text-align: center; font-size: 1.45rem; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 42px; }
.about-grid p:not(.eyebrow) { max-width: 55ch; font-size: 1.07rem; }
.about-grid p + p { margin-top: 15px; }
.site-footer { border-top: 1px solid var(--line); padding-block: 28px; }
.site-footer p { color: #aab7c9; font-size: .84rem; }

.artist-hero {
  --accent: var(--amber);
  --glow: #282f3a;
  background: radial-gradient(ellipse at 85% 65%, var(--glow), var(--indigo) 74%);
  padding-block: 30px clamp(48px, 7vw, 94px);
}
.everyday-halo-music .artist-hero { --accent: #f4c56a; --glow: #193851; }
.slow-current-sounds .artist-hero { --accent: #f5b869; --glow: #1a3a43; }
.harbor-and-hills .artist-hero { --accent: #f0e1c4; --glow: #293d34; }
.velvet-street-music .artist-hero { --accent: #f6a3cd; --glow: #3c2348; }
.stop-and-go-sounds .artist-hero { --accent: #8bdaa4; --glow: #233632; }
.back { display: inline-block; color: var(--light-text); font-size: .88rem; font-weight: 600; margin-bottom: clamp(24px, 5vw, 60px); }
.back span { color: var(--accent); padding-right: 5px; }
.back:hover { color: white; }
.artist-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 6vw, 96px); }
.artist-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--accent); }
.artist-meta span { width: 18px; height: 1px; background: var(--accent); }
.artist-hero h1 { font-size: clamp(2.6rem, 6.6vw, 6rem); margin-block: 15px 13px; }
.artist-line { font: 600 clamp(1.05rem, 2.1vw, 1.55rem)/1.35 var(--display); color: var(--accent); margin-bottom: 12px; }
.artist-art { width: 100%; aspect-ratio: 1.24; object-fit: cover; border: 1px solid #ffffff32; }
.everyday-halo-music .artist-art, .slow-current-sounds .artist-art { width: min(100%, 420px); justify-self: center; aspect-ratio: 1; }
.artist-actions { margin-top: 21px; }
.artist-actions button { background: transparent; font-family: inherit; cursor: pointer; }
.artist-actions button[hidden] { display: none; }
.alias { margin-top: 13px; color: var(--light-text); font-size: .86rem; }
.release-detail { display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); gap: clamp(20px, 4.5vw, 65px); align-items: start; }
.album-cover { width: 100%; }
.release-detail h3 { font-size: clamp(1.8rem, 3.3vw, 3rem); }
.release-credit { margin-top: 8px; }
.music-platforms { margin-block: 20px 24px; scroll-margin-top: 20px; }
.music-platforms h4 { margin: 0 0 9px; }
.music-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10.4rem, 28%)), 1fr));
  gap: 8px;
}
.platform-link {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 50px; padding: 8px 10px;
  background: var(--platform-bg); color: var(--indigo); border: 1px solid var(--platform-border);
  border-radius: 8px; font-size: .82rem; line-height: 1.25; font-weight: 700;
  transition: background-color .18s, border-color .18s;
}
.platform-link img { width: 28px; height: 28px; border-radius: 6px; }
.platform-link span[aria-hidden] { color: var(--platform-accent); }
.platform-link:hover { background: var(--platform-border); border-color: var(--platform-accent); }
.platform-link.spotify { --platform-bg: #e1f3e7; --platform-border: #b9dfc7; --platform-accent: #226c44; }
.platform-link.apple-music { --platform-bg: #fae7eb; --platform-border: #edc5cd; --platform-accent: #94384f; }
.platform-link.deezer { --platform-bg: #efe6fa; --platform-border: #dbc8f0; --platform-accent: #69419a; }
.platform-link.iheart { --platform-bg: #fbe7e2; --platform-border: #f1c6bd; --platform-accent: #993e40; }
.platform-link.itunes { --platform-bg: #f4e8f8; --platform-border: #e6c9ed; --platform-accent: #874197; }
.platform-link.amazon-music { --platform-bg: #e0eff6; --platform-border: #bddce9; --platform-accent: #28677e; }
.platform-link.anghami { --platform-bg: #f9ecdd; --platform-border: #eed5b5; --platform-accent: #89591e; }
.track-preview { margin-bottom: 16px; padding: 14px; border: 1px solid #d9d4ca; background: #fcf9f4; }
.track-preview .section-number { margin-bottom: 3px; }
.track-preview .track-title { color: var(--indigo); font-weight: 700; }
.track-preview audio { display: block; width: 100%; height: 44px; margin-top: 9px; }
iframe { display: block; max-width: 100%; width: 100%; height: 450px; border: 0; border-radius: 10px; background: #e9e4dc; }
.empty-release h2 { margin-bottom: 11px; }
.related { background: #101726; }
.related h2 { font-size: clamp(1.85rem, 3.1vw, 2.8rem); }
.artist-links { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.artist-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.artist-links a span { color: var(--amber); }
.artist-links a:hover { color: var(--amber); }

@media (max-width: 1040px) {
  .record { grid-template-columns: minmax(0, 1fr); }
  .record-art { aspect-ratio: 1; }
  .record-info { padding: 21px; }
}
@media (max-width: 850px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 620px; margin-right: 12px; }
  .hero-visual img { aspect-ratio: 1.55; }
}
@media (max-width: 735px) {
  .artist-grid, .release-detail, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual::before { inset: 10px -10px -10px 10px; }
  .hero h1 { font-size: clamp(2.7rem, 9vw, 4.75rem); }
  .artist-hero h1 { font-size: clamp(2.55rem, 9vw, 4.75rem); }
  .section-heading { align-items: start; flex-direction: column; margin-bottom: 23px; }
  .roster-row { grid-template-columns: 22px 80px 1fr 22px; gap: 4px 12px; min-height: 85px; padding-inline: 0; }
  .row-index { grid-row: 1 / 3; }
  .roster-row img { grid-row: 1 / 3; height: 56px; }
  .row-copy { align-self: end; }
  .row-genre { grid-column: 3; align-self: start; }
  .row-arrow { grid-column: 4; grid-row: 1 / 3; }
  .album-cover { max-width: 420px; }
  .footer-inner { flex-wrap: wrap; }
  .site-footer nav { flex: 0 0 100%; }
}
@media (max-width: 455px) {
  .header-inner { flex-wrap: wrap; gap: 3px 15px; padding-block: 13px 8px; }
  .header-inner nav { gap: 15px; }
  .brand img { width: 32px; }
  .brand { font-size: .81rem; gap: 7px; }
  nav a { font-size: .78rem; }
  .records { grid-template-columns: minmax(0, 1fr); }
  .record-info { padding: 18px; }
  .artist-links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}