@font-face { font-family: 'Letter Serif'; src: url('/coming-soon/assets/cormorant-garamond-latin.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
html:has(.letter-dialog[open]),body.letter-open { overflow: hidden; }
.letter-dialog {
  --paper: #eee0bd; --paper-ink: #342a20; --paper-muted: #6c5d49;
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--paper-ink); overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: none;
}
.letter-dialog:not([open]) { display: none; }
.letter-dialog::backdrop {
  background: rgb(5 5 7 / 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: background .8s ease,backdrop-filter .85s ease,-webkit-backdrop-filter .85s ease;
}
.letter-dialog.is-visible::backdrop { background: rgb(5 5 7 / .39); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.letter-dialog.is-closing::backdrop { transition-duration: .4s; }
.letter-stage { min-height: 100%; padding: 28px 32px; display: grid; place-items: center; perspective: 1600px; }
.letter-paper {
  position: relative; isolation: isolate; width: min(100%,900px); min-width: 0;
  padding: 40px clamp(30px,6vw,76px) 31px;
  background: transparent; border-radius: 0;
  box-shadow: none; filter: drop-shadow(0 28px 34px rgb(0 0 0 / .32)) drop-shadow(0 3px 2px rgb(0 0 0 / .32));
  transform-origin: 50% 82%; transform: translate3d(0,70vh,-100px) rotateX(24deg) rotateZ(-5deg);
  opacity: 0; will-change: transform,opacity;
  transition: transform .9s cubic-bezier(.17,.86,.25,1),opacity .4s ease;
}
.letter-paper::before {
  content: ''; position: absolute; inset: -12px -10px; z-index: -1; pointer-events: none;
  background: url('/assets/contact/aged-paper-v1.webp') center/100% 100% no-repeat;
}
.letter-dialog.is-visible .letter-paper { transform: translate3d(0,0,0) rotateX(0deg) rotateZ(-.35deg); opacity: 1; }
.letter-dialog.is-closing .letter-paper { transform: translate3d(0,20vh,-40px) rotateX(-8deg) rotateZ(2deg); opacity: 0; transition-duration: .45s,.3s; }
.letter-compose { position: relative; margin: 0; }
.letter-dateline { display: flex; justify-content: flex-end; margin-bottom: 14px; font: 400 12px/1.5 'General Sans',sans-serif; letter-spacing: -.01em; color: var(--paper-muted); }
.letter-address { border: 0; padding: 0; }
.letter-row { display: grid; grid-template-columns: 43px minmax(0,1fr); align-items: baseline; min-width: 0; gap: 10px; font: 400 15px/1.6 'General Sans',sans-serif; letter-spacing: -.015em; }
.letter-row>label,.letter-row>span:first-child { color: var(--paper-muted); }
.letter-row+.letter-row { margin-top: 4px; }
.letter-field { min-width: 0; }
.letter-dialog input,.letter-dialog textarea { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--paper-ink); box-shadow: none; }
.letter-row input { font: inherit; line-height: inherit; min-height: 28px; }
.letter-dialog input::placeholder,.letter-dialog textarea::placeholder { color: #77664f; opacity: 1; }
.letter-dialog input:focus-visible { box-shadow: 0 1px 0 rgb(45 44 35 / .5); }
.letter-dialog input[aria-invalid=true] { box-shadow: 0 1px 0 #815446; }
.letter-dialog input:disabled,.letter-dialog textarea:disabled { opacity: .58; }
.letter-greeting { margin: 20px 0 12px; font: 400 36px/1.1 'Letter Serif',Georgia,serif; letter-spacing: -.025em; }
.letter-dialog textarea { display: block; height: 148px; min-height: 148px; max-height: 46vh; resize: none; font: 400 25px/1.48 'Letter Serif',Georgia,serif; letter-spacing: -.005em; }
.letter-word-count { display: block; margin-top: 5px; text-align: right; color: var(--paper-muted); font: 400 11px/1.5 'General Sans',sans-serif; }
.letter-word-count[data-over-limit=true] { color: #815446; }
.letter-dialog textarea:focus-visible { outline: 1px solid rgb(80 73 49 / .2); outline-offset: 7px; }
.letter-signoff { display: flex; flex-direction: column; align-items: flex-start; margin-top: 14px; font: 400 26px/1.3 'Letter Serif',Georgia,serif; letter-spacing: -.025em; }
.letter-signoff input { width: min(100%,310px); margin-top: 7px; min-height: 36px; font: 400 25px/1.35 'Letter Serif',Georgia,serif; }
.letter-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding-top: 12px; border: 0; }
.letter-send { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 14px; min-height: 43px; padding: 8px 0; border: 0; border-bottom: 1px solid rgb(52 42 32 / .42); border-radius: 0; background: transparent; color: var(--paper-ink); font: 400 15px/1.4 'General Sans',sans-serif; letter-spacing: -.015em; transition: border-color .2s,transform .2s; }
.letter-send:hover { border-color: var(--paper-ink); transform: translateY(-1px); }
.letter-send:active { transform: translateY(1px); }
.letter-send:disabled { cursor: wait; opacity: .6; transform: none; }
.letter-feedback { margin: 0; color: #6c5146; max-width: 30ch; font: 400 13px/1.5 'General Sans',sans-serif; letter-spacing: -.015em; }
.letter-field-error { display: block; color: #815446; font: 400 12px/1.5 'General Sans',sans-serif; letter-spacing: -.01em; }
.letter-field-error:empty { display: none; }
.letter-mail-fallback { display: block; margin-top: 17px; text-align: right; font: 400 13px/1.5 'General Sans',sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.letter-mail-fallback[hidden],.letter-receipt[hidden],.letter-compose[hidden] { display: none; }
.letter-close { position: fixed; z-index: 5; top: 22px; right: 25px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / .3); border-radius: 50%; background: rgb(15 15 15 / .3); color: #fff; opacity: 0; transition: opacity .3s,color .2s,background .2s; }
.letter-dialog.is-visible .letter-close { opacity: 1; }
.letter-close:hover { background: rgb(255 255 255 / .12); }
.letter-dialog button:focus-visible,.letter-mail-fallback:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.letter-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.letter-receipt { display: flex; min-height: 350px; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 25px 0 40px; }
.letter-envelope { width: 63px; height: 48px; color: #88816e; margin-bottom: 26px; }
.letter-receipt h3 { margin: 0; font: 400 43px/1.08 'Letter Serif',Georgia,serif; letter-spacing: -.035em; }
.letter-receipt p { margin: 24px 0 0; max-width: 32ch; color: var(--paper-muted); font: 400 15px/1.65 'General Sans',sans-serif; letter-spacing: -.015em; }
.letter-receipt [data-letter-reply] { color: var(--paper-ink); overflow-wrap: anywhere; }
.letter-receipt-close { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 7px 0; border: 0; border-bottom: 1px solid rgb(70 62 39 / .3); background: transparent; font: 400 14px/1.5 'General Sans',sans-serif; }
@media(max-width:760px) {
  .letter-stage { padding: 68px 14px 26px; }
  .letter-paper { padding: 29px 27px 26px; }
  .letter-close { top: 13px; right: 17px; width: 41px; height: 41px; }
  .letter-dateline { margin-bottom: 23px; }
  .letter-row { grid-template-columns: 33px minmax(0,1fr); gap: 8px; font-size: 14px; }
  .letter-greeting { font-size: 35px; margin-top: 28px; }
  .letter-dialog textarea { height: 188px; min-height: 188px; font-size: 24px; }
  .letter-actions { align-items: flex-start; margin-top: 30px; gap: 14px; }
  .letter-feedback { font-size: 12px; }
  .letter-send { min-height: 44px; padding: 8px 0; gap: 10px; font-size: 14px; }
  .letter-dialog.is-visible .letter-paper { transform: none; }
}
@media(min-width:761px) and (max-height:760px) {
  .letter-stage { padding-block: 20px; }
  .letter-paper { padding-block: 28px 24px; }
  .letter-dateline { margin-bottom: 14px; }
  .letter-address { padding: 0; }
  .letter-row input { min-height: 24px; }
  .letter-greeting { margin-block: 20px 12px; font-size: 33px; }
  .letter-dialog textarea { height: 140px; min-height: 140px; font-size: 23px; line-height: 1.4; }
  .letter-signoff { margin-top: 16px; font-size: 24px; }
  .letter-signoff input { font-size: 23px; min-height: 31px; }
  .letter-actions { margin-top: 18px; padding-top: 14px; }
  .letter-send { min-height: 45px; }
}
@media(max-width:350px) {
  .letter-paper { padding-inline: 21px; }
  .letter-stage { padding-inline: 10px; }
  .letter-row { font-size: 13px; grid-template-columns: 30px minmax(0,1fr); gap: 6px; }
  .letter-actions { flex-wrap: wrap; }
  .letter-feedback:empty { display: none; }
  .letter-send { margin-left: auto; }
}
@media(prefers-reduced-motion:reduce) {
  .letter-paper,.letter-dialog::backdrop,.letter-close,.letter-send { transition: none; }
  .letter-paper,.letter-dialog.is-closing .letter-paper { transform: none; }
}
