@font-face{font-family:OnpuriHeroHand;src:url('/letter/hero-hand.ttf') format('truetype');font-weight:400;font-display:swap}
.hero-copy{animation:none!important}.hero h1{font-family:OnpuriHeroHand,OnpuriHand,cursive;font-weight:400;line-height:1.6;letter-spacing:0;font-size:clamp(46px,4.6vw,64px)}
.hero h1>span{width:fit-content;max-width:100%;white-space:nowrap;position:relative;animation:hand-line-in 1.3s ease-out both}.hero h1>span:nth-child(1){animation-delay:.15s}.hero h1>span:nth-child(2){animation-delay:.85s}.hero h1>span:nth-child(3){animation-delay:1.55s}
.hero h1 .accent:after{bottom:.01em;height:3px;left:.08em;width:calc(100% - .15em);z-index:0;transform:rotate(-2deg);background:#e9a745;border-radius:50%}
@keyframes hand-line-in{from{opacity:0;clip-path:inset(0 100% 0 -12%);transform:translateX(-14px)}to{opacity:1;clip-path:inset(0 -5% -15% -12%);transform:none}}
.hero-visual{isolation:isolate}.hero-nurse{position:absolute;right:-15px;bottom:0;width:72%;height:100%;margin:0;z-index:0;pointer-events:none}.hero-nurse img{height:100%;width:100%;object-fit:contain;object-position:right bottom;mask-image:radial-gradient(ellipse 60% 63% at 53% 47%,#000 48%,#000b 66%,transparent 89%);animation:nurse-fade-in 2.8s ease-out .5s both}.hero-nurse figcaption{position:absolute;right:15px;bottom:3px;font-size:11px;line-height:1.5;color:#806e59}
@keyframes nurse-fade-in{from{opacity:0;transform:translateY(13px);filter:blur(3px)}to{opacity:.92;transform:none;filter:blur(0)}}
.hero-visual .mail-scene{width:270px;height:270px;left:25%;bottom:50px;z-index:2}.hero-visual .letter strong{font-size:25px}.hero-visual .letter{padding:16px 18px}.hero-visual .is-open .letter{transform:translateY(-100px) rotate(4deg)}.hero-visual .floating-note{z-index:3}.hero-visual .note-one{top:40px;left:0}.hero-visual .note-two{top:100px;right:0;font-size:14px}.hero-visual .mail-hint{right:auto;left:0;bottom:8px}.hero-visual .visual-orbit{opacity:.4}.hero-visual .plus-one{right:0;bottom:80px}.hero-visual .plus-two{display:none}
.handwritten-bridge{font-family:OnpuriHeroHand,OnpuriHand,cursive;line-height:1.6;transform:rotate(-2deg)}
@media(max-width:1100px) and (min-width:801px){.hero h1{font-size:46px}.hero-visual .mail-scene{width:230px;height:250px}.hero-visual .letter strong{font-size:22px}}
@media(max-width:800px){.hero h1{font-size:clamp(35px,11.4vw,53px);line-height:1.55}.hero-visual{height:425px;margin-top:20px}.hero-nurse{width:74%;height:100%;right:-8px;bottom:0}.hero-visual .mail-scene{width:200px;height:225px;max-width:62%;left:28%;bottom:44px}.hero-visual .letter{padding:12px;height:88%}.hero-visual .letter strong{font-size:20px;line-height:1.35}.hero-visual .letter-footer{font-size:10px}.hero-visual .is-open .letter{transform:translateY(-75px) rotate(4deg)}.hero-visual .note-one{top:10px;left:0;font-size:12px}.hero-visual .note-two{top:60px;right:0;font-size:12px}.hero-visual .mail-hint{font-size:11px;left:0;bottom:10px}.hero-nurse figcaption{font-size:10px;right:3px;bottom:-10px}.feelings .section-heading h2{font-size:clamp(24px,7.1vw,32px)}.about-copy h2{font-size:31px}.handwritten-bridge{font-size:30px}}
@media(max-width:360px){.hero-visual{height:365px}.hero-visual .mail-scene{width:170px;height:200px}.hero-visual .letter strong{font-size:17px}.hero-visual .letter-footer{font-size:9px}.hero-visual .note-two{font-size:10px}.hero-visual .note-one{font-size:11px}.handwritten-bridge{font-size:26px}.about-copy h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.hero h1>span,.hero-nurse img{animation:none!important;opacity:1;transform:none;clip-path:none;filter:none}}
.motion-paused .hero h1>span,.motion-paused .hero-nurse img{animation:none!important;opacity:1;transform:none;clip-path:none;filter:none}
.hero-visual .note-two{top:8px;right:0}.hero-nurse{width:80%;height:108%;right:-25px}
@media(max-width:800px){.hero-nurse{width:80%;height:105%;right:-8px}.hero-visual .note-two{top:0;right:0}.hero-visual .note-one{top:55px}}
/* Free handwritten face, distributed with its SIL Open Font License. */
@font-face{font-family:OnpuriCasualHand;src:url('/letter/yusei-hand.ttf?v=17') format('truetype');font-weight:400;font-display:swap}
:root{--hand:OnpuriCasualHand,cursive}
.hero h1,.handwritten-bridge{font-family:OnpuriCasualHand,cursive}
.hero h1{line-height:1.42;letter-spacing:.015em}.hero h1>span{rotate:-1.5deg}.hero h1 .accent:after{bottom:-.04em}
.handwritten-bridge{line-height:1.5}


.reframe strong{display:inline-block;max-width:100%;line-height:1.5}.reframe-line{display:block;white-space:nowrap}.reframe strong:after{max-width:100%}
@media(max-width:800px){.reframe strong{font-size:clamp(23px,7vw,32px);letter-spacing:0}.reframe{padding-left:16px;padding-right:16px}}
/* Play after the heading is in view and its font is ready. */
.hero h1>span{animation:none;opacity:1;clip-path:none;transform:none}
.hero h1.hero-playing>span{animation:hero-line-reveal 1.35s ease-out both!important;animation-delay:var(--line-delay)!important}
.hero h1>span:nth-child(1){--line-delay:.15s}.hero h1>span:nth-child(2){--line-delay:.95s}.hero h1>span:nth-child(3){--line-delay:1.75s}
@keyframes hero-line-reveal{from{opacity:0;clip-path:inset(0 100% -20% -15%);transform:translateX(-12px)}to{opacity:1;clip-path:inset(0 -8% -20% -15%);transform:none}}
@keyframes hero-line-soft-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero h1.hero-playing>span{animation-name:hero-line-soft-fade!important;transform:none;clip-path:none;animation-duration:1s!important}}
.motion-paused .hero h1.hero-playing>span{animation:none!important;opacity:1;transform:none;clip-path:none}

.worried-nurse{width:calc(100% - 48px);max-width:680px;margin:24px auto 0}.worried-nurse img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:12px;mask-image:radial-gradient(ellipse 75% 80% at 50% 45%,#000 45%,#000e 63%,transparent 92%)}.worried-nurse figcaption{text-align:right;font-size:11px;color:var(--muted);line-height:1.5;margin-top:-12px;position:relative}.feelings .worry-notes{margin-top:24px}@media(max-width:800px){.worried-nurse{width:calc(100% - 28px);max-width:480px;margin-top:14px}.worried-nurse img{aspect-ratio:3/2;object-position:65% center}.worried-nurse figcaption{font-size:10px;margin-top:-5px;margin-right:10px}.feelings .worry-notes{margin-top:24px}}

.art-caption{justify-content:center}.art-caption p{text-align:center;margin:0}
.section-heading>p:last-child br.explicit-break{display:initial}
.reframe-line:first-child{text-align:left}

/* Quiet, equally sized thoughts introduce the letter; the message is the focal point. */
.hero-visual .floating-note{width:45%;max-width:230px;padding:10px;font-size:18px;font-weight:500;line-height:1.55;letter-spacing:0;text-align:center;border:0;border-radius:4px;box-shadow:0 3px 10px #8258220c;color:#472b22}
.hero-visual .floating-note>span{display:block;white-space:nowrap}
.hero-visual .note-one{top:4px;left:0;transform:rotate(-2deg);background:#ffe8b8}
.hero-visual .note-two{top:4px;right:0;transform:rotate(2deg);background:#fffaf0}
@media(max-width:800px){.hero-visual .floating-note{font-size:clamp(14px,4vw,17px)}}
@media(max-width:360px){.hero-visual .floating-note{font-size:13px;padding:10px 8px}}

/* Keep every line visible above the envelope lip, with one handwritten message. */
.hero-visual{height:570px}
.hero-visual .letter{width:86%;left:7%;height:296px;padding:16px 18px}
.hero-visual .letter-tag{font-size:13px;line-height:1.4;padding-bottom:8px}
.hero-visual .letter strong{font-size:27px;margin-top:12px;line-height:1.35;letter-spacing:0;white-space:nowrap}
.hero-visual .letter-footer{font-family:var(--hand);font-size:13px;font-weight:400;line-height:1.5;letter-spacing:0;margin-top:10px}
.hero-visual .letter-footer>span{display:block;white-space:nowrap}
@media(min-width:801px) and (max-width:1100px){.hero-visual .floating-note{font-size:17px}.hero-visual .letter strong{font-size:22px}}
@media(max-width:800px){
 .hero-visual{height:495px}
 .hero-visual .mail-scene{width:232px;max-width:72%;left:34%}
 .hero-visual .letter{height:284px;padding:12px}
 .hero-visual .letter-tag{font-size:12px}
 .hero-visual .letter strong{font-size:24px;margin-top:10px}
 .hero-nurse{right:-24px}
}
@media(max-width:360px){.hero-visual{height:460px}.hero-visual .mail-scene{width:210px}.hero-visual .letter{height:250px}.hero-visual .letter strong{font-size:20px}.hero-visual .letter-footer{font-size:12px}}