@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
@font-face{font-family:'La Belle Aurore';src:url('assets/fonts/LaBelleAurore-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--paper:#f0eee8;--muted:#a4a2a7}*{box-sizing:border-box}body{margin:0;background:#080809;color:var(--paper);font-family:'DM Sans',Arial,sans-serif}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #efadd1;outline-offset:6px}header{margin:0 5%;height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2a292d;position:relative;z-index:1}header img{width:245px;height:auto;display:block}header>span,.eyebrow{letter-spacing:2.6px;font-weight:500}header>span{color:#aaa}main{max-width:1550px;margin:auto;position:relative}.hero{position:relative;text-align:center;padding:53px 20px 28px;overflow:hidden}.eyebrow{color:#b9b6bc;margin:0 0 23px}h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;line-height:1.12;letter-spacing:-2.7px;margin:0}h1 em{font-weight:500;color:#d2cbd3}.intro{line-height:1.8;color:#b8b5bd;margin:24px 0 0}.stage{height:365px;display:grid;grid-template-columns:1fr 470px 1fr;align-items:center;max-width:1250px;margin:0 auto}.signup{position:relative;z-index:5;padding-top:25px}.hand,.polaroid span{font-family:'La Belle Aurore',cursive}.note{display:block;transform:rotate(-5deg);margin-bottom:21px;color:#c9c5cd}h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.7px;margin:0 0 12px}.signup>p{line-height:1.8;color:#aaa6af;margin:0 0 23px}.email-row{display:flex;border:1px solid #68646e;padding:5px;background:#111114}.email-row input{width:100%;min-width:0;border:0;background:transparent;padding:12px;color:white;outline-offset:-2px;}.primary{border:1px solid var(--paper);background:var(--paper);color:#151316;padding:14px 18px;font-weight:600;white-space:nowrap}.primary:hover{background:#dfc3d3;border-color:#dfc3d3}.primary span{margin-left:9px}.fine{line-height:1.7;color:#918d97;margin:12px 0 0}.photos{height:100%;position:relative}.polaroid{background:#eeeae3;color:#252126;border:0;padding:10px 10px 7px;width:180px;position:absolute;box-shadow:0 12px 35px #0008;transition:transform .35s,z-index .1s}.polaroid img{display:block;width:100%;height:170px;object-fit:cover;filter:grayscale(1);transition:filter .65s}.polaroid span{display:block;padding:7px 0 1px}.polaroid:hover,.polaroid:focus-visible,.polaroid.revealed{z-index:4;transform:rotate(0deg) translateY(-8px)}.polaroid:hover img,.polaroid:focus-visible img,.polaroid.revealed img{filter:grayscale(0)}.p1{left:8%;top:6px;transform:rotate(-13deg);z-index:2}.p2{right:6%;top:148px;transform:rotate(9deg)}.p3{right:4%;top:12px;transform:rotate(12deg);z-index:2}.p4{left:8%;top:150px;transform:rotate(-9deg)}.p2 img{object-position:center 42%}.photo-hint{color:#88838f;margin:16px 0 0;transform:rotate(-2deg)}.custom{border-top:1px solid #37333b;border-bottom:1px solid #37333b;margin:35px 7% 0;padding:32px 18px;display:flex;align-items:center;gap:28px}.custom .eyebrow{margin-bottom:11px}.custom h2{}.custom p:last-child{color:#aaa6af;margin-bottom:0}.little-star{color:#bab5c0}.outline{margin-left:auto;padding:16px 23px;border:1px solid #77717e;background:transparent;color:var(--paper);}.outline span{margin-left:28px}.outline:hover{background:#211c25}footer{margin:0 7%;padding:30px 0;display:flex;justify-content:space-between;align-items:center;color:#8e8895;letter-spacing:.6px}footer .hand{}.scribble{position:absolute;pointer-events:none;color:#bfbac5}.star{animation:shimmer 5s ease-in-out infinite}.s1{left:15%;top:40px;transform:rotate(13deg)}.s2{right:16%;top:140px;animation-delay:2s}.heart{font-family:'La Belle Aurore',cursive;right:7%;top:45px;transform:rotate(17deg)}.dust{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,#dcd4e650 .7px,transparent 1px),radial-gradient(circle,#dcd4e625 1px,transparent 1.5px);background-size:173px 191px,281px 257px;background-position:21px 50px,80px 130px;opacity:.4;animation:shimmer 8s ease-in-out infinite}@keyframes shimmer{0%,100%{opacity:.25}50%{opacity:.8}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{background:#141215;color:var(--paper);border:1px solid #6c616f;padding:35px;max-width:510px;width:calc(100% - 32px);max-height:90vh}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog>p:not(.eyebrow){color:#bbb3bf;line-height:1.7}dialog label{display:block;margin:16px 0}dialog input,dialog textarea{display:block;width:100%;padding:12px;margin-top:7px;background:#080809;border:1px solid #59505e;color:white}dialog .primary{width:100%}.close{position:absolute;right:12px;top:8px;color:white;background:none;border:0;}.status{color:#ebc4dc;line-height:1.5}.status:empty{display:none}
@media(min-width:1450px){.stage{margin-top:20px}}@media(max-width:1000px){.stage{grid-template-columns:1fr 400px 1fr}.polaroid{width:148px}.polaroid img{height:145px}.p1{left:-12px}.p2{right:0}.p3{right:-12px}.p4{left:0}.polaroid span{}.s1{left:7%}}
@media(max-width:740px){header{height:88px;justify-content:center}header img{width:225px}header>span{display:none}.hero{padding-top:38px}h1{letter-spacing:-1.8px}.eyebrow{letter-spacing:1.8px}.intro{}.stage{height:auto;display:grid;grid-template-columns:1fr 1fr;margin-top:28px}.signup{grid-column:1/-1;grid-row:1;padding:0 0 24px}.signup h2{}.note{margin:0 0 19px}.email-row{max-width:440px;margin:auto}.photos{height:300px}.polaroid{width:145px}.polaroid img{height:144px}.p1{top:12px;left:4%}.p2{top:110px;right:0}.p3{top:10px;right:4%}.p4{top:108px;left:0}.s1{left:2%;top:95px;}.s2{right:1%;top:204px;}.heart{right:4%;top:28px;}.photo-hint{margin-top:28px}.custom{margin:18px 6% 0;padding:28px 0;gap:14px;flex-wrap:wrap}.little-star{}.custom h2{}.custom p:last-child{}.outline{margin:8px 0 0 52px}.custom .eyebrow{}footer{flex-wrap:wrap;gap:20px;justify-content:center;text-align:center}footer .hand{order:3;flex-basis:100%;}.desktop{display:none}dialog{padding:30px 22px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* A quieter hierarchy: handwriting, headline, then consistent body copy. */
header{justify-content:center}
.diary{margin:0 0 24px;line-height:1.4;color:#c9c5cd;font-weight:400;letter-spacing:0;transform:rotate(-2deg)}
.diary-writing{display:inline-block;clip-path:inset(0 0 0 0)}
.diary-writing.is-writing{animation:write-note 3.8s linear both}
@keyframes write-note{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.signup{padding-top:0}
.signup-divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 26px;width:155px;color:#bcb5c4;}
.signup-divider:before,.signup-divider:after{content:"";height:1px;width:45px;background:#504951}
.signup>p,.intro{line-height:1.8}
.polaroid img{object-fit:contain;background:#eae7e2;object-position:center}
.polaroid span{}
.photo-hint{font-family:'DM Sans',Arial,sans-serif;transform:none;color:#aaa6af}
.custom>div{max-width:540px}.custom p:last-child{line-height:1.8}.custom .outline{flex-shrink:0}
@media(max-width:740px){.diary{margin-bottom:24px;white-space:nowrap}h1{}.intro,.signup>p,.custom p:last-child{}.signup-divider{margin-bottom:20px}.polaroid span{}.photo-hint{}.custom>div{flex:1;min-width:220px}.custom .outline{margin-left:52px}.s1{top:103px}}
@media(max-width:360px){.diary{}h1{}}

.p4 img{transform:none}

/* Black-and-white brand, full-color journals, sparse night-sky shimmer. */
:root{--paper:#fff;--muted:#b9b9bd;--body-size:14px;--hand-size:24px;--small-size:11px}
body{background:#050505;color:#fff}
h1,h1 em,h2{color:#fff}
.intro,.signup>p,.custom p:last-child,dialog>p:not(.eyebrow){color:#ccc;line-height:1.8}
.diary,.photo-hint,footer .hand{font-family:'La Belle Aurore',cursive;color:#fff;font-weight:400}
.photo-hint{transform:rotate(-2deg);margin-top:26px}
h2,.custom h2{}
.fine,footer,.eyebrow{color:#aaa}
.email-row input,.primary,.outline,dialog label{}
.primary{background:#eed3df;border-color:#eed3df;color:#171217}
.primary:hover{background:#f7e5ed;border-color:#f7e5ed}
.polaroid{background:#252525;color:#fff;border:1px solid #555;box-shadow:0 12px 35px #000b;padding:10px 10px 8px}
.polaroid span{white-space:nowrap}
.polaroid img{filter:none}
.polaroid:hover img,.polaroid:focus-visible img,.polaroid.revealed img{filter:saturate(1.12) brightness(1.04)}
.signup-divider{display:block;height:1px;width:92px;background:#777;margin:0 auto 27px}
.signup-divider:before,.signup-divider:after{content:none}
.custom .outline{margin-left:auto}.custom>div{max-width:600px}
.night-sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.night-sky i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#fff;opacity:.12;animation:twinkle var(--duration) ease-in-out var(--delay) infinite}
.night-sky .spark:before,.night-sky .spark:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(transparent,#fff,transparent);width:1px;height:9px}
.night-sky .spark:after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes twinkle{0%,55%,100%{opacity:.08;transform:scale(.75);box-shadow:none}70%{opacity:.7;transform:scale(1);box-shadow:0 0 5px #ffffff50}80%{opacity:.2;transform:scale(.85)}}
@media(max-width:1000px){.polaroid span{}}
@media(max-width:740px){:root{--body-size:14px;--hand-size:22px;--small-size:11px}.diary{}.diary,.photo-hint{letter-spacing:0}.custom .outline{margin-left:0}.custom>div{min-width:0;flex-basis:100%}.custom h2{}.polaroid span{}.primary{padding:14px 12px}.night-sky i:nth-child(3n){display:none}}
@media(max-width:360px){.diary{}.email-row input,.primary{}}
@media(prefers-reduced-motion:reduce){.night-sky i{animation:none;opacity:.2}}

/* Pale-pink instant-photo borders; white buttons blush on interaction. */
.primary{background:#fff;border-color:#fff}
.primary:hover,.primary:focus-visible{background:#eed3df;border-color:#eed3df}
.polaroid{background:#eed3df;color:#171217;border-color:#eed3df;padding:10px 10px 10px}
.polaroid span{min-height:47px;display:flex;align-items:center;justify-content:center;padding:7px 0 5px}
.stage{height:390px}
.hero{padding-bottom:38px}
@media(max-width:740px){.stage{height:auto}.photos{height:330px}.polaroid span{min-height:44px}.hero{padding-bottom:25px}}

/* Restore compact white Polaroids and make the sparse twinkles visible. */
.polaroid{background:#fff;border:0;color:#171217;padding:10px 10px 7px}
.polaroid span{min-height:0;display:block;padding:7px 0 1px}
.stage{height:365px}.hero{padding-bottom:28px}
.night-sky i{width:3px;height:3px;opacity:.35;animation:visible-twinkle var(--duration) ease-in-out var(--delay) infinite}
.night-sky .spark{width:4px;height:4px}
.night-sky .spark:before,.night-sky .spark:after{height:15px;width:1.5px}
@keyframes visible-twinkle{0%,100%{opacity:.25;transform:scale(.8);box-shadow:0 0 3px #ffffff40}35%{opacity:.5;transform:scale(1);box-shadow:0 0 6px #ffffff80}50%{opacity:1;transform:scale(1.2);box-shadow:0 0 9px #ffffffb0,0 0 18px #ffffff45}65%{opacity:.4;transform:scale(.9);box-shadow:0 0 5px #ffffff60}}
@media(max-width:740px){.stage{height:auto}.photos{height:300px}.hero{padding-bottom:28px}.night-sky i:nth-child(3n){display:block}.night-sky .spark:before,.night-sky .spark:after{height:12px}}
@media(prefers-reduced-motion:reduce){.night-sky i{animation:none;opacity:.5;box-shadow:0 0 5px #ffffff50}}

/* Soft four-point silver star field inspired by the supplied reference. */
.night-sky{background:#000;mask-image:radial-gradient(ellipse 32% 30% at 50% 40%,#0006,#000 100%)}
.night-sky i,.night-sky .spark{width:2px;height:2px;background:#fff;border-radius:50%;opacity:.3;animation:reference-twinkle var(--duration) ease-in-out var(--delay) infinite;box-shadow:0 0 5px #fff9}
.night-sky .spark:before,.night-sky .spark:after{width:var(--ray);height:var(--ray);left:50%;top:50%;background:linear-gradient(90deg,transparent 5%,#ffffffb0 48%,#fff 50%,#ffffffb0 52%,transparent 95%);clip-path:polygon(0 50%,44% 44%,50% 0,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%);transform:translate(-50%,-50%);filter:blur(.25px)}
.night-sky .spark:after{background:radial-gradient(ellipse,#fff9,transparent 66%);clip-path:none;filter:blur(2px);transform:translate(-50%,-50%);width:calc(var(--ray)*1.15);height:calc(var(--ray)*1.15)}
@keyframes reference-twinkle{0%,100%{opacity:.12;transform:scale(.6)}30%{opacity:.35;transform:scale(.85)}50%{opacity:.95;transform:scale(1.12)}70%{opacity:.3;transform:scale(.8)}}
@media(max-width:740px){.night-sky i:nth-child(2n){display:none}.night-sky .spark:before,.night-sky .spark:after{height:var(--ray)}}
@media(prefers-reduced-motion:reduce){.night-sky i{animation:none;opacity:.4;transform:none}}
/* Confirmation pages share the approved black sky and silver twinkles. */
.confirmation{max-width:850px;text-align:center;padding:58px 24px 52px;min-height:calc(100vh - 215px)}
.confirmation h1{line-height:1.12}
.confirmation-note{color:#fff;margin:0 0 22px;transform:rotate(-2deg)}
.confirmation-copy{line-height:1.8;color:#ddd;margin:27px 0}
.social-section{margin:34px auto 30px;padding-top:30px;border-top:1px solid #555;max-width:650px}
.social-section h2{}.social-section p{line-height:1.8;color:#ccc}
.social-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:23px}
.social-links a{color:#fff;border:1px solid #777;padding:13px 20px;text-decoration:none;background:#080808}
.social-links a:hover{background:#fff;color:#000}.social-links span{margin-left:12px}
.back-link{display:inline-block;color:#fff;text-underline-offset:5px;margin-top:22px}
.confirmation-footer{position:relative;max-width:1200px;margin:auto;padding:25px 30px}
.request-footnote{color:#aaa;line-height:1.7;margin:32px auto 0}
.preview-notice{color:#e4c9d7;background:#151115;border:1px solid #66515c;padding:10px 15px;max-width:500px;margin:0 auto 25px}
.preview-notice[hidden]{display:none}.status a{color:#fff;text-underline-offset:3px}
.primary:disabled{opacity:.65;cursor:wait}
@media(max-width:740px){.confirmation{padding:38px 22px}.confirmation-copy{}.confirmation-note{}.social-links{display:grid;grid-template-columns:1fr 1fr}.social-links a{padding:13px 12px}.social-section h2{}.confirmation-footer{justify-content:center}}

/* Shared typography: three families, five intentional size roles. */
:root{--font-heading:'Playfair Display',Georgia,serif;--font-body:'DM Sans',Arial,sans-serif;--font-hand:'La Belle Aurore',cursive;--type-hero:clamp(44px,5.1vw,76px);--type-heading:30px;--type-hand:22px;--type-body:14px;--type-small:11px}
body,input,textarea,button{font-family:var(--font-body);font-size:var(--type-body)}
h1,.confirmation h1{font-family:var(--font-heading);font-size:var(--type-hero)}
h2,.custom h2,.social-section h2{font-family:var(--font-heading);font-size:var(--type-heading)}
.hand,.diary,.confirmation-note,.polaroid span,footer .hand{font-family:var(--font-hand);font-size:var(--type-hand)}
.intro,.signup>p,.custom p:last-child,.confirmation-copy,.social-section p,dialog>p:not(.eyebrow){font-family:var(--font-body);font-size:var(--type-body);font-weight:400;line-height:1.8}
.email-row input,.primary,.outline,dialog label,.social-links a,.back-link,.status{font-size:var(--type-body)}
.fine,footer,.eyebrow,.request-footnote,.preview-notice{font-size:var(--type-small);line-height:1.7}
.close{font-size:var(--type-heading)}
@media(max-width:740px){:root{--type-hero:44px}.diary{white-space:normal}}
@media(max-width:360px){:root{--type-hero:39px}}