:root{color-scheme:light;--paper:#fbf7ef;--ink:#203f36;--muted:#4d6056;--line:#d5dace;--accent:#8b4d37;--sage:#dce6d9;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 90% 0%,#e6ecde,transparent 42rem),var(--paper);color:var(--ink);font:16px/1.55 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:0 clamp(16px,5vw,56px)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #a25436;outline-offset:3px}[hidden]{display:none!important}
.hero{display:grid;grid-template-columns:1fr .9fr;gap:clamp(36px,7vw,96px);align-items:center;padding:70px 0 72px}.eyebrow{font-size:.74rem;font-weight:750;letter-spacing:.17em;color:var(--accent);margin:0 0 12px}.eyebrow span{display:inline-block;width:23px;height:1px;background:currentColor;vertical-align:middle;margin-right:8px}h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.08}h1{font-size:clamp(3.65rem,8vw,7rem);letter-spacing:-.065em}h1 em{color:#486d57}.name{font-size:.76rem;letter-spacing:.16em;font-weight:700;margin:17px 0 24px}.invitation{border-left:2px solid #a96f50;padding-left:14px;max-width:375px}.invitation small,.times span{display:block;color:var(--muted)}.invitation strong{font:1.48rem var(--serif)}.invitation p{margin:3px 0}.date{font-size:1.12rem;font-weight:700;margin:20px 0 8px}.date b{margin:0 5px;color:var(--accent)}.times{display:flex;gap:23px}.times div+div{border-left:1px solid var(--line);padding-left:23px}.times strong{font-size:1.24rem}.times span{font-size:.88rem}.cta{display:inline-flex;gap:14px;margin-top:20px;padding:11px 16px;border-radius:100px;color:white;background:var(--ink);text-decoration:none;font-weight:650}.portrait{position:relative;margin:0;padding:11px 11px 9px;border:1px solid #d6d8c8;background:#fffdf5;transform:rotate(2deg);box-shadow:0 18px 60px #26382a21}.portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 49%}.portrait figcaption{font:italic 1.25rem var(--serif);text-align:center;padding:11px 0 3px}.star{position:absolute;top:-35px;right:16px;font-size:3rem;color:#94603f;text-shadow:0 1px #fff}
#album{border-top:1px solid var(--line);padding:56px 0;scroll-margin-top:18px}.section-head,.draft-note,.event{text-align:center}.section-head p:last-child,.draft-note{color:var(--muted)}h2{font-size:clamp(2.5rem,6vw,4.2rem);letter-spacing:-.04em}.album{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,5vw,70px);align-items:center;margin-top:28px}.dial{position:relative;width:min(100%,370px);aspect-ratio:1;margin:auto;border-radius:50%;border:1px solid #a7b8a5;background:radial-gradient(circle,#eef1e4,#dce6d9);box-shadow:inset 0 0 0 7px #eff2e7,0 12px 25px #203f3614}.ticks{position:absolute;inset:12%;border-radius:50%;border:1px dashed #8ba292}.dial-photo{position:absolute;inset:27%;width:46%;height:46%;object-fit:cover;object-position:center 47%;border-radius:50%;border:4px solid #fcfaf1}.dial button{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:1px solid #b6c6b4;border-radius:50%;background:#fbfaf2;font-weight:750;z-index:2}.dial button.pending{border-style:dashed;color:#4c6358}.dial button[aria-pressed=true],.origin button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.hand{position:absolute;inset:0;pointer-events:none;transform:rotate(var(--angle,30deg));transition:transform .5s cubic-bezier(.2,.65,.2,1)}.hand::before{content:"";position:absolute;top:17%;left:calc(50% - 2px);height:11%;width:4px;border-radius:5px;background:#a86746}.origin{display:flex;gap:8px;justify-content:center;margin-top:17px;flex-wrap:wrap}.origin button,.caption button{background:#fffdf5;border:1px solid #b3c3b3;border-radius:99px;min-height:44px;padding:5px 12px}.memory{border:1px solid var(--line);padding:10px;background:#fffdf6;box-shadow:0 15px 36px #203f3610}.photo{height:clamp(275px,40vw,400px);background:#e8ede2;display:grid;place-items:center;overflow:hidden;touch-action:pan-y}.photo img{width:100%;height:100%;object-fit:contain;min-height:0}.photo img.appear{animation:fade .3s ease-out}@keyframes fade{from{opacity:.25}to{opacity:1}}#empty{text-align:center;padding:10px}#empty span{font-size:2rem;color:var(--accent)}.caption{display:grid;grid-template-columns:44px 1fr 44px;gap:7px;text-align:center;align-items:center;min-height:85px}.caption button{font-size:1.7rem;line-height:1}.caption .eyebrow{margin:0 0 3px}.caption h3{font-size:clamp(1.22rem,3vw,1.62rem)}.draft-note{font-size:.85rem;margin:21px 0 0}.event{padding:42px 15px;margin:0 0 35px;border:1px solid #c4d1c0;background:#eaf0e4;border-radius:90px 90px 12px 12px}.event .times{justify-content:center}.place{margin:24px 0 4px}.venue{font-weight:650;margin:0}.closing{font:italic 1.15rem var(--serif);margin:24px 0 0}
@media(max-width:680px){.hero{grid-template-columns:1fr;padding:35px 0 45px;gap:30px}.portrait{width:min(74%,315px);margin:auto}.portrait img{aspect-ratio:1/1}.album{grid-template-columns:1fr}.dial{width:min(100%,350px)}.photo{height:clamp(270px,82vw,390px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Scrapbook edition */
:root{--paper:#fff8e6;--ink:#233559;--muted:#495775;--line:#dfd4bb;--accent:#a3362b}
body{background-color:var(--paper);background-image:radial-gradient(#d4ac652c 1px,transparent 1px);background-size:14px 14px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:1100px;margin:auto;padding:17px clamp(16px,5vw,56px);border-bottom:1px dashed #a39172}
.top a{color:var(--ink);font-weight:750;font-size:.88rem;text-decoration:none}.top .brand{font:700 1.26rem var(--serif);color:var(--accent)}
.hero{padding-top:53px}.cover-kicker{display:inline-block;border-radius:99px;background:#ffe59a;padding:7px 11px}
h1{font-weight:700;line-height:.97}h1 em{color:#ac392b}.name{letter-spacing:.13em}.invitation{border-left:4px solid #c24b37}.invitation strong{font-weight:700}
.cta{background:#a3362b;box-shadow:0 4px 0 #68261e}.cta:hover{background:#852b23}.portrait{border:0;padding:12px 12px 9px;transform:rotate(4deg);background:#fffdf4;box-shadow:7px 14px 0 #e2b661,0 15px 42px #60441835}.portrait img{aspect-ratio:1/1;object-position:center 47%}.portrait figcaption{color:#334872}.star{right:3%;color:#bc4839;animation:twinkle 3.8s ease-in-out infinite alternate}
.birthday-badge{position:absolute;left:-17px;bottom:16%;display:grid;place-content:center;text-align:center;width:95px;height:95px;border-radius:50%;transform:rotate(-14deg);background:#ffd66c;color:#6b271f;box-shadow:0 0 0 4px #fff7df,0 6px 20px #56231343}.birthday-badge b{font:700 3.5rem/.79 var(--serif)}.birthday-badge small{font-weight:800;font-size:.68rem;letter-spacing:.14em;margin-top:6px}
@keyframes twinkle{to{transform:scale(1.19) rotate(12deg)}}
#album{background:#dce9fb;border:1px solid #b2c4e2;border-radius:26px;padding:43px clamp(13px,3vw,34px) 30px;box-shadow:0 8px 0 #bdcfe9;scroll-margin-top:16px}.section-head h2{font-weight:700}.section-head p:last-child{margin-bottom:0}.mobile-break{display:none}
.album{gap:clamp(16px,4vw,42px)}.dial-label{text-align:center;font:italic 700 1.12rem var(--serif);margin:0 0 10px;color:#97342a}.dial-label span{font:700 1.35rem system-ui}
.dial{width:min(100%,400px);border:2px solid #7f9bc7;background:radial-gradient(circle,#f8faff,#c5d9f6);box-shadow:inset 0 0 0 7px #eff5ff,0 7px 0 #91abd2}.ticks{inset:7%;border:2px dotted #8ca6ce}.dial-photo{inset:29%;width:42%;height:42%;border:6px solid #fef8e6}
.dial button{width:clamp(44px,7vw,62px);height:clamp(44px,7vw,62px);border:2px solid #fff9e7;background:#fff8df;box-shadow:0 2px 4px #24355942;overflow:visible}.dial button img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 42%;pointer-events:none}.dial button span{position:relative;display:inline-grid;place-content:center;min-width:23px;height:23px;border-radius:50%;font-size:1rem}.dial button:has(img) span{position:absolute;bottom:-4px;right:-4px;background:#fff8de;box-shadow:0 1px 3px #23355955}.dial button[aria-pressed=true]{outline:3px solid #a3362b;outline-offset:2px;background:#a3362b;color:#fff}.dial button[aria-pressed=true] span{background:#a3362b;color:white}.dial button.pending{border:2px dashed #637fa9;color:#32466a}.dial button:hover{filter:brightness(1.06)}
.hand::before{top:22%;height:8%;width:10px;left:calc(50% - 5px);background:#a3362b;clip-path:polygon(50% 0,100% 34%,70% 34%,70% 100%,30% 100%,30% 34%,0 34%)}.dial-heart{position:absolute;bottom:25%;right:29%;border-radius:50%;display:grid;place-items:center;width:29px;height:29px;background:#ffdc77;color:#922f24;font-size:1.15rem;pointer-events:none}
.origin{margin-top:22px}.origin button,.caption button{border:1px solid #90a6c8;color:#233559;font-weight:650}.origin button[aria-pressed=true]{background:#233559;color:#fff}
.memory{position:relative;padding:13px 13px 5px;border:1px solid #e3d1ad;background:#fff9e8;box-shadow:4px 7px 0 #8da7cd,0 10px 25px #24477925;transform:rotate(-1.5deg)}.memory.turned{animation:turn .42s ease-out}@keyframes turn{from{transform:perspective(800px) rotateY(-12deg) rotate(-3deg);opacity:.65}to{transform:perspective(800px) rotateY(0deg) rotate(-1.5deg);opacity:1}}.tape{position:absolute;z-index:1;top:-12px;left:40%;width:22%;height:25px;background:repeating-linear-gradient(100deg,#f8cc67dc 0 5px,#ffdb81dc 5px 10px);transform:rotate(5deg);pointer-events:none}.print-label{display:block;font-size:.67rem;letter-spacing:.15em;font-weight:800;color:#8d3e2f;margin:6px 0}.photo{background:#e2e9f4}.draft-note{margin-top:27px}
.event{margin:39px 0 0;background:#ffe3a3;border-color:#d3aa52;border-radius:27px;box-shadow:0 7px 0 #ebc977}.event h2{font-weight:700}.event .times strong{color:#a3362b}.event .times div+div{border-color:#cba966}.location-card{margin:25px auto 0;width:min(100%,500px);border:1px dashed #b18d45;background:#fff8e6;border-radius:16px;padding:18px 10px}.place{margin:0 0 6px}.venue{font:700 clamp(1.24rem,4vw,1.65rem) var(--serif)}address{font-style:normal;margin:8px 0 0}.map-link{margin-top:13px}footer{text-align:center;padding:26px 8px;font-weight:800;letter-spacing:.16em;color:#8e3c2d;font-size:.8rem}
@media(max-width:680px){.hero{padding-top:27px;gap:32px}.portrait{width:min(78%,315px)}.birthday-badge{width:73px;height:73px}.birthday-badge b{font-size:2.65rem}.mobile-break{display:initial}.album{gap:30px}.dial{width:min(100%,365px)}.memory{margin:0 5px}.dial button{width:clamp(44px,13vw,53px);height:clamp(44px,13vw,53px)}}
@media(prefers-reduced-motion:reduce){.memory.turned,.star{animation:none}}

/* Music-box invitation */
@font-face{font-family:SupSerif;src:url("./fonts/SupSerif.woff") format("woff");font-display:swap}
@font-face{font-family:SupSans;src:url("./fonts/SupSans.woff") format("woff");font-display:swap}
:root{--paper:#fbf4e5;--ink:#182b44;--accent:#7b5225;--serif:SupSerif,Georgia,serif}
body{font-family:SupSans,system-ui,sans-serif}h1 em{color:#8d602b}h1{font-size:clamp(3.05rem,7vw,6.5rem)}.cta{background:#203b5a;box-shadow:0 4px 0 #12233a}.cta:hover{background:#2d4c6e}.invitation{border-color:#b78a4e}.invitation strong{font:inherit;font-weight:750;color:#73501e}.invitation p+p{margin-top:8px}.cover-kicker{background:#f3dfb3}.portrait{box-shadow:7px 12px 0 #d8b675,0 15px 42px #60441835}
#album{background:radial-gradient(ellipse at 50% 0%,#294563,#14273f 65%);color:#fff1d2;border-color:#ac8853;box-shadow:0 7px 0 #0e1c30}.section-head .eyebrow,#album .draft-note,.section-head p:last-child,.instruction{color:#f4dbab}.section-head h2{font-size:clamp(1.94rem,5vw,3.5rem)}.forest-gate{margin:23px auto 0}.forest-gate summary{position:relative;display:grid;justify-items:center;cursor:pointer;list-style:none;width:min(100%,390px);margin:auto;perspective:800px;color:#ffecbe}.forest-gate summary::-webkit-details-marker{display:none}.forest-gate summary:focus-visible{outline:3px solid #e9ba66;outline-offset:5px}.box-face{width:100%;height:152px;display:grid;place-content:center;text-align:center;gap:4px;border:2px solid #b48b50;border-radius:13px;background:radial-gradient(ellipse,#344b66,#122139 78%);box-shadow:inset 0 0 0 5px #192c44,inset 0 0 0 6px #b48b50,0 8px 0 #091524;transform-origin:top}.box-monogram{font:3.3rem/.9 var(--serif);color:#ffe0a2}.ornament{color:#e6bd72}.box-year{font-size:.62rem;font-weight:700;letter-spacing:.2em}.box-latch{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#ecc988;color:#34230e;border:3px double #654919;z-index:1;margin-top:-20px;box-shadow:0 4px 8px #0006}.open-text,.close-text{font-size:.86rem;margin-top:8px}.close-text,.forest-gate[open] .open-text{display:none}.forest-gate[open] .close-text{display:block}.forest-gate[open] .box-face{animation:lift-lid .65s ease both}.instruction{text-align:center;margin:19px 0 0}.forest-gate[open] .album{animation:rise .5s ease both}.album{color:var(--ink)}.dial-label{color:#f7dfae}.draft-note{font-size:.78rem}.event{background:#f3dfb3}.event .times strong{color:#73501e}.venue-line{border-bottom:1px solid #b99b6c;width:min(85%,280px);height:25px;margin:auto}.location-card{max-width:400px}
@keyframes lift-lid{from{transform:rotateX(0)}to{transform:rotateX(29deg)}}
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.forest-gate[open] .box-face,.forest-gate[open] .album{animation:none}}

/* Forest and ember */
:root{--ink:#18382d;--accent:#854521}
body{background:radial-gradient(ellipse at 83% 10%,#f7cf9470,transparent 27rem),linear-gradient(120deg,#ecf0e1,#fcf3e4 55%)}
.recipient{display:flex;flex-wrap:wrap;gap:.35em .65em;margin:0 0 14px;padding:9px 13px;width:fit-content;border:1px solid #af9d75;border-radius:7px;background:#fffbeb;color:#193a2b;font-weight:700}
.cta,.cta:hover{background:#254d3b;box-shadow:0 4px 0 #142f26}
.name-link{display:inline-block;margin-top:10px;color:#713915;font-weight:700;text-underline-offset:4px}
.name-story{margin:0 0 36px;padding:clamp(22px,5vw,45px);border:1px solid #b6bb9d;border-radius:24px;background:linear-gradient(120deg,#f4f4e6,#fff0d6);text-align:center;scroll-margin:16px}
.name-story h2{font-size:clamp(1.8rem,5.5vw,3.3rem)}
.name-story summary{cursor:pointer;margin:17px auto 0;width:fit-content;padding:9px 14px;background:#254d3b;color:#fff8e7;border-radius:8px;font-weight:700}
.name-story dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin:22px auto 0;text-align:left}
.name-story dl div{padding:13px;background:#fffaf0;border:1px solid #c9c5ab;border-radius:10px}
.name-story dt{font:700 1.35rem var(--serif);color:#713915}.name-story dd{margin:6px 0 0}
.name-wish{margin:17px auto 0;max-width:64ch}
#album{background:#15372d url("./anh/rung.svg") center bottom / 100% auto no-repeat;color:#fff1d2;border-color:#80704a;box-shadow:0 7px 0 #10291f}
.forest-gate .box-face{background:#244639 url("./anh/rung.svg") center bottom / cover no-repeat;text-shadow:0 2px 5px #12291f}
.forest-gate .box-year{padding:4px 9px;background:#15372d;border-radius:6px}
.forest-gate[open] .box-face{animation:none}.forest-gate[open] .album{animation:rise .5s ease both}
@media(prefers-reduced-motion:reduce){.forest-gate[open] .album{animation:none}}

.name-reading{max-width:65ch;margin:20px auto;text-align:left;line-height:1.75}
.name-reading strong{color:#713915}
.read-name{border:1px solid #8b5c2d;border-radius:99px;padding:10px 17px;background:#f5dfb1;font-weight:700;color:#2c3729}
#read-status:empty{display:none}

.name-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #b6bb9d;border-radius:12px;overflow:hidden;margin:16px 0 19px;background:#fffbef;line-height:1.55}
.name-table th,.name-table td{padding:10px clamp(8px,2vw,15px);text-align:left;vertical-align:top}
.name-table thead th{background:#264a3a;color:#fff6df;font-size:.84rem}
.name-table tbody th{white-space:nowrap;color:#713915;font-family:var(--serif);font-size:1.03rem}
.name-table tbody tr+tr>*{border-top:1px solid #ddd5b8}
.name-table tbody tr:nth-child(even){background:#f3efdd}
.name-reason{margin-top:20px}.name-thanks{border-left:3px solid #ad8252;padding-left:12px}

.journey-strip{margin:25px auto 0;max-width:860px;color:#fff1d2}
.journey-strip h3{margin:0;font-size:1.35rem}.journey-strip p{margin:5px 0 10px;color:#f3dfb7;font-size:.84rem}
.journey-track{position:relative;display:flex;gap:10px;overflow-x:auto;padding:8px 6px 13px;scroll-snap-type:x proximity;scrollbar-color:#c29957 #234337;overscroll-behavior-inline:contain}
.journey-track button{flex:0 0 clamp(74px,18vw,112px);aspect-ratio:1;padding:3px;border:1px solid #bdab78;border-radius:10px;background:#fff3d7;scroll-snap-align:center}
.journey-track button[aria-pressed=true]{outline:2px solid #ffcf76;outline-offset:2px}
.journey-track img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}

.dial button{width:clamp(36px,12vw,54px);height:clamp(36px,12vw,54px)}
.dial button:has(img) span{min-width:21px;height:21px;font-size:.72rem;font-weight:800}

.photo > [hidden]{display:none}
#photo-placeholder{margin:0;padding:16px;text-align:center;font-weight:650}