@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400&display=swap');
*{box-sizing:border-box}html{background:#f5f4f0;scroll-behavior:smooth}body{margin:0}#selected-covers{--paper:#f5f4f0;--ink:#141512;color:var(--ink);background:var(--paper);font-family:'DM Sans',Arial,sans-serif;max-width:1600px;margin:auto;padding:0 clamp(20px,3vw,55px) 45px;container-type:inline-size}#selected-covers a{color:inherit;text-decoration:none}#selected-covers button{font:inherit;color:inherit;cursor:pointer}#selected-covers .nav{height:76px;border-bottom:1px solid #d8d9d1;display:flex;align-items:center;justify-content:space-between;font-size:12px}#selected-covers .navlinks{display:flex;align-items:center;gap:25px}#selected-covers .meta{font:10px 'IBM Plex Mono',monospace;letter-spacing:.035em}#selected-covers .lang{color:#73756c}#selected-covers .lang b{color:#141512;font-weight:400}
#selected-covers .hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,25vw,390px);align-items:center;gap:clamp(20px,3vw,55px);padding:55px 0 48px;min-height:565px}#selected-covers .hero-copy{min-width:0}#selected-covers h1{font-size:clamp(70px,9.5vw,145px);line-height:.89;font-weight:600;letter-spacing:-.068em;margin:0 0 28px}#selected-covers .intro{max-width:540px;font-size:15px;line-height:1.6;color:#51564d;margin:0}#selected-covers .badgezone{width:100%;position:relative;perspective:900px;justify-self:center}#selected-covers .badge{position:relative;width:100%;aspect-ratio:2/3;transform:rotate(6deg);transform-origin:50% 35%;filter:drop-shadow(5px 10px 7px #4244381d);transition:transform .4s ease}#selected-covers .holder{display:block;width:100%;height:100%;object-fit:contain}#selected-covers .paper-content{position:absolute;left:23%;top:31.5%;width:56%;height:54%;transform:rotate(-.5deg);color:#282923;container-type:inline-size}#selected-covers .badge-name{font-size:16cqw;font-weight:700;line-height:.93;letter-spacing:-.045em;text-shadow:0 .2px .25px #20251c55}#selected-covers .badge-role{font:5.2cqw/1.4 'IBM Plex Mono',monospace;margin-top:6%}#selected-covers .photo-print{position:relative;width:66%;aspect-ratio:90/94;margin:8% auto 9%;transform:rotate(-1.7deg);padding:4px;background:#fffdf4;box-shadow:0 1px 2px #3a3f2838}#selected-covers .photo{width:100%;height:100%;object-fit:cover;display:block}#selected-covers .photo-print:after{content:'';position:absolute;inset:4px;pointer-events:none;background-image:radial-gradient(#615e4922 .4px,transparent .7px);background-size:3px 3px;opacity:.28}#selected-covers .badge-status{font:6.3cqw/1.4 'IBM Plex Mono',monospace;border-top:1px solid #b7b6a8;padding-top:6%;display:flex;gap:5px;align-items:center}#selected-covers .dot{width:4px;height:4px;flex-shrink:0;background:#626c51;border-radius:50%}#selected-covers .paper-content:after{content:'';position:absolute;inset:-4px;pointer-events:none;background:linear-gradient(122deg,transparent 25%,#fff2 27%,transparent 29%,transparent 65%,#fff2 67%,transparent 69%)}
#selected-covers .workhead{border-top:1px solid #d8d9d1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0 24px}#selected-covers .workhead h2{font-size:15px;font-weight:500;margin:0}#selected-covers .workhead .meta{color:#65685f}#selected-covers .shelf-shell{width:94%;max-width:1350px;margin:0 auto;padding:45px 10px 0;position:relative}#selected-covers .collection-stage{position:relative}#selected-covers .shelf-light{position:absolute;inset:0 -5% 70px;background:radial-gradient(ellipse at 50% 68%,#fff 0%,#ffffffa0 38%,transparent 80%);pointer-events:none}#selected-covers .covers,#selected-covers .shelf-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,28px)}#selected-covers .covers{align-items:end;position:relative;z-index:2}#selected-covers .sleeve-button{display:block;width:100%;min-width:0;border:0;background:none;padding:0;position:relative;text-align:left;isolation:isolate;--object-edge:#bec7a3;--object-fold:#789060}#selected-covers .sleeve-button[data-index="1"]{--object-edge:#393123;--object-fold:#15130f}#selected-covers .sleeve-button[data-index="2"]{--object-edge:#897960;--object-fold:#4d483b}#selected-covers .sleeve-button[data-index="3"]{--object-edge:#e3c413;--object-fold:#b89d0d}#selected-covers .sleeve-button[data-index="4"]{--object-edge:#c9b9d3;--object-fold:#a798b2}#selected-covers .sleeve-object{position:relative;display:block;z-index:1;transform-origin:50% 100%;transform:perspective(1800px) rotateY(-1.5deg);transition:transform .45s cubic-bezier(.18,.75,.22,1)}#selected-covers .cover{display:block;position:relative;width:100%;aspect-ratio:450/928;height:auto;overflow:hidden;isolation:isolate;background:#f3ead6;box-shadow:0 0 0 .5px #282d2019,5px 5px 8px -4px #30332230,10px 5px 19px -10px #30332230;transition:box-shadow .45s,filter .4s;container-type:inline-size}#selected-covers .supplied-art{display:block;width:100%;height:100%;object-fit:contain}#selected-covers .sleeve-edge{position:absolute;z-index:2;left:100%;top:0;bottom:0;width:3px;background:linear-gradient(90deg,var(--object-fold),var(--object-edge) 43%,#ffffec66 70%,var(--object-fold));clip-path:polygon(0 0,100% 1.5px,100% 100%,0 calc(100% - .3px));pointer-events:none}#selected-covers .sleeve-lip{position:absolute;z-index:2;left:1px;right:-2px;top:-1px;height:1.2px;background:linear-gradient(90deg,#fff8,#fff7 60%,var(--object-edge));pointer-events:none}#selected-covers .cover:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#161c130d,transparent 2px,#ffffff28 3px,transparent 5px,transparent 94%,#14190f09);box-shadow:inset 0 1px #ffffff38,inset -1px 0 #00000012,inset 0 -1px #171b1621}#selected-covers .sleeve-button:before{content:'';position:absolute;z-index:0;left:-1%;right:-3%;height:8px;bottom:-4px;background:radial-gradient(ellipse,#292d2154,#30362920 42%,transparent 73%);filter:blur(1.1px);transform:scaleY(.72);transition:opacity .45s,transform .45s,filter .45s;pointer-events:none}#selected-covers .sleeve-button:after{content:'';position:absolute;z-index:0;left:3%;right:-8%;height:16px;bottom:-10px;background:radial-gradient(ellipse,#3d42352b,transparent 70%);filter:blur(3px);transition:opacity .45s;pointer-events:none}#selected-covers .sleeve-button.active .sleeve-object,#selected-covers .sleeve-button:focus-visible .sleeve-object{transform:translateY(-18px) scale(1.015)}#selected-covers .sleeve-button.active .cover{box-shadow:0 0 0 .5px #282d2019,8px 14px 16px -8px #30332236,12px 21px 25px -15px #3033222b}#selected-covers .sleeve-button.active:before{opacity:.35;transform:scaleX(.92) scaleY(1.8);filter:blur(3px)}#selected-covers .sleeve-button.active:after{opacity:.65}#selected-covers .covers.has-active .sleeve-button:not(.active) .cover{filter:saturate(.94) brightness(.98)}#selected-covers .view-project{position:absolute;left:50%;bottom:calc(100% + 26px);transform:translate(-50%,5px);font:9px 'IBM Plex Mono',monospace;white-space:nowrap;color:#2a2e23;opacity:0;transition:opacity .25s,transform .3s;pointer-events:none}#selected-covers .sleeve-button.active .view-project{opacity:1;transform:translate(-50%,0)}#selected-covers .shelf-plane{position:relative;z-index:1;height:14px;margin:0 -10px;background:linear-gradient(180deg,transparent 0 9px,#fdfdf8 9px,#e5e6df 10px,#edeee7 12px,#d9dcd1 14px);box-shadow:0 3px 4px -2px #464a3820,0 13px 18px -10px #32372732,0 27px 30px -21px #32372724}#selected-covers .shelf-plane:before{content:'';position:absolute;inset:0 0 4px;background:linear-gradient(180deg,#e4e6dd,#f7f8f1 38%,#fffffb);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 100%,0 100%)}#selected-covers .shelf-meta{margin-top:30px;padding:23px 0 10px;border-top:1px solid #d3d6ca}#selected-covers .meta-button{background:none;border:0;padding:0;text-align:left;align-self:start;line-height:1.45;font-size:14px;font-weight:500;color:#3c4435;transition:color .25s}#selected-covers .meta-number{font:10px 'IBM Plex Mono',monospace;color:#6e7764;margin-right:5px}#selected-covers .meta-scope{display:block;font:10.5px/1.6 'IBM Plex Mono',monospace;color:#5f6954;margin-top:8px}#selected-covers .meta-button.active{color:#121b0c;font-weight:600}#selected-covers .cover-category{position:absolute;left:9%;right:6%;bottom:5%;font:5.5cqw/1.5 'IBM Plex Mono',monospace;z-index:3;text-align:left}#selected-covers .mum-cover{background:#dbeec2;color:#416c31}#selected-covers .allup-cover{background:#000;color:#eab63a}#selected-covers .vg-cover{background:#ffe000;color:#006daf}#selected-covers .rone-cover{background:#423723;color:#f5e6c7}#selected-covers .rone-cover>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}#selected-covers .rone-wordmark{position:absolute;bottom:18%;left:7%;width:86%;z-index:2;line-height:0}#selected-covers .rone-wordmark img{width:100%;height:auto;filter:url(#rone-cream-ink)}#selected-covers .rone-cover .cover-category{text-shadow:0 1px 3px #151a15}#selected-covers .mirel-cover{background:linear-gradient(135deg,#e2d6e9,#cbbbd5);color:#51415d}#selected-covers .mirel-logo{position:absolute;top:29%;left:16%;width:68%;height:auto}#selected-covers .preview{padding:0 0 35px}#selected-covers .previewbar{display:flex;align-items:center;justify-content:space-between;margin:25px 0;gap:20px}#selected-covers .previewbar h3{font-size:28px;font-weight:500;letter-spacing:-1px;margin:0}#selected-covers .close{border:0;background:none;padding:12px 0;font-size:12px}#selected-covers .preview-cover{height:540px;display:flex;align-items:center;justify-content:center;background:#eeeee7}#selected-covers .preview-cover .cover{width:230px;view-transition-name:shelf-cover}#selected-covers .previewnote{font:11px 'IBM Plex Mono',monospace;color:#6c7065;margin-top:16px}#selected-covers [hidden]{display:none!important}
@view-transition{navigation:auto}::view-transition-group(project-mum),::view-transition-group(shelf-cover){animation-duration:.55s;animation-timing-function:cubic-bezier(.18,.75,.22,1)}
@media(max-width:1000px){#selected-covers .hero{grid-template-columns:minmax(0,1fr) 280px;gap:15px;min-height:490px}#selected-covers h1{font-size:clamp(64px,9vw,95px)}#selected-covers .intro{font-size:14px}#selected-covers .meta-button{font-size:12px}#selected-covers .meta-scope{font-size:10px}}
@media(max-width:760px){#selected-covers .hero{grid-template-columns:1fr;gap:0;padding:40px 0 30px;min-height:0}#selected-covers h1{font-size:clamp(55px,14.2vw,105px)}#selected-covers .intro{max-width:440px}#selected-covers .badgezone{width:280px;justify-self:end;margin-top:-8px;margin-right:5%;}#selected-covers .shelf-shell{width:100%;overflow-x:auto;padding:48px 10px 16px;scrollbar-width:thin;scrollbar-color:#bbc3af transparent}#selected-covers .collection-stage{min-width:760px}#selected-covers .covers,#selected-covers .shelf-meta{gap:20px}#selected-covers .navlinks{gap:16px}#selected-covers .nav-about{display:none}}
@media(max-width:440px){#selected-covers .nav{height:64px;font-size:11px}#selected-covers .lang{font-size:9px}#selected-covers .navlinks{gap:12px}#selected-covers .hero{padding-top:38px}#selected-covers .intro{font-size:14px}#selected-covers .badgezone{width:250px;margin-top:0;margin-right:0}#selected-covers .workhead .meta{font-size:9px}#selected-covers .previewbar h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#selected-covers *{transition:none!important}::view-transition-group(*){animation:none!important}}
/* Shelf finishing and narrow-screen containment */
#selected-covers .cover{height:auto;min-height:0}#selected-covers .shelf-meta{padding-top:24px;margin-top:34px}#selected-covers .meta-scope{font-size:12px;line-height:1.55}#selected-covers .meta-number{font-size:11px}#selected-covers .shelf-plane{box-shadow:0 2px 2px #454c3517,0 15px 22px -13px #313a2a45}#selected-covers .nav a:focus-visible,#selected-covers button:focus-visible{outline:2px solid #657357;outline-offset:6px}#selected-covers .collection-stage{padding-right:3px}#selected-covers .intro{font-size:16px}
@media(min-width:761px) and (max-width:1100px){#selected-covers .shelf-shell{width:100%}#selected-covers .covers,#selected-covers .shelf-meta{gap:18px}#selected-covers .meta-button{font-size:13px}}
@media(max-width:760px){#selected-covers .shelf-shell{overscroll-behavior-x:contain}#selected-covers .collection-stage{min-width:800px}#selected-covers .meta-button{font-size:14px}#selected-covers .hero-copy{width:100%}#selected-covers .intro{font-size:15px}}
@media(max-width:360px){#selected-covers h1{font-size:13.4vw}#selected-covers .navlinks{gap:8px}#selected-covers .lang{font-size:8px}}
