/* A tiny postcard at the end of the page. */
.contact{position:relative;padding-top:105px;padding-bottom:30px}
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(35px,5vw,78px);padding-block:22px 25px}
.contact-copy{position:relative;z-index:1}
.contact .eyebrow{font-size:12px;letter-spacing:.07em;text-transform:lowercase}
.contact h2{position:relative;margin:23px 0 20px;font-size:clamp(60px,6.9vw,92px);line-height:1.04;letter-spacing:-.025em}
.contact h2 em{font-style:normal;color:var(--plum)}
.contact-title-star{position:absolute;right:-58px;bottom:7px;font:49px/1 var(--serif);color:var(--pink);rotate:12deg}
.contact-note{font-size:19px;line-height:1.6;color:var(--muted)}
.contact .contact-email{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:29px;padding:15px 19px;border:1px solid var(--lavender);border-radius:13px;background:var(--soft);box-shadow:inset 0 2px #ffffff50,0 4px 0 color-mix(in srgb,var(--lavender) 65%,var(--paper));font-size:14px;font-weight:700;line-height:1.5;transition:translate .2s,box-shadow .2s,background-color .2s}
.contact .contact-email:hover{background:var(--surface);translate:0 -3px;box-shadow:inset 0 2px #ffffff50,0 7px 0 color-mix(in srgb,var(--lavender) 65%,var(--paper))}
.contact .contact-email:active{translate:0 3px;box-shadow:0 1px 0 var(--lavender)}
.contact-envelope{width:21px;height:21px;flex-shrink:0;transform-origin:50% 70%}
.contact-address{display:block;width:fit-content;max-width:100%;margin-top:17px;color:var(--muted);font-size:12px;overflow-wrap:anywhere;line-height:1.6}
.contact-address:hover{color:var(--plum);text-decoration:underline;text-underline-offset:4px}
.contact .contact-links{display:flex;gap:17px;align-items:center;margin-top:28px;font-size:12px}
.contact-links a{padding-block:9px}
.contact-links a span{margin-left:5px;color:var(--muted)}
.contact-link-heart{font:20px/1 var(--sans);color:var(--plum)}
.contact-postcard-wrap{position:relative;min-width:0;padding:20px 3px 0}
.contact-postcard-wrap::before{content:'';position:absolute;inset:-45px -20px 0;background:radial-gradient(ellipse,color-mix(in srgb,var(--pink) 18%,transparent),transparent 68%);z-index:-1;pointer-events:none}
.contact-postcard{--postcard-tilt:3deg;position:relative;margin:0;background:var(--surface);border:1px solid color-mix(in srgb,var(--lavender) 65%,var(--paper));border-radius:16px;box-shadow:5px 6px 0 var(--soft),8px 10px 0 var(--line),0 20px 50px #57356d0c;rotate:var(--postcard-tilt);transform-origin:50% 65%;transition:rotate .5s ease}
.contact-postcard:hover,.contact-postcard:focus-within{rotate:0deg}
.contact-postcard-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:8px 13px 8px 17px;border-bottom:1px solid var(--line);border-radius:15px 15px 0 0;background:var(--soft);color:var(--muted);font:12px/1.4 var(--pixel)}
.contact-postcard-bar>span{display:flex;align-items:center;gap:8px}
.contact-postcard-bar i{width:7px;height:7px;background:var(--pink);border:1px solid color-mix(in srgb,var(--plum) 35%,transparent);border-radius:50%}
.contact-gif-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:6px;padding:5px 7px;color:var(--ink);font:11px/1.1 var(--pixel);background:var(--surface);min-height:28px}
.contact-gif-toggle[hidden]{display:none}
.contact-gif-toggle:hover{border-color:var(--lavender)}
.contact-gif-toggle:disabled{cursor:default;opacity:.7}
.contact-picture{margin:12px 12px 0;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--soft);aspect-ratio:16/9}
.contact-gif{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.contact-postcard figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:62px;padding:13px 20px 16px;color:var(--muted);font:13px/1.5 var(--pixel)}
.contact-caption-heart{font:30px/1 var(--sans);color:var(--plum);rotate:-12deg}
.contact-postscript{margin:25px 4px 0;text-align:center;font:12px/1.6 var(--pixel);color:var(--muted)}
.contact-postscript span{display:inline-block;margin-left:5px;font:21px/1 var(--sans);color:var(--plum)}
.contact-float{position:absolute;pointer-events:none;z-index:2;line-height:1;color:var(--plum);animation:contact-drift 4.6s ease-in-out infinite;animation-play-state:paused}
.contact-float-one{left:-28px;top:-22px;font:43px/1 var(--sans);color:var(--plum);rotate:-18deg}
.contact-float-two{right:-20px;top:-15px;font-size:38px;color:var(--plum);animation-delay:-1.4s}
.contact-float-three{left:-22px;bottom:56px;font-size:23px;color:var(--plum);animation-delay:-2.8s}
.contact.is-in-view .contact-float{animation-play-state:running}
.contact footer{margin-top:85px;padding-top:24px;align-items:center;line-height:1.7}
.footer-heart{display:inline-block;color:var(--plum);font-family:var(--sans);font-size:15px;vertical-align:-1px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes contact-drift{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes contact-envelope-wiggle{0%,100%{rotate:0deg}25%{rotate:-12deg}55%{rotate:10deg}80%{rotate:-4deg}}
@media(prefers-reduced-motion:no-preference){
  html:not(.quiet) .contact-email:hover .contact-envelope,html:not(.quiet) .contact-email:focus-visible .contact-envelope{animation:contact-envelope-wiggle .65s ease}
}
@media(max-width:1000px) and (min-width:651px){
  .contact-layout{grid-template-columns:1fr;gap:38px;max-width:600px;margin-inline:auto}
  .contact-copy{text-align:center}
  .contact h2{margin-inline:auto}
  .contact h2 br{display:none}
  .contact h2 em::before{content:' '}
  .contact-address{margin-inline:auto}
  .contact .contact-links{justify-content:center}
  .contact-postcard-wrap{width:min(100%,490px);margin-inline:auto}
}
@media(max-width:650px){
  .contact{padding-top:65px;padding-bottom:110px}
  .contact-layout{grid-template-columns:1fr;gap:36px;padding-top:8px}
  .contact h2{font-size:clamp(62px,17vw,86px);margin-top:23px}
  .contact-title-star{font-size:42px;right:-52px;bottom:9px}
  .contact-note{font-size:17px}
  .contact .contact-email{font-size:14px;gap:12px;margin-top:24px;padding:14px 17px;min-height:48px}
  .contact .contact-links{margin-top:21px}
  .contact-postcard-wrap{margin-inline:9px;padding-top:14px}
  .contact-postcard{--postcard-tilt:2deg}
  .contact-postcard-bar{font-size:11px;padding-left:12px}
  .contact-postcard figcaption{min-height:56px;padding:11px 15px;font-size:12px}
  .contact-picture{margin:9px 9px 0}
  .contact-float-one{font-size:34px;left:-16px;top:-14px}
  .contact-float-two{font-size:29px;right:-12px;top:-11px}
  .contact-float-three{font-size:20px;left:-17px;bottom:54px}
  .contact-postscript{font-size:11px;margin-top:23px}
  .contact footer{margin-top:45px;gap:18px;font-size:10px;flex-wrap:wrap}
}
.quiet .contact-float,.quiet .contact-envelope{animation:none!important}
.quiet .contact-postcard,.quiet .contact-email{transition:none}
.quiet .contact-postcard:hover,.quiet .contact-postcard:focus-within{rotate:var(--postcard-tilt)}
.quiet .contact .contact-email:hover,.quiet .contact .contact-email:active{translate:0 0}
@media(prefers-reduced-motion:reduce){
  .contact-float,.contact-envelope{animation:none!important}
  .contact-postcard:hover,.contact-postcard:focus-within{rotate:var(--postcard-tilt)}
  .contact .contact-email:hover,.contact .contact-email:active{translate:0 0}
}