/* ===== r16: Summer Collection photo book (inline) + full-screen infinite gallery ===== */
.bk-sec{padding-bottom:clamp(60px,8vw,120px)}
.bk-wrap{display:grid;place-items:center;padding:clamp(28px,6vw,80px) 0 0;perspective:1800px}
.bk-book,.bk-book *,#bk,#bk *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.bk-book img,#bk img{-webkit-user-drag:none;user-drag:none;pointer-events:none;display:block}
.bk-book{--w:min(62vw,300px);--h:calc(var(--w)*1.36);all:unset;box-sizing:border-box;display:block;width:var(--w);height:var(--h);position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.7,0,.18,1);touch-action:manipulation}
@media(min-width:800px){.bk-book{--w:min(24vw,330px)}}
.bk-book:focus-visible{outline:1px solid #fff;outline-offset:8px}
/* at rest: flat 2D (crisp at device DPR), 3D only while animating/open */
html:not(.bk-3d) .bk-book,html:not(.bk-3d) .bk-cover{transform:none;transform-style:flat;transition:none}
html:not(.bk-3d) .bk-inside,html:not(.bk-3d) .bk-spine{display:none}
html.bk-3d .bk-book{will-change:transform}
html.bk-open .bk-book{transform:translateX(calc(var(--w)/2))}
.bk-pages{position:absolute;inset:0;background:#ECE8DF;border-radius:1px 3px 3px 1px;box-shadow:2px 0 0 #d8d3c7,4px 1px 0 #cfc9bc,6px 2px 0 #c6c0b2,0 40px 80px -20px rgba(0,0,0,.9),0 0 0 .5px rgba(0,0,0,.4);transform:translateZ(-1px)}
.bk-pages:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 9%)}
.bk-page{position:absolute;inset:0;padding:9% 9% 8%;display:flex;flex-direction:column;color:#1a1a1a}
.bk-ph{flex:1;background:#111 center/cover;margin-bottom:8%}
.bk-page small{font:500 clamp(7px,1.9vw,9px)/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between}
.bk-cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.7,0,.18,1);z-index:2}
html.bk-open .bk-cover{transform:rotateY(-178deg)}
.bk-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1px 3px 3px 1px;overflow:hidden}
.bk-front{background:#ECE8DF;box-shadow:inset 3px 0 0 rgba(0,0,0,.18),inset 7px 0 6px -4px rgba(0,0,0,.25)}
.bk-front:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.25),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");mix-blend-mode:multiply;pointer-events:none}
.bk-paint{position:absolute;left:0;top:0;height:44%;width:15.5%;z-index:2;mix-blend-mode:multiply;opacity:.94}
.bk-sig{position:absolute;left:50%;bottom:6.5%;width:13.5%;translate:-50% 0;opacity:.9;z-index:2}
.bk-inside{transform:rotateY(180deg);background:#0d0d0d;color:#8d8a84;padding:10%;display:flex;flex-direction:column;justify-content:flex-end;font:500 clamp(7px,1.9vw,9px)/1.4 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;box-shadow:inset -10px 0 14px -8px rgba(0,0,0,.9)}
.bk-isig{width:26%;opacity:.75;margin-bottom:auto;align-self:flex-end;transform:rotate(-8deg)}
.bk-inside span+span{margin-top:6px;color:#55534f}
.bk-spine{position:absolute;left:0;top:0;bottom:0;width:14px;transform:rotateY(-90deg);transform-origin:left;background:#d4cfc3 url(book/print-strip.webp) right 0 top 0/100% 44% no-repeat}

/* overlay */
#bk{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none;color:#eee;font-family:var(--hel)}
html.bk-ov #bk{visibility:visible;pointer-events:auto}
#bk .bk-bg{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .7s ease}
html.bk-dim #bk .bk-bg{opacity:1}
#bkStage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;overscroll-behavior:none}
#bkStage.drag{cursor:grabbing}
#bkPlane{position:absolute;inset:0;will-change:transform}
#bk .t{position:absolute;left:0;top:0;will-change:transform;contain:layout paint;background:#111}
#bk .t .in{position:absolute;inset:-6%;will-change:transform}
#bk .t img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
#bk .t img.ok{opacity:1}
#bk .bk-vig{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.6),transparent 90px),radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55))}
#bk .bk-ui{position:absolute;z-index:5;font:500 11px/1 var(--mono,monospace);text-transform:uppercase;letter-spacing:.12em;transition:opacity .5s}
#bk .bk-close{bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));left:50%;translate:-50% 0;min-height:48px;min-width:120px;padding:0 22px 0 18px;border-radius:999px;background:rgba(12,12,12,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 30px rgba(0,0,0,.5);color:#fff;font-family:var(--hel);font-size:12px;letter-spacing:.16em;display:flex;gap:10px;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;touch-action:manipulation}
html.bk-gal #bk .bk-close{opacity:1;pointer-events:auto}
#bk .bk-close:active{scale:.96}
@media(min-width:800px){#bk .bk-close{top:20px;bottom:auto;left:auto;right:20px;translate:none}}
#bk .bk-hint{left:0;right:0;bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px));text-align:center;opacity:0;pointer-events:none;color:#d9d6cf}
@media(min-width:800px){#bk .bk-hint{bottom:28px}}
html.bk-gal #bk .bk-hint{opacity:.75}html.bk-moved #bk .bk-hint{opacity:0}
#bkLb{position:absolute;inset:0;z-index:10;visibility:hidden;touch-action:none}
#bkLb .lbg{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .45s}
#bkLb img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#bkLb .cap{position:absolute;left:20px;right:20px;bottom:max(20px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;font:500 11px/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#cfcbc3;opacity:0;transition:opacity .4s}
#bkLb .x{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;width:56px;height:56px;border-radius:50%;background:rgba(20,20,20,.7);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;opacity:0;transition:opacity .4s;z-index:2;cursor:pointer;touch-action:manipulation}
#bkLb .x:before,#bkLb .x:after{content:"";position:absolute;width:20px;height:1.6px;background:#fff;transform:rotate(45deg)}#bkLb .x:after{transform:rotate(-45deg)}
#bkLb.on{visibility:visible}#bkLb.on .lbg{opacity:.94}#bkLb.on .cap,#bkLb.on .x{opacity:1}
html.bk-lock,html.bk-lock body{overflow:hidden!important;overscroll-behavior:none}
@media (prefers-reduced-motion:reduce){.bk-book,.bk-cover{transition-duration:.01s!important}}

/* ===== r17 affordances: peek, press, hover, button ===== */
.bk-wrap{gap:0}
.bk-openbtn{margin-top:36px;min-height:48px;padding:0 26px!important;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#fff!important;color:#000!important;border:0!important;font-family:var(--hel)!important;font-weight:600!important;font-size:.75rem!important;letter-spacing:.14em!important;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:opacity .5s,transform .2s}
.bk-openbtn:hover{background:#000!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff}
.bk-openbtn:active{transform:scale(.97)}
.bk-openbtn:focus-visible{outline:1px solid #fff;outline-offset:4px}
html.bk-open .bk-openbtn{opacity:0;pointer-events:none}
/* press feedback (2D, keeps the cover crisp) */
.bk-book{transition:transform 1.4s cubic-bezier(.7,0,.18,1),scale .18s ease}
.bk-book.press{scale:.98}
.bk-book.press .bk-pages{box-shadow:2px 0 0 #d8d3c7,4px 1px 0 #cfc9bc,6px 2px 0 #c6c0b2,0 50px 90px -16px rgba(0,0,0,1),0 0 0 .5px rgba(0,0,0,.4)}
/* fanned thumbnails behind the pages: slide out during a peek / hover */
.bk-fan{position:absolute;inset:6% 4% 6% 10%;z-index:0;pointer-events:none;transform:translateZ(-3px);transform-style:preserve-3d}
.bk-fan i{position:absolute;inset:0;background:#111 center/cover;border-radius:1px;box-shadow:0 6px 16px rgba(0,0,0,.5);transform-origin:20% 90%;transition:transform .6s cubic-bezier(.45,0,.25,1);transform:none}
html:not(.bk-3d) .bk-fan{display:none}
html.bk-pk .bk-fan i:nth-child(1),.bk-book.hov .bk-fan i:nth-child(1){transform:translate(22%,-3%) rotate(7deg)}
html.bk-pk .bk-fan i:nth-child(2),.bk-book.hov .bk-fan i:nth-child(2){transform:translate(15%,-1%) rotate(3.5deg)}
html.bk-pk .bk-fan i:nth-child(3),.bk-book.hov .bk-fan i:nth-child(3){transform:translate(8%,0) rotate(1deg)}
html.bk-3d:not(.bk-open) .bk-cover{transition:transform .6s cubic-bezier(.45,0,.25,1)}
html.bk-pk:not(.bk-open) .bk-cover{transform:rotateY(-16deg)}
.bk-book.hov:not(.x) .bk-cover{transform:rotateY(-10deg)}
html.bk-open .bk-fan{display:none}