@font-face{font-family:Cinzel;src:url("assets/fonts/cinzel-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Cinzel;src:url("assets/fonts/cinzel-semibold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("assets/fonts/cormorant-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("assets/fonts/cormorant-medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("assets/fonts/cormorant-semibold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("assets/fonts/cormorant-italic.ttf") format("truetype");font-style:italic;font-display:swap}
@font-face{font-family:Allura;src:url("assets/fonts/allura.ttf") format("truetype");font-display:swap}

:root{
  --ink:#3f2a1c;
  --ink-soft:#6d4d32;
  --paper:#dec28d;
  --paper-light:#f1d8a7;
  --gold:#c89b4b;
  --light-gold:#f0d28a;
  --deep-gold:#79511f;
  --cover-filter:none;
  --theme-blue:#173f67;
  --theme-middle:#bd8b38;
  --theme-green:#3f6748;
  --cover-duration:1050ms;
  --turn-duration:760ms;
  --face-swap-delay:260ms;
  --cover-ease:cubic-bezier(.22,.61,.18,1);
  --turn-ease:cubic-bezier(.45,.02,.18,1);
}

html[data-theme="girl"]{
  --gold:#d3a07a;
  --light-gold:#f3d1b7;
  --deep-gold:#8e5b50;
  --paper:#e8c6ae;
  --paper-light:#f6ddc8;
  --cover-filter:hue-rotate(72deg) saturate(.62) brightness(1.04);
  --theme-blue:#7b4c5c;
}

html[data-theme="classic"]{
  --gold:#c79b48;
  --light-gold:#e8ca7d;
  --deep-gold:#70531f;
  --paper:#d4b678;
  --paper-light:#ead29e;
  --cover-filter:hue-rotate(222deg) saturate(.72) brightness(.82);
  --theme-blue:#274b3a;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#130d09}
body{display:grid;place-items:center;font-family:"Cormorant Garamond",Georgia,serif;color:#f3ddaa}
button{font:inherit}
button:focus-visible{outline:3px solid #fff1ad;outline-offset:3px}

.storybook-scene{
  position:relative;
  width:100vw;
  height:100dvh;
  min-width:320px;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#21150f url("assets/storybook-tabletop.png") center/cover no-repeat;
}

.storybook-scene::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  box-shadow:inset 0 0 clamp(36px,5vw,92px) #080504b8;
}

.dust-field{position:absolute;inset:0;z-index:24;pointer-events:none;overflow:hidden}
.dust-field i{position:absolute;width:max(1px,.11vw);height:max(1px,.11vw);border-radius:50%;background:#f7d584;box-shadow:0 0 .5vw #f0bd5a;opacity:0;animation:dustRise var(--duration) linear infinite}
@keyframes dustRise{0%{translate:0 4vh;opacity:0}18%{opacity:.62}80%{opacity:.16}100%{translate:var(--drift) -16vh;opacity:0}}

.book-stage{
  position:absolute;
  z-index:6;
  top:3.2%;
  left:50%;
  width:min(94vw,calc(78dvh * 1.58));
  aspect-ratio:1.58/1;
  translate:-50% 0;
  perspective:2400px;
  perspective-origin:50% 44%;
}

.book-volume{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:translateX(-25%);
  transition:transform var(--cover-duration) var(--cover-ease);
  touch-action:pan-y;
}

.book-volume[data-state="opening"],
.book-volume[data-state="open"],
.book-volume[data-state="turning"]{transform:translateX(0)}
.book-volume[data-state="closing"]{transform:translateX(-25%)}
.book-volume.is-syncing,.book-volume.is-syncing *{transition:none!important;animation:none!important}
.book-volume.is-riffling{--turn-duration:86ms;--face-swap-delay:29ms}
.book-volume.is-riffling .book-leaf.is-active-turn,
.book-volume.is-riffling .mobile-sheet.is-active-turn{filter:drop-shadow(-.35vw .12vw .45vw #160b0666)}

.back-cover-board{
  position:absolute;
  z-index:0;
  inset:1.3% -1.1% -3.1%;
  border-radius:2.3% 2.3% 2.8% 2.8%;
  background:#0d263b url("assets/blank-blue-cover.png") center/108% 112% no-repeat;
  filter:var(--cover-filter);
  box-shadow:0 .62vw 0 #825724,0 1.15vw 1.65vw #000c;
  opacity:0;
  transition:opacity 260ms ease 120ms;
}

.book-page-block{
  position:absolute;
  z-index:1;
  inset:.6% -.25% -.1%;
  border-radius:2.6%;
  background:#ba8e51 url("assets/parchment-texture.png") center/cover;
  box-shadow:-.22vw .28vw 0 #d3ae70,.22vw .28vw 0 #d3ae70,-.45vw .55vw 0 #6c4928,.45vw .55vw 0 #6c4928;
  opacity:0;
  transition:opacity 240ms ease 150ms;
}

.book-volume[data-state="opening"] .back-cover-board,
.book-volume[data-state="opening"] .book-page-block,
.book-volume[data-state="open"] .back-cover-board,
.book-volume[data-state="open"] .book-page-block,
.book-volume[data-state="turning"] .back-cover-board,
.book-volume[data-state="turning"] .book-page-block,
.book-volume[data-state="closing"] .back-cover-board,
.book-volume[data-state="closing"] .book-page-block{opacity:1}

.desktop-page-system{
  position:absolute;
  z-index:3;
  inset:0;
  transform-style:preserve-3d;
  opacity:0;
  transition:opacity 300ms ease 180ms;
}

.book-volume[data-state="opening"] .desktop-page-system,
.book-volume[data-state="open"] .desktop-page-system,
.book-volume[data-state="turning"] .desktop-page-system,
.book-volume[data-state="closing"] .desktop-page-system{opacity:1}
.book-volume[data-state="closed"] .desktop-page-system,
.book-volume[data-state="closed"] .mobile-page-system{visibility:hidden}

.base-page,.leaf-face,.sheet-face{
  position:absolute;
  top:0;
  height:100%;
  overflow:hidden;
  color:var(--ink);
  background-color:var(--paper);
  background-image:url("assets/parchment-texture.png");
  background-size:cover;
  box-shadow:inset 0 0 2.1vw #71441f50;
}
.memory-page[aria-hidden="true"]:not(.is-turn-surface){content-visibility:hidden;contain-intrinsic-size:auto 100%}

.base-page::before,.leaf-face::before,.sheet-face::before{
  content:"";
  position:absolute;
  z-index:5;
  inset:3.2%;
  background:url("assets/parchment-border.png") center/100% 100% no-repeat;
  pointer-events:none;
}

.base-page-left,.page-left{
  left:0;
  width:50.15%;
  border-radius:3.5% .6% 1.3% 3.5%;
  background-position:left center;
  clip-path:polygon(1.2% 1%,4% .3%,10% 1.2%,18% .2%,26% .9%,38% .1%,49% .7%,61% .1%,72% .8%,84% .2%,96% .9%,99.7% 2%,99.5% 97%,96% 99%,87% 98.7%,76% 99.6%,65% 98.8%,55% 99.5%,44% 98.7%,33% 99.5%,23% 98.9%,12% 99.5%,3% 98%,.5% 93%);
}

.page-right{
  right:0;
  width:100%;
  border-radius:.6% 3.5% 3.5% 1.3%;
  background-position:right center;
  clip-path:polygon(.3% 2%,4% .8%,14% .2%,24% .9%,35% .1%,45% .8%,56% .1%,67% .9%,78% .2%,89% 1.2%,97% .4%,99.5% 3%,99.8% 94%,97% 98.5%,88% 99.2%,78% 98.6%,68% 99.5%,57% 98.8%,47% 99.4%,36% 98.7%,25% 99.5%,14% 98.8%,4% 99.3%,.5% 97%);
}

.desktop-leaf-stack{position:absolute;inset:0;z-index:4;transform-style:preserve-3d}
.book-leaf{
  position:absolute;
  top:0;
  left:50%;
  width:50.15%;
  height:100%;
  transform:translateZ(2px) rotateY(0deg);
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform var(--turn-duration) var(--turn-ease);
}
.book-leaf:not(.is-render-window):not(.is-active-turn),
.mobile-sheet:not(.is-render-window):not(.is-active-turn){visibility:hidden}
.book-leaf.is-turned{transform:translateZ(2px) rotateY(-180deg)}
.book-leaf.is-active-turn{will-change:transform;filter:drop-shadow(-1.1vw .3vw 1.25vw #160b06a8)}
.leaf-face{
  inset:0;
  width:100%;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  transition:opacity 0s linear var(--face-swap-delay);
  pointer-events:none;
}
.memory-page[aria-hidden="false"]{pointer-events:auto}
.leaf-front{opacity:1}
.leaf-back{transform:rotateY(180deg);opacity:0}
.book-leaf.is-turned .leaf-front{opacity:0}
.book-leaf.is-turned .leaf-back{opacity:1}

.book-gutter{
  position:absolute;
  z-index:95;
  top:1%;bottom:1%;left:50%;width:3.2%;
  translate:-50% 0;
  pointer-events:none;
  box-shadow:inset .62vw 0 .78vw -.62vw #3a1d0fa8,inset -.62vw 0 .78vw -.62vw #3a1d0fa8;
}

.blue-ribbon{
  position:absolute;
  z-index:96;
  left:48%;
  bottom:-16%;
  width:4%;
  height:22%;
  background:#173f67 url("assets/blank-blue-cover.png") 12% 30%/900% 420% no-repeat;
  filter:brightness(1.15);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  box-shadow:.18vw .18vw .35vw #0007;
  transform-origin:top;
  animation:ribbonSway 4.8s ease-in-out infinite;
}
@keyframes ribbonSway{50%{rotate:1.25deg}}

.mobile-page-system{display:none}

.front-cover{
  position:absolute;
  z-index:120;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  transform:translateZ(24px) rotateY(0deg);
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform var(--cover-duration) var(--cover-ease);
}

.book-volume[data-state="opening"] .front-cover,
.book-volume[data-state="open"] .front-cover,
.book-volume[data-state="turning"] .front-cover{transform:translateZ(-12px) rotateY(-180deg)}
.book-volume[data-state="closing"] .front-cover{transform:translateZ(24px) rotateY(0deg)}
.book-volume[data-state="open"] .front-cover,.book-volume[data-state="turning"] .front-cover{z-index:0;pointer-events:none}
.book-volume.cover-is-moving .front-cover{will-change:transform}

.cover-side{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:2.8% 4.4% 4.4% 2.8%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 1.5vw #000a,0 .85vw 1.35vw #000b;
}

.cover-front{
  background:#0b2742 url("assets/blank-blue-cover.png") center/113% 113% no-repeat;
  filter:var(--cover-filter);
}

.cover-front::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:4%;right:-1.2%;bottom:-1.2%;height:4.4%;
  border-radius:0 0 .7vw .35vw;
  background:#c09756 url("assets/parchment-texture.png") center/cover;
  box-shadow:0 .42vw 0 #1c130d,0 .72vw .9vw #000b;
}

.cover-inside{
  transform:rotateY(180deg);
  background:#dec18b url("assets/parchment-texture.png") center/cover;
  filter:none;
  color:var(--ink);
  box-shadow:inset 0 0 2.2vw #6f432063,0 .85vw 1.35vw #000a;
}

.inside-cover-paper{
  position:absolute;
  inset:8%;
  display:grid;
  place-content:center;
  gap:6%;
  padding:12%;
  text-align:center;
  background:url("assets/parchment-border.png") center/100% 100% no-repeat;
}
.inside-cover-paper p{margin:0;font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(10px,1vw,18px)}
.inside-cover-paper blockquote{margin:0;font-family:Allura,"Segoe Script",cursive;font-size:clamp(24px,2.25vw,42px);line-height:1.16}
.inside-cover-paper span{font-style:italic;font-size:clamp(10px,1vw,18px)}

.cover-copy{
  position:absolute;
  z-index:4;
  inset:8.2% 9% 6.6% 17%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transform:translateZ(2px);
  pointer-events:auto;
}

.cover-copy h1{
  margin:0;
  width:100%;
  color:var(--light-gold);
  font-family:Cinzel,serif;
  font-weight:500;
  text-transform:uppercase;
  line-height:.96;
  letter-spacing:.045em;
  text-shadow:0 .08em 0 #4c2b0d,0 .13em .12em #000;
  font-size:clamp(16px,1.75vw,31px);
}
.cover-copy h1 span,.cover-copy h1 small{display:block;font-size:.48em;line-height:1.3;letter-spacing:.11em}
.cover-copy h1 strong{display:block;font-size:2.05em;font-weight:500;line-height:.88;margin-top:.03em}

.cover-portrait{
  position:relative;
  width:43%;
  aspect-ratio:3/4;
  margin:3.5% 0 2.5%;
  padding:.45vw;
  border:.18vw solid #d6b166;
  outline:.12vw solid #6f461b;
  outline-offset:.22vw;
  border-radius:48% 48% 44% 44%;
  background:#091a27;
  box-shadow:0 .45vw .75vw #0009,inset 0 0 .45vw #edc66f;
}
.cover-portrait::before,.cover-portrait::after{content:"";position:absolute;inset:-.55vw;border:.08vw solid #b98a42;border-radius:50%;pointer-events:none}
.cover-portrait::after{inset:-.9vw;border-color:#6f481f66}
.cover-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;border-radius:47% 47% 42% 42%;filter:sepia(.08) saturate(.9) contrast(1.03)}

.cover-copy>p{font-size:clamp(11px,1.17vw,21px);font-style:italic;color:#f0cf81;margin:.8% 0 2.7%;letter-spacing:.025em}
/* The old chapter tabs lived on top of the portrait. They are intentionally
   retired: Jackson's cover stays unobstructed and the family books live beside it. */
.cover-action-overlay,.story-tabs{display:none!important}
.cover-instruction{margin-top:clamp(8px,1.4vh,14px);font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.08em;color:#caa75f;font-size:clamp(7px,.58vw,10px);opacity:.9}

/* Closed-cover lobby -------------------------------------------------------
   These controls are siblings of the physical book, never children of its
   cover. JavaScript adds is-cover-closed only after the closing motion ends. */
.closed-book-actions,
.companion-library{
  position:absolute;
  z-index:36;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 220ms ease,transform 320ms var(--cover-ease),visibility 0s linear 320ms;
}
.closed-book-actions{
  left:50%;
  bottom:2.2%;
  width:min(34vw,430px);
  display:grid;
  justify-items:center;
  gap:clamp(4px,.6vh,8px);
  transform:translate(-50%,14px);
  text-align:center;
}
.storybook-scene.is-cover-closed .closed-book-actions,
.storybook-scene.is-cover-closed .companion-library{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:80ms,80ms,0s;
}
.storybook-scene.is-reading .closed-book-actions,
.storybook-scene.is-reading .companion-library{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,0s,220ms}
.storybook-scene.is-cover-closed .closed-book-actions{transform:translate(-50%,0)}
.begin-story-button{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:clamp(50px,6.8vh,66px);
  display:grid;
  grid-template-columns:clamp(26px,2.4vw,38px) 1fr clamp(26px,2.4vw,38px);
  align-items:center;
  gap:clamp(7px,.75vw,12px);
  padding:.68em 1.15em;
  border:2px solid #c6994c;
  outline:1px solid #553417;
  outline-offset:4px;
  border-radius:5px 5px 9px 9px;
  background:
    linear-gradient(100deg,#ffffff0b,#ffffff00 38%,#00000024),
    #0c2b48 url("assets/blank-blue-cover.png") center/135% 185% no-repeat;
  color:#f3d68d;
  box-shadow:inset 0 0 0 2px #0a1822,inset 0 0 1.3rem #000a,0 8px 18px #000a;
  cursor:pointer;
  font:500 clamp(14px,1.22vw,20px)/1.08 Cinzel,serif;
  letter-spacing:.045em;
  text-shadow:0 2px 2px #000;
  transition:transform 180ms ease,filter 180ms ease,box-shadow 180ms ease;
}
.begin-story-button::after{
  content:"✦";
  grid-column:3;
  color:#ddb861;
  font-size:1.05em;
  opacity:.78;
}
.begin-story-button img{
  grid-column:1;
  width:72%;
  justify-self:center;
  filter:invert(78%) sepia(69%) saturate(481%) hue-rotate(355deg) brightness(100%);
}
.begin-story-button span{grid-column:2;white-space:nowrap}
.begin-story-button:hover,.begin-story-button:focus-visible{
  transform:translateY(-3px) scale(1.015);
  filter:brightness(1.16);
  box-shadow:inset 0 0 0 2px #0a1822,inset 0 0 1.3rem #000a,0 0 22px #e6bc5b5c,0 10px 20px #000a;
}
.closed-book-actions p{
  margin:0;
  color:#d1b476;
  font:400 clamp(8px,.72vw,12px)/1.2 Cinzel,serif;
  letter-spacing:.075em;
  text-transform:uppercase;
  text-shadow:0 2px 3px #000;
}
.companion-library{
  right:clamp(18px,3vw,54px);
  top:17%;
  width:min(18vw,248px);
  transform:translateX(16px);
  text-align:center;
}
.storybook-scene.is-cover-closed .companion-library{transform:translateX(0)}
.companion-library h2{
  margin:0 0 clamp(9px,1.2vh,15px);
  color:#dabb75;
  font:500 clamp(9px,.82vw,13px)/1.15 Cinzel,serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-shadow:0 2px 4px #000;
}
.companion-books{display:grid;gap:clamp(10px,1.5vh,17px)}
.companion-book{
  --companion-cover:#563145;
  position:relative;
  min-height:clamp(68px,9.5vh,91px);
  display:grid;
  grid-template-columns:25% 1fr;
  grid-template-rows:1fr auto;
  align-items:center;
  padding:clamp(9px,1.2vh,14px) 8% clamp(8px,1vh,12px) 12%;
  border:1px solid #c49a55;
  outline:1px solid #513217;
  outline-offset:3px;
  border-radius:5px 9px 9px 5px;
  background:
    linear-gradient(90deg,#09050488 0 9%,#ffffff13 10% 12%,#0000 15%),
    var(--companion-cover) url("assets/blank-blue-cover.png") center/150% 210% no-repeat;
  color:#f1d28b;
  box-shadow:inset 0 0 1rem #0009,4px 6px 0 #a7793d,7px 10px 16px #000a;
  transform:rotate(-1.3deg);
}
.companion-book::after{
  content:"";
  position:absolute;
  left:9%;right:-5px;bottom:-7px;height:6px;
  border-radius:0 0 5px 2px;
  background:repeating-linear-gradient(0deg,#dcc08d 0 1px,#8d663c 1px 2px);
  box-shadow:0 3px 4px #0008;
}
.companion-book:nth-child(2){transform:rotate(1deg)}
.companion-book:nth-child(3){transform:rotate(-.55deg)}
.companion-mommy{--companion-cover:#663e51}
.companion-daddy{--companion-cover:#183f61}
.companion-sister{--companion-cover:#52613f}
.companion-book img{
  grid-row:1/3;
  width:60%;
  justify-self:center;
  filter:invert(80%) sepia(59%) saturate(514%) hue-rotate(354deg) brightness(98%);
}
.companion-book span{
  align-self:end;
  font:500 clamp(11px,.98vw,16px)/1.05 Cinzel,serif;
  text-shadow:0 2px 2px #000;
}
.companion-book small{
  align-self:start;
  margin-top:.38em;
  color:#e0c995;
  font:400 clamp(7px,.59vw,10px)/1 Cinzel,serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.8;
}

/* A printed page is already painted before it moves. Seen-state classes remain
   available to JavaScript for navigation history, but never change its visibility. */
.memory-page .page-content,
.memory-page.has-been-seen .page-content,
.memory-page.first-reveal .page-content{opacity:1;transform:none;animation:none}

.page-content{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
  padding:15.7% 10.7% 8%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:var(--ink);
}
.page-kicker{margin:0 0 1.8%;font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(7px,.72vw,13px);color:#5a3d24}
.page-content h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(18px,1.85vw,34px);line-height:.94;margin:0;max-width:90%;text-wrap:balance;color:#3e281a}
.ink-flourish{margin:2.6% 0 2%;color:#8e6a37;font-size:clamp(7px,.8vw,14px);letter-spacing:.06em}
.page-copy{max-width:76%;font-size:clamp(9px,.94vw,17px);line-height:1.3;margin:0 0 3%;color:#452d1e}
.page-left .page-copy{text-align:left}

.ornate-photo{position:relative;margin:0;overflow:visible;background:#9fb7c7;box-shadow:0 .35vw .45vw #3c21094f;border:.3vw solid #9a7137;outline:1px solid #553514}
.ornate-photo::after{content:"";position:absolute;inset:.24vw;border:1px solid #d3ad65aa;box-shadow:inset 0 0 .9vw #33210e77;pointer-events:none}
.ornate-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.13) saturate(.78)}
.ornate-photo img[data-src],.ornate-photo img[data-src].is-loaded{opacity:1;transition:none}
.photo-open{display:block;width:100%;height:100%;padding:0;border:0;background:#9fb7c7;overflow:hidden;cursor:zoom-in;color:inherit}
.photo-open::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(132deg,#fff0 58%,#fff7 75%,#fff0 88%);translate:-120% 0;transition:translate 420ms ease}
.photo-open:hover::after,.photo-open:focus-visible::after{translate:120% 0}
.photo-open:focus-visible{outline:3px solid #fff1ad;outline-offset:4px}
.ornate-photo figcaption{position:absolute;z-index:4;left:5%;right:5%;bottom:4%;padding:.28em .42em;color:#49301e;background:#efd8afe8;border:1px solid #704b2499;box-shadow:0 2px 5px #26140855;font:600 clamp(6px,.54vw,10px)/1.1 Cinzel,serif;letter-spacing:.035em;pointer-events:none}
.photo-placeholder-label{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;font-family:Cinzel,serif;text-transform:uppercase;text-align:center;letter-spacing:.04em;line-height:1.2;color:#3f5360;font-size:clamp(7px,.72vw,13px);text-shadow:0 1px #fff8}
.large-photo{width:78%;height:38%;margin-top:auto;margin-bottom:4%}
.frame-corner{position:absolute;z-index:2;width:14%;aspect-ratio:1;border-color:#c09951;border-style:solid;pointer-events:none}
.corner-a{left:-.34vw;top:-.34vw;border-width:.18vw 0 0 .18vw}.corner-b{right:-.34vw;top:-.34vw;border-width:.18vw .18vw 0 0}.corner-c{right:-.34vw;bottom:-.34vw;border-width:0 .18vw .18vw 0}.corner-d{left:-.34vw;bottom:-.34vw;border-width:0 0 .18vw .18vw}
.leaf-trail{width:35%;height:5%;margin-top:auto;border-bottom:.14vw solid #71844c;border-radius:50%;opacity:.65}
.two-photo-stack{width:55%;height:64%;display:grid;grid-template-rows:1fr 1fr;gap:6%;margin:1% auto 2% 8%}
.small-photo{width:100%;height:auto;min-height:0}
.page-content blockquote{font-family:Allura,"Segoe Script",cursive;font-size:clamp(15px,1.46vw,27px);line-height:1.08;margin:2% auto 0;max-width:86%;rotate:-1deg;color:#442c20}
.page-content-gallery-quote .two-photo-stack{position:absolute;z-index:6;left:11%;top:25%;width:44%;height:59%;margin:0}
.page-content-gallery-quote blockquote{position:absolute;z-index:7;right:6%;top:43%;width:42%;max-width:42%;margin:0;padding:.34em .38em;background:#efd7a8b8;box-shadow:0 0 1.2vw #efd7a8;border-radius:45% 35% 42% 28%}
.page-bee{position:absolute;z-index:5;right:1%;top:16%;width:32%;height:auto;pointer-events:none}.page-rose{position:absolute;z-index:5;right:0;bottom:2%;width:45%;height:48%;object-fit:contain;object-position:right bottom;pointer-events:none}
.botanical-decoration{position:absolute;z-index:5;right:-2%;top:9%;width:49%;height:86%;object-fit:fill;object-position:right center;pointer-events:none}
.letter-quote{margin:auto!important;font-size:clamp(21px,1.95vw,36px)!important}.letter-decoration{width:37%;height:45%;opacity:.9}.closing-decoration{width:40%;height:48%}
.timeline{width:78%;margin:auto;text-align:left;border-left:1px solid #8f6c3d;padding-left:9%;display:grid;gap:9%}
.timeline section{position:relative}.timeline section::before{content:"";position:absolute;left:calc(-11.5% - .13vw);top:.25em;width:.42vw;aspect-ratio:1;border-radius:50%;background:#a77c39;box-shadow:0 0 0 .16vw #dfc18d}
.timeline h3{font-family:Cinzel,serif;font-size:clamp(8px,.86vw,15px);margin:0}.timeline p{font-size:clamp(8px,.82vw,14px);line-height:1.25;margin:.2em 0}
.milestone-photo{height:42%}.page-number{position:absolute;bottom:3.8%;font-size:clamp(8px,.8vw,14px);color:#674928}.page-left .page-number{left:10%}.page-right .page-number{right:10%}
.empty-page{display:grid;place-items:center}.endpaper-mark{font-size:clamp(24px,3vw,52px);color:#9a743f;opacity:.45}

.page-content-photo-album{padding:12.5% 8.5% 7.5%}
.page-content-photo-album .page-kicker{margin-bottom:1%}
.page-content-photo-album h2{font-size:clamp(16px,1.55vw,29px);line-height:1}
.album-photo-grid{width:84%;flex:1;min-height:0;margin:3.2% auto 3.5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4.5% 5.5%}
.album-photo{width:100%;height:100%;min-width:0;min-height:0;border-width:.2vw}
.album-photo::after{inset:.16vw}
.album-photo-grid.count-1{width:66%;grid-template-columns:1fr}
.album-photo-grid.count-2{width:84%;grid-template-columns:repeat(2,minmax(0,1fr))}
.album-photo-grid.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.album-photo-grid.count-4{width:72%;grid-template-columns:repeat(2,minmax(0,1fr))}
.album-photo-grid.count-5 .album-photo:nth-child(4){grid-column:1/2;margin-left:55%}
.album-photo-grid.count-5 .album-photo:nth-child(5){grid-column:2/3;margin-left:55%}

/* A single memory gets a portrait-like page instead of duplicating its image. */
.page-content-gallery-single{padding:12.5% 9% 8%}
.page-content-gallery-single .single-photo-gallery,
.album-photo-grid.single-photo-gallery,
.album-photo-grid.count-1{
  width:68%;
  min-height:0;
  flex:1;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,1fr);
  margin:4% auto 5%;
}
.page-content-gallery-single .single-photo-gallery>.ornate-photo,
.single-photo-gallery .album-photo{width:100%;height:100%;min-height:0}
.page-content-gallery-quote.page-content-gallery-single .single-photo-gallery{width:58%;flex:0 1 52%;margin:3% auto 2%}
.page-content-gallery-quote.page-content-gallery-single blockquote{position:relative;right:auto;top:auto;width:82%;max-width:82%;margin:1% auto 0;padding:.25em .4em}
.page-content-gallery-quote.page-content-gallery-single .page-bee{width:24%;top:19%}
.page-content-gallery-quote.page-content-gallery-single .page-rose{width:33%;height:35%}

/* Quote interludes are complete parchment compositions. Only the little
   character and loose charms drift; the words themselves never animate in. */
.page-content-storybook-quote{
  justify-content:center;
  padding:13% 9% 9%;
  overflow:hidden;
}
.page-content-storybook-quote::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:14% 10% 10%;
  border:1px solid #9d744170;
  border-radius:48% 42% 45% 40%;
  box-shadow:inset 0 0 2.2vw #9c6c2f1f,0 0 2vw #f7dc9c4d;
  pointer-events:none;
}
.storybook-quote-card{
  position:relative;
  z-index:3;
  width:82%;
  min-height:44%;
  display:grid;
  place-content:center;
  padding:9% 9% 12%;
  border:1px solid #9870447a;
  border-radius:44% 38% 43% 35%;
  background:
    radial-gradient(ellipse at center,#f3dca2d9 0,#ead09ba8 58%,#d8b87b4d 100%),
    url("assets/parchment-texture.png") center/cover;
  box-shadow:inset 0 0 1.2vw #8156282d,0 .45vw 1.3vw #7a4b2430;
  transform:rotate(-.45deg);
}
.storybook-quote-card::before,.storybook-quote-card::after{
  position:absolute;
  color:#9b723d;
  font-family:Cinzel,serif;
  font-size:clamp(13px,1.25vw,23px);
  line-height:1;
}
.storybook-quote-card::before{content:"❦";left:8%;top:8%}
.storybook-quote-card::after{content:"✦";right:9%;bottom:9%;font-size:.75em}
.storybook-quote-card blockquote{
  max-width:92%;
  margin:0 auto!important;
  color:#432c20;
  font-size:clamp(21px,2.15vw,40px);
  line-height:1.13;
  rotate:0deg;
  text-wrap:balance;
  text-shadow:0 1px #fff5d1;
}
.storybook-quote-card cite{
  display:block;
  margin-top:.85em;
  color:#715033;
  font:400 clamp(7px,.68vw,12px)/1.2 Cinzel,serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.quote-character{
  position:absolute;
  z-index:5;
  right:3%;
  bottom:5%;
  width:31%;
  display:grid;
  justify-items:center;
  pointer-events:none;
}
.quote-character figcaption{display:grid;justify-items:center;gap:.28em;margin-top:-4%;text-align:center}
.quote-character figcaption>span:not(.quote-character-name){max-width:18ch;color:#765337;font:italic clamp(7px,.68vw,12px)/1.1 "Cormorant Garamond",Georgia,serif;text-shadow:0 1px #fff1c8}
.quote-character img,.quote-character>img,
img.quote-character{
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 .35vw .35vw #52301148);
  transform-origin:50% 85%;
  animation:storybookCharacterFloat 4.6s ease-in-out infinite;
}
.quote-character img[src$=".svg"]{width:72%;padding:8%;border:1px solid #a17a4670;border-radius:50%;background:#e7c98ca8;filter:invert(34%) sepia(34%) saturate(742%) hue-rotate(353deg) brightness(88%) contrast(88%) drop-shadow(0 .25vw .3vw #5230113d)}
img.quote-character{height:auto;max-height:none}
.quote-character-name{
  margin-top:-5%;
  padding:.25em .72em;
  border:1px solid #89643a77;
  border-radius:999px;
  background:#ead09dcf;
  color:#5e4028;
  font:600 clamp(6px,.58vw,10px)/1 Cinzel,serif;
  letter-spacing:.07em;
  text-transform:uppercase;
  box-shadow:0 2px 5px #71491f38;
}
.quote-charm{
  position:absolute;
  z-index:4;
  width:clamp(15px,2.1vw,38px);
  aspect-ratio:1;
  object-fit:contain;
  opacity:.68;
  filter:sepia(.55) saturate(.82) drop-shadow(0 0 .25vw #d6a74070);
  pointer-events:none;
  animation:quoteCharmTwinkle 3.8s ease-in-out infinite;
}
.quote-charm:nth-of-type(odd){animation-delay:-1.7s}
.quote-charm-a{left:7%;top:29%}
.quote-charm-b{right:8%;top:21%}
@keyframes storybookCharacterFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4%) rotate(1.25deg)}}
@keyframes quoteCharmTwinkle{0%,100%{opacity:.42;transform:scale(.88) rotate(-4deg)}50%{opacity:.82;transform:scale(1.06) rotate(5deg)}}

.storybook-controls{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:2.1%;
  width:min(92vw,1080px);
  height:13.5%;
  translate:-50% 12%;
  opacity:0;
  pointer-events:none;
  transition:opacity 360ms ease,translate 360ms ease;
}
.storybook-scene.is-reading .storybook-controls{opacity:1;translate:-50% 0;pointer-events:auto}
.previous-control{position:absolute;left:2%;width:12%}.contents-book{position:absolute;left:24%;top:-2%}.theme-panel{position:absolute;right:24%}.next-control{position:absolute;right:2%;width:12%}
.round-nav{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;border:0;background:transparent;color:#f1d28b;cursor:pointer;text-transform:uppercase;letter-spacing:.06em}
.round-medallion{display:grid;place-items:center;width:49%;aspect-ratio:1;border-radius:50%;background:#3d2919;border:.14vw solid #b4843f;box-shadow:inset 0 0 0 .26vw #1b120c,0 .35vw .7vw #0009;transition:transform .18s,filter .18s}
.round-medallion img{width:52%;filter:invert(79%) sepia(55%) saturate(542%) hue-rotate(354deg) brightness(94%)}
.control-label{font-family:Cinzel,serif;font-size:clamp(8px,.9vw,15px)}
.round-nav:hover .round-medallion,.round-nav:focus-visible .round-medallion{transform:translateY(-5%) scale(1.04);filter:brightness(1.2)}
.round-nav:disabled,.contents-book:disabled,.theme-option:disabled{opacity:.34;cursor:not-allowed}
.contents-book{width:27%;height:105%;border:0;color:#f0d08a;background:transparent url("assets/toc-book-control.png") center/100% 100% no-repeat;cursor:pointer;font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(9px,1.05vw,18px);line-height:1.25;text-shadow:0 2px #2d160b;filter:drop-shadow(0 .45vw .55vw #0008)}
.contents-book:hover,.contents-book:focus-visible{filter:brightness(1.16);translate:0 -2%}
.theme-panel{top:0;width:18%;height:85%;background:transparent url("assets/theme-control-plate.png") center/100% 100% no-repeat;filter:drop-shadow(0 .45vw .55vw #0008)}
.theme-title{position:absolute;left:0;right:0;top:14%;text-align:center;font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(7px,.75vw,13px);color:#efd18c}
.theme-options{position:absolute;left:13%;right:13%;top:43%;display:flex;align-items:start;justify-content:center;gap:3%}
.theme-option{display:grid;place-items:center;width:27%;aspect-ratio:1;border-radius:50%;border:.11vw solid #a97938;box-shadow:inset 0 0 0 .2vw #0c1115,0 .25vw .35vw #0008;background:var(--theme-blue);cursor:pointer;transition:transform .18s,filter .18s}
.theme-option:nth-child(2){background:var(--theme-middle)}.theme-option:nth-child(3){background:var(--theme-green)}
.theme-option img{width:55%;filter:invert(80%) sepia(62%) saturate(461%) hue-rotate(355deg) brightness(97%)}
.theme-option:hover,.theme-option:focus-visible,.theme-option.is-active{transform:translateY(-6%) scale(1.06);filter:brightness(1.18);box-shadow:inset 0 0 0 .2vw #0c1115,0 0 .65vw #eac05e}
.page-status{position:absolute;z-index:13;left:21%;right:21%;bottom:.75%;margin:0;text-align:center;color:#c5a46f;font-size:clamp(8px,.7vw,12px);letter-spacing:.07em;opacity:.82;text-shadow:0 1px 2px #000}
.mobile-hint{display:none}
.storybook-scene:not(.is-reading) .page-status,
.storybook-scene:not(.is-reading) .mobile-hint{opacity:0}

.toc-dialog{width:min(560px,90vw);max-height:90dvh;padding:0;border:0;background:transparent;color:var(--ink);filter:drop-shadow(0 2vw 2vw #000c)}
.toc-dialog::backdrop{background:#0c0806e6;backdrop-filter:blur(5px)}
.toc-sheet{position:relative;max-height:min(88dvh,680px);padding:2.4rem 3.1rem;text-align:center;background:var(--paper) url("assets/parchment-texture.png") center/cover;border:9px solid #5c361b;outline:3px solid #bd8a46;outline-offset:-17px;overflow:auto}
.toc-sheet::after{content:"";position:absolute;inset:28px;border:1px solid #82603a;pointer-events:none}
.toc-sheet h2{font-family:Cinzel,serif;font-weight:500;font-size:2rem;margin:.25rem 0}.toc-sheet>p{font-style:italic;margin:.25rem}.toc-flourish{font-size:1.8rem!important;color:#936b37}
.close-toc{position:absolute;z-index:3;right:22px;top:18px;width:44px;aspect-ratio:1;border-radius:50%;border:1px solid #75502e;background:#e2c28d;cursor:pointer}.close-toc img{width:60%;filter:sepia(1)}
.toc-sheet nav{display:grid;width:90%;margin:1.15rem auto}.toc-sheet nav button{display:flex;justify-content:space-between;padding:.56rem .2rem;border:0;border-bottom:1px dotted #7d5c38;background:transparent;color:#3f2a1b;text-align:left;cursor:pointer}.toc-sheet nav button:hover,.toc-sheet nav button:focus-visible{padding-left:.5rem;color:#875c25}

.photo-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f2d99f;overflow:hidden}
.photo-viewer::backdrop{background:#080604eb;backdrop-filter:blur(8px)}
.photo-viewer-shell{position:absolute;inset:clamp(16px,3vw,48px);display:grid;grid-template-columns:clamp(48px,6vw,86px) minmax(0,1fr) clamp(48px,6vw,86px);align-items:center;gap:clamp(9px,1.4vw,24px);padding:clamp(15px,2vw,30px);border:2px solid #b98a42;outline:1px solid #f0cf7d;outline-offset:-9px;border-radius:20px;background:#10283d url("assets/blank-blue-cover.png") center/cover;box-shadow:inset 0 0 4vw #000b,0 2vw 5vw #000}
.photo-viewer-shell::before{content:"";position:absolute;inset:18px;border:1px solid #b98a4277;border-radius:12px;pointer-events:none}
.photo-viewer figure{position:relative;z-index:2;grid-column:2;display:flex;min-width:0;min-height:0;max-width:100%;height:100%;margin:0;align-items:center;justify-content:center;flex-direction:column;gap:clamp(10px,1.5vh,18px)}
.photo-viewer figure>img{display:block;max-width:100%;max-height:calc(100% - 56px);width:auto;height:auto;object-fit:contain;opacity:0;transform:scale(.985);transition:opacity 260ms ease,transform 360ms ease;filter:drop-shadow(0 1.2vw 1.6vw #000b);border:clamp(5px,.55vw,9px) solid #e7c98e;outline:2px solid #8a602e}
.photo-viewer figure>img.is-loaded{opacity:1;transform:scale(1)}
.photo-viewer figcaption{display:flex;align-items:center;gap:clamp(10px,2vw,30px);padding:.48rem 1.1rem;border:1px solid #a87839;background:#281a11d9;box-shadow:0 4px 12px #0008;font-family:Cinzel,serif;font-size:clamp(10px,1vw,15px);letter-spacing:.045em;text-align:center}
.photo-viewer-position{opacity:.78}
.photo-viewer-close,.photo-viewer-nav{position:relative;z-index:4;display:grid;place-items:center;border-radius:50%;border:2px solid #b98a42;background:#352317;box-shadow:inset 0 0 0 5px #130d09,0 8px 20px #0009;cursor:pointer;transition:transform 180ms ease,filter 180ms ease}
.photo-viewer-nav{width:clamp(48px,5vw,76px);aspect-ratio:1}
.photo-viewer-nav img,.photo-viewer-close img{width:52%;filter:invert(80%) sepia(60%) saturate(500%) hue-rotate(354deg) brightness(98%)}
.photo-viewer-previous{grid-column:1;grid-row:1}
.photo-viewer-next{grid-column:3;grid-row:1}
.photo-viewer-close{position:absolute;right:clamp(24px,2.8vw,48px);top:clamp(24px,2.8vw,48px);width:48px;aspect-ratio:1}
.photo-viewer-nav:hover:not(:disabled),.photo-viewer-nav:focus-visible:not(:disabled),.photo-viewer-close:hover,.photo-viewer-close:focus-visible{transform:translateY(-3px) scale(1.05);filter:brightness(1.2)}
.photo-viewer-nav:disabled{opacity:.25;cursor:not-allowed}

.spark-burst{position:fixed;z-index:40;left:50%;top:46%;pointer-events:none}.spark-burst i{position:absolute;width:5px;aspect-ratio:1;rotate:45deg;background:#f3cf6b;box-shadow:0 0 9px #f6ce63;animation:sparkOut .9s ease-out forwards}@keyframes sparkOut{to{translate:var(--spark-x) var(--spark-y);rotate:180deg;scale:0;opacity:0}}
.flying-bee{position:fixed;z-index:38;left:-20vw;top:48%;width:9vw;height:9vw;overflow:hidden;pointer-events:none;opacity:0}.flying-bee img{width:200%;height:200%;object-fit:contain;object-position:top left}.flying-bee.is-flying{animation:beeFlight 4.2s ease-in-out}@keyframes beeFlight{0%{left:-10vw;top:62%;opacity:0}12%{opacity:1}40%{top:34%}70%{top:50%}90%{opacity:1}100%{left:105vw;top:28%;opacity:0}}

@media(max-width:960px) and (orientation:portrait), (max-width:700px){
  :root{--cover-duration:760ms;--turn-duration:620ms;--face-swap-delay:210ms}
  .storybook-scene{--closed-book-top:4.2%;--closed-book-height:min(68dvh,620px,142vw);min-height:0;background-position:center}
  .book-stage{top:4.2%;width:min(91vw,450px);height:min(70dvh,630px);aspect-ratio:auto}
  .storybook-scene.is-cover-closed .book-stage{top:var(--closed-book-top);height:var(--closed-book-height)}
  .closed-book-actions{
    left:50%;
    top:calc(var(--closed-book-top) + var(--closed-book-height) + clamp(8px,1.5dvh,14px));
    bottom:auto;
    width:min(86vw,420px);
    gap:clamp(3px,.5dvh,6px);
    transform:translate(-50%,10px);
  }
  .storybook-scene.is-cover-closed .closed-book-actions{transform:translate(-50%,0)}
  .begin-story-button{
    min-height:52px;
    grid-template-columns:25px 1fr 25px;
    gap:6px;
    padding:.58em .82em;
    border-width:1px;
    outline-offset:3px;
    font-size:clamp(11px,3.65vw,17px);
  }
  .closed-book-actions p{font-size:clamp(7px,2.05vw,9px);letter-spacing:.06em}
  .companion-library{
    left:50%;
    right:auto;
    top:calc(var(--closed-book-top) + var(--closed-book-height) + clamp(74px,10.6dvh,92px));
    width:min(94vw,540px);
    transform:translate(-50%,10px);
  }
  .storybook-scene.is-cover-closed .companion-library{transform:translate(-50%,0)}
  .companion-library h2{margin:0 0 clamp(4px,.65dvh,7px);font-size:clamp(7px,2vw,10px)}
  .companion-books{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,1.5vw,10px)}
  .companion-book{
    min-height:clamp(54px,8.5dvh,72px);
    grid-template-columns:26% 1fr;
    padding:7px 5% 6px 10%;
    outline-offset:2px;
    border-radius:3px 6px 6px 3px;
    box-shadow:inset 0 0 .7rem #0009,2px 4px 0 #a7793d,4px 7px 10px #000a;
  }
  .companion-book::after{left:8%;right:-3px;bottom:-5px;height:4px}
  .companion-book img{width:64%}
  .companion-book span{font-size:clamp(8px,2.65vw,12px)}
  .companion-book small{font-size:clamp(5px,1.65vw,8px);letter-spacing:.05em}
  .book-volume,.book-volume[data-state="opening"],.book-volume[data-state="open"],.book-volume[data-state="turning"],.book-volume[data-state="closing"]{transform:translateX(0)}
  .desktop-page-system{display:none}
  .mobile-page-system{display:block;position:absolute;z-index:4;inset:0;opacity:0;transform-style:preserve-3d;transition:opacity 260ms ease 120ms}
  .book-volume[data-state="opening"] .mobile-page-system,.book-volume[data-state="open"] .mobile-page-system,.book-volume[data-state="turning"] .mobile-page-system,.book-volume[data-state="closing"] .mobile-page-system{opacity:1}
  .front-cover{left:0;width:100%}
  .back-cover-board{inset:1.2% -1.2% -2.3%;border-radius:3%}
  .book-page-block{inset:.6% -.3% -.1%;border-radius:3%}
  .mobile-sheet{position:absolute;inset:0;transform:translateZ(2px) rotateY(0deg);transform-origin:left center;transform-style:preserve-3d;transition:transform var(--turn-duration) var(--turn-ease)}
  .mobile-sheet.is-turned{transform:translateZ(2px) rotateY(-180deg)}
  .mobile-sheet.is-active-turn{will-change:transform;filter:drop-shadow(-3vw .6vw 2.4vw #160b06a8)}
  .sheet-face{inset:0;width:100%;backface-visibility:visible;-webkit-backface-visibility:visible;border-radius:3.4%;clip-path:polygon(1% 2%,6% .5%,14% 1.2%,23% .3%,33% 1%,44% .2%,55% .9%,67% .2%,78% 1%,89% .3%,98% 2%,99% 96%,96% 99%,84% 98.5%,72% 99.5%,60% 98.7%,48% 99.4%,36% 98.6%,24% 99.4%,12% 98.5%,1% 97%);transition:opacity 0s linear var(--face-swap-delay)}
  .sheet-face{pointer-events:none}
  .memory-page[aria-hidden="false"]{pointer-events:auto}
  .sheet-front{opacity:1}
  .sheet-back{transform:rotateY(180deg);background-position:left center;opacity:0}
  .mobile-sheet.is-turned .sheet-front{opacity:0}
  .mobile-sheet.is-turned .sheet-back{opacity:1}
  .cover-copy{inset:7.3% 10% 5.8% 15%}
  .cover-copy h1{font-size:clamp(17px,5.4vw,28px)}
  .cover-portrait{width:42%;margin:3% 0 2%;padding:4px;border-width:2px;outline-width:1px;outline-offset:3px}
  .cover-portrait::before{inset:-6px;border-width:1px}.cover-portrait::after{inset:-10px;border-width:1px}
  .cover-copy>p{font-size:clamp(13px,3.8vw,18px);margin:.6% 0 2.6%}
  .cover-instruction{font-size:8px}
  .inside-cover-paper p{font-size:11px}.inside-cover-paper blockquote{font-size:clamp(24px,7vw,36px)}.inside-cover-paper span{font-size:12px}
  .page-content{padding:9.5% 8.5% 8%}
  .page-kicker{font-size:clamp(9px,2.8vw,13px)}
  .page-content h2{font-size:clamp(25px,7.3vw,38px);max-width:88%}
  .page-copy{font-size:clamp(14px,3.7vw,18px);max-width:82%;line-height:1.3}
  .ink-flourish{font-size:clamp(11px,3vw,14px)}
  .large-photo{width:72%;height:40%}
  .two-photo-stack{height:52%;width:62%;margin-left:7%}
  .page-content blockquote{font-size:clamp(23px,6.5vw,34px)}
  .page-content-gallery-quote .two-photo-stack{left:8%;top:24%;width:46%;height:62%;margin:0}
  .page-content-gallery-quote blockquote{right:4%;top:41%;width:44%;max-width:44%;font-size:clamp(19px,5.4vw,28px)}
  .page-number{font-size:12px}
  .ornate-photo{border-width:4px}.ornate-photo::after{inset:3px}.corner-a{left:-5px;top:-5px;border-width:2px 0 0 2px}.corner-b{right:-5px;top:-5px;border-width:2px 2px 0 0}.corner-c{right:-5px;bottom:-5px;border-width:0 2px 2px 0}.corner-d{left:-5px;bottom:-5px;border-width:0 0 2px 2px}
  .ornate-photo figcaption{left:4%;right:4%;bottom:3%;padding:.25em .35em;font-size:clamp(8px,2.35vw,11px)}
  .photo-placeholder-label{font-size:10px}
  .page-content-photo-album{padding:8.5% 7.2% 7.5%}
  .page-content-photo-album h2{font-size:clamp(22px,6vw,32px)}
  .album-photo-grid,.album-photo-grid.count-2,.album-photo-grid.count-3,.album-photo-grid.count-4{width:84%;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4.5% 6%;margin:2.5% auto 4%}
  .album-photo-grid.count-1{width:68%;grid-template-columns:1fr}
  .album-photo-grid.count-5 .album-photo:nth-child(4),.album-photo-grid.count-5 .album-photo:nth-child(5){grid-column:auto;margin-left:0}
  .album-photo-grid.count-5 .album-photo:nth-child(5){grid-column:1/3;width:47%;justify-self:center}
  .album-photo{border-width:3px}
  .page-content-gallery-single{padding:9% 8% 7.5%}
  .page-content-gallery-single .single-photo-gallery,
  .album-photo-grid.single-photo-gallery,
  .album-photo-grid.count-1{width:70%;margin:3% auto 4%}
  .page-content-gallery-quote.page-content-gallery-single .single-photo-gallery{width:64%;flex-basis:50%;margin:2.5% auto 2%}
  .page-content-gallery-quote.page-content-gallery-single blockquote{width:86%;max-width:86%;font-size:clamp(19px,5.4vw,28px)}
  .page-content-storybook-quote{padding:10% 7.5% 8%}
  .page-content-storybook-quote::after{inset:10% 7% 8%;box-shadow:inset 0 0 20px #9c6c2f1f,0 0 18px #f7dc9c4d}
  .storybook-quote-card{width:84%;min-height:47%;padding:10% 8% 14%;box-shadow:inset 0 0 12px #8156282d,0 5px 14px #7a4b2430}
  .storybook-quote-card blockquote{font-size:clamp(26px,7.8vw,40px);line-height:1.08}
  .storybook-quote-card cite{font-size:clamp(7px,2.1vw,10px)}
  .quote-character{right:2%;bottom:4%;width:35%}
  .quote-character-name{font-size:clamp(6px,1.8vw,9px)}
  .quote-charm{width:clamp(17px,6vw,29px)}
  .letter-decoration{top:35%;right:2%;width:28%;height:26%}
  .timeline h3{font-size:13px}.timeline p{font-size:13px}.timeline section::before{width:5px;box-shadow:0 0 0 2px #dfc18d}
  .storybook-controls{bottom:2.4%;width:96vw;height:10.8%;}
  .previous-control{left:0;width:17%}.contents-book{left:18%;top:6%;width:31%;height:88%}.theme-panel{right:18%;top:8%;width:31%;height:80%}.next-control{right:0;width:17%}
  .round-medallion{width:68%;border-width:2px;box-shadow:inset 0 0 0 3px #1b120c,0 4px 8px #0009}.control-label{font-size:9px}.contents-book{font-size:9px}.theme-title{font-size:7px}.theme-option{width:25%;border-width:1px;box-shadow:inset 0 0 0 2px #0c1115,0 2px 4px #0008}
  .page-status{left:16%;right:16%;bottom:14.4%;font-size:9px}
  .mobile-hint{display:block;position:absolute;z-index:13;left:0;right:0;bottom:.55%;margin:0;text-align:center;color:#b99b68;font-size:8px;letter-spacing:.08em;text-shadow:0 1px 2px #000}
  .flying-bee{width:24vw;height:24vw}
  .dust-field i:nth-child(n+14){display:none}
  .photo-viewer-shell{inset:8px;display:grid;grid-template-columns:1fr;padding:48px 13px 78px;border-radius:14px}
  .photo-viewer-shell::before{inset:11px;border-radius:9px}
  .photo-viewer figure{grid-column:1;grid-row:1;height:100%;gap:9px}
  .photo-viewer figure>img{max-height:calc(100% - 70px);max-width:94%;border-width:5px}
  .photo-viewer figcaption{max-width:92%;flex-direction:column;gap:2px;padding:.42rem .72rem;font-size:10px}
  .photo-viewer-nav{position:absolute;bottom:17px;width:48px}
  .photo-viewer-previous{left:calc(50% - 66px)}
  .photo-viewer-next{right:calc(50% - 66px)}
  .photo-viewer-close{right:18px;top:18px;width:42px}
}

@media(max-width:960px) and (orientation:landscape) and (max-height:620px){
  .storybook-scene{--closed-book-top:3%;--closed-book-height:72dvh}
  .book-stage{top:3%;width:min(58vw,430px);height:72dvh}
  .storybook-scene.is-cover-closed .book-stage{top:var(--closed-book-top);height:var(--closed-book-height)}
  .closed-book-actions{
    left:auto;right:1.5%;top:17%;bottom:auto;width:min(21vw,180px);
    gap:5px;transform:translateX(10px);
  }
  .storybook-scene.is-cover-closed .closed-book-actions{transform:translateX(0)}
  .begin-story-button{min-height:48px;grid-template-columns:19px 1fr 19px;gap:3px;padding:.48em .5em;font-size:clamp(9px,1.7vw,13px)}
  .begin-story-button span{white-space:normal}
  .closed-book-actions p{font-size:clamp(6px,1.05vw,8px)}
  .companion-library{left:1.4%;right:auto;top:7%;width:min(21vw,180px);transform:translateX(-10px)}
  .storybook-scene.is-cover-closed .companion-library{transform:translateX(0)}
  .companion-library h2{margin-bottom:6px;font-size:clamp(7px,1.15vw,9px)}
  .companion-books{grid-template-columns:1fr;gap:7px}
  .companion-book{min-height:43px;padding:5px 5% 4px 10%}
  .companion-book span{font-size:clamp(8px,1.35vw,11px)}
  .companion-book small{font-size:clamp(5px,.85vw,7px)}
  .cover-copy{inset:7% 10% 5% 15%}.cover-copy h1{font-size:clamp(15px,4vh,23px)}.cover-portrait{width:35%;margin:2% 0 1%}.cover-copy>p{font-size:12px;margin:0 0 1.5%}.cover-instruction{font-size:7px;margin-top:5px}
  .page-content{padding:8% 9% 7%}.page-content h2{font-size:clamp(22px,6vh,31px)}.page-copy{font-size:12px}.large-photo{height:35%}.two-photo-stack{height:48%}.page-content blockquote{font-size:22px}
  .storybook-controls{height:14%;bottom:1%}.page-status{bottom:15.2%;font-size:8px}.mobile-hint{font-size:7px}
  .album-photo-grid{width:84%;gap:3% 5%}.page-content-photo-album h2{font-size:22px}
  .storybook-quote-card blockquote{font-size:clamp(20px,5.3vh,30px)}.quote-character{width:27%}.quote-charm{width:20px}
  .photo-viewer-shell{inset:7px;padding:34px 70px 14px}.photo-viewer figure>img{max-height:calc(100% - 48px)}.photo-viewer figcaption{flex-direction:row}.photo-viewer-nav{bottom:auto;top:50%;translate:0 -50%}.photo-viewer-previous{left:14px}.photo-viewer-next{right:14px}.photo-viewer-close{right:13px;top:13px;width:36px}
}

@media(min-width:701px) and (max-height:620px){
  .book-stage{top:2%;width:min(84vw,calc(72dvh * 1.58))}
  .storybook-controls{height:14%;bottom:1%}.page-status{bottom:.4%}
}

@media(prefers-reduced-motion:reduce){
  :root{--cover-duration:1ms;--turn-duration:1ms}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .dust-field,.flying-bee,.spark-burst{display:none!important}
  .memory-page .page-content{opacity:1!important;transform:none!important;animation:none!important}
  .ornate-photo img[data-src],.photo-viewer figure>img{opacity:1!important;transform:none!important}
  .quote-character img,img.quote-character,.quote-charm{animation:none!important;transform:none!important}
}