/* MUSIC DNA LAB v1.5 / THE FLOATING ARCHIVE
   A restrained showroom-inspired visual language. No WebGL, no heavy 3D runtime.
   The existing rating / evidence model and navigation remain intact. */
:root{--bg:#ded3c2;--card:#f2e9db;--ink:#2c2a26;--muted:#746858;--olive:#757d69;--clay:#a47b65;--line:#c9b9a4;--dark:#302d28;--tan:#cab99f;--r:18px}
body{background:linear-gradient(180deg,#dcd1c1,#e5dacb 42%,#ded4c5);overflow-x:hidden}
.main{padding-bottom:calc(116px + env(safe-area-inset-bottom))}
.topline{height:calc(63px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,#e7dcca 88%,transparent);border-bottom:1px solid #c8b8a580;box-shadow:0 4px 22px #47392b0d}
.wordmark{letter-spacing:1.15px;font-weight:750;font-size:13px}.wordmark span{color:#9c775b}
.pagehead{padding:30px 0 17px}.pagehead h1{font-family:Georgia,"Iowan Old Style",serif;font-weight:400;letter-spacing:-1.8px;line-height:1.04;font-size:clamp(35px,7.8vw,58px)}
.pagehead .eyebrow,.eyebrow,.subtitle{font-size:9px;letter-spacing:1.8px;font-weight:770}
.card{background:rgba(249,241,226,.84);border:1px solid #c8baa4b3;box-shadow:0 10px 28px #594c3e10;backdrop-filter:blur(7px)}
.kpi{background:rgba(246,236,221,.87);box-shadow:0 7px 22px #503e2b0e;border:1px solid #d2c4af}.kpi b{font-family:Georgia,"Iowan Old Style",serif;font-weight:500}.kpi.dark{background:#353129}.kpi.olive{background:#d5d6c6}.kpi.clay{background:#e4d2c5}
.btn,.chip,.iconbtn,.navtab,.moretile{transition:transform .23s ease,background .23s ease,box-shadow .23s ease}
.btn:active,.chip:active,.moretile:active,.navtab:active{transform:scale(.973)}
.btn,.chip{min-height:41px}.btn{white-space:normal;min-width:0}.chip{white-space:nowrap}
.bottomnav{bottom:calc(8px + env(safe-area-inset-bottom,0px));background:rgba(36,33,29,.96);box-shadow:0 11px 32px #2d231d45,0 1px 0 #a5957f3d inset}
.navtab.active{background:#efe3d0}
.listrow .cover{box-shadow:0 4px 10px #453a2a25}.rowbtn{transition:background .2s ease,transform .2s ease}.rowbtn:active{transform:scale(.991)}
/* Photo is deliberately layered over a full typographic fallback, which remains offline. */
.album-object{transform-style:preserve-3d;isolation:isolate}
.cover{padding:0;border-radius:5px;aspect-ratio:1;box-shadow:0 5px 14px #21191030;overflow:hidden;line-height:1.05}
.cover::after{display:none}.cover-fallback{padding:8px;word-break:break-word;position:relative;z-index:1;max-height:100%;overflow:hidden}
.cover-photo{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:3;display:block;opacity:0;transition:opacity .6s ease;filter:saturate(.91)}
.has-cover .cover-photo{opacity:1}
.has-cover .cover-fallback{opacity:0}
/* Airy suspended record gallery shared across Home, Time Machine and Wrapped. */
.floating-gallery{height:206px;width:min(100%,500px);position:relative;margin:0 auto 16px;perspective:900px;isolation:isolate;overflow:visible}
.floating-gallery::before{content:"";position:absolute;inset:24% 6% 8%;background:radial-gradient(ellipse,#f5f0e788,transparent 70%);filter:blur(25px);pointer-events:none}
.float-item{position:absolute;top:7%;left:calc(50% - 72px);width:144px;display:flex;flex-direction:column;align-items:center;gap:9px;background:transparent;border:0;color:inherit;transform:translate3d(0,0,0) rotateY(-5deg);animation:artifact-float 8s ease-in-out infinite;transform-style:preserve-3d;padding:0;min-height:0;filter:drop-shadow(0 9px 12px #2d252036)}
.float-item .floating-cover{width:144px;height:144px;aspect-ratio:1;font-size:19px;border-radius:3px;border:1px solid #fff9;box-shadow:1px 10px 21px #2a211e42;position:relative}
.float-item .float-caption{font-size:9px;letter-spacing:.8px;text-transform:uppercase;background:#e9decebd;padding:5px 8px;border-radius:12px;max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.float-item-1{z-index:5;top:5%;left:calc(50% - 70px);animation-delay:-.8s}
.float-item-2{z-index:3;top:16%;left:3%;transform:rotateY(17deg) rotateZ(-8deg) scale(.74);animation-delay:-4s}
.float-item-3{z-index:2;top:18%;left:calc(100% - 137px);transform:rotateY(-21deg) rotateZ(7deg) scale(.68);animation-delay:-1.8s}
.float-item-4{z-index:1;top:31%;left:19%;transform:rotateY(18deg) rotateZ(-9deg) scale(.52);animation-delay:-5s}
.float-item-5{z-index:1;top:27%;left:calc(100% - 158px);transform:rotateY(-17deg) rotateZ(10deg) scale(.55);animation-delay:-3s}
.float-item:active{z-index:9;filter:drop-shadow(0 14px 17px #2d252069);animation-play-state:paused}
@keyframes artifact-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* Home: album artifact first, editorial statement second. */
.hero{background:linear-gradient(148deg,#c9bda8 0%,#e3d8c7 52%,#b9a995 100%);border:1px solid #fff6;box-shadow:0 13px 31px #4a3c2d28;padding:18px 19px 25px;min-height:0}
.hero:before{content:"";height:220px;width:220px;right:-100px;top:130px;border:0;background:radial-gradient(circle,#ffffe499,transparent 68%);color:transparent;opacity:1;transform:none;pointer-events:none}
.hero .floating-gallery{height:224px;margin:4px auto 15px}
.hero .eyebrow{position:relative;z-index:3}.hero h1{font-size:clamp(56px,10vw,104px);line-height:.81;font-weight:840;margin:24px 0 17px;letter-spacing:-4px}.hero h1 span{font-weight:350;color:#766a5c}.hero p{max-width:520px}
.hero .btn{margin:5px 5px 3px 0;position:relative}
/* Record shop display: preserve the successful rating slider and saving semantics. */
.rate-stage{background:radial-gradient(circle at 48% 23%,#bad3df 0%,#8ea9bc 57%,#657f93 100%);color:#1e2d36;border-radius:26px;box-shadow:0 16px 33px #314e5c3a;border:1px solid #d9eaee90}
.rate-stage-head{color:#263744}.rate-sleeve-wrap{margin-top:34px;filter:drop-shadow(0 19px 19px #20374552)}
.rate-sleeve{border-radius:2px;border:1px solid #f4efdd80;box-shadow:0 13px 26px #2634406e;animation:record-drift 7s ease-in-out infinite;transform-origin:60% 40%}
.rate-sleeve.has-cover::before,.rate-sleeve.has-cover::after{opacity:0}
.rate-sleeve.has-cover .rate-sleeve-mark,.rate-sleeve.has-cover .rate-sleeve-title,.rate-sleeve.has-cover .rate-sleeve-artist,.rate-sleeve.has-cover .rate-sleeve-seal{opacity:0}
.rate-sleeve .cover-photo{z-index:5;object-fit:cover}
@keyframes record-drift{0%,100%{translate:0 0;rotate:-.8deg}50%{translate:0 -8px;rotate:1deg}}
.rate-vinyl{animation:vinyl-turn 17s linear infinite}
@keyframes vinyl-turn{to{rotate:360deg}}
.rate-albumname{color:#1b2933;font-family:Georgia,"Iowan Old Style",serif;font-weight:500;letter-spacing:-1.5px}.rate-artist{color:#304453}
.rate-evidence span{background:#dce8eb66;color:#223944;border:1px solid #6f86968f;font-weight:650}
.rate-console{background:#e0e9e8cb;border:1px solid #ffffff65;backdrop-filter:blur(12px)}
.rate-footnote{color:#2b4151}
/* Taste Time Machine: light archive gallery paired with dark analytical rail. */
.tm-hero{background:radial-gradient(ellipse at 50% 35%,#c7dae0 0%,#92acb9 58%,#718c99 100%);color:#263641;border:1px solid #e4eef073;box-shadow:0 11px 33px #3a4d5552;padding-bottom:22px}
.tm-hero-top{color:#344654}.tm-hero h1{color:#243643;font-family:Georgia,"Iowan Old Style",serif;font-weight:500;letter-spacing:-3px;position:relative;z-index:3}
.tm-hero h1 i{font-weight:400;color:#425866}.tm-hero p{color:#3c4e5b;position:relative;z-index:2;max-width:420px}.tm-hero-stats{position:relative;z-index:3;border-color:#3d58604d;color:#233842}
.tm-hero-art{position:relative;inset:auto;width:100%;height:auto;transform:none;pointer-events:auto;z-index:2;margin-top:3px}
.tm-hero-art .floating-gallery{height:185px;margin-bottom:3px;max-width:420px}.tm-hero-art .float-item .float-caption{color:#2c3a46}
.tm-hero-art .float-item .floating-cover{box-shadow:0 8px 25px #304d5b61}
.tm-hero-art>div::before,.tm-hero-art>div::after{pointer-events:none}
.tm-stage{background:#292f31;border-radius:20px;box-shadow:0 13px 30px #24313927}.tm-stage h2,.tm-snapshot h2,.tm-sectionhead h2{font-family:Georgia,"Iowan Old Style",serif;font-weight:500}
.tm-snapshot{background:rgba(250,244,232,.9)}
.tm-era-card{box-shadow:0 9px 18px #66534121;transition:transform .25s,box-shadow .25s}.tm-era-card:active{transform:scale(.98)}
/* Wrapped becomes a floating exhibition without interfering with its eight chapters. */
.chapter{min-height:590px;position:relative;overflow:hidden;isolation:isolate;padding:23px 18px 27px;background:radial-gradient(ellipse at 50% 28%,#e5d8c3,#bca389 75%);box-shadow:0 13px 34px #3d342836}
.chapter.dark{background:radial-gradient(circle at 46% 23%,#756856,#343028 76%)}.chapter.clay{background:radial-gradient(circle at 50% 18%,#d0ac94,#ae7560 77%)}.chapter.olive{background:radial-gradient(circle at 50% 20%,#b7c0a3,#7f8b76 77%)}
.chapter h2{font-family:Georgia,"Iowan Old Style",serif;font-weight:500;letter-spacing:-1.9px;font-size:clamp(36px,9vw,62px);line-height:1.03}
.chapter .big{font-family:Georgia,"Iowan Old Style",serif;font-weight:500;font-size:clamp(38px,9vw,65px);overflow-wrap:anywhere}
.chapter .eyebrow{position:relative;z-index:3}
.wrapped-floating-sleeves{height:185px;margin:-2px 0 0;flex:none;overflow:hidden}.wrapped-floating-sleeves .floating-gallery{height:185px;margin:0 auto}.wrapped-floating-sleeves .float-item{top:13%}.wrapped-floating-sleeves .float-caption{display:none}
.chapter>div:not(.wrapped-floating-sleeves){position:relative;z-index:3}
/* Merit Collection: one simple featured badge plus tidy two-column cards. */
.merit-feature{background:radial-gradient(ellipse at 50% 35%,#d2c2a4,#8b7760 87%);border:1px solid #c5b190;border-radius:20px;padding:25px 21px 19px;margin:20px 0 6px;text-align:center;box-shadow:0 15px 30px #66523b35;overflow:hidden}
.merit-feature-label{font-size:9px;font-weight:750;letter-spacing:2px;color:#514438}
.merit-medal{width:160px;height:160px;border-radius:50%;margin:23px auto 14px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#dfcfab,#9e7951 75%);box-shadow:0 0 0 7px #43352b21,0 8px 28px #382d2566;animation:merit-levitate 9s ease-in-out infinite}
.merit-medal-ring{width:130px;height:130px;border-radius:50%;border:4px double #61472f;box-shadow:inset 0 0 0 7px #e1cfac,inset 0 0 0 9px #71563f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle,#a4b5a0,#788978)}
.merit-medal-ring span{font-size:50px;color:#403629}.merit-medal-ring small{text-transform:uppercase;font-size:9px;font-weight:850;letter-spacing:1.2px;color:#352e25}
.merit-feature h2{font-family:Georgia,"Iowan Old Style",serif;font-size:32px;font-weight:500;letter-spacing:-1px;margin:14px 0 6px}.merit-feature p{font-size:12px;color:#514638;margin-bottom:19px}.merit-progress{height:6px;border-radius:99px;background:#604f3b66;overflow:hidden}.merit-progress span{display:block;height:100%;background:#f9ead0;border-radius:99px}.merit-feature .spread{margin-top:10px;color:#3d3327}.merit-link{background:transparent;border:0;text-decoration:underline;font-size:11px;font-weight:800;color:inherit}
@keyframes merit-levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.clean-merit{box-shadow:none;background:#f1e8d9;border:1px solid #cfc0ac;border-radius:14px;padding:12px 10px;min-width:0}
.clean-merit .flex{align-items:center;gap:9px}
.clean-merit .badgeicon{width:46px;height:46px;flex:none;border:0;border-radius:50%;font-size:21px;background:radial-gradient(circle at 35% 30%,#fff9,var(--badge-tone));box-shadow:inset 0 0 0 3px #66534160,0 3px 8px #473b2a29}
.clean-merit .merit-copy{min-width:0;flex:1}.clean-merit .merit-copy b{display:block;font-family:Georgia,"Iowan Old Style",serif;font-size:17px;font-weight:500;letter-spacing:-.3px;line-height:1.2}.clean-merit .merit-copy .subtitle{font-size:7px;letter-spacing:.6px}.clean-merit p{margin:5px 0;font-size:9px;line-height:1.4}
.clean-merit .progress{height:5px}.clean-merit .chip{border:0;padding:5px 7px;min-height:32px;background:#ddd0bc;font-size:10px}.clean-merit .spread .tiny{font-size:9px}
/* Galaxy: the existing canvas still handles navigation. Focus on visibility & restraint. */
.galaxywrap{box-shadow:0 15px 28px #24252527;border-radius:19px;border:1px solid #ab977c80}.galhint{backdrop-filter:blur(8px)}
/* Dossier and discovery appear like physical editorial cards. */
.discovery-object{transition:transform .3s ease,box-shadow .3s ease}.discovery-object:active{transform:scale(.994)}
.discovery-object .cover.large{box-shadow:0 9px 14px #46362431}
.sheet{background:#efe4d3;border-radius:24px 24px 0 0}
.sheethead .cover.large{box-shadow:0 11px 17px #44372b38}
.moregrid .moretile{background:linear-gradient(145deg,#f6ead9,#e8dac7);border-radius:14px;box-shadow:0 8px 17px #65523b12}
/* Ergonomics: responsive text, data chip overflow, safe-area-aware sheets. */
.chiprow{max-width:100%;min-width:0;overscroll-behavior-inline:contain}.flex,.spread{min-width:0}
@media(max-width:390px){.hero .floating-gallery{height:190px}.floating-gallery{height:185px}.float-item{width:125px;left:calc(50% - 62px)}.float-item .floating-cover{width:125px;height:125px}.float-item-2{left:-2%}.float-item-3{left:calc(100% - 121px)}.hero h1{font-size:clamp(49px,13vw,62px)}.tm-hero .floating-gallery{height:165px}.tm-hero h1{font-size:clamp(56px,14vw,75px)}.clean-merit{padding:10px 8px}.clean-merit .badgeicon{width:40px;height:40px}.clean-merit .merit-copy b{font-size:15px}.chapter{min-height:545px}}
@media(max-width:350px){.grid2:has(.clean-merit){grid-template-columns:1fr}.float-item-4,.float-item-5{display:none}}
@media(hover:hover){.float-item:hover{z-index:12;scale:1.045;filter:drop-shadow(0 18px 23px #211a185c)}.moretile:hover{transform:translateY(-3px)}.discovery-object:hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.float-item,.rate-sleeve,.rate-vinyl,.merit-medal{animation:none!important}.album-object,.cover-photo,.btn,.chip,.moretile,.navtab,.discovery-object{transition:none!important}}
/* Override the old decorative timeline rings: v1.5 replaces them with record sleeves. */
.tm-hero-art .floating-gallery{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;width:min(100%,430px);height:190px;border:0;border-radius:0;background:transparent;opacity:1;transform:none;overflow:visible;pointer-events:auto}
.tm-hero-art .float-item .cover{position:relative;inset:auto;top:auto;right:auto;left:auto;width:144px;height:144px;border-radius:3px;opacity:1;transform:none;background-clip:padding-box;pointer-events:auto}
.tm-hero-art .float-item{pointer-events:auto}
.tm-hero-art .floating-gallery::before{border:0;width:auto;height:auto;position:absolute;inset:22% 4% 0;transform:none}
.tm-hero-stats span{color:#344c54}
@media(max-width:390px){.tm-hero-art .floating-gallery{height:176px}.tm-hero-art .float-item .cover{width:125px;height:125px}}
/* Keep sculpture labels minimal; foreground object is the focal point. */
.floating-gallery .float-item:not(.float-item-1) .float-caption{display:none}
.floating-gallery .float-item-1 .float-caption{font-size:8px;padding:3px 9px;max-width:155px;background:#e9e0d5da}
.floating-cover .cover-fallback{font-size:14px;line-height:1.04;letter-spacing:-.45px;font-weight:800;overflow-wrap:break-word;word-break:normal;text-wrap:balance;max-width:100%}