/* A continuous sea with an editorial opening, not section-shaped surfaces.
   About preview: variance 7 / motion 5 / density 3. */
body.about-page{background:#062334;--muted:#c3dce4}
body.about-page .ocean{background:radial-gradient(ellipse at 85% 90%,#2baec5,#062334 70%);opacity:1}
#soffit-sea{position:fixed;inset:0;width:100%;height:100dvh;z-index:0;pointer-events:none;visibility:hidden}
#soffit-sea[data-ready="true"]{visibility:visible}
body.about-page .bubble-layer{display:none}
body.about-page main{background:linear-gradient(90deg,#031b2b99,#031b2b80);isolation:isolate}
body.about-page .site-header{background:#062334b8;backdrop-filter:blur(16px);border:0}
body.about-page .site-footer{position:relative;background:#06233499;border:0}
body.about-page main .about-hero{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:0;min-height:780px;min-height:min(900px,100svh);padding-top:100px;padding-bottom:70px}
body.about-page .about-hero-copy{grid-column:1/8;grid-row:1;z-index:2;align-self:center}
:root body.about-page main .about-hero-copy h1{max-width:none;font-size:clamp(44px,5.3vw,72px);line-height:1.1;margin:0 0 44px;font-weight:500;letter-spacing:-.045em}
body.about-page main .about-hero-copy h1 .hello{font-size:.46em;display:block;margin-bottom:18px;letter-spacing:.03em}
body.about-page .hello-stop{display:inline!important;color:#91d5dc}
:root body.about-page main .about-hero-copy .personal-hook{font-size:var(--hf-body);line-height:1.9;margin:0 0 24px;max-width:22em;color:#d7e9ee}
body.about-page main .about-figure{grid-column:7/13;grid-row:1;align-self:center;justify-self:center;width:115%;margin:20px 0 0;opacity:1;pointer-events:none;z-index:1}
body.about-page .about-figure img{max-height:610px;object-fit:contain;filter:drop-shadow(0 30px 40px #06233455)}
body.about-page main .about-cta{font-size:14px;margin-top:0;text-decoration:none;border:0!important;padding-block:12px;transition:color .2s}
body.about-page main .about-cta:hover{color:#aff3ed}
.sea-pause{position:absolute;right:0;bottom:32px;padding:12px 0 12px 12px;border:0;background:none;color:#d7e9ee;font:12px/1.5 var(--hf-font);cursor:pointer;text-decoration:underline;text-underline-offset:5px}
body.about-page main .about-story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;padding:70px 0 130px;position:relative}
body.about-page .story-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.about-page .story-copy{display:contents}
body.about-page main .story-copy .story-lead{grid-column:2/12;font:500 clamp(24px,2.6vw,36px)/1.65 var(--hf-font)!important;color:#f0f8fa;letter-spacing:-.035em;margin:0}
body.about-page main .story-explanation{grid-column:6/12;font:400 var(--hf-body)/1.95 var(--hf-font);margin:40px 0 0;color:#d1e5eb}
body.about-page .personal-aside{grid-column:2/5;grid-row:2;margin-top:50px;align-self:start;color:#d1e5eb;font:400 14px/1.9 var(--hf-font)}
body.about-page .personal-aside summary{cursor:pointer;list-style:none;padding:10px 0;width:fit-content;color:#a5e7e5;text-decoration:underline;text-underline-offset:7px}
body.about-page .personal-aside summary::-webkit-details-marker{display:none}
body.about-page .personal-aside summary span{display:inline-block;transition:rotate .2s}
body.about-page .personal-aside[open] summary span{rotate:45deg}
body.about-page .personal-aside p{margin:18px 0 0;font:inherit;color:inherit}
body.about-page summary:focus-visible,body.about-page .sea-pause:focus-visible{outline:2px solid #b2f5e4;outline-offset:5px}
:root:not([lang="zh-CN"]) .zh-break{display:none}
@media(max-width:900px){body.about-page main .about-hero{min-height:690px}body.about-page .about-hero-copy{grid-column:1/9}body.about-page main .about-figure{grid-column:7/13;width:140%}body.about-page main .story-lead{grid-column:1/13}body.about-page main .story-explanation{grid-column:5/13}body.about-page .personal-aside{grid-column:1/4}}
@media(max-width:680px){
 body.about-page main .about-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));min-height:640px;padding:110px 0 52px;align-items:start}
 body.about-page .about-hero-copy{grid-column:1/13;align-self:start}
 :root body.about-page main .about-hero-copy h1{font-size:44px;margin-bottom:28px}
 :root body.about-page main .about-hero-copy .personal-hook{max-width:15em;font-size:15px}
 body.about-page main .about-figure{grid-column:5/13;align-self:end;width:119%;margin:0 -6% 0 0;transform:translateY(14px)}
 body.about-page .about-figure img{max-height:310px}
 body.about-page main .about-cta{font-size:13px;position:relative;z-index:3}
 .sea-pause{bottom:8px;font-size:11px}
 body.about-page main .about-story{padding:72px 0 90px;grid-template-columns:repeat(12,minmax(0,1fr))}
 body.about-page main .story-copy .story-lead{font-size:24px!important;grid-column:1/13;line-height:1.7}
 body.about-page main .story-explanation{grid-column:3/13;margin-top:32px;font-size:15px;line-height:1.95}
 body.about-page .personal-aside{grid-column:3/13;grid-row:auto;margin-top:18px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){body.about-page .about-figure img{animation:none}body.about-page .personal-aside summary span{transition:none}}
