@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #080711;
  --panel: #11101c;
  --panel-2: #171525;
  --text: #f4f2f8;
  --muted: #9f9aaa;
  --line: rgba(255,255,255,.11);
  --violet: #8b5cf6;
  --blue: #4f9cff;
  --acid: #d8ff3e;
  --heading: 'Barlow Condensed', Impact, sans-serif;
  --body: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 80% 0%, rgba(69,31,135,.19), transparent 32rem),
    linear-gradient(180deg, #090811 0%, #080711 70%, #06050c 100%);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }
img { display: block; max-width: 100%; }
.shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.ambient { position: fixed; z-index: -1; border-radius: 999px; filter: blur(100px); opacity: .12; pointer-events: none; }
.ambient-one { width: 420px; height: 420px; background: var(--violet); top: 16rem; left: -15rem; }
.ambient-two { width: 360px; height: 360px; background: #255dff; right: -12rem; top: 54rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  width: min(1400px, calc(100% - 48px));
  height: 82px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-family: var(--heading); font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; }
.brand-dim { color: #716d79; }
.brand-mark { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--acid); border-radius: 50%; position: relative; box-shadow: 0 0 18px rgba(216,255,62,.2); }
.brand-mark::after { content: ''; position: absolute; width: 5px; height: 5px; background: var(--acid); border-radius: 50%; top: 5px; left: 5px; }
.status { display: flex; align-items: center; gap: 9px; color: #b9b4c1; font-family: var(--heading); font-size: .78rem; font-weight: 600; letter-spacing: .14em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px rgba(216,255,62,.8); }

.hero { min-height: 690px; padding: 72px 0 86px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.72fr); align-items: center; gap: 7vw; }
.eyebrow { margin: 0 0 18px; color: var(--acid); font-family: var(--heading); font-size: .82rem; font-weight: 700; letter-spacing: .22em; }
.hero h1 { margin: 0; max-width: 760px; font-family: var(--heading); font-size: clamp(4rem, 7.3vw, 7rem); font-weight: 800; letter-spacing: -.025em; line-height: .84; text-transform: uppercase; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.48); text-stroke: 1px rgba(255,255,255,.48); }
.hero-intro { max-width: 640px; margin: 32px 0 22px; color: #b2adba; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.75; }
.profiles-link { width: min(430px,100%); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 18px; margin: 0 0 56px; padding: 14px 17px; border: 1px solid rgba(216,255,62,.27); background: rgba(216,255,62,.045); color: var(--text); text-align: left; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.profiles-link span { grid-column: 1; color: var(--acid); font-family: var(--heading); font-size: .61rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.profiles-link strong { grid-column: 1; font-family: var(--heading); font-size: .97rem; letter-spacing: .03em; text-transform: uppercase; }
.profiles-link i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--acid); font-family: var(--heading); font-size: 1.05rem; font-style: normal; transition: transform .2s ease; }
.profiles-link:hover, .profiles-link:focus-visible { border-color: var(--acid); background: rgba(216,255,62,.08); }
.profiles-link:hover i { transform: translate(2px,-2px); }
.stats { display: flex; gap: 54px; }
.stats div { display: grid; gap: 0; }
.stats strong { font-family: var(--heading); font-size: 2.8rem; line-height: 1; letter-spacing: -.02em; }
.stats span { margin-top: 7px; color: #77717f; font-family: var(--heading); font-size: .7rem; font-weight: 600; letter-spacing: .18em; }

.featured { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: var(--panel); box-shadow: 0 32px 80px rgba(0,0,0,.38); }
.featured::before { content: ''; position: absolute; z-index: 3; inset: 18px; border: 1px solid rgba(255,255,255,.16); pointer-events: none; }
.featured img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.featured:hover img { transform: scale(1.025); }
.featured-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(3,2,8,.86) 100%); }
.featured-label { position: absolute; z-index: 4; left: 38px; right: 38px; bottom: 34px; }
.featured-label span { color: var(--acid); font-family: var(--heading); font-size: .68rem; font-weight: 700; letter-spacing: .2em; }
.featured-label h2 { margin: 4px 0 0; font-family: var(--heading); font-size: 2.4rem; line-height: 1; text-transform: uppercase; }
.featured-label p { margin: 7px 0 0; color: #c8c3ce; font-size: .84rem; }
.featured-index { position: absolute; z-index: 4; right: 38px; bottom: 38px; color: rgba(255,255,255,.58); font-family: var(--heading); font-size: .72rem; letter-spacing: .12em; }

.catalog { padding: 96px 0 110px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; }
.section-heading .eyebrow { margin-bottom: 7px; }
.section-heading h2 { margin: 0; font-family: var(--heading); font-size: clamp(2.5rem,5vw,4.4rem); line-height: 1; text-transform: uppercase; }
#result-count { margin: 0 0 7px; color: #807a88; font-family: var(--heading); font-size: .76rem; letter-spacing: .15em; }
.controls { display: grid; grid-template-columns: minmax(260px,1fr) auto auto; gap: 14px; margin-bottom: 42px; }
.search-wrap { position: relative; }
.search-icon { position: absolute; left: 18px; top: 50%; width: 14px; height: 14px; border: 1.5px solid #8b8494; border-radius: 50%; transform: translateY(-58%); }
.search-icon::after { content: ''; position: absolute; width: 6px; height: 1.5px; background: #8b8494; transform: rotate(45deg); right: -5px; bottom: -3px; }
.search-wrap input, .year-wrap select { width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 0; outline: 0; background: rgba(20,18,31,.86); color: var(--text); }
.search-wrap input { padding: 0 18px 0 48px; }
.search-wrap input::placeholder { color: #726d79; }
.search-wrap input:focus, .year-wrap select:focus { border-color: rgba(139,92,246,.75); box-shadow: 0 0 0 3px rgba(139,92,246,.1); }
.genre-filters { display: flex; padding: 4px; border: 1px solid var(--line); background: rgba(20,18,31,.86); }
.filter { min-width: 82px; border: 0; padding: 0 15px; background: transparent; color: #8e8996; font-family: var(--heading); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.filter:hover { color: var(--text); }
.filter.active { background: var(--text); color: #0a0910; }
.year-wrap { min-width: 124px; }
.year-wrap select { padding: 0 38px 0 15px; }

.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px 24px; }
.album-card { min-width: 0; animation: cardIn .45s both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.cover { position: relative; aspect-ratio: 1; overflow: hidden; background: linear-gradient(145deg,#19162b,#090811 62%,#24123a); border: 1px solid var(--line); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.album-card:hover .cover img { transform: scale(1.035); filter: saturate(1.07); }
.cover-fallback { height: 100%; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 75% 25%, rgba(139,92,246,.45), transparent 30%), repeating-radial-gradient(circle at 75% 25%, transparent 0 17px, rgba(139,92,246,.1) 18px 19px), #0c0a15; }
.cover-fallback span { color: var(--acid); font-family: var(--heading); font-size: .7rem; letter-spacing: .16em; }
.cover-fallback strong { max-width: 88%; font-family: var(--heading); font-size: clamp(2rem,4vw,3.5rem); line-height: .85; text-transform: uppercase; }
.set-badge { position: absolute; top: 16px; right: 16px; padding: 7px 10px; background: rgba(5,4,10,.78); border: 1px solid rgba(255,255,255,.17); backdrop-filter: blur(8px); color: #ddd9e2; font-family: var(--heading); font-size: .64rem; letter-spacing: .12em; }
.album-info { padding-top: 18px; }
.album-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; color: #807a88; font-family: var(--heading); font-size: .65rem; font-weight: 600; letter-spacing: .14em; }
.album-kicker .genre { color: var(--acid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-info h3 { margin: 0; font-family: var(--heading); font-size: 1.72rem; line-height: 1; text-transform: uppercase; }
.set-list { margin: 15px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.set-list li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.set-list strong { display: block; font-size: .82rem; font-weight: 600; }
.set-list span { display: block; margin-top: 2px; color: #77717f; font-size: .72rem; }
.set-year { align-self: center; color: #8e8996; font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; }
.set-list li.has-tracklist { display: block; padding: 0; }
.set-button { width: 100%; min-height: 61px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border: 0; text-align: left; background: transparent; color: var(--text); }
.set-button:hover strong, .set-button:focus-visible strong { color: var(--acid); }
.set-button:focus-visible { outline: 1px solid var(--violet); outline-offset: 5px; }
.tracklist-flag { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; color: var(--acid) !important; font-family: var(--heading); font-size: .62rem !important; font-weight: 700; letter-spacing: .12em; }
.tracklist-flag::after { content: '↗'; font-size: .82rem; transition: transform .2s ease; }
.set-button:hover .tracklist-flag::after { transform: translate(2px,-2px); }
.set-list .set-actions { display: flex; align-items: center; gap: 14px; margin: 0; }
.set-actions .set-year { margin: 0; padding-left: 13px; border-left: 1px solid var(--line); }
.empty-state { padding: 90px 20px; text-align: center; border: 1px solid var(--line); background: rgba(17,16,28,.54); }
.empty-state > span { color: var(--acid); font-family: var(--heading); font-size: .72rem; letter-spacing: .18em; }
.empty-state h3 { margin: 8px 0 2px; font-family: var(--heading); font-size: 2.2rem; text-transform: uppercase; }
.empty-state p { margin: 0 0 22px; color: var(--muted); }
.empty-state button { border: 1px solid var(--text); padding: 10px 18px; background: var(--text); color: #090810; font-family: var(--heading); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.tracklist-modal { width: min(880px, calc(100% - 30px)); max-height: calc(100vh - 30px); margin: auto; padding: 0; border: 1px solid rgba(255,255,255,.16); background: #0b0a13; color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.72); overflow: auto; }
.tracklist-modal::backdrop { background: rgba(3,2,8,.84); backdrop-filter: blur(12px); }
.tracklist-modal[open] { animation: modalIn .28s ease both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-close { position: sticky; z-index: 20; float: right; top: 18px; right: 18px; width: 44px; height: 44px; margin: 18px 18px -62px 0; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(8,7,17,.78); backdrop-filter: blur(10px); }
.modal-close span::before, .modal-close span::after { content: ''; position: absolute; top: 20px; left: 12px; width: 18px; height: 1px; background: #fff; }
.modal-close span::before { transform: rotate(45deg); }
.modal-close span::after { transform: rotate(-45deg); }
.modal-close:hover { border-color: var(--acid); }
.modal-hero { position: relative; min-height: 310px; overflow: hidden; }
.modal-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88); }
.modal-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,4,10,.94) 0%,rgba(5,4,10,.78) 48%,rgba(5,4,10,.2) 100%),linear-gradient(0deg,#0b0a13 0%,transparent 48%); }
.modal-heading { position: relative; z-index: 2; min-height: 310px; display: flex; flex-direction: column; justify-content: end; padding: 46px 52px; }
.modal-heading > p:first-child { margin: 0 0 9px; color: var(--acid); font-family: var(--heading); font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
.modal-heading h2 { max-width: 650px; margin: 0; font-family: var(--heading); font-size: clamp(3rem,8vw,5.4rem); line-height: .84; text-transform: uppercase; }
.modal-heading > p:last-child { margin: 15px 0 0; color: #c8c3ce; }
.modal-content { padding: 0 52px 48px; }
.tracklist-meta { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 40px; padding: 26px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tracklist-meta div { display: grid; }
.tracklist-meta strong { font-family: var(--heading); font-size: 2.1rem; line-height: 1; }
.tracklist-meta span { margin-top: 4px; color: #6f6977; font-family: var(--heading); font-size: .6rem; letter-spacing: .15em; }
.tracklist-meta p { justify-self: end; margin: 0; padding: 7px 10px; border: 1px solid rgba(216,255,62,.28); color: var(--acid); font-family: var(--heading); font-size: .64rem; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.modal-tracks { margin: 0; padding: 12px 0 0; list-style: none; counter-reset: tracks; }
.modal-tracks li { counter-increment: tracks; display: grid; grid-template-columns: 34px 78px 1fr; align-items: center; min-height: 62px; gap: 14px; border-bottom: 1px solid var(--line); }
.modal-tracks li::before { content: counter(tracks,decimal-leading-zero); color: #5e5966; font-family: var(--heading); font-size: .68rem; letter-spacing: .08em; }
.track-time { color: var(--acid); font-family: var(--heading); font-size: .72rem; letter-spacing: .06em; }
.track-time.no-time { color: #514c58; }
.track-main strong { display: block; font-size: .86rem; font-weight: 500; }
.track-main span { display: block; margin-top: 3px; color: #686370; font-size: .67rem; }
.modal-source { margin-top: 36px; padding: 24px; border: 1px solid var(--line); background: #11101a; }
.modal-source > span { color: #716b78; font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .16em; }
.modal-source p { margin: 7px 0 14px; color: #898390; font-size: .75rem; }
.modal-source div { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-source a { display: inline-flex; align-items: center; min-height: 35px; padding: 0 12px; border: 1px solid rgba(255,255,255,.18); color: #d8d4dc; font-family: var(--heading); font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.modal-source a:hover { border-color: var(--acid); color: var(--acid); }

.profiles-modal { width: min(1040px,calc(100% - 30px)); max-height: calc(100vh - 30px); margin: auto; padding: 0; border: 1px solid rgba(255,255,255,.16); background: #0b0a13; color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.72); overflow: auto; }
.profiles-modal::backdrop { background: rgba(3,2,8,.86); backdrop-filter: blur(12px); }
.profiles-modal[open] { animation: modalIn .28s ease both; }
.profiles-modal:target { display: block; position: fixed; inset: 15px; z-index: 1000; animation: modalIn .28s ease both; }
.profiles-header { padding: 74px 64px 52px; background: radial-gradient(circle at 82% 15%,rgba(139,92,246,.28),transparent 33%),repeating-radial-gradient(circle at 88% 8%,transparent 0 24px,rgba(139,92,246,.075) 25px 26px),#0c0a15; border-bottom: 1px solid var(--line); }
.profiles-header > p:first-child { margin: 0 0 14px; color: var(--acid); font-family: var(--heading); font-size: .7rem; font-weight: 700; letter-spacing: .19em; }
.profiles-header h2 { max-width: 770px; margin: 0; font-family: var(--heading); font-size: clamp(3.4rem,7.7vw,6rem); line-height: .82; text-transform: uppercase; }
.profiles-header > p:last-child { max-width: 700px; margin: 25px 0 0; color: #aaa5b1; line-height: 1.7; }
.profiles-grid { display: grid; grid-template-columns: 1fr 1fr; }
.profile-card { padding: 50px 54px 54px; }
.profile-card + .profile-card { border-left: 1px solid var(--line); }
.profile-number { color: #6f6977; font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .16em; }
.profile-card h3 { margin: 10px 0 0; font-family: var(--heading); font-size: 4rem; line-height: .9; text-transform: uppercase; }
.profile-card > p { min-height: 36px; margin: 8px 0 29px; color: var(--acid); font-family: var(--heading); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.profile-card ul { margin: 0; padding: 0; list-style: none; }
.profile-card li { position: relative; padding: 0 0 20px 24px; }
.profile-card li:last-child { padding-bottom: 0; }
.profile-card li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border: 1px solid var(--acid); transform: rotate(45deg); }
.profile-card li strong { display: block; font-size: .84rem; }
.profile-card li span { display: block; margin-top: 4px; color: #898391; font-size: .74rem; line-height: 1.55; }
.house-profile { background: rgba(139,92,246,.04); }
.house-profile li::before { border-color: #a882ff; }
.profiles-footer { display: grid; grid-template-columns: 160px 1fr; gap: 28px; padding: 34px 54px; border-top: 1px solid var(--line); background: #11101a; }
.profiles-footer strong { color: var(--acid); font-family: var(--heading); font-size: .65rem; letter-spacing: .15em; }
.profiles-footer p { margin: 0; color: #7f7987; font-size: .75rem; line-height: 1.65; }

.site-footer { min-height: 150px; padding: 42px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 28px; color: #716c79; font-family: var(--heading); font-size: .7rem; letter-spacing: .12em; }
.site-footer div { display: flex; align-items: center; gap: 12px; color: #aaa5b1; }
.site-footer .brand-mark { width: 15px; height: 15px; }
.site-footer .brand-mark::after { width: 3px; height: 3px; top: 4px; left: 4px; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr .75fr; gap: 44px; min-height: 620px; }
  .hero h1 { font-size: clamp(3.6rem,8vw,6rem); }
  .stats { gap: 34px; }
  .album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .controls { grid-template-columns: 1fr auto; }
  .year-wrap { grid-column: 2; }
  .genre-filters { grid-row: 2; grid-column: 1; width: max-content; }
}

@media (max-width: 720px) {
  .shell, .site-header { width: min(100% - 30px, 1240px); }
  .site-header { height: 68px; }
  .brand { font-size: .94rem; }
  .status { font-size: .65rem; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: auto; padding: 62px 0 72px; }
  .hero h1 { font-size: clamp(3.6rem,18vw,5.4rem); }
  .hero-intro { margin: 26px 0 30px; font-size: .98rem; }
  .stats { justify-content: space-between; gap: 15px; }
  .stats strong { font-size: 2.25rem; }
  .featured { margin-top: 18px; }
  .featured-label { left: 28px; right: 28px; bottom: 27px; }
  .featured-index { right: 28px; bottom: 30px; }
  .catalog { padding: 72px 0 80px; }
  .section-heading { align-items: start; flex-direction: column; margin-bottom: 26px; }
  .controls { display: flex; flex-direction: column; margin-bottom: 32px; }
  .search-wrap input { height: 54px; }
  .genre-filters { width: 100%; }
  .filter { flex: 1; min-width: 0; height: 44px; }
  .year-wrap { width: 100%; }
  .year-wrap select { height: 50px; }
  .album-grid { grid-template-columns: 1fr; gap: 42px; }
  .album-info h3 { font-size: 1.9rem; }
  .site-footer { align-items: flex-start; flex-direction: column; min-height: 190px; }
  .tracklist-modal { width: 100%; max-height: 100vh; height: 100vh; border: 0; }
  .modal-hero, .modal-heading { min-height: 270px; }
  .modal-heading { padding: 38px 24px; }
  .modal-content { padding: 0 24px 40px; }
  .tracklist-meta { grid-template-columns: auto auto; gap: 22px; }
  .tracklist-meta p { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .modal-tracks li { grid-template-columns: 26px 62px 1fr; gap: 8px; }
  .track-main strong { font-size: .8rem; }
  .set-list .set-actions { gap: 10px; }
  .set-actions .set-year { padding-left: 10px; }
  .profiles-modal { width: 100%; height: 100vh; max-height: 100vh; border: 0; }
  .profiles-header { padding: 66px 24px 42px; }
  .profiles-grid { grid-template-columns: 1fr; }
  .profile-card { padding: 40px 24px 44px; }
  .profile-card + .profile-card { border-left: 0; border-top: 1px solid var(--line); }
  .profiles-footer { grid-template-columns: 1fr; padding: 30px 24px; gap: 10px; }
}

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