@font-face{font-family:Caveat;src:url("assets/caveat-latin.woff") format("woff");font-style:normal;font-weight:500;font-display:swap}
:root{--ink:#203e69;--paper:#f4eddf;--muted:#74818e}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;min-height:100svh;padding:clamp(24px,5vh,60px) 24px;display:grid;place-items:center;background:radial-gradient(ellipse at 12% 5%,#315c8c 0,transparent 62%),linear-gradient(145deg,#1d426e,#112b49);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.scene{width:min(1080px,100%)}
.postcard{position:relative;perspective:1800px;transform:rotate(-.5deg)}
.card-inner{position:relative;transform-style:preserve-3d}
.postcard-front,.postcard-note{background:var(--paper) url("assets/paper.svg") repeat;border:1px solid #d4c6a9;border-radius:2px;box-shadow:0 26px 65px #03162e66,0 3px 8px #07162d33;overflow:hidden}
.postcard-front img{display:block;width:100%;height:auto}
.postcard-note{position:relative;display:grid;grid-template-columns:1.08fr 1fr;gap:38px;padding:42px 46px 52px;min-height:620px}
.postcard-note:before{content:"";position:absolute;inset:6px;border:1px solid #fff7;pointer-events:none}
.note-side{position:relative;display:flex;flex-direction:column;padding-right:38px;min-width:0}
.note-side:after{content:"";position:absolute;right:0;top:0;bottom:0;width:1.3px;background:#526583a6;transform:rotate(.15deg)}
.card-label{font-size:8px;text-transform:uppercase;letter-spacing:2.2px;margin:0;color:#6f7d89}
.handwritten{margin-top:32px;font:500 clamp(26px,2.6vw,31px)/1.27 Caveat,"Segoe Print",cursive;transform:rotate(-.35deg)}
.handwritten p{margin:0 0 22px}
.ink-link{color:var(--ink);font-weight:700;text-decoration:none;background:url("assets/ink-link-underline.svg") left bottom/100% .2em no-repeat;padding-bottom:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ink-link:hover{color:#365c89}
.is-ready .ink-link{background:none;font-weight:500}
.is-ready .ink-link .ink-word{position:relative}
.is-ready .ink-link .ink-word:after{content:"";position:absolute;left:0;bottom:-.1em;width:calc(100% + .25em);height:.2em;background:url("assets/ink-link-underline.svg") left center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);pointer-events:none}
.is-ready .ink-link .ink-word:last-child:after{width:100%}
.is-ready.is-writing .ink-link .ink-word:after{animation:underline-word var(--stroke-duration) var(--stroke-at) linear both}
.is-ready.is-writing .ink-link .ink-character{animation:write-ink .14s var(--at) ease-out both,bolden-ink .12s var(--bold-at) steps(1,end) forwards}
.is-ready.is-complete .ink-link .ink-character{font-weight:700;animation:none}
.is-ready.is-complete .ink-link .ink-word:after,.is-ready .ink-link:focus-visible .ink-word:after{animation:none;clip-path:inset(0)}
@keyframes underline-word{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes bolden-ink{from{font-weight:500}to{font-weight:700}}
.handwritten .sign-off{margin-bottom:4px}
.postscript{font:500 26px/1.3 Caveat,"Segoe Print",cursive;margin:0 0 24px;transform:rotate(-.35deg)}
.signature{width:max-content;max-width:100%;margin:0 12px 25px auto;transform:rotate(-5deg)}
.signature-name{display:block;font:500 46px/1.15 Caveat,"Segoe Print",cursive;letter-spacing:-1px;padding:0 7px 0 3px}
.signature-stroke{display:block;width:100%;height:15px;margin-top:-7px;opacity:.72;overflow:visible}
.signature-stroke path{stroke-dasharray:1.01;stroke-dashoffset:0}
.edition{font-size:9px;letter-spacing:.4px;color:#818b92;margin-top:auto}
.address-side{display:flex;flex-direction:column;min-width:0}
.postage{height:265px;position:relative;flex-shrink:0}
.stamp{position:absolute;right:3px;top:0;width:152px;padding:12px;background:#fdf8e9;color:var(--ink);transform:rotate(5deg);mask:linear-gradient(#000 0 0) center/calc(100% - 9px) calc(100% - 9px) no-repeat,radial-gradient(circle at 4px 4px,transparent 3px,#000 3.6px) -4px -4px/8px 8px;-webkit-mask:linear-gradient(#000 0 0) center/calc(100% - 9px) calc(100% - 9px) no-repeat,radial-gradient(circle at 4px 4px,transparent 3px,#000 3.6px) -4px -4px/8px 8px}
.stamp{transform-origin:top right;transform:rotate(5deg) scale(1.15)}
.stamp-frame{display:block;padding:5px;border:1.3px solid #3f587c;background:#e1e4dc}
.stamp-title,.stamp-caption{display:block;text-align:center;text-transform:uppercase;font:500 8px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:1.3px}
.stamp-title{margin:2px 0 5px}
.stamp-caption{font-size:6px;letter-spacing:1px;margin-top:5px}
.stamp-portrait{display:block;width:100%;height:144px;background:#eee8d8;border:1px solid #7987a25e;mix-blend-mode:multiply}
.postmark{pointer-events:none;position:absolute;width:330px;max-width:100%;right:-5px;top:81px;color:#34485d;opacity:.8;transform:rotate(-8deg);overflow:visible;mix-blend-mode:multiply}
.postmark-link{pointer-events:all;cursor:pointer}
.is-ready:not(.is-complete) .postmark-link{pointer-events:none}
.is-ready.is-writing .postmark-link{animation:stamp-link-ready 1ms calc(var(--postmark-at) + .32s) forwards}
@keyframes stamp-link-ready{to{pointer-events:all}}
.postal-address{margin-top:auto;padding-bottom:40px}
.address-row{margin:0;min-height:68px;display:flex;align-items:center;font:500 clamp(25px,2.6vw,32px)/1.2 Caveat,"Segoe Print",cursive;border-bottom:1.2px solid #53678399;padding:13px 0 10px;white-space:nowrap}
.address-email{font-size:clamp(23px,2.5vw,30px)}
.address-row a{position:relative;display:block;color:inherit;text-decoration:none;max-width:100%}
.address-row a:hover{color:#53729b}
.creator-credit{display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;margin:23px 0 0;color:#526b88;font:400 9px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:.25px}
.creator-credit>span:first-child{text-transform:uppercase}
.credit-arrow{font-size:16px}
.creator-credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.creator-credit img{display:block;width:92px;height:auto}
.is-ready .creator-credit{opacity:0}
.is-ready.is-writing .creator-credit{animation:quiet-ink .55s var(--credit-at) both}
.is-ready.is-complete .creator-credit,.is-ready .creator-credit:focus-within{opacity:1;animation:none}
.postal-domain{position:absolute;right:45px;bottom:21px;font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.6px;color:var(--muted)}
.card-tools{display:none;align-items:center;justify-content:flex-end;gap:16px;padding:21px 5px 0;color:#d5e0edb3;min-height:63px}
.is-ready~.card-tools{display:flex}
.tool-actions{display:flex;gap:22px;align-items:center}
.card-tools button{font:400 12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#e5edf5;background:none;border:0;padding:9px 0;min-height:44px;cursor:pointer}
.card-tools button span{display:inline-block;font-size:21px;margin-left:8px;vertical-align:-2px}
#skip-intro{font-size:10px;color:#b5c7da;text-decoration:underline;text-underline-offset:4px}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:fixed;top:12px;left:12px;background:var(--paper);padding:10px 16px;z-index:10;color:var(--ink)}
[hidden]{display:none!important}
/* JS enables a real two-sided card; without JS both sides remain readable. */
.is-ready .card-inner{height:var(--card-height);transition:transform 1.1s cubic-bezier(.4,.05,.25,1),height 1.1s cubic-bezier(.4,.05,.25,1)}
.is-ready .postcard-front,.is-ready .postcard-note{position:absolute;top:0;left:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.is-ready .postcard-front{height:100%;transform:rotateY(0deg);z-index:2}
.is-ready .postcard-front img{height:100%;object-fit:cover}
.is-ready .postcard-note{transform:rotateY(180deg);z-index:1}
.is-ready.is-back .card-inner{transform:rotateY(-180deg)}
.is-ready .ink-word{display:inline-block;white-space:nowrap}
.is-ready .ink-character{display:inline-block;opacity:0}
.is-ready .paper-detail,.is-ready .stamp,.is-ready .postmark,.is-ready .signature-stroke{opacity:0}
.is-ready.is-writing .ink-character{animation:write-ink .14s var(--at) ease-out both}
.is-ready.is-writing .paper-detail{animation:quiet-ink .7s var(--detail-at,.12s) both}
.is-ready.is-writing .signature-stroke{animation:quiet-ink .1s var(--signature-end) both}
.is-ready.is-writing .signature-stroke path{animation:draw-swash .45s var(--signature-end) ease-out both}
.is-ready.is-writing .stamp{animation:place-stamp .65s var(--stamp-at) cubic-bezier(.2,.7,.3,1) both}
.is-ready.is-writing .postmark{animation:press-mark .32s var(--postmark-at) ease-out both}
.is-ready.is-complete .ink-character,.is-ready.is-complete .paper-detail,.is-ready.is-complete .stamp,.is-ready.is-complete .postmark,.is-ready.is-complete .signature-stroke{animation:none;opacity:1}
.is-ready.is-complete .postmark{opacity:.8}
.is-ready.is-complete .signature-stroke path{animation:none;stroke-dashoffset:0}
@keyframes write-ink{from{opacity:0;clip-path:inset(0 100% 0 -20%)}to{opacity:1;clip-path:inset(0 -20% 0 -20%)}}
@keyframes quiet-ink{from{opacity:0}to{opacity:1}}
@keyframes draw-swash{from{stroke-dashoffset:1.01}to{stroke-dashoffset:0}}
@keyframes place-stamp{from{opacity:0;transform:translateY(-13px) rotate(10deg) scale(1.22)}to{opacity:1;transform:translateY(0) rotate(5deg) scale(1.15)}}
@keyframes press-mark{0%{opacity:0;transform:rotate(-8deg) scale(1.14)}70%{opacity:.95;transform:rotate(-8deg) scale(.99)}100%{opacity:.8;transform:rotate(-8deg) scale(1)}}
@media(max-width:900px) and (min-width:701px){
 .postcard-note{padding:32px 30px 48px;gap:26px;min-height:620px}
 .note-side{padding-right:26px}.handwritten{font-size:28px}.signature-name{font-size:40px}.postage{height:268px}.postmark{width:290px}.address-row{font-size:27px}.address-email{font-size:25px}
}
@media(max-width:700px), (hover:none) and (pointer:coarse){
 /* Equal top/bottom clearance centres the card itself, including browser-bar changes. */
 body{--screen-space:max(88px,env(safe-area-inset-top,0px),env(safe-area-inset-bottom,0px));min-height:100svh;min-height:100dvh;padding:var(--screen-space) 16px;display:grid;place-items:center}
 .scene{position:relative;width:min(620px,100%)}
 .postcard{transform:none;perspective:none}
 /* WebKit: keep the active face in normal flow, without a hidden 180-degree layer. */
 .is-ready .card-inner,.is-ready.is-back .card-inner{height:auto;transform:none;transform-style:flat;transition:transform .42s cubic-bezier(.4,.05,.25,1)}
 .is-ready .postcard-front,.is-ready .postcard-note{position:relative;transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}
 .is-ready .postcard-front{height:auto;display:block}
 .is-ready .postcard-front img{height:auto;object-fit:contain}
 .is-ready .postcard-note{display:none}
 .is-ready.is-back .postcard-front{display:none}
 .is-ready.is-back .postcard-note{display:grid}
 .is-ready.is-mobile-turning .card-inner{transform:scaleX(.025)}
 .postcard-note{grid-template-columns:1fr;gap:0;padding:24px 27px 48px;min-height:0}
 .address-side{display:contents}.postage{grid-row:1;height:202px}.stamp{width:116px;right:3px;padding:10px}.stamp-portrait{height:109px}.stamp-title{font-size:7px}.stamp-caption{font-size:5px}.postmark{width:280px;max-width:100%;top:64px;right:-7px}
 .postal-address{grid-row:3;padding:22px 0 18px;margin:0;border-top:1px solid #52658370}.address-row{min-height:57px;font-size:30px;padding:12px 0 8px}.address-email{font-size:29px}.address-social{font-size:29px}
 .creator-credit{justify-content:center;text-align:center;width:100%}
 .note-side{grid-row:2;padding:15px 0 0}.note-side:after{display:none}
 .card-label{font-size:7px;letter-spacing:1.7px}.handwritten{font-size:29px;line-height:1.25;margin-top:23px}.handwritten p{margin-bottom:21px}.signature{margin:0 4px 24px auto}.signature-name{font-size:42px}.edition{font-size:8px}.postal-domain{right:29px;bottom:18px;font-size:8px}
 .card-tools{position:absolute;top:100%;left:0;right:0;padding-top:14px;gap:10px;align-items:flex-start}.tool-actions{gap:5px;flex-direction:column;align-items:flex-end}.card-tools button{font-size:11px;min-height:36px;padding:6px 0}.card-tools button span{font-size:19px}#skip-intro{font-size:9px;order:2}
}
@media(max-width:360px){body{padding-inline:12px}.postcard-note{padding-inline:22px}.handwritten{font-size:27px}.address-email,.address-social{font-size:26px}}
@media(prefers-reduced-motion:reduce){
 .is-ready .postmark-link{pointer-events:all}
 .is-ready .ink-link .ink-word:after{clip-path:inset(0)}
 .is-ready .ink-link .ink-character{font-weight:700}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .is-ready .ink-character,.is-ready .paper-detail,.is-ready .stamp,.is-ready .postmark,.is-ready .signature-stroke,.is-ready .creator-credit{opacity:1}
 .postcard,.handwritten,.signature{transform:none}
}