@font-face{font-family:"Space Grotesk";src:url("../fonts/SpaceGrotesk-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--black:#151515;--pink:#F0B7C6;--orange:#FF5C28;--stone:#C5C0B8}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{background:var(--black);color-scheme:dark}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--black);color:var(--pink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(3rem,8vh,6rem) clamp(1.5rem,5vw,4rem) 2rem}
.hold{display:flex;flex-direction:column;align-items:center;text-align:center;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.wordmark{display:block;width:clamp(200px,24vw,320px);height:auto;margin-bottom:clamp(2.5rem,6vh,4rem)}
h1{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:500;font-size:clamp(2.75rem,8.4vw,7.5rem);line-height:1.02;letter-spacing:-.035em;color:var(--pink);white-space:nowrap}
.last{color:var(--orange)}
.dot{color:var(--orange)}
.mail{display:inline-block;margin-top:clamp(2.25rem,5vh,3.25rem);font-size:clamp(1rem,1.3vw,1.125rem);font-weight:450;letter-spacing:.01em;color:var(--pink);text-decoration:none;padding:.35em .1em;border-bottom:1px solid rgba(240,183,198,.45);transition:border-color .2s ease,color .2s ease}
.mail:hover{border-bottom-color:var(--pink);color:#fff3f6}
.mail:focus-visible{outline:2px solid var(--pink);outline-offset:6px;border-radius:2px}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem clamp(1.5rem,5vw,4rem) 1.75rem;font-size:.8125rem;letter-spacing:.02em;color:var(--stone)}
.foot strong{font-weight:600;color:var(--stone)}
/* variant: open frame */
.framed{position:relative;padding:clamp(2.75rem,6vw,5rem) clamp(1.75rem,6vw,5.5rem)}
.framed::before,.framed::after{content:"";position:absolute;pointer-events:none;border:0 solid var(--pink)}
.framed::before{left:0;top:0;width:68%;height:100%;border-top-width:2px;border-left-width:2px}
.framed::after{right:0;bottom:0;width:100%;height:58%;border-bottom-width:2px;border-right-width:2px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:520px){.foot{flex-direction:column;align-items:center;text-align:center;gap:.35rem}}
@media (prefers-reduced-motion:reduce){.hold{animation:none}.mail{transition:none}}