/* "Close the book": end-of-guestbook prompt + a closing notebook (same kraft cover as the home page).
   The last page, so it mirrors the home opening: the back cover lies open on the right and folds right-to-left, spine on the right. */
.gb-end{margin:0 auto clamp(70px,9vw,120px);padding:clamp(34px,5vw,56px) clamp(22px,4vw,48px);max-width:720px;text-align:center;border:1.5px dashed var(--rule);background:var(--paper-2)}
.gb-end .hand{margin:10px 0 22px;color:var(--ink-2)}
.gb-end .btn{margin-inline:auto}
.gb-close-after{margin-top:14px}

.gbc{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:24px 16px;background:var(--paper);color:var(--ink);overflow:hidden;display:none;opacity:0;transition:opacity .3s ease}
.gbc[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4vh,36px)}
.gbc.on{opacity:1}
.gbc::backdrop{background:transparent}
.gbc-stage{perspective:2200px}
.gbc-book{position:relative;width:min(84vw,400px,calc((100svh - 190px)*.75));aspect-ratio:3/4;transform-style:preserve-3d;transform:translateX(-50%);transition:transform 1.1s cubic-bezier(.65,.02,.22,1)}
.gbc-page{position:absolute;inset:0;background-color:var(--card);border-radius:10px 3px 3px 10px;box-shadow:0 40px 80px -30px rgba(40,25,10,.55);padding:14% 12%;display:flex;align-items:flex-end}
.gbc-page .hand{margin:0;color:var(--ink-2)}
.gbc-cover{position:absolute;inset:0;transform-origin:right center;transform-style:preserve-3d;transform:rotateY(168deg);transition:transform 1.1s cubic-bezier(.65,.02,.22,1);z-index:2}
.gbc-front,.gbc-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px 3px 3px 12px}
.gbc-front{background:radial-gradient(120% 90% at 70% 20%,#c09a6c,#a17a4d 55%,#8a6439);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset -14px 0 18px -10px rgba(0,0,0,.35),0 40px 80px -30px rgba(40,25,10,.6);display:flex;flex-direction:column;justify-content:space-between;padding:11% 11% 9% 20%;color:#2a1d10}
.gbc-back{transform:rotateY(180deg);background:#d9bd8f;border-radius:3px 12px 12px 3px;box-shadow:inset 10px 0 20px -10px rgba(0,0,0,.25)}
.gbc-label{background:#f6f0e2;padding:18px 20px 16px;box-shadow:0 2px 6px rgba(0,0,0,.2);transform:rotate(-1.5deg);text-align:left}
.gbc-label .label{color:#7a6448;margin:0 0 10px}
.gbc-label h2{font:400 clamp(24px,3.4vw,34px)/1.02 var(--serif);margin:0;outline:none}
.gbc-label h2 i{display:block;margin-top:8px}
.gbc-label .hand{margin:14px 0 0;font-size:clamp(22px,2.4vw,27px);color:#6f5034}
.gbc-front>.label{color:#3a2a17;margin:0}
.gbc-band{position:absolute;top:0;bottom:0;left:7%;width:14px;background:linear-gradient(90deg,#1b1714,#3a332d 50%,#1b1714);box-shadow:-2px 0 4px rgba(0,0,0,.3);z-index:3;opacity:0;transform:translateX(-60px) rotate(-8deg);transition:transform .5s var(--ease),opacity .35s}
.gbc-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;opacity:0;transition:opacity .4s ease}
.gbc-actions .btn{background:var(--card)}.gbc-actions .btn.solid{background:var(--ink)}

.gbc.shut .gbc-book{transform:none}
.gbc.shut .gbc-cover{transform:none;transition-delay:.2s}
/* Faces swap at the fold midpoint too, so engines that ignore backface-visibility still show the right side. */
.gbc-front{opacity:0;transition:opacity 0s .5s}.gbc-back{transition:opacity 0s .5s}
.gbc.shut .gbc-front{opacity:1;transition-delay:.72s}.gbc.shut .gbc-back{opacity:0;transition-delay:.72s}
.gbc.shut .gbc-band{opacity:1;transform:none;transition-delay:1.2s}
.gbc.shut .gbc-actions{opacity:1;transition-delay:1.3s}

@media(max-width:640px){
  .gbc-book{transform:translateX(-27%) scale(.54)}
  .gbc-label{padding:14px 14px 12px}
  .gbc-label h2{font-size:22px}
  .gbc-label .hand{font-size:22px}
}
/* Reduced motion: no fold, the cover fades in over the page. Specificity beats the page's * reset. */
@media(prefers-reduced-motion:reduce) and (max-width:0px){
  .gbc .gbc-book,.gbc.shut .gbc-book{transform:none;transition:none!important}
  .gbc .gbc-cover{transform:none;opacity:0;transition:opacity .4s ease!important}
  .gbc.shut .gbc-cover{opacity:1}
  .gbc .gbc-band{transform:none;transition:opacity .4s ease!important}
  .gbc.gbc .gbc-actions,.gbc.gbc{transition:opacity .4s ease!important}
  .gbc.shut .gbc-band,.gbc.shut .gbc-actions{transition-delay:0s!important}
}