/* Quiet ink, an open sky, and a gently played name. */
.hero{position:relative;isolation:isolate}
.hero-copy{z-index:1;padding-top:17px;padding-bottom:26px}
.hero-atmosphere{position:absolute;z-index:-1;inset:0 -5% auto;height:470px;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#d4ebf7 0%,#e4f1f8 35%,#f2f6f7 61%,#fbfaf7 83%);mask-image:linear-gradient(transparent 0%,#000 23%,#000 61%,transparent 100%)}
.sky-cloud{position:absolute;width:174px;opacity:.74;filter:blur(.35px);animation:cloud-drift 76s ease-in-out infinite alternate;mask-image:linear-gradient(#000 40%,#0008 65%,transparent 81%)}
.sky-cloud-a{left:9%;top:49px;transform:rotate(-3deg)}
.sky-cloud-b{right:19%;top:-25px;width:161px;opacity:.66;animation-duration:91s;animation-delay:-29s}
.sky-cloud-c{left:77%;top:203px;width:103px;opacity:.52;animation-duration:83s;animation-delay:-18s}
@keyframes cloud-drift{from{transform:translate3d(-15px,0,0)}to{transform:translate3d(26px,-7px,0)}}
.hero h1{font-size:clamp(56px,8.4vw,112px);font-weight:700;letter-spacing:-.057em;line-height:1.13;color:#20211f}
.resonant-name{position:relative;display:inline-block;white-space:nowrap;cursor:default;touch-action:pan-y}
.name-letters{display:inline-block;white-space:pre}
.name-letter{display:inline-block;transform-origin:50% 85%;overflow:visible}
.resonant-name.is-ready .name-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-sound{position:absolute;right:0;top:23px;border:0;border-bottom:1px solid #aec6cf;background:transparent;color:#607b88;padding:3px 0 5px;font-size:12px;display:flex;align-items:center;gap:7px}
.hero-sound:hover{color:var(--ink)}.hero-sound[aria-pressed=true]{color:var(--blue)}.sound-mark{font-family:serif;font-size:17px;line-height:1}
.title-hint{display:block;font:24px/1.3 'Caveat',cursive;color:#557587;letter-spacing:0;margin:17px 0 25px}
.hero-bio{position:relative}
@media(max-width:900px){.hero h1{font-size:clamp(52px,8.5vw,76px)}.chinese-name{margin-left:14px}}
@media(max-width:650px){.hero-copy{padding-top:33px;padding-bottom:15px}.hero-sound{top:-8px}.hero h1{font-size:clamp(38px,11.8vw,67px);letter-spacing:-.055em}.chinese-name{display:block;margin:13px 0 0}.hero-atmosphere{height:414px;inset:0 -12% auto}.sky-cloud-a{left:0;top:67px;width:109px}.sky-cloud-b{right:24%;top:-23px;width:98px}.sky-cloud-c{left:78%;top:211px;width:78px}.title-hint{font-size:21px;margin:17px 0 25px}}
@media(prefers-reduced-motion:reduce){.sky-cloud{animation:none}.name-letter{transform:none!important;will-change:auto}}
@media print{.hero-atmosphere,.hero-sound{display:none!important}.name-letter{transform:none!important}}
.hero-bio br{display:initial}
/* The Chinese signature joins the same soft, elastic gesture. */
.chinese-name{font-size:22px;font-weight:500;letter-spacing:4px;color:#606960;margin-left:24px}
.chinese-name .name-letter{transform-origin:50% 90%}
.contact-emails{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.contact-emails .contact-email{margin-top:0;max-width:100%}
@media(max-width:900px){.chinese-name{font-size:19px;margin-left:17px}}
@media(max-width:650px){.chinese-name{display:block;width:max-content;font-size:18px;letter-spacing:5px;margin:18px auto 0}.hero-links{gap:10px}.contact-emails{gap:12px}}