@import"https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap";.contact--notepad{background:radial-gradient(circle at 18% 22%,rgba(255,222,145,.25),transparent 58%),radial-gradient(circle at 78% 12%,rgba(255,255,255,.5),transparent 60%),#f3f3f3;padding-top:0;align-items:flex-start;font-family:Patrick Hand,Inter,sans-serif}.contact.contact--notepad{padding:2vh 5vw 4vh;align-items:flex-start}.contact__notepad{position:relative;width:min(88vw,780px);max-width:none;aspect-ratio:5 / 8;background-image:var(--notepad-png);background-image:image-set(var(--notepad-webp-light) type("image/webp"),var(--notepad-webp) type("image/webp"),var(--notepad-png) type("image/png"));background-position:center top;background-size:cover;filter:drop-shadow(0 32px 38px rgba(0,0,0,.28));padding-top:clamp(2rem,5vw,3rem);padding-right:4rem;padding-bottom:clamp(2rem,4vw,3rem);padding-left:clamp(2rem,4vw,3rem);display:flex;align-items:stretch;justify-content:flex-start;overflow:hidden;margin:calc(12vh + 2vmin) clamp(6vw,8vw,90px) 0}.contact__scroll-container{width:100%;flex:1}.contact__note-content{position:relative;width:100%;display:flex;flex-direction:column;height:100%;gap:clamp(1.1rem,1.8vw,1.6rem);padding-top:clamp(10rem,22vh,15rem);justify-content:flex-start;z-index:1}@media (max-width: 640px){.contact__note-content{padding-top:2rem;padding-bottom:clamp(0rem,2vw,1.5rem)}.contact__scroll-container{height:100%;overflow-y:auto;mask-image:linear-gradient(to bottom,black 90%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 90%,transparent 100%)}.contact.contact--notepad{padding:.5rem 1rem 2rem}.contact__notepad{margin:5vh 5vw 6vh;width:min(95vw,480px);aspect-ratio:3 / 4;padding:15vw 1.5rem 5vw;min-height:80vh}}.contact--notepad .contact__intro{text-align:left;gap:.35rem}.contact--notepad .contact__intro h1{font-size:clamp(2rem,4vw,2.5rem);color:#1f1f1f;letter-spacing:-.02em}.contact--notepad .contact__subtext{font-size:1rem;color:#1e1e1ec7}.contact--notepad .field__label{font-size:.9rem;letter-spacing:.08em;color:#2d2305cc}.contact--notepad .field__control{border:none;border-bottom:2px solid rgba(60,40,10,.4);border-radius:0;background:transparent;padding:.5rem 0;font-family:Patrick Hand,Inter,sans-serif;font-size:1.05rem;color:#1d1d1d;transition:border-color .16s ease,box-shadow .16s ease}.contact--notepad .field__control:focus,.contact--notepad .field__control:hover{border-color:#3c280acc;box-shadow:inset 0 -8px #ffebb473;outline:none}.contact--notepad .field__control--area{min-height:8rem;resize:none;line-height:1.6;background-image:linear-gradient(to bottom,transparent 0,transparent 1.5rem,rgba(60,40,10,.12) 1.5rem,rgba(60,40,10,.12) 1.6rem);background-size:100% 1.6rem}.contact__note-footnote{margin:0;font-size:.78rem;text-align:center;color:#000000b3}.contact__note-footnote span{font-weight:600;color:#1f1f1f}.contact--notepad .contact-form__submit{align-self:center;font-family:Patrick Hand,Inter,sans-serif;letter-spacing:.06em;background-color:#f7e7c8;border:1px solid rgba(60,40,10,.4);padding:.8em 1.5em;border-radius:255px 15px 225px/15px 225px 15px 255px;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:transform .1s ease-out,box-shadow .2s ease,background-color .2s ease;will-change:transform;transform-style:preserve-3d;perspective:1000px}.contact--notepad .contact-form__submit:hover{background-color:#fff8e8;box-shadow:0 10px 20px #00000026}.contact--notepad .contact-form__submit:active{transform:scale(.98) translateY(2px)!important;box-shadow:0 2px 4px #0003;background-color:#f0d5a4}
