:root{--black:#080808;--paper:#f2eee8;--red:#f2054e;--rule:rgba(242,238,232,.24);--mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;--display:Impact,'Arial Narrow','Helvetica Neue Condensed',sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--paper);font-family:Arial,Helvetica,sans-serif}
button,a,input{touch-action:manipulation}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-shell{min-height:100dvh;max-width:2200px;margin:auto;position:relative;isolation:isolate}
.site-shell::after{content:'';position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.11;background-image:radial-gradient(var(--paper) .38px,transparent .55px);background-size:4px 4px;mix-blend-mode:soft-light}
.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 3.1vw;border-bottom:1px solid var(--rule);position:relative;z-index:5}
.brand{font:900 clamp(26px,2.9vw,46px)/1 var(--display);letter-spacing:-.045em;white-space:nowrap}
.brand-point{font:normal .75em/1 var(--display);color:var(--red);margin-left:7px;vertical-align:9%}
.topbar-right{display:flex;align-items:center;gap:clamp(25px,4vw,80px)}
.edition,.external{font:500 10px/1.4 var(--mono);letter-spacing:.18em}
.edition{color:rgba(242,238,232,.6);white-space:nowrap}
.external{display:flex;gap:24px}
.external a{min-height:44px;display:grid;place-items:center;white-space:nowrap}
.external a:hover{color:var(--red)}
.hero{height:min(690px,calc(100dvh - 270px));min-height:510px;position:relative;overflow:hidden;border-bottom:1px solid var(--rule);background:radial-gradient(ellipse 43% 75% at 73% 43%,#2c0513 0%,#0d080a 56%,var(--black) 100%)}
.hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--black) 0%,rgba(8,8,8,.96) 26%,rgba(8,8,8,.45) 47%,transparent 66%),linear-gradient(0deg,var(--black),transparent 27%);opacity:.9}
.hero-art{position:absolute;z-index:1;right:-7%;top:-27%;width:min(85vw,1140px);aspect-ratio:1;pointer-events:none;transform-origin:60% 40%}
.hero-art img{display:block;width:100%;height:auto;filter:saturate(.9) contrast(1.11)}
body[data-playing="true"] .hero-art{animation:slow-drift 16s ease-in-out infinite alternate}
@keyframes slow-drift{from{transform:scale(1)}to{transform:scale(1.025)}}
.crossline{position:absolute;z-index:2;top:0;bottom:0;left:55%;width:1px;background:linear-gradient(180deg,transparent,var(--red) 17%,rgba(242,5,78,.35) 53%,transparent 94%);opacity:.55;mix-blend-mode:screen;pointer-events:none}
.hero-copy{position:absolute;z-index:3;left:3.1vw;bottom:5.7%;width:60%;pointer-events:none}
.eyebrow{display:flex;align-items:center;gap:15px;margin:0 0 29px;font:500 10px/1.2 var(--mono);letter-spacing:.2em;color:var(--paper)}
.eyebrow-rule{display:inline-block;background:var(--red);height:2px;width:34px}
.eyebrow-index{color:var(--red);margin-left:7px}
.record-title{font:900 clamp(76px,10.45vw,190px)/.77 var(--display);letter-spacing:-.055em;margin:0;text-transform:uppercase;text-wrap:balance;max-width:980px;text-shadow:0 5px 30px rgba(0,0,0,.45)}
.record-title.is-changing{animation:title-enter .5s cubic-bezier(.16,.7,.25,1)}
@keyframes title-enter{from{opacity:.5;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.record-title .small-line{font-size:.48em;letter-spacing:-.03em;display:block;margin-top:.09em}
.hero-subline{display:flex;align-items:center;gap:11px;margin:34px 0 0;font:500 10px/1.3 var(--mono);letter-spacing:.19em;color:rgba(242,238,232,.67)}
.hero-subline-star{color:var(--red);font-size:25px;line-height:0}
.hero-subline-divider{color:var(--red)}
.side-mark{position:absolute;right:1.7vw;bottom:6%;z-index:3;writing-mode:vertical-rl;font:500 9px/1 var(--mono);letter-spacing:.24em;color:rgba(242,238,232,.55)}
.side-mark span{color:var(--red)}
.listening-desk{padding:0 3.1vw 24px;position:relative;z-index:5;background:var(--black)}
.transport-row{min-height:99px;display:grid;grid-template-columns:91px minmax(0,1fr) 82px;gap:29px;align-items:center;border-bottom:1px solid var(--rule)}
.play-button{height:75px;width:91px;border:0;background:var(--red);color:var(--black);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}
.play-button:hover{background:var(--paper)}
.play-symbol{font-size:28px;line-height:1}
.play-word{font:700 9px/1 var(--mono);letter-spacing:.16em}
.seek-block{min-width:0}
.seek-caption,.seek-times{display:flex;justify-content:space-between;gap:15px;font:500 10px/1.2 var(--mono);letter-spacing:.14em}
.seek-caption{padding-bottom:6px;color:var(--paper)}
.seek-caption span:last-child,.seek-times{color:rgba(242,238,232,.55)}
#seek{display:block;appearance:none;-webkit-appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;--progress:0%}
#seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--red) var(--progress),rgba(242,238,232,.28) var(--progress))}
#seek::-moz-range-track{height:2px;background:rgba(242,238,232,.28)}
#seek::-moz-range-progress{height:2px;background:var(--red)}
#seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border-radius:0;background:var(--red);margin-top:-5.5px;transform:rotate(45deg)}
#seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:0;background:var(--red);transform:rotate(45deg)}
.signal-glyph{display:grid;place-items:center;font-size:42px;line-height:1;color:var(--red)}
.record-index{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.record-index button{position:relative;min-height:78px;text-align:left;border:0;border-right:1px solid var(--rule);padding:15px 16px 12px;background:transparent;color:rgba(242,238,232,.54);display:flex;flex-direction:column;justify-content:space-between;gap:9px}
.record-index button:first-child{border-left:1px solid var(--rule)}
.record-index button span{font:600 10px/1 var(--mono);letter-spacing:.15em}
.record-index button strong{font:500 clamp(9px,.85vw,12px)/1.3 var(--mono);letter-spacing:.03em;white-space:normal}
.record-index button[aria-current="true"]{color:var(--paper)}
.record-index button[aria-current="true"]::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--red)}
.record-index button[aria-current="true"] span,.record-index button:hover{color:var(--red)}

@media(max-width:1050px){.edition{display:none}.hero-art{right:-17%;width:105vw;top:-13%}.hero-copy{width:70%}.record-title{font-size:clamp(72px,11.5vw,130px)}.record-index button{padding-inline:10px}.transport-row{gap:18px}}
@media(max-width:700px){.topbar{height:74px;padding-inline:20px}.brand{font-size:31px}.brand-point{margin-left:4px}.external{gap:9px;font-size:8px;letter-spacing:.06em}.external a{min-height:44px}.hero{height:69dvh;min-height:500px;max-height:680px;background:#080808}.hero-art{width:118vw;right:-35vw;top:-5vw}.hero::before{background:linear-gradient(0deg,var(--black) 0%,rgba(8,8,8,.72) 21%,transparent 58%),linear-gradient(90deg,rgba(8,8,8,.18),transparent 60%);opacity:1}.crossline{left:18px;opacity:.4}.hero-copy{left:20px;bottom:27px;width:calc(100% - 35px)}.eyebrow{margin-bottom:20px;gap:10px;font-size:9px}.eyebrow-rule{width:24px}.record-title{font-size:clamp(70px,17vw,119px);line-height:.79;max-width:680px}.record-title .small-line{font-size:.46em}.hero-subline{margin-top:24px;font-size:8px}.side-mark{display:none}.listening-desk{padding:0 20px 25px}.transport-row{grid-template-columns:66px minmax(0,1fr);gap:15px;min-height:83px}.play-button{width:66px;height:65px}.signal-glyph{display:none}.seek-caption{font-size:8px;letter-spacing:.06em}.seek-times{font-size:9px}.record-index{grid-template-columns:repeat(2,minmax(0,1fr))}.record-index button{min-height:66px;padding:11px 8px}.record-index button:nth-child(n+3){border-top:1px solid var(--rule)}.record-index button:nth-child(odd){border-left:1px solid var(--rule)}.record-index button strong{font-size:10px}}
@media(max-width:390px){.brand{font-size:26px}.external{font-size:7px;gap:6px}.record-title{font-size:18vw}.hero-art{width:125vw;right:-48vw;top:2vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
