/* The record shelf: monochrome, cover-led, with a springy 3D sleeve wave. */
body{background:#080808}
.preview-bar{background:#191919;border-color:#292929}
.header{max-width:1200px;height:94px;background:#000;border:0;padding-left:50px;padding-right:50px;position:relative;z-index:8}
.header:before{display:none}
.header .brand{color:#f1eee7}.header .brand-star{color:#b8a58a}
.header .brand-main{font-size:29px}.header .brand-star{font-size:23px}.header .brand-sub{font-size:7px}
.header nav{font-size:12px;gap:33px;color:#c4c1b9}
.header .button{background:#f0eee8;border-color:#f0eee8;border-radius:5px;color:#171713;font-size:11px;min-height:39px;padding:9px 15px;gap:25px}
.header .button:hover{background:#fff;border-color:#fff;color:#171713}
.record-stage{height:calc(100svh - 125px);min-height:650px;max-height:1100px;position:relative;isolation:isolate;overflow:hidden;background:#000;color:#f1eee7}
.portfolio-kicker{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:calc(100% - 100px);max-width:1100px;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:1.7px;color:#8f8c84;z-index:3;pointer-events:none}
.portfolio-wordmark{position:absolute;z-index:1;top:5%;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:min(42vh,32vw);font-weight:400;line-height:.84;letter-spacing:-.035em;color:#f2efe8;margin:0;white-space:nowrap;pointer-events:none;text-align:center}
.portfolio-wordmark>span:not(.sr-only){display:block;font-family:var(--sans);font-size:10px;line-height:1.8;letter-spacing:1.35em;margin-left:1.35em;color:#e5ded0;margin-top:22px}
.portfolio-intro{position:absolute;z-index:1;top:55%;left:50%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.4px;color:#b6afa0;pointer-events:none;white-space:nowrap}
.record-browser{position:absolute;inset:0;z-index:2;outline-offset:-8px}
#record-canvas{position:absolute;inset:0;pointer-events:none}
#record-canvas canvas{width:100%;height:100%;display:block}
.record-fallback{display:flex;gap:20px;align-items:center;position:absolute;left:0;right:0;bottom:145px;padding:50px 35px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#8e8170 #171510;overscroll-behavior-x:contain}
.fallback-cover{border:0;padding:0;background:transparent;position:relative;flex:0 0 220px;scroll-snap-align:center;transform:perspective(750px) rotateY(-24deg);transition:transform .3s;color:white;text-align:left}
.fallback-cover img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;box-shadow:8px 7px 0 #302d27,16px 20px 26px #0009}
.fallback-cover span{display:block;font-size:11px;color:#c7bdab;margin-top:18px;line-height:1.6}
.fallback-cover.is-selected,.fallback-cover:hover{transform:perspective(750px) rotateY(-12deg) translateY(-24px)}
.webgl-ready .record-fallback{display:none}
@media(min-width:761px){
  .shelf-ready .record-fallback{position:absolute;inset:0;display:block;overflow:visible;padding:0;scroll-snap-type:none;pointer-events:none;perspective:1600px}
  .shelf-ready .fallback-cover{position:absolute;width:clamp(175px,20vw,280px);height:auto;aspect-ratio:1;pointer-events:auto;transform-style:preserve-3d;transition:none;will-change:transform;border-radius:1px}
  .shelf-ready .fallback-cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:1px;box-shadow:7px 2px 0 var(--sleeve-color),10px 6px 2px #050403,14px 22px 27px #0007}
  .shelf-ready .fallback-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#fff1,transparent 24%,#0001);pointer-events:none;border:1px solid #ffffff22}
  .shelf-ready .fallback-cover>span{display:none}
}
.portfolio-bottom{position:absolute;z-index:4;left:50%;bottom:58px;transform:translateX(-50%);width:calc(100% - 100px);max-width:1100px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;pointer-events:none}
.portfolio-bottom>*{pointer-events:auto}
.selected-record{max-width:min(50vw,560px)}
.selected-record>p{font-size:9px;letter-spacing:1.5px;color:#b6a48b;margin-bottom:9px}
#selected-title{font-family:var(--serif);font-size:34px;line-height:1.1;background:transparent;border:0;padding:0;text-align:left;letter-spacing:-.5px;color:#f1e9dc}
#selected-title>span{font-family:var(--sans);font-size:17px;margin-left:12px;color:#9f8b70}
#selected-title:hover{color:#d8be9c}
#selected-artist{display:block;font-size:11px;color:#9e9588;line-height:1.7;margin-top:7px}
.record-controls{text-align:right;background:#000b;padding:12px 15px;border:1px solid #72614a44;border-radius:4px;backdrop-filter:blur(10px)}
.record-counter{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-bottom:12px}
.record-counter>button{width:35px;height:32px;border:1px solid #484138;background:#14120e;color:#cdbda6;font-size:16px;border-radius:3px}
.record-counter>button:hover{border-color:#b8a58a;color:white;background:#211b15}
#record-count{font-size:10px;letter-spacing:1.3px;color:#aaa092;min-width:49px;text-align:center}
#open-record-notes{padding:0;background:transparent;border:0;color:#e4d9c8;font-size:12px;line-height:1.6;border-bottom:1px solid #7d6d57;padding-bottom:4px}
#open-record-notes span{margin-left:18px;color:#a48b6b}
.scan-hint{font-size:8px;letter-spacing:1.2px;line-height:1.8;color:#817563;margin-top:14px}
.archive-scroll{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:4;font-size:9px;letter-spacing:1px;color:#978d7c;line-height:1.6;padding:5px 10px}
.archive-scroll>span{margin-left:14px;font-size:13px}
.credential{background:#10100f;color:#c1b4a0;border-color:#323029}
.archive-records{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 25px}
.archive-cover{width:100%;border:0;padding:0;cursor:pointer;text-align:left}
.archive-records .record h3{font-size:29px}.archive-records .record-meta{font-size:8px;letter-spacing:.6px}.archive-records .record>p{font-size:12px}
.work-aside{max-width:430px}.filters{flex-wrap:wrap}.filters button{font-size:10px;padding:7px 13px}
.album-dialog{width:760px;max-width:calc(100vw - 30px);padding:28px 34px;background:#eee8dc;color:#312a21;border-color:#b9a88e}
.album-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #c8bba7;padding-bottom:19px;margin-bottom:30px}
.album-dialog-top>span{font-size:10px;letter-spacing:1.8px;color:#8e7252}
.album-note-intro{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:27px}
#album-note-image{width:100%;height:auto;aspect-ratio:1;object-fit:cover;box-shadow:7px 7px 0 #d3c7b5}
#album-note-type{font-size:9px;line-height:1.7;color:#927553;letter-spacing:1.4px}
#album-note-title{font-size:49px;line-height:1;letter-spacing:-1px;color:#30291f;margin:12px 0}
#album-note-artist{font-size:13px;line-height:1.9;color:#73614a}
.album-note-credit{margin-top:35px;padding-top:24px;border-top:1px solid #c8bba7}
.album-note-credit>.eyebrow{font-size:9px;letter-spacing:1.7px;color:#8b6f4e}
#album-note-role{font-family:var(--serif);font-size:32px;color:#443421;margin:12px 0 15px;line-height:1.15}
#album-note-body{font-size:13px;line-height:1.9;color:#705d44;max-width:630px}
#album-note-tracks{font-size:12px;color:#6d583f;margin-top:20px;line-height:1.9}
#album-note-tracks .eyebrow{font-size:9px;letter-spacing:1.2px;color:#97734a}
#album-note-tracks ul{margin-top:10px;padding-left:18px}
.album-note-links{display:flex;align-items:center;gap:25px;margin-top:27px;flex-wrap:wrap}
.album-note-links>.button{font-size:12px;min-height:45px;background:#2c261d;border-color:#2c261d;color:#f0e7d7}
.album-note-links>a:last-child{font-size:11px;text-decoration:underline;text-underline-offset:5px;color:#8a6741}
.album-note-bottom{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#8e7658;line-height:1.8;border-top:1px solid #c8bba7;padding-top:20px;margin-top:30px}
.album-note-bottom>a{color:#65492b;text-decoration:underline;text-underline-offset:4px}
.album-note-navigation{display:flex;justify-content:space-between;gap:20px;padding-top:21px}
.album-note-navigation>button{font-size:11px;background:transparent;border:0;padding:6px 0;color:#806444;min-height:35px}
@media(min-width:1600px){.portfolio-wordmark{top:5%;font-size:min(45vh,32vw)}.portfolio-intro{top:55%}}
@media(max-width:1100px){.header{padding-left:36px;padding-right:36px}.header:before{inset:0}.portfolio-kicker,.portfolio-bottom{width:calc(100% - 72px)}.portfolio-wordmark{font-size:35vw;top:10%}.portfolio-intro{top:54%}.record-stage{min-height:620px}.archive-records{grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 22px}.archive-records .record h3{font-size:29px}.selected-record{max-width:52vw}.portfolio-bottom{bottom:61px}}
@media(max-width:760px){.header{padding:0 24px;height:82px}.header .brand-main{font-size:28px}.header .brand-star{font-size:22px}.header .brand-sub{font-size:7px}.header .button{font-size:10px;padding:9px 13px;min-height:38px;gap:18px}.header:before{display:none}.record-stage{height:calc(100svh - 111px);min-height:680px;max-height:920px}.portfolio-kicker{top:13px;width:calc(100% - 48px);font-size:7px;line-height:1.8;letter-spacing:1.1px;justify-content:center;text-align:center}.portfolio-kicker>span:last-child{display:none}.portfolio-wordmark{top:7%;font-size:59vw;line-height:.83;letter-spacing:-.04em}.portfolio-wordmark>span:not(.sr-only){font-size:8px;letter-spacing:1.05em;margin-left:1.05em;margin-top:19px}.portfolio-intro{top:33%;font-size:11px;letter-spacing:.1px}.record-fallback{bottom:170px;padding:35px calc((100vw - 225px)/2) 24px;gap:23px;left:0;right:0;scrollbar-width:none;scroll-padding:0 calc((100vw - 225px)/2)}.record-fallback::-webkit-scrollbar{display:none}.fallback-cover{flex-basis:225px;transform:perspective(850px) rotateY(-17deg);scroll-snap-align:center}.fallback-cover.is-selected,.fallback-cover:hover{transform:perspective(850px) rotateY(-7deg) translateY(-14px)}.fallback-cover img{box-shadow:5px 5px 0 #3b3429,10px 18px 23px #0009}.fallback-cover>span{display:none}.portfolio-bottom{bottom:48px;max-width:none;width:calc(100% - 48px);gap:14px;align-items:flex-start}.selected-record{max-width:calc(100% - 102px);padding-top:3px}.selected-record>p{font-size:7px;letter-spacing:1px;margin-bottom:8px;line-height:1.7}#selected-title{font-size:27px;line-height:1.12}#selected-title>span{font-size:12px;margin-left:7px}#selected-artist{font-size:10px;line-height:1.8;margin-top:8px}.record-controls{flex:0 0 100px}.record-counter{gap:5px;justify-content:flex-end;margin-bottom:12px}.record-counter>button{height:28px;width:26px;font-size:14px}#record-count{font-size:8px;letter-spacing:.5px;min-width:37px}#open-record-notes{font-size:9px;line-height:1.9;text-align:right}#open-record-notes>span{margin-left:5px}.scan-hint{font-size:0;margin-top:9px}.scan-hint:before{content:'SWIPE TO BROWSE';font-size:7px;letter-spacing:.9px;line-height:1.8;white-space:nowrap}.archive-scroll{bottom:9px;font-size:8px}.credential p:nth-child(2){font-size:10px}.archive-records{grid-template-columns:repeat(2,minmax(0,1fr));gap:29px 17px}.archive-records .record{padding-bottom:18px}.archive-records .record h3{font-size:26px;margin-top:10px;line-height:1.1}.archive-records .record-meta{font-size:7px;letter-spacing:.1px;gap:5px;line-height:1.8;margin-top:15px;align-items:flex-start}.archive-records .record-meta>span:first-child{max-width:85%}.archive-records .record>p{font-size:11px;line-height:1.8;margin-top:9px}.archive-records .listen{font-size:10px;padding:25px 11px 12px}.work-aside{max-width:none}.filters button{font-size:10px;padding:7px 12px;min-height:37px}.album-dialog{padding:23px 22px;max-width:calc(100vw - 20px)}.album-dialog-top{margin-bottom:24px;padding-bottom:18px}.album-dialog-top>span{font-size:8px;letter-spacing:1.4px}.album-note-intro{grid-template-columns:105px 1fr;gap:19px}#album-note-title{font-size:34px;letter-spacing:-.6px;line-height:1.02;margin:10px 0}#album-note-artist{font-size:12px;line-height:1.7}#album-note-type{font-size:8px;line-height:1.8;letter-spacing:1px}.album-note-credit{margin-top:29px;padding-top:23px}#album-note-role{font-size:30px}#album-note-body{font-size:13px}.album-note-links{gap:20px;margin-top:24px}.album-note-links .button{font-size:11px;min-height:45px}.album-note-links>a:last-child{font-size:11px}.album-note-bottom{font-size:10px;gap:17px;margin-top:27px;align-items:center}.album-note-navigation{padding-top:18px}.album-note-navigation>button{font-size:11px}}
@media(max-width:390px){.header{padding-left:20px;padding-right:20px}.record-stage{min-height:660px}.portfolio-bottom,.portfolio-kicker{width:calc(100% - 40px)}.portfolio-wordmark{top:8%;font-size:59vw}.portfolio-intro{top:33%}.fallback-cover{flex-basis:205px}.record-fallback{padding-left:calc((100vw - 205px)/2);padding-right:calc((100vw - 205px)/2);bottom:170px}.album-note-intro{grid-template-columns:90px 1fr;gap:17px}#album-note-title{font-size:31px}}
@media(prefers-reduced-motion:reduce){.fallback-cover{transition:none}.record-browser{scroll-behavior:auto}}
