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

:root{--black:#0b0a09;--cream:#eee5cf;--paper:#d7cdb6;--red:#bd1d21;--muted:#948e82;--line:rgba(238,229,207,.28)}
*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--cream);background:var(--black);font-family:"Barlow Condensed",Impact,sans-serif;letter-spacing:.025em;overflow-x:hidden}
button,input{font:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.17;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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.site-header{height:78px;max-width:1500px;margin:auto;padding:0 4vw;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.brand{color:var(--cream);text-decoration:none;font-size:1.55rem;font-weight:900;letter-spacing:.045em}
.year{color:var(--red);font-size:1.35rem;font-weight:800;letter-spacing:.15em}
.player-shell{width:min(1500px,92vw);margin:clamp(28px,4vw,64px) auto;display:grid;grid-template-columns:minmax(300px,.92fr) minmax(440px,1.08fr);gap:clamp(34px,5vw,90px);align-items:start}
.cover-zone img{width:100%;height:auto;display:block;border:1px solid var(--cream);box-shadow:16px 16px 0 rgba(189,29,33,.8);filter:contrast(1.02)}
.cover-zone p{margin:26px 0 0;text-transform:uppercase;letter-spacing:.28em;color:var(--paper);font-size:.9rem}
.deck{padding-top:4px}
.album-heading{display:flex;align-items:flex-end;gap:18px;border-bottom:10px solid var(--red);padding-bottom:15px}
.album-heading h1{font-size:clamp(3.5rem,7vw,7.7rem);line-height:.77;margin:0;font-weight:900;letter-spacing:-.045em}
.album-heading strong{font-size:clamp(3.4rem,6.8vw,7.3rem);line-height:.77;color:var(--red);letter-spacing:-.04em}
.now-playing{margin:30px 0 14px;min-height:78px}
.now-playing span{display:block;font-size:.78rem;letter-spacing:.28em;color:var(--muted);font-weight:700}
.now-playing h2{margin:4px 0 0;font-size:clamp(1.8rem,3vw,3rem);line-height:1;font-weight:700}
.timeline input,.volume input{width:100%;accent-color:var(--red);cursor:pointer}
.time{display:flex;justify-content:space-between;color:var(--paper);font-variant-numeric:tabular-nums;font-size:.9rem;margin-top:3px}
.transport{display:grid;grid-template-columns:54px 76px 54px 1fr;align-items:center;gap:16px;margin:18px 0 28px}
.transport button{border:1px solid var(--line);background:transparent;color:var(--cream);height:54px;cursor:pointer;transition:.18s ease}
.transport button:hover,.transport button:focus-visible{background:var(--cream);color:var(--black);outline:none}
.transport .play{height:76px;border-radius:50%;font-size:1.55rem;padding-left:5px;border-color:var(--cream)}
.volume{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;margin-left:12px;color:var(--muted);font-size:.78rem;letter-spacing:.16em}
.track-list{list-style:none;padding:0;margin:0;border:1px solid var(--line);max-height:350px;overflow:auto}
.track-list li{border-bottom:1px solid var(--line)}
.track-list li:last-child{border:0}
.track{width:100%;border:0;background:transparent;color:var(--cream);display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;padding:13px 16px;text-align:left;cursor:pointer;font-size:1.1rem}
.track:hover,.track:focus-visible{background:rgba(238,229,207,.08);outline:none}
.track.active{background:var(--red);color:white}
.track.no-file{cursor:not-allowed;color:#77736b}
.track-number{font-variant-numeric:tabular-nums;color:var(--muted)}
.active .track-number{color:white}
.track-duration{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--muted)}
.active .track-duration{color:white}
.status{min-height:1.2em;color:var(--muted);font-size:.9rem;letter-spacing:.08em;margin:12px 0 0}
footer{width:min(1500px,92vw);margin:0 auto;padding:22px 0 38px;border-top:1px solid var(--line);display:flex;align-items:center;gap:22px;color:var(--muted);letter-spacing:.2em;font-size:.82rem}
.red-line{display:block;width:64px;height:3px;background:var(--red)}
@media(max-width:900px){.player-shell{grid-template-columns:1fr;width:min(680px,90vw)}.cover-zone img{box-shadow:10px 10px 0 rgba(189,29,33,.8)}.cover-zone p{margin-top:20px}.album-heading{margin-top:10px}.track-list{max-height:none}}
@media(max-width:520px){.site-header{height:62px}.player-shell{margin-top:26px;gap:36px}.album-heading{gap:10px;border-width:7px}.now-playing{margin-top:24px}.transport{grid-template-columns:48px 66px 48px;gap:10px}.transport button{height:48px}.transport .play{height:66px}.volume{grid-column:1/-1;margin:3px 0 0}.track{grid-template-columns:32px 1fr auto;padding:12px 11px;gap:7px}.cover-zone p{font-size:.75rem;letter-spacing:.18em}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}