:root{--paper:#f8f5ee;--ink:#514a40;--muted:#756b61;--rose:#a37c73;--line:#ded5c8;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}body{margin:0;background:#e9e4dc;color:var(--ink);font-family:var(--serif)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid var(--rose);outline-offset:6px}button:hover,a:hover{color:#855d55}.site-shell{max-width:1600px;margin:20px;min-height:calc(100svh - 40px);background:var(--paper);border:1px solid #ffffff90;box-shadow:0 8px 45px #4f402017;border-radius:6px;overflow:hidden}.header{height:82px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#f8f5eef2;position:relative;z-index:2}.brand{font-size:32px;font-style:italic;display:flex;align-items:center;gap:8px}.brand span{font-style:normal;font-size:19px;color:var(--rose)}nav{display:flex;gap:36px;align-items:center}nav a,nav button{font-size:12px;letter-spacing:1.6px;padding:10px 0;position:relative}nav .active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--rose)}.header-note{font-size:14px;font-style:italic;color:var(--muted)}.view{min-height:760px;text-align:center;padding:50px 24px 40px}.view[hidden]{display:none}.hero{background:linear-gradient(#f8f5ee1a,#f8f5ee14),url('assets/tabletop.png') center/cover}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:4px;color:var(--muted);margin:0 0 18px}h1{font-size:clamp(72px,9vw,122px);font-weight:400;font-style:italic;letter-spacing:-5px;color:var(--rose);line-height:1.06;margin:0 0 18px}.dedication{font-size:16px;line-height:1.8;margin:0;color:#645c51}.book-stage{display:flex;justify-content:center;align-items:center;gap:95px;margin:38px auto 26px;position:relative;isolation:isolate}.book{position:relative;display:block;flex:0 0 270px;height:350px;transform:rotate(-3deg);perspective:900px;transition:transform .4s;padding:0;filter:drop-shadow(10px 18px 11px #4a392135);color:#55483d}.book:hover{transform:rotate(-1deg) translateY(-5px);color:#55483d}.book-cover{position:absolute;inset:0 0 8px 0;border-radius:3px 6px 3px 2px;background:linear-gradient(90deg,#c8ab93 0,#d8bca3 3%,#e6cdb7 5%,#ceaf96 6%,#e2c6ae 8%,#e5cdb8 100%);box-shadow:inset 0 0 1px 1px #bea089;display:flex;align-items:center;flex-direction:column;padding:46px 20px 25px 32px;transform-origin:left;transition:transform .6s}.book-cover:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.23;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 1h4M1 0v4' stroke='%23857463' stroke-opacity='.5' stroke-width='.35'/%3E%3C/svg%3E")}.book-kicker{text-transform:uppercase;font-size:10px;letter-spacing:3px;margin-bottom:35px}.book-title{font-size:27px;font-style:italic;line-height:1.3}.book-subtitle{font-size:14px;font-style:italic;margin-top:5px}.book-heart{font-size:25px;margin-top:15px}.book-name{font-size:12px;text-transform:uppercase;letter-spacing:3px;margin-top:28px}.book-bottom{font-size:9px;letter-spacing:1.4px;margin-top:auto}.book-pages{position:absolute;inset:5px -4px 0 3px;background:repeating-linear-gradient(0deg,#eae2d3 0 1px,#f9f4e9 1px 3px);border-radius:3px;box-shadow:0 3px 0 #be9c84}.ribbon{position:absolute;left:37px;bottom:-23px;width:16px;height:40px;background:linear-gradient(90deg,#ae817a,#c99d92,#b98f87);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);z-index:-1}.side-note{font-style:italic;font-size:18px;line-height:1.6;color:#80766a;max-width:160px}.right-note{margin-top:100px}.open-hint{font-size:13px;font-style:italic;border-bottom:1px solid #b6a38e;padding:12px 4px;display:inline-flex;gap:14px;align-items:center}.open-hint span{font-size:20px}.hero-foot{margin:33px 0 0;font-size:11px;letter-spacing:1.3px;color:var(--muted)}footer{padding:24px 5%;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:10px;letter-spacing:1.2px;color:var(--muted)}footer>span:nth-child(2){font-size:17px;color:var(--rose)}h2{font-size:68px;font-weight:400;font-style:italic;color:var(--rose);margin:0 0 18px;line-height:1.12}.section-intro{font-size:16px;line-height:1.8;color:var(--muted);margin:0}.letter-view,.memories-view{background:radial-gradient(ellipse at center,#fffaf3 0,#f3eee6 100%);padding-top:65px}.envelope{display:block;position:relative;width:330px;height:220px;margin:100px auto 25px;background:#dfc8b7;box-shadow:0 18px 25px #6d52301a;transform:rotate(-3deg);transition:transform .3s;border-radius:3px}.envelope:hover{transform:rotate(0deg) translateY(-4px)}.envelope-paper{position:absolute;inset:-30px 15px 30px;background:#fffcf5;padding-top:35px;font-style:italic;font-size:30px;box-shadow:0 -2px 10px #6d523012;transform:rotate(1deg)}.envelope-paper span{display:block;margin-top:10px;font-size:13px;color:var(--muted)}.envelope-fold{position:absolute;inset:0;overflow:hidden;background:linear-gradient(35deg,#e9d8c9 50%,transparent 50%) left/51% 100% no-repeat,linear-gradient(-35deg,#ead9ca 50%,transparent 50%) right/51% 100% no-repeat}.envelope-fold:after{content:'';position:absolute;inset:0;background:#e6d2c1;clip-path:polygon(0 100%,50% 45%,100% 100%)}.seal{position:absolute;top:105px;left:calc(50% - 20px);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#b18c80;border:3px double #c9a79a;color:#f9eee2;font-size:20px;box-shadow:0 2px 3px #55412520}.text-link{font-style:italic;font-size:15px;padding:10px;border-bottom:1px solid #b7a28e}.text-link span{padding-left:20px}.pending-caption{font-size:13px;color:var(--muted);line-height:1.7;margin:26px auto 0}.memory-grid{max-width:1000px;margin:65px auto 35px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.memory-frame{background:#fffdf7;padding:12px 12px 20px;box-shadow:0 8px 20px #66533915;transform:rotate(-3deg);min-width:0}.memory-frame:nth-child(2){transform:rotate(2deg);margin-top:25px}.memory-frame:nth-child(3){transform:rotate(-1deg)}.memory-frame:hover{transform:rotate(0);transition:transform .3s}.memory-frame img{width:100%;height:230px;object-fit:cover;display:block}.memory-caption{font-size:14px;font-style:italic;display:block;padding-top:18px}.empty-photo{height:230px;background:#eee8de;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:#968c80;font-size:12px}.empty-photo svg{height:35px;width:35px;stroke:#a39787;stroke-width:1;fill:none}.empty-photo span{letter-spacing:2px;text-transform:uppercase;font-size:9px}dialog{padding:0;border:1px solid var(--line);color:var(--ink);background:#f8f4e9;border-radius:5px;width:min(1000px,calc(100vw - 48px));max-height:calc(100svh - 48px);box-shadow:0 25px 100px #30271c50}dialog::backdrop{background:#42382eb0;backdrop-filter:blur(5px)}dialog[open]{animation:appear .45s ease}.reader-toolbar{display:flex;justify-content:space-between;align-items:center;padding:17px 24px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:1px}.reader-toolbar button{font-size:12px;display:flex;align-items:center;gap:20px}.reader-toolbar button span{font-size:24px}.reading-book{display:grid;grid-template-columns:34% 1fr;min-height:530px}.reading-cover{padding:80px 24px;background:linear-gradient(90deg,#e6d1bd,#eddcc9 95%,#cabaa8);text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center}.reading-name{font-style:italic;font-size:49px;margin:15px 0 25px;color:#856b5a}.reading-cover>span{font-size:32px;color:#a27e6c;margin:20px}.reading-cover>p:last-child{font-style:italic;font-size:13px;line-height:1.8;color:#786b5e;margin-top:50px}.reading-page{padding:60px 60px 40px;background:linear-gradient(90deg,#ded3c4,#fffbf1 4%,#fffbf1);overflow-wrap:anywhere}.reading-page h2{font-size:43px;margin-bottom:35px;color:#876b5e}.reading-page .eyebrow{font-size:9px;letter-spacing:2.5px}.reading-text{white-space:pre-wrap;line-height:1.95;font-size:16px;margin:0}.reader-pending{margin:60px 0;color:var(--muted);line-height:1.9;font-style:italic}.reader-pending small{display:block;font-style:normal;font-size:11px;margin-top:15px;letter-spacing:.5px}.page-heart{display:block;text-align:center;margin-top:50px;font-size:22px;color:#b39483}.letter-image{display:block;max-width:100%;height:auto}.photo-dialog{width:min(1000px,calc(100vw - 40px));background:#fffaf3;padding:20px}.photo-dialog button{display:block;margin-left:auto;padding:5px 0 20px;font-size:13px}.photo-dialog img{width:100%;max-height:70svh;object-fit:contain}.photo-dialog p{text-align:center;font-style:italic;font-size:15px;margin-bottom:5px}@keyframes appear{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}@media(min-width:1640px){.site-shell{margin:25px auto}}@media(max-width:900px){.side-note{display:none}.header-note{display:none}.header{padding:0 6%}.book-stage{gap:0}.memory-grid{gap:18px}.memory-frame img,.empty-photo{height:180px}}@media(max-width:600px){.site-shell{margin:8px;min-height:calc(100svh - 16px)}.header{height:auto;min-height:88px;gap:12px;flex-wrap:wrap;padding:14px 20px}.brand{font-size:26px}nav{gap:15px}nav a,nav button{font-size:10px;letter-spacing:.4px}.view{padding:45px 18px 35px;min-height:700px}.eyebrow{font-size:9px;letter-spacing:3px}h1{font-size:80px;letter-spacing:-3px}.dedication{font-size:14px;max-width:260px;margin:auto}.hero{background-position:center}.book-stage{margin-top:35px}.book{flex-basis:235px;height:310px}.book-cover{padding:34px 15px 20px 26px}.book-kicker{margin-bottom:27px}.book-title{font-size:24px}.book-name{margin-top:22px}.open-hint{font-size:12px;gap:8px}.hero-foot{font-size:10px;letter-spacing:.3px}footer{font-size:8px;letter-spacing:.5px;padding:20px 16px}h2{font-size:55px}.section-intro{font-size:14px;max-width:280px;margin:auto}.envelope{width:265px;height:185px;margin-top:95px}.envelope-paper{font-size:25px}.seal{top:85px}.memory-grid{grid-template-columns:1fr;max-width:280px;margin-top:40px;gap:25px}.memory-frame:nth-child(2){margin-top:0}.memory-frame img,.empty-photo{height:210px}.memories-view{padding-bottom:45px}dialog{width:calc(100vw - 24px);max-height:calc(100svh - 24px)}.reader-toolbar{padding:12px 18px}.reading-book{grid-template-columns:1fr;min-height:0}.reading-cover{display:none}.reading-page{padding:35px 26px;min-height:450px}.reading-page h2{font-size:36px}.reading-text{font-size:15px}.reader-pending{margin:40px 0}.reader-toolbar>span{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.drawing-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1120px;gap:26px;margin:80px auto 45px}.drawing-frame{padding:12px 12px 25px}.drawing-placeholder{height:265px;background:linear-gradient(140deg,#eee8df,#f2ede5)}.drawing-frame:nth-child(4){transform:rotate(3deg);margin-top:18px}.drawing-frame .memory-caption{color:#8a7d70;font-size:13px}.drawing-placeholder svg{opacity:.7;width:30px;height:30px}.drawing-frame:hover{transform:rotate(0)}@media(max-width:1000px){.drawing-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:650px;gap:35px}.drawing-frame:nth-child(2){margin-top:15px}.drawing-frame:nth-child(4){margin-top:15px}}@media(max-width:600px){.drawing-grid{margin-top:50px;gap:25px;max-width:430px}.drawing-frame{padding:9px 9px 20px}.drawing-placeholder{height:210px}}@media(max-width:420px){.drawing-grid{grid-template-columns:1fr;max-width:250px;gap:30px}.drawing-frame:nth-child(2),.drawing-frame:nth-child(4){margin-top:0}.drawing-placeholder{height:265px}}

.drawing-frame img{height:265px;object-fit:contain;background:#f0eae1}.drawing-frame{align-self:start}.reading-cover{position:sticky;top:0;align-self:start;min-height:530px}@media(max-width:600px){.drawing-frame img{height:210px}}@media(max-width:420px){.drawing-frame img{height:265px}}

.memories-view .memory-frame img{object-fit:contain;background:#eee8de}.memories-view .memory-frame{align-self:start}
.music-widget{position:fixed;right:32px;bottom:28px;z-index:10;display:flex;align-items:center;gap:12px}.music-toggle{width:56px;height:56px;flex:0 0 56px;border-radius:50%;display:grid;place-items:center;background:#fbf6eaf5;border:1px solid #cbb6a4;box-shadow:0 4px 16px #52402c20;transition:transform .25s,box-shadow .25s;padding:6px!important;color:#805d52}.music-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 20px #52402c30}.music-record{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#aa8274 0 1px,#a47a6c 2px 3px);position:relative}.music-record:before{content:'';position:absolute;inset:6px;border:1px solid #d8b3a16b;border-radius:50%}.music-glyph{width:23px;height:23px;background:#f2e6d6;border-radius:50%;display:grid;place-items:center;font-size:14px!important;line-height:1;color:#806052;z-index:1}.music-toggle.is-playing .music-record:before{animation:record-turn 5s linear infinite;border-top-color:#fff4dc;border-right-color:transparent}.music-hint{font-size:12px;font-style:italic;padding:9px 13px;border:1px solid #d9c9b8;border-radius:22px;background:#fcf7eeed;color:#7a6658;box-shadow:0 3px 10px #52402c10}.music-hint[hidden]{display:none}.reader-actions,.photo-actions{display:flex;align-items:center;gap:20px}.reader-actions .music-toggle,.photo-actions .music-toggle{width:36px;height:36px;flex-basis:36px;padding:4px!important}.reader-actions .music-glyph,.photo-actions .music-glyph{width:17px;height:17px;font-size:11px!important}.photo-dialog .photo-actions{justify-content:flex-end;padding-bottom:15px}.photo-dialog .photo-actions button{margin:0;padding:0}.photo-actions #close-photo{padding:6px}.reader-toolbar .music-toggle{display:grid;gap:0}@keyframes record-turn{to{transform:rotate(360deg)}}@media(max-width:600px){.music-widget{right:22px;bottom:20px}.music-toggle{width:49px;height:49px;flex-basis:49px}.music-hint{font-size:11px}.reader-actions{gap:12px}}

.photo-dialog .photo-actions .music-toggle{display:grid}

.photos-view{background:radial-gradient(ellipse at center,#fffaf3 0,#f3eee6 100%);padding-top:65px}.hero .open-hint{margin-top:0;margin-bottom:0}

.photos-grid{row-gap:40px}.photo-frame{align-self:start}.photos-view .photo-frame img{height:320px;object-fit:contain;background:#eee8de}.photo-frame:nth-child(3n+2){transform:rotate(2deg)}.photo-frame:nth-child(3n){transform:rotate(-1deg)}.photo-frame:hover{transform:rotate(0)}@media(max-width:900px) and (min-width:601px){.photos-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:650px}}@media(max-width:600px){.photos-view .photo-frame img{height:320px}}

img,.memory-frame,#photo-viewer{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}img{-webkit-user-drag:none}.memory-frame img,#large-photo{pointer-events:none}