@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=ZCOOL+XiaoWei&display=swap');
.password-gate{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 72% 28%,rgba(168,71,50,.16),transparent 30%),#10272a;color:#eee9dc;display:grid;place-items:center;padding:24px;transition:opacity .45s ease,visibility .45s ease}.password-gate[hidden]{display:none}.password-gate.opening{opacity:0;visibility:hidden}.password-card{width:min(560px,100%);padding:52px 48px;border:1px solid rgba(238,233,220,.24);background:rgba(9,24,26,.72);box-shadow:0 30px 80px rgba(0,0,0,.25)}.gate-eyebrow{color:#c56a51;font:11px Arial,sans-serif;letter-spacing:.28em}.password-card h1{font-size:clamp(46px,7vw,76px);margin:18px 0 16px}.password-card>p:not(.gate-eyebrow):not(.password-error){color:#b6b3a8;line-height:1.8}.password-card label{display:block;margin:34px 0 10px;font-size:12px;letter-spacing:.16em}.password-row{display:flex}.password-row input{min-width:0;flex:1;border:1px solid rgba(238,233,220,.35);border-right:0;background:rgba(255,255,255,.06);color:#fff;padding:15px;font:20px Arial;letter-spacing:.2em;outline:none}.password-row input:focus{border-color:#c56a51}.password-row button{border:0;background:#a84732;color:#fff;padding:0 22px;font:13px inherit;cursor:pointer}.password-error{height:20px;margin:12px 0 0;color:#df8d76;font-size:12px}.locked{overflow:hidden}@media(max-width:560px){.password-card{padding:38px 25px}.password-row{display:grid}.password-row input{border-right:1px solid rgba(238,233,220,.35)}.password-row button{padding:15px}}
:root{--ink:#17353a;--paper:#eee9dc;--red:#a84732;--muted:#776f62;--dark:#12282b;--line:rgba(23,53,58,.2)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Serif SC",serif}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}.topbar{height:84px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:absolute;width:100%;z-index:10}.brand{text-decoration:none;color:inherit;display:flex;align-items:baseline;gap:10px}.brand span{font-weight:900;letter-spacing:.12em;font-size:22px}.brand small{font-size:11px;letter-spacing:.3em;color:var(--muted)}nav{display:flex;gap:38px}nav a{color:inherit;text-decoration:none;font-size:13px;letter-spacing:.12em}.sound{border:0;background:none;color:inherit;display:flex;align-items:center;gap:8px;font:12px inherit;cursor:pointer}.sound-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(168,71,50,.13)}
.hero{min-height:100vh;padding:140px 8vw 90px;display:grid;grid-template-columns:1fr .85fr;align-items:center;position:relative;overflow:hidden}.hero:before{content:"ARCHIVE";position:absolute;font:bold 17vw Arial;color:rgba(23,53,58,.035);left:-2vw;bottom:2vh;letter-spacing:-.05em}.hero-copy{z-index:1;max-width:650px}.eyebrow,.section-no{font:12px Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--red)}h1{font-size:clamp(58px,7vw,106px);line-height:1.08;margin:24px 0 32px;letter-spacing:-.06em;font-weight:900}.intro{max-width:540px;line-height:2;font-size:16px;color:#536163}.hero-actions{display:flex;align-items:center;gap:28px;margin:42px 0}.primary,.secondary{color:inherit;text-decoration:none}.primary{background:var(--ink);color:var(--paper);padding:16px 24px;font-size:14px}.primary span{margin-left:36px}.secondary{font-size:13px;border-bottom:1px solid;padding-bottom:5px}.archive-count{display:flex;align-items:baseline;gap:8px;color:var(--muted)}.archive-count strong{font-size:27px;color:var(--ink)}.archive-count span{font-size:11px}.archive-count i{height:25px;width:1px;background:var(--line);margin:0 14px}.hero-art{position:relative;height:620px;display:flex;align-items:center;justify-content:center}.book{width:min(76%,410px);max-height:560px;object-fit:cover;box-shadow:18px 25px 44px rgba(16,34,36,.24);transform:rotate(2.5deg);z-index:2;filter:saturate(.78) contrast(.96)}.book-shadow{position:absolute;width:360px;height:520px;background:#7b6b4d;transform:rotate(-5deg) translate(-25px,12px);opacity:.28}.date-stamp{position:absolute;right:0;top:30px;border:2px solid var(--red);color:var(--red);font:bold 11px Arial;padding:9px 13px;transform:rotate(8deg);text-align:center;line-height:1.4;letter-spacing:.12em}.hand-note{position:absolute;z-index:3;bottom:12px;right:0;color:var(--red);font-family:"ZCOOL XiaoWei",serif;font-size:16px;line-height:1.7;transform:rotate(-4deg)}.scroll{position:absolute;bottom:25px;left:50%;color:var(--muted);font:10px Arial;text-decoration:none;letter-spacing:.2em}.scroll span{margin-left:10px}
.prologue{padding:150px 16vw;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.prologue blockquote{font-size:clamp(26px,3vw,46px);line-height:1.6;margin:35px auto;max-width:950px}.prologue>p:last-child{color:var(--muted);font-size:14px;line-height:2}.diary-section{padding:130px 8vw}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:70px}.section-head h2,.missing h2{font-size:clamp(42px,5vw,72px);margin:14px 0 0;letter-spacing:-.05em}.section-head>p{font-size:12px;color:var(--muted);letter-spacing:.15em}.diary-reader{display:grid;grid-template-columns:60px minmax(280px,760px) 60px;gap:30px;justify-content:center;align-items:center}.page-stage{position:relative;background:#dcd5c5;padding:28px 28px 18px;box-shadow:0 20px 50px rgba(23,53,58,.15);cursor:zoom-in}.page-stage img{display:block;width:100%;height:65vh;min-height:520px;object-fit:contain;background:#e9e5dc}.page-caption{display:flex;justify-content:space-between;padding-top:14px;font-size:12px;letter-spacing:.12em}.page-caption em{font-style:normal;color:var(--muted)}.paperclip{position:absolute;width:16px;height:70px;border:3px solid #81847b;border-radius:10px;top:-18px;left:55px;z-index:2;transform:rotate(-7deg)}.page-arrow{border:1px solid var(--line);width:58px;height:58px;border-radius:50%;background:transparent;color:var(--ink);font-size:22px;cursor:pointer;transition:.2s}.page-arrow:hover{background:var(--ink);color:var(--paper)}.progress{max-width:910px;height:2px;background:var(--line);margin:45px auto 0}.progress span{display:block;height:100%;width:4.16%;background:var(--red);transition:.3s}
.photos-section{background:var(--dark);color:var(--paper);padding:130px 8vw}.return-section{background:#1b3537;padding-bottom:90px}.gathering-section{padding-top:70px}.section-head.light>p{color:#aba99d}.event-intro{display:grid;grid-template-columns:70px minmax(240px,580px);gap:25px;margin:-25px 0 55px;align-items:start}.event-intro span{font:52px/1 Arial;color:rgba(238,233,220,.2)}.event-intro p{margin:0;line-height:2;color:#b8b5a8;font-size:14px}.timeline-connector{height:110px;border-left:1px solid rgba(238,233,220,.2);margin:0 0 60px 35px;position:relative}.timeline-connector span{position:absolute;left:18px;top:42px;color:#918f85;font:10px Arial;letter-spacing:.25em;white-space:nowrap}.photo-grid,.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.photo-grid figure,.more-grid figure{margin:0;position:relative;overflow:hidden;background:#09191b}.photo-grid figure{height:360px}.photo-grid figure.wide{grid-column:span 2}.photo-grid img,.more-grid img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) sepia(.12);transition:.55s}.photo-grid figure:hover img,.more-grid figure:hover img{transform:scale(1.035);filter:saturate(.9)}figcaption{position:absolute;left:18px;bottom:15px;background:rgba(12,28,30,.78);padding:8px 11px;font-size:11px;letter-spacing:.08em}.view-more{display:flex;justify-content:space-between;width:100%;margin-top:32px;padding:20px 0;border:0;border-top:1px solid rgba(238,233,220,.25);background:none;color:inherit;font:14px inherit;cursor:pointer}.view-more span{color:#aaa99e}.more-grid{margin-top:25px;grid-template-columns:repeat(4,1fr)}.more-grid figure{height:230px}
.missing{padding:150px 12vw;display:grid;grid-template-columns:.7fr 1fr;gap:8vw;align-items:center;min-height:720px}.missing-mark{font:300 24vw/1 Arial;color:transparent;-webkit-text-stroke:1px rgba(23,53,58,.3);text-align:center}.missing .lead{font-size:22px;line-height:1.8;margin-top:34px}.missing div:last-child>p:not(.lead):not(.section-no){font-size:14px;line-height:2;color:var(--muted);max-width:650px}.outline{background:none;border:1px solid var(--ink);padding:15px 22px;margin-top:25px;color:inherit;font:13px inherit;cursor:pointer}footer{background:#0d1f21;color:#aaa99e;padding:34px 8vw;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em}.lightbox{position:fixed;inset:0;background:rgba(6,14,15,.94);z-index:30;display:flex;align-items:center;justify-content:center;padding:5vw}.lightbox[hidden]{display:none}.lightbox img{max-width:100%;max-height:90vh;object-fit:contain}.lightbox button{position:absolute;right:30px;top:22px;border:0;background:none;color:white;font-size:38px;cursor:pointer}
@media(max-width:850px){.topbar{height:70px}.topbar nav{display:none}.sound-text{display:none}.hero{grid-template-columns:1fr;padding:110px 7vw 80px}.hero-art{height:520px;margin-top:40px}.hero-copy h1{font-size:56px}.scroll{display:none}.prologue{padding:100px 8vw}.diary-section,.photos-section{padding:90px 5vw}.section-head{align-items:start;flex-direction:column;gap:15px;margin-bottom:45px}.diary-reader{grid-template-columns:42px 1fr 42px;gap:7px}.page-arrow{width:40px;height:40px}.page-stage{padding:15px 15px 12px}.page-stage img{height:58vh;min-height:380px}.photo-grid{grid-template-columns:1fr}.photo-grid figure,.photo-grid figure.wide{grid-column:auto;height:310px}.more-grid{grid-template-columns:1fr 1fr}.more-grid figure{height:180px}.missing{grid-template-columns:1fr;padding:100px 8vw}.missing-mark{font-size:50vw}footer{gap:20px;flex-direction:column}}

.page-stage{cursor:grab;touch-action:pan-y;user-select:none}.page-stage.dragging{cursor:grabbing}.page-stage.dragging img{pointer-events:none}.page-stage img{transition:transform .12s ease}.drag-hint{text-align:center;margin:32px 0 0;color:var(--muted);font-size:11px;letter-spacing:.16em}.second-return{padding-top:70px}.date-stamp,.hand-note,.progress{display:none}
.page-scrubber{max-width:910px;margin:38px auto 0;display:grid;grid-template-columns:28px 1fr 28px;gap:14px;align-items:center;color:var(--muted);font:10px Arial,sans-serif;letter-spacing:.12em}.page-scrubber label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.page-scrubber span:last-child{text-align:right}.page-scrubber input{--page-progress:2.13%;width:100%;height:28px;margin:0;appearance:none;background:transparent;cursor:pointer;touch-action:none}.page-scrubber input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--red) 0 var(--page-progress),rgba(23,53,58,.22) var(--page-progress) 100%)}.page-scrubber input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-7.5px;background:var(--paper);border:2px solid var(--red);box-shadow:0 2px 8px rgba(23,53,58,.2)}.page-scrubber input::-moz-range-track{height:3px;background:rgba(23,53,58,.22)}.page-scrubber input::-moz-range-progress{height:3px;background:var(--red)}.page-scrubber input::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--paper);border:2px solid var(--red)}.drag-hint{margin-top:8px}
.sound.playing .sound-dot{animation:musicPulse 1.4s ease-in-out infinite}.sound.playing .sound-text{color:var(--red)}@keyframes musicPulse{0%,100%{box-shadow:0 0 0 5px rgba(168,71,50,.13)}50%{box-shadow:0 0 0 9px rgba(168,71,50,.04)}}
.album-export{display:block;width:max-content;margin:12px 0 0 auto;color:#c8c4b7;text-decoration:none;border-bottom:1px solid rgba(238,233,220,.35);padding:5px 0;font-size:11px;letter-spacing:.1em}.diary-export{color:var(--ink);border-color:var(--line);margin:12px auto 0}.photo-download{position:absolute;right:30px;bottom:24px;color:#fff;text-decoration:none;background:rgba(168,71,50,.9);padding:12px 17px;font-size:12px;letter-spacing:.08em}.lightbox button{z-index:2}@media(max-width:850px){.photo-download{right:18px;bottom:18px}.album-export{font-size:10px}}
.graduation-section{padding:130px 8vw;background:#e4dfd2;border-top:1px solid var(--line)}.graduation-photo{position:relative;margin:0;background:#152b2e;padding:18px;box-shadow:0 24px 55px rgba(23,53,58,.2);cursor:zoom-in}.graduation-photo img{display:block;width:100%;max-height:82vh;object-fit:contain}.graduation-photo figcaption{left:38px;bottom:38px;color:var(--paper)}@media(max-width:850px){.graduation-section{padding:90px 5vw}.graduation-photo{padding:8px}.graduation-photo figcaption{left:20px;bottom:20px}}