.hanging-wall{position:relative;height:430px;isolation:isolate}.hero-art{height:500px}.hanging-print{position:absolute;width:31%;background:#fffaf0;padding:8px 8px 10px;box-shadow:3px 10px 17px #51402b30;transform-origin:50% 0;transition:transform .5s var(--ease);font:10px var(--serif)}.hanging-print img{width:100%;aspect-ratio:1.15;object-fit:cover;margin-bottom:9px}.hanging-print:hover{transform:rotate(0deg) translateY(-6px)}
.book-collection{padding-bottom:50px}#book-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:10px 20px 30px;border-bottom:9px solid #9c7b56;box-shadow:0 20px 20px -20px #59402077}.volume-cover{display:flex;flex-direction:column;align-items:center;padding:24px 25px 20px;background:#3c514d;color:#f8efdc;text-align:center;border-radius:var(--radius-sm);border-left:10px solid #263d36;box-shadow:5px 8px 12px #33251b33,inset 5px 0 8px #ffffff0d;transform:rotate(-2deg);transition:transform .4s}.volume-cover:hover{transform:rotate(0deg) translateY(-10px);color:#fff4dd}.tone-1{background:#866447;border-left-color:#5b412e;transform:rotate(2deg)}.tone-2{background:#77755a;border-left-color:#4b4b36}.cover-image{width:88%;padding:6px;background:#eee5d6;margin:25px 0 20px}.cover-image img{width:100%;aspect-ratio:1.3;object-fit:cover}.cover-title{font:24px/1.5 var(--serif);letter-spacing:2px;overflow-wrap:anywhere}.cover-bottom{font:12px/2 Arial;display:flex;justify-content:center;width:100%;margin-top:24px;color:#dfd4c1}.book-fields{display:flex;align-items:end;gap:25px}.book-fields label{flex:1;color:var(--accent);font-size:11px}.book-fields input{display:block;width:100%;border:0;border-bottom:1px solid var(--line);padding:12px 0;background:none;color:var(--ink)}.picker-hint{font-size:11px;color:var(--muted);margin:20px 0}#photo-choices{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.photo-choice{padding:6px;border:1px solid var(--line);position:relative;background:var(--white)}.photo-choice img{width:100%;aspect-ratio:1.2;object-fit:cover}.photo-choice>span{position:absolute;right:8px;bottom:8px;background:#faf5e5dd;width:24px;height:24px;border-radius:var(--radius-pill);font-size:11px}.photo-choice.picked{outline:2px solid #816345}.photo-choice.picked>span{background:#816345;color:white}.sequence-title{font:20px var(--serif);margin-top:28px}.sequence-title span{font:11px Arial;color:var(--muted);margin-left:15px}#book-sequence{padding:0;list-style:none}#book-sequence li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:8px 0}#book-sequence img{width:45px;height:38px;object-fit:cover}#book-sequence li>span{flex:1;font-size:12px;overflow-wrap:anywhere}#book-sequence button{padding:10px}#book-error{color:#9b402b;font-size:12px}
#book-reader{width:min(1300px,97vw);background:#ded5c4;padding:22px 32px;overflow-x:hidden}#book-reader .dialog-head{background:#ded5c4;box-shadow:0 -30px 0 #ded5c4}
#book-reader{--reader-page-ratio:1.8}.book-stage{padding:26px 18px 32px;perspective:2400px}#physical-book{position:relative;display:flex;min-height:440px;aspect-ratio:1.8;filter:drop-shadow(0 20px 16px #3c2b2633);border-radius:2px 7px 7px 2px;box-shadow:0 3px #b7ab97,0 6px #e8dfcf,0 9px #b5a893,0 13px #5a604d;isolation:isolate}.page{width:50%;background:#fcf8ee;position:relative;overflow:auto;min-width:0}.left-page{border-radius:3px 0 0 3px;background:linear-gradient(90deg,#faf5e8 90%,#d6cbb9)}.right-page{border-radius:0 5px 5px 0;background:linear-gradient(90deg,#d4c6b0,#fcf8ee 8%)}.book-spine{position:absolute;left:50%;width:16px;top:0;bottom:0;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#78644a26,transparent);pointer-events:none;z-index:3}.page>div,.leaf-face>div{height:100%;min-height:100%}.title-page{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:9%}.title-page p{font:12px Georgia;letter-spacing:2px;color:#79694f}.title-page h2{font:clamp(20px,2.7vw,38px)/1.5 var(--serif);margin:15px 0 25px;letter-spacing:3px}.title-page img{width:67%;max-height:180px;object-fit:contain}.title-page small{font-size:12px;letter-spacing:1px;margin-top:24px;color:var(--muted)}.book-endpaper{display:flex;align-items:center;justify-content:center;flex-direction:column;background:repeating-linear-gradient(45deg,#e8e2cf,#e8e2cf 1px,#ece7d9 1px,#ece7d9 6px);color:#80785f}.book-endpaper>span{text-align:center;font:25px/1.9 var(--serif);letter-spacing:7px}.book-endpaper small{font:12px Georgia;letter-spacing:1px;margin-top:25px}.photo-page{padding:8% 9% 6%;display:flex;flex-direction:column;justify-content:center}.photo-page img{width:100%;height:82%;min-height:0;object-fit:contain}.photo-page>span{font:12px/1.8 var(--serif);color:var(--muted);margin-top:20px;letter-spacing:0}.story-page{padding:12% 13%;position:relative;overflow:auto}.story-page>p{font:12px Georgia;letter-spacing:2px;color:var(--accent)}.story-page h2{font:clamp(16px,2.3vw,30px)/1.6 var(--serif);margin:25px 0}.story-page>div{font:clamp(12px,1.3vw,16px)/2.2 var(--serif);white-space:pre-wrap;overflow-wrap:anywhere;color:#796b58}.story-page small{display:block;margin-top:30px;color:#a18a69;font-size:9px}.page-folio{display:block;text-align:right;font:9px Georgia;color:#9c8d78;margin-top:25px}.colophon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10%}.colophon>span{font:44px Georgia;color:#a18b66}.colophon h2{font:clamp(17px,2vw,26px)/1.7 var(--serif);margin:15px 0}.colophon p{font:12px/2 var(--serif);color:var(--muted)}.colophon small{font:9px var(--serif);margin-top:40px;color:var(--muted)}.turning-leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;z-index:5;pointer-events:none}.leaf-face{position:absolute;inset:0;backface-visibility:hidden;background:#fbf6e9;overflow:hidden;box-shadow:inset 12px 0 25px -15px #66513288}.leaf-front{background:linear-gradient(90deg,#e1d3bd,#fcf8ee 10%)}.leaf-back{transform:rotateY(180deg);background:linear-gradient(90deg,#fcf8ee 88%,#d1c1a8)}.reader-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.reader-controls>span{font:italic 11px var(--serif);color:#84735c;text-align:center}.book-tools{display:flex;justify-content:flex-end;gap:15px;border-top:1px solid #c8bba5;margin-top:16px;align-items:center;font-size:10px;color:#8e7d65}.book-tools>span{margin-right:auto}.book-tools button{font-size:10px}.book-collection .section-heading h2{font-size:28px}
@media(max-width:900px){.hero-art{height:450px}.hanging-wall{height:380px}#book-shelf{gap:20px;padding-left:5px;padding-right:5px}.volume-cover{padding:20px 15px}.cover-title{font-size:20px}}
@media(max-width:650px){.hero-art{height:365px;margin-top:25px}.hanging-wall{height:320px}.hanging-print{padding:6px 6px 8px;font-size:8px}.book-collection .section-heading{flex-direction:column;gap:18px}.book-collection .section-heading h2{font-size:25px}.book-collection{padding-bottom:30px}#book-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.volume-cover{padding:16px 11px 14px;border-left-width:7px}.cover-image{width:95%;padding:4px;margin:20px 0 15px}.cover-title{font-size:18px;letter-spacing:1px}.cover-bottom{font-size:12px;margin-top:20px}.book-fields{align-items:stretch;flex-direction:column;gap:8px}.book-fields .text-link{align-self:start}.picker-hint{font-size:10px}#photo-choices{grid-template-columns:repeat(3,1fr);gap:10px}#book-sequence li{gap:5px}#book-sequence li>span{font-size:10px}#book-sequence button{padding:9px}#book-reader{padding:14px 12px;width:98vw}.book-stage{padding:25px 2px 26px;perspective:1000px}#physical-book{min-height:330px;aspect-ratio:auto;height:57dvh;max-height:470px}.title-page{padding:8%}.title-page p{font-size:6px;letter-spacing:1px}.title-page h2{font-size:22px;letter-spacing:1px;overflow-wrap:anywhere}.title-page small{font-size:6px;line-height:2;margin-top:20px}.title-page img{width:95%;max-height:130px}.book-endpaper>span{font-size:20px;letter-spacing:3px}.book-endpaper small{font-size:5px;letter-spacing:1px}.photo-page{padding:8%}.photo-page img{height:75%}.photo-page>span{font-size:7px;letter-spacing:0}.story-page{padding:13% 11%}.story-page h2{font-size:18px;line-height:1.6;margin:17px 0}.story-page>p{font-size:7px;letter-spacing:1px}.story-page>div{font-size:12px;line-height:1.9}.story-page small{font-size:7px}.reader-controls{gap:5px;font-size:10px}.reader-controls button{padding:12px 8px;flex-shrink:0}.reader-controls>span{font-size:9px}.book-tools{gap:5px;flex-wrap:wrap}.book-tools>span{font-size:8px}.book-tools button{font-size:9px;padding:10px 5px}.colophon{padding:9%}.colophon p{font-size:11px}.colophon h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.hanging-print:hover{transform:none}}
.page-grip{position:absolute;top:0;bottom:0;width:34px;z-index:7;padding:0;touch-action:pan-y pinch-zoom;cursor:grab;background:transparent}.grip-left{left:0}.grip-right{right:0}.page-grip:active{cursor:grabbing}.page-grip:disabled{pointer-events:none}.page-grip:after{content:"";position:absolute;top:46%;width:3px;height:32px;border-radius:2px;background:#9c866850;opacity:0;transition:opacity .2s}.grip-left:after{left:9px}.grip-right:after{right:9px}.page-grip:hover:after,.page-grip:focus-visible:after{opacity:1}.hanging-print{touch-action:pan-y pinch-zoom;user-select:none}.hanging-print img{pointer-events:none;-webkit-user-drag:none}
/* A restrained fold shade follows the page angle, while touch edges remain easy to find. */
.turning-leaf:after{content:"";position:absolute;inset:0;pointer-events:none;backface-visibility:hidden;background:linear-gradient(90deg,#372c2000,#372c20);opacity:var(--fold-shade,0)}
@media(hover:none){.page-grip{width:44px}.page-grip:after{opacity:.45;height:27px;width:2px}.grip-left:after{left:10px}.grip-right:after{right:10px}}
@media(prefers-reduced-motion:reduce){.turning-leaf:after{display:none}}

.shelf-layout-tools{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3);color:var(--muted);font-size:13px}.shelf-layout-tools p{margin:0;max-width:75%;line-height:1.8}.shelf-layout-tools button{flex-shrink:0;font-size:12px;padding:8px 12px;border:1px solid var(--line)}#shelf-layout-status{margin-right:auto}#shelf-help{flex-shrink:0;font-size:12px}#shelf-help summary{padding:8px 0;cursor:pointer}#shelf-help[open]{position:relative}#shelf-help[open] p{position:absolute;right:0;bottom:32px;width:270px;max-width:75vw;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);box-shadow:0 8px 24px #342f2814;z-index:4}
#book-shelf{position:relative;isolation:isolate;align-items:start;padding-bottom:80px}
#book-shelf .volume-cover{position:relative;touch-action:pan-y;user-select:none;-webkit-touch-callout:none;cursor:grab}
#book-shelf .volume-cover img{pointer-events:none;-webkit-user-drag:none}
#book-shelf .volume-cover.shelf-held{transform:rotate(0deg) scale(1.025);transition:none;cursor:grabbing;box-shadow:8px 22px 30px #33251b55;outline:1px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){#book-shelf .volume-cover{transition:none}#book-shelf .volume-cover.shelf-held{transform:none}}

/* Read one landscape photograph and its story at a comfortable width on phones. */
@media(max-width:650px){
 #book-reader.single-photo #physical-book{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto;flex-direction:column}
 #book-reader.single-photo .book-stage{padding:18px 0 20px;perspective:1000px}
 #book-reader.single-photo .page{width:100%;overflow:hidden}
 #book-reader.single-photo .left-page{height:min(42dvh,360px);flex:none}
 #book-reader.single-photo .right-page{height:36dvh;min-height:190px;max-height:45dvh;flex:none}
 #book-reader.single-photo .photo-page{padding:8%;height:100%}
 #book-reader.single-photo .photo-page img{width:100%;height:82%;min-height:0;max-height:none;flex:none;object-fit:contain}
 #book-reader.single-photo .photo-page>span{font-size:12px;margin-top:12px}
 #book-reader.single-photo .story-page{overflow:auto;padding:24px;max-height:none}
 #book-reader.single-photo .story-page h2{font-size:24px;margin:12px 0 18px}
 #book-reader.single-photo .story-page>div{font-size:16px;line-height:2}
 #book-reader.single-photo .story-page small{font-size:12px;margin-top:20px}
 #book-reader.single-photo .book-spine{left:0;top:50%;width:100%;height:12px;transform:translateY(-50%);background:linear-gradient(180deg,transparent,#78644a26,transparent)}
 #book-reader.single-photo .turning-leaf{left:0;top:0;width:100%;height:100%;transform-origin:50% 50%}
 #book-reader.single-photo .leaf-back{transform:rotateX(180deg);background:#fcf8ee}
 #book-reader.single-photo .turning-leaf:after{background:linear-gradient(180deg,#372c2000,#372c20)}
 #book-reader.single-photo .grip-left,#book-reader.single-photo .grip-right{left:0;right:0;width:100%;height:44px;top:auto;bottom:0;touch-action:pan-x pinch-zoom}
 #book-reader.single-photo .grip-left{top:0;bottom:auto}
 #book-reader.single-photo .page-grip:after{left:50%;top:auto;bottom:10px;width:32px;height:3px;transform:translateX(-50%)}
 #book-reader.single-photo .grip-left:after{top:10px;bottom:auto}
 #book-reader.single-photo.portrait-photo #physical-book{width:100%;margin:auto}
 .title-page p,.book-endpaper small,.title-page small,.photo-page>span,.story-page>p,.story-page small{font-size:12px}
 .story-page>div{font-size:14px;line-height:2}
 .reader-controls button{min-height:44px;font-size:13px}
 .reader-controls>span{font-size:12px}
 .book-tools{font-size:12px;gap:8px}
 .book-tools>span,.book-tools button{font-size:12px}
 .book-tools button{min-height:44px;padding:10px}
 .book-fields label,.picker-hint,#book-sequence li>span{font-size:12px}
}
.book-tools>span,.book-tools button{font-size:12px}

#book-share-dialog{width:min(510px,94vw)}
#book-share-dialog h2{margin:0;font-size:24px}
#book-share-dialog p,#book-share-dialog label,#book-receive-status{font-size:13px;line-height:1.7}
#book-share-status{min-height:1.7em;overflow-wrap:anywhere}
#book-share-status:empty{display:none}
#book-share-url{display:block;width:100%;min-height:44px;padding:var(--space-2);margin-top:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);color:var(--ink);font-size:16px}
.book-share-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.book-share-actions button{font-size:14px;min-height:44px}

#book-gift{--gift-stage-height:clamp(140px,32dvh,218px);position:relative;text-align:center}
.book-gift-stage{height:var(--gift-stage-height);display:grid;place-items:center;overflow:hidden;
 background:radial-gradient(ellipse at 52% 60%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 65%)}
.book-gift-flight{width:min(62%,186px);max-height:100%;aspect-ratio:180/184}
.book-gift-flower{display:block;width:100%;height:100%;filter:drop-shadow(0 7px 6px #52392336)}
#book-gift .book-gift-message{font:16px/1.6 var(--serif);margin:var(--space-2) 0 var(--space-4)}
#book-gift .dark{min-height:44px;font-size:14px}
#book-gift[data-phase="arrived"] .book-gift-stage{cursor:pointer}
#book-gift-title{margin:var(--space-2) 0 var(--space-4);font:24px/1.4 var(--serif);overflow-wrap:anywhere}
#book-gift[data-phase="picked"] .book-gift-flower{transform:translateY(-5px) rotate(-12deg) scale(.83)}
@media(prefers-reduced-motion:no-preference){
 #book-gift .book-gift-flight{animation:book-gift-arrival 1.15s var(--ease) both}
 #book-gift .book-gift-flower{transition:transform .28s var(--ease)}
 #book-gift[data-phase="picked"] #book-gift-title{animation:book-gift-title-in .24s var(--ease) both}
 @keyframes book-gift-arrival{
  0%{opacity:0;transform:translate(135px,-85px) rotate(32deg) scale(.22)}
  50%{opacity:1;transform:translate(-21px,-12px) rotate(-15deg) scale(.78)}
  78%{transform:translate(6px,3px) rotate(5deg) scale(.98)}
  100%{opacity:1;transform:none}
 }
 @keyframes book-gift-title-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
}
.picker-hint,.book-fields label{font-size:12px}
.volume-cover{transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.volume-cover:hover{box-shadow:7px 15px 22px #33251b2e,inset 5px 0 8px #ffffff0d}
.photo-choice{transition:transform .2s var(--ease),outline-color .2s,box-shadow .2s}
.photo-choice:hover{transform:translateY(-3px);box-shadow:0 6px 14px #342f2814}