.album-section{margin-top:29px;position:relative;padding-bottom:10px}
.album-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:19px;padding:0 2px}
.album-title{display:flex;align-items:center;gap:13px}
.album-title>.pixel-icon{width:31px;height:31px;color:#8c9d68}
.album-title h2{font-family:"Life Archive Hand",sans-serif;font-size:27px;font-weight:400;letter-spacing:2px;color:#36543c}
.album-title p{margin-top:4px;font-size:12px;color:#858975}
.year-field{display:flex;align-items:center;gap:10px;color:#7b826b;font-size:12px}
.year-field select{font-size:15px;color:#36543c;border:1px solid #b5b99d;background:#fbf8ed;padding:8px 28px 8px 12px;border-radius:0;min-height:42px;box-shadow:2px 2px #e1dbc7}
.album-cover{position:relative;padding:10px 9px 12px;background:repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,#142e2709 0 1px,transparent 1px 4px),#596e51;box-shadow:0 3px #3d5542,0 7px #c9bd91,0 10px #6b795a,7px 16px 24px #3d4e3424;border:1px solid #425b43;border-radius:5px 5px 9px 9px;isolation:isolate}
.album-cover:before{content:"";position:absolute;inset:5px;border:1px dashed #b4b88d;opacity:.55;border-radius:3px 3px 7px 7px;pointer-events:none}
.album-bookmark{position:absolute;z-index:4;top:-8px;left:16px;background:#a48445;color:#fff5d9;font-family:"Life Archive Hand",sans-serif;font-size:13px;letter-spacing:2px;padding:14px 8px 25px;writing-mode:vertical-rl;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%);filter:drop-shadow(2px 2px 1px #514a2c44)}
.album-spread{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:450px;background:radial-gradient(#b99e6d15 .65px,transparent .9px) 0 0 / 5px 5px,#fcf7e8;box-shadow:0 2px #e8dfc5,0 5px #c6c0a5,0 7px #f7efd8;isolation:isolate;border-radius:2px 2px 5px 5px}
.album-spread:before{content:"";position:absolute;z-index:3;pointer-events:none;top:0;bottom:0;left:calc(50% - 17px);width:34px;background:linear-gradient(90deg,transparent,#b4a58025 22%,#988b6940 47%,#fffdf288 53%,#bcb29417 77%,transparent)}
.album-page{position:relative;padding:28px 29px 33px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.album-page.left-page{background:linear-gradient(90deg,#ddd2b21a,transparent 8%,transparent 88%,#d7ceb221)}
.album-page.right-page{background:linear-gradient(90deg,#d7ceb21c,transparent 12%,transparent 94%,#ddd2b21a);padding:28px 27px 33px}
.album-page-kicker{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:2px;color:#9c8c65;margin:0 0 18px;padding-left:10px}
.album-page-kicker:after{content:"";flex:1;height:1px;background:#d7ccb080}
.album-sheet{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:26px;flex:1;position:relative;padding:0 5px 8px}
.album-print{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:none;width:100%;padding:9px 9px 13px;background:#fffdf3;color:#35513d;border:1px solid #d6c9ab;box-shadow:2px 4px 0 #b6a68436,0 9px 11px #67592d13;text-align:left;min-height:0;transition:transform .2s,box-shadow .2s;transform:rotate(-1.3deg);overflow:visible}
.album-print:hover{transform:rotate(0) translateY(-4px);box-shadow:2px 7px 0 #b6a68436,0 13px 15px #67592d1c}
.album-print:focus-visible{outline-offset:5px}
.album-print:before{content:"";position:absolute;z-index:2;top:-9px;left:calc(50% - 34px);width:68px;height:22px;transform:rotate(4deg);background:repeating-linear-gradient(90deg,#b9bb8a32 0 3px,transparent 3px 6px),#d3d7a9a3;border-left:1px dashed #abae7f99;border-right:1px dashed #abae7f99}
.album-image{display:block;position:relative;width:100%;aspect-ratio:1.72;background-image:none;background-size:auto 210%;image-rendering:pixelated;background-color:#c5d0ad;box-shadow:inset 0 0 0 1px #4d674e24;overflow:hidden}
.album-photo-corner{position:absolute;width:13px;height:13px;border-top:3px solid #cdb888;border-left:3px solid #cdb888;left:5px;top:5px;filter:drop-shadow(1px 1px #fff3d2)}
.album-photo-corner:last-child{left:auto;top:auto;right:5px;bottom:5px;transform:rotate(180deg)}
.album-print-caption{display:block;padding:11px 7px 0}
.album-print-caption strong{display:block;font-family:"Life Archive Hand",sans-serif;font-size:23px;font-weight:400;letter-spacing:1px;line-height:1.5;overflow-wrap:anywhere}
.album-print-caption small{display:flex;justify-content:space-between;gap:8px;margin-top:3px;color:#8e8d77;font-size:11px;line-height:1.7;letter-spacing:.03em}
.album-print-caption small span:last-child{color:#a8894d}
.album-excerpt{overflow-wrap:anywhere;margin:18px 10px 10px;color:#7b806d;font-size:13px;line-height:2.1;background:repeating-linear-gradient(transparent 0 26px,#c7bfa440 26px 27px);padding-bottom:2px}
.album-side-stack{justify-content:space-between;gap:23px;padding:0 7px 2px}
.album-print.small-print{max-width:280px;padding:7px 7px 9px;align-self:flex-start;transform:rotate(2deg)}
.album-print.small-print:nth-child(even){align-self:flex-end;transform:rotate(-1.8deg)}
.album-print.small-print:hover{transform:rotate(0) translateY(-3px)}
.small-print .album-image{aspect-ratio:2.7;background-size:auto 280%}
.small-print .album-print-caption{padding:6px 6px 0}
.small-print .album-print-caption strong{font-size:19px;line-height:1.4}
.small-print .album-print-caption small{margin-top:1px}
.album-page-number{position:absolute;left:30px;bottom:10px;color:#a29578;font-size:10px;letter-spacing:2px}
.right-page .album-page-number{left:auto;right:30px}
.album-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px;padding:0 3px;color:#828570;font-size:12px}
.album-bottom>span{display:flex;align-items:center;gap:7px}
.album-bottom>span>.pixel-icon{width:15px;height:15px;color:#a18c4f}
.album-paging{display:flex;align-items:center;gap:13px}
.album-paging button{font-size:12px;min-height:34px;padding:4px 9px;color:#496247;background:#f8f4e8;border:1px solid #bfc3aa;box-shadow:1px 2px #d7d1b9}
.album-paging button:disabled{opacity:.38;cursor:default}
.album-page-position{font-family:"Life Archive Hand",sans-serif;color:#8b7d58;font-size:15px;min-width:45px;text-align:center}
.album-flower{position:absolute;pointer-events:none;bottom:-10px;right:-10px;color:#788c52;transform:rotate(-9deg);z-index:5;filter:drop-shadow(2px 2px #f5efd0)}
.album-flower .pixel-icon{width:43px;height:43px}
.album-flower .pixel-icon+.pixel-icon{width:29px;height:29px;color:#b49b50;margin-left:-17px;transform:translateY(4px)}
.album-spread.changing .album-page{animation:paper-settle .22s ease-out}
@keyframes paper-settle{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.home-main{padding-left:32px;padding-right:32px}.album-page{padding:30px 34px 35px}.album-page.right-page{padding:30px 34px 35px}.album-print.small-print{max-width:310px}}
@media(max-width:1050px) and (min-width:801px){.album-page{padding:24px 17px 30px}.album-page.right-page{padding:24px 17px 30px}.album-print-caption strong{font-size:20px}.album-print-caption small{flex-wrap:wrap}.small-print .album-image{aspect-ratio:2.25}.album-excerpt{font-size:12px;margin:14px 4px}.album-title h2{font-size:24px}}
@media(max-width:700px){.preview-topline{flex-wrap:wrap;gap:5px;font-size:12px}.album-toolbar{gap:12px;align-items:start}.album-title{gap:8px}.album-title>.pixel-icon{width:25px;height:25px}.album-title h2{font-size:24px}.album-title p{font-size:11px}.year-field>span{display:none}.year-field select{font-size:13px;padding:7px 18px 7px 8px}.album-spread{grid-template-columns:1fr}.album-spread:before{display:none}.album-page{padding:26px 25px 30px}.album-page.right-page{padding:18px 25px 28px;border-top:1px solid #ded4b8}.album-side-stack{gap:27px}.album-print.small-print{max-width:86%}.small-print .album-image{aspect-ratio:2.5}.album-bottom{flex-wrap:wrap;gap:12px}.album-paging{margin-left:auto}.album-title p{max-width:175px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.album-print{transition:none}.album-spread.changing .album-page{animation:none}}

/* The photo and its paper frame share one sizing box, regardless of source proportions. */
.album-image{flex:none;min-width:0;isolation:isolate}
.album-image>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;image-rendering:auto}
.album-image-sample{background-image:url('assets/life-map-personal.webp');background-position:9% 40%}
.album-image-empty{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#e8eadc 0 10px,#e1e5d6 10px 11px);color:#849775}
.album-image-empty>.pixel-icon{width:48px;height:48px}
.album-photo-corner{z-index:1}
.album-print-caption{width:100%;min-width:0}
.album-print-caption strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.album-quiet-page{display:grid;place-content:center;justify-items:center;gap:12px;flex:1;min-height:200px;text-align:center;color:#9c9d82;font-family:"Life Archive Hand",sans-serif;font-size:17px;line-height:1.8}
.album-quiet-page>.pixel-icon{width:44px;height:44px;color:#b1b597}
#home-album-empty{margin-bottom:12px}

/* The left page tells one story; four movable photo prints fill the right page. */
.album-cover{perspective:1800px}
.album-spread{min-height:570px}
.album-page,.album-page.right-page{padding-bottom:65px}
#home-album-left{justify-content:flex-start;gap:0}
.album-main-print:hover{transform:rotate(-1.3deg);box-shadow:2px 4px 0 #b6a68436,0 9px 11px #67592d13}
.album-main-print .album-print-caption strong{display:block;-webkit-line-clamp:unset;overflow:visible}
.album-main-photo{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.album-main-photo:focus-visible{outline:3px solid #9aab6d;outline-offset:3px}
.album-excerpt{white-space:pre-wrap;max-height:190px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c3ba98 transparent;line-height:27px;margin:19px 8px 8px;padding:0 5px 1px 0;flex:none}
.album-excerpt:focus-visible{outline:2px solid #aab582;outline-offset:4px}
.album-read-entry{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:3px 8px 0;padding:7px 0 5px;font-size:12px;color:#6a774f;background:transparent;border:0;border-bottom:1px dashed #b4b58d;cursor:pointer}
.album-read-entry:hover{color:#35553c;border-bottom-color:#658055}
.album-read-entry>.pixel-icon{width:16px;height:16px}
.album-side-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;align-items:start;justify-content:normal;gap:30px 16px;min-height:340px;padding:4px 3px 8px}
.album-print.small-print,.album-print.small-print:nth-child(even){max-width:none;width:100%;align-self:start;padding:6px 6px 10px}
.small-print .album-image{aspect-ratio:1.5}
.small-print .album-print-caption{padding:7px 3px 0}
.small-print .album-print-caption strong{font-size:17px;line-height:1.5}
.small-print .album-print-caption small{display:block;font-size:10px;letter-spacing:0}
.small-print .album-print-caption small span:last-child{display:none}
.album-quiet-page{grid-column:1 / -1;min-height:260px}
.album-page-number{bottom:20px}
.left-page .album-page-number{left:auto;right:25px}
.right-page .album-page-number{right:auto;left:25px}
.album-page-turn{position:absolute;z-index:7;bottom:13px;width:106px;height:96px;min-width:0;min-height:0;padding:0;border:0;background:transparent;color:#776b49;font:inherit;font-size:11px;letter-spacing:1px;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
.album-page-turn.turn-forward{right:10px}
.album-page-turn.turn-back{left:10px}
.album-turn-label{position:absolute;right:36px;bottom:15px;white-space:nowrap;z-index:3;transition:transform .36s cubic-bezier(.2,.7,.2,1),opacity .25s}
.turn-back .album-turn-label{right:auto;left:36px}
/* The paper's reverse side opens above the next sheet, instead of a button tile. */
.album-page-turn:before,.album-page-turn:after{content:"";position:absolute;right:0;bottom:0;width:29px;height:29px;pointer-events:none;transition:width .38s cubic-bezier(.2,.7,.2,1),height .38s cubic-bezier(.2,.7,.2,1),filter .38s;transform-origin:bottom right}
.album-page-turn:before{background:linear-gradient(135deg,#ad987158,#e7dbbd 65%,#f8efda);clip-path:polygon(100% 0,100% 100%,0 100%)}
.album-page-turn:after{background:linear-gradient(135deg,#fffbed 25%,#f2e8ce 60%,#c2ae805e 100%);clip-path:polygon(0 0,100% 0,0 100%);filter:drop-shadow(3px 4px 2px #5c4e3d30);border-top:1px solid #fffdf6;border-left:1px solid #fffdf6}
.turn-back:before,.turn-back:after{right:auto;left:0;transform:scaleX(-1);transform-origin:center}
.album-page-turn:not(:disabled):is(:hover,:focus-visible):before,.album-page-turn:not(:disabled):is(:hover,:focus-visible):after{width:85px;height:85px}
.album-page-turn:not(:disabled):is(:hover,:focus-visible):after{filter:drop-shadow(5px 7px 5px #5c4e3d40)}
.album-page-turn:not(:disabled):is(:hover,:focus-visible) .album-turn-label{transform:translate(-7px,-25px);opacity:.8}
.album-page-turn.turn-back:not(:disabled):is(:hover,:focus-visible) .album-turn-label{transform:translate(7px,-25px)}
.album-page-turn:focus-visible{outline:2px dashed #8a9874;outline-offset:-5px}
.album-page-turn:disabled{opacity:0;cursor:default;pointer-events:none}
.album-flower{z-index:2;opacity:.8}
.album-cover[data-turning] button{pointer-events:none}
.album-turn-leaf{position:absolute;z-index:8;top:10px;bottom:12px;left:50%;width:calc(50% - 9px);transform-origin:left center;transform-style:preserve-3d;pointer-events:none;box-shadow:9px 4px 20px #4f492c33}
.album-turn-leaf.turn-previous{left:9px;transform-origin:right center}
.album-turn-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(#b99e6d15 .65px,transparent .9px) 0 0 / 5px 5px,#fcf7e8;overflow:hidden}
.album-turn-face>.album-page{height:100%}
.album-turn-back{transform:rotateY(180deg)}
.album-photo-flight{will-change:transform;backface-visibility:hidden;position:fixed!important;z-index:1000;pointer-events:none!important;margin:0!important;max-width:none!important;transform-origin:top left;overflow:hidden;box-shadow:6px 12px 24px #31453240}
@media(max-width:1050px) and (min-width:801px){.album-side-stack{gap:27px 12px}.small-print .album-print-caption strong{font-size:15px}}
@media(max-width:700px){.album-side-stack{min-height:0;gap:29px 21px;padding:5px 2px 10px}.album-page.right-page{padding-top:25px}.album-turn-leaf{left:9px;width:calc(100% - 18px)}.album-main-print .album-print-caption strong{font-size:22px}}
@keyframes album-returned{from{opacity:.25;transform:rotate(0deg) translateY(-5px)}to{opacity:1}}
.album-returned{animation:album-returned .2s ease-out}
@media(min-width:701px){.album-main-print .album-print-caption strong{min-height:69px}.album-excerpt{height:190px}}
@media(prefers-reduced-motion:reduce){.album-page-turn:before,.album-page-turn:after,.album-turn-label{transition:none}.album-returned{animation:none}}