/* Sylwia's approved welcome copy; retain original interaction hooks. */
.arrival #welcome-title.welcome-message{max-width:1080px;width:100%;font-size:clamp(44px,6.3vw,92px);line-height:1.1;letter-spacing:-.045em;text-wrap:balance;margin-inline:auto}
.arrival #welcome-title .welcome-opening{display:block;font:600 .55em/1.25 Fredoka,sans-serif;letter-spacing:-.025em;margin:0 0 12px}
.welcome-colour,.welcome-ending{display:block}
.arrival #welcome-title .welcome-colour{color:var(--pink)}
.arrival #welcome-title .smile{font:inherit;color:var(--teal);letter-spacing:inherit;line-height:inherit;vertical-align:baseline}
.arrival .sunshine-name{white-space:nowrap}
.sunshine-lettering #welcome-title .smile{color:transparent;background:inherit;background-clip:text;-webkit-background-clip:text}
.arrival.is-smiling .smile-letters>span:last-child{transform:translateY(-4px) rotate(10deg)}
.arrival-inner{padding-top:30px;padding-bottom:35px}
.arrival .smile-note{margin-top:23px}
@media(max-width:650px){
 .arrival #welcome-title.welcome-message{font-size:clamp(37px,8.6vw,56px);max-width:570px;line-height:1.16}
 .arrival #welcome-title .welcome-opening{font-size:.64em;margin-bottom:14px}
 .arrival #welcome-title .welcome-colour{max-width:10em;margin-inline:auto}
 .arrival #welcome-title .welcome-ending{max-width:9em;margin-inline:auto;margin-top:5px}
 .arrival .smile-note{margin-top:23px}
}
@media(max-height:700px) and (min-width:651px){.arrival #welcome-title.welcome-message{font-size:clamp(44px,5vw,72px)}.arrival .smile-note{margin-top:14px}}

/* A personal, handwritten invitation, with a generous touch target. */
.about-copy .quiet-link{display:table;position:relative;font:400 clamp(27px,2.6vw,35px)/1.2 'Caveat Brush',cursive;color:var(--pink);padding:10px 4px 13px;margin-top:20px;min-height:44px;text-decoration:none;border:0}
.about-copy .quiet-link:after{content:'';position:absolute;left:3px;right:6px;bottom:4px;height:3px;background:currentColor;border-radius:70% 30% 55% 45%;transform:rotate(-1.4deg);opacity:.65;transition:transform .2s,opacity .2s}
.about-copy .quiet-link:hover:after,.about-copy .quiet-link:focus-visible:after{transform:rotate(.5deg) scaleX(1.03);opacity:1}
.about-copy .quiet-link:focus-visible{outline:3px solid var(--teal);outline-offset:5px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.about-copy .quiet-link:after{transition:none}}