/* Her blues from the supplied swatch, warmed with a maroon accent. */
:root{--green:#020079;--green-dark:#01005b;--paper:#fff;--paper-light:#fbfcff;--ink:#020079;--red:#7a1f3d;--red-dark:#7a1f3d;--maroon:#7a1f3d;--maroon-light:#f3d1de;--gold:#8ba5ed;--line:#aab7e6}
body{background:#fff;color:var(--ink)}
.site-header,.hero{background:#020079}
.site-header{border-bottom-color:#fff5}
.brand-dot,.header-date span{color:var(--maroon-light)}
.hero-grid{opacity:.3;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 36px,#d9e2ff35 37px,#d9e2ff35 38px);background-size:auto}
.red-dot{background:var(--maroon-light);box-shadow:0 0 0 5px #f3d1de33}
.hero-eyebrow,.hero-intro{color:#e0e7ff}
.hero h1 em{font:700 clamp(73px,8vw,130px)/1.06 var(--hand);color:#cbd7ff;text-transform:none;letter-spacing:-.06em}
.hero-button{background:#fff;border-color:#fff;color:#020079}
.hero-button:hover{background:#e7edff}
.hero-card{background:#fff;color:#020079;border-color:#fff;outline-color:#8ca5e7;box-shadow:20px 25px 0 #010047aa,0 35px 60px #01004770}
.stamp{border-color:var(--maroon);background:#fceef3;color:var(--maroon)}
.postmark,.card-bottom{border-color:#020079}
.postmark:after{background:#020079;box-shadow:0 7px #020079,0 -7px #020079}
.card-address small{color:var(--maroon)}.card-address>span{font:400 23px/1 var(--hand)}
.hero-side-note{color:#d5dfff}.hero-bottom{border-color:#fff6}
.paper-section{background:#fff}.paper-section:before{opacity:.035}
.kicker{color:var(--maroon)}
.opening h2 i,.memories h2 i{font:700 1.08em/1.05 var(--hand);color:var(--maroon);letter-spacing:-.05em}
.opening-copy>p:not(.kicker),.memories-intro>p{color:#334a92}
.scribble{font:400 29px/1.2 var(--hand);color:var(--maroon)}
.print{background:#fff;box-shadow:0 15px 25px #02007925}
.print figcaption{font:400 17px var(--hand)}
.photo-tape{background:#c998aaa6}
.media-fallback{background:repeating-linear-gradient(45deg,#edf2ff,#edf2ff 1px,#f8faff 1px,#f8faff 14px)}
.media-fallback span{color:#9aace4}
.distance{background:#0006b1;color:#fff}
.distance .section-head,.distance .section-footer{border-color:#fff}
.distance h2 span{font:700 1.02em/1.06 var(--hand);color:#d9e2ff;letter-spacing:-.055em}
.route path{stroke:#fff}
.route-end{background:#0006b1;color:#fff}
.route-heart{color:var(--maroon-light)}
.distance-note{font:400 32px var(--hand);color:#e5ebff}
.filmstrip{background:#020079;border-color:#020079}
.film-frame{background:#172591}
.film-image .media-fallback{background:#2943ab;color:#fff}
.film-image .media-fallback span{color:#b6c7ff}
.video-heading{border-color:#020079}
.video-card{background:#020079}
.video-fallback,.video-card:nth-child(2) .video-fallback{background:linear-gradient(135deg,#020079,#0006b1)}
.notes{background:#f0f3ff}
.notes h2 span{font:700 1.04em var(--hand);color:var(--maroon)}
.notes-heading>p:last-child{font:400 27px var(--hand)}
.note-face,.note:nth-child(2) .note-face,.note:nth-child(3) .note-face{background:#fff;border-left-color:var(--maroon);box-shadow:5px 6px 0 #0200791f}
.note-face em{color:var(--maroon)}
.note-back,.note:nth-child(2) .note-back,.note:nth-child(3) .note-back{background:#0006b1!important;color:#fff}
.note-back em{color:#d9e2ff}
.last-page{background:#020079}
.last-content .kicker{color:var(--maroon-light)}
.last-page h2 i{font:700 1.08em/1 var(--hand);color:var(--maroon-light)}
.last-content>p:not(.kicker){color:#dfe6ff}
.env-back{background:#abc3fa}.env-flap{background:#e1eaff}.env-front{background:#f4f7ff}.env-seal{background:var(--maroon);color:#fff}
.open-label{border-color:#cbd7ff}.open-label:hover{color:#cbd7ff}
dialog#letter-dialog{background:#020079}
dialog#letter-dialog::backdrop{background:#01004beb}
.close-letter{background:#020079;border-color:#fff8;color:#fff}.close-letter span{color:#cbd7ff}
.letter-paper{background-color:#fff;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,#cbd8f27d 36px);box-shadow:14px 19px 0 #00004ca8,0 25px 50px #00003b7d}
.letter-paper h2{font:700 clamp(42px,6vw,65px) var(--hand);color:var(--maroon)}
.letter-paper p{color:#1f317d}.letter-sign span{color:var(--maroon)}.letter-bottomline span:last-child{color:var(--maroon)}
@media(max-width:760px){.hero h1 em{font-size:1.1em}.distance h2 span{font-size:1.02em}}
@media(max-width:400px){.hero h1 em{font-size:61px}}

/* The hand-camera photo opens the gallery; the next four frames unfold on tap. */
.camera-feature{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);border:2px solid #020079;background:#fff;position:relative;z-index:1;box-shadow:13px 13px 0 #dbe4ff}
.camera-photo{height:clamp(390px,48vw,650px);position:relative;overflow:hidden;background:#eaf0ff}
.camera-photo img{width:100%;height:100%;object-fit:contain}
.camera-photo .media-fallback{background:repeating-linear-gradient(0deg,#e9efff 0,#e9efff 27px,#cbd9ff 28px,#e9efff 29px);color:#020079}
.camera-photo .media-fallback span{font-size:100px;color:#91a9ef}
.viewfinder{position:absolute;width:37px;height:37px;border-color:#fff;border-style:solid;filter:drop-shadow(0 1px 2px #020079);pointer-events:none}
.viewfinder-tl{top:22px;left:22px;border-width:3px 0 0 3px}.viewfinder-tr{top:22px;right:22px;border-width:3px 3px 0 0}.viewfinder-bl{bottom:22px;left:22px;border-width:0 0 3px 3px}.viewfinder-br{bottom:22px;right:22px;border-width:0 3px 3px 0}
.camera-feature figcaption{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(25px,4vw,70px);background:#f6f8ff;border-left:2px solid #020079}
.camera-feature figcaption span{font:500 11px var(--mono);letter-spacing:.13em;color:var(--maroon)}
.camera-feature figcaption strong{font:700 clamp(26px,2.6vw,43px)/1.1 var(--sans);letter-spacing:-.05em;color:#020079}
.unfold-button{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:min(410px,100%);margin:47px auto 65px;padding:17px 21px;background:#0006b1;border:2px solid #0006b1;color:#fff;font:700 11px var(--mono);letter-spacing:.08em;transition:transform .25s,background .25s,color .25s}
.unfold-button b{font:27px var(--sans);line-height:.7}.unfold-button:hover{transform:translateY(-4px);background:#fff;color:#0006b1}
.gallery-reveal[hidden]{display:none}.gallery-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.gallery-reveal.unfolded{opacity:1;transform:none}
@media(max-width:760px){.camera-feature{grid-template-columns:1fr;box-shadow:8px 8px 0 #dbe4ff}.camera-photo{height:min(104vw,520px)}.camera-feature figcaption{border-left:0;border-top:2px solid #020079;padding:28px;gap:10px}.camera-feature figcaption strong{font-size:27px}.unfold-button{margin:35px auto 55px}}
@media(prefers-reduced-motion:reduce){.gallery-reveal{opacity:1;transform:none}.unfold-button{transition:none}}

/* Keep lazy media in layout so the browser can fetch it before removing placeholders. */
.media-slot img{display:block}
.media-slot .media-fallback{position:absolute;inset:0}
.print .media-fallback{inset:12px 12px 45px;width:auto;height:auto}
.video-card video{display:block}
.video-card .video-fallback{position:absolute;inset:0}

/* Keep the opening prints uncropped; each photo can open at its natural aspect ratio. */
.print img{object-fit:contain;background:#edf2ff}
.media-slot.has-media img{cursor:zoom-in}
.media-slot img:focus-visible{outline:3px solid var(--maroon);outline-offset:-4px}
body.photo-open{overflow:hidden}
.photo-overlay[hidden]{display:none}
.photo-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px;background:#01002fc9;backdrop-filter:blur(5px)}
.photo-panel{width:min(900px,100%);max-height:calc(100dvh - 28px);overflow:auto;border:2px solid #020079;background:#fff;color:#020079;box-shadow:12px 12px 0 var(--maroon),0 30px 80px #01003d88}
.photo-dialog-shell{display:flex;flex-direction:column;gap:14px;padding:clamp(12px,2vw,22px)}
.photo-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #020079;padding-bottom:12px;font:500 10px var(--mono);letter-spacing:.1em}
.close-photo{flex:none;border:1px solid #020079;background:#fff;color:#020079;padding:10px 13px;font:500 10px var(--mono);letter-spacing:.1em}
.close-photo span{margin-left:12px;color:var(--maroon);font-size:16px}
#full-photo{display:block;align-self:center;max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;background:#f1f4ff}
#photo-error{margin:15px 0;text-align:center;color:var(--maroon);font:500 13px var(--mono)}
#photo-error[hidden]{display:none}
#full-photo-caption{margin:0;text-align:center;font:500 11px var(--mono);letter-spacing:.08em;color:#334a92}

/* A small postage-inspired D⁴ monogram, shared by the header and browser tab. */
.brand{display:inline-flex;align-items:center;gap:12px;letter-spacing:0;line-height:1;text-decoration:none}
.brand-mark{width:48px;height:48px;flex:none;filter:drop-shadow(4px 4px 0 #01004a)}
.brand-wordmark{display:flex;flex-direction:column;gap:5px;white-space:nowrap}
.brand-wordmark strong{font:800 17px/1 var(--sans);letter-spacing:.015em;color:#fff}
.brand-wordmark sup{font:800 8px var(--sans);vertical-align:super;margin-left:2px}
.brand-wordmark small{font:500 8px/1 var(--mono);letter-spacing:.1em;color:#d7e1ff}
.brand:hover .brand-mark{transform:rotate(-5deg);transition:transform .25s}
@media(max-width:760px){.brand{gap:8px}.brand-mark{width:39px;height:39px}.brand-wordmark strong{font-size:13px}.brand-wordmark small{font-size:7px;letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){.brand:hover .brand-mark{transform:none}}