/* Shared physical pages. This file does not position the floating editor. */
.booklet-page{--booklet-ratio:1.48;position:relative;isolation:isolate;display:block;width:100%;min-width:0;aspect-ratio:var(--booklet-ratio);box-sizing:border-box;margin:0;overflow:hidden;border:1px solid #d5c9ad;border-radius:3px;background:var(--paper,#fffaf0);color:var(--text-ink,#344737);box-shadow:0 10px 25px #30291d16,1px 2px 0 #d4cab5;text-align:left}
.booklet-page.booklet-format-square{--booklet-ratio:1}
.booklet-page.booklet-format-portrait{--booklet-ratio:.72}
.booklet-page:not(.booklet-page-cover)::before{content:"";position:absolute;inset:8px;border:1px solid #b9a27830;pointer-events:none;z-index:2}
.booklet-cover{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:var(--booklet-ratio)}
.booklet-cover>.miniature[data-styled]{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;max-width:none;aspect-ratio:var(--booklet-ratio);margin:0;transform:none!important;box-shadow:none}
.booklet-media-frame{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;min-width:0;min-height:0;margin:0;padding:15px 15px 9px;background:var(--paper,#fffaf0)}
.booklet-media-frame>.booklet-video{display:block;flex:1;min-width:0;min-height:0;width:100%;height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border:0;border-radius:1px;background:transparent}
.booklet-media-frame>.booklet-video{background:#17251c;touch-action:manipulation}
.booklet-page-caption{flex:none;margin:6px 0 0;padding:0;font:11px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.02em;text-align:center;color:#4d5b49}
.booklet-media-pending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:22px;text-align:center;background:linear-gradient(145deg,#fffdf6,#f0e9da)}
.booklet-media-pending p{margin:0;font:24px/1.2 var(--serif,Georgia,serif);color:#53604e}
.booklet-media-pending small{max-width:240px;font:12px/1.5 var(--sans,Arial,sans-serif);color:#53604e}
.booklet-pending-mark{display:block;width:27px;height:22px;border:1px solid #bca781;border-radius:2px;background:#fffaf0;box-shadow:3px 3px 0 #e4dac5}
.booklet-message-scroll{position:absolute;inset:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding:clamp(20px,5%,38px);scrollbar-width:thin;scrollbar-color:#bda983 transparent;scroll-padding-block:15px;outline-offset:-5px}
.booklet-greeting{margin:0 0 16px;font:clamp(17px,1.5em,25px)/1.2 var(--cardfont,var(--serif,Georgia,serif));color:var(--letter-accent,#9d7846);overflow-wrap:anywhere}
.booklet-message-copy{margin:0;font-family:var(--bodyfont,var(--sans,Arial,sans-serif));font-size:var(--body-size,14px);font-weight:400;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;color:var(--text-ink,#344737)}
.booklet-signature{margin:22px 0 0;font:clamp(20px,1.7em,29px)/1.2 var(--cardfont,var(--serif,Georgia,serif));color:var(--letter-accent,#9d7846);text-align:right;overflow-wrap:anywhere}
@media(max-width:560px){.booklet-message-scroll{padding:20px}.booklet-media-frame{padding:12px 12px 8px}.booklet-page:not(.booklet-page-cover)::before{inset:6px}}
@media(prefers-reduced-motion:reduce){.booklet-page,.booklet-page *{scroll-behavior:auto;animation:none!important;transition:none!important}}
.reduced-motion .booklet-page,.reduced-motion .booklet-page *{scroll-behavior:auto;animation:none!important;transition:none!important}

.booklet-photo-window{display:block;position:relative;flex:1;min-width:0;min-height:0;width:100%;height:0;overflow:hidden;border-radius:1px;background:transparent}
.booklet-photo-window>.booklet-photo{display:block;box-sizing:content-box;margin:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;image-orientation:from-image;object-fit:var(--booklet-photo-fit,contain);object-position:var(--booklet-photo-x,50%) var(--booklet-photo-y,50%);transform:scale(var(--booklet-photo-zoom,1));transform-origin:var(--booklet-photo-x,50%) var(--booklet-photo-y,50%);border:0;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}

/* The photo viewport keeps the same proportions in every rendering scale. */
.booklet-media-frame.booklet-photo-frame{display:block;padding:0;container-type:size}
.booklet-photo-frame>.booklet-photo-window{position:absolute;left:50%;top:4%;width:min(92cqw,calc(86cqh * var(--booklet-photo-frame-ratio,1.583255814)));height:min(86cqh,calc(92cqw / var(--booklet-photo-frame-ratio,1.583255814)));transform:translateX(-50%);flex:none}
.booklet-photo-frame>.booklet-page-caption{position:absolute;inset:90% 4% 0;display:grid;place-items:center;margin:0;padding:0;overflow:hidden}