.catalog{position:relative;min-height:max(740px,100svh);overflow:hidden;background:#fff;color:#666}.catalog>header{position:absolute;top:20px;left:40px;right:40px;height:50px}.catalog>header .share{font-size:16px;min-height:48px;padding:14px 24px}.catalog-canvas{position:absolute;width:1440px;height:740px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--catalog-scale,1));transform-origin:center}.catalog-grid{position:absolute;left:-22.032px;top:-142.006px;width:1554.96px;height:931.068px;pointer-events:none}.catalog-heading{position:absolute;left:40px;right:40px;top:122px;display:flex;justify-content:space-between}.catalog-heading h2{font:20px/24px Suisse,Arial,sans-serif;color:#9e9e9e}.catalog-heading p{font:18px/22px Suisse,Arial,sans-serif;width:325px}.rack{position:absolute;left:40px;top:239px;width:1360px;height:436px;display:flex;align-items:center;justify-content:center;gap:40px;isolation:isolate;touch-action:pan-y;user-select:none}.case-slot{position:relative;width:112px;height:400px;flex:none;transition:width .55s cubic-bezier(.22,.78,.18,1),height .55s;z-index:1}.case-slot.active{width:447px;height:436px;z-index:10}.case-slot.dragging{z-index:12}.case-sheet{position:absolute;inset:0;transform-origin:center;transition:transform .55s cubic-bezier(.22,.78,.18,1);will-change:transform}.case-slot.dragging .case-sheet{transition:none}.closed-paper{position:absolute;inset:0;opacity:1;transition:opacity .3s}.closed-plane{position:absolute;left:-11px;top:0;width:130.2px;height:422.22px}.closed-thickness{position:absolute;right:0;top:0;width:3.72px;height:399.9px}.closed-paper>span{position:absolute;left:24px;top:172px;font:42px/56px Livret,Georgia,serif;color:#fff;opacity:.2}.case-slot.active .closed-paper{opacity:0;pointer-events:none}.case-cover{position:absolute;left:50%;top:50%;width:447px;height:436px;transform:translate(-50%,-50%) perspective(1400px) rotateY(-75deg);opacity:0;transition:transform .55s cubic-bezier(.22,.78,.18,1),opacity .25s;pointer-events:none}.case-slot.active .case-cover{transform:translate(-50%,-50%) perspective(1400px) rotateY(0);opacity:1}.cover-front{position:absolute;inset:0;background:#eee;border-radius:5px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),calc(100% - 44px) 100%,0 100%)}.cover-photo{position:absolute;max-width:none}.cover-grain{position:absolute;inset:0;background-image:url('assets/0f01c.png');background-size:100%;mix-blend-mode:overlay;opacity:.7;pointer-events:none}.cover-topline{position:absolute;left:30px;right:30px;top:26px;display:flex;justify-content:space-between;align-items:flex-start;gap:15px;font:20px/24px Suisse,Arial,sans-serif}.cover-topline>span:first-child{white-space:nowrap;color:#666}.cover-topline>span:last-child{text-align:right;color:#444}.cover-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 80%,#f6ff00 100%);pointer-events:none}.printed-cover-corner{position:absolute;bottom:0;right:0;width:95px;height:95px}.case-pull{position:absolute;inset:0;background:transparent;z-index:3;padding:0;cursor:grab;touch-action:pan-y;color:transparent}.case-slot.active .case-pull{touch-action:none}.case-pull:active{cursor:grabbing}.case-pull:focus-visible{outline:2px solid #666;outline-offset:6px}.case-fold{position:absolute;inset:0;width:447px;height:436px;overflow:visible;pointer-events:none}.catalog-hint{position:absolute;top:698px;left:40px;right:40px;display:flex;justify-content:space-between;color:#9e9e9e;font-size:16px}.catalog-arrows{display:flex;gap:16px}.catalog-arrows button{background:none;color:#666;padding:0 4px;font-size:20px}.case-view{position:fixed;inset:0;background:#fff;z-index:30;overflow:auto}.case-view[hidden]{display:none}.case-view>header{position:relative;top:auto;left:auto;right:auto;margin:20px 40px;height:50px}.case-layout{max-width:1440px;margin:80px auto 50px;padding:0 40px;display:grid;grid-template-columns:minmax(0,680px) minmax(0,650px);gap:30px}.case-visual{position:relative;aspect-ratio:680/648;overflow:hidden;background:#eee}.case-visual>img{width:100%;height:100%;object-fit:cover}.case-visual[data-id="6"]>img{width:142.92%;max-width:none;position:relative;left:-12.03%}.case-veil{position:absolute;inset:0;background:#000;opacity:.8;transition:opacity .5s}.case-panel{display:flex;flex-direction:column;align-items:stretch;min-height:500px}.case-panel h1{position:static;width:auto;text-align:left;font:60px/1.05 Livret,Georgia,serif}.case-description{font-size:18px;line-height:22px;margin-top:12px;max-width:564px}.case-stage{border-top:1px solid #eee;margin-top:30px;padding-top:30px}.case-stage-heading{display:flex;justify-content:space-between;gap:20px;font-size:20px;margin-bottom:12px}.case-stage-heading span{color:#9e9e9e;font-size:18px}.case-reactions{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}.case-reaction{position:relative;background:#eee;min-height:144px;padding:16px;text-align:left;color:#444;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}.case-reaction img{display:block;width:80px;height:75px;object-fit:contain;margin-bottom:12px}.case-reaction[aria-pressed="true"]{background:#f6ff00}.case-actions{display:flex;gap:20px;margin-top:auto;padding-top:40px}.case-actions button{min-height:52px;padding:14px 24px;background:#444;color:#fff}.case-actions button:disabled{background:#c4c4c4}.detail-paper{position:relative;padding:25px 24px;min-height:210px;background:#eee;overflow:hidden;isolation:isolate}.detail-paper p{font-size:18px;line-height:24px;white-space:pre-line}.detail-mask{position:absolute;inset:0;background:#444;z-index:2;cursor:grab;touch-action:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%)}.detail-mask:after{content:'';position:absolute;bottom:0;right:0;border-top:32px solid #d9d9d9;border-right:32px solid transparent}.detail-hint{color:#9e9e9e;font-size:16px;margin-top:12px}.result-comparison{display:flex;align-items:center;gap:24px;margin:25px 0}.result-comparison>div{flex:1}.result-comparison small{display:block;color:#9e9e9e;margin-bottom:12px}.result-comparison strong{font-weight:400;font-size:22px}.case-view.showing{animation:caseEnter .4s cubic-bezier(.22,.78,.18,1)}@keyframes caseEnter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}body.case-is-open{overflow:hidden}.live-message{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px){.catalog{min-height:700px}.catalog>header{left:16px;right:16px}.catalog-heading p{font-size:18px}.catalog-hint{font-size:18px}.case-view>header{margin:16px;height:35px}.case-layout{margin-top:45px;padding:0 16px;grid-template-columns:1fr;gap:25px}.case-panel h1{font-size:42px}.case-description{font-size:17px}.case-visual{max-height:40svh;aspect-ratio:1.3}.case-panel{min-height:400px}.case-stage{margin-top:24px;padding-top:24px}.case-reactions{gap:10px}.case-reaction{padding:12px;min-height:130px;font-size:15px}.case-reaction img{width:65px;height:65px}.case-actions button{padding:12px 18px;font-size:15px}.case-stage-heading{font-size:18px}.case-stage-heading span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.case-slot,.case-cover,.case-sheet,.closed-paper,.case-view{transition:none!important;animation:none!important}}

@media(max-width:700px){.catalog-canvas{position:relative;width:100%;height:700px;top:0;left:0;transform:none}.catalog-heading{top:110px;left:20px;right:20px;flex-direction:column;gap:16px}.catalog-heading h2{font-size:20px}.catalog-heading p{font-size:17px;width:auto;max-width:325px}.rack{left:50%;top:235px;transform:translateX(-50%) scale(.65) translateX(var(--rack-offset,0px));transform-origin:center;transition:transform .55s cubic-bezier(.22,.78,.18,1)}.catalog-hint{top:610px;left:20px;right:20px;font-size:14px;gap:15px}.catalog>header{height:36px}.catalog>header nav{font-size:13px;gap:16px}.catalog>header .logo{width:32px;height:30px}.catalog>header .share{font-size:11px;padding:10px;min-height:35px}}

/* Gray numbered sheets reveal their printed cover on interaction. */
.closed-paper{display:block}.closed-paper:after{content:"";position:absolute;right:3px;top:0;width:1px;height:400px;background:rgba(255,255,255,.7);pointer-events:none}.case-cover{opacity:0;transform:translate(-50%,-50%) perspective(1400px) rotateY(var(--cover-angle,-75deg)) scaleY(.91743);backface-visibility:hidden}.case-slot.active .case-cover{transform:translate(-50%,-50%) perspective(1400px) rotateY(0deg) scaleY(1)}.printed-cover-corner{transform:scale(.4631578947);transform-origin:bottom right}

/* Hover highlight is shared by every case; heading sits 50px below navigation. */
.catalog>.catalog-heading{top:120px;z-index:2}.cover-shade{opacity:0;transition:opacity .25s ease;background:radial-gradient(ellipse at center,rgba(246,255,0,0) 80%,#f6ff00 100%)}.case-slot:hover .cover-shade,.case-slot:focus-within .cover-shade{opacity:1}.catalog-grid{display:none}@media(max-width:700px){.catalog>.catalog-heading{top:106px;left:20px;right:20px}}

/* Dark printed covers, with a yellow reverse side on every peel. */
.cover-darken{position:absolute;inset:0;background:rgba(0,0,0,.3);pointer-events:none}

/* Neutral resting state; highlight and paper shadow appear on interaction. */
.cover-darken{display:none}.case-cover{filter:drop-shadow(0 0 0 transparent);transition:transform .55s cubic-bezier(.22,.78,.18,1),opacity .25s,filter .25s}.case-slot:hover .case-cover,.case-slot:focus-within .case-cover{filter:drop-shadow(0 14px 16px rgba(0,0,0,.18))}

/* Thin paper edges supply depth without cast shadows. */
.catalog>.catalog-heading{top:150px}
.closed-thickness{width:5px;background:linear-gradient(90deg,#e8e8e8 0 20%,#a7a7a7 22% 75%,#c5c5c5 100%);clip-path:polygon(0 0,100% .5%,100% 99.5%,0 100%)}
.closed-paper:after{right:4px;background:rgba(255,255,255,.8)}
.case-cover,.case-slot:hover .case-cover,.case-slot:focus-within .case-cover{filter:none}
.case-cover:before{content:"";position:absolute;inset:3px -3px -3px 3px;background:linear-gradient(135deg,#dedede,#aaa);border-radius:5px;clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),calc(100% - 44px) 100%,0 100%)}
.case-slot.active .cover-shade{opacity:1}
@media(max-width:700px){.catalog>.catalog-heading{top:136px}}

/* Keep the front and folded corner on one exact contour. */
.case-cover:before{display:none}

/* Catalogue is a separate viewport, with no landing page above it. */
body.catalog-page{height:100svh;overflow:hidden;overscroll-behavior:none}
.catalog-page main,.catalog-page .catalog{height:100svh;min-height:0}
.closed-paper>span{color:#aaa;opacity:1}
.closed-thickness{background:linear-gradient(90deg,#8e8e8e 0 20%,#555 22% 75%,#666 100%)}

.about-page{min-height:100svh}.about-page .about{position:relative;height:100svh;min-height:600px}.about-page .about main{height:100%}

/* Printed fronts remain white; yellow radiates into their outer corners. */
.cover-front{background:#fff}
.cover-grain{opacity:.18}
.cover-shade{opacity:1;background:radial-gradient(ellipse at center,rgba(246,255,0,0) 70%,rgba(246,255,0,.85) 86%,#f6ff00 96%)}