:root{--ink:#FF2E9A;--rule:#E6E6E1;--paper:#FFFFFF}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-kerning:normal;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.wrap{padding:0 40px}}
.label{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
header.site{border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:24px;padding-bottom:20px}
.brand{display:flex;flex-direction:column;gap:6px}
.brand .name{font-size:22px;font-weight:300;letter-spacing:-.01em;line-height:1}
@media(min-width:768px){.brand .name{font-size:30px}}
nav.site{display:flex;gap:20px}
nav.site a{padding:12px 0}
footer.site{border-top:1px solid var(--rule);margin-top:96px}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:40px;flex-wrap:wrap}
/* index */
.intro{padding:56px 0 40px;border-bottom:1px solid var(--rule)}
.intro h1{margin:0;font-weight:300;font-size:clamp(40px,10vw,104px);letter-spacing:-.025em;line-height:.95}
.intro p{text-wrap:balance;margin:24px 0 0;font-size:17px;line-height:1.5;font-weight:400;max-width:34em}
.issues{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-left:1px solid var(--rule)}
@media(min-width:900px){.issues{grid-template-columns:repeat(4,1fr)}}
.issue{display:flex;flex-direction:column;gap:16px;padding:16px 16px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.issue .cover{aspect-ratio:1406/1988;outline:1px solid var(--rule);background:#fafafa}
.issue .cover img{width:100%;height:100%;object-fit:cover}
.issue .t{text-wrap:balance;font-size:17px;font-weight:400;line-height:1.3}
.issue:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* reader */
.ihead{padding:40px 0 32px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
.ihead h1{margin:0;font-weight:300;font-size:clamp(32px,7vw,64px);letter-spacing:-.02em;line-height:1}
.spreads{display:flex;flex-direction:column;gap:40px;padding:40px 0 0}
@media(min-width:768px){.spreads{gap:72px;padding-top:72px}}
.spread{display:flex;flex-direction:column;align-items:center;gap:10px}
.pair{display:grid;grid-template-columns:1fr 1fr;width:100%;cursor:zoom-in;border:0;padding:0;background:none}
@media(min-width:768px){.spreads{gap:0;padding:0;width:100vw;margin-left:calc(50% - 50vw)}.spread{min-height:100svh;justify-content:center;gap:12px;padding:24px 0}.pair{width:min(calc(100vw - 48px),calc((100svh - 84px) * 1.4145))}}
.pg{aspect-ratio:1406/1988;outline:1px solid var(--rule);outline-offset:-1px;background:#fff}
.pg img{width:100%;height:100%;object-fit:cover}
.pg.empty{outline:none;background:none}
.no{font-size:11px;font-weight:500;letter-spacing:.16em}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:72px;padding-top:24px;border-top:1px solid var(--rule)}
.pager a{padding:12px 0}
/* lightbox */
.lb{position:fixed;inset:0;background:#FFFFFF;display:none;flex-direction:column;z-index:10}
.lb.on{display:flex}
.lb .nav{display:flex;align-items:center;gap:12px}
.lb .bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid var(--rule)}
.lb button{font:inherit;color:var(--ink);background:none;border:0;padding:12px 4px;cursor:pointer;min-width:44px;min-height:44px}
.lb .stage{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:none}
.book{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);perspective:2400px}
.book.rot{transform:translate(-50%,-50%) rotate(90deg)}
.half,.leaf{position:absolute;top:0;width:50%;height:100%}
.half.L{left:0}.half.R{left:50%}
.half img,.face img{display:block;width:100%;height:100%;object-fit:cover}
.has{outline:1px solid var(--rule);outline-offset:-1px;background:#fff}
.leaf{transform-style:preserve-3d;z-index:2}
.leaf.fwd{left:50%;transform-origin:left center}
.leaf.back{left:0;transform-origin:right center}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.b{transform:rotateY(180deg)}
.leaf .face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s}
.leaf.turning .face::after{opacity:1}
.leaf.fwd .face.f::after{background:linear-gradient(to right,rgba(0,0,0,.18),rgba(0,0,0,0) 40%)}
.leaf.fwd .face.b::after{background:linear-gradient(to left,rgba(0,0,0,.18),rgba(0,0,0,0) 40%)}
.leaf.back .face.f::after{background:linear-gradient(to left,rgba(0,0,0,.18),rgba(0,0,0,0) 40%)}
.leaf.back .face.b::after{background:linear-gradient(to right,rgba(0,0,0,.18),rgba(0,0,0,0) 40%)}
.book.one .half{width:100%;left:0}
.leaf.one{left:0;width:100%;transform-origin:left center}
.book.fade{animation:fd .35s ease}
@keyframes fd{from{opacity:0}to{opacity:1}}
.book.wide .has,.pair[data-wide] .pg{outline:none}
.paper{background:#fff;outline:1px solid var(--rule);outline-offset:-1px}
.hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;pointer-events:none}
@media (prefers-reduced-motion:reduce){.leaf{transition:none!important}}