:root{color-scheme:dark;--gold:#e6c78f}*{box-sizing:border-box}body{margin:0;background:#210b08;display:grid;place-items:center;min-height:100vh;font-family:"Microsoft YaHei","PingFang SC",sans-serif}.archive{position:relative;width:min(100vw,56.2988vh);aspect-ratio:1153/2048;overflow:hidden;background:#420d08;isolation:isolate;container-type:inline-size;box-shadow:0 0 100px #0008}.poster,#writing,.paper-curl{position:absolute;inset:0;width:100%;height:100%;display:block}#writing{opacity:0}#writing.loaded{opacity:1}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #ffe9bd;outline-offset:4px}.sound{position:absolute;z-index:10;top:2.7%;right:5.9%;color:var(--gold);border:1px solid #e4be7766;border-radius:24px;background:#310c09a6;min-height:44px;padding:0 12px;display:flex;align-items:center;gap:7px;font-size:12px;backdrop-filter:blur(5px)}.sound[aria-pressed=true]{background:#792718}.sound-icon{font-size:20px}
.paper-curl{pointer-events:none;z-index:5}.curl-flap{transform-box:fill-box;transform-origin:bottom right;transition:transform .8s}.paper-curl.ready .curl-flap{transform:translate(-2px,-3px)}
.entry{position:absolute;z-index:6;left:66.5%;right:13%;top:75.6%;height:4.7%;min-height:44px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .6s,transform .6s}.entry.ready{opacity:1;visibility:visible;transform:none}.open{display:flex;align-items:center;justify-content:center;gap:calc(1.2 * var(--h5-unit, 3.9px));width:100%;height:100%;min-height:44px;padding:0;border:0;background:transparent;color:#7b3424;font-family:KaiTi,STKaiti,serif;font-size:clamp(13px,calc(3.6 * var(--h5-unit, 3.9px)),19px);letter-spacing:.08em;white-space:nowrap;transition:color .25s}.open:hover{color:#ac3422}.open:focus-visible{outline:1px solid #8e402d;outline-offset:-3px}.arrow{font-size:1.25em;line-height:1}
.bottom-note{position:absolute;top:85%;left:10%;right:10%;color:var(--gold);text-align:center}.bottom-title{font-family:KaiTi,STKaiti,serif;font-size:clamp(17px,calc(4.7 * var(--h5-unit, 3.9px)),25px);letter-spacing:.13em;line-height:1.5;margin:0}.bottom-copy{font-size:clamp(10px,calc(2.7 * var(--h5-unit, 3.9px)),14px);color:#c09a6e;letter-spacing:.09em;margin:calc(2 * var(--h5-unit, 3.9px)) 0 0;line-height:1.6}.time-line{display:flex;align-items:center;gap:calc(5 * var(--h5-unit, 3.9px));justify-content:center;margin:calc(4.5 * var(--h5-unit, 3.9px)) auto 0;width:78%;color:#c5a16b;font-family:Georgia,serif;font-size:clamp(12px,calc(3.1 * var(--h5-unit, 3.9px)),16px);letter-spacing:.08em}.time-line i{height:1px;width:15%;background:linear-gradient(90deg,transparent,#b0874c88)}.time-line i:last-child{transform:rotate(180deg)}
.archive-page{position:absolute;bottom:2.2%;right:7%;font-size:clamp(10px,calc(2.4 * var(--h5-unit, 3.9px)),12px);color:#b99264;letter-spacing:.1em}.replay{position:absolute;bottom:.7%;left:7%;min-height:32px;padding:0;border:0;background:transparent;font-size:10px;letter-spacing:.1em;color:#c6a070;opacity:0;transition:opacity .5s}.replay.ready{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page-turn,.page-underlay{position:absolute;display:none;left:0;top:52.4902%;width:100%;height:29.7852%;clip-path:polygon(5.29% 9.02%,91.24% 0,99.22% 85.57%,6.68% 97.05%)}.page-underlay{z-index:3;align-items:center;justify-content:center;background:linear-gradient(125deg,#6d281b,#3c0e09);color:var(--gold);font-family:KaiTi,serif;font-size:calc(9 * var(--h5-unit, 3.9px));letter-spacing:.1em}.page-turn{z-index:4;transform-origin:7% 50%;backface-visibility:hidden}.archive.turning .page-underlay{display:flex}.archive.turning .page-turn{display:block;animation:turnPage .85s cubic-bezier(.22,.61,.36,1) forwards}.archive.turning .paper-curl,.archive.turning .entry{opacity:0;pointer-events:none}@keyframes turnPage{0%{transform:perspective(1100px) rotateY(0) rotateX(0);opacity:1}60%{opacity:.9}100%{transform:perspective(1100px) rotateY(-100deg) rotateX(12deg) translateY(-12px);opacity:0}}
dialog{max-width:86%;border:1px solid #b98a55;padding:30px 24px;text-align:center;background:#4e160f;color:var(--gold);box-shadow:0 20px 80px #0008}dialog::backdrop{background:#190603bd;backdrop-filter:blur(5px)}dialog h2{font-family:KaiTi,serif;font-size:36px;margin:16px 0}dialog p{font-size:14px;line-height:1.8}dialog .note{color:#ccb388;font-size:12px}dialog button{color:var(--gold);border:1px solid #bc9258;background:#7e2a1b;padding:12px 24px;min-height:44px}@media(prefers-reduced-motion:reduce){.entry,.curl-flap,.open{transition:none}.archive.turning .page-turn{animation:turnPage .35s ease forwards}}
.paper-curl.ready path{pointer-events:visiblePainted;cursor:pointer}.paper-curl.ready:hover .curl-flap{transform:translate(-4px,-6px)}.archive.turning .paper-curl path{pointer-events:none}
/* Leave breathing room between the entry lettering and the slanted paper edge. */
.entry{top:74.1%}
.opening{position:absolute;inset:0}[hidden]{display:none!important}
/* A readable invitation belongs to the page, rather than a separate footer module. */
.bottom-note{top:86%}.bottom-title{font-size:clamp(17px,calc(4.7 * var(--h5-unit, 3.9px)),25px)}.bottom-copy{margin-top:calc(2 * var(--h5-unit, 3.9px))}
.entry{left:63%;right:14%;top:74%;height:4.8%}.open{font-size:clamp(16px,calc(4.4 * var(--h5-unit, 3.9px)),24px);font-weight:600;color:#8e2d1e;letter-spacing:.04em;text-shadow:0 1px #f9e9c6}.open span:first-child{border-bottom:1px solid #9b4a3266;padding-bottom:2px}.arrow{font-size:1.4em}
.title-screen{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 45% 35%,#a14929 0,#78271b 34%,#43140e 75%,#24100b 100%);color:#f1d6a0;isolation:isolate}.title-grain{position:absolute;inset:0;z-index:-1;opacity:.1;background-image:url('assets/首屏背景图.png');background-size:cover;filter:blur(18px);transform:scale(1.1)}.title-screen:after{content:"";position:absolute;left:0;right:0;top:81%;bottom:0;z-index:-1;background:linear-gradient(transparent,#190c08aa)}.title-years{position:absolute;top:4.3%;left:7%;margin:0;font:calc(3.1 * var(--h5-unit, 3.9px)) Georgia,serif;letter-spacing:.12em;color:#dbb97f}.title-years span{display:block;margin-top:calc(2.1 * var(--h5-unit, 3.9px));font-family:KaiTi,serif;font-size:calc(2.8 * var(--h5-unit, 3.9px));letter-spacing:.15em;color:#bc9469}.title-heading{position:absolute;left:6%;right:6%;top:13%;text-align:center;z-index:2}.title-heading>p:first-child{font-family:KaiTi,serif;font-size:calc(3.3 * var(--h5-unit, 3.9px));letter-spacing:.24em;margin:0 0 calc(1.5 * var(--h5-unit, 3.9px));color:#daba83}.title-heading h1{font-family:KaiTi,STKaiti,serif;font-size:calc(9.5 * var(--h5-unit, 3.9px));font-weight:400;margin:0;line-height:1.1;letter-spacing:.04em;text-shadow:0 3px 15px #31080055}.title-heading h1 span{font-family:Georgia,serif;font-size:calc(20 * var(--h5-unit, 3.9px));font-weight:600;letter-spacing:-.04em;display:inline-block;margin:0 calc(1.2 * var(--h5-unit, 3.9px))}.title-subtitle{font-size:calc(3.1 * var(--h5-unit, 3.9px));letter-spacing:.055em;line-height:1.8;margin:calc(3 * var(--h5-unit, 3.9px)) 0 0}.calendar-pile{position:absolute;inset:0;perspective:900px;z-index:1;transform:scale(1.035);transition:transform 3.8s cubic-bezier(.2,.6,.3,1)}.title-screen.is-entered .calendar-pile{transform:scale(1)}.pile-card{position:absolute;left:21%;top:57%;width:58%;aspect-ratio:1;margin:0;border:1px solid #b9a27b66;border-bottom:4px solid #c1ae8d;border-radius:2px;background:#30271e;box-shadow:0 7px 12px #16070055;opacity:0;z-index:var(--i);transform:translateY(calc(var(--i)*calc(-.85 * var(--h5-unit, 3.9px)))) rotate(var(--angle))}.pile-card img{width:100%;height:100%;object-fit:contain;display:block}.title-screen.is-entered .pile-card{animation:pileGrow .55s cubic-bezier(.19,1,.3,1) calc(var(--i)*.065s) both}.pile-year{position:absolute;right:5%;bottom:5%;font:calc(2.8 * var(--h5-unit, 3.9px)) Georgia,serif;color:#f5deb6;background:#231711c9;padding:calc(1 * var(--h5-unit, 3.9px)) calc(2 * var(--h5-unit, 3.9px));border:1px solid #d4ad7655}.title-heading{opacity:0;transform:translateY(7px)}.is-entered .title-heading{animation:titleReveal .9s ease 2.9s forwards}.title-actions{position:absolute;left:14%;right:14%;bottom:6%;z-index:3;text-align:center;opacity:0}.is-entered .title-actions{animation:titleReveal .8s ease 3.3s forwards}.title-actions button{width:100%;min-height:44px;padding:calc(3 * var(--h5-unit, 3.9px)) calc(5 * var(--h5-unit, 3.9px));background:linear-gradient(100deg,#dec397,#ead6b0);border:1px solid #f0d4a2;color:#572318;display:flex;justify-content:space-between;align-items:center;font-family:KaiTi,serif;font-size:calc(4.8 * var(--h5-unit, 3.9px));letter-spacing:.18em;box-shadow:0 5px 22px #1c06084d}.title-actions p{font-size:calc(2.7 * var(--h5-unit, 3.9px));color:#c09d6f;letter-spacing:.08em;margin:calc(2 * var(--h5-unit, 3.9px)) 0 0}.back-opening{position:absolute;z-index:4;bottom:.7%;left:7%;border:0;background:transparent;color:#c6a070;font-size:10px;min-height:32px;padding:0}@keyframes pileGrow{from{opacity:0;transform:translateY(calc(var(--i)*calc(-.85 * var(--h5-unit, 3.9px)) + calc(10 * var(--h5-unit, 3.9px)))) rotate(calc(var(--angle) + 2deg))}to{opacity:1;transform:translateY(calc(var(--i)*calc(-.85 * var(--h5-unit, 3.9px)))) rotate(var(--angle))}}@keyframes titleReveal{to{opacity:1;transform:translateY(0)}}
#coverViewer{width:min(90vw,480px);max-width:90vw;max-height:94vh;padding:22px 18px;background:#e6d1aa;color:#522819;border:1px solid #b3925f}#coverViewer::backdrop{background:#1b0907db;backdrop-filter:blur(6px)}#coverViewer>p{font-size:11px;margin:0;letter-spacing:.15em;color:#8d6442}#coverViewer h2{font:25px Georgia,serif;margin:9px 0 14px}#coverPhoto{display:block;width:100%;max-height:65vh;object-fit:contain;background:#2a231d}.viewer-close{position:absolute;right:8px;top:3px;border:0;background:transparent;color:#663323;font-size:25px;padding:0;width:44px;height:44px}.viewer-controls{display:flex;justify-content:space-between;align-items:center;margin-top:15px;gap:10px}.viewer-controls button{min-width:44px;min-height:44px;background:transparent;color:#643022;border:1px solid #aa8155;font-size:22px}.viewer-controls button:disabled{opacity:.3;cursor:default}.viewer-controls select{min-height:44px;padding:0 20px;background:#d6bd93;border:1px solid #aa8155;color:#643022;font-size:16px}
@media(prefers-reduced-motion:reduce){.title-screen.is-entered .pile-card{animation-duration:.25s}.is-entered .title-heading,.is-entered .title-actions{animation-duration:.3s}}
.pile-card{left:24%;top:55%;width:52%}
/* Frosted archive glass rests on the walnut surface, echoing the demo. */
.bottom-note{z-index:2;top:80%;bottom:0;left:0;right:0;padding:0;text-align:left;border:0;background:linear-gradient(180deg,transparent,#390c0980 26%,#300908c9 65%,#230806e8);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);mask-image:linear-gradient(transparent,#000 23%);box-shadow:none}
.bottom-note:before{content:"";position:absolute;left:8%;top:17%;height:25%;width:1px;background:linear-gradient(#efcd8c,#b4854d80)}
.bottom-title{position:absolute;left:11%;right:8%;top:17%;font-size:clamp(17px,calc(4.5 * var(--h5-unit, 3.9px)),24px);line-height:1.2;letter-spacing:.1em;color:#efd29a;text-shadow:0 1px 3px #21050060}
.bottom-copy{position:absolute;left:11%;right:8%;top:34%;margin:0;font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:clamp(11px,calc(2.8 * var(--h5-unit, 3.9px)),15px);line-height:1.4;letter-spacing:.03em;color:#d6c1a3}
.entry{left:27%;right:27%;top:91%;height:5.5%;min-height:44px}
.entry-arrow{position:absolute;bottom:calc(100% + 7px);left:0;right:0;text-align:center;font:clamp(15px,calc(3.5 * var(--h5-unit, 3.9px)),19px)/1 Georgia,serif;color:#d2ad73;text-shadow:0 1px 3px #240600}
.open{border:1px solid #e2bc7abf;border-radius:999px;background:linear-gradient(135deg,#a43827e8,#701714e8);box-shadow:0 5px 16px #1a010366,inset 0 1px #ffebb533;color:#fff0bf;font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:clamp(14px,calc(3.5 * var(--h5-unit, 3.9px)),18px);font-weight:600;letter-spacing:.14em;text-shadow:none;transition:background .25s,box-shadow .25s}
.open span:first-child{border:0;padding:0}.open:hover{color:#fff4d5;background:linear-gradient(135deg,#b04430,#82211a);box-shadow:0 5px 20px #1a010388,inset 0 1px #ffebb544}.open:focus-visible{outline:2px solid #ffe9bd;outline-offset:3px}
.opening>.archive-page{bottom:1%;font-size:clamp(9px,calc(2.2 * var(--h5-unit, 3.9px)),11px)}.opening>.replay{bottom:0;min-height:26px;font-size:9px}
.bottom-note{background:radial-gradient(ellipse at 80% 36%,#b67b3917,transparent 55%),linear-gradient(180deg,transparent,#390c0970 26%,#300908ba 65%,#230806e8)}
.bottom-note:before{left:7.5%;top:18%;height:24%;background:linear-gradient(#e3bc76b3,#b4854d35)}
.bottom-title{left:10.5%;right:24%;font-family:KaiTi,STKaiti,serif;font-size:clamp(17px,calc(4.5 * var(--h5-unit, 3.9px)),24px);letter-spacing:.07em}
.bottom-copy{left:10.5%;right:23%;font-family:KaiTi,STKaiti,serif;font-size:clamp(11px,calc(2.9 * var(--h5-unit, 3.9px)),15px);color:#d6c1a3;letter-spacing:.035em}
.opening-folio{position:absolute;z-index:3;right:7.5%;top:82.9%;width:15%;text-align:center;pointer-events:none;color:#d7b37b}
.folio-number{display:block;font:normal calc(13 * var(--h5-unit, 3.9px))/.95 Georgia,"Times New Roman",serif;letter-spacing:-.075em;color:#d7b37b99;text-shadow:0 1px #190704;}
.folio-label{display:block;margin-top:calc(1.4 * var(--h5-unit, 3.9px));padding-top:calc(1.4 * var(--h5-unit, 3.9px));border-top:1px solid #d7b37b4d;font-family:KaiTi,STKaiti,serif;font-size:clamp(10px,calc(2.6 * var(--h5-unit, 3.9px)),14px);letter-spacing:.15em;color:#d7b37bad}
.entry{left:28%;right:28%}.open{background:linear-gradient(125deg,#9d3829,#72201a);border-color:#d5ae72b3;box-shadow:0 4px 14px #1a010350,inset 0 1px #ffebb52b;font-family:KaiTi,STKaiti,serif;font-size:clamp(17px,calc(4.3 * var(--h5-unit, 3.9px)),23px);font-weight:400;letter-spacing:.14em}
.opening>.archive-page{color:#b9926480;right:7.5%}.opening>.replay{color:#b9926480}
/* Fade the glass itself before applying the foreground typography. */
.bottom-note{top:77%;height:23%;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:none;overflow:visible}
.bottom-note:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#390c0900 0%,#390c0910 14%,#390c0930 29%,#350b0963 47%,#300908a6 68%,#230806e0 100%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);mask-image:linear-gradient(180deg,transparent 0%,#00000018 15%,#00000055 32%,#000000ad 54%,#000 80%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#00000018 15%,#00000055 32%,#000000ad 54%,#000 80%)}
.bottom-title{top:27.8%}.bottom-copy{top:42.6%}.bottom-note:before{top:28.7%;height:20.8%}
.open{gap:calc(3 * var(--h5-unit, 3.9px));padding:0 calc(4 * var(--h5-unit, 3.9px))}.button-arrow{font-family:Georgia,serif;font-size:.9em;line-height:1;letter-spacing:0;color:#f0d3a0}
/* Warm frosted surround: the original letter remains a clear, feathered window. */
.letter-focus{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 51% 70%,#9a392344 0%,#681d1977 52%,#3c100ecc 100%);backdrop-filter:blur(7px) saturate(.75);-webkit-backdrop-filter:blur(7px) saturate(.75);mask-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTUzIiBoZWlnaHQ9IjIwNDgiIHZpZXdCb3g9IjAgMCAxMTUzIDIwNDgiPgogIDxkZWZzPjxmaWx0ZXIgaWQ9InNvZnQiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNDAlIiBoZWlnaHQ9IjE0MCUiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjE5Ii8+PC9maWx0ZXI+PC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMTUzIiBoZWlnaHQ9IjIwNDgiIGZpbGw9IndoaXRlIi8+CiAgPHBhdGggZD0iTTUzIDExMjQgMTA1OCAxMDY4IDExNTAgMTYwNCA2NSAxNzA5WiIgZmlsbD0iYmxhY2siIGZpbHRlcj0idXJsKCNzb2Z0KSIvPgo8L3N2Zz4K'),linear-gradient(transparent 43%,#000 55%);mask-composite:intersect;-webkit-mask-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTUzIiBoZWlnaHQ9IjIwNDgiIHZpZXdCb3g9IjAgMCAxMTUzIDIwNDgiPgogIDxkZWZzPjxmaWx0ZXIgaWQ9InNvZnQiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNDAlIiBoZWlnaHQ9IjE0MCUiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjE5Ii8+PC9maWx0ZXI+PC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMTUzIiBoZWlnaHQ9IjIwNDgiIGZpbGw9IndoaXRlIi8+CiAgPHBhdGggZD0iTTUzIDExMjQgMTA1OCAxMDY4IDExNTAgMTYwNCA2NSAxNzA5WiIgZmlsbD0iYmxhY2siIGZpbHRlcj0idXJsKCNzb2Z0KSIvPgo8L3N2Zz4K'),linear-gradient(transparent 43%,#000 55%);-webkit-mask-composite:source-in;mask-size:100% 100%;-webkit-mask-size:100% 100%;opacity:0;transition:opacity 1.4s ease}
.opening.is-focused .letter-focus{opacity:1}
.bottom-note{z-index:2;top:78%;height:22%}
.bottom-note:after{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(transparent,#53171320 25%,#35100d66 70%,#260b09a6)}
.bottom-title,.bottom-copy{transition:opacity .32s ease,transform .45s ease}
.bottom-note.is-changing .bottom-title,.bottom-note.is-changing .bottom-copy{opacity:0;transform:translateY(3px)}
.bottom-title{top:25%;text-shadow:0 2px 8px #21050080}
.bottom-copy{top:42%;color:#dec7a3}
.opening-folio{color:#d7b37b;top:83.1%}
.folio-number{color:#d7b37b80}
@media(prefers-reduced-motion:reduce){.letter-focus,.bottom-title,.bottom-copy{transition:none}}
.letter-focus{mask-mode:luminance,alpha}
/* Deep vermilion surround and unhurried caption transitions. */
.letter-focus{background:radial-gradient(ellipse at 51% 69%,#8e291c99 0%,#631913c9 56%,#320b09ed 100%);backdrop-filter:blur(11px) saturate(.6);-webkit-backdrop-filter:blur(11px) saturate(.6);transition:opacity 1.8s ease}
.bottom-title,.bottom-copy{transition:opacity 1s cubic-bezier(.25,.1,.25,1);transform:none}
.bottom-note.is-changing .bottom-title,.bottom-note.is-changing .bottom-copy{opacity:0;transform:none;transition-duration:.75s}
@media(prefers-reduced-motion:reduce){.letter-focus,.bottom-title,.bottom-copy{transition:none}}
@media(prefers-reduced-motion:reduce){.bottom-title,.bottom-copy{transition:opacity 1s ease}.bottom-note.is-changing .bottom-title,.bottom-note.is-changing .bottom-copy{transition-duration:.75s}}
/* Screen two: a slowly receding archive still life. */
.title-screen{background:radial-gradient(ellipse at 76% 36%,#73422c 0,#4c2119 38%,#360d0b 70%,#220907 100%)}
.title-grain{opacity:.07;filter:blur(35px);background-position:bottom}
.title-screen:after{z-index:2;pointer-events:none;top:0;background:linear-gradient(90deg,#380e0bf2 0%,#380e0bb3 30%,transparent 66%),linear-gradient(0deg,#240907 0%,transparent 29%)}
.title-years{z-index:4;left:8%;top:6%;font-size:calc(3.2 * var(--h5-unit, 3.9px));letter-spacing:.14em;color:#e2c391}
.title-years span{font-size:calc(2.8 * var(--h5-unit, 3.9px));color:#b98b60;margin-top:calc(2 * var(--h5-unit, 3.9px))}
.stack-light{position:absolute;inset:0;background:radial-gradient(ellipse at 72% 46%,#e9c89220,transparent 63%);pointer-events:none}
.calendar-pile{z-index:1;perspective:1000px;transform:scale(1.2) translateY(6%);transform-origin:70% 77%;transition:transform 8s cubic-bezier(.16,.55,.3,1)}
.title-screen.is-entered .calendar-pile{transform:scale(1) translateY(0)}
.pile-card{left:34%;top:61%;width:68%;aspect-ratio:1;margin:0;border:0;border-radius:0;background:#c8b08c;box-shadow:0 2px 0 #715a40,0 5px 0 #b19a74,0 9px 0 #4b3020,0 14px 20px #12060455;transform:translateY(calc(var(--i)*calc(-2.25 * var(--h5-unit, 3.9px)))) rotateX(59deg) rotateZ(var(--angle));transform-style:preserve-3d}
.pile-card img{filter:sepia(.22) saturate(.7) brightness(.85);object-fit:cover;opacity:.95}
.title-screen.is-entered .pile-card{animation:archiveBookLand .65s cubic-bezier(.2,.75,.3,1) calc(var(--i)*.17s) both}
@keyframes archiveBookLand{0%{opacity:0;transform:translateY(calc(var(--i)*calc(-2.25 * var(--h5-unit, 3.9px)) - calc(9 * var(--h5-unit, 3.9px)))) rotateX(65deg) rotateZ(calc(var(--angle) + 3deg))}60%{opacity:1;transform:translateY(calc(var(--i)*calc(-2.25 * var(--h5-unit, 3.9px)) + calc(.55 * var(--h5-unit, 3.9px)))) rotateX(58deg) rotateZ(var(--angle))}100%{opacity:1;transform:translateY(calc(var(--i)*calc(-2.25 * var(--h5-unit, 3.9px)))) rotateX(59deg) rotateZ(var(--angle))}}
.pile-year{font:calc(2.6 * var(--h5-unit, 3.9px)) Georgia,serif;right:5%;bottom:5%;padding:calc(1.2 * var(--h5-unit, 3.9px)) calc(2 * var(--h5-unit, 3.9px));background:#30180ee0;color:#e5d1a7}
.title-heading{z-index:4;left:8%;right:4%;top:29%;text-align:left;transform:none;pointer-events:none}
.title-heading>p:first-child{font-family:KaiTi,serif;font-size:calc(3 * var(--h5-unit, 3.9px));letter-spacing:.16em;color:#c7a16f;margin:0 0 calc(4 * var(--h5-unit, 3.9px))}
.title-heading h1{font-family:KaiTi,STKaiti,serif;font-size:calc(11 * var(--h5-unit, 3.9px));line-height:1.1;letter-spacing:.08em;color:#f2ddb5;text-shadow:0 3px 24px #23060380}
.title-heading h1>span{display:block;margin:calc(1 * var(--h5-unit, 3.9px)) 0 0;font:normal calc(38 * var(--h5-unit, 3.9px))/.98 Georgia,serif;letter-spacing:-.07em;color:#f0d4a0}
.title-heading h1 .title-unit{display:inline-block;margin-left:calc(2 * var(--h5-unit, 3.9px));font:calc(9.2 * var(--h5-unit, 3.9px)) KaiTi,serif;letter-spacing:0}
.title-subtitle{font-family:KaiTi,serif;margin-top:calc(5 * var(--h5-unit, 3.9px));font-size:calc(4 * var(--h5-unit, 3.9px));line-height:1.8;letter-spacing:.09em;color:#e4c69d}
.is-entered .title-heading{animation:titleReveal 1.3s ease 7.4s forwards}
.stack-progress{position:absolute;z-index:4;left:8%;bottom:19%;margin:0;padding-left:calc(3 * var(--h5-unit, 3.9px));border-left:1px solid #d0a56a88;color:#ceb18a;font-family:KaiTi,serif;font-size:calc(3 * var(--h5-unit, 3.9px));letter-spacing:.1em}
.title-actions{left:20%;right:20%;bottom:7%;z-index:4}
.is-entered .title-actions{animation:titleReveal 1s ease 8.2s forwards}
.title-actions button{border-radius:999px;background:linear-gradient(125deg,#9d3829,#72201a);color:#fff0bf;border:1px solid #d5ae72b3;font:calc(4.4 * var(--h5-unit, 3.9px)) KaiTi,serif;letter-spacing:.16em;justify-content:center;gap:calc(5 * var(--h5-unit, 3.9px));box-shadow:0 5px 20px #16050266,inset 0 1px #ffebb52b}
.title-actions p{font:calc(2.6 * var(--h5-unit, 3.9px)) KaiTi,serif;color:#c6a071;margin-top:calc(2.5 * var(--h5-unit, 3.9px));letter-spacing:.09em}
.back-opening{z-index:5;bottom:1.4%;font-family:KaiTi,serif;left:8%;color:#b99365}
.title-screen>.archive-page{z-index:5;bottom:2%;right:8%;font:calc(2.5 * var(--h5-unit, 3.9px)) Georgia,serif;color:#b99365}
@media(prefers-reduced-motion:reduce){.calendar-pile{transition:none}.title-screen.is-entered .pile-card{animation-duration:.2s}.is-entered .title-heading,.is-entered .title-actions{animation-duration:.8s}}
/* Bring the top calendar up to the frame and leave the invitation clear. */
.pile-card{top:44%;left:37%;width:62%;box-shadow:0 2px 0 #665441,0 5px 0 #aa9575,0 8px 0 #493326,0 12px 18px #1206044d}
.pile-card img{filter:sepia(.15) saturate(.78) brightness(.9)}
.title-heading{top:28%}
/* Content continuation; full screen-three art direction follows separately. */
.roots-screen{position:absolute;inset:0;padding:10% 8%;background:radial-gradient(ellipse at 80% 25%,#83412a40,transparent 65%),#350e0b;color:#e8c99c}
.roots-kicker{font:calc(3 * var(--h5-unit, 3.9px)) Georgia,serif;letter-spacing:.13em;margin:0 0 calc(8 * var(--h5-unit, 3.9px));color:#c29a66}
.roots-screen h2{font:calc(11 * var(--h5-unit, 3.9px)) KaiTi,serif;margin:0;letter-spacing:.08em}.roots-screen h2 span{font-size:.5em;margin:0 .6em;color:#b88656}
.roots-screen blockquote{margin:calc(8 * var(--h5-unit, 3.9px)) 0 calc(6 * var(--h5-unit, 3.9px));font:calc(7 * var(--h5-unit, 3.9px))/1.7 KaiTi,serif;border-left:1px solid #b88a56;padding-left:calc(4 * var(--h5-unit, 3.9px));color:#f4dcaf}
.roots-copy{font:calc(3.6 * var(--h5-unit, 3.9px))/2 KaiTi,serif;color:#d3b289;margin-bottom:calc(8 * var(--h5-unit, 3.9px))}
.roots-video{display:block;width:100%;aspect-ratio:16/9;background:#230b08;border:1px solid #a5744244}
.roots-video-caption{font:calc(3 * var(--h5-unit, 3.9px)) KaiTi,serif;color:#b99569;text-align:right}
.back-title{position:absolute;bottom:2%;left:8%;border:0;background:transparent;color:#b99365;min-height:44px;font:calc(3 * var(--h5-unit, 3.9px)) KaiTi,serif}
/* Visible paper blocks give each calendar weight instead of a thin card edge. */
.pile-card:after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(5.8 * var(--h5-unit, 3.9px));transform:rotateX(-59deg);transform-origin:top;background:repeating-linear-gradient(180deg,#c8b994 0,#c8b994 calc(.22 * var(--h5-unit, 3.9px)),#a89875 calc(.25 * var(--h5-unit, 3.9px)),#dbcba5 calc(.5 * var(--h5-unit, 3.9px)));border-bottom:calc(.4 * var(--h5-unit, 3.9px)) solid #5e4430;border-right:calc(.5 * var(--h5-unit, 3.9px)) solid #7a6549;box-shadow:0 2px 4px #19090555;backface-visibility:hidden}
/* Screen one now introduces the letter; titles live exclusively on screen two. */
.opening>.poster{clip-path:inset(49.2% 0 0 0)}
.opening-hero{position:absolute;top:0;left:0;width:100%;height:49.2%;object-fit:cover;object-position:55% 50%;filter:sepia(.2) brightness(.78) saturate(.8)}
.opening-kicker{position:absolute;z-index:3;top:4%;left:7%;font:calc(3.5 * var(--h5-unit, 3.9px)) KaiTi,serif;color:#ecd2a8;letter-spacing:.25em}
/* Use the photographed book silhouettes, with no flattened rectangular planes. */
.title-grain{opacity:.2;filter:blur(14px);background-position:center}
.calendar-pile{perspective:none;transform:scale(1.15);transform-origin:70% 80%;transition:transform 14.8s ease}
.pile-card{top:52%;left:33%;width:66%;background:transparent;border:0;box-shadow:none;aspect-ratio:1;transform-style:flat;transform:translate(calc(var(--shift)*calc(1 * var(--h5-unit, 3.9px))),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)))) rotate(var(--angle)) scaleY(.8)}
.pile-card:after{display:none}
.pile-card img{object-fit:contain;width:100%;height:100%;filter:sepia(.12) saturate(.83) drop-shadow(0 5px 4px #18070266);opacity:1}
.title-screen.is-entered .pile-card{animation:realCalendarLand .62s cubic-bezier(.25,.7,.3,1) calc(var(--i)*.36s) both}
@keyframes realCalendarLand{0%{opacity:0;transform:translate(calc(var(--shift)*calc(1 * var(--h5-unit, 3.9px))),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)) - calc(12 * var(--h5-unit, 3.9px)))) rotate(calc(var(--angle) + 3deg)) scaleY(.8)}70%{opacity:1;transform:translate(calc(var(--shift)*calc(1 * var(--h5-unit, 3.9px))),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)) + calc(.35 * var(--h5-unit, 3.9px)))) rotate(var(--angle)) scaleY(.8)}100%{opacity:1;transform:translate(calc(var(--shift)*calc(1 * var(--h5-unit, 3.9px))),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)))) rotate(var(--angle)) scaleY(.8)}}
.stack-table{position:absolute;z-index:0;left:0;right:0;top:77%;bottom:0;background-size:cover;border-top:1px solid #a0764433}
.title-screen:after{background:linear-gradient(90deg,#380e0bea 0%,#380e0b88 27%,transparent 60%),linear-gradient(0deg,#240907 0%,transparent 25%)}
.title-heading>p:first-child{display:none}
.title-heading{top:38%;left:7%;right:5%}
.title-heading h1{font-size:calc(9 * var(--h5-unit, 3.9px))}.title-heading h1>span{font-size:calc(29 * var(--h5-unit, 3.9px))}.title-heading h1 .title-unit{font-size:calc(7 * var(--h5-unit, 3.9px))}
.title-subtitle{font-size:calc(3.5 * var(--h5-unit, 3.9px));line-height:1.7;margin-top:calc(4 * var(--h5-unit, 3.9px))}
.is-entered .title-heading{animation:titleReveal 1.2s ease 14.8s forwards}
.is-entered .title-actions{animation:titleReveal 1s ease 15.8s forwards}
.stack-progress{bottom:20%;font-size:calc(2.8 * var(--h5-unit, 3.9px))}
.pile-year{display:none}
@media(prefers-reduced-motion:reduce){.calendar-pile{transition:none}.title-screen.is-entered .pile-card{animation-duration:.4s}}
.opening>.poster{clip-path:inset(52.5% 0 0 0)}.opening-hero{height:52.5%}.pile-card{top:46%}
.title-heading>p:first-child{display:block;font-size:calc(2.8 * var(--h5-unit, 3.9px));margin-bottom:calc(3 * var(--h5-unit, 3.9px));letter-spacing:.1em}.title-heading{top:34%}
/* A real archive room fills the atmosphere behind the title and calendars. */
.title-grain{inset:0;z-index:0;opacity:.48;background-image:url('assets/原始现场照片.jpg');background-size:auto 100%;background-position:18% center;filter:sepia(.5) brightness(.48) blur(2px);transform:none}
.stack-light{z-index:0;background:radial-gradient(ellipse at 73% 43%,#edd2a82b,transparent 70%)}
.title-screen:after{background:linear-gradient(90deg,#380e0bcc 0%,#380e0b66 34%,#380e0b11 72%),linear-gradient(0deg,#240907 0%,transparent 30%)}
.title-years{font-size:calc(3.3 * var(--h5-unit, 3.9px));text-shadow:0 2px 8px #150503}
.year-reveal{position:absolute;z-index:4;left:8%;top:24%;width:38%;color:#edcea0;transition:opacity 1s ease;pointer-events:none}
.year-reveal>span{display:block;font:calc(3.2 * var(--h5-unit, 3.9px)) KaiTi,serif;letter-spacing:.13em;color:#c9a676}
.year-reveal strong{display:block;font:normal calc(13 * var(--h5-unit, 3.9px))/1.4 Georgia,serif;letter-spacing:-.04em;text-shadow:0 4px 24px #260706}
.year-reveal small{font:calc(2.7 * var(--h5-unit, 3.9px)) KaiTi,serif;letter-spacing:.05em;color:#d4b489}
.is-complete .year-reveal{opacity:0}
.pile-card img{filter:sepia(.05) saturate(.95) drop-shadow(0 6px 5px #18070288)}
.pile-year{display:block;position:absolute;right:1%;bottom:12%;font:calc(2.4 * var(--h5-unit, 3.9px))/1 Georgia,serif;letter-spacing:.025em;padding:calc(.7 * var(--h5-unit, 3.9px)) calc(1.4 * var(--h5-unit, 3.9px));border:1px solid #b3986b;background:#e3cfa7;color:#653a25;box-shadow:0 2px 4px #24090066;opacity:0;transition:opacity .25s}
.pile-card.is-current .pile-year,.is-complete .is-milestone .pile-year{opacity:1}
.pile-card{cursor:pointer}
.stack-progress{bottom:20%;background:#38120c77;padding:calc(1.4 * var(--h5-unit, 3.9px)) calc(2 * var(--h5-unit, 3.9px)) calc(1.4 * var(--h5-unit, 3.9px)) calc(3 * var(--h5-unit, 3.9px));width:max-content;max-width:86%;backdrop-filter:blur(4px)}
.title-subtitle{font-size:calc(3.6 * var(--h5-unit, 3.9px));color:#ecd2ab;text-shadow:0 2px 8px #210603}
/* A quiet archive reader, with the original photograph as its main exhibit. */
#coverViewer{width:min(92vw,520px);max-width:92vw;max-height:94vh;padding:25px 22px 20px;border:1px solid #ae82576b;border-radius:12px;background:radial-gradient(ellipse at 70% 10%,#773a26,#3b1611 70%);color:#efd5ad;box-shadow:0 30px 100px #130302cc;overflow:auto}
#coverViewer::backdrop{background:#140504dc;backdrop-filter:blur(12px)}
#coverViewer .viewer-kicker{display:flex;justify-content:space-between;padding-right:30px;font:12px KaiTi,serif;letter-spacing:.13em;color:#c5a273;margin:0}
#viewerCount{font:11px Georgia,serif;letter-spacing:.05em;white-space:nowrap}
#coverViewer h2{font:42px/1.1 Georgia,KaiTi,serif;letter-spacing:.02em;text-align:left;margin:17px 0 18px;padding-bottom:15px;border-bottom:1px solid #b48c593d;color:#efd3a3}
#coverPhoto{max-height:53vh;width:100%;object-fit:contain;background:#211a15;border:1px solid #b08b5b33;border-radius:4px;box-shadow:0 8px 24px #15050355}
.viewer-close{right:7px;top:7px;color:#e0c194;border:0;background:transparent;border-radius:50%;font-size:28px}
.viewer-years{display:flex;gap:7px;overflow-x:auto;margin:18px 0 15px;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#b58b5655 transparent}
#coverViewer .viewer-years button{flex:0 0 auto;min-width:52px;min-height:44px;border:1px solid #ad85504d;background:#34120c77;color:#c6a477;padding:8px 10px;border-radius:5px;font:14px Georgia,serif}
#coverViewer .viewer-years button[aria-pressed=true]{background:#d4b381;color:#4a2115;border-color:#e8c792}
#coverViewer .viewer-controls{margin-top:0;gap:14px}
#coverViewer .viewer-controls button{border:1px solid #bb92595c;background:#5b271a;color:#e6c38d;width:46px;border-radius:50%;font-size:20px;padding:0}
#coverViewer .viewer-controls select{background:#36140e;color:#e5c694;border:1px solid #b088534d;border-radius:6px;font:14px KaiTi,serif;padding:0 20px}
.year-rail{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .8s ease}.is-complete .year-rail{opacity:1}
.year-rail span{position:absolute;right:1.6%;top:calc(46% + calc(51 * var(--h5-unit, 3.9px)) - var(--i)*calc(1.8 * var(--h5-unit, 3.9px)));padding:calc(.7 * var(--h5-unit, 3.9px)) calc(1.3 * var(--h5-unit, 3.9px));background:#dbc69e;color:#633b28;border:1px solid #ad9066;font:calc(2.4 * var(--h5-unit, 3.9px))/1 Georgia,serif;letter-spacing:.02em;box-shadow:0 2px 5px #24090055}
.is-complete .pile-card .pile-year{opacity:0}
/* Explore a letter through a warm, softly opening clear window. */
.opening{--lens-x:52%;--lens-y:65%;--lens-rx:calc(20 * var(--h5-unit, 3.9px));--lens-ry:calc(13 * var(--h5-unit, 3.9px))}
.opening-hero{top:3.9%;height:38.1%;object-fit:cover;object-position:48% center;filter:sepia(.17) brightness(.82) saturate(.85)}
.opening-kicker{top:3.5%;left:7%;font-size:calc(3.1 * var(--h5-unit, 3.9px));letter-spacing:.3em;color:#e8c698}
.opening .letter-focus{mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%);-webkit-mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%);mask-mode:alpha;mask-composite:add;-webkit-mask-composite:source-over;background:linear-gradient(180deg,#4a100b2b 0%,#58170e44 36%,#762417c4 54%,#571611eb 83%,#310c0df0 100%);backdrop-filter:blur(12px) saturate(.7);-webkit-backdrop-filter:blur(12px) saturate(.7);opacity:1;transition:none}
.opening .bottom-note:after{background:linear-gradient(transparent,#32100c33 60%,#260b09aa)}
.opening .bottom-copy{color:#dfc29c}
.opening .letter-focus{mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%),linear-gradient(transparent 22%,#0002 34%,#000 49%);-webkit-mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%),linear-gradient(transparent 22%,#0002 34%,#000 49%);mask-mode:alpha,alpha;mask-composite:intersect;-webkit-mask-composite:source-in;background:linear-gradient(180deg,#4a100b2b 0%,#58170e44 36%,#671e16d9 54%,#4b1411eb 83%,#310c0df0 100%)}
.opening .paper-curl{opacity:0;transition:opacity .7s ease}.opening .paper-curl.ready{opacity:1}
/* The documentary portrait resolves with the opening letter. */
.opening{--portrait-opacity:1}
.portrait-reveal{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--portrait-opacity);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:linear-gradient(#4a160c44,#5a1b1033);mask-image:linear-gradient(#000 0%,#000 34%,transparent 46%);-webkit-mask-image:linear-gradient(#000 0%,#000 34%,transparent 46%)}
.opening .letter-focus{mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%),linear-gradient(transparent 42%,#000 49%);-webkit-mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%),linear-gradient(transparent 42%,#000 49%)}
/* One expanding window reveals the photograph, desk and letter as one scene. */
.opening{--lens-rx:calc(33.82 * var(--h5-unit, 3.9px));--lens-ry:calc(20.38 * var(--h5-unit, 3.9px))}
.portrait-reveal{display:none}
.opening .letter-focus{mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%);-webkit-mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%);mask-mode:alpha;mask-composite:add;-webkit-mask-composite:source-over;background:linear-gradient(180deg,#571b1455 0%,#651e1577 40%,#631b15bb 75%,#35100ddd 100%);backdrop-filter:blur(11px) saturate(.8);-webkit-backdrop-filter:blur(11px) saturate(.8)}
.opening.is-focused .letter-focus{opacity:var(--portrait-opacity)}
/* Raised correspondence on a quiet matte red archive surface. */
.opening{--lens-y:61%}
.opening .paper-curl{transform:translateY(-4.6387%)}
.opening .bottom-note{top:73%;height:27%;bottom:0}
.opening .bottom-title{top:25%}.opening .bottom-copy{top:42%}
.opening .bottom-note:before{top:25%;height:22%}
/* Wine-red archive tone echoes the documentary photograph without a brown band. */
.opening .letter-focus{background:linear-gradient(180deg,#38121944 0%,#4a172066 40%,#47151daa 75%,#230c12dd 100%)}
.opening .bottom-note:after{background:linear-gradient(transparent,#2b0d1422 60%,#210a11aa)}
.opening .open{background:linear-gradient(125deg,#8d2f37,#62202b);border-color:#cba46db3}
/* Warm vermilion archive field, continuous with the documentary photograph. */
.opening .letter-focus{background:linear-gradient(180deg,#82271b55 0%,#aa342177 42%,#bf472988 75%,#8f281eb3 100%)}
.opening .bottom-note:after{background:linear-gradient(transparent,#84261908 60%,#69201533)}
.opening .open{background:linear-gradient(125deg,#b64529,#962d20);border-color:#efbd7ecc;box-shadow:0 6px 22px #59150833,inset 0 1px 0 #ffd69c22}
.opening .paper-curl{transform:translateY(-8.5449%)}
.opening-calendars{position:absolute;right:5%;top:80.5%;width:27%;height:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 5px 5px #47170955);transform:rotate(-3deg)}
.opening .bottom-note{top:69.2%;height:30.8%}
.opening .bottom-title{max-width:65%}
/* Compose the final invitation and archive objects as one compact footer. */
.opening .bottom-note{top:75%;height:25%;left:0;right:0}
.opening .bottom-title{left:7%;right:auto;top:12%;max-width:86%;font-size:calc(4.5 * var(--h5-unit, 3.9px));line-height:1.3;letter-spacing:.08em}
.opening .bottom-copy{left:7%;right:auto;top:29%;max-width:60%;font-size:calc(2.7 * var(--h5-unit, 3.9px));letter-spacing:.06em}
.opening .bottom-note:before{display:none}
.opening .entry{left:7%;right:42%;top:87.8%;height:5.5%;min-height:44px}
.opening .open{font-size:calc(4 * var(--h5-unit, 3.9px));letter-spacing:.12em;gap:calc(3 * var(--h5-unit, 3.9px));border-radius:999px;background:linear-gradient(125deg,#a43523,#85261d);border:1px solid #efbd7eb3}
.opening-calendars{right:5%;top:81.4%;width:33%;transform:rotate(-3deg);filter:drop-shadow(0 9px 7px #56180766)}
.opening .archive-page{display:none}
.opening-calendars{top:77.8%}
/* One year signal, a continuous camera pullback, and a central flipbook reader. */
.title-screen .pile-year,.title-screen .year-rail,.year-reveal small{display:none!important}
.calendar-pile{transform-origin:65% 78%;transition:none!important}
.stack-progress{opacity:0;transition:opacity 1s ease;cursor:pointer}
.is-complete .stack-progress{opacity:1}
#coverViewer{width:min(88vw,440px);padding:26px 24px 22px;background:linear-gradient(160deg,#64291de8,#32120dec);border:1px solid #c49a6355;border-radius:4px;max-height:92vh}
#coverViewer h2{text-align:center;font-size:32px;margin:16px 0 22px;padding:0;border:0}
.viewer-deck{position:relative;isolation:isolate;width:88%;margin:0 auto 22px;touch-action:pan-y;user-select:none}
.viewer-deck:before,.viewer-deck:after{content:"";position:absolute;inset:8% 5%;background:#b7a07a;border:1px solid #e2cda5;z-index:-1;transform:rotate(7deg) translate(10px,-6px);box-shadow:0 8px 24px #10040055}
.viewer-deck:after{background:#d6c29c;transform:rotate(-5deg) translate(-8px,-3px)}
#coverPhoto{display:block;max-height:49vh;width:100%;object-fit:contain;border:0;border-radius:0;background:transparent;filter:drop-shadow(0 9px 12px #10040088);box-shadow:none;cursor:grab}
.viewer-hint{display:flex;align-items:center;justify-content:space-between;color:#d1b183;font:12px KaiTi,serif;gap:12px;margin:8px 0 12px}
.viewer-hint button{min-height:44px;padding:0 12px;background:transparent;border:1px solid #bd925a66;color:#e9cb98;border-radius:4px;font:13px KaiTi,serif}
#coverViewer .viewer-years{display:none}
#coverViewer.years-expanded .viewer-years{display:flex}
#coverViewer .viewer-controls label{display:none}
#coverViewer .viewer-controls{justify-content:center;gap:60px}
/* A faster pullback resolves into the demo's central, tangible photo flipbook. */
.title-screen.is-entered .pile-card{animation-delay:calc(var(--i)*.22s);animation-duration:.58s}
.is-entered .title-heading{animation-delay:9.3s}.is-entered .title-actions{animation-delay:10.2s}
.stack-narrative{position:absolute;left:8%;top:43%;z-index:4;font:calc(5.5 * var(--h5-unit, 3.9px))/1.8 KaiTi,serif;color:#efd2a3;letter-spacing:.1em;transition:opacity .8s}
.stack-narrative span{display:block;margin-top:calc(3 * var(--h5-unit, 3.9px));font-size:calc(2.8 * var(--h5-unit, 3.9px));letter-spacing:.07em;color:#c6a273}
.is-complete .stack-narrative{opacity:0}
.is-complete .calendar-pile{opacity:.16;pointer-events:none;transition:opacity 1.2s!important}
.title-screen.is-complete .title-heading{top:15%;left:5%;right:5%;text-align:center}
.title-screen.is-complete .title-heading h1{display:block;font-size:calc(9 * var(--h5-unit, 3.9px));line-height:1.15}
.title-screen.is-complete .title-heading h1>span{display:inline-block;font-size:calc(18 * var(--h5-unit, 3.9px));margin:0 calc(1 * var(--h5-unit, 3.9px))}
.title-screen.is-complete .title-heading h1 .title-unit{display:inline-block;font-size:calc(8 * var(--h5-unit, 3.9px))}
.title-screen.is-complete .title-subtitle{font-size:calc(3.1 * var(--h5-unit, 3.9px));margin-top:calc(2 * var(--h5-unit, 3.9px));line-height:1.6}
.title-deck{position:absolute;left:20%;right:20%;top:40%;z-index:6;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 1s,transform 1s}
.is-complete .title-deck{opacity:1;visibility:visible;transform:none}
.title-deck-card{position:relative;display:block;width:100%;height:32vh;max-height:calc(57 * var(--h5-unit, 3.9px));padding:0;border:0;background:transparent;cursor:grab;touch-action:pan-y;isolation:isolate}
.title-deck-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 9px #17040077);pointer-events:none}
#titleDeckPhoto{z-index:3}.title-deck-card .first-back{z-index:2;transform:translate(calc(3 * var(--h5-unit, 3.9px)),calc(-2 * var(--h5-unit, 3.9px))) rotate(7deg) scale(.97)}
.title-deck-card .second-back{z-index:1;transform:translate(calc(-3 * var(--h5-unit, 3.9px)),calc(-3 * var(--h5-unit, 3.9px))) rotate(-9deg) scale(.94)}
#titleDeckYear{position:absolute;z-index:4;right:9%;bottom:8%;background:#37160dc9;border:1px solid #dfbb7c88;color:#f1dab0;padding:calc(1 * var(--h5-unit, 3.9px)) calc(2 * var(--h5-unit, 3.9px));font:calc(3 * var(--h5-unit, 3.9px)) Georgia,serif}
.deck-caption{display:flex;align-items:center;justify-content:space-between;gap:calc(2 * var(--h5-unit, 3.9px));margin-top:calc(2 * var(--h5-unit, 3.9px));font:calc(2.4 * var(--h5-unit, 3.9px)) KaiTi,serif;color:#d4b382;white-space:nowrap}
.deck-caption button{min-height:44px;border:1px solid #c0996166;background:#43180d66;color:#eace9a;padding:0 calc(2 * var(--h5-unit, 3.9px));font:calc(2.6 * var(--h5-unit, 3.9px)) KaiTi,serif;border-radius:4px}
.stack-progress{bottom:20%;left:50%;transform:translateX(-50%);background:transparent;padding:0;backdrop-filter:none}
#coverViewer{width:min(94vw,580px);padding:0 0 16px;background:#1c1713;border:0;border-radius:8px;box-shadow:0 24px 80px #0008}
#coverViewer::backdrop{background:#18110c8c;backdrop-filter:blur(4px)}
#coverViewer .viewer-kicker{display:none}#coverViewer h2{font-size:20px;margin:16px 0}
.viewer-deck{width:100%;margin:0 auto 12px}.viewer-deck:before,.viewer-deck:after{display:none}
#coverPhoto{max-height:64vh;background:#1c1713;filter:none}
#coverViewer .viewer-close{top:8px;right:8px;width:38px;height:38px;border-radius:50%;background:#0c08068c;color:#fff8e8;z-index:5}
.viewer-hint{padding:0 20px}#coverViewer .viewer-years{margin:0 20px 12px}
.is-complete .calendar-pile{opacity:.08}
/* Each physical calendar settles before the following one is added. */
.title-screen.is-entered .pile-card{animation:none;opacity:0;visibility:hidden}
.title-screen.is-entered .pile-card.is-landed{visibility:visible;animation:realCalendarLand .2s cubic-bezier(.2,.65,.35,1) 0s forwards}
.year-reveal small{display:block!important;margin-top:calc(1.5 * var(--h5-unit, 3.9px));font:calc(3.2 * var(--h5-unit, 3.9px)) KaiTi,serif;color:#dfbd87}

/* Supplied demo photo frames and flipbook styling. */
.calendar-flipbook {
  position: relative;
  z-index: 3;
  width: min(55vw, 238px);
  aspect-ratio: 3 / 4;
  margin: calc(var(--safe-top) + 3.1rem) auto 0;
  perspective: 900px;
  filter: drop-shadow(0 1.1rem 1.4rem rgba(28, 3, 3, .42));
}

.calendar-flipbook::before {
  position: absolute;
  z-index: -1;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 221, 132, .26), transparent 65%);
  content: "";
  pointer-events: none;
}

.stack-card {
  position: absolute;
  inset: 0;
  border: 6px solid #f8f0de;
  border-radius: 4px;
  overflow: hidden;
  background: #bd9f6b;
  box-shadow: 0 .8rem 1.7rem rgba(31, 3, 4, .48), 0 0 0 1px rgba(226, 179, 82, .3);
  padding: 0;
  appearance: none;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}

.stack-card:nth-of-type(2) { border-color: #e7ecd9; }
.stack-card:nth-of-type(3) { border-color: #dcebef; }

.stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.flip-year {
  position: absolute;
  right: .45rem;
  bottom: .35rem;
  padding: .12rem .4rem;
  border-radius: 3px;
  background: rgba(25, 17, 12, .74);
  color: #fff7e5;
  font: 700 .78rem/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.calendar-expand {
  position: relative;
  z-index: 1;
  width: calc(100% + 12vw);
  margin: calc(var(--safe-top) + 1.5rem) 0 0 -6vw;
  height: min(46vh, 380px);
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 6vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.calendar-expand::-webkit-scrollbar {
  display: none;
}

.expand-item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(5.2rem, 26vw, 7.4rem);
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
  border: 4px solid #f8f0de;
  border-radius: 5px;
  overflow: hidden;
  background: #bd9f6b;
  box-shadow: 0 .5rem 1.1rem rgba(45, 29, 17, .25);
  padding: 0;
  appearance: none;
}

.expand-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.stack-hint-row {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: .75rem;
}

.stack-hint {
  color: rgba(255, 240, 207, .72);
  font: 500 .64rem/1.5 var(--font-hei);
  letter-spacing: .04em;
  text-align: center;
}

.stack-expand-btn {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold);
  font: 650 .64rem/1.5 var(--font-hei);
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: .18em;
  appearance: none;
}


#openTitleDeck,.title-deck>.deck-caption{display:none}
.title-deck{left:10%;right:10%;top:38%}
.calendar-flipbook{width:calc(46 * var(--h5-unit, 3.9px));height:calc(57 * var(--h5-unit, 3.9px));max-height:32vh;margin:0 auto;aspect-ratio:3/4}
.calendar-flipbook[hidden],.calendar-expand[hidden]{display:none!important}
.calendar-expand{width:100%;margin:0;height:32vh;padding:0 calc(2 * var(--h5-unit, 3.9px));gap:calc(2 * var(--h5-unit, 3.9px))}
.expand-item{width:calc(25 * var(--h5-unit, 3.9px));min-width:calc(25 * var(--h5-unit, 3.9px))}
.stack-hint-row{display:flex;align-items:center;justify-content:space-between;margin:calc(2 * var(--h5-unit, 3.9px)) 0 0;gap:calc(2 * var(--h5-unit, 3.9px))}
.stack-hint-row p{font:calc(2.4 * var(--h5-unit, 3.9px)) KaiTi,serif;color:#d9b985;margin:0;white-space:nowrap}
.stack-hint-row button{font:calc(2.6 * var(--h5-unit, 3.9px)) KaiTi,serif;min-height:44px;padding:0 calc(2 * var(--h5-unit, 3.9px));color:#ecd3a4;border:1px solid #c3a16b66;background:#45190f66;border-radius:4px}
.stack-progress:before{display:none}
.stack-progress{border:0!important}
/* Shared aged vermilion palette across the opening and title screen. */
.title-screen{background:radial-gradient(ellipse at 48% 45%,#a33324 0%,#8b2d22 55%,#642018 100%)}
.title-grain{opacity:.32;filter:sepia(.2) brightness(.65) saturate(.7) blur(2px)}
.title-screen:after{background:linear-gradient(90deg,#7b231c55,transparent 70%),linear-gradient(0deg,#641c1688,transparent 35%)}
.title-screen .stack-table{opacity:.3;border:0;mask-image:linear-gradient(transparent,#000 65%);-webkit-mask-image:linear-gradient(transparent,#000 65%)}
.title-actions button,.opening .open{background:linear-gradient(120deg,#ab3b28,#82281f);border-color:#d9ac73aa;color:#f2d9ab}
.opening .letter-focus{background:linear-gradient(180deg,#82271b55,#a3332477 55%,#84271db3)}
.opening .bottom-note:after{background:linear-gradient(transparent,#6e201808 60%,#5b191433)}
/* Quiet title tableau: the photographs carry the interaction without instructions. */
.title-screen .stack-hint-row,.title-screen .calendar-expand,.viewer-hint,#coverViewer .viewer-years{display:none!important}
/* Animated archive chronology occupies the left field without extra slogans. */
.title-screen{--timeline-progress:0}
.year-reveal{left:8%;top:21%;width:29%}
.year-reveal>span{font-size:calc(2.5 * var(--h5-unit, 3.9px));letter-spacing:.2em;color:#c7a778}
.year-reveal strong{font-size:calc(11 * var(--h5-unit, 3.9px));line-height:1.5;letter-spacing:-.045em}
.year-reveal small{font-size:calc(2.6 * var(--h5-unit, 3.9px));letter-spacing:.16em;margin-top:0}
.title-screen .pile-card{left:37%;width:61%}
.archive-timeline{position:absolute;left:10%;top:41%;width:23%;height:39%;z-index:4;color:#c8a97b;pointer-events:none;opacity:1;transition:opacity .9s ease}
.timeline-rule{position:absolute;left:0;top:0;bottom:0;width:1px;background:#dab5763b}
.timeline-rule i{position:absolute;left:0;top:0;width:1px;height:calc(var(--timeline-progress)*100%);background:#edcf99;box-shadow:0 0 7px #efd19b33;transition:height .22s linear}
.timeline-rule b{position:absolute;left:-3px;top:calc(var(--timeline-progress)*100%);width:7px;height:7px;border-radius:50%;background:#f1d3a0;box-shadow:0 0 0 4px #dcb47814;transition:top .22s linear;transform:translateY(-50%)}
.archive-timeline>span{position:absolute;left:calc(4 * var(--h5-unit, 3.9px));top:calc(var(--position)*100%);transform:translateY(-50%);font:calc(2.6 * var(--h5-unit, 3.9px)) Georgia,serif;letter-spacing:.11em}
.archive-timeline>span:before{content:"";position:absolute;left:calc(-4 * var(--h5-unit, 3.9px));top:50%;width:calc(1.8 * var(--h5-unit, 3.9px));height:1px;background:#d8b78366}
.is-complete .archive-timeline{opacity:0}
/* Chronology rises with the growing calendar pile. */
.timeline-rule i{top:auto;bottom:0}
.timeline-rule b{top:calc((1 - var(--timeline-progress))*100%)}
.archive-timeline>span{top:calc((1 - var(--position))*100%)}
/* The completed title keeps a clear red field without pale paper ghosts. */
.title-screen.is-complete .calendar-pile{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s,visibility 1s!important}
.title-grain{opacity:.2;filter:sepia(.2) brightness(.5) saturate(.75) blur(2px)}
/* Clear the documentary backdrop as the final title tableau resolves. */
.title-screen .title-grain{transition:opacity 1.2s ease}
.title-screen.is-complete .title-grain,.title-screen.is-complete .stack-table,.title-screen.is-complete .stack-light{opacity:0!important}
.title-screen.is-complete .calendar-pile{display:none!important}
.title-screen{background:radial-gradient(ellipse at 45% 48%,#a43a28 0%,#8e2c20 52%,#6b2019 100%)}
.title-screen:after{background:radial-gradient(ellipse at 50% 50%,transparent 45%,#46120e33),repeating-linear-gradient(115deg,#f2c49303 0 1px,transparent 1px 4px)}
.title-screen .pile-card{top:49%}
.is-entered .title-heading{animation-delay:10.1s}.is-entered .title-actions{animation-delay:11s}
/* Archive light and physical photographs add life to the title tableau. */
.archive-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;opacity:0;transition:opacity 1.8s ease}
.is-complete .archive-atmosphere{opacity:1}
.archive-lightbeam{position:absolute;left:-75%;top:-35%;width:80%;height:170%;background:linear-gradient(90deg,transparent,#f4c79008 24%,#ffd8a631 50%,#e8ae710c 74%,transparent);transform:rotate(-24deg);mix-blend-mode:screen;filter:blur(14px);animation:archiveLightPass 14s ease-in-out infinite;animation-play-state:paused}
.is-complete .archive-lightbeam{animation-play-state:running}
@keyframes archiveLightPass{0%,100%{transform:translateX(-12%) rotate(-24deg);opacity:.25}50%{transform:translateX(200%) rotate(-24deg);opacity:.8}}
.archive-dust{position:absolute;inset:0;mask-image:radial-gradient(ellipse at 48% 45%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 48% 45%,#000,transparent 75%)}
.archive-dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:#ffe6b7;opacity:0;animation:archiveDustDrift var(--duration) ease-in-out var(--delay) infinite;animation-play-state:paused}
.is-complete .archive-dust i{animation-play-state:running}
@keyframes archiveDustDrift{0%,100%{opacity:0;transform:translate(0,12px)}30%,65%{opacity:.3}80%{opacity:0;transform:translate(14px,-35px)}}
.title-screen.is-complete .calendar-pile{display:block!important;opacity:0;visibility:hidden;transition:opacity 1.2s,visibility 1.2s!important}
.is-complete .title-deck{animation:archiveDeckArrival 1.35s cubic-bezier(.16,.65,.3,1) both}
@keyframes archiveDeckArrival{from{transform:translate(calc(15 * var(--h5-unit, 3.9px)),calc(-12 * var(--h5-unit, 3.9px))) scale(.84);opacity:0}to{transform:translate(0,0) scale(1);opacity:1}}
.is-complete .calendar-flipbook{animation:archivePhotoBreath 8s ease-in-out 1.5s infinite}
@keyframes archivePhotoBreath{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-4px) rotate(.3deg)}}
.calendar-flipbook.is-touched,.calendar-flipbook:hover{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.archive-lightbeam,.archive-dust i,.is-complete .calendar-flipbook,.is-complete .title-deck{animation:none!important}.archive-lightbeam{left:30%;opacity:.3}}
/* Preserve the requested gentle atmosphere when reduced motion is enabled. */
@media(prefers-reduced-motion:reduce){.is-complete .archive-lightbeam{animation:archiveLightPass 20s ease-in-out infinite!important;left:-75%;opacity:.4}.is-complete .archive-dust i{animation:archiveDustDrift var(--duration) ease-in-out var(--delay) infinite!important}.is-complete .title-deck{animation:archiveDeckArrival 1.6s ease-out both!important}.is-complete .calendar-flipbook{animation:archivePhotoBreath 12s ease-in-out 2s infinite!important}}
/* Keep documentary photographs solid during the final handover. */
.title-screen .title-grain{transition:opacity .65s ease}
.title-screen.is-resolving .title-grain,.title-screen.is-resolving .stack-table,.title-screen.is-resolving .stack-light{opacity:0!important}
.title-screen.is-complete .calendar-pile{display:none!important;transition:none!important}
.is-complete .title-deck{transition:none;opacity:1;animation:archiveDeckArrival .85s cubic-bezier(.16,.65,.3,1) both}
@keyframes archiveDeckArrival{from{transform:translate(calc(15 * var(--h5-unit, 3.9px)),calc(-12 * var(--h5-unit, 3.9px)));opacity:1}to{transform:translate(0,0);opacity:1}}
@keyframes archivePhotoBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.is-complete .title-deck{animation:archiveDeckArrival 1s ease-out both!important}}
/* Warm overhead spotlights move across the archive backdrop. */
.archive-lightbeam{left:4%;top:-12%;width:92%;height:122%;filter:blur(7px);background:conic-gradient(from 153deg at 48% 0%,transparent 0deg,#ffda9900 1deg,#ffda9910 12deg,#ffe6b936 27deg,#ffcf8618 43deg,#ffda9900 56deg,transparent 57deg);transform-origin:48% 0%;mix-blend-mode:screen;animation:archiveOverheadSpotlight 11s ease-in-out infinite}
.archive-atmosphere:before{content:"";position:absolute;left:32%;right:32%;top:-4%;height:18%;background:radial-gradient(ellipse at 50% 0%,#ffe2aa44,transparent 70%);filter:blur(10px);animation:archiveLampGlow 7s ease-in-out infinite}
.archive-atmosphere:after{content:"";position:absolute;left:10%;top:-8%;width:90%;height:114%;pointer-events:none;transform-origin:70% 0%;background:conic-gradient(from 160deg at 70% 0%,transparent 0deg,#f4c78600 1deg,#f4c78614 18deg,#ffe1a922 23deg,#f4c78600 40deg,transparent 41deg);filter:blur(12px);mix-blend-mode:screen;animation:archiveSecondarySpotlight 16s ease-in-out -5s infinite}
@keyframes archiveOverheadSpotlight{0%,100%{transform:rotate(-12deg) scaleX(.9);opacity:.55}45%{transform:rotate(10deg) scaleX(1.08);opacity:.95}75%{transform:rotate(3deg) scaleX(.96);opacity:.7}}
@keyframes archiveSecondarySpotlight{0%,100%{transform:rotate(7deg);opacity:.25}50%{transform:rotate(-9deg);opacity:.65}}
@keyframes archiveLampGlow{0%,100%{opacity:.55}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.is-complete .archive-lightbeam{left:4%;animation:archiveOverheadSpotlight 16s ease-in-out infinite!important}}
/* Crisp, gilded fan rays radiate from above and end before the photographs. */
.archive-atmosphere{height:38%;bottom:auto;contain:paint;mask-image:linear-gradient(#000 0%,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 78%,transparent 100%)}
.archive-lightbeam,.is-complete .archive-lightbeam{inset:0;width:100%;height:100%;background:none;filter:none;mix-blend-mode:normal;transform:none;opacity:1;animation:none!important}
.archive-atmosphere:before{left:35%;right:35%;top:-7%;height:30%;filter:none;background:radial-gradient(ellipse at 50% 0%,#ffe8aa99,#e6b95522 42%,transparent 72%);animation:archiveLampGlow 4.5s ease-in-out infinite}
.archive-atmosphere:after{display:none}
.golden-spotlight{display:block;width:100%;height:100%;overflow:hidden}
.gold-ray{transform-origin:50% 0%;transform-box:view-box;animation:archiveGoldShimmer var(--ray-duration) ease-in-out var(--ray-delay) infinite}
@keyframes archiveGoldShimmer{0%,100%{opacity:.4;transform:rotate(-1deg)}24%{opacity:.72;transform:rotate(.4deg)}48%{opacity:.52;transform:rotate(-.3deg)}72%{opacity:.92;transform:rotate(1deg)}}
.title-screen:after{background:radial-gradient(ellipse at 50% 50%,transparent 45%,#46120e33)}
.title-screen .calendar-flipbook{animation:none!important;transform:none!important;filter:none}
.title-screen .title-deck{will-change:auto}
@media(prefers-reduced-motion:reduce){.is-complete .archive-lightbeam{inset:0;opacity:1;animation:none!important}.gold-ray{animation-duration:6s}}
/* Layout-based pullback redraws image detail instead of enlarging a composited bitmap. */
@property --archive-camera{syntax:"<number>";inherits:true;initial-value:1}
.title-screen .calendar-pile{--archive-camera:1;transform:none!important;perspective:none;filter:none;will-change:auto}
.title-screen .pile-card{width:calc(61% * var(--archive-camera));top:calc(49% + (var(--archive-camera) - 1)*17%);transform:translate(calc(var(--shift)*1px),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)) * var(--archive-camera)));filter:none;will-change:auto}
.title-screen .pile-card img{filter:none;opacity:1;image-rendering:auto}
@keyframes realCalendarLand{0%{opacity:1;transform:translate(calc(var(--shift)*1px),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)) * var(--archive-camera) - calc(7 * var(--h5-unit, 3.9px))))}75%{opacity:1;transform:translate(calc(var(--shift)*1px),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)) * var(--archive-camera) + 1px))}100%{opacity:1;transform:translate(calc(var(--shift)*1px),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)) * var(--archive-camera)))}}
.title-screen .title-grain{filter:sepia(.15) brightness(.55) saturate(.8);transform:none}
.title-screen .archive-atmosphere{z-index:1;contain:layout paint;filter:none;backdrop-filter:none}
.title-screen .stack-card{will-change:auto;backdrop-filter:none;filter:none}
.title-screen .stack-card img{filter:none;opacity:1}
.title-screen .pile-card{left:calc(37% - (var(--archive-camera) - 1)*55%)}
/* Let the complete archive stand before the title gently settles in. */
.is-entered .title-heading{animation-delay:12.2s;animation-duration:1.8s}
.is-entered .title-actions{animation-delay:14s;animation-duration:1.2s}
@media(prefers-reduced-motion:reduce){.is-entered .title-heading{animation-duration:1.8s}.is-entered .title-actions{animation-duration:1.2s}}
/* The correspondence overlaps the scene, connecting the story to its real objects. */
.opening .paper-curl{transform:translateY(-10.498%)}
.opening .bottom-note{top:73%;height:27%}
.opening .bottom-title{font-size:calc(4.2 * var(--h5-unit, 3.9px));max-width:88%;letter-spacing:.035em}
.opening-calendars{top:75.8%;right:5%;width:33%}
.opening .entry{top:86.8%}
.opening .entry.ready{animation:openingInvitation .7s ease-out both}
@keyframes openingInvitation{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Extract the first archival calendars from the lower pile into the central reader. */
@keyframes archiveDeckArrival{from{transform:translate(calc(14 * var(--h5-unit, 3.9px)),calc(21 * var(--h5-unit, 3.9px)));opacity:1}to{transform:translate(0,0);opacity:1}}
.is-complete .title-deck{animation-duration:1.3s}
@media(prefers-reduced-motion:reduce){.is-complete .title-deck{animation-duration:1.3s!important}}
/* A restrained pool of warm light links the scene, paper and archive objects. */
.opening:after{content:"";position:absolute;inset:35% 0 12%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 22% 26%,#ffda9218,transparent 55%);animation:correspondenceLight 9s ease-in-out infinite}
@keyframes correspondenceLight{0%,100%{opacity:.35}50%{opacity:.85}}
/* A legible opening story, and a measured final five calendars. */
.opening-hero{height:35.16%}
.opening-storyline{position:absolute;left:7%;right:7%;top:33%;z-index:4;pointer-events:none;color:#f1d7a8;text-shadow:0 2px 14px #4a130d}
.opening-storyline span{display:block;font:calc(2.7 * var(--h5-unit, 3.9px)) KaiTi,serif;letter-spacing:.18em;margin-bottom:calc(1.7 * var(--h5-unit, 3.9px));color:#ddba87}
.opening-storyline strong{display:block;font:calc(6.3 * var(--h5-unit, 3.9px))/1.25 KaiTi,serif;letter-spacing:.08em;font-weight:400}
.opening .paper-curl{transform:translateY(-12.451%)}
.opening .bottom-note{top:71%;height:29%}
.opening-calendars{top:74.2%}
.opening .entry{top:85.8%}
.title-screen.is-entered .pile-card.is-landed:nth-child(n+36){animation-duration:.45s}
.is-entered .title-heading{animation-delay:13.9s;animation-duration:2.2s}
.is-entered .title-actions{animation-delay:16.3s;animation-duration:1.2s}
.title-screen.is-complete .calendar-pile{display:block!important;visibility:visible;opacity:0;transition:opacity .95s ease!important}
.is-complete .title-deck{transform:none!important;animation:none!important;transition:opacity .8s ease;opacity:1}
@media(prefers-reduced-motion:reduce){.is-complete .title-deck{animation:none!important}.is-entered .title-heading{animation-duration:2.2s}}

/* The last objects decelerate before the archive resolves. */
.title-screen.is-entered .pile-card.is-landed:nth-child(36){animation-duration:.35s}
.title-screen.is-entered .pile-card.is-landed:nth-child(37){animation-duration:.4s}
.title-screen.is-entered .pile-card.is-landed:nth-child(38){animation-duration:.45s}
.title-screen.is-entered .pile-card.is-landed:nth-child(39){animation-duration:.5s}
.title-screen.is-entered .pile-card.is-landed:nth-child(40){animation-duration:.55s}

/* Consistent calendar rhythm; opaque physical objects leave without dissolving. */
.opening-storyline{top:35.7%}
.opening-storyline strong{font-size:calc(5.8 * var(--h5-unit, 3.9px));letter-spacing:.045em}
.opening-hero{filter:sepia(.06) brightness(.94) saturate(.96) contrast(1.02)}
.title-screen.is-entered .pile-card.is-landed:nth-child(n){animation-duration:.23s;opacity:1}
.title-screen .calendar-pile{translate:0 0;opacity:1;transition:none!important}
.title-screen.is-complete .calendar-pile{opacity:1;translate:0 110vh;visibility:hidden;transition:translate 1.1s cubic-bezier(.55,.05,.8,.4),visibility 0s 1.1s!important}
.is-entered .title-heading{animation-delay:13s;animation-duration:2.2s}
.is-entered .title-actions{animation-delay:15.4s}


/* Resolve the physical stack before introducing the title photograph. */
.title-screen .title-deck,.title-screen.is-complete .title-deck{visibility:hidden;opacity:0;transform:none!important;animation:none!important;transition:opacity 1s ease}
.title-screen.is-deck-ready .title-deck{visibility:visible;opacity:1}
.is-entered .title-heading{animation-delay:14.1s;animation-duration:2.2s}
.is-entered .title-actions{animation-delay:16.5s}

/* Only the reveal window perimeter shimmers; the veil and photograph stay steady. */
.focus-window-rim{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 57%,#f7bf6a00 60%,#f7bf6a50 65%,#ed9d425c 69%,#de6c2b20 76%,transparent 84%);opacity:var(--rim-opacity,0);mix-blend-mode:screen}

/* A small, periodic lift gives the settled cover typography a living rhythm. */
@keyframes archiveTypeLift{0%,12%,55%,100%{translate:0 0}25%{translate:0 -3px}34%{translate:0 1px}43%{translate:0 -1px}}
.opening.is-settled .opening-storyline strong{animation:archiveTypeLift 4.8s ease-in-out .3s infinite}
.opening.is-settled .bottom-title{animation:archiveTypeLift 4.8s ease-in-out 1.1s infinite}
.opening.is-settled .bottom-copy{animation:archiveTypeLift 5.4s ease-in-out 1.7s infinite}
.title-screen.is-settled #secondTitle{animation:archiveTypeLift 4.8s ease-in-out .3s infinite}
.title-screen.is-settled .title-subtitle{animation:archiveTypeLift 5.4s ease-in-out 1.2s infinite}
@media(prefers-reduced-motion:reduce){.opening.is-settled .opening-storyline strong,.opening.is-settled .bottom-title,.opening.is-settled .bottom-copy,.title-screen.is-settled #secondTitle,.title-screen.is-settled .title-subtitle{animation-duration:7s}}

/* Uneven golden reflections travel only along the reveal window's perimeter. */
@property --rim-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.focus-window-rim{background:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#dd7d3300 61%,#e6a45524 69%,transparent 82%)}
.focus-window-rim:before{content:"";position:absolute;inset:0;background:conic-gradient(from var(--rim-angle) at var(--lens-x) var(--lens-y),transparent 0deg,#f9d69c88 32deg,transparent 75deg,#de834533 135deg,transparent 176deg,#ffd89e99 220deg,transparent 258deg,#f2b66b44 310deg,transparent 360deg);mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 60%,#0009 66%,#000 70%,transparent 81%);-webkit-mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 60%,#0009 66%,#000 70%,transparent 81%);animation:archiveRimFlow 5s linear infinite}
@keyframes archiveRimFlow{to{--rim-angle:360deg}}
/* A passing metallic highlight adds life without making the letters translucent. */
@keyframes archiveLetterGleam{0%,15%{background-position:100% 50%;text-shadow:0 1px 10px #ffd39a16}45%,60%{background-position:0% 50%;text-shadow:0 1px 14px #ffd39a38}85%,100%{background-position:0% 50%;text-shadow:0 1px 10px #ffd39a16}}
.opening.is-settled .opening-storyline strong,.opening.is-settled .bottom-title,.title-screen.is-settled #secondTitle{background-image:linear-gradient(110deg,#e5bd82 0%,#f1d7a6 39%,#fff1ce 47%,#ffedbc 51%,#e7bc7b 60%,#f1d7a6 100%);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:archiveTypeLift 5.8s ease-in-out .3s infinite,archiveLetterGleam 6.8s ease-in-out infinite}
.title-screen.is-settled #secondTitle span{color:inherit;-webkit-text-fill-color:inherit}
.title-screen.is-settled .title-subtitle{animation:archiveTypeLift 6s ease-in-out 1.2s infinite,archiveSubtitleGlow 6s ease-in-out 1.5s infinite}
@keyframes archiveSubtitleGlow{0%,100%{text-shadow:0 1px 4px #ffdfa51a}45%{text-shadow:0 1px 12px #ffdfa54d}}

/* Gold is awakened character by character, followed by a quiet resting interval. */
.opening.is-settled .opening-storyline strong,.opening.is-settled .bottom-title,.title-screen.is-settled #secondTitle{animation:none;background:none;color:#edcf9d;-webkit-text-fill-color:currentColor;text-shadow:0 2px 10px #43150b66}
.archive-glyph{display:inline-block;font:inherit;font-style:normal;color:inherit;letter-spacing:inherit;transform-origin:50% 80%;-webkit-text-fill-color:currentColor}
@keyframes archiveGoldAwaken{0%,4%,36%,100%{color:#edcf9d;transform:translateY(0) scale(1);text-shadow:0 1px 3px #45150b55}10%{color:#fff2cf;transform:translateY(-2px) scale(1.055);text-shadow:0 0 10px #ffd38c88,0 1px 2px #672a1655}17%{color:#ffe6af;transform:translateY(0) scale(1.015);text-shadow:0 0 5px #ffd38c55}25%{color:#edcf9d;transform:translateY(0) scale(1);text-shadow:0 1px 3px #45150b55}}
.opening.is-settled .archive-glyph,.title-screen.is-settled #secondTitle .archive-glyph{animation:archiveGoldAwaken 7s cubic-bezier(.25,.65,.3,1) var(--glyph-delay) infinite}
.opening-storyline strong,#secondTitle{position:relative}
.opening.is-settled .opening-storyline strong:after,.title-screen.is-settled #secondTitle:after{content:"";position:absolute;left:0;bottom:calc(-1.6 * var(--h5-unit, 3.9px));width:24%;height:1px;transform-origin:left;background:linear-gradient(90deg,#d9ad6a,transparent);animation:archiveGoldRule 7s ease-in-out infinite}
.title-screen.is-settled #secondTitle:after{left:38%;transform-origin:center;background:linear-gradient(90deg,transparent,#e5be7f,transparent)}
@keyframes archiveGoldRule{0%,100%{opacity:.35;scale:.65 1}35%{opacity:.85;scale:1.15 1}70%{opacity:.4;scale:.8 1}}
@media(prefers-reduced-motion:reduce){.opening.is-settled .archive-glyph,.title-screen.is-settled #secondTitle .archive-glyph{animation-duration:9s}}

/* A two-stage archival reveal with drifting edge glints and a second soft contour. */
.opening .letter-focus{backdrop-filter:blur(var(--veil-blur,11px)) saturate(.8);-webkit-backdrop-filter:blur(var(--veil-blur,11px)) saturate(.8)}
.focus-window-rim:before{background:conic-gradient(from var(--rim-angle) at var(--lens-x) var(--lens-y),transparent 0deg,#ffdeaccc 28deg,transparent 65deg,#e5955055 112deg,transparent 170deg,#ffd398dd 214deg,transparent 257deg,#f7bf7e88 302deg,transparent 360deg);animation-duration:3.8s}
.focus-window-rim:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 75%,#f2b77500 79%,#efbc7436 84%,#e9954b08 89%,transparent 95%);animation:archiveWindowEcho 1.8s ease-in-out infinite}
@keyframes archiveWindowEcho{0%,100%{opacity:.2}50%{opacity:.85}}
.window-mote{position:absolute;left:calc(var(--lens-x) + var(--lens-rx)*var(--spark-x));top:calc(var(--lens-y) + var(--lens-ry)*var(--spark-y));width:2px;height:2px;border-radius:50%;background:#ffe8b9;box-shadow:0 0 5px #ffd099aa;animation:archiveWindowMote 2.1s ease-in-out var(--spark-delay) infinite}
.window-mote:nth-child(3n){width:3px;height:1px}
@keyframes archiveWindowMote{0%,100%{opacity:0;translate:0 0}35%{opacity:.9}75%{opacity:0;translate:var(--spark-dx) var(--spark-dy)}}
.opening.is-settled .focus-window-rim{visibility:hidden}

/* Restore the mystery of a fully veiled scene, without decorative light rings. */
.focus-window-rim{display:none!important}
.opening .letter-focus{background:linear-gradient(180deg,#611b16dd,#87291fe6 55%,#611b16ed);mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 54%,#0009 77%,#000 100%);-webkit-mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 54%,#0009 77%,#000 100%)}
.title-screen.is-entered .pile-card.is-landed:nth-child(n){animation-duration:.14s}
.title-screen.is-complete .calendar-pile{transition:translate .6s cubic-bezier(.55,.05,.8,.4),visibility 0s .6s!important}
.title-screen .title-deck,.title-screen.is-complete .title-deck{transition:opacity .65s ease}
.is-entered .title-heading{animation-delay:7.9s;animation-duration:1.3s}
.is-entered .title-actions{animation-delay:9.25s;animation-duration:.8s}
@media(prefers-reduced-motion:reduce){.is-entered .title-heading{animation-duration:1.3s}.is-entered .title-actions{animation-duration:.8s}}

/* Return to the partial reveal, with a softly flickering perimeter that dissolves. */
.opening .letter-focus{background:linear-gradient(180deg,#82271b55,#a3332477 55%,#84271db3);mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%);-webkit-mask-image:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 58%,#0009 78%,#000 100%)}
.opening .focus-window-rim{display:block!important;background:radial-gradient(ellipse var(--lens-rx) var(--lens-ry) at var(--lens-x) var(--lens-y),transparent 57%,#f4d4ad00 61%,#f4d4ad44 68%,#cd8c4e1c 76%,transparent 84%)}
.focus-window-rim:before,.focus-window-rim:after,.window-mote{display:none!important}
/* Continuous double-beat illumination, synchronized within each line. */
@keyframes archiveTextHeartbeat{0%,23%,52%,100%{transform:scale(1);color:#edcf9d;text-shadow:0 1px 3px #45150b55}12%{transform:scale(1.035);color:#fff0c6;text-shadow:0 0 9px #ffce8280,0 1px 3px #54201255}36%{transform:scale(1.02);color:#ffe6b3;text-shadow:0 0 6px #ffce825c,0 1px 3px #54201255}72%{transform:scale(1);color:#f1d4a1;text-shadow:0 1px 4px #f5cc8126}}
.opening.is-settled .archive-glyph,.title-screen.is-settled #secondTitle .archive-glyph{animation:archiveTextHeartbeat 1.8s ease-in-out 0s infinite}
.opening.is-settled .bottom-title .archive-glyph{animation-delay:.18s}
.opening.is-settled .bottom-copy,.title-screen.is-settled .title-subtitle{animation:archiveSubtitleGlow 1.8s ease-in-out .18s infinite}
.opening.is-settled .opening-storyline strong:after,.title-screen.is-settled #secondTitle:after{animation-duration:1.8s}
@media(prefers-reduced-motion:reduce){.opening.is-settled .archive-glyph,.title-screen.is-settled #secondTitle .archive-glyph{animation-duration:2.2s}}

/* The reveal aperture rotates and extends while the documentary scene stays fixed. */
.opening-mask-defs{position:absolute;pointer-events:none}
.opening .letter-focus{mask-image:url(#openingCameraMask);-webkit-mask-image:url(#openingCameraMask);mask-mode:luminance;mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-composite:add;-webkit-mask-composite:source-over}
.opening .focus-window-rim{display:none!important}

/* A circular, flickering aperture replaces the rotating lens. */
.opening .letter-focus{mask-image:radial-gradient(circle var(--lens-rx) at var(--lens-x) var(--lens-y),transparent 58%,#0008 77%,#000 100%);-webkit-mask-image:radial-gradient(circle var(--lens-rx) at var(--lens-x) var(--lens-y),transparent 58%,#0008 77%,#000 100%);mask-mode:alpha}
.opening .focus-window-rim{display:block!important;background:radial-gradient(circle var(--lens-rx) at var(--lens-x) var(--lens-y),transparent 56%,#efd1a800 61%,#f8debd66 68%,#eac29738 74%,transparent 84%);opacity:var(--rim-opacity,0)}
/* A full-line metallic sweep travels left to right continuously. */
@keyframes archiveGoldSweepContinuous{from{background-position:100% 50%}to{background-position:0% 50%}}
.opening.is-settled .opening-storyline strong,.opening.is-settled .bottom-title,.opening.is-settled .bottom-copy,.title-screen.is-settled #secondTitle,.title-screen.is-settled .title-subtitle{background-image:linear-gradient(105deg,#dfb879 0%,#edcf9d 37%,#ffedbb 44%,#fff9e6 49%,#ffedbb 54%,#edcf9d 61%,#dfb879 100%);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:archiveGoldSweepContinuous 2.2s linear 0s infinite;text-shadow:none}
.opening.is-settled .archive-glyph,.title-screen.is-settled #secondTitle .archive-glyph{animation:none!important;transform:none;color:inherit;-webkit-text-fill-color:transparent;text-shadow:none}
.title-screen.is-settled #secondTitle span{color:inherit;-webkit-text-fill-color:transparent}
@media(prefers-reduced-motion:reduce){.opening.is-settled .opening-storyline strong,.opening.is-settled .bottom-title,.opening.is-settled .bottom-copy,.title-screen.is-settled #secondTitle,.title-screen.is-settled .title-subtitle{animation-duration:2.2s}}

/* Red frosted glass dissipates along a soft, irregular edge, revealing the archive. */
.opening .letter-focus{mask-image:url(#openingCameraMask);-webkit-mask-image:url(#openingCameraMask);mask-mode:luminance;background:linear-gradient(180deg,#76231cbb,#9d3325c4 55%,#742118dc);backdrop-filter:blur(12px) saturate(.8);-webkit-backdrop-filter:blur(12px) saturate(.8)}
.opening .focus-window-rim{display:none!important}

/* Opening editorial composition: a letter above two continuously moving photo ribbons. */
.opening{background:#852b20}
.opening-hero,.opening-calendars{display:none!important}
.opening .opening-kicker{top:4.8%;left:7%;font-size:calc(2.8 * var(--h5-unit, 3.9px))}
.opening .opening-storyline{top:10%;left:7%;right:7%;text-align:center}
.opening .opening-storyline strong{font-size:calc(7 * var(--h5-unit, 3.9px));letter-spacing:.055em;line-height:1.35}
.opening .paper-curl{transform:translateY(-33.203%)}
.opening .letter-focus{clip-path:inset(17% 0 48% 0);mask-image:radial-gradient(circle var(--lens-rx) at 52% 35%,transparent 57%,#0009 77%,#000 100%);-webkit-mask-image:radial-gradient(circle var(--lens-rx) at 52% 35%,transparent 57%,#0009 77%,#000 100%);mask-mode:alpha;background:linear-gradient(#852b20c4,#8b3023e0);backdrop-filter:blur(11px) saturate(.8);-webkit-backdrop-filter:blur(11px) saturate(.8)}
.opening .focus-window-rim{display:block!important;clip-path:inset(17% 0 48% 0);background:radial-gradient(circle var(--lens-rx) at 52% 35%,transparent 57%,#f5d4ab00 62%,#f5d4ab66 69%,#ddab7320 76%,transparent 83%)}
.opening-photo-ribbons{position:absolute;left:0;right:0;top:54%;height:27%;z-index:4}
.photo-ribbon{position:absolute;left:0;right:0;height:46%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.people-ribbon{top:0}.calendar-ribbon{bottom:0}
.photo-ribbon-track{display:flex;width:max-content;height:100%;animation:ribbonTravel 28s linear infinite;gap:0}
.photo-ribbon-group{display:flex;flex:none;gap:calc(2.5 * var(--h5-unit, 3.9px));padding-right:calc(2.5 * var(--h5-unit, 3.9px));height:100%;align-items:center}
.ribbon-photo{margin:0;flex:none;width:calc(27 * var(--h5-unit, 3.9px));height:94%;border:3px solid #ead7b7;border-radius:4px;background:#372b23;overflow:hidden;box-shadow:0 4px 8px #42170f45}
.ribbon-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.08) saturate(.9)}
.ribbon-calendar{width:calc(22 * var(--h5-unit, 3.9px));border-width:2px;background:#3b3029}
.ribbon-calendar img{object-fit:contain;filter:none}
.calendar-ribbon .photo-ribbon-track{animation-direction:reverse;animation-duration:42s}
@keyframes ribbonTravel{to{transform:translateX(-50%)}}
.opening .bottom-note{top:82%;height:18%;left:0;right:0;text-align:center}
.opening .bottom-title{left:7%;right:7%;top:7%;max-width:none;width:auto;font-size:calc(4.2 * var(--h5-unit, 3.9px));line-height:1.4}
.opening .bottom-copy{left:7%;right:7%;top:27%;font-size:calc(2.7 * var(--h5-unit, 3.9px));line-height:1.5}
.opening .entry{left:22%;right:22%;top:91%;height:5.8%;font-size:calc(4.4 * var(--h5-unit, 3.9px));min-height:44px}
.opening .entry .entry-arrow{font-size:calc(5 * var(--h5-unit, 3.9px))}
.opening.is-settled .opening-storyline strong:after{left:37%;width:26%;background:linear-gradient(90deg,transparent,#d9ad6a,transparent)}
@media(prefers-reduced-motion:reduce){.photo-ribbon-track{animation-duration:38s}.calendar-ribbon .photo-ribbon-track{animation-duration:52s}}

/* Feather the circular veil into the archive field without rectangular seams. */
.opening .letter-focus{clip-path:none;mask-image:radial-gradient(circle var(--lens-rx) at 52% 35%,transparent 57%,#0009 77%,#000 100%),linear-gradient(transparent 15%,#000 22%,#000 45%,transparent 53%);-webkit-mask-image:radial-gradient(circle var(--lens-rx) at 52% 35%,transparent 57%,#0009 77%,#000 100%),linear-gradient(transparent 15%,#000 22%,#000 45%,transparent 53%);mask-composite:intersect;-webkit-mask-composite:source-in}
.opening .focus-window-rim{clip-path:none;mask-image:linear-gradient(transparent 15%,#000 22%,#000 45%,transparent 53%);-webkit-mask-image:linear-gradient(transparent 15%,#000 22%,#000 45%,transparent 53%)}

/* One archival composition: the letter leads into overlapping photographic ribbons. */
.opening-photo-ribbons{top:51%;height:30%;overflow:visible}
.photo-ribbon{height:49%;left:-5%;right:-5%;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.people-ribbon{transform:rotate(-3deg);transform-origin:center}
.calendar-ribbon{transform:rotate(2.5deg);transform-origin:center;bottom:-1%}
.ribbon-photo{width:calc(32 * var(--h5-unit, 3.9px));height:92%;border:1.5px solid #e5caa0;border-radius:1px;box-shadow:0 6px 12px #48160960}
.ribbon-calendar{width:calc(25 * var(--h5-unit, 3.9px));height:91%;border-width:1px}
.photo-ribbon-group{gap:calc(2 * var(--h5-unit, 3.9px));padding-right:calc(2 * var(--h5-unit, 3.9px))}
.opening .bottom-note:before,.opening .bottom-note:after{display:none}
.opening .bottom-title,.opening .bottom-copy{left:7%;right:7%;width:auto;max-width:none;text-align:center;margin:0;transform:none}
.opening .letter-focus{z-index:20;clip-path:none;opacity:1!important;transition:none;background:#842a20;backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:radial-gradient(circle var(--lens-rx) at 52% 35%,transparent 57%,#0008 73%,#000 87%);-webkit-mask-image:radial-gradient(circle var(--lens-rx) at 52% 35%,transparent 57%,#0008 73%,#000 87%);mask-composite:add;-webkit-mask-composite:source-over}
.opening .focus-window-rim{z-index:21;mask-image:none;-webkit-mask-image:none;mix-blend-mode:screen}
.opening.is-settled .letter-focus{opacity:0!important;visibility:hidden}

/* Documentary editorial treatment: facts and original photographs carry the cover. */
.opening .opening-storyline strong{font-family:KaiTi,STKaiti,serif;font-size:calc(6.6 * var(--h5-unit, 3.9px));font-weight:600;letter-spacing:.035em}
.opening .opening-kicker{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:calc(2.5 * var(--h5-unit, 3.9px));letter-spacing:.18em;color:#e2c3a0}
.opening-photo-ribbons{top:51%;height:30%}
.opening .people-ribbon,.opening .calendar-ribbon{transform:none;left:0;right:0}
.opening .people-ribbon{height:54%}
.opening .calendar-ribbon{height:42%;bottom:0}
.opening .ribbon-photo{width:calc(43 * var(--h5-unit, 3.9px));height:100%;border:0;border-radius:0;box-shadow:none;background:#342b24}
.opening .ribbon-photo img{filter:none}
.opening .ribbon-calendar{width:calc(25 * var(--h5-unit, 3.9px));height:100%;background:#342c27}
.opening .photo-ribbon-group{gap:calc(1.5 * var(--h5-unit, 3.9px));padding-right:calc(1.5 * var(--h5-unit, 3.9px))}
.opening .photo-ribbon-track{animation-duration:44s}
.opening .calendar-ribbon .photo-ribbon-track{animation-duration:60s}
.opening .bottom-title{font-family:KaiTi,STKaiti,serif;font-size:calc(4.4 * var(--h5-unit, 3.9px));font-weight:500;letter-spacing:.08em}
.opening .bottom-copy{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:calc(2.7 * var(--h5-unit, 3.9px));letter-spacing:.04em}
.opening.is-settled .bottom-title,.opening.is-settled .bottom-copy{background:none;background-clip:border-box;-webkit-background-clip:border-box;color:#eed5b2;-webkit-text-fill-color:#eed5b2;animation:none;text-shadow:none}
.opening.is-settled .bottom-title .archive-glyph{color:#eed5b2;-webkit-text-fill-color:#eed5b2}
.opening.is-settled .bottom-copy{color:#d9bd9d;-webkit-text-fill-color:#d9bd9d}
.opening .entry .open{background:#87372b;border:1px solid #d4ad7b;box-shadow:none;font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:calc(3.6 * var(--h5-unit, 3.9px));font-weight:500;letter-spacing:.12em}
.opening .entry{left:24%;right:24%}
@media(prefers-reduced-motion:reduce){.opening .photo-ribbon-track{animation-duration:70s}.opening .calendar-ribbon .photo-ribbon-track{animation-duration:90s}}

/* Keep the title reveal synchronized with the shortened forty-book sequence. */
.title-screen.is-entered .title-heading{animation-delay:5.85s;animation-duration:1.3s}
.title-screen.is-entered .title-actions{animation-delay:7.2s;animation-duration:.8s}

/* Mobile performance: stop invisible effects and keep moving photo strips composited. */
.opening.is-settled .focus-window-rim{display:none}
.opening .photo-ribbon-track{animation-play-state:running}
.photo-ribbon-track{will-change:transform;backface-visibility:hidden}

/* Zoom the complete stack on one compositor layer; do not resize/reposition 40 images per frame. */
.title-screen .calendar-pile{transform:scale(var(--archive-camera))!important;transform-origin:92% 32%;will-change:transform,translate}
.title-screen .pile-card{width:61%;left:37%;top:49%;transform:translate(calc(var(--shift)*1px),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px))))}
.title-screen.is-entered .pile-card.is-landed:nth-child(n){animation-fill-mode:none!important}
@keyframes realCalendarLand{0%{opacity:1;transform:translate(calc(var(--shift)*1px),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)) - calc(7 * var(--h5-unit, 3.9px))))}75%{opacity:1;transform:translate(calc(var(--shift)*1px),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px)) + 1px))}100%{opacity:1;transform:translate(calc(var(--shift)*1px),calc(var(--i)*calc(-1.8 * var(--h5-unit, 3.9px))))}}

#writing{background:url('assets/display/letter-clean.jpg') center/100% 100% no-repeat}
.calendar-stack-bitmap{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.calendar-stack-falling{position:absolute;object-fit:contain;visibility:hidden;pointer-events:none}
.opening.is-settled .letter-focus,.opening.is-settled .focus-window-rim{display:none!important}

.ribbon-photo picture{display:contents}

/* Keep one flashing rim and defer decorative light layers until the tower is finished. */
.opening .focus-window-rim:before,.opening .focus-window-rim:after,.window-mote{display:none!important}
.title-screen .title-grain{background-image:url('assets/display/场景背景.jpg');filter:none!important}
.title-screen:not(.is-settled) .archive-atmosphere{display:none}

.title-screen.is-returned .title-heading,.title-screen.is-returned .title-actions,.title-screen.is-returned .title-deck{animation:none!important;opacity:1!important;transform:none!important}

/* Second screen: preserve the 40-book loading sequence, then resolve into a poster composition. */
.title-screen .title-years{left:9.5%!important;top:43.2%!important;transform-origin:left top}
.title-screen .calendar-pile{translate:0 0;scale:1}
.title-screen .archive-timeline{translate:0 0;scale:1;transform-origin:left top}
.title-screen .view-all-calendars{
  position:absolute;z-index:18;left:73%;bottom:8.7%;min-width:0;min-height:44px;
  padding:12px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#21100d;opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,18px);transition:opacity .55s ease .78s,transform .7s cubic-bezier(.2,.75,.25,1) .78s,visibility 0s 1.35s;
  font-family:KaiTi,"STKaiti",serif;letter-spacing:.11em;text-align:center;white-space:nowrap;
}
.title-screen .view-all-calendars span{display:block;font-size:calc(2.15 * var(--h5-unit,3.9px));font-weight:700;line-height:1.25;color:rgba(32,14,11,.82);border-bottom:1px solid rgba(43,18,14,.28);padding:0 7px 4px}
.title-screen .view-all-calendars:active{transform:translate(-50%,2px) scale(.97)}

.title-screen.is-complete .title-deck,.title-screen.is-deck-ready .title-deck{display:none!important;visibility:hidden!important;opacity:0!important}
.title-screen.is-complete .calendar-pile,
.title-screen.is-settled .calendar-pile{
  --final-pile-scale:.5;--final-pile-y:9%;
  display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  translate:0 var(--final-pile-y);scale:var(--final-pile-scale);transform:scale(var(--archive-camera))!important;transform-origin:76% 70%!important;
  transition:scale 2.4s cubic-bezier(.2,.68,.2,1),translate 2.4s cubic-bezier(.2,.68,.2,1)!important;filter:none!important;
}
.title-screen.is-complete:not(.is-returned) .calendar-pile{animation:none!important}
@keyframes secondPileResolve{
  0%{opacity:1;translate:0 0;scale:1}
  42%{opacity:1;translate:0 3%;scale:.82}
  100%{opacity:1;translate:0 var(--final-pile-y);scale:var(--final-pile-scale)}
}
.title-screen.is-complete .archive-timeline,
.title-screen.is-settled .archive-timeline{
  left:9.5%!important;top:41%!important;width:19%!important;height:39%!important;
  opacity:.68!important;visibility:visible!important;translate:0 8vh;scale:.95;transform:none;transform-origin:left top;
  transition:scale 2.4s cubic-bezier(.2,.68,.2,1),translate 2.4s cubic-bezier(.2,.68,.2,1),opacity .7s ease!important;
}
.title-screen.is-complete .title-years,
.title-screen.is-settled .title-years{
  left:9.5%!important;top:43.2%!important;opacity:.7;translate:0 0;scale:.78;transform:none;transform-origin:left top;
  transition:opacity .65s ease,transform 1.25s cubic-bezier(.2,.72,.2,1)!important;
}
.title-screen.is-complete:not(.is-returned) .archive-timeline,
.title-screen.is-complete:not(.is-returned) .title-years{animation:none!important}
@keyframes secondTimelineResolve{
  0%{opacity:1;translate:0 0;scale:1}
  42%{opacity:.82;translate:0 3vh;scale:.98}
  100%{opacity:.68;translate:0 8vh;scale:.95}
}
@keyframes titleYearsResolve{
  0%{opacity:1;translate:0 0;scale:1}
  42%{opacity:.82;translate:0 0;scale:.9}
  100%{opacity:.7;translate:0 0;scale:.78}
}
.title-screen.is-complete .year-reveal,
.title-screen.is-settled .year-reveal{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transform:translateY(8px) scale(.68)!important;transform-origin:left top;
  transition:transform .65s ease,opacity .5s ease,visibility 0s .5s!important;
}
.title-screen.is-complete .year-reveal>span{color:#d5b579}
.title-screen.is-complete .year-reveal strong{text-shadow:0 4px 22px rgba(15,3,2,.45)}
.title-screen .title-heading{opacity:0;transform:translateY(-16px)}
.title-screen.is-complete .title-heading,
.title-screen.is-settled .title-heading{
  animation:none!important;opacity:1!important;transform:translateY(0)!important;
  left:5%!important;right:5%!important;top:6.8%!important;text-align:center!important;
  transition:opacity .72s ease 2s,transform .9s cubic-bezier(.2,.75,.25,1) 2s!important;
}
.title-screen.is-complete .title-heading>p:first-child{font-size:calc(2.45 * var(--h5-unit,3.9px));margin-bottom:calc(2.1 * var(--h5-unit,3.9px));letter-spacing:.28em;color:#d0ad70}
.title-screen.is-complete .title-heading h1{font-size:calc(7.6 * var(--h5-unit,3.9px))!important;filter:drop-shadow(0 7px 18px rgba(22,4,2,.34))}
.title-screen .title-heading h1:focus{outline:none!important}
.title-screen.is-complete .title-heading h1>span{font-size:calc(16.5 * var(--h5-unit,3.9px))!important}
.title-screen.is-complete .title-heading h1 .title-unit{font-size:calc(6.7 * var(--h5-unit,3.9px))!important}
.title-screen.is-complete .title-subtitle{margin-top:calc(1.1 * var(--h5-unit,3.9px));font-size:calc(2.65 * var(--h5-unit,3.9px));line-height:1.65;letter-spacing:.1em}
.title-screen.is-complete .view-all-calendars,
.title-screen.is-settled .view-all-calendars{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:2.05s,2.05s,0s}
.title-screen.is-complete .stack-progress{opacity:0!important;visibility:hidden!important}

@media (max-aspect-ratio:3/5){
  .title-screen.is-complete .calendar-pile,.title-screen.is-settled .calendar-pile{--final-pile-scale:.58;--final-pile-y:7%;translate:0 var(--final-pile-y);scale:var(--final-pile-scale);transform:scale(var(--archive-camera))!important}
  .title-screen.is-complete .year-reveal,.title-screen.is-settled .year-reveal{transform:translateY(8px) scale(.64)!important}
  .title-screen .view-all-calendars{left:72%;bottom:4.8%}
}
@media (prefers-reduced-motion:reduce){
  .title-screen.is-complete .calendar-pile,.title-screen.is-complete .year-reveal,.title-screen.is-complete .title-heading,.title-screen.is-complete .view-all-calendars{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* One compact persistent sound control. Its visual circle stays clear of headings,
   while the invisible hit area remains at least 44px on touch screens. */
.sound{
  position:fixed!important;
  z-index:10020!important;
  top:max(9px,calc(env(safe-area-inset-top) + 7px))!important;
  right:max(9px,calc((100vw - min(100vw,56.2988vh))/2 + 9px))!important;
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  justify-content:center!important;
  gap:0!important;
  border-color:rgba(228,190,119,.42)!important;
  border-radius:50%!important;
  background:rgba(49,12,9,.72)!important;
  box-shadow:0 5px 18px rgba(20,4,3,.3),inset 0 0 0 1px rgba(255,232,180,.08)!important;
  backdrop-filter:blur(7px)!important;
  transition:width .28s ease,background .25s ease,transform .2s ease!important;
}
.sound:before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
}
.sound-icon{
  position:relative;width:21px;height:19px;display:block;color:#efd49c
}
.sound-icon svg{display:block;width:100%;height:100%;overflow:visible}
.sound-speaker{fill:currentColor}
.sound-wave{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;transform-origin:17px 14px;animation:soundWave 1.25s ease-in-out infinite}
.sound-wave-2{animation-delay:-.18s}.sound-wave-3{animation-delay:-.36s}
.sound-slash{display:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 1.5px rgba(49,12,9,.9))}
.sound #soundLabel{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.sound[aria-pressed=true]{background:rgba(121,39,24,.78)!important}
.sound[aria-pressed=false]{
  background:rgba(49,12,9,.78)!important;
  animation:soundAttention 1.45s ease-in-out infinite;
}
.sound[aria-pressed=false] .sound-icon{animation:soundIconAttention 1.45s ease-in-out infinite}
.sound[aria-pressed=false] .sound-wave{display:none;animation:none}
.sound[aria-pressed=false] .sound-slash{display:block}
.sound:active{transform:scale(.94)}
.sound-notice{position:fixed;z-index:10019;top:max(17px,calc(env(safe-area-inset-top) + 13px));left:50%;margin:0;transform:translate(-50%,-8px);padding:7px 13px;border:1px solid rgba(229,194,128,.35);border-radius:18px;background:rgba(38,12,9,.9);color:#f3ddaf;font:11px/1.4 "Microsoft YaHei","PingFang SC",sans-serif;letter-spacing:.08em;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s}
.sound-notice.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes soundWave{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes soundAttention{0%,42%,100%{box-shadow:0 5px 18px rgba(20,4,3,.3),0 0 0 0 rgba(239,196,111,0),inset 0 0 0 1px rgba(255,232,180,.08)}10%{box-shadow:0 5px 18px rgba(20,4,3,.3),0 0 0 7px rgba(239,196,111,.2),0 0 22px rgba(242,190,92,.34),inset 0 0 0 1px rgba(255,232,180,.2)}22%{box-shadow:0 5px 18px rgba(20,4,3,.3),0 0 0 3px rgba(239,196,111,.1),inset 0 0 0 1px rgba(255,232,180,.12)}30%{box-shadow:0 5px 18px rgba(20,4,3,.3),0 0 0 6px rgba(239,196,111,.16),0 0 18px rgba(242,190,92,.25),inset 0 0 0 1px rgba(255,232,180,.18)}}
@keyframes soundIconAttention{0%,42%,100%{opacity:.72;transform:scale(1)}10%,30%{opacity:1;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.sound-wave,.sound[aria-pressed=false],.sound[aria-pressed=false] .sound-icon{animation:none}.sound,.sound-notice{transition-duration:.01ms!important}}
@media(min-width:700px){
  .sound{
    top:12px!important;
    right:max(12px,calc((100vw - min(100vw,56.2988vh))/2 + 12px))!important;
    width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;
  }
  .sound:before{inset:-4px}
  .sound-icon{width:22px;height:20px}
}

/* Screen 2 final composition — full-height calendar stack and a strong left title field. */
#second .calendar-pile{
  --final-pile-scale:1;
  --final-pile-x:13%;
  --final-pile-y:-5%;
  transform-origin:76% 48%!important;
}
#second.is-complete .calendar-pile,
#second.is-settled .calendar-pile{
  transform:scale(1)!important;
  translate:var(--final-pile-x) var(--final-pile-y)!important;
  scale:1!important;
  transition:translate .9s cubic-bezier(.2,.72,.22,1)!important;
}
#second.is-complete .archive-timeline,
#second.is-settled .archive-timeline{
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .35s ease!important;
}
#second.is-complete .title-years,
#second.is-settled .title-years{
  left:6.5%!important;
  top:7%!important;
  opacity:.9!important;
  translate:0!important;
  scale:1!important;
}
#second .title-heading{
  left:6.5%!important;
  right:auto!important;
  top:17%!important;
  width:46%!important;
  height:52%!important;
}
#second .title-heading>p:first-child{
  position:static!important;
  margin:0 0 18px!important;
  font-size:12px!important;
  line-height:1.45!important;
  letter-spacing:.2em!important;
}
#second .title-heading h1{
  position:static!important;
  width:100%!important;
  margin:0!important;
  font-size:43px!important;
  line-height:1!important;
  white-space:normal!important;
  letter-spacing:.05em!important;
}
#second .title-heading h1>span{
  display:block!important;
  margin:9px 0 0 -4px!important;
  font-size:112px!important;
  line-height:.82!important;
  letter-spacing:-.08em!important;
}
#second .title-heading h1 .title-unit{
  display:inline-block!important;
  margin-left:7px!important;
  font-size:35px!important;
  letter-spacing:.03em!important;
  vertical-align:.23em!important;
}
#second .title-subtitle{
  position:static!important;
  width:100%!important;
  margin:24px 0 0!important;
  font:500 14px/1.85 "Microsoft YaHei","PingFang SC",sans-serif!important;
  letter-spacing:.055em!important;
  white-space:normal!important;
  color:#f1d8ae!important;
}

/* Clear archive-reading entry, designed as a secondary editorial action. */
#second .view-all-calendars{
  left:6.5%!important;
  bottom:13%!important;
  width:41%!important;
  min-height:48px!important;
  padding:0 15px!important;
  border:1px solid rgba(233,198,137,.72)!important;
  border-radius:2px!important;
  background:rgba(69,17,13,.62)!important;
  color:#f2d6a4!important;
  box-shadow:0 10px 24px rgba(45,7,5,.22),inset 0 1px rgba(255,236,195,.12)!important;
  font:600 14px/1 "Microsoft YaHei","PingFang SC",sans-serif!important;
  letter-spacing:.14em!important;
  text-align:left!important;
  transform:translateY(8px)!important;
}
#second .view-all-calendars span{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0!important;
  border:0!important;
  color:inherit!important;
  font:inherit!important;
}
#second .view-all-calendars span:after{content:"→";font:18px/1 Georgia,serif;letter-spacing:0}
#second.is-complete .view-all-calendars,
#second.is-settled .view-all-calendars{transform:translateY(0)!important}

/* Shared compact calendar viewer — sized to the H5 canvas, not the desktop viewport. */
#coverViewer{
  box-sizing:border-box!important;
  width:min(88cqw,390px)!important;
  max-width:min(88cqw,390px)!important;
  max-height:88dvh!important;
  margin:auto!important;
  padding:18px!important;
  overflow:auto!important;
  border:1px solid rgba(111,67,42,.5)!important;
  border-radius:3px!important;
  background:#ead8b5!important;
  color:#3f2a20!important;
  box-shadow:0 22px 60px rgba(22,7,4,.55)!important;
}
#coverViewer::backdrop{background:rgba(24,8,5,.7)!important;backdrop-filter:blur(4px)!important}
#coverViewer .viewer-kicker{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:0 34px 8px 0!important;
  padding:0 0 9px!important;
  border-bottom:1px solid rgba(103,62,39,.2)!important;
  color:#8c4c38!important;
  font:500 10px/1.4 "Microsoft YaHei","PingFang SC",sans-serif!important;
  letter-spacing:.13em!important;
}
#coverViewer h2{
  margin:8px 0 13px!important;
  padding:0!important;
  border:0!important;
  color:#4b2d22!important;
  font:400 25px/1.25 KaiTi,STKaiti,serif!important;
  text-align:left!important;
}
#coverViewer .viewer-close{
  top:9px!important;
  right:9px!important;
  width:30px!important;
  height:30px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#633d2e!important;
  font:24px/1 Arial,sans-serif!important;
}
#coverViewer .viewer-deck{
  width:100%!important;
  margin:0 auto 12px!important;
  padding:10px!important;
  border:1px solid rgba(100,60,38,.22)!important;
  background:#d9c39a!important;
}
#coverViewer .viewer-deck:before,
#coverViewer .viewer-deck:after{display:none!important}
#coverViewer #coverPhoto{
  display:block!important;
  width:100%!important;
  max-height:50dvh!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
}
#coverViewer .viewer-hint{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 0 12px!important;
  padding:0!important;
  color:#75503d!important;
  font:11px/1.45 "Microsoft YaHei","PingFang SC",sans-serif!important;
}
#coverViewer .viewer-hint button{
  min-height:36px!important;
  padding:0 10px!important;
  border:1px solid rgba(112,65,42,.35)!important;
  border-radius:2px!important;
  background:transparent!important;
  color:#71392d!important;
  font:11px "Microsoft YaHei","PingFang SC",sans-serif!important;
}
#coverViewer .viewer-years{display:none!important;margin:0 0 12px!important}
#coverViewer.years-expanded .viewer-years{display:flex!important}
#coverViewer .viewer-years button{
  min-width:50px!important;
  min-height:38px!important;
  border-radius:2px!important;
  background:#e2cda5!important;
  color:#684333!important;
}
#coverViewer .viewer-years button[aria-pressed=true]{background:#8d3b30!important;color:#fff1d0!important}
#coverViewer .viewer-controls{display:flex!important;justify-content:space-between!important;gap:12px!important;margin:0!important}
#coverViewer .viewer-controls button{
  width:46%!important;
  min-height:42px!important;
  border:1px solid rgba(112,65,42,.38)!important;
  border-radius:2px!important;
  background:#f0dfbd!important;
  color:#74362b!important;
  font-size:18px!important;
}

@media(max-height:700px){
  #second .title-heading h1{font-size:38px!important}
  #second .title-heading h1>span{font-size:96px!important}
  #second .title-subtitle{margin-top:18px!important;font-size:13px!important}
  #second .view-all-calendars{bottom:11%!important}
  #coverViewer #coverPhoto{max-height:43dvh!important}
}

/* The “view all” action exposes the full 40-year strip inside the existing reader. */
#coverViewer.years-expanded .viewer-years{display:flex!important;margin:12px 0 10px;padding:2px 0 8px}
#coverViewer.years-expanded .viewer-deck{width:72%;margin-bottom:10px}
#coverViewer.years-expanded #coverPhoto{max-height:38vh}

/* The second screen uses an even archive field without a theatrical top spotlight. */
.title-screen .archive-lightbeam,.title-screen .golden-spotlight,.title-screen .archive-atmosphere:before,.title-screen .archive-atmosphere:after{display:none!important;animation:none!important}

/* Clean second-screen resolve. This final block deliberately replaces all earlier experiments. */
#second .calendar-pile{--final-pile-scale:.58;--final-pile-x:-7%;--final-pile-y:6%;display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:scale(1)!important;translate:0 0!important;scale:1!important;transform-origin:76% 70%!important;filter:none!important;animation:none!important;transition:scale 2.4s cubic-bezier(.2,.68,.2,1),translate 2.4s cubic-bezier(.2,.68,.2,1)!important}
#second.is-complete .calendar-pile,#second.is-settled .calendar-pile{transform:scale(1)!important;translate:var(--final-pile-x) var(--final-pile-y)!important;scale:var(--final-pile-scale)!important}
#second .archive-timeline{left:10%!important;top:41%!important;width:23%!important;height:39%!important;opacity:1!important;visibility:visible!important;translate:0 0!important;scale:1!important;transform:none!important;transform-origin:left bottom!important;animation:none!important;transition:scale 2.4s cubic-bezier(.2,.68,.2,1),translate 2.4s cubic-bezier(.2,.68,.2,1),opacity .7s ease!important}
#second.is-complete .archive-timeline,#second.is-settled .archive-timeline{opacity:.72!important;translate:0 4vh!important;scale:.92!important}
#second .title-years{left:8%!important;top:5.2%!important;opacity:.78!important;translate:0 0!important;scale:.78!important;transform:none!important;transform-origin:left top!important;animation:none!important}
#second .title-years,#second .title-years span{font-family:"Microsoft YaHei","Noto Sans CJK SC",sans-serif!important;font-weight:400!important;font-style:normal!important;font-variant-numeric:lining-nums tabular-nums;line-height:1.5!important;letter-spacing:.12em!important}
#second .title-years{font-size:calc(2.85 * var(--h5-unit,3.9px))!important}
#second .title-years span{margin-top:calc(.8 * var(--h5-unit,3.9px))!important;font-size:calc(2.35 * var(--h5-unit,3.9px))!important}
#second .year-reveal{transition:opacity .45s ease!important}
#second.is-complete .year-reveal,#second.is-settled .year-reveal{opacity:0!important;visibility:hidden!important}
#second .title-heading{left:0!important;right:0!important;top:11.5%!important;height:32%;box-sizing:border-box;padding:0;opacity:0!important;transform:translateY(-10px)!important;animation:none!important;text-align:left!important;transition:opacity .72s ease 1.8s,transform .9s cubic-bezier(.2,.75,.25,1) 1.8s!important}
#second.is-complete .title-heading,#second.is-settled .title-heading{opacity:1!important;transform:translateY(0)!important}
#second .title-heading>p:first-child{position:absolute;left:7%;top:0;margin:0;font-size:calc(2.35 * var(--h5-unit,3.9px));letter-spacing:.25em;text-align:left}
#second .title-heading h1{position:absolute;left:7%;top:20%;width:40%;margin:0;font-size:calc(8.2 * var(--h5-unit,3.9px))!important;line-height:1.05;text-align:left;white-space:nowrap;outline:none!important;filter:drop-shadow(0 5px 14px rgba(22,4,2,.28))}
#second .title-heading h1>span{display:block!important;margin:calc(.5 * var(--h5-unit,3.9px)) 0 0!important;font-size:calc(22 * var(--h5-unit,3.9px))!important;line-height:.92;letter-spacing:-.05em}
#second .title-heading h1 .title-unit{display:inline-block!important;margin-left:calc(1.2 * var(--h5-unit,3.9px))!important;font-size:calc(8 * var(--h5-unit,3.9px))!important;letter-spacing:.04em;vertical-align:.22em}
#second .title-subtitle{position:absolute;left:53%;right:4%;top:30%;max-width:none;margin:0;text-align:left;white-space:nowrap;font-size:calc(3.25 * var(--h5-unit,3.9px));font-weight:400;line-height:1.9;letter-spacing:.1em;color:#efd3a5;text-shadow:0 3px 12px rgba(45,10,6,.3)}
#second .title-deck,#second.is-deck-ready .title-deck{display:none!important}
#second.is-complete .title-actions,#second.is-settled .title-actions,#second.is-complete .stack-progress,#second.is-settled .stack-progress{display:none!important}
#second .view-all-calendars{position:absolute;z-index:18;left:66%;bottom:5%;min-height:44px;padding:12px 4px;border:0;background:transparent;color:rgba(31,13,10,.84);font:700 calc(2.15 * var(--h5-unit,3.9px))/1.2 KaiTi,STKaiti,serif;letter-spacing:.12em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px);transition:opacity .5s ease 2.05s,transform .6s ease 2.05s,visibility 0s 2.05s}
#second .view-all-calendars span{display:block;padding:0 7px 4px;border-bottom:1px solid rgba(43,18,14,.26)}
#second.is-complete .view-all-calendars,#second.is-settled .view-all-calendars{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
#second .archive-lightbeam,#second .golden-spotlight,#second .archive-atmosphere:before,#second .archive-atmosphere:after{display:none!important;animation:none!important}
@media (max-aspect-ratio:3/5){#second .calendar-pile{--final-pile-scale:.58;--final-pile-x:-7%;--final-pile-y:6%}#second .view-all-calendars{left:65%;bottom:4.5%}}
@media (prefers-reduced-motion:reduce){#second .calendar-pile,#second .archive-timeline,#second .title-heading,#second .view-all-calendars{transition-duration:.01ms!important;transition-delay:0s!important}}

/* Final screen-2 lockup: keep the completed stack full size and reserve the left half for type. */
#second .calendar-pile{--final-pile-scale:1!important;--final-pile-x:0%!important;--final-pile-y:-5%!important;transform-origin:76% 48%!important}
#second.is-complete .calendar-pile,#second.is-settled .calendar-pile{translate:var(--final-pile-x) var(--final-pile-y)!important;scale:1!important;transition:translate .9s cubic-bezier(.2,.72,.22,1)!important}
#second.is-complete .archive-timeline,#second.is-settled .archive-timeline{opacity:0!important;visibility:hidden!important;translate:0!important;scale:1!important}
#second.is-complete .title-years,#second.is-settled .title-years{left:6.5%!important;top:7%!important;opacity:.9!important;translate:0!important;scale:1!important}

/* All upper-left theme labels share one formal, bold weight. */
.opening .opening-kicker,
#second .title-years,
#second .title-years span{
  font-weight:700!important;
}
#second .title-heading{left:6.5%!important;right:auto!important;top:17%!important;width:46%!important;height:52%!important;padding:0!important}
#second .title-heading>p:first-child{position:static!important;left:auto!important;top:auto!important;margin:0 0 17px!important;font-size:15px!important;font-weight:500!important;line-height:1.5!important;letter-spacing:.12em!important}
#second .title-heading h1{position:static!important;left:auto!important;top:auto!important;width:100%!important;margin:0!important;font-size:43px!important;line-height:1!important;white-space:normal!important;letter-spacing:.05em!important}
#second .title-heading h1>span{display:block!important;margin:9px 0 0 -4px!important;font-size:112px!important;line-height:.82!important;letter-spacing:-.08em!important}
#second .title-heading h1 .title-unit{display:inline-block!important;margin-left:7px!important;font-size:35px!important;letter-spacing:.03em!important;vertical-align:.23em!important}
#second .title-subtitle{position:static!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;margin:23px 0 0!important;font:500 16px/1.8 "Microsoft YaHei","PingFang SC",sans-serif!important;letter-spacing:.04em!important;white-space:normal!important;color:#f1d8ae!important}
#second .view-all-calendars{left:6.5%!important;bottom:13.5%!important;width:auto!important;min-width:118px!important;min-height:38px!important;padding:0 16px!important;border:1px solid rgba(211,145,73,.86)!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(91,16,11,.96),rgba(61,8,7,.96))!important;color:#f1c369!important;box-shadow:0 7px 16px rgba(38,4,3,.26),inset 0 1px rgba(255,222,157,.12)!important;font:600 11px/1 "Microsoft YaHei","PingFang SC",sans-serif!important;letter-spacing:.08em!important;text-align:left!important;transform:translateY(8px)!important}
#second .view-all-calendars:before{content:"";position:absolute;inset:-3px;border:1px solid rgba(145,55,30,.22);border-radius:999px;pointer-events:none}
#second .view-all-calendars span{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;padding:0!important;border:0!important;color:inherit!important;font:inherit!important}
#second .view-all-calendars span:after{content:"↓";font:12px/1 Georgia,serif;letter-spacing:0}
#second.is-complete .view-all-calendars,#second.is-settled .view-all-calendars{transform:translateY(0)!important}
@media(max-height:700px){#second .title-heading>p:first-child{font-size:14px!important}#second .title-heading h1{font-size:38px!important}#second .title-heading h1>span{font-size:96px!important}#second .title-subtitle{margin-top:18px!important;font-size:14px!important}#second .view-all-calendars{bottom:11%!important}}

/* Screen-2 spacing refinement: typography stays fully inside the left column. */
#second .calendar-pile{--final-pile-y:2%!important}
#second .title-heading{width:36%!important;height:61%!important}
#second .title-heading>p:first-child{
  width:100%!important;
  margin-bottom:19px!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1.65!important;
  letter-spacing:.06em!important;
  white-space:normal!important;
}
#second .title-heading h1{font-size:40px!important;line-height:1.05!important}
#second .title-heading h1>span{margin-top:11px!important;font-size:94px!important;line-height:.86!important}
#second .title-heading h1 .title-unit{margin-left:4px!important;font-size:29px!important}
#second .title-subtitle{
  width:100%!important;
  margin-top:25px!important;
  font-size:17px!important;
  font-weight:700!important;
  line-height:1.85!important;
  letter-spacing:.025em!important;
  overflow-wrap:anywhere!important;
}
@media(max-height:700px){
  #second .title-heading{width:36%!important}
  #second .title-heading>p:first-child{font-size:16px!important;line-height:1.55!important}
  #second .title-heading h1{font-size:36px!important}
  #second .title-heading h1>span{font-size:84px!important}
  #second .title-subtitle{margin-top:17px!important;font-size:15px!important;line-height:1.72!important}
}

/* Deliberate short line lengths keep the left copy formal and prevent orphan characters. */
#second .title-heading>p:first-child{width:6.2em!important}
#second .title-subtitle{width:6.2em!important}

/* Screen-2 final balance: a taller, lower stack and a compact retained chronology. */
#second .calendar-pile{--final-pile-scale:1.07!important;--final-pile-y:6%!important}
#second.is-complete .calendar-pile,#second.is-settled .calendar-pile{scale:var(--final-pile-scale)!important}
#second.is-complete .archive-timeline,#second.is-settled .archive-timeline{
  left:70%!important;top:78%!important;width:22%!important;height:15%!important;
  opacity:.56!important;visibility:visible!important;translate:0!important;scale:.78!important;
  transform-origin:left top!important;
}
#second .archive-timeline>span{left:14px!important;font-size:9px!important;letter-spacing:.06em!important}
#second .archive-timeline>span:before{left:-14px!important;width:7px!important}
#second.is-complete .archive-timeline>span,#second.is-settled .archive-timeline>span{
  left:-46px!important;width:38px!important;text-align:right!important;color:#f0d09a!important;
  text-shadow:0 1px 5px rgba(45,12,7,.72)!important;
}
#second.is-complete .archive-timeline>span:before,#second.is-settled .archive-timeline>span:before{left:42px!important;width:7px!important}
#second.is-complete .timeline-rule,#second.is-settled .timeline-rule{background:rgba(240,208,154,.42)!important}

/* Quiet archive viewer: one surface, restrained color and a single type system. */
#coverViewer{
  width:min(84cqw,372px)!important;max-width:min(84cqw,372px)!important;max-height:86dvh!important;
  padding:20px 20px 18px!important;border:1px solid rgba(104,76,58,.16)!important;border-radius:18px!important;
  background:#f3ead9!important;color:#49372e!important;box-shadow:0 24px 70px rgba(31,12,7,.4)!important;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif!important;
}
#coverViewer::backdrop{background:rgba(30,12,8,.58)!important;backdrop-filter:blur(8px)!important}
#coverViewer .viewer-kicker{
  margin:0 34px 6px 0!important;padding:0!important;border:0!important;color:#866f60!important;
  font:500 12px/1.5 "Microsoft YaHei","PingFang SC",sans-serif!important;letter-spacing:.04em!important;
}
#coverViewer #viewerCount{font:500 12px/1.5 "Microsoft YaHei","PingFang SC",sans-serif!important;letter-spacing:.02em!important}
#coverViewer h2{margin:4px 0 14px!important;color:#49372e!important;font:700 22px/1.4 "Microsoft YaHei","PingFang SC",sans-serif!important}
#coverViewer .viewer-close{
  top:10px!important;right:10px!important;width:34px!important;height:34px!important;border-radius:50%!important;
  background:rgba(73,55,46,.07)!important;color:#5b463a!important;font:400 21px/1 "Microsoft YaHei","PingFang SC",sans-serif!important;
}
#coverViewer .viewer-deck{width:100%!important;margin:0 auto 14px!important;padding:0!important;border:0!important;border-radius:10px!important;background:transparent!important;overflow:hidden!important}
#coverViewer #coverPhoto{max-height:48dvh!important;border-radius:10px!important;box-shadow:0 10px 28px rgba(60,38,25,.16)!important}
#coverViewer .viewer-hint{margin:0 0 14px!important;color:#725f53!important;font:500 12px/1.5 "Microsoft YaHei","PingFang SC",sans-serif!important}
#coverViewer .viewer-hint button{
  min-height:34px!important;padding:0 13px!important;border:0!important;border-radius:999px!important;
  background:rgba(111,79,60,.09)!important;color:#604a3d!important;font:600 12px/1 "Microsoft YaHei","PingFang SC",sans-serif!important;
}
#coverViewer .viewer-years{gap:6px!important;padding:4px 0 8px!important}
#coverViewer .viewer-years button{
  min-width:52px!important;min-height:34px!important;padding:0 10px!important;border:0!important;border-radius:999px!important;
  background:rgba(111,79,60,.08)!important;color:#604a3d!important;font:500 12px/1 "Microsoft YaHei","PingFang SC",sans-serif!important;
}
#coverViewer .viewer-years button[aria-pressed=true]{background:#7b352d!important;color:#fff7e8!important}
#coverViewer .viewer-controls{justify-content:center!important;gap:12px!important}
#coverViewer .viewer-controls button{
  width:48px!important;min-height:38px!important;border:0!important;border-radius:999px!important;
  background:#7b352d!important;color:#fff7e8!important;font:500 18px/1 "Microsoft YaHei","PingFang SC",sans-serif!important;
}

/* Keep the chronology as a compact bridge between the subtitle and the archive button. */
#second.is-complete .archive-timeline,#second.is-settled .archive-timeline{
  left:9%!important;
  top:57%!important;
  width:24%!important;
  height:25%!important;
  opacity:.68!important;
  scale:.95!important;
}
#second.is-complete .archive-timeline>span,#second.is-settled .archive-timeline>span{
  left:13px!important;
  width:auto!important;
  text-align:left!important;
  color:#dfbd85!important;
  text-shadow:0 1px 5px rgba(45,12,7,.5)!important;
}
#second.is-complete .archive-timeline>span:before,#second.is-settled .archive-timeline>span:before{
  left:-13px!important;
  width:7px!important;
}

/* The viewer is sequential: swipe or use arrows, without a separate year picker. */
#coverViewer #expandYears,
#coverViewer .viewer-years,
#coverViewer .viewer-controls label{display:none!important}
#coverViewer .viewer-hint{justify-content:flex-start!important;margin-bottom:14px!important}

/* Hold the completed pile for one quiet beat, then reveal the headline. */
#second .title-heading{
  transition:opacity .8s ease .48s,transform .9s cubic-bezier(.2,.75,.25,1) .48s!important;
}

/* Clear the subtitle while preserving a useful chronology above the action. */
#second.is-complete .archive-timeline,#second.is-settled .archive-timeline{
  top:60%!important;
  height:22%!important;
  scale:.95!important;
}

/* Reveal the archive action in the same beat as the completed headline. */
#second .view-all-calendars{
  transition:opacity .8s ease .48s,transform .9s cubic-bezier(.2,.75,.25,1) .48s,visibility 0s .48s!important;
}
#second.is-complete .view-all-calendars,#second.is-settled .view-all-calendars{
  transition-delay:.48s,.48s,.48s!important;
}

/* Raise the completed calendar so its top aligns with the upper-left archive heading. */
#second .calendar-pile{--final-pile-y:0%!important}

/* Narrow-phone lockup for screen 2. Keep copy in a real left column instead of fixed desktop pixels. */
@media (max-width:520px){
  #second .calendar-pile{--final-pile-scale:1!important;--final-pile-x:3%!important;--final-pile-y:1%!important;transform-origin:78% 50%!important}
  #second.is-complete .title-years,#second.is-settled .title-years{left:6.5%!important;top:6.5%!important;font-size:3.4cqw!important}
  #second.is-complete .title-years span,#second.is-settled .title-years span{font-size:2.7cqw!important}
  #second .title-heading{left:6.5%!important;top:17%!important;width:35%!important;height:48%!important}
  #second .title-heading>p:first-child{width:100%!important;margin-bottom:4cqw!important;font-size:3.05cqw!important;line-height:1.45!important;letter-spacing:.015em!important;white-space:nowrap!important}
  #second .title-heading h1{width:100%!important;font-size:7.8cqw!important;line-height:1.08!important;letter-spacing:.015em!important;white-space:nowrap!important}
  #second .title-heading h1>span{margin:2.2cqw 0 0 -1cqw!important;font-size:21cqw!important;line-height:.86!important}
  #second .title-heading h1 .title-unit{margin-left:1cqw!important;font-size:6.4cqw!important}
  #second .title-subtitle{width:100%!important;margin-top:5.2cqw!important;font-size:2.9cqw!important;line-height:1.72!important;letter-spacing:0!important;overflow-wrap:normal!important;word-break:keep-all!important;white-space:nowrap!important}
  #second.is-complete .archive-timeline,#second.is-settled .archive-timeline{left:8.5%!important;top:64%!important;width:21%!important;height:17%!important;scale:.9!important}
  #second .view-all-calendars{left:6.5%!important;bottom:9.8%!important;min-width:31cqw!important;min-height:11cqw!important;padding:0 4cqw!important;font-size:3.1cqw!important}
}

/* Screen 2 full-screen calendar wall concept — forty covers and title form one poster. */
.story-screen[hidden]{display:none!important}
#second{overflow:hidden!important;background:#4b100d!important;color:#f7dfaf!important}
#second .archive-atmosphere{z-index:0!important;background:radial-gradient(circle at 50% 42%,#9b3a27 0,#651b15 58%,#350907 100%)!important}
#second .calendar-wall{position:absolute;z-index:2;inset:-3.5%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(8,1fr);gap:0;overflow:hidden;transform:rotate(-1.4deg) scale(1.04);transform-origin:center;background:#6d2118}
#second .calendar-wall:after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,rgba(53,7,5,.25) 0,rgba(54,8,6,.5) 36%,rgba(38,5,4,.25) 63%,rgba(25,3,3,.68) 100%),linear-gradient(180deg,rgba(35,4,3,.52),transparent 19% 78%,rgba(33,4,3,.72));box-shadow:inset 0 0 70px rgba(24,3,2,.72)}
#second .calendar-wall img{position:relative;z-index:1;display:block;width:112%;height:112%;margin:-6%;object-fit:cover;object-position:center;border:1px solid rgba(229,190,122,.24);box-shadow:0 4px 12px rgba(29,4,3,.34);filter:sepia(.22) saturate(.78) contrast(1.05) brightness(.78);opacity:0;transform:translateY(112vh) scale(.78) rotate(var(--wall-tilt));transform-origin:center;will-change:transform,opacity}
#second.is-entered .calendar-wall img{animation:s2WallRise 1.35s var(--wall-delay) cubic-bezier(.18,.72,.2,1) forwards}
#second.is-settled .calendar-wall img,#second.is-returned .calendar-wall img{opacity:1;transform:translateY(0) scale(1.03) rotate(var(--wall-tilt));animation:none!important}
@keyframes s2WallRise{0%{opacity:0;transform:translateY(112vh) scale(.72) rotate(calc(var(--wall-tilt) - 5deg))}62%{opacity:.92;transform:translateY(-2.5%) scale(1.07) rotate(calc(var(--wall-tilt) + 1deg))}100%{opacity:1;transform:translateY(0) scale(1.03) rotate(var(--wall-tilt))}}

#second .calendar-pile,#second .stack-table,#second .archive-timeline,#second .year-reveal,#second .year-rail,#second .stack-progress,#second .title-deck{display:none!important}
#second .title-years{z-index:8!important;left:6%!important;top:5.2%!important;opacity:0!important;visibility:visible!important;translate:none!important;scale:1!important;transform:none!important;color:#f4d391!important;font:700 11px/1.4 "Microsoft YaHei",sans-serif!important;letter-spacing:.21em!important;text-shadow:0 2px 8px rgba(30,3,2,.7)!important}
#second .title-years span{display:block!important;margin-top:5px!important;color:#dfb76d!important;font-size:8px!important;letter-spacing:.18em!important}
#second.is-complete .title-years,#second.is-settled .title-years,#second.is-returned .title-years{opacity:1!important;transition:opacity .7s ease .15s!important}

#second .title-heading{z-index:9!important;left:5.5%!important;right:5.5%!important;top:27%!important;width:auto!important;height:auto!important;padding:28px 18px 25px!important;box-sizing:border-box!important;text-align:center!important;background:linear-gradient(135deg,rgba(86,15,11,.93),rgba(52,7,6,.78));border:1px solid rgba(232,188,105,.58);box-shadow:0 18px 42px rgba(29,3,2,.58),inset 0 0 0 4px rgba(240,201,130,.08);backdrop-filter:blur(4px);clip-path:polygon(2% 0,100% 3%,98% 100%,0 97%);opacity:0!important;transform:translateY(20px) scale(.94)!important}
#second.is-complete .title-heading,#second.is-settled .title-heading,#second.is-returned .title-heading{opacity:1!important;transform:none!important;transition:opacity .8s ease .2s,transform 1s cubic-bezier(.2,.75,.2,1) .2s!important}
#second .title-heading>p:first-child{position:static!important;width:auto!important;margin:0 0 13px!important;color:#e8bd70!important;font:600 10px/1.3 "Microsoft YaHei",sans-serif!important;letter-spacing:.22em!important;white-space:nowrap!important}
#second .title-heading h1{position:static!important;width:auto!important;margin:0!important;color:#fff0c5!important;font:400 43px/.9 KaiTi,STKaiti,serif!important;letter-spacing:.04em!important;white-space:nowrap!important;text-align:center!important;filter:drop-shadow(0 5px 14px rgba(24,3,2,.48))!important}
#second .title-heading h1>span{display:inline-block!important;margin:0 0 0 7px!important;color:#f5c86f!important;font:700 82px/.82 Georgia,"Times New Roman",serif!important;letter-spacing:-.07em!important;vertical-align:-.08em!important}
#second .title-heading h1 .title-unit{display:inline-block!important;margin-left:7px!important;color:#f1d18c!important;font:500 28px/1 KaiTi,STKaiti,serif!important;letter-spacing:.03em!important;vertical-align:.19em!important}
#second .title-subtitle{position:static!important;width:auto!important;margin:20px 0 0!important;color:#f4ddb2!important;font:500 14px/1.75 "Microsoft YaHei","PingFang SC",sans-serif!important;letter-spacing:.08em!important;text-align:center!important;white-space:normal!important;text-shadow:0 2px 8px rgba(25,3,2,.62)!important}

#second .view-all-calendars{z-index:12!important;left:50%!important;bottom:8.8%!important;min-width:136px!important;min-height:42px!important;padding:0 18px!important;border:1px solid rgba(237,191,102,.76)!important;border-radius:22px!important;background:rgba(62,8,6,.88)!important;color:#f4cc7b!important;box-shadow:0 8px 22px rgba(27,3,2,.48)!important;font-size:12px!important;transform:translate(-50%,10px)!important}
#second.is-complete .view-all-calendars,#second.is-settled .view-all-calendars,#second.is-returned .view-all-calendars{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important}
#second .view-all-calendars span:after{content:"›"!important;font-size:17px!important}
#second #backOpening,#second .screen-number{z-index:12!important;color:#dfb76f!important}
@media(max-height:700px){
  #second .title-heading{top:24%!important;padding:22px 15px 20px!important}
  #second .title-heading h1{font-size:38px!important}#second .title-heading h1>span{font-size:72px!important}#second .title-heading h1 .title-unit{font-size:25px!important}
  #second .title-subtitle{margin-top:15px!important;font-size:12px!important;line-height:1.62!important}
  #second .view-all-calendars{bottom:8%!important}
}
/* Mobile action spacing: lift the archive entry away from the page-turn cue. */
#second .view-all-calendars{bottom:11.3%!important}
@media(max-height:700px){#second .view-all-calendars{bottom:10.5%!important}}

/* Screen 2 follow-up: place the archive button directly beneath the gold divider. */
#second .view-all-calendars{
  top:57.5%!important;bottom:auto!important;
}
@media(max-width:360px){
  #second .view-all-calendars{top:58%!important}
}
@media(max-height:700px){
  #second .view-all-calendars{top:61%!important;bottom:auto!important}
}

/* Screen 2 senior-readable typography: +30% with a rebalanced mobile title group. */
#second .title-years{
  top:4.8%!important;left:7%!important;
  font-size:15px!important;line-height:1.45!important;letter-spacing:.1em!important;
}
#second .title-years span{
  margin-top:4px!important;font-size:13px!important;line-height:1.45!important;letter-spacing:.1em!important;
}
#second .title-heading{
  top:20.5%!important;padding:18px 4.5%!important;
}
#second .title-heading>p:first-child{
  margin-bottom:10px!important;font-size:20px!important;line-height:1.45!important;letter-spacing:.1em!important;
}
#second .title-heading h1{
  font-size:62px!important;line-height:1!important;letter-spacing:.035em!important;
}
#second .title-heading h1>span{
  margin-top:7px!important;font-size:117px!important;line-height:.84!important;
}
#second .title-heading h1 .title-unit{
  margin-left:7px!important;font-size:46px!important;vertical-align:.19em!important;
}
#second .title-subtitle{
  margin-top:16px!important;font-size:23px!important;line-height:1.62!important;
  letter-spacing:.08em!important;
}
#second .archive-timeline>span{
  font-size:12px!important;letter-spacing:.05em!important;
}

@media(max-width:360px){
  #second .title-heading{top:20%!important;padding-left:3.5%!important;padding-right:3.5%!important}
  #second .title-heading>p:first-child{font-size:18px!important}
  #second .title-heading h1{font-size:57px!important}
  #second .title-heading h1>span{font-size:108px!important}
  #second .title-heading h1 .title-unit{font-size:42px!important}
  #second .title-subtitle{font-size:21px!important;line-height:1.58!important}
}
@media(max-height:700px){
  #second .title-heading{top:18.5%!important;padding-top:14px!important;padding-bottom:14px!important}
  #second .title-heading>p:first-child{margin-bottom:7px!important;font-size:18px!important}
  #second .title-heading h1{font-size:55px!important}
  #second .title-heading h1>span{margin-top:5px!important;font-size:104px!important}
  #second .title-heading h1 .title-unit{font-size:40px!important}
  #second .title-subtitle{margin-top:12px!important;font-size:20px!important;line-height:1.5!important}
  #second .title-years{top:4%!important;font-size:14px!important}
  #second .title-years span{font-size:12px!important}
}

/* Second screen: open, centered title over the calendar wall. */
#second .title-heading{
  left:4%!important;right:4%!important;top:25.5%!important;
  padding:24px 10px!important;background:transparent!important;border:0!important;
  box-shadow:none!important;backdrop-filter:none!important;clip-path:none!important;
  text-align:center!important;
}
#second .title-heading>p:first-child{
  width:100%!important;margin:0 0 18px!important;text-align:center!important;
}
#second .title-heading h1{
  width:100%!important;text-align:center!important;
  text-shadow:0 3px 14px rgba(31,3,2,.9),0 0 34px rgba(49,8,4,.72)!important;
}
#second .title-subtitle{
  width:100%!important;margin:34px auto 0!important;font-size:17px!important;
  line-height:1.9!important;letter-spacing:.14em!important;text-align:center!important;
  text-shadow:0 2px 10px rgba(27,3,2,.96),0 0 24px rgba(44,5,3,.78)!important;
}
@media(max-height:700px){
  #second .title-heading{top:23%!important;padding:20px 8px!important}
  #second .title-heading>p:first-child{margin-bottom:14px!important}
  #second .title-subtitle{margin-top:25px!important;font-size:15px!important;line-height:1.8!important}
}

/* Second screen title timing and crisp full-width typography. */
#second .title-heading{
  left:0!important;right:0!important;width:100%!important;top:23.5%!important;
  padding:24px 4.5%!important;transform:translateY(10px)!important;
  opacity:0!important;animation:none!important;
  transition:opacity .72s ease .3s,transform .86s cubic-bezier(.2,.72,.2,1) .3s!important;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
}
#second.is-wall-complete .title-heading,
#second.is-returned .title-heading{
  opacity:1!important;transform:translateY(0)!important;
  transition:opacity .72s ease .3s,transform .86s cubic-bezier(.2,.72,.2,1) .3s!important;
}
#second .title-heading>p:first-child,
#second .title-heading h1,
#second .title-subtitle{
  background:none!important;background-image:none!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;filter:none!important;
}
#second .title-heading>p:first-child{color:#f0c978!important;text-shadow:0 1px 3px rgba(32,5,3,.82)!important}
#second .title-heading h1{
  color:#fff0c7!important;font-size:48px!important;letter-spacing:.06em!important;
  -webkit-text-fill-color:#fff0c7!important;animation:none!important;
  text-shadow:0 1px 3px rgba(32,5,3,.92)!important;
}
#second .title-heading h1>span{
  color:#f4c563!important;-webkit-text-fill-color:#f4c563!important;font-size:90px!important;animation:none!important;text-shadow:0 1px 3px rgba(32,5,3,.9)!important;
}
#second .title-heading h1 .title-unit{color:#f5d798!important;-webkit-text-fill-color:#f5d798!important;text-shadow:0 1px 3px rgba(32,5,3,.9)!important}
#second .title-subtitle{
  color:#fff0cf!important;font-weight:600!important;font-size:18px!important;
  -webkit-text-fill-color:#fff0cf!important;animation:none!important;
  letter-spacing:.16em!important;text-shadow:0 1px 3px rgba(32,5,3,.9)!important;
}
@media(max-height:700px){
  #second .title-heading{top:21.5%!important;padding-left:4%!important;padding-right:4%!important}
  #second .title-heading h1{font-size:43px!important}
  #second .title-heading h1>span{font-size:80px!important}
  #second .title-subtitle{font-size:16px!important}
}
/* Win over the earlier settled-state gold sweep, which softened and could hide the title. */
#second.title-screen.is-wall-complete #secondTitle,
#second.title-screen.is-returned #secondTitle{
  color:#fff0c7!important;-webkit-text-fill-color:#fff0c7!important;
  background:none!important;animation:none!important;
}
#second.title-screen #secondTitle>span{
  color:#f4c563!important;-webkit-text-fill-color:#f4c563!important;
  background:none!important;animation:none!important;
}
#second.title-screen #secondTitle .title-unit{
  color:#f5d798!important;-webkit-text-fill-color:#f5d798!important;
}
#second.title-screen #secondTitle>.archive-glyph{
  color:#fff0c7!important;-webkit-text-fill-color:#fff0c7!important;
  background:none!important;animation:none!important;
}
#second.title-screen #secondTitle>span>.archive-glyph{
  color:#f4c563!important;-webkit-text-fill-color:#f4c563!important;
  background:none!important;animation:none!important;
}
#second.title-screen #secondTitle .title-unit>.archive-glyph{
  color:#f5d798!important;-webkit-text-fill-color:#f5d798!important;
  background:none!important;animation:none!important;
}
#second.title-screen.is-wall-complete .title-subtitle,
#second.title-screen.is-returned .title-subtitle{
  color:#fff0cf!important;-webkit-text-fill-color:#fff0cf!important;
  background:none!important;animation:none!important;
}

/* Final mobile position lock for the screen-2 archive entry. */
#second .view-all-calendars{bottom:11.3%!important}
@media(max-height:700px){#second .view-all-calendars{bottom:10.5%!important}}

/* Requested mobile lock: button sits directly beneath the gold divider. */
#second .view-all-calendars{top:57.5%!important;bottom:auto!important}
@media(max-width:360px){#second .view-all-calendars{top:58%!important}}
@media(max-height:700px){#second .view-all-calendars{top:61%!important;bottom:auto!important}}