:root{--ink: light-dark(#202020, #f2f2ef);--muted: light-dark(#6f6f6b, #aaa9a4);--page: light-dark(#e8e8e4, #161616);--surface: light-dark(#f7f7f4, #242424);--border: light-dark(#d0d0cb, #444);--accent: light-dark(#4a4a48, #b8b8b2);--shadow: light-dark(#00000024, #00000066);font-family:ui-sans-serif,system-ui,sans-serif;color-scheme:light dark;color:var(--ink);background:var(--page);font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}.page{display:grid;min-height:100svh;place-items:center;padding:2rem;background:var(--page)}:focus-visible{outline:2px solid currentColor;outline-offset:4px}.page{display:grid;padding:2rem}main{--rx: 0deg;--ry: 0deg;--text-body: .75rem;--text-title: clamp(1.4rem, 9cqw, 2.25rem);--text-display: clamp(4rem, 10vw, 9rem);position:relative;width:min(24rem,100%,calc((100svh - 4rem)*.63));font-size:var(--text-body);font-weight:400}.card{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;width:100%;aspect-ratio:54 / 85.6;padding:0;border:0;border-radius:.4rem;background:var(--surface);box-shadow:0 2.5rem 5rem var(--shadow);overflow:hidden;container-type:inline-size;text-align:left;transition:opacity .4s ease,box-shadow .22s,transform .22s ease-out;transform:perspective(60rem) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d}.card:after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 35%,rgb(255 255 255 / 8%),transparent 65%);content:"";pointer-events:none}main:not(.open):hover .card{box-shadow:0 1.25rem 3rem var(--shadow);transform:perspective(60rem) translateY(-2px) rotateX(calc(var(--rx) * 1.35)) rotateY(calc(var(--ry) * 1.35))}.expand{position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;border:0;background:transparent;cursor:pointer}img{display:block;border-radius:.2rem;filter:saturate(.82) contrast(1.02) brightness(.98);object-fit:cover}.card>picture{flex:1;overflow:hidden}.card>picture img{width:100%;height:100%;border-radius:0;object-position:center 35%}.card>picture,.card>section{position:relative;z-index:2}.card section{display:flex;width:100%;flex-direction:column;align-items:flex-start;padding:clamp(1.5rem,8cqw,2.75rem);color:#f5f5f2;background:#242424}.card h1{margin:0;font-size:var(--text-title);font-weight:500;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}.card h1 span{display:block}.card p{margin:.8rem 0 0;color:#aaa;letter-spacing:.14em;text-transform:uppercase}.card nav{position:relative;z-index:4;display:flex;gap:1.4rem;justify-content:flex-start;margin-top:2rem}.card a{display:block;width:1.5rem;color:#aaa;transition:color .15s,transform .15s ease}.card a:hover,.card a:focus-visible{color:#fff;transform:scale(1.05)}.card a:active{transform:scale(.96)}.spread{position:fixed;z-index:4;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;pointer-events:none;transform:scale(.98);transition:opacity .4s ease,transform .4s ease,visibility .4s}.spread>figure{position:absolute;top:50%;left:74%;width:min(32vw,58svh);margin:0;padding:0;border:0;border-radius:.4rem;color:#f5f5f2;background:var(--surface);box-shadow:0 1rem 3rem var(--shadow);overflow:hidden;transform:perspective(60rem) translate(-50%,-50%) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:box-shadow .18s,transform .18s ease-out}.close{position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;border:0;background:transparent;cursor:pointer}.spread figure picture{display:block}.spread figure img{width:100%;height:auto;border-radius:0;object-fit:contain}figcaption{padding:1.2rem 1.4rem;background:#242424;letter-spacing:.14em;text-transform:uppercase}.spread-identity{position:absolute;top:50%;left:clamp(2rem,7vw,8rem);max-width:calc(100vw - clamp(4rem,14vw,16rem));transform:translateY(-50%)}h2{margin:0;font-size:var(--text-display);font-weight:500;line-height:.85;letter-spacing:-.04em}h2 span{position:relative;display:block;width:max-content}h2 span:last-child{margin-left:8vw;color:var(--accent)}.spread nav{position:absolute;right:clamp(1.5rem,4vw,4rem);bottom:clamp(1rem,2.5vw,2rem);display:flex;gap:clamp(1rem,2vw,2rem);align-items:center}.facts{position:absolute;bottom:clamp(1rem,2.5vw,2rem);left:clamp(1.5rem,4vw,4rem);display:flex;gap:clamp(1.5rem,4vw,4rem);min-height:2.3rem;align-items:center}.facts>span{color:var(--muted);letter-spacing:.18em;text-transform:uppercase}.facts ul{display:flex;gap:clamp(1rem,2vw,2rem);margin:0;padding:0;list-style:none}.spread a{position:relative;display:flex;gap:.45rem;align-items:center;height:2.3rem;padding:0 .5rem;color:inherit;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;transition:color .15s,transform .15s ease}.spread a:hover,.spread a:focus-visible{color:var(--accent);transform:scale(1.03)}.spread a:active{transform:scale(.97)}.spread a svg{width:1rem}small{font-size:inherit}.open .card{opacity:0;transform:perspective(60rem) rotateX(var(--rx)) rotateY(var(--ry)) scale(.98);pointer-events:none}.open .spread{visibility:visible;opacity:1;pointer-events:auto;transform:scale(1)}.open .spread>figure:hover{box-shadow:0 1.25rem 3rem var(--shadow);transform:perspective(60rem) translate(-50%,calc(-50% - 2px)) rotateX(calc(var(--rx) * 1.35)) rotateY(calc(var(--ry) * 1.35))}@media (max-width: 42rem){main{--text-display: clamp(4rem, 20vw, 6.5rem)}.spread>figure{top:34%;left:68%;width:58vw}.spread-identity{top:59%;left:1.25rem;max-width:calc(100vw - 2.5rem)}h2 span:last-child{margin:.12em 0 0 4vw}.spread nav{right:1.25rem;bottom:1.25rem;gap:1rem}.facts{bottom:4.5rem;left:1.25rem;display:block}.facts>span{display:block;margin-bottom:.5rem}.facts ul{gap:.8rem}}@media (prefers-reduced-motion: reduce){.card,.spread{transition:none}}