:root{--sun: #ffd45c;--ink: #0b3b47;--hibiscus: #c8215f;--surf: #19a7a8;--paper: #fffdf7;--rule: rgba(11, 59, 71, .3);--edge: 14px}@property --curl{syntax: "<length>"; inherits: true; initial-value: 56px;}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:6vh 24px;font:400 1rem/1.5 Figtree,sans-serif;color:var(--ink);background:var(--ink) url(/main_bg.jpg) center / cover no-repeat;overflow-x:hidden}.postcard{width:min(1000px,100%,125vh);perspective:2400px;filter:drop-shadow(0 28px 28px rgba(4,34,44,.45));transform:rotate(-1.5deg);animation:land .9s cubic-bezier(.2,.8,.2,1) both}@keyframes land{0%{opacity:0;transform:translateY(60px) rotate(-7deg)}}.tilt{transform-style:preserve-3d;transition:transform .4s ease-out}@media(hover:hover)and (prefers-reduced-motion:no-preference){.postcard:not(.flipped) .tilt{transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))}}.inner{display:grid;aspect-ratio:3 / 2;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.7,.2,1)}.flipped .inner{transform:rotateY(180deg)}.face{grid-area:1 / 1;position:relative;overflow:hidden;margin:0;border:var(--edge) solid var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--curl)),calc(100% - var(--curl)) 100%,0 100%);transition:--curl .3s ease}.front:hover,.face:has(.turn:hover,.turn:focus-visible){--curl: 84px}.front{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6%;background:var(--sun);cursor:pointer}.front:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s;pointer-events:none}.front:hover:before{opacity:1}h1{margin:0;font:400 clamp(3rem,11vw,10rem)/.92 "Bowlby One",sans-serif;text-transform:uppercase;letter-spacing:.01em;color:transparent;background:url(/main_bg.jpg) 70% 45% / cover;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:2px var(--ink);filter:drop-shadow(6px 6px 0 var(--ink))}h1 span{display:block}.subtitle{margin:-.15em 0 0 20%;font:400 clamp(2rem,4.8vw,4rem)/1 "Yellowtail",cursive;color:var(--hibiscus);white-space:nowrap;transform:rotate(-5deg)}.turn{position:absolute;right:calc(-1 * var(--edge));bottom:calc(-1 * var(--edge));padding:0 calc(var(--curl) + 6px) calc(var(--edge) + 6px) 12px;border:0;background:none;font:400 1.9rem/1 Yellowtail,cursive;color:var(--ink);cursor:pointer}.turn:after{content:"";position:absolute;right:0;bottom:0;width:var(--curl);height:var(--curl);background:linear-gradient(to bottom right,#e3d8c0,var(--paper) 49.5%,transparent 50%);filter:drop-shadow(-3px -3px 4px rgba(4,34,44,.25))}:focus-visible{outline:3px solid var(--surf);outline-offset:4px}.turn:focus-visible{outline-offset:-6px}.back{display:grid;grid-template-columns:1fr 1fr;padding:36px 40px;background:var(--paper);transform:rotateY(180deg)}.note{align-self:center;margin:0;padding-right:36px;font:400 clamp(2rem,4.2vw,3.6rem)/1.15 "Yellowtail",cursive;color:var(--hibiscus);transform:rotate(-3deg)}.address{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 36px 36px;border-left:1.5px solid var(--rule)}.stamp{position:relative;align-self:flex-end;width:140px;height:168px;padding:7px;background:radial-gradient(circle,transparent 4px,#fff 4.5px) -7px -7px / 14px 14px;transform:rotate(3deg)}.stamp img{display:block;width:100%;height:100%;object-fit:cover;border:6px solid #fff;background:var(--surf)}.postmark{position:absolute;left:-96px;top:52px;width:260px;fill:none;stroke:currentColor;stroke-width:3;opacity:.75;transform:rotate(-12deg);pointer-events:none}.postmark text{fill:currentColor;stroke:none;font-family:Figtree,sans-serif;font-weight:600;text-anchor:middle}.to{align-self:stretch;margin:auto 0 0;font-size:1.15rem;font-weight:600;line-height:2.2rem;background:repeating-linear-gradient(transparent 0 calc(2.2rem - 1.5px),var(--rule) calc(2.2rem - 1.5px) 2.2rem)}.back small{position:absolute;left:40px;bottom:16px;font-size:.8rem;opacity:.6}@media(max-width:860px){:root{--edge: 10px}body{padding:24px 16px}.postcard{transform:none}@keyframes land{0%{opacity:0;transform:translateY(40px)}}.inner{aspect-ratio:auto}.front{min-height:120vw}h1{font-size:17vw}.subtitle{margin-left:6%}.back{grid-template-columns:1fr;padding:24px 24px 48px}.address{padding:0;border:0}.stamp{position:absolute;top:0;right:0;width:100px;height:126px}.postmark{left:-110px;top:36px;width:220px}.note{margin:120px 0 32px;padding:0;font-size:2.4rem}.back small{left:24px;bottom:16px}}@media(prefers-reduced-motion:reduce){.postcard{animation:none}.inner,.face{transition:none}}