/* Locally hosted OFL fonts. Display lettering inspired by the reference UI. */
.portrait-sky.portrait-photo{height:190px;background:#fff;display:flex;align-items:center;justify-content:center}.portrait-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
@font-face{font-family:LimeWhimsy;src:url('assets/fonts/henny-penny.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:LimeHand;src:url('assets/fonts/zcool-kuaile.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--display-cn:LimeHand,'KaiTi',cursive;--display-en:LimeWhimsy,Georgia,serif}
.brand>span{font-family:var(--display-cn);font-weight:400;letter-spacing:2px;font-size:28px}.brand small{font-family:var(--display-en);font-size:10px;letter-spacing:.5px;margin-top:3px}
.site-header{border:0;align-items:flex-start;gap:25px}.site-header nav{gap:25px;padding-top:5px}.site-header nav a{font-size:12px;letter-spacing:1px;display:flex;flex-direction:column-reverse;gap:3px;white-space:nowrap}.site-header nav a span{font:400 20px/1.4 var(--display-en);letter-spacing:0;opacity:1}.site-header nav a:after{content:'✧';height:auto;background:none;width:auto;left:calc(50% - 6px);bottom:-24px;opacity:0;font-size:20px;color:#fff2c9;transition:opacity .2s}.site-header nav a.active:after,.site-header nav a:hover:after{width:auto;left:calc(50% - 6px);opacity:1}.header-actions{padding-top:7px;flex-shrink:0}
.hero-copy h1{font-family:var(--display-cn);font-weight:400;font-size:clamp(53px,5.2vw,80px);letter-spacing:0;line-height:1.26;overflow:visible;margin-bottom:17px;text-shadow:1px 2px 0 #fff8e515,0 3px 22px #1d62724d}.hero-line{overflow:visible;padding:0 16px 5px 0;margin:0}.hero-line:nth-child(2){margin-left:30px}.hero-line:nth-child(3){margin-left:2px}.hero-line:nth-child(3)>span{color:#fffbee}.letter-char{display:inline-block;transform:rotate(var(--tilt)) translateY(var(--lift));transform-origin:50% 75%}.letter-char:nth-child(3n){font-size:1.08em}.letter-char:nth-child(4n){font-size:.93em}.hero-copy{top:24%;left:7.5%}.hero .title-spark{right:-14px;bottom:20px;width:27px;height:27px;color:#fff8dc}.hero-english{display:flex;align-items:center;gap:12px;color:#fffbee;font:400 clamp(19px,2.2vw,29px)/1.65 var(--display-en);white-space:nowrap;margin:0 0 12px -5px;transform:rotate(-3deg)}.hero-english:before,.hero-english:after{content:'✧';font-family:Georgia,serif;font-size:29px}.hero-copy p{margin-top:12px}.hero-curl{position:absolute;left:-48px;top:65px;width:53px;height:132px;color:#fffbea;opacity:.8;overflow:visible}.hero-copy .cream-button{position:relative;border:none;border-bottom:1px solid #fff7db91;background:#487d963b;color:#fffbee;box-shadow:none;border-radius:0;padding:11px 10px;font-size:13px;gap:35px;backdrop-filter:blur(3px);transform:none}.cream-button:before{content:'✳';font-size:25px;color:#ffedb0}.hero-copy .cream-button:hover{background:#fff8e51c;transform:translateX(5px)}
.sky-note{font-family:var(--display-cn);font-size:22px;letter-spacing:1px}.section-heading h2,.about-copy h2,.letter-paper h2,.reader-dialog h2,.note-dialog h2{font-family:var(--display-cn);font-weight:400;letter-spacing:1px}.section-heading h2{font-size:38px}.about-copy h2{font-size:43px}.postcard h3,.feeling-option strong,.feeling-display h3,.identity-card>strong,.closing>span{font-family:var(--display-cn);font-weight:400}.identity-card>strong{font-size:19px}.feeling-display h3{font-size:31px}.postcard h3{font-size:26px}.self-writing,.summer-writing,.map-writing,.letter-signature{font-family:var(--display-cn)}
.section-script{display:block;font:400 29px/1.6 var(--display-en);color:#629291;letter-spacing:0;margin-bottom:2px}.section-script:before{content:'✧';font:24px Georgia,serif;margin-right:10px;color:#cba56d}.section-heading .eyebrow,.about-copy>.eyebrow,.letter-paper>.eyebrow{font-size:8px;letter-spacing:2px;color:#9ca998}.ornament-divider{display:flex;align-items:center;gap:9px;color:#98b1a0;margin:8px 0 18px;width:190px}.ornament-divider:before,.ornament-divider:after{content:'';height:1px;flex:1;background:currentColor;opacity:.5}.ornament-divider span{font-size:16px}.sky-switch,.bgm-toggle{border-color:#fffce559;background:#ffffff08;border-radius:3px}.handwritten,.about-scribble{font-family:var(--display-en);font-style:normal}.ticker{letter-spacing:1px}.ticker>span:nth-of-type(odd){font:14px var(--display-en)}
.hero-line>span{animation-name:ink-arrive}.hero-english{animation:ink-arrive 1.2s 2.15s both}.hero-curl path{stroke-dasharray:280;stroke-dashoffset:0;animation:curl-draw 2s 2s both}@keyframes curl-draw{from{stroke-dashoffset:280}to{stroke-dashoffset:0}}
@media(min-width:761px) and (max-width:1150px){.site-header{flex-wrap:wrap;gap:12px;padding-top:20px}.site-header nav{order:3;width:100%;justify-content:center;gap:45px;padding-top:0}.site-header nav a span{font-size:17px}.hero-copy{top:29%}.brand>span{font-size:25px}}
@media(max-width:760px){.site-header{gap:10px;padding:18px 5%}.brand>span{font-size:24px}.brand small{font-size:9px}.brand>svg{width:30px;height:30px}.brand{gap:7px}.header-actions{gap:4px;padding:0}.sky-switch{padding:6px}.sky-label{display:none}.bgm-toggle{font-size:8px;letter-spacing:0;padding:7px}.site-header nav{margin-top:7px;padding-top:12px;gap:12px}.site-header nav a{font-size:10px;gap:0}.site-header nav a span{font-size:16px;line-height:1.7}.site-header nav a:after{bottom:-20px;font-size:15px}.hero-copy{left:9%;top:28%}.hero-copy h1{font-size:57px;line-height:1.2}.hero-line:nth-child(2){margin-left:20px}.hero-english{font-size:19px;gap:6px;margin-left:0}.hero-english:before,.hero-english:after{font-size:21px}.hero-curl{left:-28px;top:56px;width:31px;height:114px}.hero-copy p{font-size:11px}.hero .title-spark{right:3px;bottom:9px;width:22px;height:22px}.hero-copy .cream-button{font-size:12px;gap:18px}.sky-note{font-size:18px}.section-heading h2{font-size:29px}.about-copy h2{font-size:35px}.section-script{font-size:25px}.postcard h3{font-size:24px}.feeling-option strong{font-size:16px}.feeling-display h3{font-size:28px}.letter-paper h2{font-size:28px}.closing>span{font-size:22px}.self-writing,.summer-writing,.map-writing{font-size:29px}.hero-english{white-space:normal}}
@media(max-width:360px){.hero-copy h1{font-size:49px}.brand small{font-size:8px}.site-header nav a span{font-size:14px}.header-actions{gap:3px}.brand>svg{width:25px}.hero-english{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hero-curl path{stroke-dashoffset:0}.hero-english{opacity:1}}

/* Keep the intro and scroll hint in document flow, including when copy wraps. */
.hero {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: max(760px, 94svh);
  max-height: none;
  padding: 200px 7.5% 64px;
}
.hero-copy {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}
.hero-bottom {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
  padding-top: 48px;
  gap: 24px;
}
@media (max-width: 1150px) {
  .hero { padding-top: 220px; }
}
@media (max-width: 760px) {
  .hero {
    min-height: 850px;
    padding: 220px 9% 52px;
  }
  .sky-note {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    align-self: flex-end;
    margin: 36px 0 0;
    max-width: 100%;
  }
  .hero-bottom { padding-top: 40px; }
  .hero-copy .cream-button { max-width: 100%; }
  .hero-copy .cream-button svg { flex-shrink: 0; }
}