/* 月光来信 · scenes: the arch gate, the bookshelf, the memo board, the folded letter, moonlight */

/* ── shared room frame ── */
.scene{max-width:1180px;margin:26px auto 40px;min-height:calc(100vh - 215px);position:relative}
.scene-head{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);margin-bottom:34px;padding-bottom:6px}
.scene-motto{font:25px/1.3 var(--script);color:#6c7f91;margin:0;text-align:right}
.scene-motto small{display:block;font:8px var(--mono);letter-spacing:2px;color:#7d8b97}
.scene.enter .section-name,.scene.enter .scene-motto{animation:rise .8s cubic-bezier(.2,.8,.2,1) both .05s}

/* ── 书架 ── */
.shelf-case{position:relative;max-width:1000px;margin:0 auto;padding-top:24px}
.shelf-row{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:3px;min-height:300px;padding:0 24px}
.shelf-shadow{position:absolute;left:5%;right:5%;bottom:0;height:70px;background:radial-gradient(ellipse at 50% 100%,#3f51662b,transparent 70%);pointer-events:none}
.shelf-ledge{position:relative;height:20px;background:linear-gradient(#fbfaf5 0 4px,#d6dfe5 4px 9px,#b9c7d1);box-shadow:inset 0 1px 0 #fff,0 3px 0 #a4b4c1,0 20px 26px -12px #34465c59;border-radius:2px}
.shelf-ledge:before,.shelf-ledge:after{content:'';position:absolute;top:23px;left:12%;width:16px;height:46px;background:linear-gradient(90deg,#cbd6de,#a9b9c5);clip-path:polygon(0 0,100% 0,100% 22%,45% 100%,0 100%)}
.shelf-ledge:after{left:auto;right:12%;transform:scaleX(-1)}
.shelf-plate{position:absolute;left:50%;top:5px;translate:-50% 0;font:7px/1 var(--mono);letter-spacing:3px;white-space:nowrap;padding:3px 12px 2px;background:linear-gradient(#efe6cc,#cdbd94);color:#5d5034;border:1px solid #b9a87c;box-shadow:0 1px 1px #0002}
.spine{position:relative;flex:none;width:var(--t);height:var(--h);padding:17px 0 15px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:var(--foil);background:linear-gradient(90deg,#ffffff3d,transparent 22%,transparent 70%,#00000029),repeating-linear-gradient(0deg,#ffffff10 0 1px,transparent 1px 3px),var(--cloth);border-radius:3px 3px 1px 1px;box-shadow:inset 0 0 0 1px #00000014,1px 0 1px #34465c26;transform-origin:50% 100%;transition:translate .4s cubic-bezier(.2,.8,.2,1),rotate .4s,opacity .2s}
.spine:hover,.spine:focus-visible{color:var(--foil)}
.spine:before,.spine:after{content:'';position:absolute;left:4px;right:4px;height:4px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.75}
.spine:before{top:8px}.spine:after{bottom:8px}
.spine b{writing-mode:vertical-rl;font-size:13px;font-weight:500;letter-spacing:4px;line-height:1;margin:auto 0;white-space:nowrap}
.spine em{font-style:normal;font-size:14px;line-height:1}
.spine small{font:7px var(--mono);letter-spacing:1px;opacity:.85}
.spine.real:hover,.spine.real:focus-visible{translate:0 -16px}
.spine.filler{cursor:default}
.spine.filler b{font:italic 11px var(--serif);letter-spacing:2px}
.spine.filler:hover{translate:0 -4px}
.spine.lean{rotate:-8deg;transform-origin:0 100%;margin-left:26px}
.spine.lean:hover{translate:0 0;rotate:-6deg}
.spine.ribbon i{position:absolute;left:38%;bottom:-30px;width:6px;height:38px;background:#7f98b0;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
.spine.out{opacity:0;pointer-events:none;transition:none}
.spine-tip{position:absolute;left:50%;bottom:calc(100% + 24px);translate:-50% 6px;opacity:0;pointer-events:none;white-space:nowrap;writing-mode:horizontal-tb;background:var(--ink);color:#f5f4ed;font:11px/1.6 var(--sans);letter-spacing:2px;padding:5px 11px;transition:opacity .25s,translate .25s;z-index:3}
.spine-tip small{display:block;font:8px var(--mono);letter-spacing:1.5px;opacity:.7}
.spine.real:hover .spine-tip,.spine.real:focus-visible .spine-tip{opacity:1;translate:-50% 0}
.shelf-deco{flex:none;align-self:flex-end;pointer-events:none;filter:drop-shadow(0 4px 4px #34465c26)}
.shelf-deco.lamb{width:88px;margin-right:16px}
.shelf-deco.angel{width:98px;margin-left:12px}
.shelf-rose{position:absolute;left:21%;bottom:-18px;width:94px;rotate:-12deg;z-index:2;pointer-events:none;filter:drop-shadow(0 6px 5px #34465c33)}
.stack{flex:none;display:flex;flex-direction:column;align-items:center;margin-left:18px}
.stack img{width:76px;margin-bottom:-4px;rotate:-6deg;position:relative;z-index:1;filter:drop-shadow(0 4px 4px #34465c2b)}
.flat{height:var(--h);width:var(--w);display:flex;align-items:center;padding-left:12px;font:7px var(--mono);letter-spacing:2px;color:var(--foil);background:linear-gradient(#ffffff30,transparent 40%,#00000021),var(--cloth);border-radius:2px;box-shadow:inset 0 0 0 1px #00000012}
.flat:nth-child(3){translate:6px 0}.flat:nth-child(4){translate:-4px 0}
.shelf-lower{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:44px;max-width:1000px;margin:70px auto 0;align-items:start}
.fiche{position:relative;padding:16px 20px 10px;background:linear-gradient(#f8f4e8,#efe9d8);border:1px solid #dcd3bd;box-shadow:3px 4px 0 #d8d0bc88,0 16px 28px -14px #34465c47;rotate:-.6deg}
.fiche:before{content:'';position:absolute;top:-1px;left:50%;width:44px;height:14px;margin-left:-22px;border-radius:0 0 22px 22px;background:#e5eaeb;box-shadow:inset 0 2px 2px #0000001c}
.fiche-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;font:7px var(--mono);letter-spacing:2px;color:#7c6f52;border-bottom:2px solid #b9a98a;padding:6px 0 9px}
.fiche-head b{font:16px var(--serif);letter-spacing:5px;color:#5a4d34;font-weight:500}
.fiche-head span:last-child{text-align:right}
.fiche-row{display:grid;grid-template-columns:34px 1fr 76px 62px;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 4px;border-bottom:1px solid #c7b99a59;transition:background .2s}
.fiche-row>span:first-child{font:9px var(--mono);color:#8a7d60;border-right:1px solid #c79a9a8c;align-self:stretch;display:flex;align-items:center}
.fiche-row.cols{font:7px var(--mono);letter-spacing:1.5px;color:#8a7d60;padding:7px 4px}
.fiche-row strong{display:block;font-size:13px;font-weight:500;letter-spacing:1.5px;line-height:1.5}
.fiche-row small{font:7px var(--mono);letter-spacing:1px;color:#8b8a80}
button.fiche-row:hover{background:#ffffff8c}
.stamp{justify-self:center;font:11px/1.4 var(--sans);letter-spacing:2px;padding:2px 7px;border:1.5px solid currentColor;border-radius:3px;rotate:-4deg;opacity:.85}
.stamp.want{color:#8c99a6;border-style:dashed}
.stamp.reading{color:#4d6c8c;rotate:3deg}
.stamp.done{color:#6e8a74;border:3px double currentColor;rotate:-7deg}
.date-stamp{font:9px var(--mono);letter-spacing:1px;color:#5f7d9b;rotate:4deg;opacity:.8}
.shelf-note{position:relative;padding:24px 22px 20px;background:#f7f6efed;border:1px solid #dce0df;box-shadow:2px 4px 8px #5665791b;rotate:2.5deg;font-size:13px;line-height:2.1;margin-top:14px}
.shelf-note:before{content:'';position:absolute;width:66px;height:20px;top:-11px;left:36%;background:#d9e2e29c;rotate:-4deg;border-left:1px dashed #c4d1d3;border-right:1px dashed #c4d1d3}
.shelf-note p{margin:0}
.shelf-note .script{display:block;font-size:24px;line-height:1.3;color:#7c8b95;margin:8px 0 10px}
.shelf-note small{font:8px var(--mono);letter-spacing:1.5px;color:#7d8b97}
.shelf.enter .spine,.shelf.enter .stack,.shelf.enter .shelf-deco{animation:spine-in .75s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(.12s + var(--i,6) * 45ms)}
.shelf.enter .fiche,.shelf.enter .shelf-note{animation:rise .9s cubic-bezier(.2,.8,.2,1) both .5s}
@keyframes spine-in{0%{opacity:0;translate:0 -36px}65%{opacity:1;translate:0 3px}100%{opacity:1;translate:0 0}}

/* the book that leaves the shelf */
.book-stage{position:fixed;inset:0;z-index:80;perspective:1800px;display:none}
.book-stage.on{display:block}
.book-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#f2f4f0de,#c5d1dae0);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0}
.book-close{position:absolute;right:28px;top:24px;z-index:2;font:10px var(--mono);letter-spacing:2px;padding:8px 14px;border:1px solid var(--line);background:#f6f6f0cc;opacity:0;transition:opacity .4s}
.book-stage.ready .book-close{opacity:1}
.book3d{position:absolute;left:50%;top:50%;width:300px;height:450px;margin:-225px 0 0 -150px;transform-style:preserve-3d}
.book3d>div{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.b-back{inset:0;border-radius:4px 2px 2px 4px;background:linear-gradient(90deg,transparent 88%,#00000026),var(--cloth);transform:rotateY(180deg) translateZ(calc(var(--t) / 2))}
.b-spine{top:0;left:50%;width:var(--t);height:100%;margin-left:calc(var(--t) / -2);transform:rotateY(-90deg) translateZ(150px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:34px 0 26px;color:var(--foil);background:linear-gradient(90deg,#ffffff3d,transparent 25%,transparent 70%,#00000033),var(--cloth)}
.b-spine b{writing-mode:vertical-rl;font-size:26px;letter-spacing:8px;font-weight:500}
.b-spine em{font-style:normal;font-size:26px}
.b-spine small{font:9px var(--mono);letter-spacing:2px;writing-mode:vertical-rl}
.b-edge{top:6px;left:50%;width:calc(var(--t) - 6px);height:438px;margin-left:calc((var(--t) - 6px) / -2);transform:rotateY(90deg) translateZ(147px);background:repeating-linear-gradient(90deg,#f6f2e7 0 1px,#ddd6c6 1px 2px)}
.b-top,.b-bottom{left:4px;top:50%;width:290px;height:calc(var(--t) - 6px);margin-top:calc((var(--t) - 6px) / -2);background:repeating-linear-gradient(0deg,#f6f2e7 0 1px,#ddd6c6 1px 2px);transform:rotateX(90deg) translateZ(222px)}
.b-bottom{transform:rotateX(-90deg) translateZ(222px)}
.b-page{left:3px;top:6px;width:291px;height:438px;overflow:hidden;transform:translateZ(calc(var(--t) / 2 - 2px));background:linear-gradient(90deg,#34465c1c,transparent 9%),linear-gradient(165deg,#fcfaf3,#f1eee3)}
.b-page-in{height:100%;display:flex;flex-direction:column;padding:30px 26px 22px 30px}
.b-page-in>*{opacity:0;translate:0 6px;filter:blur(3px);transition:opacity .6s,translate .6s,filter .6s;transition-delay:calc(var(--i,0) * 90ms)}
.book3d.open .b-page-in>*{opacity:1;translate:0 0;filter:none}
.b-page .eyebrow{font-size:7px;letter-spacing:1.6px;color:#7d8b97}
.b-page h3{font-size:22px;font-weight:500;letter-spacing:3px;margin:8px 0 0;color:var(--ink)}
.b-ornament{color:#9babb9;letter-spacing:10px;margin:4px 0 12px}
.b-page p{font-size:12px;line-height:2;color:#5f7083;margin:0 0 10px;text-indent:2em}
.b-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.b-actions .text-button{font-size:10px;letter-spacing:1px;padding:4px 0}
.book3d>.b-cover{inset:0;transform-origin:0 50%;transform:translateZ(calc(var(--t) / 2));transform-style:preserve-3d;backface-visibility:visible;-webkit-backface-visibility:visible}
.b-cover-out,.b-cover-in{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px 4px 4px 2px}
.b-cover-out{padding:20px;color:var(--foil);background:linear-gradient(90deg,#00000033 0,#ffffff26 3%,transparent 7%),repeating-linear-gradient(0deg,#ffffff0e 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#0000000b 0 1px,transparent 1px 3px),var(--cloth);box-shadow:inset 0 0 0 1px #0000001a}
.cv-frame{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 12px 14px;text-align:center;border:1px solid currentColor;outline:1px solid currentColor;outline-offset:-6px}
.cv-frame img{width:64%;max-height:250px;object-fit:contain;filter:drop-shadow(0 3px 5px #0000003d)}
.cv-frame strong{font-size:21px;letter-spacing:6px;font-weight:500}
.cv-en{font:8px var(--mono);letter-spacing:2.5px}
.cv-mark{font-size:16px;line-height:1}
.b-cover-in{transform:rotateY(180deg);display:grid;place-items:center;background:radial-gradient(circle at 25% 25%,#9fb3c666 0 1.5px,transparent 2px) 0 0/22px 22px,radial-gradient(circle at 75% 75%,#c9b98f66 0 1.5px,transparent 2px) 0 0/22px 22px,linear-gradient(200deg,#eef1ee,#e1e8ea)}
.bookplate{width:64%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;text-align:center;background:#fbf9f1;border:1px solid #cfc6b0;outline:1px solid #cfc6b0;outline-offset:3px;box-shadow:0 3px 8px #34465c26}
.bookplate img{width:58%}
.bookplate .script{font-size:27px;line-height:1}
.bookplate .eyebrow{font-size:8px}
.bookplate small{font:7px var(--mono);letter-spacing:1.4px;color:#7d8b97}

/* ── 收藏: a French ribbon memo board ── */
.board-wrap{max-width:1120px;margin:0 auto;padding:46px 18px 0}
.board{position:relative;min-height:540px;border-radius:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cdefs%3E%3CradialGradient id='p' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fffdf8'/%3E%3Cstop offset='.55' stop-color='%23e8e1d1'/%3E%3Cstop offset='1' stop-color='%23b3a78c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='none'%3E%3Cpath stroke='%23cdc2aa' stroke-width='15' d='M0 -180L360 180M-180 -180L360 360M-180 0L180 360M-180 180L180 -180M-180 360L360 -180M0 360L360 0'/%3E%3Cpath stroke='%23f1ebdf' stroke-width='12' d='M0 -180L360 180M-180 -180L360 360M-180 0L180 360M-180 180L180 -180M-180 360L360 -180M0 360L360 0'/%3E%3Cpath stroke='%23c3b597' stroke-width='.8' stroke-dasharray='3 3' d='M0 -180L360 180M-180 -180L360 360M-180 0L180 360M-180 180L180 -180M-180 360L360 -180M0 360L360 0'/%3E%3C/g%3E%3Cg fill='url(%23p)' stroke='%23a89c82' stroke-width='.6'%3E%3Ccircle r='6'/%3E%3Ccircle cx='180' r='6'/%3E%3Ccircle cy='180' r='6'/%3E%3Ccircle cx='180' cy='180' r='6'/%3E%3Ccircle cx='90' cy='90' r='6'/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 180px,repeating-linear-gradient(0deg,#ffffff17 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#34465c0d 0 1px,transparent 1px 3px),#c4d1db;box-shadow:inset 0 0 46px #34465c40,inset 0 0 0 1px #ffffff59,0 0 0 12px #f0ece1,0 0 0 13px #c7cdd1,0 0 0 18px #e4e0d4,0 32px 50px -16px #34465c5e}
.board-bow{position:absolute;left:50%;top:-74px;width:136px;margin-left:-68px;z-index:6;pointer-events:none;filter:drop-shadow(0 6px 6px #34465c38)}
.board-sprig{position:absolute;right:-34px;bottom:-40px;width:112px;rotate:24deg;z-index:6;pointer-events:none;filter:drop-shadow(0 6px 6px #34465c30)}
.board-label{position:absolute;left:3%;top:36px;width:206px;padding:22px 18px 18px;text-align:center;background:linear-gradient(160deg,#f6f2e6,#ece6d6);rotate:-3deg;box-shadow:0 1px 2px #34465c2e,0 14px 24px -10px #34465c5c;z-index:1}
.board-label:before{content:'';position:absolute;top:-8px;left:50%;width:15px;height:15px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 8%,#c9b98f 32%,#8a7a52 78%);box-shadow:3px 5px 4px -1px #34465c59}
.board-label .eyebrow{font-size:8px;color:#7d8b97}
.board-label .script{display:block;font-size:35px;line-height:1.15;margin:6px 0 4px}
.board-label small{font:9px var(--mono);letter-spacing:2px;color:#7d8b97}
.board-hint{text-align:center;font-size:10px;letter-spacing:2px;color:#7f8c97;margin:40px 0 0}
.board-empty{position:absolute;left:50%;top:50%;width:min(340px,80%);translate:-50% -45%;padding:30px 26px 24px;text-align:center;background:#fbfaf4;rotate:1.5deg;box-shadow:0 1px 2px #34465c2e,0 16px 26px -10px #34465c5e;font-size:12px;line-height:2.1;color:#6c7a87}
.board-empty .script{display:block;font-size:34px;color:#7d91a3;line-height:1.2}
.board-empty p{margin:6px 0 14px}
.memo{position:absolute;left:var(--x);top:var(--y);width:224px;padding:20px 18px 12px;rotate:var(--r);color:var(--ink);background:linear-gradient(160deg,#fbfbf7,#eef2f2);box-shadow:0 1px 2px #34465c2e,0 14px 24px -10px #34465c66;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:rotate .35s,box-shadow .35s,scale .25s}
.memo:hover{rotate:calc(var(--r) * .4);box-shadow:0 2px 3px #34465c2e,0 22px 34px -12px #34465c73}
.memo.lifted{cursor:grabbing;scale:1.05;rotate:calc(var(--r) * .2);box-shadow:0 34px 44px -14px #34465c85}
.memo.leaving{pointer-events:none}
.memo.lined{background:linear-gradient(90deg,transparent 24px,#d9a5a566 24px 25px,transparent 25px),repeating-linear-gradient(#fbfaf4 0 21px,#b9c8d466 21px 22px) 0 9px}
.memo.kraft{background:linear-gradient(160deg,#ede7d8,#e1d9c5)}
.memo.book{width:262px;background:linear-gradient(160deg,#f8f6ef,#eeebe0)}
.memo-meta{display:flex;justify-content:space-between;gap:8px;font:7px/1.6 var(--mono);letter-spacing:1.2px;color:#7f8d99}
.memo h3{font-size:15px;font-weight:500;letter-spacing:1px;line-height:1.55;margin:8px 0 6px}
.memo p{margin:0;font-size:11px;line-height:1.9;color:#6c7a87;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.memo-book{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center}
.memo-book img{width:70px;filter:drop-shadow(0 2px 3px #34465c38)}
.memo-book p{font:8px var(--mono);letter-spacing:1px}
.memo-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:7px;border-top:1px dashed #a5b4c180}
.memo-foot button{font-size:10px;letter-spacing:1.5px;padding:2px 0;color:#4d6680}
.tape{position:absolute;top:-10px;left:50%;width:86px;height:22px;margin-left:-43px;background:#dfe7e9c7;border-left:1px dashed #c4d1d3;border-right:1px dashed #c4d1d3;rotate:var(--tr,-3deg);box-shadow:0 1px 1px #34465c17}
.tape.c1{top:-4px;left:-18px;margin:0;width:62px;rotate:-40deg}
.tape.c2{top:auto;bottom:-4px;left:auto;right:-18px;margin:0;width:62px;rotate:-40deg}
.pin{position:absolute;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 8%,#9fb3c6 30%,#4f6680 76%);box-shadow:3px 5px 4px -1px #34465c59}
.board-page.enter .memo{animation:memo-in .8s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(.3s + var(--i,0) * 90ms)}
.board-page.enter .board{animation:rise .9s cubic-bezier(.2,.8,.2,1) both .05s}
.board-page.enter .board-bow{animation:drop .9s cubic-bezier(.3,.7,.3,1) both .5s}
@keyframes memo-in{0%{opacity:0;translate:0 -50px;scale:1.08}65%{opacity:1;translate:0 4px;scale:.99}100%{opacity:1;translate:0 0;scale:1}}

/* ── 关于: a letter folded in three ── */
.letter-scene{position:relative;max-width:780px;margin:0 auto;padding:10px 0 40px;perspective:1700px;display:flex;flex-direction:column;align-items:center}
.fold{position:relative;width:min(600px,100%);transform-style:preserve-3d;transform:translateY(var(--lift,0px)) rotateX(var(--tilt,0deg)) rotateZ(var(--spin,0deg));transition:transform 1.3s cubic-bezier(.4,0,.2,1)}
.fold.f-top{--lift:calc(var(--ph) * -.72);--tilt:22deg;--spin:-3deg;cursor:pointer}
.fold-panel{position:relative;height:var(--ph);transform-style:preserve-3d;transition:transform 1s cubic-bezier(.55,0,.25,1)}
.fold-panel.p0{transform-origin:50% 100%;transform:rotateX(0deg) translateZ(-2px)}
.fold-panel.p2{transform-origin:50% 0;transform:rotateX(0deg) translateZ(-1px)}
.fold.f-top .p0{transform:rotateX(-180deg) translateZ(-2px)}
.fold.f-bottom .p2{transform:rotateX(180deg) translateZ(-1px)}
.face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:repeating-linear-gradient(90deg,#34465c06 0 1px,transparent 1px 5px),linear-gradient(172deg,#fdfcf7,#f2efe5);box-shadow:inset 0 0 0 1px #e6e2d6}
.face.back{transform:rotateX(180deg);background:repeating-linear-gradient(90deg,#34465c08 0 1px,transparent 1px 5px),linear-gradient(8deg,#f3f0e6,#e9e5d9)}
.p0 .face.front:after,.p1 .face.front:after,.p2 .face.front:after{content:'';position:absolute;inset:0;pointer-events:none}
.p0 .face.front:after{background:linear-gradient(transparent 90%,#34465c12)}
.p1 .face.front:after{background:linear-gradient(#34465c0f,transparent 8%,transparent 92%,#34465c0f)}
.p2 .face.front:after{background:linear-gradient(#34465c12,transparent 10%)}
.fold-panel.p1:before{content:'';position:absolute;inset:-6% 3%;background:#34465c;filter:blur(26px);opacity:.16;transform:translateZ(-20px);pointer-events:none}
.lt-body{position:absolute;left:0;right:0;top:calc(var(--i,0) * var(--ph) * -1);padding:44px 58px 52px;color:#5f7083}
.lt-measure{position:absolute;left:0;right:0;width:min(600px,100%);margin:auto;visibility:hidden;pointer-events:none}
.lt-measure .lt-body{position:static}
.lt-head{display:flex;justify-content:space-between;gap:12px;font:8px var(--mono);letter-spacing:2px;color:#7f8d99;border-bottom:1px solid var(--line);padding-bottom:10px}
.lt-crest{text-align:center;color:#8fa2b4;letter-spacing:8px;margin:18px 0 4px}
.lt-body .lt-dear{font:40px/1.2 var(--script);color:var(--ink);margin:4px 0 12px}
.lt-body h2{font-size:21px;font-weight:500;letter-spacing:4px;color:var(--ink);margin:0 0 16px}
.lt-body p{font-size:13.5px;line-height:2.25;margin:0 0 14px;text-indent:2em}
.lt-body p.lt-dear,.lt-body p.lt-sign{text-indent:0}
.lt-close{position:relative;margin-top:20px}
.lt-sign{font:36px/1.2 var(--script)!important;color:var(--ink);text-align:right;padding-right:84px}
.lt-wax{position:absolute;right:4px;top:50%;margin-top:-31px}
.lt-ps{margin-top:24px;padding-top:14px;border-top:1px dashed #a5b4c18c}
.lt-ps .eyebrow{display:block;font-size:8px;color:#7f8d99;margin-bottom:4px}
.lt-link{display:flex;gap:14px;width:100%;text-align:left;padding:6px 0;font-size:12px;letter-spacing:1px;color:#4d6680}
.lt-link span{font:9px var(--mono);color:#8a98a4;padding-top:3px}
.lt-foot{text-align:center;font-size:10px;letter-spacing:3px;color:#8796a2;margin-top:22px}
.lt-body>*:not(.lt-head):not(.lt-crest),.lt-close>*{opacity:0}
.fold.inked .lt-body>*:not(.lt-head):not(.lt-crest){animation:ink-in .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--k,0) * .2s)}
.fold.inked .lt-sign{animation:ink-in .01s forwards calc(var(--k) * .2s),write 1.5s cubic-bezier(.55,0,.2,1) both calc(var(--k) * .2s)}
.fold.inked .lt-wax{animation:stamp .55s cubic-bezier(.55,0,.8,.3) forwards calc(var(--k) * .2s + 1.2s)}
@keyframes ink-in{from{opacity:0;filter:blur(4px);translate:0 6px}to{opacity:1;filter:blur(0);translate:0 0}}
@keyframes stamp{0%{opacity:0;scale:2.6;rotate:-24deg}75%{opacity:1;scale:.92;rotate:-8deg}100%{opacity:1;scale:1;rotate:-10deg}}
.wax{display:grid;place-items:center;width:62px;height:62px;border-radius:47% 53% 51% 49%/52% 46% 54% 48%;background:radial-gradient(circle at 34% 30%,#b0c2d2 0,#6f86a0 36%,#465d77 76%);box-shadow:inset 0 0 0 5px #5d7590,inset 0 0 0 7px #8ea4ba66,0 3px 6px #22334459;color:#e9eff4;font:28px/1 var(--script);text-shadow:0 -1px 0 #34465c,0 1px 0 #c3d1de}
.lt-outside{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;text-align:center;color:#6c7d8f}
.lt-outside .eyebrow{font-size:8px}
.lt-outside .script{font-size:34px;line-height:1.2;color:var(--ink);margin:4px 0}
.lt-outside small{font-size:11px;letter-spacing:3px}
.seal{position:relative;width:62px;height:62px;margin-top:12px;padding:0}
.seal .wax{position:absolute;inset:0;transition:translate .5s cubic-bezier(.3,.6,.4,1),rotate .5s,opacity .45s}
.seal .h1{clip-path:polygon(0 0,52% 0,44% 30%,56% 52%,46% 74%,54% 100%,0 100%)}
.seal .h2{clip-path:polygon(52% 0,100% 0,100% 100%,54% 100%,46% 74%,56% 52%,44% 30%)}
.seal.cracked .h1{translate:-16px 10px;rotate:-20deg;opacity:0}
.seal.cracked .h2{translate:16px 12px;rotate:18deg;opacity:0}
.fold.f-top .seal{animation:seal-pulse 2.4s ease-in-out infinite}
@keyframes seal-pulse{50%{scale:1.06}}
.fold-hint{position:absolute;left:0;right:0;top:calc(var(--ph) * 1.36 + 64px);text-align:center;font-size:11px;letter-spacing:4px;color:#6f7f8d;transition:opacity .5s;pointer-events:none}
.letter-scene.open .fold-hint{opacity:0}
.refold{margin-top:34px;opacity:0;transition:opacity .6s 2s;pointer-events:none}
.letter-scene.open .refold{opacity:1;pointer-events:auto}
.lt-deco{position:absolute;pointer-events:none;filter:drop-shadow(0 6px 8px #34465c33);transition:opacity .9s .4s,translate 1.2s cubic-bezier(.2,.8,.2,1) .4s}
.lt-deco.env{width:176px;right:-4px;top:calc(var(--ph) * 2.35);rotate:-9deg}
.lt-deco.sprig{width:98px;left:20px;top:-14px;rotate:-24deg;z-index:3}
.lt-deco.pen{width:112px;right:-18px;top:calc(var(--ph) * .85);rotate:14deg;z-index:3}
.letter-scene:not(.open) .lt-deco{opacity:0;translate:0 24px;transition-delay:0s}
/* animate the wrapper: an opacity animation on .fold itself would flatten its 3D */
.letter-page.enter .letter-scene{animation:fold-drop 1s cubic-bezier(.3,.7,.3,1) both .15s}
@keyframes fold-drop{from{opacity:0;translate:0 -50px}}

/* ── first visit: the arch gate ── */
.gate{position:fixed;inset:0;z-index:200;overflow:hidden;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;background:radial-gradient(ellipse at 50% 36%,#f6f5ee 0,#e7ecec 52%,#d2dce3 100%);transition:opacity 1s ease}
.gate.leaving{opacity:0;pointer-events:none}
.gate>*{position:absolute}
.gate-wash{inset:0;background:radial-gradient(circle at 12% 18%,#c9d9e766,transparent 40%),radial-gradient(circle at 88% 78%,#dcd5e866,transparent 42%),radial-gradient(circle at 80% 12%,#d7e4dd55,transparent 36%)}
.gate-floor{background:radial-gradient(ellipse at 50% 0,#fffdf3f0 0,#fbf8eda0 30%,transparent 70%);transform-origin:50% 0}
.gate-view{overflow:hidden;background:linear-gradient(#8ea4ba,#a9bccb 42%,#6f879e)}
.gate-sea{position:absolute;left:0;top:0;transform-origin:0 0}
.gate-sea img{display:block;width:100%;height:100%}
.gate-moon{position:absolute;left:51%;top:20%;width:26%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#fffef4d9 0,#fffef466 16%,transparent 60%);mix-blend-mode:screen;animation:moon-breathe 5s ease-in-out infinite}
.gate-shimmer{position:absolute;left:47.4%;top:34%;width:7.4%;height:30%;background:repeating-linear-gradient(0deg,transparent 0 5px,#ffffffc0 5px 6px,transparent 6px 11px);mix-blend-mode:screen;opacity:.5;-webkit-mask:radial-gradient(ellipse 50% 50%,#000 25%,transparent 100%);mask:radial-gradient(ellipse 50% 50%,#000 25%,transparent 100%);animation:shimmer 2.6s linear infinite}
@keyframes shimmer{to{background-position:0 22px}}
@keyframes moon-breathe{50%{opacity:.72;scale:1.08}}
.gate-arch,.gate-flora,.gate-fly{left:0;top:0;will-change:transform}
.gate-arch{filter:drop-shadow(0 20px 26px #34465c38)}
.gate-flora{filter:drop-shadow(0 12px 14px #34465c2b)}
.gate-fly{perspective:500px}
.gate-fly img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 8px 6px #34465c33)}
.gate-fly .wl{clip-path:inset(0 50% 0 0)}
.gate-fly .wr{clip-path:inset(0 0 0 50%)}
.gate-text{left:max(5vw,24px);top:13vh;width:min(27vw,330px);pointer-events:none;color:var(--ink)}
.gate-text .eyebrow{font-size:9px;color:#6f8090}
.gate-text h2{font:46px/1.15 var(--script);font-weight:400;margin:14px 0 18px;animation:write 1.9s cubic-bezier(.55,0,.2,1) both .7s}
.gate-text p{margin:0;font-size:13px;line-height:2.2;letter-spacing:2px;color:#5f7083;animation:rise 1s cubic-bezier(.2,.8,.2,1) both 1.6s}
.gate-stamp{right:max(5vw,24px);top:14vh;width:88px;height:88px;border:1px solid #7b8b9c;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:8px/1.6 var(--mono);letter-spacing:1px;color:var(--ink);rotate:12deg;opacity:.7;pointer-events:none}
.gate-stamp strong{font:26px var(--serif);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 12px}
.gate-hint{left:0;right:0;bottom:3.5vh;margin:0;text-align:center;font-size:11px;letter-spacing:4px;color:#5f7083;pointer-events:none;animation:rise 1s cubic-bezier(.2,.8,.2,1) both 2.2s}
.gate-hint:after{content:'';display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(#5f7083,transparent);transform-origin:top;animation:hint-drop 2.2s ease-in-out infinite}
@keyframes hint-drop{0%{scale:1 0;opacity:1}60%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
.gate-skip{right:22px;top:20px;z-index:3;font:10px var(--mono);letter-spacing:2px;padding:8px 14px;border:1px solid var(--line);background:#f6f6f0b8}
.gate-skip:hover{background:#fff}
.gate-flash{inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),#fffef9 0,#f9f7ef 38%,#eef1ef 100%)}
.gate-in{animation:gate-in 1.5s cubic-bezier(.2,.7,.2,1) both}
.gate-flora.left{animation:flora-l 1.7s cubic-bezier(.2,.7,.2,1) both .25s}
.gate-flora.right{animation:flora-r 1.7s cubic-bezier(.2,.7,.2,1) both .35s}
@keyframes gate-in{from{opacity:0;translate:0 34px}}
@keyframes flora-l{from{opacity:0;translate:-70px 50px}}
@keyframes flora-r{from{opacity:0;translate:70px 50px}}
.gate-again{display:flex;align-items:center;gap:8px;margin-top:16px;padding:7px 16px 7px 12px;font:12px var(--sans);letter-spacing:2px;color:#3f566e;background:#f6f7f2c4;border:1px solid #a4b1bc;border-radius:16px 16px 3px 3px;box-shadow:0 0 0 3px #f8f9f566,0 4px 10px #5e718017;transition:background .25s,translate .25s}
.gate-again:hover{background:#fffdf5;translate:0 -2px}
.gate-again svg{width:15px;height:15px}

/* ── a slow band of moonlight drifting across the room ── */
.moonbeam{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.moonbeam i{position:absolute;top:-20%;bottom:-20%;left:0;width:36vw;background:linear-gradient(90deg,transparent,#fffdf233 28%,#fffef87a 50%,#fffdf233 72%,transparent);mix-blend-mode:soft-light;transform:translateX(-60vw) skewX(-20deg);animation:beam 26s cubic-bezier(.45,0,.55,1) infinite 5s}
.moonbeam b{position:absolute;top:-20%;bottom:-20%;left:0;width:12vw;background:linear-gradient(90deg,transparent,#fffef620 50%,transparent);mix-blend-mode:screen;transform:translateX(-60vw) skewX(-20deg);animation:beam 26s cubic-bezier(.45,0,.55,1) infinite 5.25s}
@keyframes beam{0%{transform:translateX(-60vw) skewX(-20deg)}42%,100%{transform:translateX(140vw) skewX(-20deg)}}

/* ── the music box switch in the top bar ── */
.sound-toggle{position:relative}
.sound-toggle:before{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px dashed #8da0b2;opacity:0;transition:opacity .4s}
.sound-toggle.playing:before{opacity:1;animation:orbit-drift 9s linear infinite}
.sound-toggle.muted{opacity:.55}
.sound-toggle.muted:after{content:'';position:absolute;left:8px;right:8px;top:50%;height:1px;background:currentColor;rotate:-40deg}

@media(max-width:930px){.shelf-lower{grid-template-columns:1fr;max-width:620px}.shelf-note{max-width:360px;justify-self:center}.stack,.shelf-deco.lamb{display:none}.lt-deco.pen{display:none}}
@media(max-width:650px){
.scene{margin-top:14px}.scene-head{flex-wrap:wrap;margin-bottom:24px}.scene-motto{font-size:19px}
.shelf-row{padding:0;gap:2px;min-height:250px}.spine{height:calc(var(--h) * .82)}.spine.wide,.shelf-deco.angel{display:none}.shelf-rose{width:70px;left:6%}.spine b{font-size:11px;letter-spacing:3px}
.fiche{padding:14px 12px 8px}.fiche-head{grid-template-columns:1fr;text-align:center}.fiche-head span{display:none}.fiche-row{grid-template-columns:26px 1fr 64px;gap:8px}.fiche-row .date-stamp,.fiche-row.cols>span:last-child{display:none}
.board-wrap{padding:40px 0 0}.board{display:flex;flex-direction:column;gap:30px;padding:70px 18px 34px;min-height:0!important}
.memo,.board-label{position:relative;left:auto!important;top:auto!important;width:auto;cursor:default}.board-label{width:200px;align-self:center}.board-empty{position:relative;left:auto;top:auto;translate:none;width:auto}
.lt-body{padding:30px 24px 36px}.lt-body .lt-dear{font-size:32px}.lt-sign{font-size:30px!important}.lt-deco{display:none}
.gate-text{left:20px;right:20px;top:5vh;width:auto;text-align:center}.gate-text h2{font-size:30px;margin:8px 0}.gate-text p{display:none}.gate-stamp,.gate-again{display:none}
}
@media(prefers-reduced-motion:reduce){.moonbeam,.gate{display:none}}