:root{--paper:#faf0e0;--blush:#e7c0ad;--ink:#303821;--olive:#5e6545;--terracotta:#ad6248;--faded:#8b755f;background:#e9ded0}
body{max-width:500px;margin:auto;background:var(--paper);box-shadow:0 0 60px #53342024}
.app{max-width:500px;padding:0 0 112px;container-type:inline-size;background:var(--paper)}
.library-scene{position:relative;aspect-ratio:2/7;background:#c99b70 url('assets/library-straight-ladder.webp') center/100% 100% no-repeat;isolation:isolate;container-type:inline-size}
.journal-hero{position:relative;z-index:4;margin:0;padding:6% 17% 0;background:none;border:0;box-shadow:none;isolation:auto}
.journal-hero:after,.journal-hero:before,.hero-stitch,.ribbon{display:none}.hero-top{position:absolute;top:calc(6cqw + clamp(25px,7.7cqw,38px) + 4px + clamp(37px,10.7cqw,53px) * .88 - 18px);right:18%;height:auto;border:0;margin:0;z-index:2}
.avatar{width:36px;height:36px;background:#be7b61;border:1px solid #fff1de;box-shadow:0 0 0 3px #e8c6ae80;font-size:23px}
.intro.journal-intro{padding:0;margin:0}.journal-intro .reading-motto{font-family:'Allura',cursive;font-size:clamp(25px,7.7cqw,38px);line-height:1;color:#a3573c;margin:0 0 4px;padding:0;text-transform:none;letter-spacing:0}
.intro.journal-intro h1{font-size:clamp(37px,10.7cqw,53px);font-family:'Cormorant Garamond',Georgia,serif;line-height:.88;font-weight:600;letter-spacing:-1.2px;margin:0;max-width:100%}
.journal-intro .tagline{font-size:clamp(17px,5.1cqw,25px);line-height:1.2;margin-top:6px;white-space:normal;color:#6c4b33}
.reading-meta{display:flex;align-items:center;justify-content:space-between;gap:3px;margin-top:8px;position:relative;z-index:5}
.journal-intro .stats{font-family:'Libre Caslon Display',Georgia,serif;position:static;background:none;border:0;padding:0;margin:0;font-size:clamp(11px,3.1cqw,15px);line-height:1.3;color:#826448;white-space:nowrap}.journal-intro .stats:after{display:none}
.sort-filter .filter-trigger{font-size:clamp(10px,2.7cqw,13px);padding:2px 17px 2px 1px;min-height:22px;color:#8e6e50;gap:3px}.sort-filter .filter-trigger:after{right:3px;width:5px;height:5px}.sort-filter .filter-menu{right:-5px}
.search{position:relative;z-index:4;margin:4px 17% 4px;background:#fff9ec82;height:32px;gap:6px;padding:3px 11px;border:1px solid #b996765c;border-radius:24px}
.search input:not([type=checkbox]){font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(14px,4.1cqw,19px);background:none;border:0;padding:0;height:25px;color:#78563b}.search input::placeholder{color:#a17f60}.search svg{width:18px;height:18px;color:#9d7250}
.filters{position:relative;z-index:4;margin:0 17%;gap:7px;align-items:center}.chips{gap:6px;flex:1}.chip{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(13px,3.4cqw,16px);padding:5px 9px;min-height:30px;border-color:#b49777;background:#fff7e850;flex:initial}.chip.active{background:linear-gradient(120deg,#737750,#535c3d);border-color:#5d6546}
.year-label{margin-left:auto}.year-filter{margin-left:auto}.year-filter .filter-trigger{min-width:0;padding:5px 22px 5px 7px;border-color:#c9ae8b73;background:#fff8e947;font-size:clamp(10px,2.8cqw,13px);min-height:30px}.year-filter .filter-trigger:after{right:8px;width:5px;height:5px}.filter-menu{z-index:20}
.shelf-section{display:contents}.books.bookcase{position:absolute;inset:0;width:100%;height:100%;display:block;background:none;isolation:auto;pointer-events:none;perspective:1100px;z-index:2}
.shelf-row{position:absolute;left:10.3%;right:13.8%;height:18.8%;display:flex;align-items:flex-end;gap:2%;perspective:900px;transform-style:preserve-3d;pointer-events:none}
.shelf-row-1{bottom:56.6%}.shelf-row-2{bottom:35.5%}.shelf-row-3{bottom:13.4%}
.spine{position:relative;flex:0 1 calc(18.4% * var(--book-width));min-width:0;height:var(--book-height);pointer-events:auto;transform:rotate(var(--book-lean));transform-origin:50% 100%;z-index:1;perspective:850px;--front-width:140px;--pull-x:0px}
.spine-trigger{position:absolute;inset:0;z-index:3;width:100%;height:100%;min-width:0;padding:0;border:0;border-radius:7px 4px 2px 4px;background:transparent;color:transparent;cursor:pointer;outline-offset:4px}
.spine-trigger:focus-visible{outline:2px solid #fff4cd}
.volume{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:100% 100%;transition:transform .65s cubic-bezier(.2,.7,.25,1);pointer-events:none}
.volume-spine{position:absolute;inset:0;color:var(--spine-ink);border-radius:9px 4px 2px 4px;background-color:var(--spine-color);background-image:linear-gradient(90deg,#0009 0,#fff3 8%,#ffffff09 22%,transparent 50%,#0002 79%,#0008 96%,#fff6 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='180' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E");box-shadow:2px 0 3px #21150b69,0 2px 1px #3b2416a6,inset 1px 0 2px #fff6,inset -2px 0 1px #0007;backface-visibility:hidden;overflow:hidden}
.volume-spine:after{content:'';position:absolute;left:5%;right:6%;top:1%;bottom:1%;border:1px solid var(--spine-ink);border-radius:8px 3px 2px 3px;opacity:.13;pointer-events:none}
.book-headband{position:absolute;top:0;left:7%;right:5%;height:4px;background:repeating-linear-gradient(0deg,#dac8a7 0 1px,#fbf0d9 1px 2px);border-top:1px solid #c5b18c;border-radius:60% 30% 0 0;box-shadow:0 2px 2px #0003;transform:skewX(-9deg)}
.spine-tooling:before,.spine-tooling:after{content:'';position:absolute;left:7%;right:7%;height:5px;border-block:1px solid currentColor;opacity:.6;box-shadow:0 2px 1px #0002}
.spine-tooling:before{top:6%}.spine-tooling:after{bottom:7%}
.spine-motif{position:absolute;top:11%;left:calc(50% - 8px);width:16px;height:20px;opacity:.75}
.spine-title{position:absolute;top:26%;bottom:19%;left:9%;right:9%;display:block;writing-mode:vertical-rl;text-orientation:mixed;text-align:center;width:fit-content;max-width:82%;margin:0 auto;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(13px,3.7cqw,19px);font-weight:600;line-height:1.1;letter-spacing:.08px;text-wrap:balance;overflow:hidden;text-shadow:0 1px 1px #0002}
.spine-long .spine-title{font-size:clamp(11px,3.1cqw,15px);line-height:1.05;left:6%;right:6%;max-width:88%}
.spine-author{position:absolute;bottom:9.5%;left:8%;right:8%;font-family:Georgia,serif;font-size:clamp(5px,1.45cqw,7px);line-height:1.15;letter-spacing:.35px;text-transform:uppercase;text-align:center;max-height:3.45em;overflow:hidden;opacity:.82}
.spine-favorite{position:absolute;left:calc(50% - 4px);bottom:2.7%;font-size:8px;line-height:1;opacity:.8}
.binding-1 .spine-tooling:before,.binding-1 .spine-tooling:after{height:8px;background:linear-gradient(transparent,var(--spine-accent),transparent);border-color:var(--spine-ink);opacity:.6}
.binding-1 .spine-motif{opacity:.4}.binding-2 .spine-motif{display:none}.binding-2 .spine-title{top:17%;bottom:21%;font-family:'Libre Caslon Display',Georgia,serif;font-weight:400}.binding-2 .volume-spine{background-image:linear-gradient(90deg,#0009,#fff2 12%,transparent 33%,#0007 96%),linear-gradient(0deg,var(--spine-accent) 0 6%,transparent 6% 92%,var(--spine-accent) 92%)}
.volume-front{position:absolute;left:100%;top:0;height:100%;width:var(--front-width);transform-origin:0 100%;transform:rotateY(90deg);backface-visibility:hidden;pointer-events:none;box-shadow:4px 4px 6px #311b1e4d;border-radius:2px 5px 3px 2px}
.volume-front:after{content:'';position:absolute;right:-4px;top:3px;bottom:2px;width:4px;background:repeating-linear-gradient(#c5b598 0 1px,#f8efd9 1px 3px);border-radius:0 3px 3px 0}
.volume-front .cover{position:absolute;inset:0;width:100%;height:100%;border-radius:2px 5px 3px 2px;aspect-ratio:auto;overflow:hidden;padding:10px;box-shadow:inset 5px 0 4px #0003}.volume-front .cover img{height:100%;width:100%;object-fit:cover;border-radius:inherit}.volume-front .cover-title{font-size:16px}.volume-front .cover-author{font-size:8px}
.volume-front button{visibility:hidden;pointer-events:none;position:absolute;z-index:4;border:1px solid #ddccb0;background:#fff5dfed;color:#604c35;backdrop-filter:blur(3px)}
.front-details{left:9%;right:9%;bottom:6%;min-height:30px;padding:5px 7px;border-radius:20px;font-family:'Libre Caslon Display',Georgia,serif;font-size:13px;white-space:nowrap;box-shadow:0 2px 5px #20140d3d}.return-book{top:3%;right:4%;width:24px;height:24px;padding:0;border-radius:50%;font-family:Georgia,serif;font-size:18px;line-height:20px}
.spine.is-selected{z-index:20;transform:rotate(0deg)}.shelf-row:has(.is-selected){z-index:10}
.spine.is-selected .volume{transform:translateX(var(--pull-x)) translateY(-3px) translateZ(34px) rotateY(-90deg)}
.spine.is-selected .spine-trigger{pointer-events:none}.spine.is-selected .volume-front button{visibility:visible;pointer-events:auto}
.spine:not(.is-selected):hover .volume,.spine:not(.is-selected):has(.spine-trigger:focus-visible) .volume{transform:translateY(-3px) translateZ(14px)}
.empty{position:absolute;top:27%;left:15%;right:15%;padding:25px 10px;background:#fff5e3e8;border-radius:12px;z-index:4}.empty h3{font-size:24px}
.pagination{margin:19px 24px 0;border-color:#d3bfa5;padding-top:16px}.pagination button{font-family:'Libre Caslon Display',Georgia,serif;font-size:16px;background:#fcf4e5;border-color:#c5af92}
.footer-note.signature{margin:15px 0 2px;font-size:10px;color:#967b61}
.bottom{width:min(500px,100%);background:var(--paper);border-top:1px solid #d1b594;box-shadow:0 -3px 18px #6b442817;gap:20px;padding:12px 17px max(12px,env(safe-area-inset-bottom))}.bottom .nav-item{font-size:13px;color:#76553f;min-width:57px}.bottom .nav-item svg{color:#76553f}.bottom .nav-item.selected{color:var(--olive)}.bottom .add{padding:13px 22px;box-shadow:0 3px 6px #6d5b3d25}.bottom .add span{font-size:18px}
.spine-colors{border:0;padding:0;margin:21px 0}.spine-colors legend{font-size:13px;font-weight:500}.spine-colors p{font-size:11px;color:var(--faded);margin:6px 0}.spine-colors>.text-button{margin:0 0 13px}
#spine-swatches{display:flex;gap:9px;flex-wrap:wrap}.spine-swatch{width:30px;height:40px;background:var(--swatch);border:3px solid var(--paper);border-radius:4px;box-shadow:0 0 0 1px #c8b99f;position:relative}.spine-swatch[aria-pressed=true]{outline:2px solid var(--olive);outline-offset:2px}.spine-swatch:after{content:'';position:absolute;inset:3px;border-block:1px solid #fff7d599}
@media(prefers-reduced-motion:no-preference){.spine.is-selected .volume{animation:take-from-shelf .75s cubic-bezier(.2,.65,.2,1) both}@keyframes take-from-shelf{0%{transform:translateZ(0) rotateY(0deg)}25%{transform:translateY(-3px) translateZ(35px) rotateY(-8deg)}100%{transform:translateX(var(--pull-x)) translateY(-3px) translateZ(34px) rotateY(-90deg)}}}
@media(prefers-reduced-motion:reduce){.volume{transition:none}}
@media(max-width:350px){.journal-hero{padding-top:9%;padding-inline:17%}.journal-intro .reading-motto{font-size:25px}.intro.journal-intro h1{font-size:39px}.journal-intro .tagline{font-size:17px;margin-top:8px}.reading-meta{margin-top:8px}.journal-intro .stats{font-size:10px}.sort-filter .filter-trigger{font-size:9px}.search{height:32px;margin-top:8px;margin-bottom:7px}.filters{gap:4px}.chip{font-size:12px;padding-inline:8px;min-height:28px}.chips{gap:4px}.year-filter .filter-trigger{font-size:10px;padding-left:4px;min-height:28px}.shelf-row{gap:1.3%}.bottom{gap:11px;padding-inline:12px}.bottom .add{padding-inline:17px}.bottom .add span{font-size:16px}.bottom .nav-item{min-width:51px;font-size:12px}}
@media(max-width:350px){.library-scene{aspect-ratio:2/7.7}.journal-hero{padding-top:6%;padding-inline:17%}.intro.journal-intro h1{font-size:37px}.journal-intro .tagline{margin-top:6px}.search{margin-top:4px;margin-bottom:4px}}

/* Keep the header together, just above the lower moulding. */
.shelf-world>.journal-hero,.shelf-world>.search,.shelf-world>.filters{top:clamp(3px,calc(15cqw - 49px),26px)}

/* The complete scene slides inside one uninterrupted viewport. */
.shelf-viewport{position:absolute;inset:0;z-index:2;overflow:hidden}
.shelf-world{position:absolute;inset:0;container-type:inline-size;background:#c99b70 url('assets/library-straight-ladder.webp') center/100% 100% no-repeat}
.books.bookcase{pointer-events:auto;touch-action:pan-y pinch-zoom}
.shelf-world>.journal-hero:has(.filter-trigger[aria-expanded=true]),.shelf-world>.filters:has(.filter-trigger[aria-expanded=true]){z-index:30}
.previous-world{pointer-events:none}

/* Composite two flat panels during travel; restore book depth at rest. */
.scene-moving .shelf-world{will-change:transform;backface-visibility:hidden;contain:paint}
.scene-moving .bookcase,.scene-moving .shelf-row,.scene-moving .spine{perspective:none;transform-style:flat}
.scene-moving .volume{transform:none;transform-style:flat;transition:none}
.scene-moving .volume-front{display:none}

/* The next bay begins with the exact reflected edge of the preceding bay. */
.continuation-world:before{content:'';position:absolute;inset:0 auto 0 0;width:14%;background:url('assets/library-straight-ladder.webp') right center/714.285714% 100% no-repeat;transform:scaleX(-1);mask-image:linear-gradient(to left,#000 0 82%,transparent 100%);pointer-events:none;z-index:0}

/* Give the phone header a higher starting point and room above the moulding. */
@media(max-width:500px){
 .shelf-world>.journal-hero,.shelf-world>.search,.shelf-world>.filters{top:0}
 .journal-hero{padding-top:3%}
 .hero-top{top:calc(3cqw + clamp(24px,7.4cqw,37px) + 8px + clamp(35px,10.4cqw,52px) * .88 - 18px)}
 .journal-intro .reading-motto{font-size:clamp(24px,7.4cqw,37px);margin-bottom:8px;padding-left:clamp(9px,3cqw,14px)}
 .intro.journal-intro h1{font-size:clamp(35px,10.4cqw,52px)}
 .journal-intro .tagline{font-size:clamp(16px,4.9cqw,24px);margin-top:8px}
 .reading-meta{margin-top:6px}
 .search{margin-top:5px;margin-bottom:5px}
}
@media(max-width:350px){
 .hero-top{top:calc(3cqw + clamp(24px,7.4cqw,37px) + 6px + clamp(35px,10.4cqw,52px) * .88 - 18px)}
 .journal-intro .reading-motto{margin-bottom:6px}
 .journal-intro .tagline{margin-top:6px}
}