.msf-discography { --msf-ink:#090909; --msf-red:#ff3b30; --msf-line:rgba(9,9,9,.11); --msf-mono:"Noto Sans Mono",monospace; --msf-sans:"DM Sans",sans-serif; background:#fff; color:var(--msf-ink); font-family:var(--msf-mono); overflow:hidden; }
.msf-discography *, .msf-discography *::before, .msf-discography *::after { box-sizing:border-box; }
.msf-discography__hero { align-items:end; border-bottom:1px solid var(--msf-line); display:grid; gap:40px; grid-template-columns:1fr auto; padding:clamp(72px,9vw,132px) clamp(22px,4vw,64px) clamp(52px,6vw,80px); }
.msf-discography__eyebrow { color:var(--msf-red); font-size:12px; font-weight:700; letter-spacing:.08em; }
.msf-discography__title { font-size:clamp(48px,8.5vw,130px); font-weight:700; letter-spacing:-.095em; line-height:.87; margin:20px 0 0; overflow:hidden; }
.msf-discography__title span { display:block; }
.msf-discography__stats { display:flex; gap:clamp(22px,4vw,54px); text-align:right; }
.msf-discography__stats b { display:block; font-size:clamp(34px,4vw,58px); letter-spacing:-.1em; line-height:.88; }
.msf-discography__stats span { color:rgba(9,9,9,.62); display:block; font-size:10px; letter-spacing:.12em; margin-top:8px; }
.msf-discography__albums { padding:0 clamp(22px,4vw,64px) clamp(64px,8vw,120px); }
.msf-discography__grid { border-left:1px solid var(--msf-line); border-top:1px solid var(--msf-line); display:grid; grid-template-columns:repeat(4,1fr); }
.msf-album { border-bottom:1px solid var(--msf-line); border-right:1px solid var(--msf-line); min-width:0; padding:clamp(18px,2.25vw,32px); transition:background-color .24s ease; }
.msf-album:hover { background:rgba(9,9,9,.025); }
.msf-album__year, .msf-album__type { color:rgba(9,9,9,.62); font-size:10px; letter-spacing:.12em; }
.msf-album__year { margin-bottom:16px; }
.msf-album__cover { background:#eceae5; display:block; overflow:hidden; aspect-ratio:1; }
.msf-album__cover-fallback { align-items:flex-end; background:linear-gradient(135deg,#171717,#070707 65%,#410908); color:#fff; display:flex; font-family:var(--msf-sans); font-size:clamp(21px,2.2vw,35px); font-weight:700; height:100%; letter-spacing:-.07em; line-height:.9; padding:18px; }
.msf-album__cover img { display:block; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); width:100%; }
.msf-album:hover .msf-album__cover img { transform:scale(1.045); }
.msf-album__title { font-family:var(--msf-sans); font-size:17px; font-weight:700; letter-spacing:-.03em; line-height:1.18; margin:18px 0 7px; }
.msf-album__title a { color:inherit; text-decoration:none; }
.msf-album__type { margin:0 0 16px; }
.msf-album__platforms { display:flex; gap:10px; margin-top:3px; }
.msf-platform-icon { align-items:center; border:1px solid rgba(9,9,9,.28); border-radius:50%; color:var(--msf-ink); display:inline-flex; height:36px; justify-content:center; transition:background-color .2s ease,color .2s ease,transform .2s ease; width:36px; }
.msf-platform-icon svg { display:block; height:16px; width:16px; }
.msf-platform-icon:hover { background:var(--msf-ink); color:#fff; transform:translateY(-2px); }
.msf-discography__statement { background:#000; color:#fff; overflow:hidden; padding:clamp(64px,8vw,120px) clamp(22px,4vw,64px); }
.msf-discography__word { font-size:clamp(72px,17.9vw,320px); font-weight:600; letter-spacing:-.125em; line-height:.78; white-space:nowrap; }
.msf-discography__statement p { color:rgba(255,255,255,.6); font-size:clamp(12px,1.2vw,15px); line-height:1.75; margin:clamp(30px,4vw,56px) 0 0; max-width:550px; }
.msf-discography__listen { padding:clamp(72px,10vw,156px) clamp(22px,4vw,64px); }
.msf-discography__listen h2 { font-size:clamp(45px,7vw,106px); letter-spacing:-.09em; line-height:.88; margin:20px 0 30px; }
.msf-discography__listen p { color:rgba(9,9,9,.63); font-size:14px; line-height:1.8; max-width:560px; }
.msf-discography__artist-link { border-bottom:1px solid var(--msf-ink); color:var(--msf-ink); display:inline-flex; font-family:var(--msf-sans); font-size:clamp(18px,2vw,25px); gap:16px; margin-top:36px; padding-bottom:5px; text-decoration:none; transition:opacity .2s ease; }
.msf-discography__artist-link:hover { opacity:.58; }
[data-discography] [data-reveal] { opacity:0; transform:translateY(20px); }
[data-discography] [data-title-reveal] { transform:translateY(112%); }
[data-discography].is-ready [data-reveal], [data-discography].is-ready [data-title-reveal] { transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1); }
[data-discography].is-ready [data-reveal].is-visible, [data-discography].is-ready [data-title-reveal].is-visible { opacity:1; transform:translateY(0); }
@media (max-width:900px) { .msf-discography__grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .msf-discography__hero { gap:32px; grid-template-columns:1fr; padding-top:58px; } .msf-discography__stats { justify-content:flex-start; text-align:left; } .msf-discography__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .msf-album { padding:18px; } .msf-album__title { font-size:15px; } .msf-discography__word { letter-spacing:-.11em; } }
@media (max-width:430px) { .msf-discography__hero { padding-left:18px; padding-right:18px; } .msf-discography__albums, .msf-discography__statement, .msf-discography__listen { padding-left:18px; padding-right:18px; } .msf-discography__grid { grid-template-columns:1fr; } .msf-discography__title { font-size:13.5vw; } .msf-discography__stats b { font-size:34px; } }
@media (prefers-reduced-motion:reduce) { .msf-discography *, .msf-discography *::before, .msf-discography *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } [data-discography] [data-reveal], [data-discography] [data-title-reveal] { opacity:1; transform:none; } }