.studio-home:has(.book-box) .hero-spread{grid-template-columns:.8fr 1.25fr;gap:2.5rem}
.studio-home:has(.book-box) .box-hero{padding-top:calc(var(--nav-h) + 2.2rem)}
.studio-home:has(.book-box) .studio-intro h1{font-size:clamp(4rem,7.5vw,7rem)}
.book-box{min-height:0;height:auto;align-self:center;container-type:inline-size;overflow:visible;background:none}
.book-box:not([open]){background:radial-gradient(ellipse at 46% 34%,#3c4134,#282c24 45%,#191c17 86%);overflow:hidden}
.book-box:not([open]):after{content:"";display:block;aspect-ratio:16/10;margin:3.2rem .25rem 1.2rem;padding-bottom:9.5rem;box-sizing:content-box;pointer-events:none}
.book-box:not([open]) .box-object{inset:3.2rem .25rem 10.7rem}
.book-box[open]>summary{inset:0 0 auto;height:2.8rem;z-index:20}
.book-box[open] .box-object{display:none}
.book-box[open] .edition-caption{left:0;top:.6rem}.book-box[open] .edition-handle{right:0;top:0}
.book-shell{position:relative;margin:3.2rem .25rem 1.2rem;aspect-ratio:16/10;isolation:isolate;perspective:1600px;filter:drop-shadow(0 14px 18px #0006)}
.book-shell:before{content:"";position:absolute;inset:-4px -4px -7px;background:#424c2a;border-radius:2px 5px 5px 2px;box-shadow:0 2px 0 #c1c7ae,0 4px 0 #737c61;z-index:-1}
.book-spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:#eeeae0;overflow:hidden;border-radius:1px 3px 3px 1px}
.book-leaf{position:relative;min-width:0;min-height:0;background:#eeeae0;color:#20251c;overflow:hidden;box-sizing:border-box}
.book-image-canvas{position:absolute;inset:0 auto 0 0;width:200%;}
.book-right .book-image-canvas{left:-100%}
.book-shot{display:block;width:100%;height:100%;min-height:0;object-fit:contain;object-position:center;pointer-events:none;user-select:none;-webkit-user-drag:none}
.book-left:not(.book-photo){padding:clamp(1rem,3.8cqi,1.6rem);display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(90deg,#ecece1 80%,#d0d0bf)}
.book-cart{padding:.4rem;background:#fdf8f1}
.book-brand{width:7rem;max-width:80%;height:2.4rem;object-fit:contain;object-position:left;margin-bottom:auto}
.book-brand[data-brand=ahead]{padding:.3rem;background:#6937a8}
.book-box h2.book-title{font:650 clamp(1.45rem,4.7cqi,2.15rem)/1.07 var(--font-display);letter-spacing:-.04em;color:#20251c;margin:.8rem 0 .75rem}
.book-copy{font:400 clamp(.75rem,2.1cqi,.88rem)/1.5 var(--font-body);color:#48513e;margin:0 0 .9rem!important}
.book-box .book-link{display:inline-flex;align-items:center;justify-content:flex-end;gap:.3rem;min-height:44px;color:inherit;font:500 .8rem var(--font-body);text-decoration:underline;text-underline-offset:.25em;white-space:nowrap}
.book-left .book-link{display:none}
.book-box .book-result{color:#30431b;font:650 clamp(1.35rem,4.2cqi,1.9rem)/1.1 var(--font-display);letter-spacing:-.03em;margin:.25rem 0 .45rem!important}
.book-result small{display:block;font:400 .7rem/1.4 var(--font-body);letter-spacing:0;margin-top:.25rem}
.book-folio{display:flex;justify-content:space-between;gap:.7rem;width:100%;margin-top:auto;color:#637054;font:500 .63rem/1.3 var(--font-body);font-variant-numeric:tabular-nums}
.book-spine{position:absolute;inset:0 auto 0 50%;width:1.3rem;transform:translateX(-50%);pointer-events:none;z-index:3;background:linear-gradient(90deg,transparent,#292d191c 42%,#292d1966 50%,#ffffff45 53%,transparent)}
.book-surface{position:absolute;inset:0;touch-action:pan-y pinch-zoom;user-select:none;cursor:grab;perspective:1600px;outline-offset:8px}
.book-surface:focus-visible{outline:2px solid var(--acid)}.book-surface[data-dragging]{cursor:grabbing}
.turn-sheet{position:absolute;inset:0 0 0 50%;transform-origin:0 50%;transform-style:preserve-3d;z-index:5;pointer-events:none;will-change:transform}
.turn-sheet[data-direction=previous]{inset:0 50% 0 0;transform-origin:100% 50%}
.turn-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;box-shadow:0 8px 18px #17210c30;background:#ecece1}
.turn-back{transform:rotateY(180deg)}.turn-face>.book-leaf{width:100%;height:100%}
.turn-face:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#17270f00,#17270f33);opacity:var(--shade,0)}
.book-caption{min-height:4.2rem}
.book-caption-content{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.6rem;padding-bottom:.8rem}
.book-caption-content strong{display:block;font:600 1rem/1.35 var(--font-body);color:var(--text)}
.book-caption-content span{display:block;font:400 .8rem/1.5 var(--font-body);color:var(--muted);margin-top:.2rem}
.book-box[data-brand=ahead] .book-caption .book-result{display:none}
.book-caption-action{display:flex;align-items:center;gap:1rem;text-align:right}
.book-caption .book-result{color:var(--text);font-size:1rem;margin:0!important;letter-spacing:0}
.book-caption .book-result small{max-width:10rem;font-size:.68rem;color:var(--muted)}
.book-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.7rem;color:var(--text);min-height:3.5rem;border-top:1px solid var(--line);padding-top:.5rem}
.book-count{font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.book-arrows{display:flex;align-items:center;justify-content:center;gap:.45rem}
.book-controls button{display:grid;place-items:center;min-width:44px;min-height:44px;background:none;color:inherit;cursor:pointer}
.book-arrows button{border:1px solid #5d6752;border-radius:50%;width:44px;height:44px;padding:0}.book-arrows button:disabled{opacity:.3;cursor:default}
.book-controls .book-index-button{justify-self:end;font:500 .8rem var(--font-body);text-decoration:underline;text-underline-offset:.25em}
.book-guide{display:block;margin-top:.65rem;text-align:center;font:.72rem var(--font-body);color:var(--muted);pointer-events:none}
.book-index{position:relative;min-height:29rem;margin-top:3rem;z-index:9;background:var(--bg);padding:.4rem}
.book-index-return{min-height:44px;font:.85rem var(--font-body);text-decoration:underline;text-underline-offset:.25em}
.book-index h2{font-size:1.6rem;margin-bottom:1rem}.book-index-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.book-index-list a{display:flex;align-items:center;gap:.6rem;text-align:left;color:var(--text);font:.85rem var(--font-body);min-height:64px;text-decoration:none}
.book-index-list img{width:4.3rem;height:3rem;object-fit:contain}.book-index a:hover{text-decoration:underline}
.book-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:1100px) and (min-width:601px){
 .studio-home:has(.book-box) .hero-spread{grid-template-columns:1fr;gap:2.5rem}.book-box{width:min(100%,46rem);justify-self:center}
 .studio-home:has(.book-box) .studio-intro{max-width:44rem}.studio-home:has(.book-box) .studio-intro h1 br{display:none}.studio-home:has(.book-box) .studio-intro h1{font-size:5.5rem}
 .book-box h2.book-title{font-size:2.1rem}.book-copy{font-size:.95rem}.book-left:not(.book-photo){padding:1.6rem}.book-folio{font-size:.7rem}
}
@media(max-width:600px){
 .studio-home:has(.book-box) .hero-spread{grid-template-columns:1fr;gap:1.4rem}.studio-home:has(.book-box) .studio-intro h1{font-size:4.5rem}
 .book-box{height:auto;width:100%;overflow:visible}.book-box:not([open]):after{margin:3.2rem .2rem 1.1rem;padding-bottom:10rem}.book-box:not([open]) .box-object{inset:3.2rem .2rem 11.1rem}
 .book-shell{margin:3.2rem .2rem 1.1rem}
 .book-spread{grid-template-columns:1fr}.book-left,.book-spine{display:none!important}
 .book-right .book-image-canvas{left:0;width:100%}
 .turn-sheet,.turn-sheet[data-direction=previous]{inset:0;width:100%}.turn-sheet[data-direction=previous]{transform-origin:100% 50%}
 .book-box[data-brand=ahead] .book-shell{aspect-ratio:4/5}.book-box[data-brand=ahead] .book-caption .book-result{display:block}
 .book-caption-content{gap:.7rem;align-items:flex-start}.book-caption-content strong{font-size:.92rem}.book-caption-content span{font-size:.72rem}
 .book-caption-action{flex-direction:column;align-items:flex-end;gap:0;max-width:48%}
 .book-box .book-link{font-size:.75rem}.book-caption .book-result{font-size:.9rem}
 .book-index-list{grid-template-columns:1fr}.book-box[open] .edition-caption{left:.2rem}.book-box[open] .edition-handle{right:.3rem}
 .book-controls .book-index-button{font-size:.76rem}
}


/* One user-triggered sequence: lift the lid, take out the book, open its cover. */
.book-box button{background:none;border:0;color:inherit;cursor:pointer}
.book-box .book-arrows button{border:1px solid #5d6752}
.book-box a:focus-visible,.book-box button:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.unpack-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;perspective:1600px;z-index:8;--book-x:-50%;--unpack-time:1550ms}
.unpack-base,.unpack-lid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.unpack-base{z-index:3}.unpack-lid{z-index:4}
.unpack-volume{position:absolute;left:50%;top:0;width:50%;height:100%;z-index:2;transform-style:preserve-3d;perspective:1200px}
.unpack-cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d}
.unpack-front,.unpack-back{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.unpack-front{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(90deg,#182018 0,#3f4b36 2%,#242e21 6%,#303b2a 94%,#526147);border-radius:2px 5px 5px 2px;box-shadow:3px 2px 0 #dcdccb,5px 4px 0 #818575,8px 8px 16px #0005}
.unpack-front:before{content:"";position:absolute;inset:0 auto 0 5%;width:1px;background:#58644a;box-shadow:2px 0 4px #141b10}
.unpack-front>img{width:62%;height:auto;filter:drop-shadow(0 1px 1px #111a)}
.unpack-front>span{position:absolute;bottom:9%;left:12%;right:9%;text-align:center;color:#ced8c3;font:500 clamp(.55rem,1.7cqi,.8rem)/1.3 var(--font-body)}
.unpack-back{transform:rotateY(180deg);background:#eeeae0}.unpack-back>.book-leaf{width:100%;height:100%}
.book-box[data-unpacking] .book-surface,.book-box[data-unpacking] .book-shell:before{animation:book-content-arrive 1550ms both}
.book-box[data-unpacking] .unpack-lid{animation:book-lid-lift var(--unpack-time) both}
.book-box[data-unpacking] .unpack-base{animation:book-box-lower var(--unpack-time) both}
.book-box[data-unpacking] .unpack-volume{animation:book-out-of-box var(--unpack-time) both}
.book-box[data-unpacking] .unpack-cover{animation:book-cover-open var(--unpack-time) both}
.book-box[data-unpacking] :is(.book-caption,.book-controls,.book-guide){animation:book-labels-arrive 1550ms both}
@keyframes book-lid-lift{0%{transform:translateY(12.4%);opacity:1}18%{transform:translate(-2%,-5%) rotate(-4deg);opacity:1}50%,100%{transform:translate(9%,-65%) rotate(11deg);opacity:0}}
@keyframes book-box-lower{0%,32%{transform:none;opacity:1}66%,100%{transform:translateY(40%) scale(.82);opacity:0}}
@keyframes book-out-of-box{0%,8%{transform:translate(var(--book-x),42%) scale(.25) rotateX(55deg) rotateZ(-12deg);opacity:0}18%{opacity:1}48%{transform:translate(var(--book-x),-8%) scale(.85) rotateX(8deg) rotateZ(-4deg);opacity:1}68%,100%{transform:none;opacity:1}}
@keyframes book-cover-open{0%,60%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}
@keyframes book-content-arrive{0%,62%{opacity:0}74%,100%{opacity:1}}
@keyframes book-labels-arrive{0%,76%{opacity:0}100%{opacity:1}}
@media(max-width:600px){.unpack-scene{--book-x:0%}.unpack-volume{left:0;width:100%}.unpack-front>img{width:48%}.unpack-front>span{bottom:12%;font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.book-box .box-lid{transition:none}.book-box[data-unpacking] *{animation:none!important}.unpack-scene{display:none}}
