@font-face{font-family:Banana;src:url('assets/BananaGrotesk-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Banana;src:url('assets/BananaGrotesk-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:Banana;src:url('assets/BananaGrotesk-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:UglyDave;src:url('assets/UglyDaveAlternates.otf') format('opentype');font-weight:400;font-display:swap}
:root{color-scheme:light;--pink:#d03696;--ink:#232323}
*{box-sizing:border-box}
html,body{margin:0;background:var(--pink);color:var(--ink);font-family:Banana,sans-serif;-webkit-font-smoothing:antialiased}
.page{position:relative;width:100%;max-width:1920px;margin:auto;overflow:hidden;aspect-ratio:1920/1962}
.artboard{position:absolute;width:1920px;height:1962px;transform:scale(var(--scale,1));transform-origin:top left}
.correspondence{display:contents}
.mobile-space{display:none}
.brand{position:absolute;left:117px;top:91px;width:1686px;height:312px;margin:0}
.brand img{display:block;width:100%;height:100%}
.decoration{position:absolute;display:block;pointer-events:none}
.envelope-back{position:absolute;left:517.088867px;top:247px;width:1008.345642px;height:1204.576538px;transform:rotate(5.871878deg);transform-origin:0 0;pointer-events:none}
.envelope-back img{position:absolute;left:-2.172px;top:0;width:1012.69px;height:1207.829px}
.envelope-inside{left:456.089844px;top:310.516113px;width:1008.33606px;height:843.332458px}
.signature-under{left:774.59082px;top:1428.640625px;width:364.817688px;height:74.917915px}
.paper{position:absolute;left:524.718933px;top:366.01709px;width:871.0802px;height:771.469543px;background:white;box-shadow:0 4.117px 4.117px 1.029px rgb(0 0 0 / .95)}
.letter{position:absolute;left:672.102539px;top:433.096344px;width:576.3125px;height:401px;color:#202020;text-align:center;font-size:19.57288px;line-height:26.097172px;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.letter h2{font-family:UglyDave,sans-serif;font-size:35.044292px;line-height:32.454357px;letter-spacing:-1.752215px;font-weight:400;margin:0 0 32.454357px;text-box-trim:trim-start;text-box-edge:cap alphabetic;white-space:pre-wrap}
.letter p{margin:0 0 26.097172px}
.letter p:last-child{margin:0}
.signature{left:846.274109px;top:1038.095459px;width:227.970093px;height:46.815292px}
.envelope-front{left:456.083008px;top:792.604492px;width:1012.69px;height:727.917px}
.stamp{left:1286px;top:399.379059px;width:83.916862px;height:106.620934px;transform:rotate(180deg)}
.signup{position:absolute;left:719.989258px;top:888.962891px;width:480.021484px}
.signup h2{font-size:22.410362px;font-weight:600;line-height:28.97665px;margin:0;text-align:center;white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic}
form{position:absolute;left:0;top:47.309692px;display:grid;grid-template-columns:337.601196px 131.241882px;gap:11.178436px;width:480.021484px}
input,button{border-radius:0;height:54.727428px;font:400 20.848543px/26.957214px Banana,sans-serif;text-align:center;padding:0 10px;appearance:none}
input{width:100%;min-width:0;background:#fff;color:var(--ink);border:1px solid #000}
input::placeholder{color:var(--ink);opacity:1}
button{border:0;background:var(--ink);color:#fff;cursor:pointer}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #202020;outline-offset:5px}
button:hover{background:#383838}
#form-status{grid-column:1/-1;font-size:16px;line-height:20px;text-align:center;margin:0;background:#fff}
#form-status:empty{display:none}
.footer-envelope{left:896.499023px;top:1630.263184px;width:128.00145px;height:71.999794px}
footer p,footer a{position:absolute;font-size:34.197956px;line-height:36.828568px;color:#f3f1ee;margin:0;text-align:center;text-box-trim:trim-both;text-box-edge:cap alphabetic;white-space:nowrap}
footer p{left:733.5px;top:1735.805664px;width:453px}
footer a{left:851.033203px;top:1793.546875px;width:219px;font-weight:700;text-decoration:none;text-underline-position:from-font}
footer a span{text-decoration:underline}
.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}

/* The same letter and original artwork, with readable type on smaller screens. */
@media(max-width:900px){
  .page{aspect-ratio:auto;overflow:clip}
  .artboard{position:relative;width:100%;height:auto;transform:none;padding:32px 0 56px}
  .brand{position:relative;left:auto;top:auto;width:calc(100% - 32px);height:auto;margin:0 auto}
  .brand img{height:auto}
  .correspondence{--envelope-width:min(600px,calc(100vw - 32px));position:relative;isolation:isolate;display:flex;flex-direction:column;width:var(--envelope-width);margin:-8px auto 0;padding:96px 28px calc(var(--envelope-width)*.719 - 46px)}
  .paper{z-index:-1;left:10px;top:24px;width:calc(100% - 20px);height:auto;bottom:calc(var(--envelope-width)*.35);box-shadow:0 2px 3px rgb(0 0 0 / .6)}
  .envelope-back{z-index:-3;left:6%;top:auto;bottom:0;width:94%;height:auto;aspect-ratio:1008.345642/1204.576538;transform-origin:50% 50%}
  .envelope-back img{left:-.22%;top:0;width:100.44%;height:100.27%}
  .envelope-inside{z-index:-2;left:0;top:auto;bottom:calc(var(--envelope-width)*.2);width:100%;height:auto}
  .signature-under{left:32%;top:auto;bottom:12px;width:36%;height:auto;z-index:-2}
  .letter{position:relative;left:auto;top:auto;width:100%;height:auto;font-size:16px;line-height:23px;text-box-trim:none}
  .letter h2{font-size:25px;line-height:27px;letter-spacing:-1.25px;margin:0 0 24px;white-space:normal;text-box-trim:none}
  .letter p{margin-bottom:20px}
  .letter p br{display:none}
  .mobile-space{display:inline}
  .stamp{left:auto;right:24px;top:40px;width:32px;height:auto}
  .signup{position:relative;left:auto;top:auto;width:100%;order:1;margin-top:28px}
  .signup h2{font-size:17px;line-height:22px;white-space:normal;text-box-trim:none}
  form{position:relative;left:auto;top:auto;width:100%;margin-top:16px;grid-template-columns:minmax(0,1fr) 76px;gap:8px}
  input,button{height:46px;font-size:16px;line-height:22px;padding:0 6px}
  #form-status{font-size:14px;line-height:19px;padding:4px 0}
  .signature{position:relative;left:auto;top:auto;order:2;width:150px;height:auto;margin:28px auto 0}
  .envelope-front{z-index:1;left:0;top:auto;bottom:0;width:100%;height:auto}
  footer{position:relative;display:flex;flex-direction:column;align-items:center;margin:52px 16px 0;gap:20px}
  .footer-envelope{position:static;width:70px;height:auto}
  footer p,footer a{position:static;width:auto;font-size:22px;line-height:28px;white-space:normal;text-box-trim:none}
  footer a{min-height:44px;display:inline-flex;align-items:center}
}
@media(min-width:600px) and (max-width:900px){
  .artboard{padding-top:40px}
  .brand{max-width:780px}
  .correspondence{padding-left:62px;padding-right:62px;margin-top:-16px}
  .letter{font-size:18px;line-height:26px}
  .letter h2{font-size:30px;line-height:32px}
  .signup h2{font-size:20px;line-height:26px}
  form{grid-template-columns:minmax(0,1fr) 100px}
}