:root{--paper:#efece4;--paper2:#f7f4ed;--ink:#182323;--ink2:#34413e;--muted:#777b70;--hair:rgba(24,35,35,.16);--accent:#ff684b;--olive:#cbd8a8;--cream:#fff9e9;--serif:'Instrument Serif',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.6}::selection{background:#e0db9d;color:var(--ink)}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.shell{width:min(1320px,calc(100% - 92px));margin-inline:auto}.skip-link{position:fixed;z-index:999;left:20px;top:-80px;padding:12px 16px;background:white}.skip-link:focus{top:16px}.eyebrow{font-size:11px;letter-spacing:.155em;font-weight:700;text-transform:uppercase}.micro{font-size:11px;letter-spacing:.10em;text-transform:uppercase;font-weight:700}.thin-rule{height:1px;background:var(--hair);width:100%}.site-header{height:83px;border-bottom:1px solid var(--hair);background:rgba(239,236,228,.96);position:sticky;top:0;z-index:80;backdrop-filter:blur(16px)}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:-.055em;font-size:26px;white-space:nowrap}.brand-period{color:var(--accent)}.brand-record{height:25px;width:25px;background:var(--ink);border-radius:50%;position:relative;display:grid;place-items:center;transform:rotate(-18deg)}.brand-record:before{content:"";border:1px solid rgba(255,255,255,.33);height:15px;width:15px;border-radius:50%;position:absolute}.brand-record span{width:5px;height:5px;background:var(--paper);border-radius:50%}.top-nav{display:flex;align-items:center;gap:36px}.nav-link{font-size:12px;font-weight:700;text-decoration:none;transition:opacity .2s}.nav-link:hover{opacity:.55}.nav-surprise{border:1px solid var(--ink);background:transparent;border-radius:100px;padding:11px 15px;font-size:12px;font-weight:700;transition:background .2s,color .2s}.nav-surprise:hover{background:var(--ink);color:var(--paper)}.nav-surprise span{margin-left:7px}
/* intro */
.intro{background:var(--paper);overflow:hidden}.intro-grid{min-height:635px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:40px;padding-top:56px;padding-bottom:72px}.intro-copy{position:relative;z-index:2}.intro-kicker{display:flex;align-items:center;gap:12px;color:var(--ink2);margin-bottom:29px}.intro-kicker:before{content:"";width:26px;height:1px;background:var(--accent)}h1,h2,h3,p{margin-top:0}.display{font-family:var(--serif);font-weight:400;line-height:.91;letter-spacing:-.035em;font-size:clamp(84px,8.8vw,154px);margin-bottom:31px}.display em{color:#b74e35;font-weight:400}.intro-description{font-size:17px;line-height:1.8;color:#46514b;max-width:475px;margin:0 0 33px}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:27px;min-height:49px;padding:13px 20px;text-decoration:none;border-radius:2px;font-size:12px;letter-spacing:.025em;font-weight:700;border:1px solid var(--ink);transition:transform .2s,background .2s,color .2s}.primary-btn{background:var(--ink);color:var(--paper)}.primary-btn:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}.secondary-btn{background:transparent;color:var(--ink)}.secondary-btn:hover{background:var(--ink);color:var(--paper)}.intro-art{position:relative;height:485px;min-width:0}.intro-art .scatter-note{font-family:var(--serif);font-style:italic;position:absolute;right:3%;top:1%;color:var(--muted);font-size:20px;transform:rotate(6deg)}.hero-disc{width:380px;aspect-ratio:1;border-radius:50%;position:absolute;top:66px;right:18px;background:repeating-radial-gradient(circle at center,#1a2323 0 3px,#202b2b 4px 5px,#121b1b 6px 7px);box-shadow:12px 21px 33px #18232337}.hero-disc:before{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:var(--accent);top:35%;left:35%;border:7px solid #172121}.hero-disc:after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:var(--paper);left:calc(50% - 7.5px);top:calc(50% - 7.5px)}.hero-cover{position:absolute;width:270px;aspect-ratio:1;box-shadow:12px 20px 32px #18232336;border:6px solid rgba(255,255,255,.7);background:#e2d8c8;transform-origin:center}.hero-cover.hc-one{left:20px;top:62px;transform:rotate(-11deg)}.hero-cover.hc-two{right:36px;top:186px;transform:rotate(12deg)}.hero-cover.hc-three{left:78px;top:232px;width:196px;transform:rotate(-6deg)}.scribble{position:absolute;right:6%;bottom:-22px;font-family:var(--serif);font-style:italic;font-size:24px;transform:rotate(-9deg)}.intro-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);padding-block:19px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.intro-bottom .dots{letter-spacing:.6em;color:var(--accent)}
/* section */
.section{padding:82px 0}.section-label{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);padding-top:18px;margin-bottom:30px}.section-label .index{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.13em}.section-label .eyebrow{margin:0}.section-heading{font:400 clamp(49px,5.5vw,81px)/.96 var(--serif);letter-spacing:-.02em;margin-bottom:18px}.section-intro{font-size:15px;color:#53605a;line-height:1.75;max-width:620px}.showcase{padding-top:66px;background:var(--paper2);border-top:1px solid var(--hair)}.showcase-header{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:43px}.showcase-header p{margin:0}.feature-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}.feature-card{display:block;text-decoration:none;min-width:0;position:relative}.feature-card .feature-art{aspect-ratio:1;box-shadow:0 12px 28px #18232313;overflow:hidden;transition:transform .26s}.feature-card:hover .feature-art{transform:translateY(-6px)}.feature-card .feature-category{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin:20px 0 7px;color:#b05036}.feature-card h3{font:400 30px/1.12 var(--serif);margin:0 0 6px}.feature-card .byline{font-size:12px;color:var(--muted);margin:0}.feature-arrow{position:absolute;right:0;bottom:1px;border:1px solid var(--hair);width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:17px;transition:background .2s}.feature-card:hover .feature-arrow{background:var(--accent)}
/* art */
.cover-art{position:relative;aspect-ratio:1;overflow:hidden;background:#9da799;isolation:isolate}.cover-fallback{position:absolute;inset:0;background:linear-gradient(145deg,var(--art1,#6c786d),var(--art2,#243433));padding:12%;display:flex;flex-direction:column;justify-content:space-between;color:#f9efde;overflow:hidden}.cover-fallback:after{content:"";width:68%;height:68%;border:1px solid rgba(255,255,255,.27);border-radius:50%;position:absolute;right:-18%;bottom:-23%;box-shadow:0 0 0 25px rgba(255,255,255,.04),0 0 0 55px rgba(255,255,255,.025)}.cover-fallback .fallback-top{position:relative;z-index:2;font-size:clamp(9px,.9vw,13px);font-weight:700;letter-spacing:.10em;text-transform:uppercase;overflow-wrap:anywhere}.cover-fallback .fallback-name{position:relative;z-index:2;font:400 clamp(20px,2.8vw,41px)/.94 var(--serif);letter-spacing:-.015em;overflow-wrap:anywhere}.cover-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;transition:opacity .35s}.cover-art.loaded>img{opacity:1}
/* collection */
.collection{padding-top:97px;padding-bottom:103px}.collection-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:32px}.collection-head .section-heading{margin-bottom:0}.collection-count{font:italic 25px var(--serif);color:var(--muted);padding-bottom:4px}.collection-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:15px;justify-content:space-between;padding:22px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:26px}.search-field{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ink);width:min(300px,100%);height:44px}.search-field .magnify{font-size:21px;color:var(--muted)}.search-field input{border:none;background:transparent;width:100%;min-width:0;outline:0;font-size:13px;color:var(--ink)}.search-field input::placeholder{color:#868a80}.tool-right{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.chip-row{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid transparent;border-radius:3px;padding:10px 12px;background:transparent;color:#68726c;font-size:11px;font-weight:700}.chip:hover{color:var(--ink)}.chip.active{background:var(--ink);color:var(--paper)}.sort-select{background:transparent;border:1px solid var(--hair);font-size:11px;padding:10px 12px;min-height:38px;color:var(--ink);max-width:160px}.results-line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.03em;margin-bottom:22px}.reset-link{border:0;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-size:12px}.album-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:21px;row-gap:39px}.album-card{min-width:0;text-decoration:none;display:block}.album-card .art-wrap{position:relative;overflow:hidden}.album-card .cover-art{transition:transform .35s}.album-card:hover .cover-art{transform:scale(1.035)}.album-card .card-score{position:absolute;z-index:5;top:10px;right:10px;padding:6px 9px;background:rgba(248,246,238,.94);font-size:11px;font-weight:800;box-shadow:0 2px 10px #00000013}.album-card .card-score small{font-size:8px;color:#6b726b}.album-card h3{font-size:14px;font-weight:700;line-height:1.4;letter-spacing:-.025em;margin:13px 0 4px}.album-card p{font-size:12px;color:#69736b;margin:0}.album-card .card-underline{display:block;height:1px;background:var(--hair);margin-top:15px;transform:scaleX(0);transform-origin:left;transition:transform .3s}.album-card:hover .card-underline{transform:scaleX(1)}.load-box{display:flex;justify-content:center;margin-top:53px}.more-btn{background:none;border:1px solid var(--ink);min-width:195px;padding:16px 20px;font-size:12px;font-weight:700}.more-btn:hover{background:var(--ink);color:var(--paper)}.nothing{grid-column:1/-1;background:var(--paper2);padding:54px 24px;text-align:center;font:28px var(--serif)}
/* about */
.about{background:var(--ink);color:var(--paper);padding:86px 0 93px}.about .section-label{border-color:#ffffff35}.about .section-label .index{color:#a5afa6}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.about .section-heading{font-size:clamp(54px,7vw,106px);margin-bottom:0}.about .section-heading em{color:#df9d83;font-weight:400}.about-copy{max-width:480px;align-self:end}.about-copy p{font-size:15px;color:#c1c8c0;line-height:1.9}.about-copy small{color:#93a299;display:block;font-size:11px;line-height:1.7;padding-top:20px;border-top:1px solid #ffffff35}.mini-stats{display:flex;gap:40px;flex-wrap:wrap;padding-top:45px;margin-top:50px;border-top:1px solid #ffffff35}.mini-stat strong{display:block;font:54px var(--serif);line-height:1}.mini-stat span{font-size:10px;color:#b0bbb1;letter-spacing:.12em;font-weight:700}.site-footer{background:var(--ink);color:var(--paper);border-top:1px solid #ffffff35;padding:30px 0 40px}.footer-inner{display:flex;justify-content:space-between;align-items:end;gap:22px}.footer-brand{text-decoration:none;font-size:25px;font-weight:700;letter-spacing:-.06em}.footer-brand span{color:var(--accent)}.footer-inner p{font-size:12px;color:#97a79c;margin:8px 0 0}.footer-mark{color:#9baba0;font-size:10px;letter-spacing:.13em}.footer-mark span{color:var(--accent);font-size:14px}
/* detail page */
.detail-top{padding-top:48px;padding-bottom:54px}.back-link{border:0;background:none;text-decoration:none;color:#647067;font-size:12px;font-weight:700;display:inline-flex;gap:11px;align-items:center;margin-bottom:40px}.back-link:hover{color:var(--ink)}.detail-hero{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);gap:clamp(52px,7vw,113px);align-items:center}.detail-art-space{padding:10px 36px 38px 10px;position:relative}.detail-vinyl{position:absolute;border-radius:50%;width:74%;aspect-ratio:1;right:0;top:8%;background:repeating-radial-gradient(circle at center,#111a1a 0 3px,#34403b 4px 5px,#0d1313 6px 8px);box-shadow:14px 21px 32px #18232333}.detail-vinyl:before{content:"";position:absolute;width:31%;height:31%;background:var(--accent);border-radius:50%;left:34.5%;top:34.5%;border:6px solid #161b1b}.detail-vinyl:after{content:"";position:absolute;left:calc(50% - 5px);top:calc(50% - 5px);width:10px;height:10px;background:var(--paper);border-radius:50%}.detail-main-art{width:82%;position:relative;box-shadow:17px 22px 34px #18232347}.detail-info .detail-no{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);letter-spacing:.14em;font-weight:700;margin-bottom:25px}.detail-no:before{content:"";width:28px;height:1px;background:var(--accent)}.detail-info h1{font:400 clamp(60px,6.6vw,106px)/.92 var(--serif);letter-spacing:-.02em;margin:0 0 12px;overflow-wrap:anywhere}.detail-artist{font:italic clamp(29px,3.1vw,48px) var(--serif);color:#8e5a4a;margin-bottom:32px}.detail-summary{color:#57645b;font-size:15px;line-height:1.8;margin-bottom:29px;max-width:475px}.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:31px}.pill{border:1px solid var(--hair);border-radius:30px;padding:8px 12px;font-size:10px;font-weight:700;letter-spacing:.045em}.detail-actions{display:flex;gap:11px;flex-wrap:wrap}.detail-actions button{font-weight:700}.data-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:65px}.data-cell{padding:25px 18px 25px 0;border-right:1px solid var(--hair);margin-right:22px;min-width:0}.data-cell:last-child{border:none;margin-right:0}.data-cell .label{display:block;font-size:10px;color:#7d837b;letter-spacing:.12em;font-weight:700;text-transform:uppercase;margin-bottom:8px}.data-cell .value{display:block;font:29px/1.15 var(--serif);overflow-wrap:anywhere}.data-cell .value small{font:14px var(--sans);color:var(--muted)}.detail-body{background:var(--paper2);border-top:1px solid var(--hair);padding:83px 0 100px}.detail-body-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.78fr);gap:clamp(35px,7vw,130px)}.panel-heading{display:flex;gap:15px;align-items:baseline;border-bottom:1px solid var(--hair);padding-bottom:15px;margin-bottom:22px}.panel-heading span{font-size:10px;color:#bd644d;font-weight:700;letter-spacing:.1em}.panel-heading h2{font:36px var(--serif);margin:0}.panel{margin-bottom:58px}.panel-note{font-size:12px;color:#757f75;line-height:1.75}.track-item{display:grid;grid-template-columns:31px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--hair);font-size:13px;font-weight:600}.track-item .track-no{font-size:11px;font-weight:700;color:#8d968a}.track-action{border:1px solid var(--hair);background:transparent;padding:12px 14px;font-size:12px;font-weight:700;margin-top:18px}.track-action:hover{background:var(--ink);color:var(--paper)}.placeholder-card{border:1px dashed #c2c3ba;background:#f4f0e8;padding:24px;position:relative}.placeholder-card .label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9a7166;font-weight:700;margin-bottom:13px}.placeholder-card h3{font:italic 28px var(--serif);margin:0 0 8px}.placeholder-card p{color:#768076;font-size:12px;line-height:1.75;margin:0}.fact-row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--hair);font-size:12px}.fact-row>strong{font-weight:600}.fact-row>span{color:#7e887e;text-align:right;max-width:58%}.score-block{display:flex;gap:18px;align-items:center;margin-bottom:22px}.score-big{font:76px/.95 var(--serif)}.score-big small{font:15px var(--sans);color:var(--muted)}.score-explainer{font-size:12px;line-height:1.7;color:#68736c}.external-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;text-decoration-thickness:1px;text-underline-offset:5px;font-weight:700;margin-top:10px}.spotify-frame{width:100%;height:152px;border:0;border-radius:10px;background:#1e2323}.listen-help{font-size:11px;color:#778278;line-height:1.6;margin-top:12px}.return-bottom{border-top:1px solid var(--hair);padding-top:30px;display:flex;justify-content:space-between;gap:15px}.toast{position:fixed;right:22px;bottom:22px;z-index:300;background:var(--ink);color:white;padding:14px 18px;border-radius:4px;font-size:12px;box-shadow:0 12px 25px #0002;opacity:0;pointer-events:none;transform:translateY(8px);transition:all .24s}.toast.visible{opacity:1;transform:translateY(0)}.boot{min-height:80vh;display:grid;place-content:center;text-align:center;color:var(--muted);gap:15px}.boot-record{height:55px;width:55px;border-radius:50%;border:17px solid var(--ink);margin:auto;animation:spin 2.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.boot p{font-size:12px}
@media (max-width:1200px){.album-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.intro-grid{min-height:570px}.hero-cover{width:230px}.hero-cover.hc-three{width:160px}.hero-disc{width:330px}.intro-art{height:440px}.intro .display{font-size:clamp(78px,9vw,120px)}}
@media (max-width:900px){.shell{width:min(100% - 44px,700px)}.top-nav{gap:15px}.intro-grid{grid-template-columns:1fr;padding-top:52px;padding-bottom:30px;gap:10px}.intro .display{font-size:clamp(77px,14vw,113px)}.intro-art{width:min(100%,560px);height:405px;margin:auto}.hero-disc{right:7%;top:24px}.hero-cover.hc-one{left:9%;top:26px}.hero-cover.hc-two{right:16%;top:146px}.hero-cover.hc-three{left:26%;top:190px}.intro-bottom{margin-top:8px}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.feature-card h3{font-size:24px}.album-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-toolbar{align-items:start}.tool-right{width:100%}.about-grid{gap:35px}.detail-hero{grid-template-columns:1fr 1fr;gap:30px}.detail-info h1{font-size:clamp(49px,6vw,79px)}.detail-art-space{padding:10px 24px 35px 6px}.detail-body-grid{gap:40px}.data-cell{margin-right:8px}.data-cell .value{font-size:24px}}
@media (max-width:620px){.site-header{height:68px}.shell{width:calc(100% - 36px)}.brand{font-size:22px}.brand-record{width:20px;height:20px}.nav-link{display:none}.nav-surprise{padding:9px 12px}.intro-grid{padding-top:43px}.intro .display{font-size:clamp(72px,17vw,101px)}.intro-description{font-size:14px;max-width:350px}.intro-art{height:328px}.hero-disc{width:265px;right:4%;top:24px}.hero-cover{width:196px;border-width:4px}.hero-cover.hc-one{left:4%;top:26px}.hero-cover.hc-two{right:5%;top:122px}.hero-cover.hc-three{width:134px;left:28%;top:171px}.intro-art .scatter-note{font-size:15px}.scribble{font-size:18px;bottom:0}.intro-bottom{font-size:9px}.section{padding:67px 0}.showcase{padding-top:51px}.section-heading{font-size:60px}.showcase-header{display:block}.showcase-header .section-intro{font-size:13px;margin-top:12px}.feature-grid{grid-template-columns:1fr 1fr;row-gap:27px}.feature-grid>.feature-card:last-child{display:none}.feature-card h3{font-size:24px}.feature-card .feature-category{font-size:9px;margin-top:13px}.feature-arrow{display:none}.collection-head{align-items:baseline}.collection-count{font-size:18px}.collection-toolbar{gap:12px}.search-field{width:100%}.tool-right{gap:7px}.chip{padding:9px 10px;font-size:10px}.sort-select{width:100%;max-width:none}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:24px}.album-card h3{font-size:12px}.album-card p{font-size:11px}.album-card .card-score{padding:5px 7px;font-size:10px;top:6px;right:6px}.about-grid{grid-template-columns:1fr}.about .section-heading{font-size:75px}.mini-stats{gap:24px}.mini-stat strong{font-size:42px}.footer-inner{display:block}.footer-mark{display:block;margin-top:25px}.detail-top{padding-top:26px}.back-link{margin-bottom:26px}.detail-hero{display:flex;flex-direction:column;gap:26px;align-items:stretch}.detail-art-space{width:min(100%,450px);margin-inline:auto;padding-right:35px}.detail-info h1{font-size:65px}.detail-artist{font-size:30px;margin-bottom:22px}.detail-summary{font-size:13px}.data-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:42px}.data-cell{border-bottom:1px solid var(--hair);padding:17px 5px 17px 0}.data-cell:nth-child(2){border-right:none}.data-cell:nth-child(3),.data-cell:nth-child(4){border-bottom:none}.data-cell .value{font-size:24px}.detail-body{padding:58px 0}.detail-body-grid{display:block}.panel{margin-bottom:41px}.panel-heading h2{font-size:32px}.return-bottom{flex-direction:column}.section-label{margin-bottom:24px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* V002: new title, two-record monthly listening gallery, simplified catalogue tools. */
.intro .display{font-size:clamp(72px,7.6vw,117px);line-height:.89;letter-spacing:-.035em;margin-bottom:40px}
.intro .display em{font-size:.70em;color:#b74e35;white-space:nowrap}
.intro .display .title-period{color:var(--ink);font-size:.70em}
.listening-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:19px;min-height:42px}
.month-year{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.10em}
.month-buttons{display:flex;gap:7px}
.month-arrow{width:45px;height:39px;display:grid;place-items:center;background:transparent;border:1px solid var(--hair);color:var(--ink);border-radius:2px;font-size:22px;line-height:1;transition:background .2s,color .2s}
.month-arrow:hover:not(:disabled){color:var(--paper);background:var(--ink)}
.month-arrow:disabled{opacity:.25;cursor:default}
.monthly-viewport{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.monthly-viewport::-webkit-scrollbar{display:none}
.monthly-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.monthly-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,38px);max-width:990px;padding:2px 1px 6px}
.monthly-grid .feature-card .feature-art{width:100%;aspect-ratio:1}
.monthly-grid .feature-card .feature-category{margin-top:16px}
.collection .section-label{margin-bottom:30px}
.collection-toolbar{border-top:0;padding-top:3px;align-items:flex-start}
.tool-right{justify-content:flex-end;flex:1;gap:12px}
.sort-controls{display:flex;align-items:center;gap:7px;white-space:nowrap}
.sort-label{font-size:11px;font-weight:700;color:var(--muted)}
.sort-select{max-width:165px;min-height:40px;border-radius:2px}
.reverse-sort{border:1px solid var(--hair);background:transparent;color:var(--ink);border-radius:2px;min-width:40px;height:40px;font-size:19px;line-height:1;transition:background .2s,color .2s}
.reverse-sort:hover{background:var(--ink);color:var(--paper)}
.chip{white-space:nowrap}
@media(max-width:1200px){.intro .display{font-size:clamp(70px,8.7vw,105px)}.tool-right{justify-content:flex-start}.collection-toolbar .search-field{width:min(280px,100%)}}
@media(max-width:900px){.intro .display{font-size:clamp(76px,12vw,110px)}.intro .display em{font-size:.72em}.monthly-grid{max-width:100%}.tool-right{width:100%;justify-content:space-between}.collection-toolbar .search-field{width:100%}}
@media(max-width:620px){.intro .display{font-size:clamp(62px,14vw,87px);margin-bottom:28px}.intro .display em{font-size:.69em}.intro .display .title-period{font-size:.69em}.intro-grid{padding-top:54px}.intro-art{margin-top:12px}.monthly-grid{gap:16px}.month-arrow{width:42px;height:38px}.feature-card h3{font-size:24px}.feature-card .byline{font-size:11px}.feature-card .feature-category{font-size:9px;letter-spacing:.07em}.collection-toolbar{padding-top:0}.chip-row{gap:4px}.chip{padding:9px 10px;font-size:10px}.sort-controls{width:100%;display:flex;gap:8px}.sort-select{max-width:none;flex:1}.sort-label{min-width:35px}.reverse-sort{flex:0 0 40px}.section-label .index{font-size:10px;letter-spacing:.055em}.section-label .eyebrow{font-size:10px;letter-spacing:.10em}}
@media(max-width:375px){.intro .display{font-size:59px}.intro .display em{font-size:.66em}.intro .display .title-period{font-size:.66em}.section-label .index{font-size:9px}}

/* V003 — minimal hero, four records per month, and a quieter footer. */
.nav-surprise{background:var(--ink);color:var(--paper);border-color:var(--ink);text-transform:lowercase;letter-spacing:.04em;padding-inline:19px}
.nav-surprise:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.intro-grid{display:block;min-height:0;padding-block:88px 105px}
.intro-copy{max-width:none}
.intro-kicker{margin-bottom:33px}
.intro .display{font-size:clamp(46px,5.5vw,84px);line-height:1.02;letter-spacing:-.036em;margin:0 0 40px;white-space:nowrap}
.intro .display em{font-style:italic;font-size:1em;color:#b74e35;white-space:nowrap}
.intro .display .headline-first,.intro .display .headline-second{display:inline}
.showcase{padding-top:66px}
.listening-controls{justify-content:flex-end;margin-bottom:15px;min-height:37px}
.monthly-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,34px);max-width:none;padding:2px 1px 7px}
.monthly-grid .feature-card .feature-category{margin-top:14px}
.monthly-grid .feature-card h3{font-size:clamp(21px,2.3vw,29px)}
.site-footer{border-top:none;padding-block:58px 65px}
.footer-inner{align-items:center}
.footer-brand{font-size:30px}
.footer-inner p{font-size:13px;margin-top:10px}
@media(max-width:1200px){
  .intro .display{font-size:clamp(41px,5.1vw,70px)}
}
@media(max-width:900px){
  .intro-grid{padding-block:66px 76px}
  .intro .display{font-size:clamp(39px,5.3vw,55px);white-space:normal}
  .monthly-grid{gap:19px}
}
@media(max-width:620px){
  .intro-grid{padding-block:57px 69px}
  .intro-kicker{margin-bottom:25px}
  .intro .display{font-size:clamp(34px,10vw,57px);line-height:1.11;margin-bottom:32px;letter-spacing:-.04em}
  .intro .display .headline-first,.intro .display .headline-second{display:block;white-space:nowrap}
  .showcase{padding-top:47px}
  .monthly-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:29px 15px}
  .monthly-grid .feature-card h3{font-size:22px}
  .monthly-grid .feature-card .feature-category{margin-top:11px}
  .listening-controls{margin-bottom:12px}
  .site-footer{padding-block:42px 48px}
  .footer-inner{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .footer-mark{margin-top:3px}
}
@media(max-width:375px){
  .intro .display{font-size:clamp(32px,9.8vw,38px)}
}

/* V004 — streamlined album page. The homepage and full catalogue remain V003. */
.detail-top{padding-top:37px;padding-bottom:64px}
.detail-top .back-link{margin-bottom:36px;text-transform:none}
.detail-hero{grid-template-columns:minmax(320px,.93fr) minmax(0,1.07fr);gap:clamp(48px,7vw,105px)}
.detail-art-space{padding:10px 37px 36px 8px}
.detail-vinyl{
  --vinyl-base:#1b2422;--vinyl-highlight:#35403c;--vinyl-shadow:#0b1110;
  background:repeating-radial-gradient(circle at center,var(--vinyl-base) 0px,var(--vinyl-base) 2px,var(--vinyl-highlight) 3px,var(--vinyl-shadow) 6px,var(--vinyl-base) 8px),
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.32),transparent 55%);
  box-shadow:16px 22px 34px #18232333, inset -15px -20px 34px rgba(0,0,0,.18), inset 10px 11px 30px rgba(255,255,255,.06);
}
.detail-vinyl:before{background:#e1c28d;border-color:var(--vinyl-shadow)}
.detail-info .detail-no{letter-spacing:.09em;text-transform:uppercase;margin-bottom:25px}
.detail-info h1{font-size:clamp(62px,6.9vw,108px);line-height:.91}
.detail-artist{margin-bottom:25px}
.detail-tags{margin-bottom:30px}
.genre-pill{color:var(--ink);text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.genre-pill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.genre-to-add{color:var(--muted);font-size:12px;font-style:italic}
.detail-actions .secondary-btn{font-size:12px;min-width:177px}
.data-strip{grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,.6fr));margin-top:67px;gap:0}
.data-cell{padding:25px 23px 26px 0;margin:0 23px 0 0;min-width:0}
.data-cell:last-child{padding-right:0;margin-right:0}
.data-cell .value{font-size:clamp(19px,2.0vw,29px);line-height:1.3}
.data-cell .label{font-size:10px}
.edition-cell .value{font-size:clamp(19px,2.0vw,27px)}
.edition-demo{display:block;font-size:10px;color:var(--muted);line-height:1.5;margin-top:9px;max-width:280px}
.detail-body{padding:77px 0 105px}
.detail-content{max-width:1320px}
.detail-content .panel{margin:0 0 85px}
.detail-content .panel-heading{border-bottom:1px solid var(--hair);margin-bottom:25px;padding-bottom:16px}
.detail-content .panel-heading h2{font:400 clamp(41px,4.5vw,64px)/1.04 var(--serif);letter-spacing:-.02em}
.sample-notice{border:1px solid rgba(180,84,58,.25);background:rgba(190,101,75,.065);border-radius:2px;color:#654f44;font-size:12px;line-height:1.7;padding:13px 17px;display:flex;gap:12px;align-items:baseline;margin-bottom:28px;max-width:790px}
.sample-notice strong{font-weight:700}
.notice-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;display:inline-block;flex:none}
.side-layout{display:grid;gap:33px}
.vinyl-disc-group{min-width:0}
.disc-title{font:italic 31px/1.15 var(--serif);margin:0 0 19px;color:#ad4e36}
.side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(26px,6vw,100px);row-gap:23px}
.side-block{min-width:0}
.side-block h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);padding-bottom:13px;border-bottom:1px solid var(--ink);margin:0 0 0}
.side-tracks{list-style:none;padding:0;margin:0}
.side-tracks li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hair);font-size:14px;line-height:1.45}
.side-track-number{font-size:10px;color:#9b968d;font-weight:700;letter-spacing:.03em}
.side-track-title{overflow-wrap:anywhere}
.selected-review{padding:30px 35px 31px;background:#e9e4d7;border-left:3px solid #bd6147;margin:0 0 26px}
.review-demo-label{font-size:9px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#a3543b;margin-bottom:25px}
.review-topline{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:17px}
.review-kicker{font-size:10px;letter-spacing:.15em;color:var(--muted);font-weight:700}
.review-rating{font:italic clamp(36px,4.3vw,55px)/.9 var(--serif);color:#a84931;white-space:nowrap}
.review-headline{font:400 clamp(30px,3.1vw,45px)/1.07 var(--serif);letter-spacing:-.015em;margin:0 0 25px;max-width:880px}
.review-quote{font:italic clamp(23px,2.4vw,33px)/1.28 var(--serif);color:#35423e;margin:0 0 29px;max-width:940px}
.review-attribution{display:flex;align-items:center;gap:20px;font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.12em;color:#934d37}
.review-attribution a{color:#934d37;text-underline-offset:4px}
.review-attribution a:hover{color:var(--ink)}
.review-rule{flex:1;height:1px;background:rgba(131,94,78,.3)}
.aoty-score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:28px 0 0}
.aoty-score{padding:28px 20px 22px 0}
.aoty-score+.aoty-score{border-left:1px solid var(--hair);padding-left:28px}
.aoty-label{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.aoty-score-number{font:400 clamp(57px,6.5vw,88px)/.95 var(--serif);letter-spacing:-.02em}
.aoty-score-number small{font:13px var(--sans);color:var(--muted);letter-spacing:0;margin-left:5px}
.aoty-count{margin:13px 0 0;font-size:12px;color:#697369}
.aoty-source{margin:13px 0 0;font-size:11px;line-height:1.65;color:var(--muted)}
.aoty-source a{color:var(--ink);text-underline-offset:3px}
.press-play-frame{border:0;border-radius:10px;width:min(100%,850px);display:block;background:#1b2422;height:352px}
.press-play-frame.spotify-track{height:152px}
.press-play-frame.video{aspect-ratio:16/9;height:auto;border-radius:3px}
.press-play-frame.soundcloud{height:166px}
.press-play-frame.bandcamp{height:420px}
.empty-player{border:1px solid var(--hair);padding:50px 22px;font:italic 24px var(--serif);color:var(--muted)}
.detail-content .return-bottom{justify-content:flex-start;margin-top:20px}
.genre-landing{padding:54px 0 120px;min-height:75vh}
.genre-landing .back-link{margin-bottom:64px}
.genre-head{padding-bottom:45px}
.genre-head .eyebrow{color:#b05036}
.genre-title{font:400 clamp(75px,10vw,152px)/.9 var(--serif);letter-spacing:-.035em;margin:13px 0 22px;overflow-wrap:anywhere}
.genre-description{font-size:14px;color:#59645e}
.genre-landing .section-label{margin-bottom:30px}
.site-footer .footer-mark{max-width:570px;text-align:right;line-height:1.7;font-size:9px;letter-spacing:.075em}
@media(max-width:900px){
  .detail-hero{grid-template-columns:1fr 1fr;gap:30px}
  .detail-info h1{font-size:clamp(52px,6.7vw,77px)}
  .data-strip{grid-template-columns:minmax(0,1.65fr) repeat(3,minmax(0,.55fr))}
  .data-cell{margin-right:10px;padding-right:9px}
  .data-cell .value{font-size:22px}
  .detail-content .panel{margin-bottom:66px}
}
@media(max-width:620px){
  .detail-top{padding-top:26px;padding-bottom:41px}
  .detail-hero{display:flex;flex-direction:column;gap:28px}
  .detail-art-space{padding-right:35px;padding-bottom:27px}
  .detail-info h1{font-size:clamp(60px,13.5vw,83px)}
  .detail-artist{font-size:31px;margin-bottom:23px}
  .detail-info .detail-no{font-size:10px;margin-bottom:21px}
  .detail-tags{margin-bottom:26px}
  .data-strip{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px}
  .data-cell{border-bottom:none;padding:19px 8px 18px 0;margin-right:8px;border-right:1px solid var(--hair)}
  .data-cell.edition-cell{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--hair);padding:19px 0 18px;margin:0}
  .data-cell:nth-child(2){border-right:1px solid var(--hair)}
  .data-cell:last-child{border:0;margin:0;padding-left:8px}
  .data-cell .label{font-size:9px;letter-spacing:.09em}
  .data-cell .value{font-size:23px}
  .edition-cell .value{font-size:26px}
  .detail-body{padding:55px 0 70px}
  .detail-content .panel{margin-bottom:59px}
  .detail-content .panel-heading h2{font-size:46px}
  .side-grid{grid-template-columns:1fr;row-gap:25px}
  .side-tracks li{font-size:13px;padding:11px 0}
  .selected-review{padding:25px 20px}
  .review-headline{font-size:33px}
  .review-quote{font-size:26px}
  .review-rating{font-size:38px}
  .aoty-score{padding:23px 9px 21px 0}
  .aoty-score+.aoty-score{padding-left:15px}
  .aoty-label{font-size:9px;line-height:1.5}
  .aoty-score-number{font-size:59px}
  .aoty-count{font-size:10px;line-height:1.5}
  .genre-landing{padding:32px 0 77px}
  .genre-landing .back-link{margin-bottom:45px}
  .genre-title{font-size:clamp(65px,15vw,94px)}
  .site-footer .footer-mark{text-align:left;max-width:100%;line-height:1.6}
}

.detail-info .detail-no{text-transform:none;letter-spacing:.075em}

/* V005: all illustrated discs are standard black; optional ownership photos replace both layers. */
.detail-vinyl { --vinyl-base:#1b2422;--vinyl-highlight:#35403c;--vinyl-shadow:#0b1110; }
.detail-art-space.hero-photo-active { padding:10px 8px 32px; display:flex;justify-content:center;align-items:center; }
/* Custom hero artwork may be transparent: keep its natural silhouette without a rectangular shadow. */
.detail-photo-override { display:block;width:100%;height:auto;max-height:570px;object-fit:contain;box-shadow:none; }
@media(max-width:620px){
  .detail-art-space.hero-photo-active {padding:0 6px 22px;}
  .detail-photo-override{max-height:490px;}
}

/* V006 — a unified, multi-select genre explorer. Tags are all peers; the
   first tag on album pages represents the temporary display-first genre. */
.genre-explore-cta{display:inline-flex;align-items:center;gap:11px;color:#a24b37;text-decoration:none;font-size:12px;font-weight:700;margin:-7px 0 28px;text-underline-offset:5px}
.genre-explore-cta:hover{text-decoration:underline}
.genre-explore-cta span{font-size:18px;transition:transform .2s}
.genre-explore-cta:hover span{transform:translateX(3px)}
.genre-explorer{background:var(--paper);padding:46px 0 105px;min-height:80vh}
.genre-explore-head{padding:14px 0 55px;border-bottom:1px solid var(--hair)}
.genre-explore-head .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b14b36;font-weight:700}
.genre-explore-head h1{font:400 clamp(69px,9.5vw,135px)/.91 var(--serif);letter-spacing:-.035em;margin:19px 0 26px}
.genre-explore-head h1 em{font-weight:400;color:#b74e35}
.genre-explore-head p{max-width:610px;font-size:15px;line-height:1.8;color:#57665b;margin:0}
.genre-control-panel{padding:37px 0 30px;border-bottom:1px solid var(--hair)}
.genre-control-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:21px}
.genre-control-heading h2{font:400 34px var(--serif);margin:0}
.genre-control-heading span{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--muted)}
.genre-filter-list{display:flex;gap:9px;flex-wrap:wrap}
.genre-filter{appearance:none;display:inline-flex;gap:10px;align-items:center;background:transparent;border:1px solid #bfbbb0;color:var(--ink);padding:11px 14px;border-radius:2px;transition:background .16s,border-color .16s,color .16s;font-weight:600;font-size:12px}
.genre-filter small{font-size:10px;letter-spacing:0;color:#7e8b7c}
.genre-filter:hover{border-color:var(--ink);background:#f8f4ec}
.genre-filter.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.genre-filter.active small{color:#b8c6bc}
/* Live intersections: empty combinations are visible but can still be selected. */
.genre-filter.no-overlap:not(.active){color:#8d9188;border-color:#d9d8d0;background:#eeeae2}
.genre-filter.no-overlap:not(.active) small{color:#a4513d;font-weight:700}
.genre-filter.no-overlap:not(.active):hover{border-color:#b7b2a8;background:#e9e3d8}
.genre-filter:focus-visible,.genre-explore-cta:focus-visible{outline:2px solid #c4553b;outline-offset:3px}
.genre-filter-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:22px;color:#788176;font-size:11px;line-height:1.6}
.genre-filter-foot strong{font-weight:600;color:#536154}
.genre-filter-foot button{color:#a74d35;background:transparent;border:0;padding:5px 0;font-weight:700;font-size:11px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.genre-results-section{padding-top:48px}
.genre-results-section .section-label{margin-bottom:21px}
.genre-search-sort{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:13px}
.genre-search-sort .search-field{width:min(390px,100%)}
.genre-preview-warning{font-size:11px;line-height:1.7;color:#807c72;margin:0 0 32px}
.genre-results-section .nothing{grid-column:1/-1;text-align:center;padding:70px 15px;border:1px dashed #b9bdb4;font:italic 25px var(--serif)}
@media(max-width:900px){
  .genre-explorer{padding-top:33px}
  .genre-explore-head h1{font-size:clamp(62px,10vw,91px)}
}
@media(max-width:620px){
  .genre-explorer{padding:23px 0 75px}
  .genre-explorer .back-link{margin-bottom:30px}
  .genre-explore-head{padding-bottom:35px}
  .genre-explore-head h1{font-size:clamp(58px,13.5vw,83px);margin:15px 0 20px}
  .genre-explore-head p{font-size:13px}
  .genre-control-panel{padding:27px 0 23px}
  .genre-control-heading h2{font-size:29px}
  .genre-filter-list{gap:7px}
  .genre-filter{font-size:11px;padding:10px 12px;gap:7px}
  .genre-filter-foot{align-items:flex-start;gap:15px}
  .genre-results-section{padding-top:35px}
  .genre-search-sort{flex-direction:column;align-items:stretch;gap:13px}
  .genre-search-sort .search-field{width:100%}
  .genre-search-sort .sort-controls{width:100%}
  .genre-preview-warning{margin-bottom:24px}
  .genre-explore-cta{margin:-8px 0 20px}
}

/* V008 — editorial genre families and AND / OR exploration */
.genre-control-explain {margin:24px 0 13px;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#7a8076}
.genre-umbrella-list{display:flex;flex-wrap:wrap;gap:11px;margin:0 0 31px}
.genre-umbrella{background:#e8e5dc;border-color:#9ea89f;padding:13px 19px;font-size:14px;letter-spacing:.005em}
.genre-umbrella span{font-family:var(--sans);font-weight:700}
.genre-umbrella small{font-size:11px}
.genre-umbrella.active{background:#a84b36;border-color:#a84b36;color:#fff9ef}
.genre-umbrella.active small{color:#f5dad1}
.genre-family-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:25px}
.genre-family{padding:17px 0 19px;border-top:1px solid var(--hair)}
.genre-family-name{font:italic 25px/1.1 var(--serif);color:var(--ink);margin:0 0 15px}
.genre-family .genre-filter-list{gap:8px}
.genre-family .genre-filter{font-size:11px;padding:10px 11px}
.genre-logic-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0 8px;border-top:1px solid var(--hair)}
.genre-logic-title{display:block;font-size:15px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.genre-logic-caption{display:block;font-size:11px;color:#758176;line-height:1.7;max-width:580px}
.genre-mode-toggle{display:flex;flex-shrink:0;gap:0;background:#e2ddd3;padding:4px;border-radius:3px}
.genre-mode-toggle button{background:transparent;border:0;border-radius:2px;min-width:72px;padding:10px 13px;font-size:12px;font-weight:700;letter-spacing:.07em;color:#65736a;cursor:pointer}
.genre-mode-toggle button.active{background:#253c34;color:#fffaf0;box-shadow:0 2px 5px #0c17151a}
.genre-mode-toggle button:focus-visible{outline:2px solid #b54c36;outline-offset:3px}
@media(max-width:900px){.genre-family-layout{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
 .genre-umbrella-list{gap:8px;margin-bottom:22px}
 .genre-umbrella{font-size:12px;padding:12px 15px}
 .genre-family-layout{grid-template-columns:1fr;gap:2px;margin-bottom:0}
 .genre-family{padding:18px 0}
 .genre-family-name{font-size:23px}
 .genre-logic-row{align-items:flex-start;flex-direction:column;gap:16px}
 .genre-mode-toggle{width:100%}
 .genre-mode-toggle button{flex:1}
}

/* V009 — unavailable genre combinations and contextual sorting */
.genre-filter:disabled,.genre-filter.no-overlap:disabled{opacity:.45;cursor:not-allowed;background:#e7e5df;color:#868d84;border-color:#d3d6cf;box-shadow:none;transform:none;}
.genre-filter:disabled:hover,.genre-filter.no-overlap:disabled:hover{background:#e7e5df;color:#868d84;border-color:#d3d6cf;}
.genre-filter:disabled small{color:#879087!important;}
.genre-mode-toggle button:disabled{opacity:.35;cursor:not-allowed;}
.genre-mode-toggle button:disabled:hover{background:transparent;}

/* V010 — refined genre explorer, with family inclusion distinct from zero overlap. */
.genre-explore-head{padding:0 0 33px}
.genre-explore-head h1{margin:0}
.genre-control-panel{padding-top:31px}
.genre-control-heading{margin-bottom:14px}
.genre-logic-row{border-top:0;border-bottom:1px solid var(--hair);padding:8px 0 25px;margin-bottom:11px}
.genre-logic-caption{max-width:680px;font-size:12px;line-height:1.7}
.genre-logic-caption em{font-style:italic;color:#304c3b}
.genre-family-layout{margin:0 0 10px}
.genre-family{padding-top:18px}
.genre-family-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.genre-family-heading .genre-family-name{margin:0}
.genre-family-name{margin-bottom:15px}
.genre-select-all{border-radius:3px;flex-shrink:0;padding:9px 11px!important;font-size:11px!important;background:#e9e3d8;border-color:#b8b7ab}
.genre-select-all.active{background:#a54c37;color:#fffaf2;border-color:#a54c37}
.genre-select-all.active small{color:#f7d6cc}
.genre-filter.family-included:disabled{opacity:1;background:#e0e7dc;border:1px dashed #9fab9e;color:#687c6c;cursor:not-allowed}
.genre-filter.family-included:disabled small{color:#4e7158!important}
.genre-filter.no-overlap:disabled{opacity:.38;background:#e7e5df;border-style:solid;border-color:#d3d6cf;color:#868d84}
.genre-filter.no-overlap:disabled small{color:#879087!important}
.genre-results-line{margin-top:8px;margin-bottom:23px}
@media(max-width:600px){
 .genre-explore-head{padding-bottom:30px}
 .genre-control-heading{align-items:flex-start}
 .genre-control-heading span{text-align:right;max-width:126px;line-height:1.5}
 .genre-logic-row{padding-top:9px;margin-bottom:9px}
 .genre-family-heading{gap:8px}
 .genre-select-all{padding:9px 10px!important}
}

/* V011: Keep the right-hand editorial label on one line even on narrow phones. */
.genre-control-heading span{white-space:nowrap;max-width:none;flex-shrink:0;line-height:1.2}
@media(max-width:600px){
 .genre-control-heading{align-items:center;gap:9px}
 .genre-control-heading span{max-width:none;white-space:nowrap;letter-spacing:.065em;font-size:9px;text-align:right}
 .genre-control-heading h2{font-size:clamp(23px,7.2vw,29px);flex-shrink:1}
 .genre-select-all{font-size:10px!important;padding:9px 9px!important}
}
@media(max-width:360px){
 .genre-control-heading{gap:6px}
 .genre-control-heading span{font-size:8px;letter-spacing:.035em}
 .genre-control-heading h2{font-size:23px}
 .genre-select-all{font-size:9px!important;padding:9px 7px!important}
}


/* V014 — a quieter headline, with the previous serif hero saved in docs/v013-hero-reference.html. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.intro-grid{min-height:0;padding-block:58px 37px}
.intro-kicker{margin:0;white-space:nowrap}
.showcase{padding-top:45px}
@media(max-width:900px){
  .intro-grid{padding-block:48px 32px}
}
@media(max-width:620px){
  .intro-grid{padding-block:36px 26px}
  .intro-kicker{margin:0;font-size:clamp(8px,2.35vw,10px);letter-spacing:.085em;gap:9px}
  .intro-kicker:before{width:20px;flex:0 0 20px}
  .showcase{padding-top:33px}
  /* Every slide uses exactly the same first-row height during a sideways swipe.
     Allow 2 genre lines, 3 title lines, and 2 artist lines per card. */
  .monthly-grid{grid-template-rows:repeat(2,auto);align-items:start;row-gap:30px}
  .monthly-grid .feature-card{display:flex;flex-direction:column;min-width:0}
  .monthly-grid .feature-card .feature-category{
    line-height:1.4;min-height:2.8em;max-height:2.8em;overflow:hidden;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    margin-bottom:7px
  }
  .monthly-grid .feature-card h3{
    line-height:1.12;min-height:3.36em;max-height:3.36em;overflow:hidden;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    margin-bottom:6px
  }
  .monthly-grid .feature-card .byline{
    line-height:1.4;min-height:2.8em;max-height:2.8em;overflow:hidden;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  }
}


/* V015 — return the understated headline to its original serif / terracotta styling,
   while keeping the compact V014 positioning and no hero button. */
.intro-kicker.mini-headline{
  font-family:var(--serif);
  font-size:clamp(21px,2.35vw,29px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.025em;
  text-transform:none;
  white-space:nowrap;
}
.mini-headline-name{color:var(--ink)}
.intro-kicker.mini-headline em{
  color:#b74e35;
  font-weight:400;
  font-style:italic;
}
@media (max-width:620px){
  .intro-kicker.mini-headline{
    font-size:clamp(17px,4.45vw,20px);
    letter-spacing:-.018em;
    white-space:nowrap;
    gap:9px;
  }
  /* Each month's row gets a matching, generous text area after the artwork.
     Titles and artists sit directly together; any spare room is BELOW the artist. */
  .monthly-grid{
    grid-template-rows:repeat(2,calc((100vw - 51px) / 2 + 174px));
    align-items:stretch;
  }
  .monthly-grid .feature-card .feature-art{flex-shrink:0}
  .monthly-grid .feature-card .feature-category,
  .monthly-grid .feature-card h3,
  .monthly-grid .feature-card .byline{min-height:0}
}


/* V016 — mobile monthly carousel shows one pair at a time, not two rows.
   All four picks remain visible together on larger screens. */
.intro-kicker.mini-headline{gap:.21em}
@media(max-width:620px){
  .intro-kicker.mini-headline{gap:.21em}
  .monthly-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
    align-items:start;
    row-gap:0;
  }
  .monthly-grid .feature-card h3,
  .monthly-grid .feature-card .byline,
  .monthly-grid .feature-card .feature-category{min-height:0}
}

/* V017 – editor conveniences (all public permissions remain with GitHub). */
.detail-tags .genre-pill { cursor: default; }
.detail-actions .edit-album-btn { background: #1c2927; color: #f4f0e7; border-color: #1c2927; text-decoration: none; }
.detail-actions .edit-album-btn:hover { background: #33453e; border-color: #33453e; color: #fff; }
.owner-off { appearance:none; border:0; padding:6px 0; background:transparent; color:#9d583e; font:600 12px/1.1 'DM Sans',sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 620px) { .owner-off { font-size:10px; } .detail-actions .edit-album-btn { display:inline-flex; align-items:center; justify-content:center; } }

/* V019: centering the small serif headline and keeping the footer notice on one line on desktop. */
.intro-grid { display:flex;align-items:center;justify-content:center;text-align:center; }
.intro-copy { display:flex;justify-content:center;width:100%; }
.intro-kicker.mini-headline { justify-content:center; margin:0; text-align:center; }
@media (min-width:901px) {
  .site-footer .footer-mark { max-width:none; white-space:nowrap; font-size:clamp(7px,.63vw,9px);letter-spacing:.045em;line-height:1.4; }
  .site-footer .footer-inner { gap:16px; }
}
@media (max-width:900px) { .site-footer .footer-mark { white-space:normal; } }
@media (max-width:620px) { .intro-grid { display:flex;align-items:center;justify-content:center; } .intro-copy { justify-content:center; } .intro-kicker.mini-headline { text-align:center; } }
/* Keep return-to-catalogue available if all sections are off. */
.detail-body:has(.return-bottom):not(:has(.panel)) { padding-top:0; }
/* Center the actual headline text, rather than counting the decorative dash. */
.intro-kicker.mini-headline{position:relative;}
.intro-kicker.mini-headline::before{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);flex:none;}


/* V020 — homepage masthead + compact scroll header. No change to album layout. */
.site-header { position:fixed;top:0;left:0;right:0;width:100%;transition:opacity .23s ease,visibility .23s ease,transform .23s ease; }
body.is-home-top .site-header {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-100%)}
body:not(.is-home) #main {padding-top:83px}
.home-masthead {min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;padding:54px 22px 52px;background:var(--paper);text-align:center;border-bottom:1px solid var(--hair)}
.masthead-brand {display:inline-flex;align-items:center;justify-content:center;gap:21px;text-decoration:none;color:var(--ink);font-family:var(--sans);font-weight:700;font-size:clamp(56px,6.8vw,96px);line-height:1;letter-spacing:-.065em;white-space:nowrap}
.masthead-brand .masthead-record {width:clamp(48px,5.5vw,76px);height:clamp(48px,5.5vw,76px);flex:none}
.masthead-brand .masthead-record::before {width:60%;height:60%;border-width:2px}
.masthead-brand .masthead-record span {width:17%;height:17%}
.masthead-subtitle {display:flex;align-items:center;flex-direction:column;gap:2px;margin:0;font-family:var(--serif);font-size:clamp(22px,2.4vw,31px);font-weight:400;line-height:1.08;letter-spacing:-.016em}
.masthead-subtitle span {color:var(--ink)}
.masthead-subtitle em {color:#b74e35;font-style:italic;font-weight:400}
.home-masthead+.showcase {border-top:0;padding-top:48px}
.discogs-pressing{display:flex;justify-content:flex-start;align-items:center;margin:15px 0 0}
.discogs-pressing a{display:inline-flex;align-items:center;opacity:.72;transition:opacity .2s ease}
.discogs-pressing a:hover,.discogs-pressing a:focus-visible{opacity:1}
.discogs-pressing img{display:block;width:65px;height:auto;max-height:24px}
@media(max-width:620px) {
  body:not(.is-home) #main {padding-top:68px}
  .home-masthead {min-height:250px;padding:48px 16px 43px;gap:21px}
  .masthead-brand {font-size:clamp(36px,9vw,57px);gap:12px;letter-spacing:-.065em}
  .masthead-brand .masthead-record {width:clamp(35px,9vw,52px);height:clamp(35px,9vw,52px)}
  .masthead-subtitle {font-size:clamp(21px,5.5vw,27px)}
  .home-masthead+.showcase {padding-top:34px}
}
@media(prefers-reduced-motion:reduce) {.site-header{transition:none}}

/* V021: the compact footer gets the former homepage subtitle. The large masthead is wordmark only. */
.home-masthead{gap:0}


/* V022 — quiet, tighter homepage spacing; existing album and catalogue behavior retained. */
/* Large wordmark remains the only header content at the top of the homepage. */
.home-masthead{
  min-height:205px;
  padding:27px 22px 26px;
}
/* Distinct background already separates Listening to Lately from the catalogue;
   the masthead's bottom border separates it from the header. */
.home-masthead + .showcase{
  border-top:0;
  padding-top:49px;
}
.showcase{padding-bottom:57px}
.collection{padding-top:57px;padding-bottom:70px}
.showcase > .shell > .section-label,
.collection > .shell > .section-label{
  border-top:0;
  padding-top:0;
}
/* Month and heading form a two-line editorial label at left, arrows at right. */
.listening-section-label{
  align-items:center;
  margin-bottom:25px;
  gap:16px;
}
.listening-heading{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.listening-heading .eyebrow{margin:0}
.listening-heading .index{line-height:1.25}
.listening-section-label .month-buttons{display:flex;gap:7px;flex-shrink:0;align-self:center}
@media(max-width:620px){
  .home-masthead{min-height:149px;padding:24px 16px 21px}
  .home-masthead + .showcase{padding-top:30px}
  .showcase{padding-bottom:40px}
  .collection{padding-top:41px;padding-bottom:55px}
  .listening-section-label{margin-bottom:20px;gap:12px}
  .listening-heading{gap:7px}
  .listening-section-label .month-buttons{gap:6px}
}
/* V032 — catalogue and album-page refinements. */
.load-box .more-btn{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:2px;font-size:12px;font-weight:700;min-height:49px;padding:13px 20px;appearance:none;transition:background .2s,color .2s}
.load-box .more-btn:hover{background:var(--ink);color:var(--paper)}
.spotify-album-link{display:flex;align-items:center;margin:0 0 26px}
.detail-tags:has(+ .spotify-album-link){margin-bottom:14px}
.spotify-album-link a{display:inline-flex;align-items:center;opacity:.72;transition:opacity .2s ease}
.spotify-album-link a:hover,.spotify-album-link a:focus-visible{opacity:1}
.spotify-album-link img{display:block;width:65px;height:auto;max-height:24px}
.more-from-artist{padding:0 0 12px}
.more-from-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 20px}
.more-from-card{text-decoration:none;min-width:0;display:block}
.more-from-card .cover-art{width:100%;box-shadow:0 10px 24px #18232313;transition:transform .25s}
.more-from-card:hover .cover-art{transform:translateY(-4px)}
.more-from-card h3{font-size:14px;font-weight:700;line-height:1.4;margin:13px 0 5px;overflow-wrap:anywhere}
.more-from-card p{font-size:12px;color:var(--muted);margin:0}
.boot{min-height:80vh;display:grid;place-content:center}
.boot .boot-record{width:74px;height:74px;border:0;background:var(--ink);animation:raks-record-spin 2.2s linear infinite;transform:rotate(0deg)}
.boot .boot-record::before{width:60%;height:60%;border:2px solid rgba(255,255,255,.36)}
.boot .boot-record span{width:11px;height:11px;background:var(--paper)}
@keyframes raks-record-spin{to{transform:rotate(360deg)}}
@media(max-width:620px){.more-from-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 15px}.more-from-card h3{font-size:13px}.more-from-card p{font-size:11px}.boot .boot-record{width:66px;height:66px}}

/* V033 — compact related-album carousel, Spotify spacing, visible loader rotation. */
.more-from-artist .more-from-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}
.more-from-controls{display:flex;flex:none;gap:7px}
.more-from-controls[hidden]{display:none}
.more-from-arrow{flex:none}
.more-from-grid{
  display:grid;grid-auto-flow:column;grid-template-columns:none;
  grid-auto-columns:calc((100% - 60px)/4);
  gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.more-from-grid::-webkit-scrollbar{display:none}
.more-from-card{scroll-snap-align:start}
.spotify-album-link{margin:0 0 21px}
.detail-tags:has(+ .spotify-album-link){margin-bottom:21px}
.spotify-album-link img{width:114px;height:auto;max-height:none}
.boot .boot-record::before{z-index:1}
.boot .boot-record span{position:relative;z-index:2}
.boot .boot-record::after{
  content:"";position:absolute;inset:3px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 330deg,transparent 0deg,rgba(255,255,255,.18) 24deg,rgba(255,255,255,.04) 47deg,transparent 65deg);
}
@media(max-width:620px){
  .more-from-grid{grid-auto-columns:calc((100% - 15px)/2);gap:15px}
  .more-from-arrow{width:38px;height:36px}
}
/* V034 — keep the initial loader immersive and prevent iOS overscroll. */
html:has(body.is-initial-loading){overflow:hidden;overscroll-behavior:none;background:var(--paper)}
body.is-initial-loading{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;touch-action:none;overscroll-behavior:none}
body.is-initial-loading .site-header,body.is-initial-loading .site-footer{visibility:hidden}
body.is-initial-loading .boot{position:fixed;inset:0;z-index:1000;width:100%;height:100vh;height:100dvh;min-height:0;margin:0;padding:0;background:var(--paper);display:grid;place-items:center}
/* V035 — original high-resolution Spotify icon (no wordmark). */
.spotify-album-link img{width:52px;height:52px;max-height:none;object-fit:contain}
/* V038 — align Spotify with the share action; remove duplicated rules. */
.detail-actions{align-items:center}
.detail-actions .spotify-album-link{margin:0}
.detail-content .return-bottom{border-top:0;padding-top:0}
.detail-content .panel-heading.no-selected-review{border-bottom:0;padding-bottom:0}

/* V041 — true gaps between carousel slides, without inset album artwork. */
.monthly-viewport{column-gap:clamp(14px,2.4vw,34px)}
@media(max-width:900px){.monthly-viewport{column-gap:19px}}
@media(max-width:620px){.monthly-viewport{column-gap:15px}}

/* V045 — owner-controlled NEW tag on catalogue cards and album pages. */
.album-new-tag{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  border-radius:999px;padding:7px 10px;background:var(--accent);color:var(--ink);
  font:800 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
}
.album-card .album-new-tag{
  position:absolute;z-index:6;top:10px;left:10px;
  box-shadow:0 3px 12px rgba(24,35,35,.22);
}
.detail-info .detail-no .album-new-tag{
  flex:none;box-shadow:none;letter-spacing:.08em;
}
@media(max-width:620px){
  .album-card .album-new-tag{top:8px;left:8px;padding:6px 9px;font-size:9px}
  .detail-info .detail-no{flex-wrap:wrap}
}

/* V046 — subtle, clickable NEW-only dot alongside the acclaimed filter. */
.chip-pair{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.new-filter-toggle{
  display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:36px;
  padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.new-filter-toggle::before{
  content:"";display:block;width:13px;height:13px;border-radius:50%;
  background:var(--accent);transition:box-shadow .18s,transform .18s;
}
.new-filter-toggle:hover::before{transform:scale(1.12)}
.new-filter-toggle.active::before{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.new-filter-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:620px){.new-filter-toggle{width:30px;flex-basis:30px;height:34px}}