@font-face{font-family:"Klee One";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/KleeOne-SemiBold.ttf") format("truetype")}
body.opening-active{overflow:hidden;background:var(--bg,#10231f)}
body.opening-active>:not(#opening):not(script){visibility:hidden}
#opening[hidden]{display:none}
#opening{--opening-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));position:fixed;inset:0;z-index:2000;overflow:hidden;overscroll-behavior:none;touch-action:pan-y;background:var(--bg,#10231f);padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));color:#4c2d1d;color-scheme:light;box-sizing:border-box}
.opening-paper{--opening-size:clamp(17px,4.35vw,22px);position:relative;isolation:isolate;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:10px;width:min(100%,510px);height:min(900px,var(--opening-height));min-height:0;margin:0 auto;padding:24px clamp(12px,3vw,18px) 82px;background:#f5dfb5 url("opening/parchment.svg") center/100% 100%;color:#4c2d1d;box-shadow:0 3px 16px #6b4a2b42;mask-image:url("opening/paper-silhouette.svg");mask-size:100% 100%;-webkit-mask-image:url("opening/paper-silhouette.svg");-webkit-mask-size:100% 100%;outline:none;transform-origin:left center}
/* Nine-slice uses only the reference's blank outer rim, never its text or art.
   No `fill`: the reference's centre is not painted into the page. */
.opening-paper::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-style:solid;border-width:25px 18px 22px;border-image-source:url("opening/page-reference.jpeg");border-image-slice:70 18 20 28;border-image-repeat:stretch;mix-blend-mode:luminosity;opacity:.82;mask-image:linear-gradient(to bottom,#000 9px,transparent 25px),linear-gradient(to top,#000 7px,transparent 22px),linear-gradient(to right,#000 5px,transparent 18px),linear-gradient(to left,#000 5px,transparent 18px);mask-composite:add;-webkit-mask-image:linear-gradient(to bottom,#000 9px,transparent 25px),linear-gradient(to top,#000 7px,transparent 22px),linear-gradient(to right,#000 5px,transparent 18px),linear-gradient(to left,#000 5px,transparent 18px);-webkit-mask-composite:source-over}
.opening-copy,.opening-name-form{font-family:"Klee One",cursive;font-weight:600;font-size:var(--opening-size);line-height:1.65;letter-spacing:.015em;flex-shrink:0}
.opening-copy{padding-inline:clamp(12px,3vw,18px)}
.opening-copy p{font:inherit;line-height:inherit;color:inherit;white-space:pre-line;overflow-wrap:anywhere;margin:0}
.opening-copy p+p{margin-top:.4em}
/* Sampled from each adopted illustration's empty paper margin. Keep the art's
   colours intact: multiplying the JPEG also multiplied its opaque paper. */
.opening-page-1{--opening-paper:#f5daae}
.opening-page-2{--opening-paper:#f2d5a9}
.opening-page-3{--opening-paper:#f7d5a5}
.opening-page-4{--opening-paper:#f8d097}
.opening-page-5{--opening-paper:#fbd199}
.opening-page-6{--opening-paper:#fccd92}
.opening-paper{background-color:var(--opening-paper,#f5daae);background-image:url("opening/parchment.svg?v=0.20.1");background-blend-mode:soft-light}
.opening-illustration{display:block;width:min(100%,max(120px,calc((var(--opening-height) - 365px)*1.5)));height:auto;aspect-ratio:3/2;object-fit:contain;flex:none;align-self:center;mask-image:url("opening/frame-mask.svg");mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url("opening/frame-mask.svg");-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.opening-page-4 .opening-illustration{margin-top:auto}
.opening-page-6 .opening-illustration{margin-top:auto}
.opening-folio{position:absolute;bottom:12px;width:94px;height:77px;pointer-events:none}
.opening-folio-right{right:17px}.opening-folio-left{left:17px}
.opening-stamp{display:block;width:100%;height:100%;overflow:visible}
.opening-stamp-digit{fill:var(--opening-paper,#f5daae)}
.opening-naming{justify-content:center}
.opening-name-form{display:flex;flex-direction:column;gap:25px;align-items:stretch}
.opening-name-form input{font:inherit;border:0;border-bottom:1px solid #886444;border-radius:0;padding:10px 2px;min-width:0;background:transparent;color:#4c2d1d;box-shadow:none;outline-offset:5px}
.opening-name-form button{font:inherit;min-height:44px;padding:8px;border:0;border-radius:0;color:#4c2d1d;background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:5px}
.opening-name-form p{margin:0;font-size:.85em;color:#853e29}
.opening-name-form p:empty{display:none}
.opening-access{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.opening-access:focus-visible{position:fixed;z-index:2001;bottom:12px;left:20px;width:auto;height:auto;clip-path:none;padding:10px;background:#f5dfb5;color:#4c2d1d}
.opening-access+.opening-access:focus-visible{left:auto;right:20px}
.opening-turn-next::after,.opening-turn-prev::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 75%,#b68b4d24 94%,#fff0ce80);animation:opening-curl .34s ease-out both}
.opening-turn-prev::after{transform:scaleX(-1)}
@keyframes opening-curl{from{opacity:1}to{opacity:0}}
@media(min-width:600px){#opening{--opening-height:calc(100dvh - 32px);padding:16px}}
@media(max-height:740px){.opening-copy{line-height:1.45}}
@media(max-height:640px){.opening-copy{line-height:1.35}}
@media(max-height:580px){.opening-paper{gap:6px;padding-top:16px;padding-bottom:72px}.opening-copy{line-height:1.25}.opening-folio{width:82px;height:67px;bottom:7px}}
@media(orientation:landscape) and (max-height:480px){.opening-paper{--opening-size:clamp(12px,3.5dvh,17px);padding-top:12px;padding-bottom:58px;gap:4px}.opening-copy{line-height:1.2}.opening-folio{width:68px;height:56px;bottom:4px}}
@media(prefers-reduced-motion:reduce){.opening-turn-next::after,.opening-turn-prev::after{animation:none;display:none}}