:root {
  color-scheme: dark;
  --ink: #080b0a;
  --ink-soft: #101510;
  --panel: #151914;
  --paper: #f5eddb;
  --muted: #aaa998;
  --gold: #d8af56;
  --gold-light: #f1d58a;
  --lime: #c7ff42;
  --line: rgba(238, 224, 187, .16);
  --serif: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--lime); color: #111; padding: 10px 14px; border-radius: 4px; }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 26px clamp(24px,5vw,80px); border-bottom: 1px solid rgba(255,255,255,.1); }
.wordmark { display: flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.wordmark span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); font: 700 12px/1 var(--serif); letter-spacing: 0; }
nav { display: flex; align-items: center; gap: clamp(18px,3vw,42px); font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
nav a { text-decoration: none; color: #d9d8cd; }
nav a:hover { color: var(--lime); }
.nav-listen { border: 1px solid rgba(255,255,255,.4); padding: 10px 18px; border-radius: 999px; }

.hero { min-height: 920px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.75fr); gap: clamp(36px,6vw,100px); align-items: center; padding: 140px clamp(24px,7vw,110px) 90px; background: radial-gradient(circle at 80% 44%,rgba(147,187,53,.17),transparent 30%), linear-gradient(135deg,#0c110d 0%,#070908 58%,#141109 100%); }
.hero.public-hero { grid-template-columns: minmax(0,1fr); min-height: 800px; }
.hero.public-hero .hero-copy { max-width: 1040px; }
.hero::after { content: "VON BLING"; position: absolute; left: -15px; bottom: -48px; font: 900 clamp(100px,16vw,260px)/.8 var(--serif); letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px rgba(234,219,178,.08); white-space: nowrap; }
.hero-glow { position: absolute; width: 720px; height: 720px; right: -220px; top: 90px; border: 1px solid rgba(223,187,95,.12); border-radius: 50%; box-shadow: 0 0 160px rgba(201,255,67,.05) inset; }
.hero-copy { position: relative; z-index: 1; max-width: 800px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--gold-light); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 750; }
.eyebrow span { width: 28px; height: 1px; background: currentColor; }
h1 { margin: 22px 0 28px; font: 600 clamp(58px,7.7vw,126px)/.82 var(--serif); letter-spacing: -.065em; }
h1 em { color: var(--lime); font-weight: 400; }
.hero-intro { max-width: 640px; color: #cfcec2; font: 400 clamp(17px,1.6vw,22px)/1.55 var(--sans); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; flex-wrap: wrap; }
.primary-button,.secondary-button { border: 0; cursor: pointer; font-weight: 750; }
.primary-button { background: var(--lime); color: #11150d; padding: 16px 24px; border-radius: 4px; box-shadow: 0 10px 34px rgba(198,255,66,.12); }
.primary-button:hover { background: #dbff85; transform: translateY(-1px); }
.text-button { color: #d8d5c8; font-size: 14px; text-decoration: none; }
.text-button span { color: var(--lime); margin-left: 6px; }
.hero-stats { display: flex; gap: 42px; margin: 58px 0 0; }
.hero-stats div { display: grid; }
.hero-stats dt { font: 500 30px/1 var(--serif); color: var(--gold-light); }
.hero-stats dd { margin: 7px 0 0; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }

.upcoming-cover { position: relative; z-index: 2; width: min(100%,590px); justify-self: center; border: 0; padding: 0; background: transparent; color: var(--paper); text-align: left; cursor: pointer; transform: rotate(1.7deg); filter: drop-shadow(0 32px 65px rgba(0,0,0,.5)); }
.upcoming-cover::before { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(232,204,128,.25); z-index: -1; transform: rotate(-3deg); }
.upcoming-cover img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(249,225,156,.38); }
.cover-kicker { position: absolute; z-index: 1; top: 18px; left: -14px; background: var(--lime); color: #10130d; padding: 9px 13px; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; font-weight: 850; }
.cover-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding: 14px 4px 0; }
.cover-caption strong { font: 500 24px/1.1 var(--serif); }
.cover-caption small { color: var(--muted); }
.upcoming-cover:hover { transform: rotate(.5deg) scale(1.012); }

.latest-strip { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; align-items: center; gap: 24px; padding: 18px clamp(24px,7vw,110px); background: var(--lime); color: #11150d; }
.latest-art img { display: block; width: 82px; height: 82px; object-fit: cover; }
.latest-strip .eyebrow { color: #394118; margin-bottom: 7px; }
.latest-copy h2 { margin: 0; font: 600 clamp(25px,3vw,39px)/1 var(--serif); }
.latest-copy > p:last-child { margin: 7px 0 0; color: #465027; font-size: 13px; }
.secondary-button { padding: 12px 18px; background: transparent; color: #11150d; border: 1px solid rgba(17,21,13,.55); border-radius: 4px; }
.secondary-button:hover { background: #11150d; color: var(--lime); }

.music-section { padding: 110px clamp(24px,7vw,110px) 130px; }
.section-heading { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.65fr); gap: 60px; align-items: end; margin-bottom: 54px; }
.section-heading h2,.manifesto h2 { margin: 12px 0 0; font: 500 clamp(45px,5.8vw,86px)/.95 var(--serif); letter-spacing: -.045em; }
.section-heading > p { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 560px; }
.catalogue-tools { display: flex; justify-content: space-between; gap: 25px; align-items: center; margin-bottom: 30px; border-top: 1px solid var(--line); padding-top: 24px; }
.search-box { position: relative; width: min(440px,100%); }
.search-box input { width: 100%; padding: 13px 42px 13px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--paper); outline: none; }
.search-box input:focus { border-color: var(--lime); }
.search-box > span:last-child { position: absolute; right: 8px; top: 9px; color: var(--gold-light); font-size: 24px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { border: 1px solid var(--line); color: var(--muted); background: transparent; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 12px; }
.filter:hover,.filter.active { color: #11150d; background: var(--paper); }
.release-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(16px,2vw,30px); }
.release-card { text-align: left; border: 0; background: transparent; color: var(--paper); padding: 0 0 18px; cursor: pointer; min-width: 0; }
.release-card .art-wrap { position: relative; overflow: hidden; background: #171a16; aspect-ratio: 1; }
.release-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease,filter .5s ease; }
.release-card .open-mark { position: absolute; right: 13px; bottom: 13px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #111; transform: translateY(60px); transition: transform .25s ease; font-size: 21px; }
.release-card:hover img { transform: scale(1.035); filter: saturate(1.08); }
.release-card:hover .open-mark,.release-card:focus-visible .open-mark { transform: translateY(0); }
.release-card h3 { margin: 15px 0 5px; font: 600 clamp(19px,1.7vw,27px)/1.05 var(--serif); overflow-wrap: anywhere; }
.release-card p { margin: 0; color: var(--muted); font-size: 12px; }
.story-badge { display: inline-flex; margin-top: 11px; color: var(--gold-light); border-bottom: 1px solid rgba(216,175,86,.45); padding-bottom: 3px; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.empty-state { padding: 50px; text-align: center; color: var(--muted); border: 1px solid var(--line); }

.curiosity-section { padding: 115px clamp(24px,10vw,170px); background: radial-gradient(circle at 85% 10%,rgba(199,255,66,.08),transparent 28%),#11150f; border-top: 1px solid var(--line); }
.curiosity-section blockquote { max-width: 1150px; margin: 30px 0 24px; font: 500 clamp(45px,6.6vw,105px)/.98 var(--serif); letter-spacing: -.045em; }
.curiosity-section blockquote em { color: var(--lime); font-weight: 400; }
.curiosity-section > p:last-child { color: var(--muted); font-size: 16px; }

.manifesto { position: relative; overflow: hidden; display: grid; grid-template-columns: .35fr .9fr .85fr; gap: clamp(28px,5vw,90px); align-items: start; padding: 110px clamp(24px,7vw,110px); background: #e9dfc7; color: #171810; }
.manifesto-mark { font: 700 clamp(80px,12vw,170px)/.75 var(--serif); color: #c0ad7e; letter-spacing: -.12em; }
.manifesto .eyebrow { color: #6d5a27; }
.manifesto-copy { font-size: 17px; line-height: 1.7; color: #4b4b3d; padding-top: 35px; }
.platform-links { display: flex; gap: 24px; margin-top: 35px; flex-wrap: wrap; }
.platform-links a { color: #171810; font-weight: 750; text-decoration: none; border-bottom: 1px solid #81744e; padding-bottom: 5px; }
.platform-links span { color: #647515; }

footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 30px; padding: 38px clamp(24px,7vw,110px); color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
footer > p:nth-child(2) { text-align: center; }
footer > p:last-child { text-align: right; }

.not-found { min-height: 100vh; display: grid; align-content: center; justify-items: start; gap: 22px; padding: clamp(28px,8vw,120px); background: radial-gradient(circle at 80% 30%,rgba(199,255,66,.1),transparent 34%),var(--ink); }
.not-found h1 { max-width: 900px; margin: 0; }
.not-found > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 18px; }
.not-found .primary-button { display: inline-flex; margin-top: 12px; text-decoration: none; }

dialog { width: min(1040px,calc(100vw - 36px)); max-height: calc(100vh - 36px); padding: 0; overflow: hidden; border: 1px solid rgba(226,199,122,.35); background: #10130f; color: var(--paper); box-shadow: 0 40px 110px rgba(0,0,0,.75); }
dialog::backdrop { background: rgba(2,4,3,.78); backdrop-filter: blur(10px); }
.dialog-close { position: absolute; z-index: 2; top: 13px; right: 13px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: #0a0c09cc; color: white; cursor: pointer; font-size: 28px; }
.dialog-layout { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1fr); max-height: calc(100vh - 38px); }
.dialog-art { background: #0b0d0a; min-height: 100%; }
.dialog-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; position: sticky; top: 0; }
.dialog-content { padding: clamp(34px,5vw,70px); overflow: auto; }
.dialog-content h2 { margin: 12px 0 10px; font: 600 clamp(38px,5vw,68px)/.9 var(--serif); letter-spacing: -.04em; }
.dialog-meta,.preview-note { color: var(--muted); line-height: 1.5; }
.track-list { list-style: none; counter-reset: tracks; padding: 0; margin: 32px 0; border-top: 1px solid var(--line); }
.track-list li { counter-increment: tracks; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: start; }
.track-list li::before { content: counter(tracks,decimal-leading-zero); color: var(--gold); font: 12px var(--serif); }
.track-list small { color: var(--muted); }
.track-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: baseline; }
.track-list details { min-width: 0; }
.track-list summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.track-list summary::-webkit-details-marker { display: none; }
.track-list summary:hover .track-title,.track-list summary:focus-visible .track-title { color: var(--lime); }
.lyrics-cue { color: var(--gold-light); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lyrics-cue::after { content: "+"; display: inline-block; width: 14px; margin-left: 7px; color: var(--lime); font-size: 15px; }
.track-list details[open] .lyrics-cue::after { content: "−"; }
.lyrics-sheet { margin: 15px 0 6px; padding: 22px clamp(16px,3vw,28px); border: 1px solid var(--line); border-left: 2px solid var(--gold); background: rgba(2,4,3,.35); }
.lyrics-sheet pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #e2dfd2; font: 400 15px/1.72 var(--serif); }
.dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 27px 0 30px; }
.dialog-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 17px; text-decoration: none; border: 1px solid var(--line); border-radius: 4px; font-weight: 750; font-size: 13px; }
.dialog-actions a:first-child { background: var(--lime); color: #11150d; border-color: var(--lime); }
.preview-note { font-size: 12px; margin-top: 22px; }
.release-tabs { display: flex; gap: 0; margin: 0 0 30px; border-bottom: 1px solid var(--line); }
.release-tabs button { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 16px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.release-tabs button:hover { color: var(--paper); }
.release-tabs button.active { color: var(--lime); border-bottom-color: var(--lime); }
.release-tabs + #dialogTracksPanel .track-list { margin-top: 0; }
.story-panel article { padding-bottom: 10px; }
.story-overline { margin: 0 0 10px; color: var(--gold-light); font-size: 10px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.story-panel h3 { margin: 0 0 24px; color: var(--paper); font: 500 clamp(28px,3.2vw,44px)/1.08 var(--serif); letter-spacing: -.025em; }
.story-origin { color: #dedace; font: 400 17px/1.72 var(--serif); }
.track-map,.source-shelf { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line); }
.track-map ul,.source-shelf ul { list-style: none; padding: 0; margin: 0; }
.track-map li { padding: 13px 0; border-bottom: 1px solid rgba(238,224,187,.09); }
.track-map strong { color: var(--paper); font: 600 17px/1.2 var(--serif); }
.track-map p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.source-shelf li { border-bottom: 1px solid rgba(238,224,187,.09); }
.source-shelf a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 16px; padding: 14px 0; text-decoration: none; }
.source-shelf a:hover strong { color: var(--lime); }
.source-shelf strong { font: 600 17px/1.2 var(--serif); }
.source-shelf span { grid-column: 1; color: var(--muted); font-size: 12px; }
.source-shelf b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--lime); font-weight: 500; }
.editorial-note { margin-top: 28px; padding: 16px 18px; border-left: 2px solid var(--gold); background: rgba(216,175,86,.06); color: var(--muted); font-size: 12px; line-height: 1.6; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr 420px; min-height: 820px; }
  .release-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .manifesto { grid-template-columns: .4fr 1fr; }
  .manifesto-copy { grid-column: 2; padding-top: 0; }
}
@media (max-width: 780px) {
  .site-header { position: relative; padding: 18px 20px; background: #0b0e0b; }
  nav a:not(.nav-listen) { display: none; }
  .hero { grid-template-columns: 1fr; padding: 75px 22px 80px; min-height: 0; }
  .hero-copy { order: 2; }
  .upcoming-cover { order: 1; width: min(90vw,500px); }
  h1 { font-size: clamp(54px,17vw,90px); }
  .latest-strip { grid-template-columns: 74px 1fr; padding: 15px 20px; }
  .latest-art img { width: 66px; height: 66px; }
  .latest-strip .secondary-button { display: none; }
  .music-section { padding: 80px 20px; }
  .curiosity-section { padding: 80px 22px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .catalogue-tools { align-items: stretch; flex-direction: column; }
  .release-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
  .manifesto { grid-template-columns: 1fr; padding: 80px 22px; }
  .manifesto-mark { display: none; }
  .manifesto-copy { grid-column: auto; }
  footer { grid-template-columns: 1fr; text-align: left; }
  footer > p:nth-child(2),footer > p:last-child { text-align: left; }
  dialog { overflow: auto; }
  .dialog-layout { grid-template-columns: 1fr; max-height: none; }
  .dialog-art img { position: static; }
  .dialog-content { overflow: visible; }
}
@media (max-width: 430px) {
  .cover-caption { display: block; }
  .cover-caption small { display: block; margin-top: 5px; }
  .hero-stats { gap: 26px; }
  .release-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
