:root {
  --void: #090a09;
  --coal: #101210;
  --charcoal: #191b18;
  --bone: #e9dfca;
  --paper: #f3ead8;
  --ash: #b8b0a1;
  --smoke: #817b72;
  --ember: #d37b32;
  --ember-bright: #ee9a51;
  --rust: #69321f;
  --line: rgba(233, 223, 202, 0.17);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --shell: min(1220px, calc(100% - 40px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body { margin: 0; background: var(--void); color: var(--bone); font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
:focus-visible { outline: 3px solid var(--ember-bright); outline-offset: 4px; }
::selection { color: var(--void); background: var(--ember-bright); }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: clamp(88px, 10vw, 150px) 0; position: relative; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .035; 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 12px 16px; color: var(--void); background: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin: 0 0 16px; color: var(--ember-bright); font: 700 .82rem/1 var(--display); letter-spacing: .27em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; }
h1 { max-width: 770px; font-size: clamp(3.8rem, 7.5vw, 7.6rem); line-height: .84; }
h2 { font-size: clamp(3.4rem, 6vw, 6.6rem); line-height: .9; }
h3 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 500; border-bottom: 1px solid var(--line); background: rgba(9, 10, 9, .88); backdrop-filter: blur(16px); }
.nav { min-height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; font: 700 1.45rem/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.brand img { width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--line); }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a, .site-footer nav a { color: var(--ash); font: 700 .85rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; transition: color .2s ease; }
.nav-links a:hover, .site-footer nav a:hover { color: var(--ember-bright); }
.nav-cta { justify-self: end; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 6px auto; background: var(--bone); transition: transform .2s ease; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border: 1px solid transparent; font: 800 .97rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--ember { color: #090a09; background: var(--ember); }
.button--ember:hover { background: var(--ember-bright); }
.button--outline { border-color: rgba(233, 223, 202, .72); background: rgba(9, 10, 9, .2); }
.button--outline:hover { border-color: var(--ember-bright); }
.button--wide { width: 100%; }
[aria-disabled="true"] { cursor: not-allowed; }
.button[aria-disabled="true"] { color: var(--ash); border-color: var(--line); background: rgba(233, 223, 202, .06); }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; }

.hero { min-height: 100svh; padding: 126px 0 58px; display: flex; align-items: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-atmosphere { position: absolute; inset: 0; background: radial-gradient(circle at 78% 46%, rgba(211, 123, 50, .14), transparent 29%), linear-gradient(110deg, transparent 45%, rgba(255,255,255,.025)); }
.hero-atmosphere::after { content: ""; position: absolute; width: 42vw; height: 42vw; right: -20vw; bottom: -28vw; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 8vw rgba(233,223,202,.012), 0 0 0 16vw rgba(233,223,202,.008); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(420px, .78fr); gap: clamp(45px, 8vw, 120px); align-items: center; position: relative; }
.hero-copy { padding-left: clamp(0px, 3vw, 42px); }
.hero-lede { max-width: 620px; margin: 30px 0; color: var(--ash); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.hero-note { margin: 16px 0 0; color: var(--smoke); font-size: .82rem; letter-spacing: .04em; }
.album-visual { position: relative; }
.album-visual img { width: min(46vw, 590px); aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(233, 223, 202, .3); box-shadow: 0 35px 100px rgba(0,0,0,.62); position: relative; }
.album-halo { position: absolute; inset: -8%; border: 1px solid var(--line); transform: rotate(4deg); }
.album-index { position: absolute; right: -38px; bottom: 20px; color: var(--smoke); font: 600 .7rem/1 var(--display); letter-spacing: .3em; writing-mode: vertical-rl; }

.release { background: linear-gradient(180deg, var(--coal), var(--void)); }
.section-heading { margin-bottom: 52px; }
.section-heading--split { display: grid; grid-template-columns: 1.4fr .6fr; gap: 60px; align-items: end; }
.section-heading--split > p { max-width: 450px; margin: 0 0 5px; color: var(--ash); }
.store-grid { display: grid; grid-template-columns: minmax(280px, .64fr) minmax(0, 1.36fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.album-card { border: 1px solid var(--line); background: rgba(25, 27, 24, .75); box-shadow: 0 28px 70px rgba(0,0,0,.24); position: sticky; top: 106px; }
.album-card > img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.album-card__body { padding: 30px; }
.album-card__body > p:not(.eyebrow, .payment-note) { color: var(--ash); }
.price-line { margin: 30px 0 24px; padding-top: 22px; display: flex; align-items: end; gap: 16px; border-top: 1px solid var(--line); }
.price-line strong { font: 700 3.25rem/.8 var(--display); }
.price-line span { max-width: 160px; color: var(--smoke); font-size: .78rem; line-height: 1.25; }
.payment-note { margin: 14px 0 0; color: var(--smoke); font-size: .77rem; text-align: center; }
.track-panel { border-top: 1px solid var(--line); }
.track-panel__head { min-height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.track-panel__head span { color: var(--smoke); font: 700 .78rem/1 var(--display); letter-spacing: .15em; text-transform: uppercase; }
.track-list { margin: 0; padding: 0; list-style: none; }
.track { min-height: 66px; display: grid; grid-template-columns: 42px 48px minmax(0, 1fr) 66px; align-items: center; border-bottom: 1px solid var(--line); transition: background .2s ease, padding .2s ease; }
.track:hover, .track.is-playing { padding-inline: 10px; background: rgba(233,223,202,.045); }
.track.is-playing { box-shadow: inset 3px 0 0 var(--ember); }
.track-number { color: var(--smoke); font: 600 .76rem/1 var(--display); letter-spacing: .08em; }
.track-title { min-width: 0; padding-right: 10px; font-weight: 600; }
.play-button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ash); cursor: pointer; }
.play-button:hover, .track.is-playing .play-button { color: var(--ember-bright); }
.track-buy { min-width: 58px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ash); font: 700 .8rem/1 var(--display); }
.track-buy:hover { color: var(--ember-bright); border-color: var(--ember); }
.preview-disclaimer { margin: 18px 0 0; color: var(--smoke); font-size: .8rem; }

.manifesto { overflow: hidden; background: var(--void); border-block: 1px solid var(--line); }
.manifesto-mark { position: absolute; inset: 50% auto auto -2vw; transform: translateY(-50%); color: rgba(233,223,202,.025); font: 900 min(25vw, 350px)/1 var(--display); letter-spacing: -.06em; pointer-events: none; }
.manifesto-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 8vw, 120px); align-items: center; position: relative; }
.manifesto h2 { font-size: clamp(3.1rem, 5.5vw, 6.3rem); }
.manifesto h2 em { color: var(--ember); font-style: normal; }
.manifesto-copy { color: var(--ash); font-size: 1.12rem; }
.manifesto-copy p { margin: 0 0 24px; }

.band { background: var(--coal); }
.members { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.member { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--charcoal); }
.member img { width: 100%; aspect-ratio: .78; object-fit: cover; filter: saturate(.65) contrast(1.05); transition: transform .45s ease, filter .45s ease; }
.member:hover img { transform: scale(1.025); filter: saturate(.9) contrast(1.03); }
.member figcaption { position: absolute; inset: auto 0 0; padding: 58px 18px 18px; background: linear-gradient(transparent, rgba(0,0,0,.9)); font: 700 2rem/1 var(--display); text-transform: uppercase; }

.watch { background: var(--void); }
.watch-grid { display: grid; grid-template-columns: .67fr 1.33fr; gap: clamp(40px, 7vw, 96px); align-items: center; }
.watch-copy > p:not(.eyebrow) { max-width: 460px; color: var(--ash); }
.video-stage { min-height: 500px; display: grid; place-items: center; align-content: center; gap: 20px; position: relative; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle, rgba(211,123,50,.11), transparent 28%), repeating-linear-gradient(115deg, transparent 0 32px, rgba(233,223,202,.015) 32px 33px), var(--coal); text-align: center; }
.video-stage img { width: 118px; opacity: .46; filter: grayscale(1); }
.video-stage strong { font: 700 clamp(2.2rem, 4vw, 4.6rem)/.88 var(--display); text-transform: uppercase; }
.video-stage__line { width: 1px; height: 45px; background: var(--ember); }
.video-stage__code { position: absolute; right: 22px; bottom: 18px; color: var(--smoke); font: 600 .7rem/1 var(--display); letter-spacing: .25em; }

.community { border-top: 1px solid var(--line); background: linear-gradient(rgba(9,10,9,.9), rgba(9,10,9,.96)), radial-gradient(circle at center, var(--rust), transparent 55%); text-align: center; }
.community-inner { max-width: 900px; }
.community h2 { max-width: 900px; margin-inline: auto; }
.community > div > p:not(.eyebrow, .community-note) { color: var(--ash); font-size: 1.15rem; }
.button-row--center { justify-content: center; margin-top: 34px; }
.community-note { color: var(--smoke); font-size: .8rem; }

.site-footer { padding: 54px 0; border-top: 1px solid var(--line); background: #060706; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand img { width: 58px; height: 58px; opacity: .72; }
.footer-brand strong { display: block; font: 700 1.5rem/1 var(--display); text-transform: uppercase; }
.footer-brand span, .site-footer p { color: var(--smoke); font-size: .78rem; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer p { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid var(--line); }
.site-notice { position: fixed; right: 22px; bottom: 22px; z-index: 900; max-width: min(430px, calc(100% - 44px)); padding: 16px 20px; border: 1px solid var(--ember); background: var(--coal); box-shadow: 0 14px 50px rgba(0,0,0,.5); }
.noscript { position: fixed; inset: auto 0 0; z-index: 1001; padding: 10px; color: var(--void); background: var(--paper); text-align: center; }

.legal { min-height: 100vh; padding: 130px 0 80px; }
.legal__inner { max-width: 820px; }
.legal h1 { font-size: clamp(3.6rem, 8vw, 6.6rem); }
.legal h2 { margin-top: 44px; font-size: 2rem; }
.legal p, .legal li { color: var(--ash); }
.legal a { color: var(--ember-bright); text-decoration: underline; }
.back-link { display: inline-flex; margin-top: 32px; min-height: 44px; align-items: center; }

.reveal-ready main > section:not(.hero) { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-ready main > section.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .brand span, .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .nav-links { position: absolute; inset: 78px 0 auto; display: none; padding: 24px 20px; border-bottom: 1px solid var(--line); background: rgba(9,10,9,.98); }
  .nav-links.is-open { display: grid; gap: 6px; }
  .nav-links a { min-height: 48px; display: flex; align-items: center; }
  .hero { padding-top: 106px; }
  .hero-grid { grid-template-columns: 1fr; }
  .album-visual { grid-row: 1; width: min(78vw, 560px); margin-inline: auto; }
  .album-visual img { width: 100%; }
  .album-index { display: none; }
  .hero-copy { text-align: center; padding: 0; }
  .hero-copy .button-row { justify-content: center; }
  .section-heading--split, .store-grid, .manifesto-grid, .watch-grid { grid-template-columns: 1fr; }
  .section-heading--split { gap: 24px; }
  .album-card { position: static; display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr; }
  .album-card > img { height: 100%; object-fit: cover; }
  .members { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .member { grid-column: span 2; }
  .member:nth-child(4) { grid-column: 2 / span 2; }
  .member:nth-child(5) { grid-column: 4 / span 2; }
  .watch-copy { text-align: center; }
  .watch-copy > p:not(.eyebrow) { margin-inline: auto; }
}

@media (max-width: 620px) {
  :root { --shell: min(100% - 28px, 1220px); }
  body { font-size: 16px; }
  .section { padding: 82px 0; }
  .nav { min-height: 70px; }
  .nav-links { top: 70px; }
  .brand img { width: 42px; height: 42px; }
  .hero { min-height: auto; padding: 94px 0 74px; }
  .hero-grid { gap: 46px; }
  .album-visual { width: min(88vw, 440px); }
  .hero-copy { text-align: left; }
  .hero-copy .button-row { justify-content: flex-start; }
  .hero-lede { margin: 22px 0; }
  .button-row .button { width: 100%; }
  .section-heading { margin-bottom: 34px; }
  .album-card { display: block; }
  .album-card__body { padding: 24px; }
  .track { grid-template-columns: 30px 46px minmax(0,1fr) 55px; min-height: 72px; }
  .track-title { font-size: .94rem; line-height: 1.2; }
  .members { grid-template-columns: 1fr; gap: 10px; }
  .member, .member:nth-child(4), .member:nth-child(5) { grid-column: 1; }
  .member figcaption { padding: 44px 12px 12px; font-size: 1.55rem; }
  .video-stage { min-height: 390px; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-footer nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}