/* A single left-hinged keepsake, unique to The Woven Garden. */
.opening .keepsake-book-stage{position:absolute;top:0;left:0;right:0;height:var(--scene-height,100svh);z-index:12;perspective:1800px;perspective-origin:100% 50%;transform-style:flat;pointer-events:none;isolation:isolate}
.keepsake-cover{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;pointer-events:none;transform:rotateY(0deg);will-change:auto}
.is-opening .keepsake-cover{will-change:transform}
.keepsake-cover-face,.keepsake-cover-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:0 9px 9px 0;overflow:hidden}
.keepsake-cover-face{background:#53603d url('assets/keepsake-book-cover.webp') center/100% 100% no-repeat;box-shadow:inset -4px 0 0 #d9c798,8px 2px 24px #38492d35;transform:translateZ(2px)}
.keepsake-cover-face:after{content:"";position:absolute;inset:0;border:1px solid #fff6d83b;border-left:0;border-radius:inherit;pointer-events:none}
.keepsake-spine{position:absolute;inset:0 auto 0 0;width:17px;background:linear-gradient(90deg,#354d2c6b,#aab69a18 35%,#2d41284d 67%,#cbceb526 88%,transparent);box-shadow:3px 0 7px #273c2024;pointer-events:none;z-index:1}
.keepsake-cover-back{background:linear-gradient(90deg,#a2ad922c,transparent 20%),repeating-linear-gradient(0deg,#f4eddf,#f4eddf 3px,#f0eadb 4px);box-shadow:inset 0 0 0 2px #b3a482;transform:rotateY(180deg) translateZ(2px);display:grid;place-items:center;color:#7b8062;font:italic 30px/1.4 Garden,Georgia,serif}
.keepsake-cover-back span{display:block;padding:35px;text-align:center}
/* Some WebKit compositors paint a mirrored rear leaf despite backface:hidden.
   The existing hinge clock selects its visible face once it crosses 90deg. */
.keepsake-cover-back{visibility:hidden}
.keepsake-cover.is-back-facing .keepsake-cover-face{visibility:hidden}
.keepsake-cover.is-back-facing .keepsake-cover-back{visibility:inherit}
.keepsake-page-shadow{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,#263c2e85 0%,#4f593d38 24%,transparent 72%);transform-origin:0 50%}
.book-cover-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,#21371e70 0%,#fff9df5c 70%,#fffbdfbb);opacity:0}
.opening .book-open{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:22% 18% 20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:none;border:0;border-radius:0;color:#fff3d7;text-align:center;font-family:Garden,Georgia,serif;cursor:pointer;pointer-events:auto;transform:none;filter:none;text-shadow:0 2px 5px #23301d88}
.book-open:focus-visible{outline:3px solid #f4deb0;outline-offset:-12px}
.book-open:disabled{cursor:default;color:#fff3d7;opacity:1}
.book-cover-kicker{font:9px/1.5 Georgia,serif;letter-spacing:2.1px;text-transform:uppercase;max-width:190px;margin-bottom:21px}
.book-cover-initials{font:italic clamp(28px,9vw,46px)/1.2 Garden,Georgia,serif;letter-spacing:-1px;margin-bottom:22px;color:#e8cc92}
.book-cover-title{font:clamp(37px,10.8vw,64px)/.98 Garden,Georgia,serif;letter-spacing:-1.2px}
.book-cover-title em{font-weight:400}
.book-cover-rule{width:43px;height:1px;background:#e0c58a99;margin:24px 0 21px}
.book-cover-hint{font:12px/1.5 Georgia,serif;letter-spacing:.3px;white-space:nowrap}
.book-cover-hint>span{font-size:18px;margin-left:7px}
.opening-finished .keepsake-book-stage{display:none}
@container woven (min-width: 540px) {.opening .book-open{padding-left:24%;padding-right:24%}.book-cover-kicker{font-size:11px;max-width:240px}.book-cover-hint{font-size:14px}.book-cover-title{font-size:65px}}
@media(max-height:620px){.opening .book-open{padding:15% 20%}.book-cover-kicker{margin-bottom:12px;font-size:8px}.book-cover-initials{margin-bottom:12px;font-size:30px}.book-cover-title{font-size:40px}.book-cover-rule{margin:15px 0}.book-cover-hint{font-size:11px}}
@media(max-height:430px){.book-cover-kicker{margin-bottom:7px}.book-cover-initials{margin-bottom:7px;font-size:25px}.book-cover-title{font-size:34px}.book-cover-rule{margin:9px 0}.book-cover-hint{font-size:10px}.opening .book-open{padding:8% 26%}}
@media print{.opening .keepsake-book-stage{display:none!important}}

/* Programmatic focus marks arrival without framing the whole stationery in black. */
.opening #hero-copy:focus{outline:none}

/* A small leftward hand gesture explains the book's actual interaction. */
.opening .book-open{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.book-cover-gesture{display:block;width:90px;height:38px;margin:0 0 9px;opacity:.9;pointer-events:none}
.book-cover-gesture svg{display:block;width:100%;height:100%;overflow:visible;stroke:#f4dfb4;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.gesture-track{stroke-dasharray:2 4;opacity:.8}
.gesture-hand{fill:#68734d;animation:book-swipe-hint 3.2s ease-in-out infinite;animation-play-state:paused}
.book-gesture-running .gesture-hand{animation-play-state:running}
.book-cover-tap{font:10px/1.5 Georgia,serif;letter-spacing:.3px;opacity:.8;margin-top:7px}
@keyframes book-swipe-hint{0%,14%{transform:translateX(12px);opacity:.65}24%{opacity:1}66%{transform:translateX(-22px);opacity:1}82%{transform:translateX(-22px);opacity:.25}100%{transform:translateX(12px);opacity:.65}}
@media(max-height:620px){.book-cover-gesture{width:76px;height:32px;margin-bottom:6px}.book-cover-rule{margin:14px 0}.book-cover-tap{margin-top:5px}}
@media(max-height:430px){.book-cover-gesture{width:66px;height:25px;margin-bottom:4px}.book-cover-tap{font-size:9px;margin-top:3px}.book-cover-rule{margin:7px 0}}
@media(prefers-reduced-motion:reduce){.gesture-hand{animation:none;transform:none;opacity:1}}